sdaia-ui 1.0.1

package/src/components/Metric/Metric.tsx

@@ -0,0 +1,584 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Button } from '../Button';
+import { Sparkline } from '../Sparkline';
+import type { MetricProps, MetricType, MetricTrend } from './Metric.types';
+import {
+  CARD,
+  CONTENT_PADDING,
+  CONTENT_GAP,
+  HEADER_BAR,
+  FOOTER_BAR,
+  LABEL,
+  VALUE,
+  TREND_VALUE_GREEN,
+  TREND_VALUE_PURPLE,
+  TREND_LABEL,
+  BADGE_PILL,
+  BADGE_TEXT,
+  BADGE_DOT,
+  STAR_WRAPPER,
+  STAR_GREEN,
+  STAR_PURPLE,
+  STAR_DARK,
+  ICON_MUTED,
+} from './Metric.variants';
+import { StarIcon, MoreVerticalIcon, AlertCircleIcon } from '../../icons/IconFactory';
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Star `text-*` colour class driven by type × trend.
+ *
+ * - Icon Left / Icon Top                    → green
+ * - Icon Left + Text / trend=Text           → purple
+ * - Icon Left + Text / trend=None or Badge  → dark/neutral
+ */
+function starColorClass(type: MetricType, trend: MetricTrend): string {
+  if (type === 'Icon Left + Text') {
+    return trend === 'Text' ? STAR_PURPLE : STAR_DARK;
+  }
+  return STAR_GREEN;
+}
+
+/**
+ * Trend text accent colour for `type="Icon Left + Text"` → purple; otherwise green.
+ */
+function trendAccentClass(type: MetricType): string {
+  return type === 'Icon Left + Text' ? TREND_VALUE_PURPLE : TREND_VALUE_GREEN;
+}
+
+// ─── Primitive sub-components ─────────────────────────────────────────────────
+
+/**
+ * MoreVertical (⋮) kebab button.
+ * Always rendered in the label row — present in Default, Header, and Footer actions.
+ */
+function MoreBtn({ onClick }: { onClick?: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="More options"
+      className={ICON_MUTED}
+    >
+      {/* SVG has no hard-coded dimensions; it fills the size-icon-xxl wrapper */}
+      <MoreVerticalIcon className="w-icon-lg h-icon-lg" />
+    </button>
+  );
+}
+
+/**
+ * Badge pill: bordered pill with a green status dot and the metric `trendValue`.
+ *
+ * Figma: bg-white border-[#d2d6db] rounded-[6px] px-md py-xs | dot 8px + "100%"
+ * The text content is always the trendValue (e.g. "100%"), NOT a custom label.
+ */
+function TrendBadge({ value }: { value: string }) {
+  return (
+    <div className={BADGE_PILL}>
+      <span className={BADGE_DOT} aria-hidden="true" />
+      <span className={BADGE_TEXT}>{value}</span>
+    </div>
+  );
+}
+
+/**
+ * Inline trend text: coloured percentage + muted secondary label.
+ * e.g.  <span green>100% </span><span muted>vs last month</span>
+ */
+function TrendText({
+  value,
+  label,
+  type,
+}: {
+  value: string;
+  label: string;
+  type: MetricType;
+}) {
+  return (
+    <p className="shrink-0 whitespace-nowrap">
+      <span className={trendAccentClass(type)}>{value} </span>
+      <span className={TREND_LABEL}>{label}</span>
+    </p>
+  );
+}
+
+// ─── Content layout per type ──────────────────────────────────────────────────
+
+/**
+ * Numbers row: value (flex-1) + optional inline trend indicator.
+ * Used by Compact, Icon Left, Icon Top, and Icon Left + Text (with Compact graph).
+ * For Icon Left + Text with Text trend the trend sits on its own line — see below.
+ */
+function NumbersRow({
+  value,
+  trend,
+  trendValue,
+  trendLabel,
+  type,
+  showInlineTrend = true,
+  rowGap = 'gap-spacing-md',
+}: {
+  value: string;
+  trend: MetricTrend;
+  trendValue: string;
+  trendLabel: string;
+  type: MetricType;
+  showInlineTrend?: boolean;
+  /** Gap between value and badge/trend. Figma: spacing-lg for Compact, spacing-md for icon types. */
+  rowGap?: string;
+}) {
+  return (
+    <div className={cn('flex items-center w-full', rowGap)}>
+      <p className={cn(VALUE, 'flex-1 min-w-0')}>{value}</p>
+      {showInlineTrend && trend === 'Badge' && <TrendBadge value={trendValue} />}
+      {showInlineTrend && trend === 'Text' && (
+        <TrendText value={trendValue} label={trendLabel} type={type} />
+      )}
+    </div>
+  );
+}
+
+/**
+ * Compact layout — no icon.
+ *
+ * ```
+ * [label, flex-1]  [⋮]
+ * [value, flex-1]  [badge | trend-text]   ← inline
+ * ```
+ */
+function CompactBody({
+  label,
+  value,
+  trend,
+  trendValue,
+  trendLabel,
+  graph,
+  chartTrend,
+  onMoreOptions,
+}: {
+  label: string;
+  value: string;
+  trend: MetricTrend;
+  trendValue: string;
+  trendLabel: string;
+  graph: string;
+  chartTrend: 'Positive' | 'Negative';
+  onMoreOptions?: () => void;
+}) {
+  const isLarge = graph === 'Large';
+  const isCompactGraph = graph === 'Compact';
+
+  return (
+    <>
+      {/* Label row — gap-spacing-lg (12 px) between label and more-vertical (Figma) */}
+      <div className="flex items-center gap-spacing-lg w-full">
+        <p className={cn(LABEL, 'flex-1 min-w-0')}>{label}</p>
+        <MoreBtn onClick={onMoreOptions} />
+      </div>
+
+      {/* Value row (+ compact chart side-by-side) */}
+      <div className={cn('flex items-end gap-spacing-2xl w-full', isCompactGraph && 'flex-1')}>
+        <div className="flex-1 min-w-0">
+          {/* gap-spacing-lg (12 px) between value and badge/trend for Compact (Figma) */}
+          <NumbersRow
+            value={value}
+            trend={trend}
+            trendValue={trendValue}
+            trendLabel={trendLabel}
+            type="Compact"
+            rowGap="gap-spacing-lg"
+          />
+        </div>
+        {isCompactGraph && (
+          <Sparkline type="Wavy" trend={chartTrend} className="shrink-0" />
+        )}
+      </div>
+
+      {/* Full-width large chart */}
+      {isLarge && (
+        <Sparkline type="Wavy" trend={chartTrend} className="w-full h-[64px]" />
+      )}
+    </>
+  );
+}
+
+/**
+ * Icon Left layout — 40 px star to the inline-start; content column to the right.
+ *
+ * ```
+ * [★ 40px]  [label, flex-1]  [⋮]
+ *           [value, flex-1]  [badge | trend-text]
+ * ```
+ */
+function IconLeftBody({
+  label,
+  value,
+  trend,
+  trendValue,
+  trendLabel,
+  graph,
+  chartTrend,
+  onMoreOptions,
+}: {
+  label: string;
+  value: string;
+  trend: MetricTrend;
+  trendValue: string;
+  trendLabel: string;
+  graph: string;
+  chartTrend: 'Positive' | 'Negative';
+  onMoreOptions?: () => void;
+}) {
+  const isLarge = graph === 'Large';
+  const isCompactGraph = graph === 'Compact';
+
+  return (
+    <>
+      {/* gap-spacing-xl (16 px) between star and content column (Figma) */}
+      <div className="flex items-start gap-spacing-xl w-full">
+        {/* Star icon */}
+        <div className={cn(STAR_WRAPPER, STAR_GREEN)}>
+          <StarIcon className="w-full h-full" />
+        </div>
+
+        {/* Content column — gap-spacing-lg (12 px) between label-row and numbers-row (Figma) */}
+        <div className="flex flex-col gap-spacing-lg flex-1 min-w-0">
+          {/* Label row — gap-spacing-md (8 px) between label and more-vertical (Figma) */}
+          <div className="flex items-center gap-spacing-md w-full">
+            <p className={cn(LABEL, 'flex-1 min-w-0')}>{label}</p>
+            <MoreBtn onClick={onMoreOptions} />
+          </div>
+
+          {/* Value row (+ compact chart) — numbers row gap-spacing-md (Figma) */}
+          <div className={cn('flex items-end gap-spacing-2xl w-full', isCompactGraph && 'flex-1')}>
+            <div className="flex-1 min-w-0">
+              <NumbersRow
+                value={value}
+                trend={trend}
+                trendValue={trendValue}
+                trendLabel={trendLabel}
+                type="Icon Left"
+              />
+            </div>
+            {isCompactGraph && (
+              <Sparkline type="Wavy" trend={chartTrend} className="shrink-0" />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Full-width large chart */}
+      {isLarge && (
+        <Sparkline type="Wavy" trend={chartTrend} className="w-full h-[64px]" />
+      )}
+    </>
+  );
+}
+
+/**
+ * Icon Top layout — 40 px star alone in the heading row; label + value below.
+ *
+ * ```
+ * [★ 40px, flex-1 space]  [⋮]
+ * [label]
+ * [value, flex-1]  [trend-text inline]
+ * ```
+ */
+function IconTopBody({
+  label,
+  value,
+  trend,
+  trendValue,
+  trendLabel,
+  graph,
+  chartTrend,
+  onMoreOptions,
+}: {
+  label: string;
+  value: string;
+  trend: MetricTrend;
+  trendValue: string;
+  trendLabel: string;
+  graph: string;
+  chartTrend: 'Positive' | 'Negative';
+  onMoreOptions?: () => void;
+}) {
+  const isLarge = graph === 'Large';
+  const isCompactGraph = graph === 'Compact';
+
+  return (
+    <>
+      {/* Heading row: star (flex-1) + MoreVertical — gap-spacing-md (8 px) (Figma) */}
+      <div className="flex items-start gap-spacing-md w-full">
+        <div className="flex-1">
+          <div className={cn(STAR_WRAPPER, STAR_GREEN)}>
+            <StarIcon className="w-full h-full" />
+          </div>
+        </div>
+        <MoreBtn onClick={onMoreOptions} />
+      </div>
+
+      {/*
+       * Content col: label + numbers row, gap-spacing-lg (12 px) between them (Figma).
+       * Separated from the heading row by the outer CONTENT_GAP (gap-spacing-2xl = 20 px).
+       */}
+      <div className={cn('flex flex-col gap-spacing-lg w-full', isCompactGraph && 'flex-1')}>
+        {/* Label */}
+        <p className={cn(LABEL, 'w-full')}>{label}</p>
+
+        {/* Value row (+ compact chart) — gap-spacing-md between value and trend (Figma) */}
+        <div className={cn('flex items-end gap-spacing-2xl w-full', isCompactGraph && 'flex-1')}>
+          <div className="flex-1 min-w-0">
+            <NumbersRow
+              value={value}
+              trend={trend}
+              trendValue={trendValue}
+              trendLabel={trendLabel}
+              type="Icon Top"
+            />
+          </div>
+          {isCompactGraph && (
+            <Sparkline type="Wavy" trend={chartTrend} className="shrink-0" />
+          )}
+        </div>
+      </div>
+
+      {/* Full-width large chart */}
+      {isLarge && (
+        <Sparkline type="Wavy" trend={chartTrend} className="w-full h-[64px]" />
+      )}
+    </>
+  );
+}
+
+/**
+ * Icon Left + Text layout — star and label share the heading row; value (and
+ * trend text on its own line) below.
+ *
+ * ```
+ * [★ 40px  label, flex-1]  [⋮]
+ * [value]
+ * [trendValue trendLabel]              ← separate line for trend=Text
+ * ```
+ * With compact graph the chart sits beside the value row instead.
+ */
+function IconLeftTextBody({
+  label,
+  value,
+  trend,
+  trendValue,
+  trendLabel,
+  graph,
+  chartTrend,
+  onMoreOptions,
+}: {
+  label: string;
+  value: string;
+  trend: MetricTrend;
+  trendValue: string;
+  trendLabel: string;
+  graph: string;
+  chartTrend: 'Positive' | 'Negative';
+  onMoreOptions?: () => void;
+}) {
+  const isLarge = graph === 'Large';
+  const isCompactGraph = graph === 'Compact';
+  const starColor = starColorClass('Icon Left + Text', trend);
+
+  return (
+    <>
+      {/* Heading row: star + label (flex-1) + MoreVertical
+          gap-spacing-md (8 px) between [star+label wrapper] and more-vertical (Figma) */}
+      <div className="flex items-start gap-spacing-md w-full">
+        {/* gap-spacing-md (8 px) between star icon and label (Figma) */}
+        <div className="flex items-center gap-spacing-md flex-1 min-w-0">
+          <div className={cn(STAR_WRAPPER, starColor)}>
+            <StarIcon className="w-full h-full" />
+          </div>
+          <p className={cn(LABEL, 'flex-1 min-w-0')}>{label}</p>
+        </div>
+        <MoreBtn onClick={onMoreOptions} />
+      </div>
+
+      {/* Content col: value + trend — gap-spacing-md (8 px) between them (Figma) */}
+      <div className={cn('flex items-end gap-spacing-2xl w-full', isCompactGraph && 'flex-1')}>
+        <div className="flex-1 min-w-0 flex flex-col gap-spacing-md">
+          {/* Value */}
+          <p className={VALUE}>{value}</p>
+
+          {/*
+           * Trend text is on its own line for "Icon Left + Text" (Figma pattern).
+           * Badge is shown inline in the numbers row for consistency.
+           */}
+          {trend === 'Text' && (
+            <TrendText value={trendValue} label={trendLabel} type="Icon Left + Text" />
+          )}
+          {trend === 'Badge' && <TrendBadge value={trendValue} />}
+        </div>
+
+        {isCompactGraph && (
+          <Sparkline type="Wavy" trend={chartTrend} className="shrink-0" />
+        )}
+      </div>
+
+      {/* Full-width large chart */}
+      {isLarge && (
+        <Sparkline type="Wavy" trend={chartTrend} className="w-full h-[64px]" />
+      )}
+    </>
+  );
+}
+
+// ─── Action bar content ───────────────────────────────────────────────────────
+
+/**
+ * Content rendered inside the Header top-bar or Footer bottom-bar.
+ *
+ * Header bar → "View report" text link (right-aligned, no left content).
+ * Footer bar → same text link OR alert-circle + outlined button when there's a graph.
+ *
+ * Uses the design system `Button` component for all interactive elements.
+ */
+function ActionBarContent({
+  type,
+  graph,
+  actionLabel,
+  onAction,
+}: {
+  type: MetricType;
+  graph: string;
+  actionLabel: string;
+  onAction?: () => void;
+}) {
+  // With no graph: plain transparent text link (green or purple)
+  if (graph === 'None') {
+    const isPurple = type === 'Icon Left + Text';
+    return (
+      <>
+        <span />
+        <Button
+          variant="transparent"
+          size="sm"
+          onClick={onAction}
+          // Override the default dark text with the accent colour; px-0 removes
+          // horizontal padding so it looks like a pure text link (Figma pattern).
+          className={cn(
+            'px-0',
+            isPurple
+              ? 'text-[rgba(128,81,159,1)] hover:text-[rgba(100,60,130,1)]'
+              : 'text-[rgba(27,131,84,1)] hover:text-[rgba(22,106,69,1)]',
+          )}
+        >
+          {actionLabel}
+        </Button>
+      </>
+    );
+  }
+
+  // With a graph: outlined secondary-outline button with alert-circle leading icon
+  return (
+    <>
+      <span />
+      <Button
+        variant="secondary-outline"
+        size="sm"
+        onClick={onAction}
+        leadingIcon={<AlertCircleIcon />}
+      >
+        {actionLabel}
+      </Button>
+    </>
+  );
+}
+
+// ─── Metric ───────────────────────────────────────────────────────────────────
+
+export const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(
+  {
+    action = 'Default',
+    type = 'Compact',
+    trend = 'None',
+    graph = 'None',
+    chartTrend = 'Positive',
+    label = 'View 24 hours',
+    value = '2,000',
+    trendValue = '100%',
+    trendLabel = 'vs last month',
+    actionLabel = 'View report',
+    onAction,
+    onMoreOptions,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const hasHeader = action === 'Header';
+  const hasFooter = action === 'Footer';
+  const contentPadding = CONTENT_PADDING[action] ?? CONTENT_PADDING.Default;
+  // Per-type outer gap between sections inside the card (verified from Figma):
+  //   Compact: spacing-lg (12 px)  |  Icon types: spacing-2xl (20 px)
+  const contentGap = CONTENT_GAP[type] ?? CONTENT_GAP.Compact;
+
+  // Shared body props
+  const bodyProps = {
+    label,
+    value,
+    trend,
+    trendValue,
+    trendLabel,
+    graph,
+    chartTrend,
+    onMoreOptions,
+  };
+
+  return (
+    <div
+      ref={ref}
+      data-slot="metric"
+      data-action={action}
+      data-type={type}
+      data-trend={trend}
+      data-graph={graph}
+      className={cn(CARD, className)}
+      {...rest}
+    >
+      {/* ── Header top-bar ────────────────────────────────────────────────── */}
+      {hasHeader && (
+        <div className={HEADER_BAR}>
+          <ActionBarContent
+
+            type={type}
+            graph={graph}
+            actionLabel={actionLabel}
+            onAction={onAction}
+          />
+        </div>
+      )}
+
+      {/* ── Main content area ─────────────────────────────────────────────── */}
+      <div className={cn(contentPadding, 'flex flex-col', contentGap, 'w-full')}>
+        {type === 'Compact' && <CompactBody {...bodyProps} />}
+        {type === 'Icon Left' && <IconLeftBody {...bodyProps} />}
+        {type === 'Icon Top' && <IconTopBody {...bodyProps} />}
+        {type === 'Icon Left + Text' && <IconLeftTextBody {...bodyProps} />}
+      </div>
+
+      {/* ── Footer bottom-bar ─────────────────────────────────────────────── */}
+      {hasFooter && (
+        <div className={FOOTER_BAR}>
+          <ActionBarContent
+
+            type={type}
+            graph={graph}
+            actionLabel={actionLabel}
+            onAction={onAction}
+          />
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/Metric/Metric.types.ts

@@ -0,0 +1,77 @@
+import type { HTMLAttributes } from 'react';
+import type { SparklineTrend } from '../Sparkline';
+
+export type MetricAction = 'Default' | 'Footer' | 'Header';
+export type MetricType = 'Compact' | 'Icon Left' | 'Icon Top' | 'Icon Left + Text';
+export type MetricTrend = 'None' | 'Badge' | 'Text';
+export type MetricGraph = 'None' | 'Compact' | 'Large';
+
+export interface MetricProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Card action layout.
+   * - Default: no action bar; MoreVertical (⋮) lives in the label row only.
+   * - Header:  "View report" link in a top bar (border-b), content below.
+   * - Footer:  Content at top, then "View report" link / outlined button in a bottom bar (border-t).
+   * @default 'Default'
+   */
+  action?: MetricAction;
+
+  /**
+   * Icon and layout variant.
+   * - Compact:          No icon. Label row + value row.
+   * - Icon Left:        40 px star to the start; label + value stacked in the adjacent column.
+   * - Icon Top:         40 px star alone in the heading row; label then value below.
+   * - Icon Left + Text: Star + label share the heading row; value + trend below.
+   * @default 'Compact'
+   */
+  type?: MetricType;
+
+  /**
+   * Trend indicator variant shown next to (or below) the value.
+   * - None:  No indicator.
+   * - Badge: Bordered pill with a green dot and `trendValue` text (e.g. "100%").
+   * - Text:  Coloured `trendValue` followed by muted `trendLabel` (e.g. "100% vs last month").
+   * @default 'None'
+   */
+  trend?: MetricTrend;
+
+  /**
+   * Sparkline graph variant.
+   * - None:    No chart.
+   * - Compact: Fixed 128×64 px sparkline aligned to the end of the value row.
+   * - Large:   Full-width sparkline below the content.
+   * @default 'None'
+   */
+  graph?: MetricGraph;
+
+  /** Trend direction for the embedded sparkline. @default 'Positive' */
+  chartTrend?: SparklineTrend;
+
+  /** Metric label / title text. */
+  label?: string;
+
+  /** Main metric value (e.g. "2,000"). */
+  value?: string;
+
+  /**
+   * Percentage or indicator value used by both `trend="Badge"` and `trend="Text"`.
+   * - Badge: shown as the text inside the pill (e.g. "100%").
+   * - Text:  shown in accent colour before `trendLabel` (e.g. "100%").
+   */
+  trendValue?: string;
+
+  /**
+   * Secondary label appended after `trendValue` when `trend="Text"`.
+   * (e.g. "vs last month")
+   */
+  trendLabel?: string;
+
+  /** Action button label shown in header / footer bars. @default "View report" */
+  actionLabel?: string;
+
+  /** Called when the action button is clicked. */
+  onAction?: () => void;
+
+  /** Called when the MoreVertical (⋮) icon is clicked. */
+  onMoreOptions?: () => void;
+}