NotifyMeBlock

Product-page block: full-width restock-notify button, description, opens NotifyMeDialog.

Forms & Dialogs

Default

Product nameProduct slug

Without product name

Long product name

Real product example

English locale

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for NotifyMeBlock — migrated to the repo-root story contract // (`lib/styleguide/story-contract`) in wave 3 (epic #1647, #1656). // // Product-page block: a full-width "notify me" button (localized via `locale`) // plus explanatory copy; opens NotifyMeDialog on click. This story demos the // block's own layout/copy, so it carries no MSW — the dialog it opens submits to // the (unmocked) network here, mirroring the pre-migration story's behavior. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { NotifyMeBlock } from './notify-me-block'; const meta: StoryMeta = { title: 'NotifyMeBlock', category: 'Forms & Dialogs', description: 'Product-page block: full-width restock-notify button, description, opens NotifyMeDialog.', usage: `import { NotifyMeBlock } from '@/components/notify-dialog/notify-me-block';\n\n<NotifyMeBlock productSlug="n32b-slim" productName="N32B Slim" />`, }; export default meta; interface NotifyMeBlockArgs { productName: string; productSlug: string; } export const Default = defineStory<NotifyMeBlockArgs>({ name: 'Default', controls: [ { type: 'text', prop: 'productName', label: 'Product name', defaultValue: 'Sample Product' }, { type: 'text', prop: 'productSlug', label: 'Product slug', defaultValue: 'sample-product' }, ], render: ({ productName = 'Sample Product', productSlug = 'sample-product' } = {}) => ( <NotifyMeBlock productSlug={productSlug} productName={productName || undefined} /> ), }); export const WithoutProductName = defineStory({ name: 'Without product name', render: () => <NotifyMeBlock productSlug="sample-product" />, }); export const LongProductName = defineStory({ name: 'Long product name', render: () => ( <NotifyMeBlock productSlug="long-name-product" productName="Very Long Product Name That Should Display Nicely In The Dialog" /> ), }); export const RealProductExample = defineStory({ name: 'Real product example', render: () => <NotifyMeBlock productSlug="n32b-slim" productName="N32B Slim" />, }); export const English = defineStory({ name: 'English locale', render: () => <NotifyMeBlock productSlug="n32b-slim" productName="N32B Slim" locale="en" />, });