create-tanqory-theme 0.0.0-stage → 0.2.2

package/templates/nova/tests/cases/sections/commerce/product-details/blocks/ProductDescription.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { ProductDescriptionBlock } from '../../../../../../src/sections/ProductDetails/blocks/ProductDescription'
+import { blockFrame } from '../../../../../support/block-stories'
+import * as fx from '../../../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/Blocks/ProductDescription',
+  component: ProductDescriptionBlock,
+  tags: ['autodocs'],
+  args: { html: fx.merchDuvet.descriptionHtml },
+  decorators: [blockFrame],
+} satisfies Meta<typeof ProductDescriptionBlock>
+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/commerce/product-details/blocks/ProductInventory.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { ProductInventoryBlock } from '../../../../../../src/sections/ProductDetails/blocks/ProductInventory'
+import { blockFrame } from '../../../../../support/block-stories'
+import * as fx from '../../../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/Blocks/ProductInventory',
+  component: ProductInventoryBlock,
+  tags: ['autodocs'],
+  args: { inStockLabel: 'In stock', soldOutLabel: 'Sold out', variant: fx.merchDuvet.variants.find((v) => v.title === 'Queen / Oat'), show: 'low-only', threshold: 5, variantLabel: 'Queen' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof ProductInventoryBlock>
+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/commerce/product-details/blocks/ProductPrice.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { ProductPriceBlock } from '../../../../../../src/sections/ProductDetails/blocks/ProductPrice'
+import { blockFrame } from '../../../../../support/block-stories'
+import * as fx from '../../../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/Blocks/ProductPrice',
+  component: ProductPriceBlock,
+  tags: ['autodocs'],
+  args: { price: fx.merchDuvet.priceRange.min, compareAt: fx.merchDuvet.compareAtPriceRange!.min, note: 'Taxes included. Shipping calculated at checkout.' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof ProductPriceBlock>
+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/commerce/product-details/blocks/ProductSku.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { ProductSkuBlock } from '../../../../../../src/sections/ProductDetails/blocks/ProductSku'
+import { blockFrame } from '../../../../../support/block-stories'
+
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/Blocks/ProductSKU',
+  component: ProductSkuBlock,
+  tags: ['autodocs'],
+  args: { sku: 'HAL-WASHE-11' },
+  decorators: [blockFrame],
+} satisfies Meta<typeof ProductSkuBlock>
+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/commerce/product-details/blocks/ProductTitle.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { ProductTitleBlock } from '../../../../../../src/sections/ProductDetails/blocks/ProductTitle'
+import { blockFrame } from '../../../../../support/block-stories'
+import * as fx from '../../../../../fixtures/index'
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/Blocks/ProductTitle',
+  component: ProductTitleBlock,
+  tags: ['autodocs'],
+  args: { product: fx.merchDuvet, showVendor: true },
+  decorators: [blockFrame],
+} satisfies Meta<typeof ProductTitleBlock>
+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/commerce/product-details/blocks/Quantity.cases.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { useState } from 'react'
+import { QuantityBlock } from '../../../../../../src/sections/ProductDetails/blocks/Quantity'
+import { blockFrame } from '../../../../../support/block-stories'
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/Blocks/Quantity',
+  component: QuantityBlock,
+  tags: ['autodocs'],
+  args: { value: 1, onChange: () => {} },
+  render: (a) => {
+    const [v, setV] = useState(a.value)
+    return <QuantityBlock {...a} value={v} onChange={setV} />
+  },
+  decorators: [blockFrame],
+} satisfies Meta<typeof QuantityBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

