create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cases/components/content/blocks/Video.cases.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { VideoBlock, videoSchema } from '../../../../../src/components/content/blocks/Video'
+import { blockFrame } from '../../../../support/block-stories'
+import * as fx from '../../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Content/Video',
+  component: VideoBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(videoSchema), video: null },
+  decorators: [blockFrame],
+} satisfies Meta<typeof VideoBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithSource: Story = { name: 'With source · controls', args: { video: fx.studioVideo } }
+export const StatesNoSource: Story = { name: 'States · no source → skipped' }

package/templates/nova/tests/cases/components/forms/ContactForm.cases.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, waitFor, within } from '../../../support/case'
+import { ContactForm, type ContactFormProps } from '../../../../src/components/forms/ContactForm'
+
+const meta = {
+  title: 'Nova/02 Components/Forms/ContactFields',
+  component: ContactForm,
+  tags: ['autodocs'],
+  args: { fields: ['name', 'email', 'phone', 'message'], action: '/contact', buttonLabel: 'Send message', successMessage: 'Thanks — we’ll reply soon.', fallbackEmail: 'hello@halden.co', onSend: fn() as ContactFormProps['onSend'] },
+  render: (a) => <div style={{ padding: '32px var(--page-gutter)', maxWidth: 680 }}><ContactForm {...a} /></div>,
+} satisfies Meta<typeof ContactForm>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Short: Story = { name: 'Variants · email + message', args: { fields: ['email', 'message'] } }
+export const Failed: Story = {
+  name: 'States · send failed → values kept + "Email us at …"',
+  args: { onSend: () => Promise.reject(new Error('offline')) },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.type(c.getByLabelText(/^name/i), 'Mali Srisuk')
+    await userEvent.type(c.getByLabelText(/^email/i), 'mali@halden.co')
+    await userEvent.type(c.getByLabelText(/^message/i), 'Hello')
+    await userEvent.click(c.getByRole('button', { name: 'Send message' }))
+    await waitFor(() => expect(c.getByRole('alert')).toHaveTextContent(/email us at hello@halden.co/i))
+    await expect(c.getByLabelText(/^message/i)).toHaveValue('Hello')
+  },
+}

package/templates/nova/tests/cases/components/forms/FormField.cases.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, within } from '../../../support/case'
+import { FormField } from '../../../../src/components/forms/FormField'
+import { Input } from '../../../../src/components/base/Input'
+import { Textarea } from '../../../../src/components/base/Textarea'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Forms/FormField',
+  component: FormField,
+  tags: ['autodocs'],
+  args: { label: 'Email', help: '', error: '', optional: false, children: <Input type="email" placeholder="you@example.com" /> },
+  decorators: [(S, c) => (c.parameters.wide ? <S /> : <Pad><div style={{ maxWidth: 360 }}><S /></div></Pad>)],
+} satisfies Meta<typeof FormField>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 20 }}>
+      <FormField label="Email" help="We only use this for order updates."><Input type="email" placeholder="you@example.com" /></FormField>
+      <FormField label="Phone" optional><Input type="tel" defaultValue="+66 81 234 5678" /></FormField>
+      <FormField label="Postcode" error="Enter 5 digits"><Input defaultValue="1011" inputMode="numeric" /></FormField>
+      <FormField label="Order note" counter="46 / 500"><Textarea defaultValue="Gift wrap please — it's for my mum's birthday." maxLength={500} /></FormField>
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const StatesError: Story = {
+  name: 'States · error is described',
+  args: { label: 'Postcode', error: 'Enter 5 digits', children: <Input defaultValue="1011" /> },
+  play: async ({ canvasElement }) => {
+    const input = within(canvasElement).getByLabelText('Postcode')
+    await expect(input).toHaveAttribute('aria-invalid', 'true')
+    await expect(input).toHaveAccessibleDescription('Enter 5 digits')
+  },
+}
+export const Stress: Story = { name: 'Stress · Thai', args: { label: 'อีเมล', help: 'ใช้สำหรับแจ้งสถานะคำสั่งซื้อเท่านั้น' }, parameters: { nova: { locale: 'th' } } }
+export const Accessibility: Story = {
+  name: 'Accessibility · label focuses the control',
+  tags: ['browser-only'],
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByText('Email'))
+    await expect(c.getByLabelText('Email')).toHaveFocus()
+  },
+}
+export const Nova14States: Story = {
+  name: 'Nova 14 · success · warning · read-only · disabled · required mark',
+  parameters: { wide: true },
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 24, padding: 32 }}>
+      <FormField label="Email" required requiredMark help="We'll send your receipt here."><Input type="email" size="lg" placeholder="you@example.com" /></FormField>
+      <FormField label="Postcode" success="Delivery available"><Input size="lg" defaultValue="50200" /></FormField>
+      <FormField label="Postcode" warning="Delivery takes 1 extra day to this area"><Input size="lg" defaultValue="10110" /></FormField>
+      <FormField label="Order number"><Input size="lg" defaultValue="#HC-10482" readOnly /></FormField>
+      <FormField label="Country" help="Set by your region."><Input size="lg" defaultValue="Thailand" disabled /></FormField>
+      <FormField label="Email" required requiredMark error="Enter a full email address"><Input type="email" size="lg" defaultValue="mali@halden" /></FormField>
+    </div>
+  ),
+}

