import { NotifyMeBlock } from './notify-me-block';
import type { ControlsMap } from '../../sub-packages/styleguide/src/data/control-types';
/**
* NotifyMeBlock Component Stories
*
* Block component for product pages showing:
* - Full-width "入荷通知を受け取る" button
* - Description text explaining the notification process
* - Opens NotifyMeDialog on click
*/
export const meta = {
title: 'Notify/NotifyMeBlock',
};
export const controls: ControlsMap = {
productName: { type: 'text', default: 'Sample Product' },
productSlug: { type: 'text', default: 'sample-product' },
};
/**
* Default State
*
* Shows the block with product name.
* Click the button to open the notification dialog.
*/
export const Default = {
args: { productName: 'Sample Product', productSlug: 'sample-product' },
render: ({ productName, productSlug }: { productName: string; productSlug: string }) => (
<NotifyMeBlock productSlug={productSlug} productName={productName || undefined} />
),
};
/**
* Without Product Name
*
* Shows the block without a specific product name.
*/
export const WithoutProductName = () => <NotifyMeBlock productSlug="sample-product" />;
/**
* Long Product Name
*
* Tests the layout with a very long product name.
*/
export const LongProductName = () => (
<NotifyMeBlock
productSlug="long-name-product"
productName="Very Long Product Name That Should Display Nicely In The Dialog"
/>
);
/**
* Real Product Example
*
* Example with a real product slug from the catalog.
*/
export const RealProductExample = () => (
<NotifyMeBlock productSlug="n32b-slim" productName="N32B Slim" />
);