ReservationBlock

Product-page block: full-width reserve button, description, opens ReservationDialog.

Forms & Dialogs

Default

Product nameProduct slug

Without product name

Long product name

Real product example

English locale

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ReservationBlock — migrated to the repo-root story contract // (`lib/styleguide/story-contract`) in wave 3 (epic #1647, #1656). // // Product-page block: a full-width "reserve" button (localized via `locale`) // plus explanatory copy; opens ReservationDialog on click. Like NotifyMeBlock // this demos the block itself, so it carries no MSW — the dialog it opens // submits to the (unmocked) network here, matching the pre-migration story. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ReservationBlock } from './reservation-block'; const meta: StoryMeta = { title: 'ReservationBlock', category: 'Forms & Dialogs', description: 'Product-page block: full-width reserve button, description, opens ReservationDialog.', usage: `import { ReservationBlock } from '@/components/notify-dialog/reservation-block';\n\n<ReservationBlock productSlug="n32b-slim" productName="N32B Slim" />`, }; export default meta; interface ReservationBlockArgs { productName: string; productSlug: string; } export const Default = defineStory<ReservationBlockArgs>({ 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' } = {}) => ( <ReservationBlock productSlug={productSlug} productName={productName || undefined} /> ), }); export const WithoutProductName = defineStory({ name: 'Without product name', render: () => <ReservationBlock productSlug="sample-product" />, }); export const LongProductName = defineStory({ name: 'Long product name', render: () => ( <ReservationBlock 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: () => <ReservationBlock productSlug="n32b-slim" productName="N32B Slim" />, }); export const English = defineStory({ name: 'English locale', render: () => <ReservationBlock productSlug="n32b-slim" productName="N32B Slim" locale="en" />, });