ExImg

Bordered figure wrapper around ResponsiveImage — supports float-left/right, auto-prefixes bare slugs with /images/p/, and includes a 13-shape prose-float alignment matrix.

Article Media & Embeds

Default

Float left

Float alignment matrix

Percentage base width collapse at 1100

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ExImg — new coverage (epic #1647, wave 6, #1662). // // The mock slug below (`oxi-cap-ep1-front-panel`) doesn't exist on R2, so its // `/images/p/<slug>/*.webp` requests resolve to the styleguide's // image-placeholder plugin (see `article-image/article-image.stories.tsx`). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { FlowRoot } from '@takazudo-modular/ui-preact/flow-root'; import { H4 } from '@takazudo-modular/ui-preact/h4'; import { Hr } from '@takazudo-modular/ui-preact/hr'; import { H2 } from '@/components/article/h2'; import { H3 } from '@/components/article/h3'; import { ImgsGrid } from './imgs-grid'; import { ExImg } from './ex-img'; const meta: StoryMeta = { title: 'ExImg', category: 'Article Media & Embeds', description: 'Bordered figure wrapper around ResponsiveImage — supports float-left/right, auto-prefixes bare slugs with /images/p/, and includes a 13-shape prose-float alignment matrix.', usage: `import { ExImg } from '@/components/mdx/ex-img';\n\n<ExImg src="oxi-cap-ep1-front-panel" alt="Front panel" />`, }; export default meta; export const Default = defineStory({ name: 'Default', render: () => ( <div className="max-w-[500px]"> <ExImg src="oxi-cap-ep1-front-panel" alt="OXI Coral front panel" /> </div> ), }); // A base PERCENTAGE width (`w-2/3`) does not survive a shrink-to-fit float on // its own, so ExImg moves it onto the float element itself — see the // fixCollapsedFloat comment in ex-img.tsx. Only a fixed length declared at `lg` // or below keeps the caller on the status-quo branch. export const FloatLeft = defineStory({ name: 'Float left', render: () => ( <div className="max-w-[600px] zd-prose-flow"> <ExImg src="oxi-cap-ep1-front-panel" alt="Front panel" floatLeft className="w-2/3" /> <p> フロート画像の右側にテキストが回り込みます。ExImgはfloatLeft/floatRightで左右の配置を切り替えられます。幅を明示することで、モバイル幅でも画像が潰れずに表示されます。 </p> </div> ), }); const floatMatrixImage = (alt: string) => ( <ExImg src="oxi-cap-ep1-front-panel" alt={alt} floatLeft className="w-1/3" /> ); // The matrix deliberately keeps a previous sibling in every fixture. A float // as the first child is a documented limitation of the flow utility and is not // a shape produced by article content. export const FloatAlignmentMatrix = defineStory({ name: 'Float alignment matrix', render: () => ( <div className="flex flex-col gap-vgap-2xl"> <div data-testid="p-float-h3" className="max-w-[900px] zd-prose-flow"> <p>Paragraph before a floated image.</p> {floatMatrixImage('Paragraph to heading fixture')} <H3>Heading after a paragraph and float</H3> </div> <div data-testid="clearfix-float-h3" className="max-w-[900px] zd-prose-flow"> <div className="clearfix" /> {floatMatrixImage('Clearfix to heading fixture')} <H3>Heading after a clearfix and float</H3> </div> <div data-testid="imgs-grid-float-h3" className="max-w-[900px] zd-prose-flow"> <ImgsGrid srcs={['oxi-cap-ep1-front-panel']} /> {floatMatrixImage('Image grid to heading fixture')} <H3>Heading after an image grid and float</H3> </div> <div data-testid="imgs-grid-float-p" className="max-w-[900px] zd-prose-flow"> <ImgsGrid srcs={['oxi-cap-ep1-front-panel']} /> {floatMatrixImage('Image grid to paragraph fixture')} <p>Paragraph after an image grid and float.</p> </div> <div data-testid="p-float-p" className="max-w-[900px] zd-prose-flow"> <p>Paragraph before a floated image.</p> {floatMatrixImage('Paragraph to paragraph fixture')} <p>Paragraph after a paragraph and float.</p> </div> <div data-testid="h2-float-p" className="max-w-[900px] zd-prose-flow"> <H2>Section heading before a float</H2> {floatMatrixImage('H2 to paragraph fixture')} <p>Paragraph after an H2 and float.</p> </div> <div data-testid="h3-float-p" className="max-w-[900px] zd-prose-flow"> <H3>Subheading before a float</H3> {floatMatrixImage('H3 to paragraph fixture')} <p>Paragraph after an H3 and float.</p> </div> <div data-testid="h2-float-ul" className="max-w-[900px] zd-prose-flow"> <H2>Section heading before a list</H2> {floatMatrixImage('H2 to list fixture')} <ul> <li>First list item after an H2 and float.</li> <li>Second list item.</li> </ul> </div> <div data-testid="h3-float-h4" className="max-w-[900px] zd-prose-flow"> <H3>Subheading before a detail heading</H3> {floatMatrixImage('H3 to H4 fixture')} <H4>Detail heading after an H3 and float</H4> </div> <div data-testid="h3-float-h3" className="max-w-[900px] zd-prose-flow"> <H3>First subheading before a second subheading</H3> {floatMatrixImage('H3 to H3 fixture')} <H3>Second subheading after an H3 and float</H3> </div> <div data-testid="h3-float-flow-root" className="max-w-[900px] zd-prose-flow"> <H3>Subheading before a flow root</H3> {floatMatrixImage('H3 to FlowRoot fixture')} <FlowRoot> <p>FlowRoot content after an H3 and float.</p> </FlowRoot> </div> <div data-testid="h2-float-dl" className="max-w-[900px] zd-prose-flow"> <H2>Section heading before a definition list</H2> {floatMatrixImage('H2 to definition list fixture')} <dl> <dt>Format</dt> <dd>Definition list after an H2 and float.</dd> </dl> </div> <div data-testid="hr-float-dl" className="max-w-[900px] zd-prose-flow"> <Hr /> {floatMatrixImage('Horizontal rule to definition list fixture')} <dl> <dt>Format</dt> <dd>Definition list after an HR and float.</dd> </dl> </div> </div> ), }); // Regression fixture for issue #2783 — reproduces ADDAC712 Vintage Pre's exact // caller shape (`w-full xl:w-[600px] 2xl:w-[700px]`, floatRight), the one // documented production bug from the ExImg width-classification sweep. The // float's only fixed-length width is declared at `xl`, leaving the `lg`–`xl` // band uncovered — see the `fixCollapsedFloat` classifier in ex-img.tsx. // Covered by sub-packages/styleguide/e2e/ex-img-float-alignment.spec.ts. export const PercentageBaseWidthCollapseAt1100 = defineStory({ name: 'Percentage base width collapse at 1100', render: () => ( <div data-testid="pct-base-width-xl-fixed" className="max-w-[900px] zd-prose-flow"> <p>Paragraph before a floated image whose only fixed width is at xl.</p> <ExImg src="oxi-cap-ep1-front-panel" alt="Percentage base width, fixed only at xl (ADDAC712 shape)" floatRight className="w-full xl:w-[600px] 2xl:w-[700px]" /> <p>Paragraph after the float.</p> </div> ), });