create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cases/sections/marketing/promo-banner/PromoBanner.cases.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, waitFor, within } from '../../../../support/case'
+import { PromoBanner, type PromoBannerProps } from '../../../../../src/sections/PromoBanner/PromoBanner'
+import { promoBannerSchema } from '../../../../../src/sections/PromoBanner/schema'
+import { parseStoreDateTime } from '../../../../../src/components/content/Countdown'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+
+const preset = (name: string) => presetArgs(promoBannerSchema, name)
+
+// A frozen store clock: 2026-10-09 09:22:51 Bangkok — 2 d 14 h 37 m 09 s before the canvas end date.
+const TZ = 'Asia/Bangkok'
+const END = '2026-10-12 00:00'
+const NOW = parseStoreDateTime(END, TZ)! - (((2 * 24 + 14) * 60 + 37) * 60 + 9) * 1000
+const frozen = () => NOW
+const base: PromoBannerProps = {
+  ...defaultsOf(promoBannerSchema),
+  eyebrow: 'Autumn sale',
+  heading: 'Up to 30% off linen, until Sunday.',
+  buttonLabel: 'Shop the sale',
+  buttonLink: '/collections/sale',
+  endsAt: END,
+  timeZone: TZ,
+  clock: frozen,
+}
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Marketing/PromoBanner',
+  component: PromoBanner,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof PromoBanner>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: (args) => <Stack base={args} items={[PresetCountdown, LessThanDay, PresetLaunch, Ended]} render={(a) => <PromoBanner {...a} />} /> }
+export const Playground: Story = { name: 'Playground' }
+export const PresetCountdown: Story = { name: 'Preset · Countdown sale', args: preset('promo-countdown') }
+export const PresetLaunch: Story = {
+  name: 'Preset · Launch notice · brand #0F5C4D',
+  args: { ...preset('promo-launch'), eyebrow: 'Coming 12 October', heading: 'The Sea Salt glaze is almost here.', buttonLabel: 'Get notified', brandColor: '#0F5C4D' },
+  parameters: { nova: { theme: { colorPrimary: '#0F5C4D' } } },
+}
+export const PresetQuiet: Story = { name: 'Preset · Quiet offer', args: { ...preset('promo-quiet'), eyebrow: '', heading: 'Free gift wrapping on every order this month.', buttonLabel: '' } }
+
+export const LessThanDay: Story = { name: 'Option · under 24 h · days hidden · muted', args: { style: 'muted', eyebrow: 'Last day', heading: 'Linen sale ends tonight.', clock: () => parseStoreDateTime(END, TZ)! - ((6 * 60 + 37) * 60 + 9) * 1000 } }
+export const LessThanHour: Story = { name: 'Option · under 1 h · minutes + seconds', args: { clock: () => parseStoreDateTime(END, TZ)! - (37 * 60 + 9) * 1000 } }
+export const NoCountdown: Story = { name: 'Option · showCountdown · off', args: { showCountdown: false } }
+export const Centered: Story = { name: 'Option · contentAlignment · center', args: { contentAlignment: 'center' } }
+export const BrandPale: Story = { name: 'Option · style · brand pale #E8C547 → ink text', args: { style: 'brand', brandColor: '#E8C547' }, parameters: { nova: { theme: { colorPrimary: '#E8C547' } } } }
+
+export const Ended: Story = { name: 'State · ended · show-ended-message', args: { afterEnd: 'show-ended-message', clock: () => parseStoreDateTime(END, TZ)! + 60_000 } }
+export const EndedHidden: Story = { name: 'State · ended · hide (default) · storefront renders nothing', args: { clock: () => parseStoreDateTime(END, TZ)! + 60_000 } }
+export const EndedHiddenEditor: Story = { ...EndedHidden, name: 'State · ended · hide · editor explains', parameters: { nova: { mode: 'editor' } } }
+export const NoDate: Story = { name: 'State · no end date → no countdown', args: { endsAt: '' } }
+export const InvalidDate: Story = { name: 'State · invalid date · storefront without countdown', args: { endsAt: '12/10/2026 midnight' } }
+export const InvalidDateEditor: Story = { ...InvalidDate, name: 'State · invalid date · editor warning with format', parameters: { nova: { mode: 'editor' } } }
+export const ReachesZero: Story = {
+  name: 'State · reaches zero while open → ended message without reload',
+  args: {
+    afterEnd: 'show-ended-message',
+    // A store clock 2 s before the end, running.
+    clock: (() => {
+      const start = Date.now()
+      return () => parseStoreDateTime(END, TZ)! - 2000 + (Date.now() - start)
+    })(),
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(within(canvasElement).getByRole('heading', { name: 'This offer has ended.' })).toBeInTheDocument(), { timeout: 5000 })
+  },
+}
+export const Thai: Story = { name: 'Stress · Thai', args: { eyebrow: 'ลดราคาฤดูใบไม้ร่วง', heading: 'ลดสูงสุด 30% สำหรับผ้าลินินทุกชิ้น ถึงวันอาทิตย์นี้', buttonLabel: 'ช้อปเลย' }, parameters: { nova: { locale: 'th' } } }
+export const Arabic: Story = { name: 'Stress · RTL · Arabic', args: { eyebrow: 'تخفيضات الخريف', heading: 'خصم حتى 30% على الكتان حتى الأحد.', buttonLabel: 'تسوق التخفيضات' }, parameters: { nova: { locale: 'ar' } } }
+export const DarkScheme: Story = { name: 'Stress · Dark scheme', parameters: { nova: { scheme: 'dark' } } }
+
+export const Mobile: Story = { name: 'Responsive · 390 · stacked · units on one row', globals: mobile }
+
+export const TimerSemantics: Story = {
+  name: 'Accessibility · role="timer" with a minute-precision label',
+  play: async ({ canvasElement }) => {
+    const timer = within(canvasElement).getByRole('timer')
+    await expect(timer).toHaveAttribute('aria-live', 'off')
+    await expect(timer).toHaveAccessibleName('Offer ends in 2 days 14 hours 37 minutes')
+  },
+}

