Draw the stat card without Tailwind

Plan step 36 (actions). <x-stat> renders data-md-stat with
data-md-stat-header/-value/-description/-extra; no class list.
stat.css draws the surface-container panel, the label-large header,
the value as an emphasized-headline-md hero with tabular figures, and
the body-small description. StatTest is rewritten on the hooks and
ComponentStylesheet.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 16:49:47 +02:00
co-authored by Claude Opus 5
parent 05c3b968ba
commit 4cc905b144
5 changed files with 84 additions and 10 deletions
@@ -29,6 +29,7 @@ dataset('action components', [
'toast',
'progress',
'alert',
'stat',
]);
it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {
+23 -3
View File
@@ -1,14 +1,34 @@
<?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
it('shows a figure that counts, with its title and description', function () {
$html = (string) $this->blade('<x-stat title="Shares" value="1,204" icon="link" description="12 this week"><span>quota</span></x-stat>');
expect($html)
->toContain('bg-surface-container')
->toContain('data-md-stat')
->toContain('Shares')
->toContain('data-md-stat-value')
->toContain('x-figure>1,204</p>')
->toContain('type-emphasized-headline-md tabular-nums')
->toContain('data-md-stat-description')
->toContain('12 this week')
->toContain('data-md-stat-extra')
->toContain('<span>quota</span>')
->toContain('<svg');
->toContain('<svg')
->and(ComponentStylesheet::read('stat')->declarations('[data-md-stat]'))->toMatchArray([
'background-color' => 'var(--md-sys-color-surface-container)',
'border-radius' => 'var(--md-sys-shape-corner-lg)',
])
->and(ComponentStylesheet::read('stat')->declarations('[data-md-stat-value]'))->toMatchArray([
'font' => 'var(--md-sys-typescale-emphasized-headline-md)',
'font-variant-numeric' => 'tabular-nums',
]);
});
it('leaves out the description and slot when there is neither', function () {
$html = (string) $this->blade('<x-stat title="Files" value="8,317" />');
expect($html)
->not->toContain('data-md-stat-description')
->not->toContain('data-md-stat-extra');
});