create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cases/components/base/Radio.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Radio } from '../../../../src/components/base/Radio'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+  args: { label: 'Standard delivery', name: 'demo' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Radio>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <fieldset style={{ border: 0, padding: 0 }}>
+      <legend className="nv-visually-hidden">Delivery</legend>
+      <Row>
+        <Radio name="r" label="Standard" />
+        <Radio name="r" label="Express" defaultChecked />
+        <Radio name="r2" label="Unavailable" disabled />
+      </Row>
+    </fieldset>
+  ),
+}
+export const Playground: Story = {}

package/templates/nova/tests/cases/components/base/Select.cases.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Select } from '../../../../src/components/base/Select'
+import { FormField } from '../../../../src/components/forms/FormField'
+import { Pad } from '../../../support/story-helpers'
+
+const options = [
+  { value: 'featured', label: 'Featured' },
+  { value: 'best', label: 'Best selling' },
+  { value: 'price-asc', label: 'Price, low to high' },
+  { value: 'price-desc', label: 'Price, high to low' },
+  { value: 'new', label: 'Newest' },
+]
+const meta = {
+  title: 'Nova/02 Components/Base/Select',
+  component: Select,
+  tags: ['autodocs'],
+  args: { options, 'aria-label': 'Sort by', size: 'md' },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 280 }}><S /></div></Pad>],
+} satisfies Meta<typeof Select>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <FormField label="Sort by"><Select options={options} /></FormField> }
+export const Playground: Story = {}
+export const StatesDisabled: Story = { name: 'States · disabled', args: { disabled: true, options: [{ value: 'size', label: 'Size' }] } }
+export const StressRtl: Story = { name: 'Stress · RTL', args: { options: [{ value: 'a', label: 'الأكثر مبيعًا' }] }, parameters: { nova: { locale: 'ar' } } }

package/templates/nova/tests/cases/components/base/Skeleton.cases.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Skeleton } from '../../../../src/components/base/Skeleton'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  args: { shape: 'text', lines: 3 },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 360 }}><S /></div></Pad>],
+} satisfies Meta<typeof Skeleton>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div aria-busy="true" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 16, width: 'min(640px, 100%)' }}>
+      {[0, 1, 2].map((i) => (
+        <div key={i}>
+          <Skeleton shape="media" />
+          <Skeleton lines={2} />
+        </div>
+      ))}
+      <span className="nv-visually-hidden" role="status">Loading products</span>
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const StatesReducedMotion: Story = { name: 'States · reduced motion (static)', args: { shape: 'media' }, parameters: { nova: { motion: 'reduced' } } }

package/templates/nova/tests/cases/components/base/Spinner.cases.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Spinner } from '../../../../src/components/base/Spinner'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  args: { size: 'md' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Spinner>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <Row label="16 · 24 · labelled status"><Spinner size="sm" /><Spinner /><Spinner label="Loading" /></Row> }
+export const Playground: Story = {}

package/templates/nova/tests/cases/components/base/Switch.cases.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, within } from '../../../support/case'
+import { Switch } from '../../../../src/components/base/Switch'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  args: { label: 'Marketing emails' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Switch>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <Row><Switch label="Off" /><Switch label="On" defaultChecked /><Switch label="Disabled" disabled /></Row> }
+export const Playground: Story = {}
+export const Accessibility: Story = {
+  name: 'Accessibility · Space toggles the switch',
+  play: async ({ canvasElement }) => {
+    const sw = within(canvasElement).getByRole('switch', { name: 'Marketing emails' })
+    sw.focus()
+    await userEvent.keyboard(' ')
+    await expect(sw).toBeChecked()
+  },
+}