package/templates/nova/tests/cases/sections/marketing/slideshow/Slideshow.cases.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { Slideshow, type SlideshowProps } from '../../../../../src/sections/Slideshow/Slideshow'
+import { slideshowSchema } from '../../../../../src/sections/Slideshow/schema'
+import { slideSchema, type SlideInstance } from '../../../../../src/sections/Slideshow/blocks/Slide'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetsFor } from '../../../../../scripts/compiler/contracts/index'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as fx from '../../../../fixtures/index'
+
+const slide = (settings: Record<string, unknown>, i: number, extra: Partial<SlideInstance> = {}): SlideInstance => ({
+  settings: resolveSettings(slideSchema, settings).settings,
+  image: fx.slideImages[i % fx.slideImages.length],
+  ...extra,
+})
+/** A preset's settings and its slides (contract blocks + fixture images). */
+const preset = (name: string): Partial<SlideshowProps> => {
+  const p = presetsFor('slideshow').find((x) => x.name === name)!
+  return { ...presetArgs(slideshowSchema, name), slides: p.blocks.map((b, i) => slide({ ...b.settings, buttonLabel: 'Shop now', buttonLink: '/collections/all' }, i)) }
+}
+
+// The approved canvas (12B · 02): "New glaze · Sea Salt".
+const canonical: SlideInstance[] = [
+  slide({ eyebrow: 'New glaze · Sea Salt', heading: 'A pale grey that changes with the light.', buttonLabel: 'Shop Sea Salt', buttonLink: '/collections/sea-salt' }, 0),
+  slide({ eyebrow: 'Autumn linen', heading: 'Linen for autumn, woven in Lamphun.', buttonLabel: 'Shop linen', buttonLink: '/collections/linen' }, 1),
+  slide({ eyebrow: 'Gifting', heading: 'Gifts under $50, wrapped by hand.', buttonLabel: 'Shop gifts', buttonLink: '/collections/gifts' }, 2),
+]
+const base: SlideshowProps = { ...defaultsOf(slideshowSchema), slides: canonical }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Marketing/Slideshow',
+  component: Slideshow,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Slideshow>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  render: (args) => <Stack base={args} items={[PresetCampaign, PresetLookbook, PresetCompact]} render={(a) => <Slideshow {...a} />} />,
+}
+export const Playground: Story = { name: 'Playground' }
+
+export const PresetCampaign: Story = { name: 'Preset · Campaign rotation', args: preset('slideshow-campaign') }
+export const PresetLookbook: Story = { name: 'Preset · Lookbook', args: preset('slideshow-lookbook') }
+export const PresetCompact: Story = { name: 'Preset · Compact', args: preset('slideshow-compact') }
+
+export const ArrowsCounter: Story = { name: 'Option · controls · arrows+counter', args: { controls: 'arrows+counter' } }
+export const Dots: Story = { name: 'Option · controls · dots · bottom-center', args: { controls: 'dots', controlsPosition: 'bottom-center' } }
+export const NoneWithPause: Story = { name: 'Option · controls · none · pause still shown', args: { controls: 'none' } }
+export const BottomLeft: Story = { name: 'Option · controlsPosition · bottom-left · copy reserves the row', args: { controlsPosition: 'bottom-left' } }
+export const NoAutoplay: Story = { name: 'Option · autoplay · off · no pause button', args: { autoplay: false } }
+export const TransitionSlide: Story = { name: 'Option · transition · slide', args: { transition: 'slide', autoplay: false, initialIndex: 1 } }
+export const HeightLarge: Story = { name: 'Option · slideHeight · large', args: { slideHeight: 'large' } }
+export const Contained: Story = { name: 'Option · sectionWidth · wide · radius 12', args: { sectionWidth: 'wide', spacingTop: 'medium', spacingBottom: 'medium' } }
+export const SlideCentered: Story = {
+  name: 'Option · slide · middle · center · flat overlay',
+  args: { slides: [slide({ heading: 'Free shipping over $120', contentPosition: 'middle', contentAlignment: 'center', buttonLabel: 'Learn more', buttonLink: '/policies/shipping-policy' }, 3), ...canonical.slice(1)] },
+}
+export const VideoSlide: Story = {
+  name: 'Option · slide · video (timer waits for the loop, max 12 s)',
+  args: { initialIndex: 1, slides: [canonical[0], slide({ heading: 'Linen, woven in Lamphun.', body: 'Slide timer waits for the video loop (max 12 s), then advances.', buttonLabel: 'Shop linen', buttonLink: '/collections/linen' }, 1, { image: fx.heroEditorial, video: fx.studioVideo }), canonical[2]] },
+}
+
+export const OneSlide: Story = { name: 'State · 1 slide → a hero, no controls', args: { slides: canonical.slice(0, 1) } }
+export const NoImage: Story = { name: 'State · slide without image → muted, ink text', args: { autoplay: false, slides: [slide({ heading: 'Free shipping over $120', buttonLabel: 'Learn more', buttonLink: '/policies' }, 0, { image: null }), ...canonical.slice(1)] } }
+export const NoImageEditor: Story = { ...NoImage, name: 'State · slide without image · editor chip', parameters: { nova: { mode: 'editor' } } }
+export const Empty: Story = { name: 'State · Empty · storefront renders nothing', args: { slides: [] } }
+export const EmptyEditor: Story = { name: 'State · Empty · editor setup frame', args: { slides: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Thai: Story = {
+  name: 'Stress · Thai',
+  args: { slides: [slide({ eyebrow: 'เคลือบใหม่ · ซีซอลต์', heading: 'สีเทาอ่อนที่เปลี่ยนไปตามแสงตลอดวัน', buttonLabel: 'เลือกซื้อซีซอลต์', buttonLink: '/' }, 0), ...canonical.slice(1)] },
+  parameters: { nova: { locale: 'th' } },
+}
+export const Arabic: Story = { name: 'Stress · RTL · Arabic · controls mirror', args: { slides: [slide({ eyebrow: 'طلاء جديد', heading: 'رمادي شاحب يتغير مع الضوء.', buttonLabel: 'تسوق الآن', buttonLink: '/' }, 0), ...canonical.slice(1)] }, parameters: { nova: { locale: 'ar' } } }
+export const SixSlides: Story = { name: 'Stress · 6 slides (the maximum)', args: { slides: [0, 1, 2, 3, 4, 5].map((i) => slide({ heading: `Campaign ${i + 1}`, buttonLabel: 'Shop', buttonLink: '/' }, i)) } }
+
+export const Mobile: Story = { name: 'Responsive · 390 · controls under copy · arrows drop', globals: mobile }
+export const MobileDots: Story = { name: 'Responsive · 390 · dots', globals: mobile, args: { controls: 'dots' } }
+
+export const Keyboard: Story = {
+  name: 'Accessibility · ← → and Next move slides; slides are labelled groups',
+  args: { autoplay: false },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const next = c.getByRole('button', { name: 'Go to slide 2' })
+    await userEvent.click(next)
+    await waitFor(() => expect(c.getByRole('group', { name: '2 of 3' })).not.toHaveAttribute('aria-hidden'))
+    await userEvent.keyboard('{ArrowRight}')
+    await waitFor(() => expect(c.getByRole('group', { name: '3 of 3' })).not.toHaveAttribute('aria-hidden'))
+    await userEvent.keyboard('{ArrowRight}')
+    await waitFor(() => expect(c.getByRole('group', { name: '1 of 3' })).not.toHaveAttribute('aria-hidden'))
+  },
+}
+export const PauseAlwaysShown: Story = {
+  name: 'Accessibility · pause is always offered while autoplay runs (WCAG 2.2.2)',
+  args: { controls: 'none' },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Pause slideshow' }))
+    await expect(c.getByRole('button', { name: 'Play slideshow' })).toBeInTheDocument()
+  },
+}
+export const ReducedMotion: Story = {
+  name: 'Accessibility · Reduced motion · no autoplay, no pause, arrows work',
+  parameters: { nova: { motion: 'reduced' } },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await waitFor(() => expect(c.queryByRole('button', { name: 'Pause slideshow' })).toBeNull())
+  },
+}