package/templates/nova/tests/cases/components/forms/NewsletterForm.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { NewsletterForm } from '../../../../src/components/forms/NewsletterForm'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Forms/NewsletterForm',
+  component: NewsletterForm,
+  tags: ['autodocs'],
+  args: { action: '/contact#newsletter', placeholder: 'you@example.com', buttonLabel: 'Subscribe', note: 'Unsubscribe any time.' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof NewsletterForm>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {}
+export const Playground: Story = {}
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/forms/SearchField.cases.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, within } from '../../../support/case'
+import { SearchField } from '../../../../src/components/forms/SearchField'
+
+const meta = {
+  title: 'Nova/02 Components/Forms/SearchField',
+  component: SearchField,
+  tags: ['autodocs'],
+  args: { defaultValue: 'linen', action: '/search' },
+  render: (a) => <div style={{ padding: '32px var(--page-gutter)' }}><SearchField {...a} /></div>,
+} satisfies Meta<typeof SearchField>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Empty: Story = { name: 'States · empty', args: { defaultValue: '' } }
+export const Clear: Story = {
+  name: 'Accessibility · Clear empties the field and keeps focus',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Clear' }))
+    await expect(c.getByRole('searchbox')).toHaveValue('')
+    await expect(c.getByRole('searchbox')).toHaveFocus()
+  },
+}

package/templates/nova/tests/cases/components/forms/blocks/Newsletter.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { NewsletterBlock, newsletterBlockSchema, type NewsletterBlockProps } from '../../../../../src/components/forms/blocks/Newsletter'
+import { blockFrame, blockPlayground } from '../../../../support/block-stories'
+
+const copy = { heading: 'Letters from the studio', body: 'New glazes and restocks, once a month.' }
+const meta = {
+  title: 'Nova/02 Components/Forms/NewsletterBlock',
+  component: NewsletterBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(newsletterBlockSchema), ...copy, buttonUrl: 'https://instagram.com/halden.co', buttonLabel: 'Subscribe on Instagram' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof NewsletterBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = blockPlayground<NewsletterBlockProps>(newsletterBlockSchema, copy) as Story
+export const StatesForm: Story = { name: 'States · endpoint → form', args: { action: '#', buttonUrl: '', note: 'Unsubscribe any time.' } }
+export const StatesCopyOnly: Story = { name: 'States · copy only', args: { buttonUrl: '' } }

package/templates/nova/tests/cases/components/navigation/BrandLogo.cases.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { BrandLogo } from '../../../../src/components/navigation/BrandLogo'
+import * as fx from '../../../fixtures/index'
+// Host styles: BrandLogo leaves sizing to the surface that places it.
+import '../../../../src/sections/Header/Header.css'
+import '../../../../src/sections/Footer/blocks/footer.css'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Navigation/BrandLogo',
+  component: BrandLogo,
+  tags: ['autodocs'],
+  args: { shop: fx.shopWithLogo, text: '', imageClassName: 'nv-header__logo', textClassName: 'nv-header__wordmark' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof BrandLogo>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 16 }}>
+      <Row label="A · global logo image"><BrandLogo shop={fx.shopWithLogo} imageClassName="nv-footer-brand__logo" /></Row>
+      <Row label="B · section text"><BrandLogo shop={fx.shop} text="Halden & Co." textClassName="nv-footer-brand__name" /></Row>
+      <Row label="C · shop name"><BrandLogo shop={fx.shopLegalName} textClassName="nv-footer-brand__name" /></Row>
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const Stress: Story = { name: 'Stress · long name → data-long', args: { shop: fx.shopLong } }

