EndedCallout

Amber-bordered callout for MDX pages announcing something has ended. Warning icon, locale-aware default heading/body (product-discontinued preset), optional heading override and children body override for other ended states (e.g. finished campaigns).

Product Pages

Default JA

Default EN

Children override

Custom heading (campaign ended)

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { EndedCallout } from './ended-callout'; const meta: StoryMeta = { title: 'EndedCallout', category: 'Product Pages', description: 'Amber-bordered callout for MDX pages announcing something has ended. Warning icon, locale-aware default heading/body (product-discontinued preset), optional heading override and children body override for other ended states (e.g. finished campaigns).', usage: `import { EndedCallout } from '@/components/mdx/ended-callout';\n\n<EndedCallout locale="ja" />`, }; export default meta; /** Default JA - Japanese locale (default), product-discontinued preset */ export const DefaultJa = defineStory({ name: 'Default JA', render: () => <EndedCallout />, }); /** Default EN - English locale, product-discontinued preset */ export const DefaultEn = defineStory({ name: 'Default EN', render: () => <EndedCallout locale="en" />, }); /** Children override - custom body text replaces the default body */ export const ChildrenOverride = defineStory({ name: 'Children override', render: () => ( <EndedCallout>Custom body text override for this specific product page.</EndedCallout> ), }); /** Custom heading - heading override for non-product ended states (e.g. a finished campaign) */ export const CustomHeading = defineStory({ name: 'Custom heading (campaign ended)', render: () => ( <EndedCallout heading="本キャンペーンは終了しました"> 本セールは2026年7月15日をもって終了致しました。記録として、本ページの掲載を継続しております。 </EndedCallout> ), });