タイムラインアイテム

TimelineItemコンポーネントは、時系列のイベントやアクティビティを表示するタイムラインコンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

時系列表示: イベントを時系列で表示
バリエーション: ステータスに応じた色分け
アイコンサポート: カスタムアイコンの表示
レスポンシブ: モバイルデバイスでの適切な表示
テーマ対応: ライトテーマとダークテーマの自動切り替え
接続線: アイテム間の視覚的な接続

使用方法

---
import { TimelineItem } from '@karan-monorepo/ui-core';
---

<kds-timeline-item
  title="プロジェクト開始"
  time="9:00 AM"
  subtitle="初期設定完了"
  variant="success"
  is-first={true}
  theme="light"
>
  プロジェクトの詳細情報
</kds-timeline-item>

プロパティ

プロパティ	型	デフォルト	説明
`title`	`string`	`''`	タイムラインアイテムのタイトル
`time`	`string`	`''`	時間の表示
`subtitle`	`string`	`''`	サブタイトル
`icon`	`string`	`'•'`	カスタムアイコン
`variant`	`'default' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	ステータスバリエーション
`theme`	`'light' \| 'dark'`	`'light'`	コンポーネントのカラーテーマ
`is-first`	`boolean`	`false`	最初のアイテムかどうか
`is-last`	`boolean`	`false`	最後のアイテムかどうか

使用例

TimelineItem Component

Display chronological events and activities in a vertical timeline layout.

Basic Usage

Simple Timeline

Variants

Status Variants

With Icons

Custom Icons

Themes

Light Theme

Dark Theme

Real-world Examples

Order Tracking

Project Timeline

Team assembled and project scope defined. Initial requirements documented and stakeholder approval received.

Created wireframes, mockups, and interactive prototypes. Conducted user testing and design iterations.

Implemented basic features and established development infrastructure. Set up CI/CD pipeline.

Added advanced functionality, third-party integrations, and performance optimizations.

Comprehensive testing phase with bug fixes and performance improvements.

Successfully deployed to production with monitoring and support systems in place.

基本的な使用

シンプルなタイムライン

<div class="timeline-container">
  <kds-timeline-item
    title="プロジェクト開始"
    time="9:00 AM"
    subtitle="初期設定完了"
    is-first={true}
  />

  <kds-timeline-item
    title="開発フェーズ"
    time="10:30 AM"
    subtitle="コア機能実装"
  />

  <kds-timeline-item
    title="テストフェーズ"
    time="2:00 PM"
    subtitle="品質保証進行中"
    is-last={true}
  />
</div>

ステータスバリエーション

<div class="timeline-container">
  <kds-timeline-item
    title="タスク完了"
    time="9:00 AM"
    subtitle="正常に完了"
    variant="success"
    is-first={true}
  />

  <kds-timeline-item
    title="タスク進行中"
    time="10:30 AM"
    subtitle="現在作業中"
    variant="info"
  />

  <kds-timeline-item
    title="タスク遅延"
    time="2:00 PM"
    subtitle="注意が必要"
    variant="warning"
  />

  <kds-timeline-item
    title="タスク失敗"
    time="3:30 PM"
    subtitle="調査が必要"
    variant="error"
    is-last={true}
  />
</div>

アイコン付きタイムライン

<div class="timeline-container">
  <kds-timeline-item
    title="ユーザー登録"
    time="8:00 AM"
    subtitle="新規ユーザー登録"
    icon="👤"
    variant="success"
    is-first={true}
  />

  <kds-timeline-item
    title="メール送信"
    time="8:05 AM"
    subtitle="ウェルカムメール配信"
    icon="📧"
    variant="info"
  />

  <kds-timeline-item
    title="プロフィール更新"
    time="8:15 AM"
    subtitle="ユーザープロフィール完了"
    icon="✏️"
    variant="success"
  />

  <kds-timeline-item
    title="初回ログイン"
    time="8:30 AM"
    subtitle="システムアクセス"
    icon="🔑"
    variant="success"
    is-last={true}
  />
</div>

使用ケース

注文追跡

<div class="order-tracking">
  <kds-timeline-item
    title="注文確定"
    time="3月15日 14:30"
    subtitle="注文 #12345 が確定されました"
    icon="🛒"
    variant="success"
    is-first={true}
  />

  <kds-timeline-item
    title="支払い確認"
    time="3月15日 14:32"
    subtitle="¥99.99 の支払いが処理されました"
    icon="💳"
    variant="success"
  />

  <kds-timeline-item
    title="注文処理中"
    time="3月15日 15:00"
    subtitle="注文を準備中です"
    icon="📦"
    variant="info"
  />

  <kds-timeline-item
    title="発送済み"
    time="3月16日 9:00"
    subtitle="FedExで発送されました"
    icon="🚚"
    variant="success"
  />

  <kds-timeline-item
    title="配送中"
    time="3月17日 8:00"
    subtitle="配送中です"
    icon="🚛"
    variant="info"
  />

  <kds-timeline-item
    title="配送完了"
    time="3月17日 14:15"
    subtitle="正常に配送されました"
    icon="✅"
    variant="success"
    is-last={true}
  />
</div>

プロジェクトタイムライン

<div class="project-timeline">
  <kds-timeline-item
    title="プロジェクトキックオフ"
    time="第1週"
    subtitle="初期計画と要件収集"
    icon="🚀"
    variant="success"
    is-first={true}
  >
    <p>チーム編成とプロジェクトスコープの定義。初期要件の文書化とステークホルダーの承認を取得。</p>
  </kds-timeline-item>

  <kds-timeline-item
    title="デザインフェーズ"
    time="第2-3週"
    subtitle="UI/UXデザインとプロトタイピング"
    icon="🎨"
    variant="info"
  >
    <p>ワイヤーフレーム、モックアップ、インタラクティブプロトタイプの作成。ユーザーテストとデザインの反復。</p>
  </kds-timeline-item>

  <kds-timeline-item
    title="開発スプリント1"
    time="第4-5週"
    subtitle="コア機能開発"
    icon="💻"
    variant="info"
  >
    <p>基本機能の実装と開発インフラの構築。CI/CDパイプラインの設定。</p>
  </kds-timeline-item>

  <kds-timeline-item
    title="開発スプリント2"
    time="第6-7週"
    subtitle="高度な機能と統合"
    icon="⚡"
    variant="info"
  >
    <p>高度な機能の追加、サードパーティ統合、パフォーマンス最適化。</p>
  </kds-timeline-item>

  <kds-timeline-item
    title="テスト・QA"
    time="第8週"
    subtitle="品質保証とバグ修正"
    icon="🧪"
    variant="warning"
  >
    <p>包括的なテストフェーズ。バグ修正とパフォーマンス改善。</p>
  </kds-timeline-item>

  <kds-timeline-item
    title="リリース"
    time="第9週"
    subtitle="本番環境へのデプロイ"
    icon="🎉"
    variant="success"
    is-last={true}
  >
    <p>本番環境への正常なデプロイ。監視とサポートシステムの稼働。</p>
  </kds-timeline-item>
</div>

ユーザーアクティビティ

<div class="user-activity">
  <kds-timeline-item
    title="アカウント作成"
    time="2時間前"
    subtitle="新規アカウントが作成されました"
    icon="👤"
    variant="success"
    is-first={true}
  />

  <kds-timeline-item
    title="プロフィール更新"
    time="1時間前"
    subtitle="プロフィール情報が更新されました"
    icon="✏️"
    variant="info"
  />

  <kds-timeline-item
    title="初回ログイン"
    time="30分前"
    subtitle="システムに初回ログインしました"
    icon="🔑"
    variant="success"
    is-last={true}
  />
</div>

スタイリング

TimelineItemコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

TimelineItemコンポーネントには適切なアクセシビリティ機能が含まれています：

セマンティックHTMLの構造
高コントラスト比による視認性の確保
スクリーンリーダー対応の構造
時間情報の適切な表示
ステータス情報の視覚的・テキスト的表現

ベストプラクティス

時間情報は一貫した形式で表示する
ステータスバリエーションは意味に基づいて選択する
アイコンは内容を明確にするために使用する
最初と最後のアイテムには適切なフラグを設定する
長いコンテンツはスロットで追加する
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

TimelineItemコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Flexbox
CSS Grid