create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/tests/cases/components/commerce/blocks/Badge.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { BadgeBlock } from '../../../../../src/components/commerce/blocks/Badge'
+import { blockFrame } from '../../../../support/block-stories'
+
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/ProductBadge',
+  component: BadgeBlock,
+  tags: ['autodocs'],
+  args: { icon: 'truck', label: 'Free shipping', detail: 'Over $120, 2–4 days', link: '' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof BadgeBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/commerce/blocks/PaymentIcons.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { PaymentIconsBlock, paymentIconsSchema, type PaymentIconsBlockProps } from '../../../../../src/components/commerce/blocks/PaymentIcons'
+import * as fx from '../../../../fixtures/index'
+import { blockFrame, blockPlayground } from '../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/PaymentIcons',
+  component: PaymentIconsBlock,
+  tags: ['autodocs'],
+  args: { shop: fx.shop, methods: '' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof PaymentIconsBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = blockPlayground<PaymentIconsBlockProps>(paymentIconsSchema, { shop: fx.shop }) as Story
+export const StatesTyped: Story = { name: 'States · typed "visa, JCB, bogus, truemoney"', args: { methods: 'visa, JCB, bogus, truemoney' } }

package/templates/nova/tests/cases/components/commerce/blocks/Swatches.cases.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { useState } from 'react'
+import { SwatchesBlock } from '../../../../../src/components/commerce/blocks/Swatches'
+import { blockFrame } from '../../../../support/block-stories'
+import * as fx from '../../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Commerce/Swatches',
+  component: SwatchesBlock,
+  tags: ['autodocs'],
+  args: { product: fx.merchDuvet, selected: { Size: 'Queen', Colour: 'Oat' }, onChange: () => {} },
+  render: (a) => {
+    const [sel, setSel] = useState(a.selected)
+    return <SwatchesBlock product={a.product} selected={sel} onChange={(o, v) => setSel((s) => ({ ...s, [o]: v }))} />
+  },
+  decorators: [blockFrame],
+} satisfies Meta<typeof SwatchesBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const NoColour: Story = { name: 'States · no colour option → nothing', args: { product: fx.merchBoard } }

package/templates/nova/tests/cases/components/content/ArticleCard.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { ArticleCard } from '../../../../src/components/content/ArticleCard'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Content/ArticleCard',
+  component: ArticleCard,
+  tags: ['autodocs'],
+  args: { article: sc.storyJournal.articles[1], ratio: 'landscape', showExcerpt: true, showDate: true },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)', maxWidth: 420 }}><ArticleCard {...a} /></div>,
+} satisfies Meta<typeof ArticleCard>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const NoImage: Story = { name: 'State · no image → text card', args: { article: { ...sc.storyJournal.articles[1], image: undefined } } }
+export const Square: Story = { name: 'Variants · square', args: { ratio: 'square' } }