package/templates/nova/tests/cases/components/navigation/Breadcrumb.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Breadcrumb } from '../../../../src/components/navigation/Breadcrumb'
+import { trails } from '../../../fixtures/index'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Navigation/Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+  args: { items: trails.product, separator: '/', mobileStyle: 'back-link', showCurrent: true },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Breadcrumb>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <div style={{ display: 'grid', gap: 16 }}><Breadcrumb items={trails.collection} /><Breadcrumb items={trails.product} /><Breadcrumb items={trails.longTitle} separator="›" /></div> }
+export const Playground: Story = {}
+export const Stress: Story = { name: 'Stress · RTL', args: { items: trails.arabic, separator: '›' }, parameters: { nova: { locale: 'ar' } } }
+export const Responsive: Story = { name: 'Responsive · 390 back link', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/navigation/LocaleSelector.cases.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { LocaleSelector } from '../../../../src/components/navigation/LocaleSelector'
+import { MarketSelector } from '../../../../src/components/overlays/MarketSelector'
+import * as fx from '../../../fixtures/index'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Navigation/LocaleSelector',
+  component: LocaleSelector,
+  tags: ['autodocs'],
+  args: { localization: fx.localization, variant: 'field', size: 'md', block: false, onOpen: fn() },
+  decorators: [(S) => <Pad surface="muted"><S /></Pad>],
+} satisfies Meta<typeof LocaleSelector>
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Clickable: each trigger opens the real Region & language dialog (Overlays / MarketSelector). */
+export const Overview: Story = {
+  parameters: { docs: { story: { height: '640px' } } },
+  render: () => (
+    <div style={{ display: 'grid', gap: 16, justifyItems: 'start', paddingTop: 320 }}>
+      <Row label="default"><MarketSelector localization={fx.localization} /></Row>
+      <Row label="one language only"><MarketSelector localization={{ current: fx.markets[0], available: [fx.markets[0], fx.markets[2]] }} /></Row>
+      <Row label="header · borderless"><MarketSelector localization={fx.localization} variant="compact" placement="top-start" /></Row>
+      <Row label="phone · 48, full width"><div style={{ width: 358 }}><MarketSelector localization={fx.localization} size="lg" block placement="top-start" /></div></Row>
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const StatesSingleMarket: Story = { name: 'States · one market → not rendered', args: { localization: fx.localizationSingle } }
+export const Stress: Story = { name: 'Stress · Thai · RTL', render: () => <div style={{ display: 'grid', gap: 16 }}><LocaleSelector localization={fx.localizationThai} /><div dir="rtl" lang="ar"><LocaleSelector localization={fx.localizationArabic} /></div></div> }

package/templates/nova/tests/cases/components/navigation/Menu.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Menu } from '../../../../src/components/navigation/Menu'
+import * as fx from '../../../fixtures/index'
+// Host styles: Menu is styled by the surface that places it (footer here).
+import '../../../../src/sections/Footer/Footer.css'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Navigation/Menu',
+  component: Menu,
+  tags: ['autodocs'],
+  args: { items: fx.footerShop.items, className: 'nv-footer__menu-list' },
+  decorators: [(S) => <Pad surface="muted"><div className="nv-footer"><S /></div></Pad>],
+} satisfies Meta<typeof Menu>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 24 }}>
+      <Row label="footer column"><Menu items={fx.footerHelp.items} className="nv-footer__menu-list" /></Row>
+      <Row label="inline row (centered footer)"><Menu items={fx.footerMinimal.items} className="nv-footer__inline-menu" /></Row>
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const Stress: Story = { name: 'Stress · Thai', args: { items: fx.footerShopThai.items }, parameters: { nova: { locale: 'th' } } }

