ArticleImage

Full-width article figure with an optional caption and enlarge affordance.

Article Media & Embeds

Default

SlugCaption

With caption

Without caption

Full width

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ArticleImage — wave-2 pilot migrated to the repo-root story // contract (`lib/styleguide/story-contract`; epic #1647, #1649). // // This pilot exercises the styleguide's image-placeholder plugin: the mock // slugs below (`oxi-cap-ep1-*`) don't exist on R2, so the real ResponsiveImage // requests `/images/p/<slug>/*.webp` resolve to the plugin's placeholder SVG in // the styleguide dev server + deployed build. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ArticleImage, type ArticleImageProps } from './article-image'; const meta: StoryMeta = { title: 'ArticleImage', category: 'Article Media & Embeds', description: 'Full-width article figure with an optional caption and enlarge affordance.', usage: `import { ArticleImage } from '@/components/mdx/article-image';\n\n<ArticleImage slug="oxi-cap-ep1-front-panel" caption="Front panel overview" />`, }; export default meta; export const Default = defineStory<ArticleImageProps>({ name: 'Default', controls: [ { type: 'text', prop: 'slug', label: 'Slug', defaultValue: 'oxi-cap-ep1-front-panel' }, { type: 'text', prop: 'caption', label: 'Caption', defaultValue: 'OXI ONE MKII front panel overview', }, ], render: ({ slug = 'oxi-cap-ep1-front-panel', caption = 'OXI ONE MKII front panel overview', } = {}) => <ArticleImage slug={slug} caption={caption || undefined} />, }); export const WithCaption = defineStory({ name: 'With caption', render: () => ( <ArticleImage slug="oxi-cap-ep1-front-panel" caption="OXI ONE MKII front panel overview" /> ), }); export const WithoutCaption = defineStory({ name: 'Without caption', render: () => <ArticleImage slug="oxi-cap-ep1-grid-notes" />, }); export const Full = defineStory({ name: 'Full width', render: () => ( <ArticleImage slug="oxi-cap-ep1-front-panel" caption="OXI ONE MKII front panel overview" full /> ), });