package/templates/nova/tests/cases/components/content/BeforeAfterSlider.cases.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { BeforeAfterSlider } from '../../../../src/components/content/BeforeAfterSlider'
+import * as sc from '../../../support/story-content'
+
+const pair = sc.storyComparisons[0]
+const meta = {
+  title: 'Nova/02 Components/Content/BeforeAfterSlider',
+  component: BeforeAfterSlider,
+  tags: ['autodocs'],
+  args: { before: pair.before!, after: pair.after!, alt: pair.settings.alt, start: 50, beforeLabel: 'Before', afterLabel: 'After', ratio: 'landscape', layout: 'slider' },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)', maxWidth: 960 }}><BeforeAfterSlider {...a} /></div>,
+} satisfies Meta<typeof BeforeAfterSlider>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const SideBySide: Story = { name: 'Variants · side by side', args: { layout: 'side-by-side' } }
+export const Mobile: Story = { name: 'Responsive · 390 · portrait', args: { ratio: 'portrait' }, globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/content/CardRow.cases.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { CardRow } from '../../../../src/components/content/CardRow'
+import { ProductCard } from '../../../../src/components/commerce/ProductCard'
+import * as fx from '../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Content/CardRow',
+  component: CardRow,
+  tags: ['autodocs'],
+  args: { eyebrow: 'Just in', heading: 'New this season', viewAll: { label: 'View all 48', href: '/collections/new' }, layout: 'grid', columns: 4, children: null },
+  render: (a) => (
+    <div style={{ padding: '48px var(--page-gutter)' }}>
+      <CardRow {...a}>{(a.layout === 'carousel' ? fx.merchProducts : fx.merchNewSeason).map((p) => <ProductCard key={p.id} product={p} />)}</CardRow>
+    </div>
+  ),
+} satisfies Meta<typeof CardRow>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Carousel: Story = { name: 'Variants · carousel · arrows in the header', args: { layout: 'carousel' } }
+export const Centered: Story = { name: 'Variants · centred header · View all under the row', args: { align: 'center' } }
+export const Mobile: Story = { name: 'Responsive · 390 · carousel peek + progress', args: { carouselOnMobile: true }, globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/content/CarouselControls.cases.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { useState } from 'react'
+import { expect, userEvent, within } from '../../../support/case'
+import { CarouselControls, type CarouselControlsProps } from '../../../../src/components/content/CarouselControls'
+import { Row } from '../../../support/story-helpers'
+
+function Demo(p: Partial<CarouselControlsProps>) {
+  const [index, setIndex] = useState(p.index ?? 1)
+  const [paused, setPaused] = useState(p.paused ?? false)
+  return <CarouselControls count={3} {...p} index={index} onGo={setIndex} paused={paused} onTogglePause={() => setPaused((x) => !x)} />
+}
+
+const meta = {
+  title: 'Nova/02 Components/Content/Carousel',
+  component: CarouselControls,
+  tags: ['autodocs'],
+  args: { count: 3, index: 1, variant: 'both', autoplay: true, paused: true, onGo: () => {} },
+  render: (a) => (
+    <div style={{ padding: 32, background: 'var(--color-media-bg)' }}>
+      <Demo {...a} />
+    </div>
+  ),
+} satisfies Meta<typeof CarouselControls>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ padding: 32, background: 'var(--color-media-bg)' }}>
+      {(['both', 'arrows+counter', 'dots', 'none'] as const).map((v) => (
+        <Row key={v} label={v}>
+          <Demo variant={v} autoplay paused />
+        </Row>
+      ))}
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const Interaction: Story = {
+  name: 'Accessibility · bars and arrows move; pause toggles',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Go to slide 3' }))
+    await expect(c.getByRole('button', { name: 'Go to slide 3' })).toHaveAttribute('aria-current', 'true')
+    await userEvent.click(c.getByRole('button', { name: 'Play slideshow' }))
+    await expect(c.getByRole('button', { name: 'Pause slideshow' })).toBeInTheDocument()
+  },
+}

package/templates/nova/tests/cases/components/content/ContentsNav.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { ContentsNav } from '../../../../src/components/content/ContentsNav'
+import { headingsOf } from '../../../../src/components/content/LongForm'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Content/ContentsNav',
+  component: ContentsNav,
+  tags: ['autodocs'],
+  args: { headings: headingsOf(sc.storeRefundPolicy.bodyHtml) },
+  render: (a) => <div style={{ padding: '32px var(--page-gutter)', maxWidth: 260 }}><ContentsNav {...a} /></div>,
+} satisfies Meta<typeof ContentsNav>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Mobile: Story = { name: 'Responsive · 390 · disclosure', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/content/Countdown.cases.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { Countdown } from '../../../../src/components/content/Countdown'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const END = Date.UTC(2026, 9, 12)
+const at = (ms: number) => () => END - ms
+const D = 86_400_000
+
+const meta = {
+  title: 'Nova/02 Components/Content/Countdown',
+  component: Countdown,
+  tags: ['autodocs'],
+  args: { endsAt: END, clock: at(2 * D + 14 * 3_600_000 + 37 * 60_000 + 9_000) },
+  decorators: [(S) => <Pad surface="inverse"><S /></Pad>],
+} satisfies Meta<typeof Countdown>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: (a) => (
+    <>
+      <Row label="≥ 24 h"><Countdown {...a} /></Row>
+      <Row label="< 24 h · days hidden"><Countdown {...a} clock={at(6 * 3_600_000 + 37 * 60_000 + 9_000)} /></Row>
+      <Row label="< 1 h · minutes + seconds"><Countdown {...a} clock={at(37 * 60_000 + 9_000)} /></Row>
+    </>
+  ),
+}
+export const Playground: Story = {}