package/templates/nova/tests/cases/components/base/Tabs.cases.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, within } from '../../../support/case'
+import { Tabs } from '../../../../src/components/base/Tabs'
+import { Pad } from '../../../support/story-helpers'
+
+const items = [
+  { id: 'products', label: 'Products', count: 12, content: <p>12 products</p> },
+  { id: 'pages', label: 'Pages', count: 1, content: <p>1 page</p> },
+  { id: 'articles', label: 'Articles', count: 3, content: <p>3 articles</p> },
+]
+const meta = {
+  title: 'Nova/02 Components/Base/Tabs',
+  component: Tabs,
+  tags: ['autodocs'],
+  args: { items, label: 'Search results', variant: 'underline' },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Tabs>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {}
+export const Playground: Story = {}
+export const VariantsSegmented: Story = { name: 'Variants · segmented', args: { variant: 'segmented', items: [{ id: 'd', label: 'Description', content: <p>Description</p> }, { id: 'x', label: 'Details', content: <p>Details</p> }, { id: 's', label: 'Shipping', content: <p>Shipping</p> }] } }
+export const Responsive: Story = { name: 'Responsive · 390 strip scrolls', globals: { viewport: { value: 'mobile', isRotated: false } }, args: { items: [...items, { id: 'collections', label: 'Collections', count: 8, content: <p>8</p> }, { id: 'stores', label: 'Stores', count: 2, content: <p>2</p> }] } }
+export const Stress: Story = { name: 'Stress · RTL', args: { items: [{ id: 'a', label: 'المنتجات', content: <p>١٢</p> }, { id: 'b', label: 'المقالات', content: <p>٣</p> }] }, parameters: { nova: { locale: 'ar' } } }
+export const Accessibility: Story = {
+  name: 'Accessibility · arrow keys, Home / End',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const first = c.getByRole('tab', { name: /Products/ })
+    first.focus()
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(c.getByRole('tab', { name: /Pages/ })).toHaveAttribute('aria-selected', 'true')
+    await userEvent.keyboard('{End}')
+    await expect(c.getByRole('tab', { name: /Articles/ })).toHaveFocus()
+    await userEvent.keyboard('{Home}')
+    await expect(first).toHaveFocus()
+  },
+}

package/templates/nova/tests/cases/components/base/Textarea.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Textarea } from '../../../../src/components/base/Textarea'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Base/Textarea',
+  component: Textarea,
+  tags: ['autodocs'],
+  args: { 'aria-label': 'Order note', placeholder: 'Gift wrap please…', rows: 4 },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 420 }}><S /></div></Pad>],
+} satisfies Meta<typeof Textarea>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { args: { defaultValue: "Gift wrap please — it's for my mum's birthday." } }
+export const Playground: Story = {}
+export const StatesInvalid: Story = { name: 'States · invalid', args: { 'aria-invalid': true } }

package/templates/nova/tests/cases/components/commerce/AddToCart.cases.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, waitFor, within } from '../../../support/case'
+import { AddToCart } from '../../../../src/components/commerce/AddToCart'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/AddToCart',
+  component: AddToCart,
+  tags: ['autodocs'],
+  args: { onAdd: fn(async () => {}), block: false },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 360 }}><S /></div></Pad>],
+} satisfies Meta<typeof AddToCart>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <>
+      <Row label="default"><AddToCart block={false} /></Row>
+      <Row label="adding"><AddToCart block={false} initialState="adding" /></Row>
+      <Row label="added"><AddToCart block={false} initialState="added" /></Row>
+      <Row label="unavailable"><AddToCart block={false} unavailableReason="King / Oat is not available" /></Row>
+      <Row label="sold out"><AddToCart block={false} soldOut /></Row>
+      <Row label="error"><AddToCart block={false} initialState="error" /></Row>
+    </>
+  ),
+}
+export const Playground: Story = {}
+export const Flow: Story = {
+  name: 'Accessibility · Adding… then Added',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Add to cart' }))
+    await waitFor(() => expect(c.getByRole('button', { name: 'Added' })).toBeInTheDocument())
+  },
+}

