CaseBuilderColorGrid

Photo-backed colour palette grid for a material (acrylic vs 3D print). The material-sample photo sits over a solid swatch so a failed image still reads as the colour; the current colour is marked.

Product-Specific Blocks

Acrylic palette

3D-print palette

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the Case Builder colour palette grid (#1931). Pure/sync render. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ColorGrid } from './color-grid'; const meta: StoryMeta = { title: 'CaseBuilderColorGrid', category: 'Product-Specific Blocks', description: 'Photo-backed colour palette grid for a material (acrylic vs 3D print). The material-sample photo sits over a solid swatch so a failed image still reads as the colour; the current colour is marked.', usage: `import { ColorGrid } from '@/src/components/case-builder/color-grid';\n\n<ColorGrid material="acrylic" currentColorId="red" locale="ja" onSelect={() => {}} />`, }; export default meta; const noop = () => {}; export const Acrylic = defineStory({ name: 'Acrylic palette', render: () => ( <div style={{ maxWidth: '560px' }}> <ColorGrid material="acrylic" currentColorId="clear" locale="ja" onSelect={noop} /> </div> ), }); export const ThreeDPrint = defineStory({ name: '3D-print palette', render: () => ( <div style={{ maxWidth: '560px' }}> <ColorGrid material="3dp" currentColorId="carbon-black" locale="en" onSelect={noop} /> </div> ), });