MDX/InfoBox

Default

headingbody

Long Content

Technical Note

Warning

With Rich Content

Component Source

info-box.tsx

import type { FunctionComponent, ComponentChildren } from 'preact';
interface InfoBoxProps {
  children: ComponentChildren;
}

export const InfoBox: FunctionComponent<InfoBoxProps> = ({ children }) => {
  return (
    <div
      className={
        'border-zd-notify text-zd-notify border-2 border-dashed rounded-lg p-vgap-md lg:p-vgap-lg mb-vgap-lg'
      }
    >
      <div className="zd-article-body max-w-none">{children}</div>
    </div>
  );
};

Story Source

info-box.stories.tsx

import { InfoBox } from './info-box';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';

/**
 * InfoBox Component
 *
 * A callout/notification box for highlighting important information in MDX articles.
 * Features:
 * - Dashed border with notification color styling
 * - Responsive padding
 * - Prose styling for rich text content
 */
export const meta = {
  title: 'MDX/InfoBox',
};

export const controls: ControlsMap = {
  heading: { type: 'text', default: 'ご注意ください' },
  body: { type: 'text', default: '電源を入れる前に接続を確認してください。' },
};

/**
 * Default - Simple text content
 */
export const Default = {
  args: {
    heading: 'ご注意ください',
    body: '電源を入れる前に接続を確認してください。',
  },
  render: ({ heading, body }: { heading: string; body: string }) => (
    <InfoBox>
      {heading && <h4>{heading}</h4>}
      <p>{body}</p>
    </InfoBox>
  ),
};

/**
 * With rich content including headings and lists
 */
export const WithRichContent = () => (
  <InfoBox>
    <h4>ご注意ください</h4>
    <p>以下の点にご注意ください：</p>
    <ul>
      <li>電源を入れる前に接続を確認してください</li>
      <li>パッチケーブルは正しい極性で接続してください</li>
      <li>音量は小さく設定してから調整してください</li>
    </ul>
  </InfoBox>
);

/**
 * Technical note example
 */
export const TechnicalNote = () => (
  <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 = () => (
  <InfoBox>
    <p>
      <strong>⚠️ 警告:</strong>{' '}
      このモジュールは静電気に敏感です。取り扱いの際は静電気対策を行ってください。
    </p>
  </InfoBox>
);

/**
 * Long content example
 */
export const LongContent = () => (
  <InfoBox>
    <h4>モジュラーシンセサイザーの基礎</h4>
    <p>
      モジュラーシンセサイザーは、独立したモジュールを組み合わせて音を作り出す電子楽器です。
      各モジュールはVCO（電圧制御発振器）、VCF（電圧制御フィルター）、VCA（電圧制御アンプ）
      などの機能を持ち、パッチケーブルで接続することで多様な音色を生み出すことができます。
    </p>
    <p>
      Eurorackは最も普及しているモジュラーシンセサイザーの規格で、
      3Uの高さと±12Vの電源規格が標準化されています。
      これにより、異なるメーカーのモジュールを自由に組み合わせることが可能です。
    </p>
  </InfoBox>
);