package/templates/nova/tests/cases/sections/marketing/slideshow/blocks/Slide.cases.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { Slide, slideSchema, type SlideProps } from '../../../../../../src/sections/Slideshow/blocks/Slide'
+import * as fx from '../../../../../fixtures/index'
+
+const settings = { ...defaultsOf(slideSchema), eyebrow: 'New glaze · Sea Salt', heading: 'A pale grey that changes with the light.', buttonLabel: 'Shop Sea Salt', buttonLink: '/collections/sea-salt' }
+
+/** Block stories render the slide alone (the slideshow owns rotation and controls). */
+const meta = {
+  title: 'Nova/03 Sections/Marketing/Blocks/Slide',
+  component: Slide,
+  tags: ['autodocs'],
+  args: { settings, image: fx.slideImages[0] } as SlideProps,
+  render: (a) => (
+    <div className="nv-slideshow" style={{ ['--nv-hero-h' as string]: 'var(--hero-height-medium)' }}>
+      <Slide {...a} />
+    </div>
+  ),
+} satisfies Meta<typeof Slide>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = { }
+export const TopRight: Story = { name: 'Variants · top · right · wide', args: { settings: { ...settings, contentPosition: 'top', contentAlignment: 'right', textWidth: 'wide' } } }
+export const NoImage: Story = { name: 'State · no image → muted, ink text', args: { image: null } }
+export const Responsive: Story = { name: 'Responsive · 390 · 4:5', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/marketing/video-hero/VideoHero.cases.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, waitFor, within } from '../../../../support/case'
+import { VideoHero, type VideoHeroProps } from '../../../../../src/sections/VideoHero/VideoHero'
+import { videoHeroSchema } from '../../../../../src/sections/VideoHero/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as fx from '../../../../fixtures/index'
+
+const preset = (name: string) => presetArgs(videoHeroSchema, name)
+
+// The approved canvas (12B · 03): potter at the wheel.
+const base: VideoHeroProps = {
+  ...defaultsOf(videoHeroSchema),
+  eyebrow: 'From the studio',
+  heading: 'Made to be lived with.',
+  buttonLabel: 'Shop the collection',
+  secondaryLabel: 'Watch the film',
+  secondaryLink: '/pages/film',
+  videoUrl: fx.studioVideo.src,
+  mobileVideoUrl: fx.heroVideoPortrait.src,
+  poster: fx.heroEditorial,
+  mobilePoster: fx.heroPortrait,
+}
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Marketing/VideoHero',
+  component: VideoHero,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof VideoHero>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { render: (args) => <Stack base={args} items={[PresetAmbient, PresetLaunch, PosterOnly]} render={(a) => <VideoHero {...a} />} /> }
+export const Playground: Story = { name: 'Playground' }
+export const PresetAmbient: Story = { name: 'Preset · Ambient film', args: preset('video-ambient') }
+export const PresetLaunch: Story = { name: 'Preset · Launch film', args: { ...preset('video-launch'), eyebrow: '', secondaryLabel: '' } }
+
+export const Center: Story = { name: 'Option · contentPosition · center · flat overlay', args: { contentPosition: 'center' } }
+export const OverlayZero: Story = { name: 'Option · overlayOpacity 0 · floor 62 still applies', args: { overlayOpacity: 0 } }
+export const SizeSmall: Story = { name: 'Option · size · small', args: { size: 'small', secondaryLabel: '' } }
+export const ContentWidthStandard: Story = { name: 'Option · contentWidth · standard (wide measure)', args: { contentWidth: 'standard', text: 'Every piece is thrown, trimmed and glazed by hand in Chiang Mai, then fired twice so it lasts the decade.' } }
+export const Wide: Story = { name: 'Option · sectionWidth · wide · radius 12', args: { sectionWidth: 'wide', spacingTop: 'medium', spacingBottom: 'medium' } }
+
+export const PosterOnly: Story = { name: 'State · poster only → an image hero', args: { videoUrl: '', mobileVideoUrl: '' } }
+export const ReducedMotion: Story = {
+  name: 'State · reduced motion · poster + play',
+  parameters: { nova: { motion: 'reduced' } },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(within(canvasElement).getByRole('button', { name: 'Play video' })).toBeInTheDocument())
+  },
+}
+export const Failed: Story = {
+  name: 'State · failed · poster stays, controls hide',
+  tags: ['browser-only'],
+  args: { videoUrl: fx.brokenVideo.src, mobileVideoUrl: '' },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => expect(within(canvasElement).queryByRole('button', { name: /video/ })).toBeNull(), { timeout: 4000 })
+  },
+}
+export const Neither: Story = { name: 'State · no video, no poster · storefront hidden', args: { videoUrl: '', mobileVideoUrl: '', poster: null, mobilePoster: null } }
+export const NeitherEditor: Story = { ...Neither, name: 'State · no video, no poster · editor setup frame', parameters: { nova: { mode: 'editor' } } }
+export const Thai: Story = { name: 'Stress · Thai', args: { eyebrow: 'จากสตูดิโอ', heading: 'ทำขึ้นเพื่ออยู่กับคุณไปนานแสนนาน', buttonLabel: 'เลือกชมคอลเลกชัน', secondaryLabel: '' }, parameters: { nova: { locale: 'th' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · mobileVideoUrl portrait · center', globals: mobile, args: { contentPosition: 'center', secondaryLabel: '' } }
+
+export const LegacySoundButton: Story = {
+  name: 'Legacy · soundButtonUrl → "Watch the film" text link',
+  args: { ...resolveSettings(videoHeroSchema, { heading: 'Made to be lived with.', videoUrl: fx.studioVideo.src, soundButtonUrl: '/pages/film' }).settings, poster: fx.heroEditorial },
+  play: async ({ canvasElement }) => expect(within(canvasElement).getByRole('link', { name: 'Watch the film' })).toHaveAttribute('href', '/pages/film'),
+}

package/templates/nova/tests/cases/sections/trust/comparison-table/ComparisonTableSection.cases.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within, fn } from '../../../../support/case'
+import { ComparisonTableSection, type ComparisonTableSectionProps } from '../../../../../src/sections/ComparisonTable/ComparisonTable'
+import { comparisonTableSchema } from '../../../../../src/sections/ComparisonTable/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: ComparisonTableSectionProps = { ...defaultsOf(comparisonTableSchema), heading: 'Which duvet cover?', features: sc.storyCompareFeatures, items: sc.storyCompareItems, highlight: 1, onAdd: fn() }
+const sizes = { heading: 'Duvet sizes', features: ['Width', 'Length', 'Fits mattress', 'Pillowcases'].join('\n'), items: ['Twin', 'Full', 'Queen', 'King'].map((title, i) => ({ settings: { product: '', image: '', title, values: [['140 cm', '160 cm', '200 cm', '240 cm'][i], '200 cm', ['90 × 190', '135 × 190', '150 × 200', '180 × 200'][i], i ? '2' : '1'].join('\n') } })) }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/ComparisonTable',
+  component: ComparisonTableSection,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof ComparisonTableSection>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(comparisonTableSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetProducts, PresetSizes]} render={(x) => <ComparisonTableSection {...x} />} /> }
+export const Playground: Story = {}
+export const PresetProducts: Story = { name: 'Preset · Compare products · highlight 2', args: preset('compare-products') }
+export const PresetSizes: Story = { name: 'Preset · Compare sizes', args: { ...preset('compare-sizes'), ...sizes } }
+export const NoHighlight: Story = { name: 'Option · highlight 0 · no product row', args: { highlight: 0, showProductRow: false } }
+export const SoldOut: Story = { name: 'State · a linked product sold out → disabled', args: { items: [sc.storyCompareItems[0], { ...sc.storyCompareItems[1], product: { ...sc.storyCompareItems[1].product!, available: false } }, sc.storyCompareItems[2]] } }
+export const ManyRows: Story = { name: 'Stress · > 10 rows → Show all features', args: { features: [sc.storyCompareFeatures, 'Weave', 'Weight', 'Closure', 'Corner ties', 'Made in', 'Care', 'Colours'].join('\n') } }
+export const MissingValues: Story = { name: 'State · missing values → — (editor flags the row)', args: { items: [sc.storyCompareItems[0], { ...sc.storyCompareItems[1], settings: { ...sc.storyCompareItems[1].settings, values: '55% linen, 45% cotton\nSmooth, light crease' } }, sc.storyCompareItems[2]] }, parameters: { nova: { mode: 'editor' } } }
+export const Empty: Story = { name: 'State · < 2 items · editor setup', args: { items: sc.storyCompareItems.slice(0, 1) }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · sticky feature column', globals: mobile }
+export const Differences: Story = {
+  name: 'Accessibility · differences only hides identical rows',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('switch', { name: 'Show differences only' }))
+    await waitFor(() => expect(c.queryByRole('rowheader', { name: 'Oeko-Tex' })).toBeNull())
+    await expect(c.getByRole('rowheader', { name: 'Fabric' })).toBeInTheDocument()
+  },
+}

