Andreas Reinhold / reiniandClaude Opus 5
99e73fdc58
Plan step 36 (actions, last of the batch). <x-empty-state> renders data-md-empty-state with data-md-empty-state-illustration/-shape/ -icon/-title/-description/-actions; no class list. empty-state.css draws the secondary-container shape behind the on-secondary-container icon (the icon needs its own stacking context to paint above the shape's absolute position), the title-large title and the 448px body-medium description. The docblock's illustration example moves from a caller class to a caller style, since the shape rule scans the whole file. EmptyStateTest 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
60 lines
2.6 KiB
PHP
60 lines
2.6 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
|
|
|
|
it('sets an icon on an Expressive shape above its words and action', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-empty-state icon="upload_file" shape="flower" title="No shares yet" description="Files you share appear here.">
|
|
<x-slot:actions><x-button label="Upload files" /></x-slot:actions>
|
|
</x-empty-state>
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('data-md-empty-state')
|
|
->toContain('data-md-empty-state-shape')
|
|
->toContain('data-md-empty-state-icon')
|
|
->toContain('<h3 data-md-empty-state-title>No shares yet</h3>')
|
|
->toContain('data-md-empty-state-description')
|
|
->toContain('Files you share appear here.')
|
|
->toContain('data-md-empty-state-actions')
|
|
->toContain('Upload files')
|
|
->and(substr_count($html, '<svg'))->toBe(2)
|
|
->and(ComponentStylesheet::read('empty-state')->declarations('[data-md-empty-state-shape]'))->toMatchArray([
|
|
'color' => 'var(--md-sys-color-secondary-container)',
|
|
])
|
|
->and(ComponentStylesheet::read('empty-state')->declarations('[data-md-empty-state-icon]'))->toMatchArray([
|
|
'color' => 'var(--md-sys-color-on-secondary-container)',
|
|
]);
|
|
});
|
|
|
|
it('draws an illustration in place of the shape and icon', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-empty-state icon="upload_file" title="No routes yet">
|
|
<x-slot:illustration class="text-primary"><svg class="size-32" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></x-slot:illustration>
|
|
</x-empty-state>
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('<div class="text-primary"><svg class="size-32" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></div>')
|
|
->not->toContain('data-md-empty-state-shape')
|
|
->not->toContain('data-md-empty-state-icon')
|
|
->toContain('No routes yet')
|
|
->and(substr_count($html, '<svg'))->toBe(1);
|
|
});
|
|
|
|
it('keeps the shape and icon while the illustration slot holds nothing but comments', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-empty-state title="No shares yet">
|
|
<x-slot:illustration>
|
|
<!-- artwork to come -->
|
|
</x-slot:illustration>
|
|
</x-empty-state>
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('data-md-empty-state-shape')
|
|
->toContain('data-md-empty-state-icon')
|
|
->not->toContain('artwork to come')
|
|
->and(substr_count($html, '<svg'))->toBe(2);
|
|
});
|