StaticPageThumbs

Gallery of the 10 static-page / guide-series thumbnail components: the shared glyph-cutout frame (about/airpay/manuals/support/tokushoho/warranty) plus the KumikoThumb-based family (mm-deep, series, synth-kw).

Media & Icons

Glyph-cutout family (6)

Kumiko-pattern family (3)

Kumiko-pattern — list vs. detail size

All 10 thumbs

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Gallery story for the 10 static-page thumb components — new gap story // (epic #1647 Wave 6, #1663). ContactThumb and NewsThumb are excluded: both // already have their own migrated stories (contact-thumb.stories.tsx, // news-thumb.stories.tsx). // // Six of the ten (about/airpay/manuals/support/tokushoho/warranty) share one // visual language — bordered square, white X-diagonals, a cutout glyph — and // take no props, so they're shown together. The other three (mm-deep-thumb, // series-thumb, synth-kw-thumb) all wrap the shared KumikoThumb primitive and // need real data-module slugs; their `svgFile`/slug-derived `/svgs/*.svg` // backgrounds resolve against the styleguide's served `/svgs/*` (authored // SVGs staged from repo-root static/svgs/, issue #2048). synth-kw-* and the // series thumbs use authored SVGs and render for real; a slug whose SVG is // only produced by the (uncommitted) synth-svg pipeline — e.g. mm-deep-*.svg — // resolves to a deterministic placeholder, never broken-image chrome. import type { ComponentChildren } from 'preact'; import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import AboutThumb from './about-thumb'; import AirpayThumb from './airpay-thumb'; import ManualsThumb from './manuals-thumb'; import SupportThumb from './support-thumb'; import TokushohoThumb from './tokushoho-thumb'; import WarrantyThumb from './warranty-thumb'; import { MmDeepThumb } from './mm-deep-thumb'; import { SeriesThumb } from './series-thumb'; import { SynthKwThumb } from './synth-kw-thumb'; const meta: StoryMeta = { title: 'StaticPageThumbs', category: 'Media & Icons', description: 'Gallery of the 10 static-page / guide-series thumbnail components: the shared glyph-cutout frame (about/airpay/manuals/support/tokushoho/warranty) plus the KumikoThumb-based family (mm-deep, series, synth-kw).', usage: `import AboutThumb from '@/components/shared/about-thumb';\nimport { SynthKwThumb } from '@/components/shared/synth-kw-thumb';\n\n<div className="w-[160px]"><AboutThumb /></div>\n<div className="w-[160px]"><SynthKwThumb slug="synth-kw-vco" type="grid" /></div>`, }; export default meta; const Cell = ({ label, children }: { label: string; children: ComponentChildren }) => ( <div className="w-[140px]"> <p className="text-muted text-xs pb-vgap-2xs text-center">{label}</p> {children} </div> ); const GlyphThumbs = () => ( <> <Cell label="AboutThumb"> <AboutThumb /> </Cell> <Cell label="AirpayThumb"> <AirpayThumb /> </Cell> <Cell label="ManualsThumb"> <ManualsThumb /> </Cell> <Cell label="SupportThumb"> <SupportThumb /> </Cell> <Cell label="TokushohoThumb"> <TokushohoThumb /> </Cell> <Cell label="WarrantyThumb"> <WarrantyThumb /> </Cell> </> ); export const GlyphThumbsGallery = defineStory({ name: 'Glyph-cutout family (6)', render: () => ( <div className="flex flex-wrap gap-hgap-md"> <GlyphThumbs /> </div> ), }); export const KumikoThumbsGallery = defineStory({ name: 'Kumiko-pattern family (3)', render: () => ( <div className="flex flex-wrap gap-hgap-md"> <Cell label="MmDeepThumb (mi-braids)"> <MmDeepThumb slug="mm-deep-mi-braids" type="grid" /> </Cell> <Cell label="SeriesThumb (synth-keywords)"> <SeriesThumb seriesSlug="synth-keywords" /> </Cell> <Cell label="SynthKwThumb (vco)"> <SynthKwThumb slug="synth-kw-vco" type="grid" /> </Cell> </div> ), }); export const KumikoThumbsListVsDetail = defineStory({ name: 'Kumiko-pattern — list vs. detail size', render: () => ( <div className="flex flex-wrap items-end gap-hgap-md"> <Cell label="list"> <SynthKwThumb slug="synth-kw-envelope-generator" type="list" /> </Cell> <Cell label="grid"> <SynthKwThumb slug="synth-kw-envelope-generator" type="grid" /> </Cell> <Cell label="detail"> <SynthKwThumb slug="synth-kw-envelope-generator" type="detail" /> </Cell> </div> ), }); export const AllTenThumbs = defineStory({ name: 'All 10 thumbs', render: () => ( <div className="flex flex-wrap gap-hgap-md"> <GlyphThumbs /> <Cell label="MmDeepThumb"> <MmDeepThumb slug="mm-deep-mi-braids" type="grid" /> </Cell> <Cell label="SeriesThumb"> <SeriesThumb seriesSlug="metamodule-deep-dive" /> </Cell> <Cell label="SynthKwThumb"> <SynthKwThumb slug="synth-kw-vco" type="grid" /> </Cell> </div> ), });