package/templates/nova/tests/cases/components/navigation/Pagination.cases.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Pagination } from '../../../../src/components/navigation/Pagination'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Navigation/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  args: { page: 2, pages: 8, href: (p: number) => `?page=${p}`, variant: 'numbered' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Pagination>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: (a) => (
+    <>
+      <Row label="page 1 of 8"><Pagination {...a} page={1} pages={8} /></Row>
+      <Row label="page 5 of 24"><Pagination {...a} page={5} pages={24} /></Row>
+      <Row label="compact"><div style={{ width: 320 }}><Pagination {...a} variant="compact" /></div></Row>
+    </>
+  ),
+}
+export const Playground: Story = {}
+export const Responsive: Story = { name: 'Responsive · 390 numbered → compact', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/navigation/RecoveryLinks.cases.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { RecoveryLinks } from '../../../../src/components/navigation/RecoveryLinks'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Navigation/RecoveryLinks',
+  component: RecoveryLinks,
+  tags: ['autodocs'],
+  args: { links: sc.storeSuggestions, label: 'Suggested collections', align: 'center' },
+  render: (a) => <div style={{ padding: '32px var(--page-gutter)' }}><RecoveryLinks {...a} /></div>,
+} satisfies Meta<typeof RecoveryLinks>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Mobile: Story = { name: 'Responsive · 390 · scrolls', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/navigation/SocialLinks.cases.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { SocialLinks } from '../../../../src/components/navigation/SocialLinks'
+import * as fx from '../../../fixtures/index'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Navigation/SocialLinks',
+  component: SocialLinks,
+  tags: ['autodocs'],
+  args: { shop: fx.shop, links: {} },
+  decorators: [(S) => <Pad surface="muted"><S /></Pad>],
+} satisfies Meta<typeof SocialLinks>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <Row><SocialLinks shop={fx.shop} /><SocialLinks links={{ youtube: 'https://youtube.com/@halden' }} /></Row> }
+export const Playground: Story = {}
+export const StatesEmpty: Story = { name: 'States · no links → nothing', args: { shop: fx.shopMinimal } }

package/templates/nova/tests/cases/components/navigation/blocks/SocialLinks.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { SocialLinksBlock, socialLinksSchema, type SocialLinksBlockProps } from '../../../../../src/components/navigation/blocks/SocialLinks'
+import * as fx from '../../../../fixtures/index'
+import { blockFrame, blockPlayground } from '../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/02 Components/Navigation/SocialLinksBlock',
+  component: SocialLinksBlock,
+  tags: ['autodocs'],
+  args: { shop: fx.shop },
+  decorators: [blockFrame],
+} satisfies Meta<typeof SocialLinksBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = blockPlayground<SocialLinksBlockProps>(socialLinksSchema, { shop: fx.shop }) as Story
+export const StatesBlockOverridesBrand: Story = { name: 'States · block URL overrides Brand', args: { youtube: 'https://youtube.com/@halden' } }

package/templates/nova/tests/cases/components/overlays/AccountMenu.cases.tsx

