MDX/DiscontinuedAlert

Children Override
Default En
Default Ja

Component Source

discontinued-alert.tsx

import type { FunctionComponent, ComponentChildren } from 'preact';

interface DiscontinuedAlertProps {
  children?: ComponentChildren;
  locale?: 'ja' | 'en';
}

const MESSAGES = {
  ja: {
    heading: 'この商品は製造終了になりました',
    body: 'メーカーが製造を終了したため、新品の入荷はございません。記録および参考資料として、本商品ページの掲載を継続しております。',
  },
  en: {
    heading: 'Product Discontinued',
    body: 'The manufacturer has discontinued this product. We keep the page online as a reference for specs and context.',
  },
};

export const DiscontinuedAlert: FunctionComponent<DiscontinuedAlertProps> = ({
  children,
  locale = 'ja',
}) => {
  const messages = MESSAGES[locale];
  return (
    <div
      className={
        'border-l-4 border-zd-warning bg-zd-warning/10 p-vgap-md grid grid-cols-[28px_1fr] gap-x-hgap-sm mb-vgap-lg'
      }
    >
      {/* Row 1: icon vertically centered with the heading line.
          Row 2: body sits below in column 2 (icon column blank).
          Heading is a <div>, not a <p>, so the article-body p+p flow rule
          (zd-prose-flow) does not fire between heading and body. */}
      <div className="self-center text-zd-warning text-[22px] leading-none">⚠</div>
      <div className="self-center text-zd-warning font-bold">{messages.heading}</div>
      <div className="col-start-2 mt-vgap-2xs">
        {children ?? <p className="text-zd-white text-sm leading-relaxed">{messages.body}</p>}
      </div>
    </div>
  );
};

Story Source

discontinued-alert.stories.tsx

import { DiscontinuedAlert } from './discontinued-alert';

/**
 * DiscontinuedAlert Component
 *
 * An amber-bordered alert for MDX product pages that have been discontinued.
 * Features:
 * - Amber left border and semi-tinted background
 * - Warning icon (⚠) in a dedicated column
 * - Locale-aware default heading and body text
 * - Optional children to override the default body text
 */
export const meta = {
  title: 'MDX/DiscontinuedAlert',
};

/**
 * Default JA - Japanese locale (default)
 */
export const DefaultJa = () => <DiscontinuedAlert />;

/**
 * Default EN - English locale
 */
export const DefaultEn = () => <DiscontinuedAlert locale="en" />;

/**
 * Children override - custom body text replaces the default body
 */
export const ChildrenOverride = () => (
  <DiscontinuedAlert>Custom body text override for this specific product page.</DiscontinuedAlert>
);