package/templates/nova/tests/cases/components/content/HeroCopy.cases.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { HeroCopy } from '../../../../src/components/content/HeroCopy'
+import { Pad, Row } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Content/HeroCopy',
+  component: HeroCopy,
+  tags: ['autodocs'],
+  args: {
+    eyebrow: 'Autumn 2026',
+    heading: 'Slow mornings, made to last.',
+    body: 'Stoneware, linen and pantry staples chosen for daily use — and for the decade after.',
+    primary: { label: 'Shop the collection', link: '#' },
+    secondary: { label: 'Our story', link: '#' },
+    headerSize: 'medium',
+    align: 'left',
+    textWidth: 'narrow',
+  },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof HeroCopy>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: (a) => (
+    <>
+      <Row label="headerSize small · medium · large">
+        <div style={{ display: 'grid', gap: 32 }}>
+          {(['small', 'medium', 'large'] as const).map((s) => <HeroCopy key={s} {...a} headerSize={s} body="" eyebrow="" secondary={undefined} />)}
+        </div>
+      </Row>
+      <Row label="onMedia (on an ink surface)">
+        <div style={{ padding: 32, background: 'var(--color-bg-inverse)', width: '100%' }}>
+          <HeroCopy {...a} onMedia />
+        </div>
+      </Row>
+    </>
+  ),
+}
+export const Playground: Story = {}
+export const Centered: Story = { name: 'Variants · center · link secondary', args: { align: 'center', secondaryStyle: 'link' } }
+export const Responsive: Story = { name: 'Responsive · 390 · pair on phone', globals: { viewport: { value: 'mobile', isRotated: false } }, args: { pairOnPhone: true } }

package/templates/nova/tests/cases/components/content/HeroFrame.cases.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { HeroFrame } from '../../../../src/components/content/HeroFrame'
+import { HeroCopy } from '../../../../src/components/content/HeroCopy'
+import { HeroMedia } from '../../../../src/components/content/HeroMedia'
+import * as fx from '../../../fixtures/index'
+
+const copy = <HeroCopy className="nv-media-frame__copy" onMedia eyebrow="Autumn 2026" heading="Slow mornings, made to last." body="Stoneware, linen and pantry staples." primary={{ label: 'Shop the collection', link: '#' }} />
+
+const meta = {
+  title: 'Nova/02 Components/Content/HeroFrame',
+  component: HeroFrame,
+  tags: ['autodocs'],
+  args: { position: 'bottom', align: 'left', scrim: 0.62, media: <HeroMedia image={fx.heroImage} />, children: copy },
+  decorators: [(S) => <div style={{ ['--nv-hero-h' as string]: 'var(--hero-height-small)' }}><S /></div>],
+} satisfies Meta<typeof HeroFrame>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Centered: Story = { name: 'Variants · middle · center · flat scrim', args: { position: 'middle', align: 'center', scrim: 0.45 } }
+export const Empty: Story = { name: 'States · empty · muted surface, ink text', args: { empty: true, media: undefined, children: <HeroCopy className="nv-media-frame__copy" heading="Free shipping over $120" primary={{ label: 'Learn more', link: '#' }} /> } }
+export const Responsive: Story = { name: 'Responsive · 390 · 4:5', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/content/HeroMedia.cases.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { HeroMedia } from '../../../../src/components/content/HeroMedia'
+import * as fx from '../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/02 Components/Content/HeroMedia',
+  component: HeroMedia,
+  tags: ['autodocs'],
+  args: { image: fx.heroImage, mobileImage: fx.heroPortrait, focal: 'center', fit: 'cover' },
+  decorators: [(S) => <div style={{ position: 'relative', height: 420 }}><S /></div>],
+} satisfies Meta<typeof HeroMedia>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Video: Story = { name: 'Variants · background video', args: { video: fx.heroVideo, mobileVideo: fx.heroVideoPortrait } }
+export const Contain: Story = { name: 'Variants · contain on muted', args: { image: fx.heroProduct, fit: 'contain' } }
+export const ReducedMotion: Story = { name: 'States · reduced motion · play offered', args: { video: fx.heroVideo }, parameters: { nova: { motion: 'reduced' } } }