package/templates/nova/tests/cases/sections/commerce/product-details/blocks/Tab.cases.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { AccordionItem, Accordion } from '../../../../../../src/components/base/Accordion'
+import { RichText } from '../../../../../../src/components/content/RichText'
+import { tabSchema, type TabSettings } from '../../../../../../src/sections/ProductDetails/blocks/Tab'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { blockFrame } from '../../../../../support/block-stories'
+
+/** A tab renders inside the section's accordion (or tabs); shown here as one accordion row. */
+function TabPreview(s: TabSettings) {
+  return (
+    <Accordion>
+      <AccordionItem title={s.heading || 'Description'} defaultOpen={s.openByDefault} level={3}>
+        <RichText html={s.body || '<p>Stonewashed for a lived-in softness from the first night.</p>'} />
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/Blocks/Tab',
+  component: TabPreview,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(tabSchema), heading: 'Materials & care', body: '<p>100% European flax. Machine wash warm.</p>', openByDefault: true },
+  decorators: [blockFrame],
+} satisfies Meta<typeof TabPreview>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

package/templates/nova/tests/cases/sections/commerce/product-details/blocks/VariantPickerBlock.cases.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { useState } from 'react'
+import { VariantPickerBlock, variantPickerSchema, type VariantPickerBlockProps } from '../../../../../../src/sections/ProductDetails/blocks/VariantPickerBlock'
+import { SwatchesBlock } from '../../../../../../src/components/commerce/blocks/Swatches'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { blockFrame } from '../../../../../support/block-stories'
+import * as fx from '../../../../../fixtures/index'
+
+function Demo(p: Partial<VariantPickerBlockProps> & { swatches?: boolean }) {
+  const [sel, setSel] = useState<Record<string, string>>({ Size: 'Queen', Colour: 'Oat' })
+  const on = (o: string, v: string) => setSel((s) => ({ ...s, [o]: v }))
+  return (
+    <div style={{ display: 'grid', gap: 20 }}>
+      <VariantPickerBlock {...defaultsOf(variantPickerSchema)} {...p} product={fx.merchDuvet} selected={sel} onChange={on} withoutColour={p.swatches} onOpenSizeGuide={() => {}} />
+      {p.swatches && <SwatchesBlock product={fx.merchDuvet} selected={sel} onChange={on} />}
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/Blocks/VariantPicker',
+  component: VariantPickerBlock,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(variantPickerSchema), product: fx.merchDuvet, selected: {}, onChange: () => {} },
+  render: (a) => <Demo sizeGuideLabel={a.sizeGuideLabel} />,
+  decorators: [blockFrame],
+} satisfies Meta<typeof VariantPickerBlock>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+export const WithSwatchesBlock: Story = { name: 'Variants · with a swatches block (colour on its own row)', render: () => <Demo swatches /> }

package/templates/nova/tests/cases/sections/commerce/product-grid/ProductGrid.cases.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, fn, userEvent, within } from '../../../../support/case'
+import { ProductGrid, type ProductGridProps } from '../../../../../src/sections/ProductGrid/ProductGrid'
+import { productGridSchema } from '../../../../../src/sections/ProductGrid/schema'
+import { defaultsOf, resolveSettings } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import { useListingDemo } from '../../../../support/listing-demo'
+import * as fx from '../../../../fixtures/index'
+
+const base: ProductGridProps = { ...defaultsOf(productGridSchema), collection: fx.merchRooms[0], heading: 'Shop all', productsPerPage: '12', filterLayout: 'top-bar', columns: '4', onQuickAdd: fn() }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+function Demo(args: ProductGridProps) {
+  const demo = useListingDemo()
+  return <ProductGrid {...args} {...demo} facets={args.facets ?? demo.facets} {...(args.products ? { products: args.products, total: args.total } : {})} />
+}
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/ProductGrid',
+  component: ProductGrid,
+  tags: ['autodocs'],
+  args: base,
+  render: (a) => <Demo {...a} />,
+} satisfies Meta<typeof ProductGrid>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { args: presetArgs(productGridSchema, 'grid-shop-all') }
+export const Playground: Story = {}
+export const PresetShopAll: Story = { name: 'Preset · Shop all', args: presetArgs(productGridSchema, 'grid-shop-all') }
+export const Sidebar: Story = { name: 'Option · filterLayout · sidebar · 3 columns', args: { filterLayout: 'sidebar', columns: '3' } }
+export const NoQuickAdd: Story = { name: 'Option · showQuickAdd · off', args: { showQuickAdd: false } }
+export const Empty: Story = { name: 'State · chosen collection empty · storefront hidden', args: { products: [], total: 0, facets: [] } as Partial<ProductGridProps> }
+export const EmptyEditor: Story = { ...Empty, name: 'State · chosen collection empty · editor setup', parameters: { nova: { mode: 'editor' } } }
+export const LegacySubheading: Story = {
+  name: 'Legacy · subheading → rendered as eyebrow',
+  args: { ...resolveSettings(productGridSchema, { subheading: 'Everything in the studio' }).settings, collection: fx.merchRooms[0], heading: 'Shop all' },
+  play: async ({ canvasElement }) => expect(within(canvasElement).getByText('Everything in the studio')).toBeInTheDocument(),
+}
+export const Mobile: Story = { name: 'Responsive · 390 · quick add always visible', globals: mobile }
+export const QuickAdd: Story = {
+  name: 'Accessibility · quick add calls the host',
+  play: async ({ canvasElement, args }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getAllByRole('button', { name: /Add Early Harvest/ })[0])
+    await expect(args.onQuickAdd).toHaveBeenCalled()
+  },
+}

