FloatingToc

Static shell for the mobile-only floating Table-of-Contents toggle + slide-down panel.

Navigation

Closed (immediately available icon)

Open (panel expanded)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Static SSR shell story for FloatingToc (epic #1647, wave 6, gap batch // #1661). // // The real island (default export in floating-toc.tsx) is 'use client', takes // no props, and scans the live `document` for `.zd-toc-pointer + ul` on mount // — its own file comment already says a story is "impractical standalone" // (would need to inject that structure into document.body and mock // window.matchMedia + scroll/resize). Behaviour is covered instead by // tests/unit/floating-toc.test.ts (extractTocItems / getActiveHeadingId) and // tests/e2e/floating-toc.spec.ts. // // This story hand-builds the SAME markup + `.zd-floating-toc-*` CSS classes // (see components/mdx/floating-toc.css, loaded globally) with static fixture // TOC items and no hooks/DOM scanning — a visual shell only, not the live // island. `lg:hidden` (the real component's mobile-only gate) is intentionally // omitted so the shell stays visible at the catalog's default viewport; the // responsive gating itself is functional behaviour, not a visual concern here. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { BookmarkShort } from '@/components/icons/bookmark-short'; import type { TocItem } from './floating-toc'; const meta: StoryMeta = { title: 'FloatingToc', category: 'Navigation', description: 'Static shell for the mobile-only floating Table-of-Contents toggle + slide-down panel.', usage: `import FloatingToc from '@/src/components/islands/floating-toc';\n\n<FloatingToc />`, }; export default meta; const demoItems: TocItem[] = [ { href: '#section-1', text: 'はじめに' }, { href: '#section-2', text: 'モジュールの選び方' }, { href: '#section-3', text: 'パッチの組み方' }, { href: '#section-4', text: 'まとめ' }, ]; function TocShell({ open, activeHref }: { open: boolean; activeHref: string }) { const label = '目次'; return ( <div className="zd-floating-toc" data-open={open ? 'true' : 'false'}> <div className="zd-floating-toc-scrim" hidden={!open} aria-hidden="true" /> <button type="button" className="zd-floating-toc-toggle" aria-expanded={open} aria-label={label} aria-controls="zd-floating-toc-panel" > <BookmarkShort className="zd-floating-toc-icon" aria-hidden="true" focusable="false" /> </button> <nav id="zd-floating-toc-panel" className="zd-floating-toc-panel" aria-label={label}> <ul className="zd-floating-toc-list"> {demoItems.map((item) => { const isActive = item.href === activeHref; return ( <li key={item.href} className="zd-floating-toc-item"> <a href={item.href} className={isActive ? 'zd-floating-toc-link is-active' : 'zd-floating-toc-link'} aria-current={isActive ? 'true' : undefined} tabIndex={open ? 0 : -1} > {item.text} </a> </li> ); })} </ul> </nav> </div> ); } export const Closed = defineStory({ name: 'Closed (immediately available icon)', render: () => <TocShell open={false} activeHref="#section-1" />, }); export const Open = defineStory({ name: 'Open (panel expanded)', render: () => <TocShell open={true} activeHref="#section-2" />, });