package/templates/nova/tests/cases/components/content/LongForm.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { LongForm } from '../../../../src/components/content/LongForm'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Content/LongForm',
+  component: LongForm,
+  tags: ['autodocs'],
+  args: { html: sc.storyArticleHtml, measure: 'narrow', headingIds: true },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)' }}><LongForm {...a} /></div>,
+} satisfies Meta<typeof LongForm>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Content: Story = { name: 'Variants · measure content (960)', args: { measure: 'content' } }
+export const Mobile: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/content/MediaFrame.cases.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { MediaFrame } from '../../../../src/components/content/MediaFrame'
+import { placeholderImage } from '../../../../src/components/states/media/MediaPlaceholder'
+import { stress } from '../../../fixtures/index'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Content/MediaFrame',
+  component: MediaFrame,
+  tags: ['autodocs'],
+  args: { image: placeholderImage('product', 800, 800, 'Speckled stoneware mug'), ratio: '1 / 1', fit: 'cover', rounded: true, decorative: false, priority: false },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 320 }}><S /></div></Pad>],
+} satisfies Meta<typeof MediaFrame>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: 16, width: '100%' }}>
+      <MediaFrame image={placeholderImage('product', 800, 800, 'Mug')} ratio="1 / 1" />
+      <MediaFrame image={stress.landscapeImage} ratio="1 / 1" fit="contain" />
+      <MediaFrame image={null} ratio="1 / 1" />
+      <MediaFrame image={stress.brokenImage} ratio="1 / 1" />
+      <MediaFrame image={stress.portraitImage} ratio="natural" />
+    </div>
+  ),
+}
+export const Playground: Story = {}
+export const VariantsContain: Story = { name: 'Variants · contain on media tile', args: { image: stress.landscapeImage, fit: 'contain' } }
+export const StatesMissing: Story = { name: 'States · missing → MediaError', args: { image: null } }
+export const StatesFailed: Story = { name: 'States · failed → MediaError', args: { image: stress.brokenImage } }
+export const StressPortrait: Story = { name: 'Stress · portrait at natural ratio', args: { image: stress.portraitImage, ratio: 'natural' } }

package/templates/nova/tests/cases/components/content/RichText.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { RichText } from '../../../../src/components/content/RichText'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Content/RichText',
+  component: RichText,
+  tags: ['autodocs'],
+  args: { html: '<p>Wash cool, line dry, skip the iron. <a href="#">Read the care guide</a>.</p><p>Flax softens with every wash.</p>' },
+  decorators: [(S) => <Pad><div style={{ maxWidth: 560 }}><S /></div></Pad>],
+} satisfies Meta<typeof RichText>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {}
+export const Playground: Story = {}
+export const StatesPlainText: Story = { name: 'States · plain text', args: { html: 'A short line about your brand.' } }
+export const StatesEmpty: Story = { name: 'States · empty → nothing', args: { html: '' } }
+export const Stress: Story = { name: 'Stress · Thai', args: { html: '<p>ซักน้ำเย็น ตากในที่ร่ม ไม่ต้องรีด เส้นใยลินินจะนุ่มขึ้นทุกครั้งที่ซัก</p>' }, parameters: { nova: { locale: 'th' } } }

package/templates/nova/tests/cases/components/content/SectionHead.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { SectionHead } from '../../../../src/components/content/SectionHead'
+import { Link } from '../../../../src/components/base/Link'
+import { Pad } from '../../../support/story-helpers'
+
+const meta = {
+  title: 'Nova/02 Components/Content/SectionHead',
+  component: SectionHead,
+  tags: ['autodocs'],
+  args: { heading: 'New this season', eyebrow: 'Autumn 2026', description: 'Stoneware and linen for slower mornings.', headerSize: 'medium', align: 'left', level: 2 },
+  decorators: [(S) => <Pad><S /></Pad>],
+} satisfies Meta<typeof SectionHead>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { args: { link: <Link href="#" variant="standalone">View all</Link> } }
+export const Playground: Story = {}
+export const VariantsCentered: Story = { name: 'Variants · center', args: { align: 'center', eyebrow: 'Why Halden', heading: 'Fewer, better things', description: 'Made in small batches in Chiang Mai, from materials we can name.' } }
+export const Responsive: Story = { name: 'Responsive · 390 description clamps', globals: { viewport: { value: 'mobile', isRotated: false } }, args: { description: 'Stoneware and linen for slower mornings, made in small batches in our Chiang Mai studio from materials we can name and trace.' } }

package/templates/nova/tests/cases/components/content/ShareButtons.cases.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../support/case'
+import { ShareButtons } from '../../../../src/components/content/ShareButtons'
+
+const meta = {
+  title: 'Nova/02 Components/Content/ShareButtons',
+  component: ShareButtons,
+  tags: ['autodocs'],
+  args: { url: 'https://example.com/blogs/journal/linen-care', title: 'How to wash linen' },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)' }}><ShareButtons {...a} /></div>,
+} satisfies Meta<typeof ShareButtons>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Copy: Story = {
+  name: 'Accessibility · copy link announces',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    Object.defineProperty(navigator, 'clipboard', { value: { writeText: async () => {} }, configurable: true })
+    await userEvent.click(c.getByRole('button', { name: /copy link/i }))
+    await waitFor(() => expect(c.getAllByText(/link copied/i).length).toBeGreaterThan(0))
+  },
+}

