ArrowTag

SSR-only arrow-polygon tag pill with an inverted active state and hover/press affordances.

Badges & Tags

Default

LabelSizeActive

Small

Large

Active

With count suffix

Tag filter row

Aria-pressed reflection

Parenthesized label

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ArrowTag — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave-3 batch D / #1655). // // SSR-only arrow polygon tag, used by TagSidebar and the /metamodule-ref/ // filter panel's tag chips (filter-panel.tsx). DATA-FREE — distinct from // tag-list.tsx's export (coupled to taxonomy data) and from // `components/taxonomy/arrow-tag.tsx` (`ArrowTag` in the Taxonomy category), // an earlier near-duplicate that takes a `suffix` prop instead of `children`. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ArrowTag } from './arrow-tag'; // Props aren't exported by the component; derive them inline rather than // widening the component's public surface just for story typing (STORIES rule). type ArrowTagProps = Parameters<typeof ArrowTag>[0]; const meta: StoryMeta = { title: 'ArrowTag', category: 'Badges & Tags', description: 'SSR-only arrow-polygon tag pill with an inverted active state and hover/press affordances.', usage: `import { ArrowTag } from '@/src/components/shared/arrow-tag';\n\n<ArrowTag label="Eurorack" size="sm" />`, }; export default meta; export const Default = defineStory<ArrowTagProps>({ name: 'Default', controls: [ { type: 'text', prop: 'label', label: 'Label', defaultValue: 'Eurorack' }, { type: 'select', prop: 'size', label: 'Size', options: ['sm', 'lg'], defaultValue: 'sm' }, { type: 'boolean', prop: 'active', label: 'Active', defaultValue: false }, ], render: ({ label = 'Eurorack', size = 'sm', active = false } = {}) => ( <ArrowTag label={label} size={size} active={active} /> ), }); export const Small = defineStory({ name: 'Small', render: () => <ArrowTag label="Eurorack" size="sm" />, }); export const Large = defineStory({ name: 'Large', render: () => <ArrowTag label="Eurorack" size="lg" />, }); export const Active = defineStory({ name: 'Active', render: () => <ArrowTag label="Eurorack" size="sm" active />, }); export const WithCountSuffix = defineStory({ name: 'With count suffix', render: () => ( <ArrowTag label="Eurorack" size="sm"> <span class="ml-[.3em] opacity-60">42</span> </ArrowTag> ), }); export const TagFilterRow = defineStory({ name: 'Tag filter row', render: () => ( <ul class="flex flex-wrap gap-x-[6px] gap-y-[3px]"> {[ { tag: 'Eurorack', count: 42, active: true }, { tag: 'MIDI', count: 18, active: false }, { tag: 'Sequencer', count: 11, active: false }, { tag: 'Clock', count: 7, active: false }, ].map(({ tag, count, active }) => ( <li key={tag} class="inline-flex whitespace-nowrap"> <button type="button" class="group cursor-pointer" aria-pressed={active}> <ArrowTag label={tag} size="sm" active={active}> <span class="ml-[.3em] opacity-60">{count}</span> </ArrowTag> </button> </li> ))} </ul> ), }); // The imperatively-wired button pattern: `active` is left `false` on the // component, and the ancestor button's `aria-pressed="true"` alone drives the // active look via `group-aria-pressed:`. export const AriaPressedReflection = defineStory({ name: 'Aria-pressed reflection', render: () => ( <button type="button" class="group cursor-pointer" aria-pressed="true"> <ArrowTag label="Eurorack" size="sm" active={false} /> </button> ), }); export const ParenthesizedLabel = defineStory({ name: 'Parenthesized label', render: () => <ArrowTag label="Case（ケース）" size="sm" />, });