package/templates/nova/tests/cases/sections/commerce/product-recommendations/ProductRecommendations.cases.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { ProductRecommendations, type ProductRecommendationsProps } from '../../../../../src/sections/ProductRecommendations/ProductRecommendations'
+import { productRecommendationsSchema } from '../../../../../src/sections/ProductRecommendations/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import * as fx from '../../../../fixtures/index'
+
+const recs = [fx.merchBoard, fx.merchCarafe, fx.merchPourOver, fx.merchOil, fx.merchMug, fx.merchDuvet]
+const base: ProductRecommendationsProps = { ...defaultsOf(productRecommendationsSchema), products: recs, sampleProducts: fx.merchNewSeason }
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/ProductRecommendations',
+  component: ProductRecommendations,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof ProductRecommendations>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { args: presetArgs(productRecommendationsSchema, 'recs-carousel') }
+export const Playground: Story = {}
+export const PresetCarousel: Story = { name: 'Preset · Carousel', args: presetArgs(productRecommendationsSchema, 'recs-carousel') }
+export const PresetGrid: Story = { name: 'Preset · Grid', args: presetArgs(productRecommendationsSchema, 'recs-grid') }
+export const Complementary: Story = { name: 'Option · intent · complementary ("Goes well with")', args: { intent: 'complementary' } }
+export const None: Story = { name: 'State · no recommendations · not rendered', args: { products: [] } }
+export const EditorSample: Story = { name: 'State · no recommendations · editor sample + chip', args: { products: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · always a carousel', globals: { viewport: { value: 'mobile', isRotated: false } } }

package/templates/nova/tests/cases/sections/commerce/recently-viewed/RecentlyViewed.cases.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, fn, userEvent, within } from '../../../../support/case'
+import { RecentlyViewed, type RecentlyViewedProps } from '../../../../../src/sections/RecentlyViewed/RecentlyViewed'
+import { recentlyViewedSchema } from '../../../../../src/sections/RecentlyViewed/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import * as fx from '../../../../fixtures/index'
+
+const viewed = [fx.merchMug, fx.merchDuvet, fx.merchOil, fx.merchBoard, fx.merchPourOver, fx.merchCarafe]
+const base: RecentlyViewedProps = { ...defaultsOf(recentlyViewedSchema), products: viewed, onClear: fn() }
+
+const meta = {
+  title: 'Nova/03 Sections/Commerce/RecentlyViewed',
+  component: RecentlyViewed,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof RecentlyViewed>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = { args: presetArgs(recentlyViewedSchema, 'rv-strip') }
+export const Playground: Story = {}
+export const PresetStrip: Story = { name: 'Preset · Strip', args: presetArgs(recentlyViewedSchema, 'rv-strip') }
+export const Carousel: Story = { name: 'Option · layout · carousel', args: { layout: 'carousel', limit: 12, products: [...viewed, ...viewed.map((p) => ({ ...p, id: `${p.id}-b` }))] } }
+export const ExcludeCurrent: Story = { name: 'Option · excludeCurrent · the page product is left out', args: { currentProductId: fx.merchMug.id } }
+export const Unavailable: Story = { name: 'State · capability unavailable · storefront never renders', args: { products: null } }
+export const UnavailableEditor: Story = { ...Unavailable, name: 'State · capability unavailable · editor setup', parameters: { nova: { mode: 'editor' } } }
+export const OnlyCurrent: Story = { name: 'State · only the current product · hidden', args: { products: [fx.merchMug], currentProductId: fx.merchMug.id } }
+export const Mobile: Story = { name: 'Responsive · 390 · carousel', globals: { viewport: { value: 'mobile', isRotated: false } } }
+export const Clear: Story = {
+  name: 'Accessibility · Clear history calls the host',
+  play: async ({ canvasElement, args }) => {
+    await userEvent.click(within(canvasElement).getByRole('button', { name: 'Clear history' }))
+    await expect(args.onClear).toHaveBeenCalled()
+  },
+}

package/templates/nova/tests/cases/sections/content/article-body/ArticleBody.cases.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { ArticleBody, type ArticleBodyProps } from '../../../../../src/sections/ArticleBody/ArticleBody'
+import { articleBodySchema } from '../../../../../src/sections/ArticleBody/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: ArticleBodyProps = { ...defaultsOf(articleBodySchema), article: sc.storyArticle, blog: { title: 'Journal', url: '/blogs/journal' } }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/ArticleBody',
+  component: ArticleBody,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof ArticleBody>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(articleBodySchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetStandard, PresetLongform, PresetMinimal]} render={(x) => <ArticleBody {...x} />} /> }
+export const Playground: Story = {}
+export const PresetStandard: Story = { name: 'Preset · Standard article', args: preset('article-standard') }
+export const PresetLongform: Story = { name: 'Preset · Long-form feature · behind the title', args: preset('article-longform') }
+export const PresetMinimal: Story = { name: 'Preset · Minimal note', args: preset('article-minimal') }
+export const Author: Story = { name: 'Option · showAuthor · initials monogram', args: { showAuthor: true } }
+export const Contents: Story = { name: 'Option · showContents', args: { showContents: true } }
+export const Editor: Story = { name: 'State · no article · editor sample', args: { article: null, blog: null }, parameters: { nova: { mode: 'editor' } } }
+export const Thai: Story = { name: 'Stress · Thai · reading time by characters', args: { article: { ...sc.storyArticle, title: 'วิธีซักผ้าลินินให้อยู่ได้ยี่สิบปี', excerpt: 'ความร้อนและน้ำยาปรับผ้านุ่มคือศัตรูของผ้าลินิน', contentHtml: '<p>' + 'ความร้อนและน้ำยาปรับผ้านุ่มคือศัตรูเพียงอย่างเดียวของผ้าลินิน '.repeat(40) + '</p>' } }, parameters: { nova: { locale: 'th' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · image full-bleed · back link', globals: mobile }
+export const LegacyWidth: Story = { name: 'Legacy · width content keeps rendering', args: { ...resolveSettings(articleBodySchema, { width: 'content' }).settings, article: sc.storyArticle } }

package/templates/nova/tests/cases/sections/content/before-after/BeforeAfter.cases.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { BeforeAfter, type BeforeAfterProps } from '../../../../../src/sections/BeforeAfter/BeforeAfter'
+import { beforeAfterSchema } from '../../../../../src/sections/BeforeAfter/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: BeforeAfterProps = { ...defaultsOf(beforeAfterSchema), eyebrow: 'Repair, not replace', heading: 'A chipped rim, re-glazed.', description: "Send us a damaged piece in its first year and we'll re-glaze and re-fire it. Drag to compare.", comparisons: sc.storyComparisons.slice(0, 1) }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/BeforeAfter',
+  component: BeforeAfter,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof BeforeAfter>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(beforeAfterSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetProof, PresetResults, PresetSide]} render={(x) => <BeforeAfter {...x} />} /> }
+export const Playground: Story = {}
+export const PresetProof: Story = { name: 'Preset · Proof slider', args: preset('ba-proof') }
+export const PresetResults: Story = { name: 'Preset · Results set · 3 comparisons', args: { ...preset('ba-results'), comparisons: sc.storyComparisons } }
+export const PresetSide: Story = { name: 'Preset · Side by side', args: preset('ba-side') }
+export const Start30: Story = { name: 'Option · startPosition 30 · square', args: { startPosition: 30, ratio: 'square' } }
+export const NoLabels: Story = { name: 'Option · labels blank → hidden', args: { beforeLabel: '', afterLabel: '' } }
+export const Empty: Story = { name: 'State · no complete pair · editor setup', args: { comparisons: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · portrait', globals: mobile }
+export const Keyboard: Story = {
+  name: 'Accessibility · the slider moves with the keyboard',
+  play: async ({ canvasElement }) => {
+    const slider = within(canvasElement).getByRole('slider')
+    slider.focus()
+    await userEvent.keyboard('{ArrowLeft}')
+    await waitFor(() => expect(slider).toHaveAttribute('aria-valuetext', '45% before'))
+  },
+}

package/templates/nova/tests/cases/sections/content/before-after/blocks/Comparison.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { BeforeAfter } from '../../../../../../src/sections/BeforeAfter/BeforeAfter'
+import { beforeAfterSchema } from '../../../../../../src/sections/BeforeAfter/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Content/Blocks/Comparison',
+  component: BeforeAfter,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(beforeAfterSchema), comparisons: sc.storyComparisons.slice(0, 1) },
+} satisfies Meta<typeof BeforeAfter>
+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/content/blog-posts/BlogPosts.cases.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { useState } from 'react'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { BlogPosts, type BlogPostsProps } from '../../../../../src/sections/BlogPosts/BlogPosts'
+import { blogPostsSchema } from '../../../../../src/sections/BlogPosts/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: BlogPostsProps = { ...defaultsOf(blogPostsSchema), heading: 'From the journal', blog: sc.storyJournal }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/BlogPosts',
+  component: BlogPosts,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof BlogPosts>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(blogPostsSchema, name)
+
+function Tagged(a: BlogPostsProps) {
+  const [tag, setTag] = useState<string | undefined>()
+  return <BlogPosts {...a} activeTag={tag} onTagChange={(t) => setTag(t ?? undefined)} />
+}
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetJournal, PresetRow, PresetFeatured]} render={(x) => <BlogPosts {...x} />} /> }
+export const Playground: Story = {}
+export const PresetJournal: Story = { name: 'Preset · Journal page', render: (a) => <Tagged {...a} />, args: { ...preset('blog-journal'), heading: 'Journal', filterTags: 'studio, care, recipes, makers', page: 1, pageHref: (n: number) => `?page=${n}`, total: 21 } as Partial<BlogPostsProps> }
+export const PresetRow: Story = { name: 'Preset · From the journal', args: preset('blog-row') }
+export const PresetFeatured: Story = { name: 'Preset · Featured stories · overlay', args: { ...preset('blog-featured'), postsToShow: 3 } }
+export const Square: Story = { name: 'Option · imageRatio · square · 2 columns', args: { imageRatio: 'square', columns: '2' } }
+export const Empty: Story = { name: 'State · empty blog → fallback', args: { blog: { ...sc.storyJournal, articles: [] } } }
+export const NoBlog: Story = { name: 'State · no blog · editor setup', args: { blog: null }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · rows after the featured post', globals: mobile, render: (a) => <Tagged {...a} />, args: { ...preset('blog-journal'), heading: 'Journal', filterTags: 'studio, care, recipes, makers' } }
+export const TagFilter: Story = {
+  name: 'Accessibility · tag tabs filter the list',
+  render: (a) => <Tagged {...a} />,
+  args: { showTagFilter: true, filterTags: 'studio, care', postsToShow: 6 },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Care' }))
+    await waitFor(() => expect(c.getByRole('button', { name: 'Care' })).toHaveAttribute('aria-pressed', 'true'))
+    await expect(c.queryByText('A slow Sunday breakfast for four')).toBeNull()
+  },
+}

package/templates/nova/tests/cases/sections/content/collection-links/CollectionLinks.cases.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, within } from '../../../../support/case'
+import { CollectionLinks, type CollectionLinksProps } from '../../../../../src/sections/CollectionLinks/CollectionLinks'
+import { collectionLinksSchema } from '../../../../../src/sections/CollectionLinks/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: CollectionLinksProps = { ...defaultsOf(collectionLinksSchema), heading: 'Browse the shop', menu: sc.storyBrowseMenu }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/CollectionLinks',
+  component: CollectionLinks,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof CollectionLinks>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(collectionLinksSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetChips, PresetIndex]} render={(x) => <CollectionLinks {...x} />} /> }
+export const Playground: Story = {}
+export const PresetChips: Story = { name: 'Preset · Chips', args: preset('cl-chips') }
+export const PresetIndex: Story = { name: 'Preset · Index list', args: preset('cl-index') }
+export const Empty: Story = { name: 'State · no menu · editor', args: { menu: null }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · chips scroll', globals: mobile }
+export const ShowAll: Story = {
+  name: 'Accessibility · Show all reveals the rest',
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Show all 10' }))
+    await expect(c.getByRole('link', { name: 'Workshops' })).toBeInTheDocument()
+  },
+}

package/templates/nova/tests/cases/sections/content/faq/Faq.cases.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { expect, userEvent, waitFor, within } from '../../../../support/case'
+import { Faq, type FaqProps } from '../../../../../src/sections/Faq/Faq'
+import { faqSchema } from '../../../../../src/sections/Faq/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: FaqProps = { ...defaultsOf(faqSchema), heading: 'Questions, answered', description: "Can't find it? Contact us — we reply within a day.", items: sc.storyFaq }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/FAQ',
+  component: Faq,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof Faq>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(faqSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetBeside, PresetCentered]} render={(x) => <Faq {...x} />} /> }
+export const Playground: Story = {}
+export const PresetBeside: Story = { name: 'Preset · Beside', args: preset('faq-beside') }
+export const PresetCentered: Story = { name: 'Preset · Centered', args: preset('faq-centered') }
+export const Empty: Story = { name: 'State · no questions · editor', args: { items: [] }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · above', globals: mobile }
+export const SingleOpen: Story = {
+  name: 'Accessibility · singleOpen closes the others',
+  args: { singleOpen: true },
+  play: async ({ canvasElement }) => {
+    const c = within(canvasElement)
+    await userEvent.click(c.getByRole('button', { name: 'Can I put stoneware in the dishwasher?' }))
+    await waitFor(() => expect(c.getByRole('button', { name: 'How long does delivery take?' })).toHaveAttribute('aria-expanded', 'false'))
+    await expect(c.getByRole('button', { name: 'Can I put stoneware in the dishwasher?' })).toHaveAttribute('aria-expanded', 'true')
+  },
+}

package/templates/nova/tests/cases/sections/content/faq/blocks/FaqItem.cases.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '../../../../../support/case'
+import { Faq } from '../../../../../../src/sections/Faq/Faq'
+import { faqSchema } from '../../../../../../src/sections/Faq/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import * as sc from '../../../../../support/story-content'
+
+const meta = {
+  title: 'Nova/03 Sections/Content/Blocks/FAQItem',
+  component: Faq,
+  tags: ['autodocs'],
+  args: { ...defaultsOf(faqSchema), layout: 'above', items: [sc.storyFaq[0]] },
+} satisfies Meta<typeof Faq>
+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/content/feature-grid-blocks/FeatureGridBlocks.cases.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { FeatureGridBlocks, type FeatureGridBlocksProps } from '../../../../../src/sections/FeatureGridBlocks/FeatureGridBlocks'
+import { featureGridBlocksSchema } from '../../../../../src/sections/FeatureGridBlocks/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 blocks = sc.storyBento.map((c) => ({ type: 'column' as const, ...c }))
+const base: FeatureGridBlocksProps = { ...defaultsOf(featureGridBlocksSchema), blocks }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/FeatureGrid',
+  component: FeatureGridBlocks,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof FeatureGridBlocks>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(featureGridBlocksSchema, name)
+
+export const Overview: Story = { render: (a) => <Stack base={a} items={[PresetBento, PresetPairs]} render={(x) => <FeatureGridBlocks {...x} />} /> }
+export const Playground: Story = {}
+export const PresetBento: Story = { name: 'Preset · Bento', args: preset('fgb-bento') }
+export const PresetPairs: Story = { name: 'Preset · Pairs', args: { ...preset('fgb-pairs'), blocks: blocks.slice(1) } }
+export const Inverse: Story = { name: 'Option · blockBackground · primary', args: { blockBackground: 'primary' } }
+export const Equal: Story = { name: 'Option · preset · 3-equal', args: { preset: '3-equal', blocks: blocks.slice(1) } }
+export const Mixed: Story = { name: 'Option · heading / text / button tiles', args: { preset: '2+2', blocks: [blocks[1], { type: 'heading', settings: { text: 'Made in Portugal' } }, { type: 'text', settings: { text: 'Woven on shuttle looms by a family mill since 1932.' } }, { type: 'button', settings: { label: 'Our makers', link: '/pages/makers', variant: 'secondary' } }] } }
+export const Few: Story = { name: 'State · 2 tiles → equal tiles', args: { blocks: blocks.slice(0, 2) } }
+export const Mobile: Story = { name: 'Responsive · 390 · one column', globals: mobile }

package/templates/nova/tests/cases/sections/content/feature-highlights/FeatureHighlights.cases.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '../../../../support/case'
+import { FeatureHighlights, type FeatureHighlightsProps } from '../../../../../src/sections/FeatureHighlights/FeatureHighlights'
+import { featureHighlightsSchema } from '../../../../../src/sections/FeatureHighlights/schema'
+import { defaultsOf } from '@tanqory/theme-kit'
+import { presetArgs } from '../../../../support/presets'
+import * as sc from '../../../../support/story-content'
+
+const base: FeatureHighlightsProps = { ...defaultsOf(featureHighlightsSchema), features: sc.storyFeatures }
+const mobile = { viewport: { value: 'mobile', isRotated: false } }
+
+const meta = {
+  title: 'Nova/03 Sections/Content/FeatureHighlights',
+  component: FeatureHighlights,
+  tags: ['autodocs'],
+  args: base,
+} satisfies Meta<typeof FeatureHighlights>
+export default meta
+type Story = StoryObj<typeof meta>
+const preset = (name: string) => presetArgs(featureHighlightsSchema, name)
+
+export const Overview: Story = { args: preset('fh-service-strip') }
+export const Playground: Story = {}
+export const PresetStrip: Story = { name: 'Preset · Service strip', args: preset('fh-service-strip') }
+export const Filled: Story = { name: 'Option · iconStyle · filled-circle · center', args: { iconStyle: 'filled-circle', textAlignment: 'center' } }
+export const Empty: Story = { name: 'State · no features · editor', args: { features: '' }, parameters: { nova: { mode: 'editor' } } }
+export const Mobile: Story = { name: 'Responsive · 390 · 2 × 2', globals: mobile, args: preset('fh-service-strip') }