ArticleListItem

Card-style list item for a product/note article, with image, tags, and dates.

Lists & Cards

Default

TitleDescription

With image

With tags

No description

News article

With custom excerpt

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for ArticleListItem — migrated to the repo-root story contract // (`lib/styleguide/story-contract`; epic #1647, wave 3a batch C). import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { ArticleListItem, type ArticleListItemProps } from './article-list-item'; const meta: StoryMeta = { title: 'ArticleListItem', category: 'Lists & Cards', description: 'Card-style list item for a product/note article, with image, tags, and dates.', usage: `import { ArticleListItem } from '@/components/list/article-list-item';\n\n<ArticleListItem title="..." imageSlug="..." date="..." updatedAt="..." description="..." tags={[]} href="..." />`, }; export default meta; export const Default = defineStory<ArticleListItemProps>({ name: 'Default', controls: [ { type: 'text', prop: 'title', label: 'Title', defaultValue: 'Mutable Instruments Plaits 商品詳細', }, { type: 'text', prop: 'description', label: 'Description', defaultValue: 'Plaitsはマクロオシレーターの後継モジュールで、16種類のシンセシスモデルを搭載しています。', }, ], render: ({ title = 'Mutable Instruments Plaits 商品詳細', description = 'Plaitsはマクロオシレーターの後継モジュールで、16種類のシンセシスモデルを搭載しています。', } = {}) => ( <ArticleListItem title={title} imageSlug="1-front" date="2024-06-15" updatedAt="2024-08-20" description={description} tags={['product-intro', 'oscillator']} href="/products/plaits-intro/" /> ), }); export const WithImage = defineStory({ name: 'With image', render: () => ( <ArticleListItem title="ADDAC104 VC Integrator 商品詳細" imageSlug="addac104-0-front" date="2024-03-10" updatedAt="" description="ADDAC104はCV信号を統合・処理するためのユーティリティモジュールです。" tags={['product-intro']} href="/products/addac104-intro/" /> ), }); export const WithTags = defineStory({ name: 'With tags', render: () => ( <ArticleListItem title="モジュラーシンセ電源入門その1: 電源の基礎知識" imageSlug="ad110-1-front" date="2024-06-01" updatedAt="" description="モジュラーシンセの電源について基礎から解説します。" tags={['guide', 'how-to-build', 'power']} href="/guides/power-guide-vol1/" locale="ja" /> ), }); export const NoDescription = defineStory({ name: 'No description', render: () => ( <ArticleListItem title="2V2 デュアルVCA 商品詳細" imageSlug="2v2-1-front" date="2024-02-28" updatedAt="" description="" tags={[]} href="/products/2v2-intro/" /> ), }); export const NewsArticle = defineStory({ name: 'News article', render: () => ( <ArticleListItem title="Takazudo Modular News Vol.42" imageSlug="" date="2024-09-01" updatedAt="" description="新商品入荷情報やイベント情報をお届けします。" tags={[]} href="/notes/news-vol-42/" newsNo={42} /> ), }); export const WithCustomExcerpt = defineStory({ name: 'With custom excerpt', render: () => ( <ArticleListItem title="ACIDS Operator 商品詳細" imageSlug="acids-0-front" date="2024-07-20" updatedAt="" description="ACIDSのOperatorモジュールは独創的なFMシンセシスを実現します。" tags={['product-intro', 'oscillator']} href="/products/acids-intro/" /> ), });