@@ -0,0 +1,28 @@
+import { useRef, useState } from 'react'
+import type { Meta, StoryObj } from '../../../support/case'
+import { AccountMenu, type AccountMenuProps } from '../../../../src/components/overlays/AccountMenu'
+import { IconButton } from '../../../../src/components/base/IconButton'
+
+function Demo({ customer }: Pick<AccountMenuProps, 'customer'>) {
+  const anchor = useRef<HTMLButtonElement>(null)
+  const [open, setOpen] = useState(true)
+  return (
+    <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'flex-start', padding: '24px var(--page-gutter)', minHeight: 380 }}>
+      <IconButton ref={anchor} icon="user" label="Account" aria-haspopup="dialog" aria-expanded={open} onClick={() => setOpen((o) => !o)} />
+      <AccountMenu open={open} onClose={() => setOpen(false)} anchor={anchor} customer={customer} />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/AccountMenu',
+  component: Demo,
+  tags: ['autodocs'],
+  args: { customer: null },
+} satisfies Meta<typeof Demo>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SignedOut: Story = { name: 'State · signed out' }
+export const SignedIn: Story = { name: 'State · signed in · long name', args: { customer: { firstName: 'Mali', lastName: 'Srisuk-Wongsawat', email: 'mali@halden.co' } } }
+export const Mobile: Story = { name: 'Responsive · 390 → sheet', args: { customer: { firstName: 'Mali', lastName: 'Srisuk-Wongsawat', email: 'mali@halden.co' } }, globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/overlays/CartDrawer.cases.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, waitFor, within } from '../../../support/case'
+import { CartDrawer } from '../../../../src/components/overlays/CartDrawer'
+import * as sc from '../../../support/story-content'
+import * as fx from '../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/CartDrawer',
+  component: CartDrawer,
+  tags: ['autodocs'],
+  args: { open: true, onClose: fn(), cart: sc.storeDrawerCart, checkoutUrl: '/checkout', cartUrl: '/cart', onQuantity: fn(), onRemove: fn(), onRetry: fn() },
+} satisfies Meta<typeof CartDrawer>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Updating: Story = { name: 'State · a line updating', args: { updatingLineIds: ['d1'] } }
+export const Failed: Story = { name: 'State · update failed → inline alert', args: { failedLineIds: ['d1'] } }
+export const Empty: Story = { name: 'State · empty', args: { cart: { ...sc.storeDrawerCart, lines: [], itemCount: 0 }, emptyAction: { label: 'Shop New this season', href: '/collections/new-this-season' } } }
+export const WithData: Story = { name: 'Data requirement · free shipping + goes well with', args: { freeShipping: { remaining: { amount: 32, currencyCode: 'USD' }, progress: 0.73 }, goesWellWith: [fx.merchMug, fx.merchThrow] } }
+export const Mobile: Story = { name: 'Responsive · 390 · full screen', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const Remove: Story = {
+  name: 'Accessibility · each control is named for its line',
+  play: async ({ canvasElement, args }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    await userEvent.click(await doc.findByRole('button', { name: /remove washed linen duvet cover/i }))
+    await waitFor(() => expect(args.onRemove).toHaveBeenCalled())
+    await expect(doc.getByRole('group', { name: /quantity of washed linen duvet cover/i })).toBeInTheDocument()
+  },
+}

package/templates/nova/tests/cases/components/overlays/ConfirmationDialog.cases.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { ConfirmationDialog } from '../../../../src/components/overlays/ConfirmationDialog'
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/ConfirmationDialog',
+  component: ConfirmationDialog,
+  tags: ['autodocs'],
+  args: { open: true, title: 'Delete this address?', description: "88 Nimmanhaemin Soi 9 will be removed from your account. This can't be undone.", confirmLabel: 'Delete address', tone: 'destructive', onConfirm: fn(), onCancel: fn() },
+} satisfies Meta<typeof ConfirmationDialog>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Neutral: Story = { name: 'Variants · neutral', args: { tone: 'neutral', title: 'Leave without saving?', description: 'Your changes to this address will be lost.', confirmLabel: 'Leave' } }
+export const Mobile: Story = { name: 'Responsive · 390 · sheet, action on top', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/overlays/CookieConsent.cases.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, waitFor, within } from '../../../support/case'
+import { CookieConsent } from '../../../../src/components/overlays/CookieConsent'
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/CookieConsent',
+  component: CookieConsent,
+  tags: ['autodocs'],
+  args: { open: true, privacyUrl: '/policies/privacy-policy', onDecide: fn() },
+  render: (a) => <div style={{ minHeight: 480 }}><CookieConsent {...a} /></div>,
+} satisfies Meta<typeof CookieConsent>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Banner: Story = { name: 'State · banner' }
+export const Mobile: Story = { name: 'Responsive · 390 · banner', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const RejectIsEasy: Story = {
+  name: 'Accessibility · Reject non-essential is one click and records no optional categories',
+  play: async ({ canvasElement, args }) => {
+    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Reject non-essential' }))
+    await waitFor(() => expect(args.onDecide).toHaveBeenCalledWith({ analytics: false, marketing: false, preferences: false }))
+  },
+}

package/templates/nova/tests/cases/components/overlays/CookiePreferences.cases.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { CookieConsent } from '../../../../src/components/overlays/CookieConsent'
+
+/** The preferences dialog opened from the consent banner's Manage — same component, its own page. */
+const meta = {
+  title: 'Nova/02 Components/Overlays/CookiePreferences',
+  component: CookieConsent,
+  tags: ['autodocs'],
+  args: { open: true, privacyUrl: '/policies/privacy-policy', onDecide: fn(), defaultManageOpen: true },
+  render: (a) => <div style={{ minHeight: 480 }}><CookieConsent {...a} /></div>,
+} satisfies Meta<typeof CookieConsent>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Preferences: Story = { name: 'State · preferences dialog' }

package/templates/nova/tests/cases/components/overlays/Drawer.cases.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../support/case'
+import { Drawer, type DrawerProps } from '../../../../src/components/overlays/Drawer'
+import { Button } from '../../../../src/components/base/Button'
+import { Pad } from '../../../support/story-helpers'
+
+function Demo({ side = 'end', initiallyOpen = false, title = 'Drawer title' }: Partial<DrawerProps> & { initiallyOpen?: boolean }) {
+  const [open, setOpen] = useState(initiallyOpen)
+  return (
+    <Pad>
+      <Button onClick={() => setOpen(true)}>Open drawer</Button>
+      <Drawer open={open} onClose={() => setOpen(false)} side={side} title={title} subtitle={side === 'end' ? '3 items' : undefined} footer={<Button block>Primary action</Button>}>
+        <p>Body scrolls; the foot stays pinned.</p>
+      </Drawer>
+    </Pad>
+  )
+}
+
+const meta = {
+  title: 'Nova/02 Components/Overlays/Drawer',
+  component: Demo,
+  tags: ['autodocs'],
+  args: { side: 'end', initiallyOpen: true, title: 'Drawer title' },
+} satisfies Meta<typeof Demo>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const VariantsStart: Story = { name: 'Variants · start', args: { side: 'start' } }
+export const StressRtl: Story = { name: 'Stress · RTL (end mirrors)', parameters: { nova: { locale: 'ar' } } }
+export const Accessibility: Story = {
+  name: 'Accessibility · focus to the title, trap, Esc returns focus',
+  tags: ['browser-only'],
+  args: { initiallyOpen: false },
+  play: async ({ canvasElement }) => {
+    const doc = within(canvasElement.ownerDocument.body)
+    const trigger = within(canvasElement).getByRole('button', { name: 'Open drawer' })
+    await userEvent.click(trigger)
+    const dialog = await doc.findByRole('dialog', { name: 'Drawer title' })
+    // Nova 13: first focus is the title; Tab then walks Close → the action and wraps.
+    await waitFor(() => expect(within(dialog).getByRole('heading', { name: 'Drawer title' })).toHaveFocus())
+    await userEvent.tab()
+    await expect(within(dialog).getByRole('button', { name: 'Close Drawer title' })).toHaveFocus()
+    await userEvent.tab()
+    await expect(within(dialog).getByRole('button', { name: 'Primary action' })).toHaveFocus()
+    await userEvent.tab()
+    await expect(within(dialog).getByRole('button', { name: 'Close Drawer title' })).toHaveFocus()
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(trigger).toHaveFocus())
+  },
+}