package/templates/nova/tests/cases/sections/trust/comparison-table/blocks/CompareItem.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { ComparisonTableSection } from '../../../../../../src/sections/ComparisonTable/ComparisonTable'
+import { comparisonTableSchema } from '../../../../../../src/sections/ComparisonTable/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/Blocks/CompareItem',
+  component: ComparisonTableSection,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(comparisonTableSchema), features: sc.storyCompareFeatures, items: sc.storyCompareItems.slice(0, 2), highlight: 1 },
+} satisfies Meta<typeof ComparisonTableSection>
+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/sections/trust/logo-list/LogoList.cases.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { LogoList, type LogoListProps } from '../../../../../src/sections/LogoList/LogoList'
+import { logoListSchema } from '../../../../../src/sections/LogoList/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: LogoListProps = { ...defaultsOf(logoListSchema), eyebrow: 'As featured in', logos: sc.storyLogos }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/LogoList',
+  component: LogoList,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof LogoList>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(logoListSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetPress, PresetStockists]} render={(x) => <LogoList {...x} />} /> }
+export const Playground: Story = {}
+export const PresetPress: Story = { name: 'Preset · As featured in', args: preset('logos-press') }
+export const PresetStockists: Story = { name: 'Preset · Stockists · colour · large', args: { ...preset('logos-stockists'), eyebrow: '', heading: 'Find us at', logos: sc.storyLogos.slice(0, 4) } }
+export const Few: Story = { name: 'State · fewer than 3 → centred', args: { logos: sc.storyLogos.slice(0, 2) } }
+export const Broken: Story = { name: 'State · a logo fails → its name', args: { logos: [{ ...sc.storyLogos[0], image: { ...sc.storyLogos[0].image!, src: 'media/logos/missing.svg' } }, ...sc.storyLogos.slice(1)] } }
+export const Empty: Story = { name: 'State · no logos · editor setup', args: { logos: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · 3 per row', globals: mobile }

package/templates/nova/tests/cases/sections/trust/logo-list/blocks/Logo.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { LogoList } from '../../../../../../src/sections/LogoList/LogoList'
+import { logoListSchema } from '../../../../../../src/sections/LogoList/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/Blocks/Logo',
+  component: LogoList,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(logoListSchema), logos: sc.storyLogos.slice(0, 1) },
+} satisfies Meta<typeof LogoList>
+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/sections/trust/product-reviews/ProductReviews.cases.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within, fn } from '../../../../support/case'
+import { ProductReviews, type ProductReviewsProps } from '../../../../../src/sections/ProductReviews/ProductReviews'
+import { productReviewsSchema } from '../../../../../src/sections/ProductReviews/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import * as sc from '../../../../support/story-content'
+
+const base: ProductReviewsProps = { ...defaultsOf(productReviewsSchema), reviews: sc.storyReviews, onWriteReview: fn() }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/ProductReviews',
+  component: ProductReviews,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof ProductReviews>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(productReviewsSchema, name)
+
+export const Playground: Story = {}
+export const PresetStandard: Story = { name: 'Preset · Reviews (with a source)', args: preset('reviews-standard') }
+export const Stacked: Story = { name: 'Option · layout stacked', args: { layout: 'stacked' } }
+export const Highest: Story = { name: 'Option · defaultSort highest · no photos', args: { defaultSort: 'highest', showPhotos: false } }
+export const NoBars: Story = { name: 'Option · showDistribution off · no Write a review', args: { showDistribution: false, allowWrite: false } }
+export const NoSource: Story = { name: 'State · no reviews source → not rendered (customer)', args: { reviews: null } }
+export const Editor: Story = { name: 'State · no reviews source · editor setup', args: { reviews: null }, parameters: { nova: { mode: 'editor' } } }
+export const NoReviews: Story = { name: 'State · source connected, 0 reviews', args: { reviews: { average: 0, count: 0, distribution: [0, 0, 0, 0, 0], reviews: [] } } }
+export const Mobile: Story = { name: 'Responsive · 390 · summary on top', globals: mobile }
+export const FilterByStars: Story = {
+  name: 'Accessibility · a bar filters the list',
+  tags: ['viewport:desktop'], // the bars are hidden below 640
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    const bar = c.getByRole('button', { name: /^4 stars/ })
+    await userEvent.click(bar)
+    await waitFor(() => expect(bar).toHaveAttribute('aria-pressed', 'true'))
+    await expect(c.queryByText('Worth the price')).toBeNull()
+    await expect(c.getByText('Lovely, runs slightly large')).toBeInTheDocument()
+  },
+}
+export const ShowMore: Story = {
+  name: 'Accessibility · Show more loads the next page',
+  args: { reviewsPerPage: 3 },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Show more reviews' }))
+    await waitFor(() => expect(canvasElement.querySelectorAll('.nv-review')).toHaveLength(6))
+  },
+}

