OperatorInfoRequestBlock

Block whose button opens a dialog requesting operator (特商法) info by email.

Forms & Dialogs

Live demo

Default

Error state (mocked)

Loading state

Always open

/** @jsxImportSource @takazudo/zfb/zudo-react */ /** @jsxRuntime automatic */ // Story for OperatorInfoRequestBlock — migrated to the repo-root story contract // (`lib/styleguide/story-contract`) in wave 3 (epic #1647, #1656). // // The block's 「運営者情報を請求する」 button opens a dialog that POSTs // `{ email, bot_field }` to `/api/tokushoho-disclosure`, so its variants OPT INTO // MSW via the `Story.msw` scenario string; the scenario → handler mapping lives // in the preview island's browser-only mock feature and this file imports NO // `msw` (see notify-me-dialog.stories.tsx for the rationale). Scenarios: // - `operator` → success // - `operator-error` → forced 429 (rate-limited) // - `operator-loading` → 5s delay, to observe the loading spinner import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { DialogStoryContainer } from '@lib/styleguide/dialog-story-container'; import { OperatorInfoRequestBlock } from './operator-info-request-block'; const meta: StoryMeta = { title: 'OperatorInfoRequestBlock', category: 'Forms & Dialogs', description: 'Block whose button opens a dialog requesting operator (特商法) info by email.', usage: `import { OperatorInfoRequestBlock } from '@/components/notify-dialog/operator-info-request-block';\n\n<OperatorInfoRequestBlock />`, }; export default meta; /** The block inside the local portal; `defaultOpen` starts with the dialog open. */ const renderOperatorBlock = (defaultOpen = false) => ( <DialogStoryContainer idBase="operator-info-request-block.stories-1"> {(dialogOptions) => ( <div class="p-hgap-sm"> <OperatorInfoRequestBlock {...dialogOptions} defaultOpen={defaultOpen} /> </div> )} </DialogStoryContainer> ); export const Default = defineStory({ name: 'Default', msw: 'operator', render: () => renderOperatorBlock(), }); export const ErrorState = defineStory({ name: 'Error state (mocked)', msw: 'operator-error', render: () => renderOperatorBlock(), }); export const LoadingState = defineStory({ name: 'Loading state', msw: 'operator-loading', render: () => renderOperatorBlock(), }); export const AlwaysOpen = defineStory({ name: 'Always open', msw: 'operator', render: () => renderOperatorBlock(true), });