InfoBox

Callout box for highlighting important information in MDX articles. Neutral white dashed border with square corners, responsive padding, prose styling for rich text content — it reads as an aside within the article rather than a status banner.

Article Blocks

Default

HeadingBody

With rich content

Technical note

Warning

Long content

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { InfoBox } from './info-box'; const meta: StoryMeta = { title: 'InfoBox', category: 'Article Blocks', description: 'Callout box for highlighting important information in MDX articles. Neutral white dashed border with square corners, responsive padding, prose styling for rich text content — it reads as an aside within the article rather than a status banner.', usage: `import { InfoBox } from '@/components/mdx/info-box';\n\n<InfoBox>\n <h4>ご注意ください</h4>\n <p>電源を入れる前に接続を確認してください。</p>\n</InfoBox>`, }; export default meta; /** Scene args for the interactive Default variant — heading/body drive InfoBox's children. */ interface InfoBoxArgs { heading: string; body: string; } /** Default - Simple text content */ export const Default = defineStory<InfoBoxArgs>({ name: 'Default', controls: [ { type: 'text', prop: 'heading', label: 'Heading', defaultValue: 'ご注意ください' }, { type: 'text', prop: 'body', label: 'Body', defaultValue: '電源を入れる前に接続を確認してください。', }, ], render: ({ heading = 'ご注意ください', body = '電源を入れる前に接続を確認してください。', } = {}) => ( <InfoBox> {heading && <h4>{heading}</h4>} <p>{body}</p> </InfoBox> ), }); /** With rich content including headings and lists */ export const WithRichContent = defineStory({ name: 'With rich content', render: () => ( <InfoBox> <h4>ご注意ください</h4> <p>以下の点にご注意ください：</p> <ul> <li>電源を入れる前に接続を確認してください</li> <li>パッチケーブルは正しい極性で接続してください</li> <li>音量は小さく設定してから調整してください</li> </ul> </InfoBox> ), }); /** Technical note example */ export const TechnicalNote = defineStory({ name: 'Technical note', render: () => ( <InfoBox> <h4>技術仕様</h4> <p> <strong>電源要件:</strong> +12V @ 50mA, -12V @ 20mA </p> <p> <strong>幅:</strong> 8HP </p> <p> <strong>奥行き:</strong> 25mm </p> </InfoBox> ), }); /** Warning style usage */ export const Warning = defineStory({ name: 'Warning', render: () => ( <InfoBox> <p> <strong>⚠️ 警告:</strong>{' '} このモジュールは静電気に敏感です。取り扱いの際は静電気対策を行ってください。 </p> </InfoBox> ), }); /** Long content example */ export const LongContent = defineStory({ name: 'Long content', render: () => ( <InfoBox> <h4>モジュラーシンセサイザーの基礎</h4> <p> モジュラーシンセサイザーは、独立したモジュールを組み合わせて音を作り出す電子楽器です。各モジュールはVCO（電圧制御発振器）、VCF（電圧制御フィルター）、VCA（電圧制御アンプ）などの機能を持ち、パッチケーブルで接続することで多様な音色を生み出すことができます。 </p> <p> Eurorackは最も普及しているモジュラーシンセサイザーの規格で、 3Uの高さと±12Vの電源規格が標準化されています。これにより、異なるメーカーのモジュールを自由に組み合わせることが可能です。 </p> </InfoBox> ), });