package/templates/nova/tests/cases/components/commerce/CartLine.cases.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { CartLine } from '../../../../src/components/commerce/CartLine'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/CartLine',
+  component: CartLine,
+  tags: ['autodocs'],
+  args: { line: sc.storeCartLines[0], showCompareAt: true, showVendor: false, updating: false, onQuantity: fn(), onRemove: fn() },
+  render: (a) => <div style={{ padding: '32px var(--page-gutter)', maxWidth: 760 }}><CartLine {...a} /></div>,
+} satisfies Meta<typeof CartLine>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const LowStock: Story = { name: 'States · only 3 left', args: { line: sc.storeCartLines[1] } }
+export const Updating: Story = { name: 'States · updating', args: { line: sc.storeCartLines[2], updating: true } }
+export const Unavailable: Story = { name: 'States · no longer available', args: { line: { ...sc.storeCartLines[2], variant: { ...sc.storeCartLines[2].variant, available: false } } } }
+export const Mobile: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/commerce/CartSummary.cases.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { CartSummary } from '../../../../src/components/commerce/CartSummary'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/CartSummary',
+  component: CartSummary,
+  tags: ['autodocs'],
+  args: { subtotal: { amount: 281, currencyCode: 'USD' }, savings: { amount: 51, currencyCode: 'USD' }, note: 'Taxes included. Discount codes at checkout.', checkoutLabel: 'Checkout', checkoutUrl: '/checkout', paymentMethods: sc.storePayments, badges: sc.storeCartBadges.map((b) => ({ label: b.label, link: b.link || undefined })) },
+  render: (a) => <div style={{ padding: '32px var(--page-gutter)', maxWidth: 420 }}><CartSummary {...a} /></div>,
+} satisfies Meta<typeof CartSummary>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Failed: Story = { name: 'States · checkout failed', args: { checkoutError: true } }

package/templates/nova/tests/cases/components/commerce/CollectionCard.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { CollectionCard } from '../../../../src/components/commerce/CollectionCard'
+import * as fx from '../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/CollectionCard',
+  component: CollectionCard,
+  tags: ['autodocs'],
+  args: { collection: fx.merchRooms[0] },
+  decorators: [(S) => <div style={{ padding: 32, maxWidth: 260 }}><S /></div>],
+} satisfies Meta<typeof CollectionCard>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Overlay: Story = { name: 'Variants · overlay chip · square', args: { textStyle: 'overlay', ratio: 'square' } }
+export const Description: Story = { name: 'Variants · description (2 lines)', args: { showDescription: true } }
+export const NoImage: Story = { name: 'States · no image → first product image', args: { collection: fx.merchRoomNoImage } }
+export const NoImageNoProducts: Story = { name: 'States · no image, no products → neutral tile', args: { collection: { ...fx.merchRoomNoImage, products: [] } } }

package/templates/nova/tests/cases/components/commerce/ComparisonTable.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { ComparisonTable } from '../../../../src/components/commerce/ComparisonTable'
+import * as sc from '../../../support/story-content'
+
+const columns = sc.storyCompareItems.map((it) => ({ title: it.settings.title, product: it.product, image: it.product?.featuredImage, values: it.settings.values.split('\n') }))
+const meta = {
+  title: 'Nova/02 Components/Commerce/ComparisonTable',
+  component: ComparisonTable,
+  tags: ['autodocs'],
+  args: { features: sc.storyCompareFeatures.split('\n'), columns, highlight: 1, showProductRow: true, differencesOnly: false, onAdd: fn(), caption: 'Which duvet cover?' },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)' }}><ComparisonTable {...a} /></div>,
+} satisfies Meta<typeof ComparisonTable>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Differences: Story = { name: 'Variants · differences only', args: { differencesOnly: true } }
+export const Mobile: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/commerce/Hotspot.cases.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Hotspot } from '../../../../src/components/commerce/Hotspot'
+import * as fx from '../../../fixtures/index'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/Hotspot',
+  component: Hotspot,
+  tags: ['autodocs'],
+  args: { index: 2, product: fx.merchThrow, x: 30, y: 45, active: true, card: true },
+  render: (a) => (
+    <div style={{ padding: '48px var(--page-gutter)' }}>
+      <div style={{ position: 'relative', maxWidth: 520, aspectRatio: '4 / 5', borderRadius: 8, background: 'var(--color-media-bg)' }}>
+        <img src={sc.storyLookImage.src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8 }} />
+        <Hotspot {...a} />
+      </div>
+    </div>
+  ),
+} satisfies Meta<typeof Hotspot>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Idle: Story = { name: 'States · idle', args: { active: false } }
+export const Flipped: Story = { name: 'States · near the end edge → card flips', args: { x: 75 } }