package/templates/nova/tests/cases/components/content/StoreCard.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { StoreCard } from '../../../../src/components/content/StoreCard'
+import * as sc from '../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Content/StoreCard',
+  component: StoreCard,
+  tags: ['autodocs'],
+  args: { location: sc.storeLocations[0], showPhone: true, showHours: true, showImage: false },
+  render: (a) => <div style={{ padding: '32px var(--page-gutter)', maxWidth: 420 }}><StoreCard {...a} /></div>,
+} satisfies Meta<typeof StoreCard>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Photo: Story = { name: 'Variants · with a photo', args: { showImage: true } }
+export const Mobile: Story = { name: 'Responsive · 390 · Call + Directions', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/components/content/TestimonialCard.cases.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { TestimonialCard } from '../../../../src/components/content/TestimonialCard'
+import * as sc from '../../../support/story-content'
+
+const t = sc.storyTestimonials[0]
+const meta = {
+  title: 'Nova/02 Components/Content/TestimonialCard',
+  component: TestimonialCard,
+  tags: ['autodocs'],
+  args: { quote: t.settings.quote, name: t.settings.name, role: t.settings.role, avatar: t.avatar, rating: 5, showRating: true, showAvatar: true, quoteSize: 'md', cardStyle: 'muted', spotlight: false },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)', maxWidth: a.spotlight ? 760 : 420 }}><TestimonialCard {...a} /></div>,
+} satisfies Meta<typeof TestimonialCard>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Initials: Story = { name: 'States · no photo → initials', args: { avatar: null, name: 'Tom W.', role: 'Melbourne' } }
+export const Plain: Story = { name: 'Variants · plain · lg', args: { cardStyle: 'plain', quoteSize: 'lg' } }
+export const Spotlight: Story = { name: 'Variants · spotlight with a video quote', args: { ...sc.storySpotlight.settings, avatar: sc.storySpotlight.avatar, video: sc.storySpotlight.video, spotlight: true, quoteSize: 'lg', cardStyle: 'plain', showRating: false } }