package/templates/nova/tests/cases/sections/trust/shop-the-look/ShopTheLook.cases.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within, fn } from '../../../../support/case'
+import { ShopTheLook, type ShopTheLookProps } from '../../../../../src/sections/ShopTheLook/ShopTheLook'
+import { shopTheLookSchema } from '../../../../../src/sections/ShopTheLook/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+import * as fx from '../../../../fixtures/index'
+
+const base: ShopTheLookProps = { ...defaultsOf(shopTheLookSchema), eyebrow: 'Shop the look', heading: 'A slow Sunday corner', image: sc.storyLookImage, hotspots: sc.storyHotspots, onAdd: fn(), onAddAll: fn(), defaultActive: 2 }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/ShopTheLook',
+  component: ShopTheLook,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof ShopTheLook>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(shopTheLookSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetStandard, PresetCompact]} render={(x) => <ShopTheLook {...x} />} /> }
+export const Playground: Story = {}
+export const PresetStandard: Story = { name: 'Preset · Shop the look · hotspot 2 active', args: preset('look-standard') }
+export const PresetCompact: Story = { name: 'Preset · Quick look · compact, image end', args: { ...preset('look-compact'), defaultActive: null } }
+export const NoHotspots: Story = { name: 'Option · showHotspots off', args: { showHotspots: false, defaultActive: null } }
+export const Missing: Story = { name: 'State · a deleted product → numbering recompacts', args: { hotspots: [sc.storyHotspots[0], { ...sc.storyHotspots[1], product: null }, sc.storyHotspots[2]], defaultActive: null } }
+export const SoldOut: Story = {
+  name: 'State · sold out stays, muted; Add all reports it',
+  args: { hotspots: [sc.storyHotspots[0], { ...sc.storyHotspots[1], product: fx.merchCandle }, sc.storyHotspots[2]], defaultActive: null },
+  play: async ({ canvasElement }) => {
+    await userEvent.click(within(canvasElement).getByRole('button', { name: /add all to cart/i }))
+    await waitFor(() => expect(within(canvasElement).getByText(/2 of 3 added/)).toBeInTheDocument())
+  },
+}
+export const NoImage: Story = { name: 'State · no image · editor setup', args: { image: null }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · image, then a product carousel', globals: mobile, args: { defaultActive: null } }
+export const Keyboard: Story = {
+  name: 'Accessibility · a hotspot opens its card; Esc closes',
+  tags: ['viewport:desktop'], // at 390 a hotspot scrolls the list instead of opening a card
+  args: { defaultActive: null },
+  play: async ({ canvasElement }) => {
+    const dot = within(canvasElement).getByRole('button', { name: /^1\. Speckled/ })
+    await userEvent.click(dot)
+    await waitFor(() => expect(dot).toHaveAttribute('aria-expanded', 'true'))
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(dot).toHaveAttribute('aria-expanded', 'false'))
+  },
+}

