From 889f8a8aa182554889d32b6b6fafcfa3e3947a1c Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Sun, 13 Sep 2026 09:30:26 +0200 Subject: [PATCH] Put the showcase in the app shell, with a page per section The showcase is now an overview and one page per section behind a grouped navigation rail, moved between with wire:navigate, instead of one long page under a scrolling top bar. The switch exposed a WebKit bug in the menu: inside a focusable region, WebKit moves focus out of the closing popover before its toggle event, so Escape no longer returned focus to the trigger. The menu now reads it on beforetoggle. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy --- README.md | 2 +- docs/plans/livewire-material.md | 9 ++- resources/js/menu.js | 12 +++- resources/views/showcase/index.blade.php | 56 ++++++++------- resources/views/showcase/layout.blade.php | 77 +++++++++++++-------- resources/views/showcase/section.blade.php | 29 ++++++++ resources/views/showcase/shell.blade.php | 2 +- routes/showcase.php | 8 ++- src/Http/Controllers/ShowcaseController.php | 25 +++++++ src/Showcase/Sections.php | 39 +++++++++++ tests/Browser/ActionsTest.php | 14 ++-- tests/Browser/CarouselTest.php | 2 +- tests/Browser/ChipsTest.php | 4 +- tests/Browser/CommunicationTest.php | 8 +-- tests/Browser/ContainmentTest.php | 2 +- tests/Browser/ProgressTest.php | 2 +- tests/Browser/ShowcaseTest.php | 14 ++++ tests/Browser/SliderTest.php | 2 +- tests/Browser/ThemeTest.php | 6 +- tests/Feature/ShowcaseTest.php | 19 ++++- 20 files changed, 251 insertions(+), 81 deletions(-) create mode 100644 resources/views/showcase/section.blade.php create mode 100644 src/Http/Controllers/ShowcaseController.php create mode 100644 src/Showcase/Sections.php diff --git a/README.md b/README.md index 5c8d4783..bc4ca602 100644 --- a/README.md +++ b/README.md @@ -124,7 +124,7 @@ Every component, prop and slot is documented in the Boost skill (`resources/boos ## Showcase -While the application runs locally (or with `MATERIAL_SHOWCASE=true`), `/material` renders every token and component, in every variant, in the application's own scheme and theme. +While the application runs locally (or with `MATERIAL_SHOWCASE=true`), `/material` shows every token and component, in every variant, in the application's own scheme and theme: an overview, and a page per section behind a navigation rail (the package's own app shell). ## Testing the design diff --git a/docs/plans/livewire-material.md b/docs/plans/livewire-material.md index 6ba7d19a..f6273b00 100644 --- a/docs/plans/livewire-material.md +++ b/docs/plans/livewire-material.md @@ -589,12 +589,17 @@ pages and the mail theme by an agent in its own worktree. What changed from the `__DIR__.'/../resources/views/components'`: Blade names the view namespace after its hash, and compiled views keep that name. - **A test checks that every component appears in the showcase.** +- **The showcase is the package's own app shell**: an overview at `/material` and a page per section + (`/material/{section}`, `Showcase\Sections`), grouped in the navigation rail, moved between with + wire:navigate. It turned up a WebKit bug in ``: inside a focusable region (the shell's + `
`), WebKit hands focus back to that region as the popover closes, so the + menu now reads whether focus was inside on `beforetoggle` before returning it to the trigger. - **Verified in a fresh Laravel 13.31 application** (`composer create-project`, the package from a path repository, the README's CSS, JS and layout, `material:scheme "#4f46e5"`, `npm run build`): a Livewire page with an app bar, tabs, a card, a form with validation, a date picker, a dialog and a toast works without console errors; `/material` and the 404 page render in its scheme. -- **Known gap:** `` has no clear button (`` does); a date can be - emptied through its text input. +- **``** empties a date, or both ends of a range, as `` + does. ### Phase 11 — SealShare 2.0.0 diff --git a/resources/js/menu.js b/resources/js/menu.js index 993ea64f..345a990d 100644 --- a/resources/js/menu.js +++ b/resources/js/menu.js @@ -15,6 +15,7 @@ document.addEventListener('alpine:init', () => { window.Alpine.data('materialMenu', () => ({ closedAt: -Infinity, returnFocus: true, + focusWasInside: false, listeners: [], init() { @@ -26,6 +27,13 @@ document.addEventListener('alpine:init', () => { // and close() have already done their part, synchronously, because this event is // queued and a screen reader or a test reading aria-expanded in between would be told // the menu is shut. + // Whether focus was in the menu is read before it closes: once closed, a browser may + // already have handed focus to what had it before the menu opened (WebKit does, when + // that was a focusable region around the trigger). + this.listen(menu, 'beforetoggle', (event) => { + this.focusWasInside = event.newState === 'closed' && menu.contains(document.activeElement) + }) + this.listen(menu, 'toggle', (event) => { const opened = event.newState === 'open' @@ -37,9 +45,11 @@ document.addEventListener('alpine:init', () => { this.closedAt = performance.now() - if (this.returnFocus && menu.contains(document.activeElement)) { + if (this.returnFocus && (this.focusWasInside || menu.contains(document.activeElement))) { this.control()?.focus() } + + this.focusWasInside = false }) // A press outside closes the menu without pulling focus back to the trigger. diff --git a/resources/views/showcase/index.blade.php b/resources/views/showcase/index.blade.php index c4bea848..36205e28 100644 --- a/resources/views/showcase/index.blade.php +++ b/resources/views/showcase/index.blade.php @@ -1,31 +1,35 @@ @extends('livewire-material::showcase.layout') @section('content') -
-

- Every token and component, in this application's own scheme. -

+
+
+

Material 3 Expressive for Laravel and Livewire.

+

+ Every token and component, rendered in this application's own scheme and theme. Pick a section in the + navigation, or start below. +

+
- @include('livewire-material::showcase.sections.colour') - @include('livewire-material::showcase.sections.type') - @include('livewire-material::showcase.sections.shape') - @include('livewire-material::showcase.sections.elevation') - @include('livewire-material::showcase.sections.motion') - @include('livewire-material::showcase.sections.icons') - @include('livewire-material::showcase.sections.buttons') - @include('livewire-material::showcase.sections.menus') - @include('livewire-material::showcase.sections.communication') - @include('livewire-material::showcase.sections.progress') - @include('livewire-material::showcase.sections.containment') - @include('livewire-material::showcase.sections.carousel') - @include('livewire-material::showcase.sections.fields') - @include('livewire-material::showcase.sections.chips') - @include('livewire-material::showcase.sections.sliders') - @include('livewire-material::showcase.sections.pickers') - @include('livewire-material::showcase.sections.timepickers') - @include('livewire-material::showcase.sections.bars') - @include('livewire-material::showcase.sections.navigation') - @include('livewire-material::showcase.sections.data') - @include('livewire-material::showcase.sections.pages') -
+ @foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries) +
+

{{ $group }}

+ +
+ @foreach ($entries as $key => $entry) + +
+ + + +
+ {{ $entry['title'] }} +

{{ $entry['description'] }}

+
+
+ + @endforeach +
+
+ @endforeach + @endsection diff --git a/resources/views/showcase/layout.blade.php b/resources/views/showcase/layout.blade.php index 93e73bd7..f8414a7c 100644 --- a/resources/views/showcase/layout.blade.php +++ b/resources/views/showcase/layout.blade.php @@ -1,46 +1,67 @@ +{{-- The showcase's frame, and the package's own app shell at work: the rail groups every section, + collapses and expands from `lg`, and opens as a modal from the app bar's menu button on a phone. + Pages move with wire:navigate, so the rail keeps its place and the theme stays. --}} + +@php + $sections ??= \NoNameWeb\LivewireMaterial\Showcase\Sections::all(); + $section ??= null; + $title = $section !== null ? $sections[$section]['title'] : 'Livewire Material'; + + $destinations = [[ + 'title' => 'Overview', + 'icon' => 'home', + 'url' => route('livewire-material.showcase'), + 'active' => $section === null, + 'bar' => false, + ]]; + + foreach ($sections as $key => $entry) { + $destinations[] = [ + 'title' => $entry['title'], + 'icon' => $entry['icon'], + 'url' => route('livewire-material.section', $key), + 'active' => $key === $section, + 'section' => $entry['group'], + 'bar' => false, + ]; + } +@endphp + - + - @yield('title', 'Livewire Material') + {{ $section !== null ? $title.' · Livewire Material' : 'Livewire Material' }} @vite(config('livewire-material.showcase.vite')) @livewireStyles - -
-
- Livewire Material + + + + Livewire Material + - + + + + + -
- @foreach (['light' => 'Light', 'dark' => 'Dark', 'system' => 'System'] as $choice => $label) - - @endforeach -
-
-
+ + + + + + - @yield('content') - - + @yield('content') + @livewireScripts diff --git a/resources/views/showcase/section.blade.php b/resources/views/showcase/section.blade.php new file mode 100644 index 00000000..df054b3d --- /dev/null +++ b/resources/views/showcase/section.blade.php @@ -0,0 +1,29 @@ +{{-- One section of the showcase on a page of its own, with the way on to the next. The section's + own heading repeats the app bar's title, so only a screen reader hears it. --}} + +@extends('livewire-material::showcase.layout') + +@php + $keys = array_keys($sections); + $at = array_search($section, $keys, true); + $previous = $keys[$at - 1] ?? null; + $next = $keys[$at + 1] ?? null; +@endphp + +@section('content') +
+ @include('livewire-material::showcase.sections.'.$section) + + +
+@endsection diff --git a/resources/views/showcase/shell.blade.php b/resources/views/showcase/shell.blade.php index 96d04553..fba59b7c 100644 --- a/resources/views/showcase/shell.blade.php +++ b/resources/views/showcase/shell.blade.php @@ -77,7 +77,7 @@
- +
diff --git a/routes/showcase.php b/routes/showcase.php index 57e7df26..fbb137db 100644 --- a/routes/showcase.php +++ b/routes/showcase.php @@ -1,10 +1,12 @@ name('showcase'); +Route::get('/', [ShowcaseController::class, 'index'])->name('showcase'); Route::get('symbols.json', [ShowcaseSymbolController::class, 'index'])->name('symbols'); Route::get('symbols/{style}/{name}.svg', [ShowcaseSymbolController::class, 'show'])->name('symbol'); @@ -17,3 +19,7 @@ Route::get('errors/{code}', [ShowcasePageController::class, 'error']) ->whereIn('code', ['401', '402', '403', '404', '419', '429', '500', '503']) ->name('error'); Route::get('mail', [ShowcasePageController::class, 'mail'])->name('mail'); + +Route::get('{section}', [ShowcaseController::class, 'section']) + ->whereIn('section', array_keys(Sections::all())) + ->name('section'); diff --git a/src/Http/Controllers/ShowcaseController.php b/src/Http/Controllers/ShowcaseController.php new file mode 100644 index 00000000..e063bc58 --- /dev/null +++ b/src/Http/Controllers/ShowcaseController.php @@ -0,0 +1,25 @@ + Sections::all()]); + } + + public function section(string $section): View + { + return view('livewire-material::showcase.section', [ + 'sections' => Sections::all(), + 'section' => $section, + ]); + } +} diff --git a/src/Showcase/Sections.php b/src/Showcase/Sections.php new file mode 100644 index 00000000..481af10b --- /dev/null +++ b/src/Showcase/Sections.php @@ -0,0 +1,39 @@ + + */ + public static function all(): array + { + return [ + 'colour' => ['title' => 'Colour', 'icon' => 'palette', 'group' => 'Foundations', 'description' => 'Every colour role of the generated scheme, light and dark.'], + 'type' => ['title' => 'Type', 'icon' => 'text_fields', 'group' => 'Foundations', 'description' => 'The typescale, emphasized styles included, in Google Sans Flex.'], + 'shape' => ['title' => 'Shape', 'icon' => 'interests', 'group' => 'Foundations', 'description' => 'Corner radii and the 35 M3 Expressive shapes.'], + 'elevation' => ['title' => 'Elevation', 'icon' => 'layers', 'group' => 'Foundations', 'description' => 'Shadows for what floats over content.'], + 'motion' => ['title' => 'Motion', 'icon' => 'animation', 'group' => 'Foundations', 'description' => 'Spatial springs and effects easings.'], + 'icons' => ['title' => 'Icons', 'icon' => 'emoji_symbols', 'group' => 'Foundations', 'description' => 'Every Material Symbol, searchable, outlined and filled.'], + 'buttons' => ['title' => 'Buttons', 'icon' => 'smart_button', 'group' => 'Actions', 'description' => 'Buttons, icon buttons, groups, split buttons and FABs.'], + 'menus' => ['title' => 'Menus', 'icon' => 'menu_open', 'group' => 'Actions', 'description' => 'Menus with items, groups, choices and shortcuts.'], + 'chips' => ['title' => 'Chips', 'icon' => 'sell', 'group' => 'Actions', 'description' => 'Assist, filter, input and suggestion chips.'], + 'communication' => ['title' => 'Communication', 'icon' => 'notifications', 'group' => 'Communication', 'description' => 'Badges, snackbars, tooltips, alerts, stats and empty states.'], + 'progress' => ['title' => 'Progress', 'icon' => 'progress_activity', 'group' => 'Communication', 'description' => 'Linear, circular and wavy progress, and the loading indicator.'], + 'containment' => ['title' => 'Containment', 'icon' => 'web_asset', 'group' => 'Containment', 'description' => 'Cards, lists, dividers, dialogs and sheets.'], + 'carousel' => ['title' => 'Carousel', 'icon' => 'view_carousel', 'group' => 'Containment', 'description' => 'Multi-browse, hero, uncontained and full-screen carousels.'], + 'fields' => ['title' => 'Text fields', 'icon' => 'edit_note', 'group' => 'Inputs', 'description' => 'Text fields, selects, checkboxes, radios, switches, choices and search.'], + 'sliders' => ['title' => 'Sliders', 'icon' => 'tune', 'group' => 'Inputs', 'description' => 'Standard, centered and range sliders in five sizes.'], + 'pickers' => ['title' => 'Date pickers', 'icon' => 'calendar_month', 'group' => 'Inputs', 'description' => 'Docked, modal and input date pickers, single and range.'], + 'timepickers' => ['title' => 'Time pickers', 'icon' => 'schedule', 'group' => 'Inputs', 'description' => 'The dial and input time picker.'], + 'bars' => ['title' => 'App bars and tabs', 'icon' => 'toolbar', 'group' => 'Navigation', 'description' => 'Top app bars, toolbars, tabs, section navigation and the account menu.'], + 'navigation' => ['title' => 'Navigation', 'icon' => 'explore', 'group' => 'Navigation', 'description' => 'The navigation bar, the navigation rail and the app shell.'], + 'data' => ['title' => 'Data', 'icon' => 'table_chart', 'group' => 'Data and pages', 'description' => 'Data tables, sort headers and pagination.'], + 'pages' => ['title' => 'Error pages and mail', 'icon' => 'page_info', 'group' => 'Data and pages', 'description' => 'The HTTP error pages and the Markdown mail theme.'], + ]; + } +} diff --git a/tests/Browser/ActionsTest.php b/tests/Browser/ActionsTest.php index f9c0c4aa..03c9ec7a 100644 --- a/tests/Browser/ActionsTest.php +++ b/tests/Browser/ActionsTest.php @@ -2,9 +2,9 @@ const MORE = '#menus [aria-label="More"]'; -function showcase() +function showcase(string $section = 'buttons') { - return visit('/material')->waitForEvent('networkidle') + return visit("/material/{$section}")->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); } @@ -14,7 +14,7 @@ function focused(string $expression): string } it('opens a menu on the first item and walks it with the keyboard', function () { - $page = showcase() + $page = showcase('menus') ->assertNoJavaScriptErrors() ->click(MORE) ->assertAttribute(MORE, 'aria-expanded', 'true') @@ -38,7 +38,7 @@ it('opens a menu on the first item and walks it with the keyboard', function () }); it('opens a menu from the keyboard, on the last item with ArrowUp', function () { - $page = showcase(); + $page = showcase('menus'); $page->script("document.querySelector('".MORE."').focus()"); @@ -50,13 +50,13 @@ it('opens a menu from the keyboard, on the last item with ArrowUp', function () it('opens a menu the moment the page can be used', function () { // The guard against a light-dismiss press reopening the menu once measured from the page's // time origin, and swallowed every click in the first quarter second. - visit('/material') + visit('/material/menus') ->click(MORE) ->assertAttribute(MORE, 'aria-expanded', 'true'); }); it('closes a menu when an item is chosen, but not one that keeps it open', function () { - $page = showcase(); + $page = showcase('menus'); $page->click(MORE) ->click('#menus [role="menuitem"]:has-text("Download")') @@ -76,7 +76,7 @@ it('shows a tooltip on keyboard focus and hides it on Escape', function () { // Firefox only counts a scripted focus as :focus-visible after one. Then focused directly // rather than tabbed to: WebKit, like Safari on macOS, leaves buttons out of the Tab order // unless full keyboard access is on. - $page->keys('body', 'Tab'); + $page->keys('#content', 'Tab'); $page->script("document.querySelector('#buttons [aria-label=\"Tonal\"]').focus()"); $page->assertScript(focused("getAttribute('aria-label') === 'Tonal'")) ->assertScript("{$tooltip}.matches(':popover-open')"); diff --git a/tests/Browser/CarouselTest.php b/tests/Browser/CarouselTest.php index 9a83893c..90cef8a7 100644 --- a/tests/Browser/CarouselTest.php +++ b/tests/Browser/CarouselTest.php @@ -64,7 +64,7 @@ const FIRST_SCROLLER = '#carousel [role="region"] >> nth=0'; function carouselShowcase(array $options = []) { - return visit('/material', $options) + return visit('/material/carousel', $options) ->waitForEvent('networkidle') ->assertScript("typeof window.Alpine !== 'undefined'"); } diff --git a/tests/Browser/ChipsTest.php b/tests/Browser/ChipsTest.php index dd1613d2..55fd60c8 100644 --- a/tests/Browser/ChipsTest.php +++ b/tests/Browser/ChipsTest.php @@ -74,7 +74,7 @@ function chipProbe() function chipShowcase() { - return visit('/material')->waitForEvent('networkidle') + return visit('/material/chips')->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); } @@ -99,7 +99,7 @@ it('toggles a filter chip with a click and with Space, and grows its check in', // A key press first, so the browser is in keyboard modality; focused directly, not tabbed to, // because WebKit leaves form controls out of the Tab order unless full keyboard access is on. - $page->keys('body', 'Tab'); + $page->keys('#content', 'Tab'); $page->script(filterInput('archives').'.focus()'); $page->keys(':focus', 'Space') ->assertScript(filterInput('archives').'.checked') diff --git a/tests/Browser/CommunicationTest.php b/tests/Browser/CommunicationTest.php index 91878ad5..7e3e7eeb 100644 --- a/tests/Browser/CommunicationTest.php +++ b/tests/Browser/CommunicationTest.php @@ -3,7 +3,7 @@ const SNACKBAR = "document.querySelector('[x-data=\"materialSnackbar\"] [aria-live]')"; it('shows a toast as a snackbar, then the next in turn', function () { - $page = visit('/material')->waitForEvent('networkidle') + $page = visit('/material/communication')->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); $page->script("materialToast('First', { type: 'success', timeout: 600 }); materialToast('Second', { type: 'error' })"); @@ -18,7 +18,7 @@ it('shows a toast as a snackbar, then the next in turn', function () { }); it('shows a toast dispatched as a browser event, as the Toasts concern does', function () { - $page = visit('/material')->waitForEvent('networkidle') + $page = visit('/material/communication')->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); // Through Livewire, in the page's own realm: an event built inside Playwright's evaluate @@ -29,7 +29,7 @@ it('shows a toast dispatched as a browser event, as the Toasts concern does', fu }); it('runs a toast\'s action and dismisses it', function () { - $page = visit('/material')->waitForEvent('networkidle') + $page = visit('/material/communication')->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); $page->script("window.__undone = false; materialToast('Share deleted', { action: { label: 'Undo', handler: () => window.__undone = true } })"); @@ -42,7 +42,7 @@ it('runs a toast\'s action and dismisses it', function () { it('opens a persistent rich tooltip on press', function () { $bubble = "document.querySelector('#communication [role=\"dialog\"][popover]')"; - visit('/material')->waitForEvent('networkidle') + visit('/material/communication')->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'") ->click('#communication button:has-text("Press for details")') ->assertScript("{$bubble}.matches(':popover-open')"); diff --git a/tests/Browser/ContainmentTest.php b/tests/Browser/ContainmentTest.php index ab595095..5e76a92d 100644 --- a/tests/Browser/ContainmentTest.php +++ b/tests/Browser/ContainmentTest.php @@ -66,7 +66,7 @@ function overlayProbe() function containment() { - return visit('/material')->waitForEvent('networkidle') + return visit('/material/containment')->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); } diff --git a/tests/Browser/ProgressTest.php b/tests/Browser/ProgressTest.php index c78f43d2..7504751a 100644 --- a/tests/Browser/ProgressTest.php +++ b/tests/Browser/ProgressTest.php @@ -55,7 +55,7 @@ function progressShowcase(array $options = []) { // networkidle alone can return before a repeated visit has even loaded in Firefox; the // assertion retries until the page is complete and Alpine has started. - return visit('/material', $options)->waitForEvent('networkidle') + return visit('/material/progress', $options)->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); } diff --git a/tests/Browser/ShowcaseTest.php b/tests/Browser/ShowcaseTest.php index 63be6873..7c24acbc 100644 --- a/tests/Browser/ShowcaseTest.php +++ b/tests/Browser/ShowcaseTest.php @@ -5,3 +5,17 @@ it('opens the showcase in a real browser', function () { ->assertSee('Livewire Material') ->assertNoJavaScriptErrors(); }); + +it('moves between sections through the rail and the next-section link, keeping the rail', function () { + $page = visit('/material')->waitForEvent('networkidle') + ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); + + $page->click('[data-navigation-rail-panel] a[href$="/material/buttons"]') + ->assertSee('Variants') + ->assertScript("document.querySelector('[data-navigation-rail-panel] [aria-current=\"page\"]').getAttribute('href').endsWith('/material/buttons')") + ->assertScript("document.title === 'Buttons · Livewire Material'"); + + $page->click('[data-test="next-section"]') + ->assertScript("location.pathname.endsWith('/material/menus')") + ->assertNoJavaScriptErrors(); +}); diff --git a/tests/Browser/SliderTest.php b/tests/Browser/SliderTest.php index 59ce8164..b9aa48a6 100644 --- a/tests/Browser/SliderTest.php +++ b/tests/Browser/SliderTest.php @@ -59,7 +59,7 @@ function sliderProbe() function sliderShowcase() { - return visit('/material')->waitForEvent('networkidle') + return visit('/material/sliders')->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); } diff --git a/tests/Browser/ThemeTest.php b/tests/Browser/ThemeTest.php index 8a197d02..23deab3c 100644 --- a/tests/Browser/ThemeTest.php +++ b/tests/Browser/ThemeTest.php @@ -25,9 +25,9 @@ it('keeps the visitor\'s choice over the operating system', function () { ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'") ->assertScript(theme('data-theme', 'dark')); - $page->click('@theme-light') + $page->click('[data-theme-option="light"]') ->assertScript(theme('data-theme', 'light')) - ->assertAttribute('@theme-light', 'aria-pressed', 'true') + ->assertAttribute('[data-theme-option="light"]', 'aria-checked', 'true') ->assertScript("localStorage.getItem('material-theme') === 'light'"); $page->refresh() @@ -52,7 +52,7 @@ it('adopts an earlier toggle\'s choice once', function () { it('repaints a section that sets its own theme', function () { $swatch = fn (int $index): string => "getComputedStyle(document.querySelectorAll('#colour [data-theme] .bg-primary')[{$index}]).backgroundColor"; - visit('/material')->inLightMode() + visit('/material/colour')->inLightMode() ->assertScript(theme('data-theme', 'light')) ->assertScript("{$swatch(0)} !== {$swatch(1)}"); }); diff --git a/tests/Feature/ShowcaseTest.php b/tests/Feature/ShowcaseTest.php index 0dc44a73..ee43ce9a 100644 --- a/tests/Feature/ShowcaseTest.php +++ b/tests/Feature/ShowcaseTest.php @@ -1,6 +1,7 @@ assertSee('Livewire Material'); }); +it('gives every section a page of its own, linked from the overview and the rail', function () { + $overview = $this->withoutVite()->get('/material')->assertOk(); + + foreach (Sections::all() as $key => $section) { + $overview->assertSee(route('livewire-material.section', $key), false); + + $this->withoutVite() + ->get("/material/{$key}") + ->assertOk() + ->assertSee("{$section['title']} · Livewire Material", false) + ->assertSee('id="'.$key.'"', false); + } + + $this->get('/material/not-a-section')->assertNotFound(); +}); + it('does not mount the showcase when disabled', function () { rebootWithShowcase(false); @@ -77,7 +94,7 @@ it('shows every component somewhere in the showcase', function () { $absent = collect(File::files(__DIR__.'/../../resources/views/components')) ->map(fn (SplFileInfo $file): string => $file->getBasename('.blade.php')) - ->reject(fn (string $name): bool => preg_match('/]/', $showcase) === 1) + ->reject(fn (string $name): bool => preg_match('/(?:<|<)x-(?:livewire-material::)?'.preg_quote($name, '/').'(?:[\s\/>]|>)/', $showcase) === 1) ->values() ->all();