Layout/LayoutDivideItem

Per-column wrapper for the LayoutDivide two-column grid. Adds responsive bottom padding and a DOM-contract hook; forwards HTML attributes and merges className.

Article Layout

Default

In LayoutDivide

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for LayoutDivideItem — colocated in the reusable-UI package // (@takazudo-modular/ui-preact) as part of the wave-4 batch migration (#2052). // LayoutDivideItem previously had no dedicated story (it was only shown inside // the combined LayoutDivide story); this gives the migrated component its own // catalog entry. It is the per-column wrapper used inside `LayoutDivide`. import { defineStory } from '@takazudo-modular/ui-preact/story-contract'; import type { StoryMeta } from '@takazudo-modular/ui-preact/story-contract'; import { LayoutDivideItem } from './layout-divide-item'; import { LayoutDivide } from '../layout-divide/layout-divide'; const meta: StoryMeta = { title: 'Layout/LayoutDivideItem', category: 'Article Layout', description: 'Per-column wrapper for the LayoutDivide two-column grid. Adds responsive bottom padding and a DOM-contract hook; forwards HTML attributes and merges className.', usage: `import { LayoutDivide } from '@takazudo-modular/ui-preact/layout-divide';\nimport { LayoutDivideItem } from '@takazudo-modular/ui-preact/layout-divide-item';\n\n<LayoutDivide>\n <LayoutDivideItem>左</LayoutDivideItem>\n <LayoutDivideItem>右</LayoutDivideItem>\n</LayoutDivide>`, }; export default meta; /** Default - a single item wrapping a block of content. */ export const Default = defineStory({ name: 'Default', render: () => ( <LayoutDivideItem> <div className="bg-zd-gray2 p-hgap-md text-zd-white"> <h4 className="font-bold pb-vgap-xs">カラム項目</h4> <p>LayoutDivideItem は LayoutDivide の各カラムを包むラッパーです。</p> </div> </LayoutDivideItem> ), }); /** In context - two items inside a LayoutDivide grid (the intended usage). */ export const InLayoutDivide = defineStory({ name: 'In LayoutDivide', render: () => ( <LayoutDivide> <LayoutDivideItem> <div className="bg-zd-gray2 p-hgap-md text-zd-white">左カラム</div> </LayoutDivideItem> <LayoutDivideItem> <div className="bg-zd-gray2 p-hgap-md text-zd-white">右カラム</div> </LayoutDivideItem> </LayoutDivide> ), });