ResponsiveImage

Optimized responsive image with a CSS-only blur-up placeholder. Self-resolves metadata from the slug when not pre-supplied.

Media & Icons

Default (blur-up + srcset)

No variants (GIF fallback)

Cover (square list tile)

Unresolved slug (self-resolving fallback)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ResponsiveImage — the sitewide image primitive (epic #1647, wave 6, // gap batch #1661). Unit-tested (components/__tests__/responsive-image.test.tsx) // but had no story until now. // // ResponsiveImage is a thin self-resolving wrapper: it looks up metadata from // the ~8 MB metadata-db.json and delegates all actual rendering to // ResponsiveImageCore. A mock slug (never in the DB) always falls through to // ResponsiveImageCore's metadata-less fallback branch, so the deterministic // srcset / blurhash / no-variants states below are demonstrated by driving // ResponsiveImageCore directly with inline metadata fixtures — no DB coupling, // no network. The "Unresolved slug" variant renders the real ResponsiveImage // wrapper to show its self-resolving fallback + the styleguide's // /images/p/* placeholder pipeline (sub-packages/styleguide/plugins/image-placeholder.mjs) // in action, matching the ArticleImage pilot story's pattern. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ResponsiveImage } from './responsive-image'; import { ResponsiveImageCore, RESPONSIVE_IMAGE_COVER_CLASS, type ResponsiveImageCoreMetadata, type ResponsiveImageCoreProps, } from './responsive-image-core'; const meta: StoryMeta = { title: 'ResponsiveImage', category: 'Media & Icons', description: 'Optimized responsive image with a CSS-only blur-up placeholder. Self-resolves metadata from the slug when not pre-supplied.', usage: `import { ResponsiveImage } from '@/components/responsive-image';\n\n<ResponsiveImage slug="oxi-e16-view-01" alt="OXI ONE MKII front panel" />`, }; export default meta; // A tiny (1x1) inline PNG data URI stands in for a real blurhash-decoded // preview image — same shape metadata-db.json stores under blurhashDataUri, // just a minimal fixture instead of a copied production blob. const MOCK_BLURHASH_DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII='; const landscapeMetadata: ResponsiveImageCoreMetadata = { width: 1600, height: 1067, aspectRatio: (1067 / 1600) * 100, hasVariants: true, originalFormat: 'jpeg', blurhashDataUri: MOCK_BLURHASH_DATA_URI, }; const noVariantsMetadata: ResponsiveImageCoreMetadata = { width: 480, height: 320, hasVariants: false, originalFormat: 'gif', }; export const Default = defineStory<ResponsiveImageCoreProps>({ name: 'Default (blur-up + srcset)', render: () => ( <ResponsiveImageCore slug="sg-responsive-image-demo" alt="Sample module front panel" metadata={landscapeMetadata} /> ), }); export const NoVariants = defineStory<ResponsiveImageCoreProps>({ name: 'No variants (GIF fallback)', render: () => ( <ResponsiveImageCore slug="sg-responsive-image-gif-demo" alt="Sample animated GIF" metadata={noVariantsMetadata} /> ), }); export const CoverTile = defineStory<ResponsiveImageCoreProps>({ name: 'Cover (square list tile)', render: () => ( <div className="w-[160px] h-[160px] border border-zd-white"> <ResponsiveImageCore slug="sg-responsive-image-cover-demo" alt="Sample list tile" className={RESPONSIVE_IMAGE_COVER_CLASS} metadata={landscapeMetadata} /> </div> ), }); export const UnresolvedSlug = defineStory({ name: 'Unresolved slug (self-resolving fallback)', render: () => ( <ResponsiveImage slug="sg-responsive-image-unresolved-demo" alt="Slug not in metadata-db" /> ), });