ZudoBlockCaseDiagrams

Responsive four-case gallery with a native dialog for complete nets and explicitly ordered dimensioned panels.

Product-Specific Blocks

Gallery

Open complete view

Dimensioned panel

7U thumbnail overflow

Narrow (320px)

Missing asset

Invalid data

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ZUDO_BLOCK_CASES } from './data'; import { ZudoBlockCaseDiagrams } from './zudo-block-case-diagrams'; const meta: StoryMeta = { title: 'ZudoBlockCaseDiagrams', category: 'Product-Specific Blocks', description: 'Responsive four-case gallery with a native dialog for complete nets and explicitly ordered dimensioned panels.', usage: `import { ZudoBlockCaseDiagrams } from '@/components/mdx/zudo-block-case-diagrams';\n\n<ZudoBlockCaseDiagrams locale="ja" />`, }; export default meta; const missingAssetCases = ZUDO_BLOCK_CASES.map((caseDefinition, index) => index === 0 ? { ...caseDefinition, assetUrl: '/images/zudo-block-diagrams/missing-case-diagram.svg', assetIntegrity: { ...caseDefinition.assetIntegrity, sourceFileName: 'missing-case-diagram.svg', }, } : caseDefinition, ); export const Gallery = defineStory({ name: 'Gallery', render: () => <ZudoBlockCaseDiagrams locale="ja" />, }); export const OpenComplete = defineStory({ name: 'Open complete view', render: () => <ZudoBlockCaseDiagrams locale="ja" initialOpenCaseId="3u-40hp" />, }); export const DimensionedPanel = defineStory({ name: 'Dimensioned panel', render: () => ( <ZudoBlockCaseDiagrams locale="ja" initialOpenCaseId="3u-40hp" initialViewIndex={5} /> ), }); export const SevenUOverflow = defineStory({ name: '7U thumbnail overflow', render: () => <ZudoBlockCaseDiagrams locale="ja" initialOpenCaseId="7u-60hp" />, }); export const Narrow = defineStory({ name: 'Narrow (320px)', render: () => ( <div className="w-full max-w-[320px]"> <ZudoBlockCaseDiagrams locale="ja" /> </div> ), }); export const MissingAsset = defineStory({ name: 'Missing asset', render: () => <ZudoBlockCaseDiagrams locale="ja" cases={missingAssetCases} />, }); export const InvalidData = defineStory({ name: 'Invalid data', render: () => <ZudoBlockCaseDiagrams locale="ja" cases={[]} />, });