package/templates/nova/tests/cases/sections/trust/shop-the-look/blocks/Hotspot.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { ShopTheLook } from '../../../../../../src/sections/ShopTheLook/ShopTheLook'
+import { shopTheLookSchema } from '../../../../../../src/sections/ShopTheLook/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/Blocks/Hotspot',
+  component: ShopTheLook,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(shopTheLookSchema), heading: 'A slow Sunday corner', image: sc.storyLookImage, hotspots: sc.storyHotspots.slice(1, 2), showAddAll: false, defaultActive: 1 },
+} satisfies Meta<typeof ShopTheLook>
+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/sections/trust/testimonials/Testimonials.cases.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { Testimonials, type TestimonialsProps } from '../../../../../src/sections/Testimonials/Testimonials'
+import { testimonialsSchema } from '../../../../../src/sections/Testimonials/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { Stack } from '../../../../support/story-helpers'
+import * as sc from '../../../../support/story-content'
+
+const base: TestimonialsProps = { ...defaultsOf(testimonialsSchema), eyebrow: 'Kind words', heading: 'Lived with, and loved', testimonials: sc.storyTestimonials.slice(0, 3) }
+const long = '"' + 'We bought the duvet cover after a year of reading reviews and it is everything people said — heavy enough to feel substantial, soft from the first night, and it only gets better. '.repeat(3) + '"'
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/Testimonials',
+  component: Testimonials,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Testimonials>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(testimonialsSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetGrid, PresetSpotlight, PresetCarousel]} render={(x) => <Testimonials {...x} />} /> }
+export const Playground: Story = {}
+export const PresetGrid: Story = { name: 'Preset · Quote grid', args: preset('tm-grid') }
+export const PresetSpotlight: Story = { name: 'Preset · Spotlight · video quote', args: { ...preset('tm-spotlight'), eyebrow: '', heading: '', testimonials: [sc.storySpotlight] } }
+export const PresetCarousel: Story = { name: 'Preset · Carousel · 6 quotes', args: { ...preset('tm-carousel'), testimonials: sc.storyTestimonials } }
+export const Plain: Story = { name: 'Option · cardStyle plain · hairline only', args: { cardStyle: 'plain' } }
+export const Bare: Story = { name: 'Option · showRating off · showAvatar off', args: { showRating: false, showAvatar: false } }
+export const Large: Story = { name: 'Option · quoteSize lg · 2 columns', args: { quoteSize: 'lg', columns: 2, testimonials: sc.storyTestimonials.slice(0, 2) } }
+export const Long: Story = {
+  name: 'Stress · quote > 280 characters → 6 lines + Read more',
+  args: { testimonials: [{ ...sc.storyTestimonials[0], settings: { ...sc.storyTestimonials[0].settings, quote: long } }, ...sc.storyTestimonials.slice(1, 3)] },
+  play: async ({ canvasElement }) => {
+    const more = within(canvasElement).getByRole('button', { name: 'Read more' })
+    await userEvent.click(more)
+    await waitFor(() => expect(more).toHaveAttribute('aria-expanded', 'true'))
+  },
+}
+export const Thai: Story = { name: 'Stress · Thai', args: { eyebrow: 'เสียงจากลูกค้า', heading: 'ใช้จริง และรักจริง', testimonials: [{ ...sc.storyTestimonials[0], settings: { ...sc.storyTestimonials[0].settings, quote: '"ผ้าลินินนุ่มขึ้นทุกครั้งที่ซัก และสีโอ๊ตเข้ากับแสงยามเช้าได้พอดี"', role: 'กรุงเทพฯ' } }, ...sc.storyTestimonials.slice(1, 3)] }, parameters: { nova: { locale: 'th' } } }
+export const Empty: Story = { name: 'State · no quotes · editor setup', args: { testimonials: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Starter: Story = { name: 'State · starter text flagged (editor)', args: { testimonials: [{ settings: { ...sc.storyTestimonials[0].settings, quote: 'Share what a customer said about you.', name: '', role: '' } }, ...sc.storyTestimonials.slice(1, 3)] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · swipe + progress', globals: mobile }
+export const Video: Story = {
+  name: 'Accessibility · a video quote plays on request, with captions',
+  args: { ...preset('tm-spotlight'), eyebrow: '', heading: '', testimonials: [sc.storySpotlight] },
+  play: async ({ canvasElement }) => {
+    await userEvent.click(within(canvasElement).getByRole('button', { name: /play video from anna lindqvist/i }))
+    await waitFor(() => expect(canvasElement.querySelector('video track[kind="captions"]')).not.toBeNull())
+  },
+}
+export const LegacyAutoplay: Story = {
+  name: 'Legacy · saved autoplay rotates, with a pause button',
+  args: { ...resolveSettings(testimonialsSchema, { layout: 'carousel', autoplay: true }).settings, eyebrow: 'Kind words', heading: 'Lived with, and loved', testimonials: sc.storyTestimonials },
+  play: async ({ canvasElement }) => {
+    const pause = within(canvasElement).getByRole('button', { name: 'Pause rotation' })
+    await userEvent.click(pause)
+    await waitFor(() => expect(within(canvasElement).getByRole('button', { name: 'Resume rotation' })).toBeInTheDocument())
+  },
+}

package/templates/nova/tests/cases/sections/trust/testimonials/blocks/Testimonial.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { Testimonials } from '../../../../../../src/sections/Testimonials/Testimonials'
+import { testimonialsSchema } from '../../../../../../src/sections/Testimonials/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Trust/Blocks/Testimonial',
+  component: Testimonials,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(testimonialsSchema), columns: 1, testimonials: sc.storyTestimonials.slice(0, 1) },
+} satisfies Meta<typeof Testimonials>
+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 } } }