import { FlowRoot } from './flow-root';
import type { ControlsMap } from '../../../sub-packages/styleguide/src/data/control-types';
/**
* FlowRoot Component
*
* A utility wrapper that creates a new block formatting context.
* Used to contain floated elements within their parent container.
* Features:
* - Applies CSS `flow-root` display property
* - Prevents float overflow issues
* - Used with floated images in MDX articles
*/
export const meta = {
title: 'MDX/Layout/FlowRoot',
};
export const controls: ControlsMap = {
content: {
type: 'text',
default:
'このテキストはフロートされた要素の横に配置されます。FlowRootコンポーネントは新しいブロックフォーマティングコンテキストを作成し、フロートされた要素を適切に含みます。',
},
};
/**
* Default - Contains floated content
*/
export const Default = {
args: {
content:
'このテキストはフロートされた要素の横に配置されます。FlowRootコンポーネントは新しいブロックフォーマティングコンテキストを作成し、フロートされた要素を適切に含みます。',
},
render: ({ content }: { content: string }) => (
<FlowRoot>
<div className="float-left w-[150px] h-[100px] bg-zd-gray2 mr-hgap-md mb-vgap-sm flex items-center justify-center text-zd-white">
Floated Left
</div>
<p className="text-zd-white">{content}</p>
</FlowRoot>
),
};
/**
* Without FlowRoot (for comparison)
*/
export const WithoutFlowRoot = () => (
<div className="border border-zd-gray2 p-hgap-sm">
<p className="text-muted text-sm pb-vgap-xs">Without FlowRoot (border shows issue):</p>
<div>
<div className="float-left w-[100px] h-[80px] bg-zd-gray2 mr-hgap-md flex items-center justify-center text-zd-white text-sm">
Float
</div>
<p className="text-zd-white text-sm">Short text</p>
</div>
</div>
);
/**
* With FlowRoot (proper containment)
*/
export const WithFlowRoot = () => (
<div className="border border-zd-gray2 p-hgap-sm">
<p className="text-muted text-sm pb-vgap-xs">With FlowRoot (properly contained):</p>
<FlowRoot>
<div className="float-left w-[100px] h-[80px] bg-zd-gray2 mr-hgap-md flex items-center justify-center text-zd-white text-sm">
Float
</div>
<p className="text-zd-white text-sm">Short text</p>
</FlowRoot>
</div>
);