CaseBuilderPanelList

Every panel of a case as a clickable row — including list-only panels with no SVG path (e.g. 10BOX-deep stand parts, tagged "no diagram"). Each row shows the panel colour swatch and colour name.

Product-Specific Blocks

40HP 3DP

10BOX-deep (list-only stand parts)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the Case Builder panel list (#1931). Pure/sync render. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { PanelList } from './panel-list'; import { firstPresetColorIds } from './case-builder-logic'; const meta: StoryMeta = { title: 'CaseBuilderPanelList', category: 'Product-Specific Blocks', description: 'Every panel of a case as a clickable row — including list-only panels with no SVG path (e.g. 10BOX-deep stand parts, tagged "no diagram"). Each row shows the panel colour swatch and colour name.', usage: `import { PanelList } from '@/src/components/case-builder/panel-list';\n\n<PanelList caseType="zudo-block-40-3DP-A" material="3dp" panelColorIds={...} selectedPanel="side1" locale="ja" onSelectPanel={() => {}} />`, }; export default meta; const noop = () => {}; export const RegularModel = defineStory({ name: '40HP 3DP', render: () => { const caseType = 'zudo-block-40-3DP-A'; return ( <div style={{ maxWidth: '420px' }}> <PanelList caseType={caseType} material="3dp" panelColorIds={firstPresetColorIds(caseType)} selectedPanel="side1" locale="ja" onSelectPanel={noop} /> </div> ); }, }); export const WithListOnlyPanels = defineStory({ name: '10BOX-deep (list-only stand parts)', render: () => { const caseType = '10box-deep-3dp'; return ( <div style={{ maxWidth: '420px' }}> <PanelList caseType={caseType} material="3dp" panelColorIds={firstPresetColorIds(caseType)} selectedPanel={null} locale="en" onSelectPanel={noop} /> </div> ); }, });