package/templates/nova/tests/cases/components/content/UgcTile.cases.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../support/case'
+import { UgcTile } from '../../../../src/components/content/UgcTile'
+import * as sc from '../../../support/story-content'
+
+const p = sc.storyUgc[0]
+const meta = {
+  title: 'Nova/02 Components/Content/UgcTile',
+  component: UgcTile,
+  tags: ['autodocs'],
+  args: { image: p.image!, handle: p.settings.caption, href: p.settings.link, productTitle: p.product?.title, soldOut: false },
+  render: (a) => <div style={{ padding: '48px var(--page-gutter)', maxWidth: 280 }}><UgcTile {...a} /></div>,
+} satisfies Meta<typeof UgcTile>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const SoldOut: Story = { name: 'States · sold out', args: { soldOut: true } }
+export const CreditOnly: Story = { name: 'States · credit only', args: { href: undefined } }

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { ButtonBlock, buttonSchema, type ButtonBlockProps } from '../../../../../src/components/content/blocks/Button'
+import { blockFrame, blockPlayground } from '../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/02 Components/Content/ButtonBlock',
+  component: ButtonBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(buttonSchema), link: '/collections/all' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof ButtonBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>{(['primary', 'secondary', 'ghost', 'link'] as const).map((v) => <ButtonBlock key={v} {...defaultsOf(buttonSchema)} variant={v} label={v} link="#" />)}</div> }
+export const Playground: Story = blockPlayground<ButtonBlockProps>(buttonSchema, { link: '#' }) as Story
+export const StatesDemoted: Story = { name: 'States · demoted second primary', args: { demote: true, label: 'Shop linen' } }
+export const StatesNoLink: Story = { name: 'States · no link · storefront renders nothing (no dead button)', args: { label: 'Shop linen', link: '' } }
+export const StatesNoLinkEditor: Story = { name: 'States · no link · editor shows it disabled', args: { label: 'Shop linen', link: '' }, parameters: { nova: { mode: 'editor' } } }

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { Multicolumn } from '../../../../../src/sections/Multicolumn/Multicolumn'
+import { multicolumnSchema } from '../../../../../src/sections/Multicolumn/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/02 Components/Content/Column',
+  component: Multicolumn,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(multicolumnSchema), columns: 1, items: [sc.storyColumns[0]] },
+} satisfies Meta<typeof Multicolumn>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const Responsive: Story = { name: 'Responsive · 390', globals: { viewport: { value: 'mobile', isRotated: false } } }

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { HeadingBlock, headingSchema, type HeadingBlockProps } from '../../../../../src/components/content/blocks/Heading'
+import { blockFrame, blockPlayground } from '../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/02 Components/Content/Heading',
+  component: HeadingBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(headingSchema), eyebrow: 'Care guide', text: 'Linen gets better every time you wash it.' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof HeadingBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <div style={{ display: 'grid', gap: 24 }}>{(['small', 'medium', 'large', 'display'] as const).map((s) => <HeadingBlock key={s} {...defaultsOf(headingSchema)} size={s} text={`${s} — Made to last`} />)}</div> }
+export const Playground: Story = blockPlayground<HeadingBlockProps>(headingSchema, { text: 'Linen gets better every time you wash it.' }) as Story
+export const Stress: Story = { name: 'Stress · Thai', args: { text: 'ผ้าลินินยิ่งซักยิ่งนุ่ม', eyebrow: 'วิธีดูแล' }, parameters: { nova: { locale: 'th' } } }

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

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { IconBlock, iconSchema, ICON_BLOCK_OPTIONS, type IconBlockProps } from '../../../../../src/components/content/blocks/Icon'
+import { blockFrame, blockPlayground } from '../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/02 Components/Content/IconBlock',
+  component: IconBlock,
+  tags: ['autodocs'],
+  args: defaultsOf(iconSchema),
+  decorators: [blockFrame],
+} satisfies Meta<typeof IconBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <div style={{ display: 'flex', gap: 16, alignItems: 'end', flexWrap: 'wrap' }}>{ICON_BLOCK_OPTIONS.map((i) => <IconBlock key={i} icon={i} size={32} align="left" />)}{[16, 20, 24, 48].map((s) => <IconBlock key={s} icon="leaf" size={s} align="left" />)}</div> }
+export const Playground: Story = blockPlayground<IconBlockProps>(iconSchema) as Story

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

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { ImageBlock, imageSchema, type ImageBlockProps } from '../../../../../src/components/content/blocks/Image'
+import { placeholderImage } from '../../../../../src/components/states/media/MediaPlaceholder'
+import { stress } from '../../../../fixtures/index'
+import { blockFrame, blockPlayground } from '../../../../support/block-stories'
+
+const linen = placeholderImage('editorial', 1200, 900, 'Linen on a drying line')
+const meta = {
+  title: 'Nova/02 Components/Content/Image',
+  component: ImageBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(imageSchema), image: linen, ratio: 'editorial', caption: 'Line-dried in the studio' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof ImageBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, alignItems: 'start' }}>{(['natural', 'square', 'portrait', 'editorial', 'wide'] as const).map((r) => <ImageBlock key={r} {...defaultsOf(imageSchema)} ratio={r} image={stress.portraitImage} caption={r} />)}</div> }
+export const Playground: Story = blockPlayground<ImageBlockProps>(imageSchema, { image: linen }) as Story
+export const StatesMissing: Story = { name: 'States · no image (storefront collapses)', args: { image: null } }
+export const StatesMissingEditor: Story = { name: 'States · no image (editor setup frame)', args: { image: null }, parameters: { nova: { mode: 'editor' } } }

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { TextBlock, textSchema, type TextBlockProps } from '../../../../../src/components/content/blocks/Text'
+import { blockFrame, blockPlayground } from '../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/02 Components/Content/Text',
+  component: TextBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(textSchema), text: '<p>Wash cool, line dry, skip the iron. <a href="#">Read the guide</a>.</p>' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof TextBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: () => <div style={{ display: 'grid', gap: 16 }}>{(['small', 'body', 'large'] as const).map((s) => <TextBlock key={s} {...defaultsOf(textSchema)} size={s} text={`${s} — Flax softens with every wash and grows stronger when wet.`} />)}<TextBlock {...defaultsOf(textSchema)} muted text="muted — Wash cool, line dry." /></div> }
+export const Playground: Story = blockPlayground<TextBlockProps>(textSchema) as Story
+export const Stress: Story = { name: 'Stress · Thai', args: { text: 'ซักน้ำเย็น ตากในที่ร่ม ไม่ต้องรีด เส้นใยลินินจะนุ่มขึ้นทุกครั้งที่ซัก' }, parameters: { nova: { locale: 'th' } } }