package/templates/nova/tests/cases/components/commerce/LookItem.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { fn } from '../../../support/case'
+import { LookItem } from '../../../../src/components/commerce/LookItem'
+import * as fx from '../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/LookItem',
+  component: LookItem,
+  tags: ['autodocs'],
+  args: { index: 2, product: fx.merchThrow, variant: 'cards', active: false, onAdd: fn() },
+  render: (a) => <ol style={{ padding: '48px var(--page-gutter)', maxWidth: 520, listStyle: 'none', margin: 0 }}><LookItem {...a} /></ol>,
+} satisfies Meta<typeof LookItem>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Active: Story = { name: 'States · active', args: { active: true } }
+export const Compact: Story = { name: 'Variants · compact', args: { variant: 'compact' } }
+export const SoldOut: Story = { name: 'States · sold out', args: { product: fx.merchCandle } }

package/templates/nova/tests/cases/components/commerce/PaymentMark.cases.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { PaymentMark } from '../../../../src/components/commerce/PaymentMark'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/PaymentMark',
+  component: PaymentMark,
+  tags: ['autodocs'],
+  args: { method: 'visa' },
+  decorators: [(S) => <Pad surface="muted"><S /></Pad>],
+} satisfies Meta<typeof PaymentMark>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <Row>{(['visa', 'mastercard', 'amex', 'promptpay', 'jcb', 'truemoney'] as const).map((m) => <PaymentMark key={m} method={m} />)}</Row> }
+export const Playground: Story = {}

package/templates/nova/tests/cases/components/commerce/Price.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Price } from '../../../../src/components/commerce/Price'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const USD = (amount: number) => ({ amount, currencyCode: 'USD' })
+const meta = {
+  title: 'Nova/02 Components/Commerce/Price',
+  component: Price,
+  tags: ['autodocs'],
+  args: { price: USD(189), compareAt: USD(240) },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof Price>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <>
+      <Row label="card · regular · sale · from · sold out · free"><Price price={USD(28)} /><Price price={USD(189)} compareAt={USD(240)} /><Price price={USD(74)} from /><Price price={USD(36)} soldOut /><Price price={USD(0)} /></Row>
+      <Row label="pdp · sale + Save pill"><Price size="pdp" showSave price={USD(189)} compareAt={USD(240)} /></Row>
+      <Row label="JPY · KWD · THB"><Price price={{ amount: 4800, currencyCode: 'JPY' }} /><Price price={{ amount: 8.75, currencyCode: 'KWD' }} /><Price price={{ amount: 590, currencyCode: 'THB' }} /></Row>
+    </>
+  ),
+}
+export const Playground: Story = {}
+export const Pdp: Story = { name: 'Variants · pdp · Save pill', args: { size: 'pdp', showSave: true } }
+export const Unavailable: Story = { name: 'States · no price in this market (Nova 14)', args: { unavailable: true } }

