CategoryBadge

Non-linking curated-tag badge showing an item type (guide/news/highlights/restock) on home-page news stream cards — one per-category color, `sm` (default) or `lg` sizing.

Badges & Tags

Guide

News

Large size (home lead item)

English locale

All categories

Source

/** @jsxRuntime automatic */
/** @jsxImportSource preact */
// Story for CategoryBadge — new coverage (epic #1647, wave 6 / #1660).
import { defineStory } from '@lib/styleguide/story-contract';
import type { StoryMeta } from '@lib/styleguide/story-contract';
import CategoryBadge from './category-badge';
import { getCuratedTagByKey } from '@/src/lib/home/curated-tags';

const meta: StoryMeta = {
  title: 'CategoryBadge',
  category: 'Badges & Tags',
  description:
    'Non-linking curated-tag badge showing an item type (guide/news/highlights/restock) on home-page news stream cards — one per-category color, `sm` (default) or `lg` sizing.',
  usage: `import CategoryBadge from '@/src/components/shared/category-badge';\n\n<CategoryBadge tag={getCuratedTagByKey('guide')} locale="ja" />`,
};
export default meta;

export const Guide = defineStory({
  name: 'Guide',
  render: () => <CategoryBadge tag={getCuratedTagByKey('guide')} locale="ja" />,
});

export const News = defineStory({
  name: 'News',
  render: () => <CategoryBadge tag={getCuratedTagByKey('news')} locale="ja" />,
});

export const LargeSize = defineStory({
  name: 'Large size (home lead item)',
  render: () => (
    <CategoryBadge tag={getCuratedTagByKey('takazudo-modular-highlights')} locale="ja" size="lg" />
  ),
});

export const EnglishLocale = defineStory({
  name: 'English locale',
  render: () => <CategoryBadge tag={getCuratedTagByKey('restock')} locale="en" />,
});

export const AllCategories = defineStory({
  name: 'All categories',
  render: () => (
    <div class="flex flex-wrap gap-vgap-xs">
      <CategoryBadge tag={getCuratedTagByKey('guide')} locale="ja" />
      <CategoryBadge tag={getCuratedTagByKey('news')} locale="ja" />
      <CategoryBadge tag={getCuratedTagByKey('takazudo-modular-highlights')} locale="ja" />
      <CategoryBadge tag={getCuratedTagByKey('restock')} locale="ja" />
    </div>
  ),
});

Live CSS

Injected into the previews above. CategoryBadge

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */