TagList

Inline list of arrow-shape tag chips resolving each key to its taxonomy label — used under article/product cards.

Badges & Tags

Default

Many tags (wraps)

English locale

Empty (no tags)

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for TagList (default export) — new coverage (epic #1647, wave 6 / #1660). // // TWIN NOTE: tag-list.tsx also exports a named `ArrowTag` — a data-coupled copy of // `src/components/shared/arrow-tag.tsx` (already storied; see the comment at the top // of arrow-tag.stories.tsx). Only the DEFAULT export (`TagList`) is new coverage here. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import TagList from './tag-list'; const meta: StoryMeta = { title: 'TagList', category: 'Badges & Tags', description: 'Inline list of arrow-shape tag chips resolving each key to its taxonomy label — used under article/product cards.', usage: `import TagList from '@/src/components/shared/tag-list';\n\n<TagList tags={['power', 'diy']} />`, }; export default meta; export const Default = defineStory({ name: 'Default', render: () => <TagList tags={['power', 'diy']} />, }); export const ManyTags = defineStory({ name: 'Many tags (wraps)', render: () => ( <div class="max-w-[240px]"> <TagList tags={['modular', 'guide', 'how-to-build', 'power', 'case', 'rail', 'diy']} /> </div> ), }); export const EnglishLocale = defineStory({ name: 'English locale', render: () => <TagList tags={['power', 'case', 'diy']} locale="en" />, }); export const Empty = defineStory({ name: 'Empty (no tags)', render: () => <TagList tags={[]} />, });