package/templates/nova/tests/cases/components/commerce/ProductCard.cases.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, fn, userEvent, within } from '../../../support/case'
+import { ProductCard } from '../../../../src/components/commerce/ProductCard'
+import * as fx from '../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/ProductCard',
+  component: ProductCard,
+  tags: ['autodocs'],
+  args: { product: fx.merchMug },
+  render: (a) => (
+    <div style={{ padding: 32, maxWidth: 280 }}>
+      <ProductCard {...a} />
+    </div>
+  ),
+} satisfies Meta<typeof ProductCard>
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** The canvas's ProductCard states row. */
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: '40px 16px', padding: 32 }}>
+      <ProductCard product={fx.merchMug} showVendor />
+      <ProductCard product={fx.merchDuvet} />
+      <ProductCard product={fx.merchOil} />
+      <ProductCard product={fx.merchCandle} />
+      <ProductCard product={fx.merchBoard} />
+      <ProductCard product={fx.merchPlatter} />
+      <ProductCard product={fx.merchNapkins} />
+      <ProductCard product={fx.merchPourOver} />
+      <ProductCard product={fx.merchCarafe} />
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const Vendor: Story = { name: 'Variants · vendor · 6 colours → 4 + "+2"', args: { showVendor: true } }
+export const Sale: Story = { name: 'Variants · sale −21% · compare-at', args: { product: fx.merchDuvet } }
+export const New: Story = { name: 'Variants · New badge', args: { product: fx.merchOil } }
+export const SoldOut: Story = { name: 'States · sold out · muted price, no compare-at', args: { product: fx.merchCandle } }
+export const From: Story = { name: 'Variants · From price (range)', args: { product: fx.merchBoard } }
+export const Portrait: Story = { name: 'Variants · ratio portrait', args: { ratio: 'portrait' } }
+export const MissingImage: Story = { name: 'States · missing image → neutral tile', args: { product: fx.merchNapkins } }
+export const LongTitle: Story = { name: 'Stress · long title · 2-line clamp · 4-digit price', args: { product: fx.merchPlatter } }
+export const Currencies: Story = {
+  name: 'Stress · currency · JPY 0 decimals · KWD 3 decimals · Free',
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))', gap: 16, padding: 32 }}>
+      <ProductCard product={fx.merchJpy} />
+      <ProductCard product={fx.merchKwd} />
+      <ProductCard product={fx.merchFree} />
+    </div>
+  ),
+}
+export const Compact: Story = { name: 'Variants · compact (recently viewed)', args: { compact: true, product: fx.merchDuvet } }
+export const Thai: Story = { name: 'Stress · Thai', args: { product: { ...fx.merchMug, title: 'แก้วมัคเซรามิกเคลือบลายจุด ขนาด 350 มล.' } }, parameters: { nova: { locale: 'th' } } }
+export const QuickAdd: Story = {
+  name: 'Accessibility · quick add is its own labelled button',
+  args: { onQuickAdd: fn() },
+  play: async ({ canvasElement, args }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Choose options for Speckled Stoneware Mug, 350 ml' }))
+    await expect(args.onQuickAdd).toHaveBeenCalled()
+    await expect(c.getByRole('link', { name: 'Speckled Stoneware Mug, 350 ml' })).toHaveAttribute('href', '/products/speckled-stoneware-mug')
+  },
+}
+export const Responsive: Story = { name: 'Responsive · 390 · quick add always visible', globals: { viewport: { value: 'mobile', isRotated: false } }, args: { onQuickAdd: fn() } }

package/templates/nova/tests/cases/components/commerce/ProductGallery.cases.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { useState } from 'react'
+import { expect, userEvent, within } from '../../../support/case'
+import { ProductGallery, type ProductGalleryProps } from '../../../../src/components/commerce/ProductGallery'
+import * as fx from '../../../fixtures/index'
+
+function Demo(p: Omit<ProductGalleryProps, 'index' | 'onIndex'>) {
+  const [i, setI] = useState(0)
+  return <ProductGallery {...p} index={i} onIndex={setI} />
+}
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/ProductGallery',
+  component: ProductGallery,
+  tags: ['autodocs'],
+  args: { images: fx.merchDuvet.images, title: fx.merchDuvet.title, index: 0, onIndex: () => {}, onZoom: () => {} },
+  render: (a) => (
+    <div style={{ padding: 32, maxWidth: 720 }}>
+      <Demo images={a.images} title={a.title} layout={a.layout} ratio={a.ratio} onZoom={a.onZoom} />
+    </div>
+  ),
+} satisfies Meta<typeof ProductGallery>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Below: Story = { name: 'Variants · thumbnails below', args: { layout: 'thumbnails-below' } }
+export const Stacked: Story = { name: 'Variants · stacked', args: { layout: 'stacked' } }
+export const None: Story = { name: 'States · no images', args: { images: [] } }
+export const Mobile: Story = { name: 'Responsive · 390 · swipe + counter', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const Thumbs: Story = {
+  name: 'Accessibility · a thumbnail shows its image',
+  tags: ['viewport:desktop'],
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Image 3 of 6' }))
+    await expect(c.getByRole('button', { name: 'Image 3 of 6' })).toHaveAttribute('aria-current', 'true')
+  },
+}

package/templates/nova/tests/cases/components/commerce/QuantitySelector.cases.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { useState } from 'react'
+import { expect, userEvent, within } from '../../../support/case'
+import { QuantitySelector } from '../../../../src/components/commerce/QuantitySelector'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/QuantitySelector',
+  component: QuantitySelector,
+  tags: ['autodocs'],
+  args: { value: 1, onChange: () => {} },
+  render: (a) => {
+    const [v, setV] = useState(a.value)
+    return <QuantitySelector {...a} value={v} onChange={setV} />
+  },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof QuantitySelector>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Interaction: Story = {
+  name: 'Accessibility · + / − change the number',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Increase quantity' }))
+    await expect(c.getByRole('spinbutton', { name: 'Quantity' })).toHaveValue(2)
+    await expect(c.getByRole('button', { name: 'Decrease quantity' })).toBeEnabled()
+  },
+}
+export const AtMax: Story = { name: 'States · at stock limit', args: { value: 3, max: 3 } }

package/templates/nova/tests/cases/components/commerce/Reviews.cases.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { useState } from 'react'
+import { RatingBreakdown, RatingSummary, ReviewItem } from '../../../../src/components/commerce/Reviews'
+import * as sc from '../../../support/story-content'
+
+function Demo() {
+  const [active, setActive] = useState<number | null>(null)
+  const r = sc.storyReviews
+  return (
+    <div style={{ padding: '48px var(--page-gutter)', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 48 }}>
+      <div style={{ display: 'grid', gap: 20, alignContent: 'start' }}>
+        <RatingSummary average={r.average} count={r.count} />
+        <RatingBreakdown distribution={r.distribution} active={active} onSelect={setActive} />
+      </div>
+      <div>
+        {r.reviews.slice(0, 2).map((x) => (
+          <ReviewItem key={x.id} review={x} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/Reviews',
+  component: RatingSummary,
+  tags: ['autodocs'],
+  args: { average: 4.8, count: 212 },
+  render: () => <Demo />,
+} satisfies Meta<typeof RatingSummary>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Mobile: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } }, render: () => <div style={{ padding: '32px var(--page-gutter)' }}>{sc.storyReviews.reviews.slice(0, 2).map((x) => <ReviewItem key={x.id} review={x} />)}</div> }

package/templates/nova/tests/cases/components/commerce/Stars.cases.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Stars } from '../../../../src/components/commerce/Stars'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/Rating',
+  component: Stars,
+  tags: ['autodocs'],
+  args: { value: 4.8, size: 'md', showLabel: false },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)' }}><Stars {...a} /></div>,
+} satisfies Meta<typeof Stars>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Label: Story = { name: 'Variants · with label · large', args: { showLabel: true, size: 'lg' } }
+export const Four: Story = { name: 'Variants · 4 of 5 · small', args: { value: 4, size: 'sm' } }

package/templates/nova/tests/cases/components/commerce/VariantPicker.cases.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { useState } from 'react'
+import { expect, userEvent, within } from '../../../support/case'
+import { VariantPicker, initialSelection, type VariantPickerProps } from '../../../../src/components/commerce/VariantPicker'
+import { Pad } from '../../../support/story-helpers'
+import * as fx from '../../../fixtures/index'
+
+function Demo(p: Omit<VariantPickerProps, 'selected' | 'onChange'> & { start?: Record<string, string> }) {
+  const [sel, setSel] = useState(p.start ?? initialSelection(p.product))
+  return <VariantPicker {...p} selected={sel} onChange={(o, v) => setSel((s) => ({ ...s, [o]: v }))} />
+}
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/VariantPicker',
+  component: VariantPicker,
+  tags: ['autodocs'],
+  args: { product: fx.merchDuvet, selected: { Size: 'Queen', Colour: 'Oat' }, onChange: () => {} },
+  render: (a) => <Demo product={a.product} style={a.style} start={{ Size: 'Queen', Colour: 'Oat' }} sizeGuide={<a href="#size-guide" style={{ fontSize: 13, color: 'inherit' }}>Size guide</a>} />,
+  decorators: [(S) => <Pad><div style={{ maxWidth: 424 }}><S /></div></Pad>],
+} satisfies Meta<typeof VariantPicker>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {}
+export const Playground: Story = {}
+export const Buttons: Story = { name: 'Variants · style · buttons', args: { style: 'buttons' } }
+export const Select: Story = { name: 'Variants · style · select', args: { style: 'select' } }
+export const KingOat: Story = {
+  name: 'States · King is not made in Oat → struck, still selectable',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const king = c.getByRole('radio', { name: /King/ })
+    await userEvent.click(king)
+    await expect(king).toBeChecked()
+    await expect(king.closest('label')).toHaveAttribute('data-unavailable')
+  },
+}
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }