Andreas Reinhold / reiniandClaude Opus 5
b48e879254
tests / lint (push) Successful in 1m0s
tests / feature (8.4) (push) Successful in 1m0s
tests / feature (8.5) (push) Successful in 1m1s
tests / browser (safari, webkit) (push) Successful in 1m59s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
Colour, shape, type, elevation and motion as tokens and Tailwind utilities; `php artisan material:scheme`, which generates an app's colour roles with Google's material-color-utilities (spec 2025); the theme head script with light, dark and system and its Alpine store; Google Sans Flex; every Material Symbol (4,135, outlined and filled) drawn by <x-icon> without blade-icons; all 35 M3 Expressive shapes, ported from androidx, as <x-shape>; the x-figure directive; the Toasts concern; DesignGuard for applications' tests; and a showcase with every token, both themes side by side and an icon search. Colour utilities are `@theme inline`, so a section with its own data-theme repaints; without it they resolve once on :root. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
36 lines
1.8 KiB
PHP
36 lines
1.8 KiB
PHP
<?php
|
|
|
|
use Illuminate\View\ViewException;
|
|
use NoNameWeb\LivewireMaterial\Support\SvgFile;
|
|
|
|
it('ships M3 Expressive\'s 35 shapes', function () {
|
|
expect(SvgFile::shapeNames())->toHaveCount(35)
|
|
->toContain('circle', 'cookie-9', 'clover-4', 'soft-burst', 'pixel-triangle', 'heart');
|
|
});
|
|
|
|
it('draws every shape as one path in the text colour, filling a 100-unit box', function () {
|
|
foreach (SvgFile::shapeNames() as $shape) {
|
|
$svg = file_get_contents(__DIR__."/../../../resources/svg/shapes/{$shape}.svg");
|
|
|
|
expect($svg)->toMatch('#^<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor"><path d="[MCZ0-9. -]+"/></svg>\n$#');
|
|
|
|
preg_match_all('/-?\d+(?:\.\d+)?/', str($svg)->after(' d="')->before('"')->toString(), $numbers);
|
|
$xs = array_map('floatval', array_filter($numbers[0], fn ($key) => $key % 2 === 0, ARRAY_FILTER_USE_KEY));
|
|
$ys = array_map('floatval', array_filter($numbers[0], fn ($key) => $key % 2 === 1, ARRAY_FILTER_USE_KEY));
|
|
|
|
expect(min([...$xs, ...$ys]))->toBeGreaterThanOrEqual(0)
|
|
->and(max([...$xs, ...$ys]))->toBeLessThanOrEqual(100)
|
|
->and(max(max($xs) - min($xs), max($ys) - min($ys)))->toBeGreaterThanOrEqual(96, "{$shape} does not fill its box");
|
|
}
|
|
});
|
|
|
|
it('renders a shape hidden from assistive tech', function () {
|
|
$this->blade('<x-shape name="cookie-9" class="size-20 text-secondary-container" />')
|
|
->assertSee('<svg aria-hidden="true" focusable="false" class="size-20 text-secondary-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"', false);
|
|
});
|
|
|
|
it('refuses a shape that does not exist', function () {
|
|
expect(fn () => $this->blade('<x-shape name="blob" />'))
|
|
->toThrow(ViewException::class, 'There is no M3 Expressive shape named [blob].');
|
|
});
|