BrandDocsDialog

Trigger link + modal note about official brand documentation, shown below the manuals/guides grid on RYK and OXI product pages.

Product Pages

RYK — Japanese

Brand

OXI — English

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for BrandDocsDialog (#2493) — trigger link + BaseDialog with the // per-brand (RYK/OXI) "about our translated manuals" note. Migrated to the // repo-root story contract like base-dialog.stories.tsx, using // DialogStoryContainer so the modal stays inside the preview frame. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { DialogStoryContainer } from '@lib/styleguide/dialog-story-container'; import { BrandDocsDialog } from './brand-docs-dialog'; import type { BrandDocsDialogBrand } from './content'; const meta: StoryMeta = { title: 'BrandDocsDialog', category: 'Product Pages', description: 'Trigger link + modal note about official brand documentation, shown below the manuals/guides grid on RYK and OXI product pages.', usage: `import { BrandDocsDialog } from '@/components/mdx/brand-docs-dialog';\n\n<BrandDocsDialog brand="ryk" />`, }; export default meta; interface BrandDocsDialogArgs { brand: BrandDocsDialogBrand; } export const RykJa = defineStory<BrandDocsDialogArgs>({ name: 'RYK — Japanese', controls: [ { type: 'select', prop: 'brand', label: 'Brand', options: ['ryk', 'oxi'], defaultValue: 'ryk', }, ], render: ({ brand = 'ryk' } = {}) => ( <DialogStoryContainer> {(portalContainer) => ( <div className="p-hgap-sm"> <BrandDocsDialog brand={brand} portalContainer={portalContainer} /> </div> )} </DialogStoryContainer> ), }); export const OxiEn = defineStory({ name: 'OXI — English', render: () => ( <DialogStoryContainer> {(portalContainer) => ( <div className="p-hgap-sm"> <BrandDocsDialog brand="oxi" locale="en" portalContainer={portalContainer} /> </div> )} </DialogStoryContainer> ), });