@ubie/vitals-ui-consumer 0.0.1

package/src/components/Stepper/Stepper.spec.tsx

@@ -0,0 +1,198 @@
+import { render, screen } from "@testing-library/react";
+import { Stepper } from "./Stepper";
+import { StepperItem } from "./StepperItem";
+
+describe("<Stepper>", () => {
+  it("renders steps correctly", () => {
+    render(
+      <Stepper
+        data-testid="stepper"
+        steps={[{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }]}
+      />,
+    );
+
+    expect(screen.getByTestId("stepper")).toBeInTheDocument();
+    expect(screen.getByText("Step 1")).toBeInTheDocument();
+    expect(screen.getByText("Step 2")).toBeInTheDocument();
+    expect(screen.getByText("Step 3")).toBeInTheDocument();
+  });
+
+  it("applies correct status based on currentStep", () => {
+    render(
+      <Stepper
+        currentStep={1}
+        steps={[{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }]}
+      />,
+    );
+
+    const step0 = screen.getByText("Step 1").closest('[class*="stepperItem"]');
+    const step1 = screen.getByText("Step 2").closest('[class*="stepperItem"]');
+    const step2 = screen.getByText("Step 3").closest('[class*="stepperItem"]');
+
+    // Step 0 should be done (index < currentStep)
+    expect(step0?.className).toMatch(/done/);
+    // Step 1 should be current (index === currentStep)
+    expect(step1?.className).toMatch(/current/);
+    // Step 2 should be undone (index > currentStep)
+    expect(step2?.className).toMatch(/undone/);
+  });
+
+  it("sets first and last child properties correctly", () => {
+    render(<Stepper steps={[{ label: "First" }, { label: "Middle" }, { label: "Last" }]} />);
+
+    const first = screen.getByText("First").closest('[class*="stepperItem"]');
+    const middle = screen.getByText("Middle").closest('[class*="stepperItem"]');
+    const last = screen.getByText("Last").closest('[class*="stepperItem"]');
+
+    // First item should hide left border line
+    const firstLeftBorderLine = first?.querySelector('[class*="leftBorder"] [class*="border"]');
+    const firstRightBorderLine = first?.querySelector('[class*="rightBorder"] [class*="border"]');
+    expect(firstLeftBorderLine?.className).toMatch(/hidden/);
+    expect(firstRightBorderLine?.className).not.toMatch(/hidden/);
+
+    // Middle item should show both border lines
+    const middleLeftBorderLine = middle?.querySelector('[class*="leftBorder"] [class*="border"]');
+    const middleRightBorderLine = middle?.querySelector('[class*="rightBorder"] [class*="border"]');
+    expect(middleLeftBorderLine?.className).not.toMatch(/hidden/);
+    expect(middleRightBorderLine?.className).not.toMatch(/hidden/);
+
+    // Last item should hide right border line
+    const lastLeftBorderLine = last?.querySelector('[class*="leftBorder"] [class*="border"]');
+    const lastRightBorderLine = last?.querySelector('[class*="rightBorder"] [class*="border"]');
+    expect(lastLeftBorderLine?.className).not.toMatch(/hidden/);
+    expect(lastRightBorderLine?.className).toMatch(/hidden/);
+  });
+
+  it("has all margins through m prop", () => {
+    render(
+      <Stepper m="xxs" data-testid="stepper" steps={[{ label: "Step 1" }, { label: "Step 2" }]} />,
+    );
+    const stepper = screen.getByTestId("stepper");
+
+    expect(stepper).toHaveStyle("--margin-top: var(--size-spacing-xxs)");
+    expect(stepper).toHaveStyle("--margin-right: var(--size-spacing-xxs)");
+    expect(stepper).toHaveStyle("--margin-bottom: var(--size-spacing-xxs)");
+    expect(stepper).toHaveStyle("--margin-left: var(--size-spacing-xxs)");
+  });
+
+  it("defaults to currentStep 0 when not specified", () => {
+    render(<Stepper steps={[{ label: "Step 1" }, { label: "Step 2" }]} />);
+
+    const step0 = screen.getByText("Step 1").closest('[class*="stepperItem"]');
+    const step1 = screen.getByText("Step 2").closest('[class*="stepperItem"]');
+
+    expect(step0?.className).toMatch(/current/);
+    expect(step1?.className).toMatch(/undone/);
+  });
+
+  it("applies correct border line colors based on step position", () => {
+    render(
+      <Stepper
+        currentStep={1}
+        steps={[{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }]}
+      />,
+    );
+
+    const step0 = screen.getByText("Step 1").closest('[class*="stepperItem"]');
+    const step1 = screen.getByText("Step 2").closest('[class*="stepperItem"]');
+    const step2 = screen.getByText("Step 3").closest('[class*="stepperItem"]');
+
+    // Step 0 (done): both borders should be blue (left and right of current step)
+    const step0RightBorder = step0?.querySelector('[class*="rightBorder"] [class*="border"]');
+    expect(step0RightBorder?.className).toMatch(/borderColorBlue/);
+
+    // Step 1 (current): left border blue, right border gray
+    const step1LeftBorder = step1?.querySelector('[class*="leftBorder"] [class*="border"]');
+    const step1RightBorder = step1?.querySelector('[class*="rightBorder"] [class*="border"]');
+    expect(step1LeftBorder?.className).toMatch(/borderColorBlue/);
+    expect(step1RightBorder?.className).toMatch(/borderColorGray/);
+
+    // Step 2 (undone): left border gray
+    const step2LeftBorder = step2?.querySelector('[class*="leftBorder"] [class*="border"]');
+    expect(step2LeftBorder?.className).toMatch(/borderColorGray/);
+  });
+
+  it("applies gray border color for lines to the right of current step", () => {
+    render(<Stepper currentStep={0} steps={[{ label: "Step 1" }, { label: "Step 2" }]} />);
+
+    const step0 = screen.getByText("Step 1").closest('[class*="stepperItem"]');
+    const step1 = screen.getByText("Step 2").closest('[class*="stepperItem"]');
+
+    // Step 0 (current): right border should be gray
+    const step0RightBorder = step0?.querySelector('[class*="rightBorder"] [class*="border"]');
+    expect(step0RightBorder?.className).toMatch(/borderColorGray/);
+
+    // Step 1 (undone): left border should be gray
+    const step1LeftBorder = step1?.querySelector('[class*="leftBorder"] [class*="border"]');
+    expect(step1LeftBorder?.className).toMatch(/borderColorGray/);
+  });
+});
+
+describe("<StepperItem>", () => {
+  it("renders label correctly", () => {
+    render(<StepperItem label="Test Step" />);
+    expect(screen.getByText("Test Step")).toBeInTheDocument();
+  });
+
+  it("applies correct CSS classes based on status", () => {
+    const { rerender } = render(<StepperItem label="Test" status="current" data-testid="item" />);
+
+    expect(screen.getByTestId("item").className).toMatch(/current/);
+
+    rerender(<StepperItem label="Test" status="done" data-testid="item" />);
+    expect(screen.getByTestId("item").className).toMatch(/done/);
+
+    rerender(<StepperItem label="Test" status="undone" data-testid="item" />);
+    expect(screen.getByTestId("item").className).toMatch(/undone/);
+  });
+
+  it("renders custom icons when provided in steps", () => {
+    render(
+      <Stepper
+        currentStep={0}
+        steps={[{ label: "Home", icon: "HomeOutlineIcon" }, { label: "Settings" }]}
+      />,
+    );
+
+    // Icon component should be rendered for the first step
+    const step0 = screen.getByText("Home").closest('[class*="stepperItem"]');
+    const iconWrapper = step0?.querySelector('[class*="iconWrapper"]');
+    expect(iconWrapper).toBeInTheDocument();
+  });
+
+  it("uses custom done icon when step is completed", () => {
+    render(
+      <Stepper
+        currentStep={1}
+        steps={[{ label: "Done Step", doneIcon: "CheckAIcon" }, { label: "Current Step" }]}
+      />,
+    );
+
+    const step0 = screen.getByText("Done Step").closest('[class*="stepperItem"]');
+    const iconWrapper = step0?.querySelector('[class*="iconWrapper"]');
+    expect(iconWrapper).toBeInTheDocument();
+  });
+
+  it("hides borders correctly for first and last items", () => {
+    const { rerender } = render(<StepperItem label="Test" isFirst={true} data-testid="item" />);
+
+    const leftBorderLine = screen
+      .getByTestId("item")
+      .querySelector('[class*="leftBorder"] [class*="border"]');
+    const rightBorderLine = screen
+      .getByTestId("item")
+      .querySelector('[class*="rightBorder"] [class*="border"]');
+    expect(leftBorderLine?.className).toMatch(/hidden/);
+    expect(rightBorderLine?.className).not.toMatch(/hidden/);
+
+    rerender(<StepperItem label="Test" isLast={true} data-testid="item" />);
+    const leftBorderLine2 = screen
+      .getByTestId("item")
+      .querySelector('[class*="leftBorder"] [class*="border"]');
+    const rightBorderLine2 = screen
+      .getByTestId("item")
+      .querySelector('[class*="rightBorder"] [class*="border"]');
+    expect(leftBorderLine2?.className).not.toMatch(/hidden/);
+    expect(rightBorderLine2?.className).toMatch(/hidden/);
+  });
+});

package/src/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,192 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ComponentProps } from "react";
+import { Stepper } from "./Stepper";
+
+export default {
+  title: "Navigation/Stepper",
+  component: Stepper,
+  parameters: {
+    docs: {
+      description: {
+        component: "ステップ形式のナビゲーションコンポーネント。進行状況を視覚的に表示します。",
+      },
+    },
+  },
+} satisfies Meta<typeof Stepper>;
+
+type Story = StoryObj<typeof Stepper>;
+
+const defaultArgs = {
+  currentStep: 1,
+} satisfies Partial<ComponentProps<typeof Stepper>>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Stepper
+      {...args}
+      steps={[{ label: "ステップ1" }, { label: "ステップ2" }, { label: "ステップ3" }]}
+    />
+  ),
+  args: defaultArgs,
+};
+
+export const ThreeSteps: Story = {
+  render: () => {
+    const steps = [{ label: "ステップ1" }, { label: "ステップ2" }, { label: "ステップ3" }];
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+        <div>
+          <h2>Current Step: 0</h2>
+          <Stepper currentStep={0} steps={steps} />
+        </div>
+
+        <div>
+          <h2>Current Step: 1</h2>
+          <Stepper currentStep={1} steps={steps} />
+        </div>
+
+        <div>
+          <h2>Current Step: 2</h2>
+          <Stepper currentStep={2} steps={steps} />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const FourSteps: Story = {
+  render: () => (
+    <Stepper
+      currentStep={1}
+      steps={[
+        { label: "知りたいこと" },
+        { label: "受診について" },
+        { label: "他に知りたいこと" },
+        { label: "確認と入力" },
+      ]}
+    />
+  ),
+};
+
+export const FiveSteps: Story = {
+  render: () => (
+    <Stepper
+      currentStep={2}
+      steps={[
+        { label: "ステップ1" },
+        { label: "ステップ2" },
+        { label: "ステップ3" },
+        { label: "ステップ4" },
+        { label: "ステップ5" },
+      ]}
+    />
+  ),
+};
+
+export const LongLabels: Story = {
+  render: () => (
+    <Stepper
+      currentStep={1}
+      steps={[
+        { label: "ステップステップステップステップステップステップ" },
+        { label: "改行\nも\nできます" },
+        {
+          label: "ステップステップステップステップステップステップステップステップステップステップ",
+        },
+      ]}
+    />
+  ),
+};
+
+export const CustomIcons: Story = {
+  render: () => (
+    <Stepper
+      currentStep={1}
+      steps={[
+        { label: "ホーム", icon: "HomeOutlineIcon" },
+        { label: "設定", icon: "SetupIcon" },
+        { label: "完了", icon: "CheckAIcon", doneIcon: "CheckAIcon" },
+      ]}
+    />
+  ),
+};
+
+export const ProgressStates: Story = {
+  render: () => {
+    const steps = [{ label: "ステップ1" }, { label: "ステップ2" }, { label: "ステップ3" }];
+
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+        <div>
+          <h3>Step 0 (開始)</h3>
+          <Stepper currentStep={0} steps={steps} />
+        </div>
+
+        <div>
+          <h3>Step 1 (進行中)</h3>
+          <Stepper currentStep={1} steps={steps} />
+        </div>
+
+        <div>
+          <h3>Step 2 (完了間近)</h3>
+          <Stepper currentStep={2} steps={steps} />
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithMargins: Story = {
+  render: () => (
+    <div style={{ border: "1px dashed #ccc", padding: "16px" }}>
+      <Stepper
+        m="lg"
+        currentStep={1}
+        steps={[{ label: "ステップ1" }, { label: "ステップ2" }, { label: "ステップ3" }]}
+      />
+    </div>
+  ),
+};
+
+export const DifferentWidths: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
+      <div style={{ width: "280px", border: "1px solid #eee", padding: "16px" }}>
+        <h4>幅280px</h4>
+        <Stepper
+          currentStep={1}
+          steps={[{ label: "ステップ" }, { label: "ステップ" }, { label: "ステップ" }]}
+        />
+      </div>
+
+      <div style={{ width: "440px", border: "1px solid #eee", padding: "16px" }}>
+        <h4>幅440px</h4>
+        <Stepper
+          currentStep={1}
+          steps={[
+            { label: "知りたいこと" },
+            { label: "受診について" },
+            { label: "他に知りたいこと" },
+            { label: "確認と入力" },
+          ]}
+        />
+      </div>
+
+      <div style={{ width: "640px", border: "1px solid #eee", padding: "16px" }}>
+        <h4>幅640px</h4>
+        <Stepper
+          currentStep={1}
+          steps={[
+            { label: "ステップステップステップステップステップステップ" },
+            { label: "改行\nも\nできます" },
+            {
+              label:
+                "ステップステップステップステップステップステップステップステップステップステップ",
+            },
+          ]}
+        />
+      </div>
+    </div>
+  ),
+};

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { type CSSProperties } from "react";
+import styles from "./Stepper.module.css";
+import { StepperItem } from "./StepperItem";
+import { marginVariables } from "../../utils/style";
+import type { CustomDataAttributeProps } from "../../types/attributes";
+import type { IconName } from "../../types/icon";
+import type { Spacing } from "../../types/style";
+
+export type StepStatus = "current" | "undone" | "done";
+
+export interface StepData {
+  label: string;
+  icon?: IconName;
+  doneIcon?: IconName;
+}
+
+export interface StepperProps extends CustomDataAttributeProps {
+  steps: StepData[];
+  currentStep?: number;
+  // Margin props
+  m?: Spacing;
+  mx?: Spacing;
+  my?: Spacing;
+  mt?: Spacing;
+  mr?: Spacing;
+  mb?: Spacing;
+  ml?: Spacing;
+}
+
+export const Stepper = ({
+  steps,
+  currentStep = 0,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  ...props
+}: StepperProps) => {
+  const marginStyles = marginVariables({ m, mx, my, mt, mr, mb, ml });
+
+  return (
+    <div className={styles.stepper} style={marginStyles as CSSProperties} {...props}>
+      {steps.map((step, index) => {
+        const status: StepStatus =
+          index < currentStep ? "done" : index === currentStep ? "current" : "undone";
+
+        return (
+          <StepperItem
+            key={index}
+            label={step.label}
+            icon={step.icon}
+            doneIcon={step.doneIcon}
+            status={status}
+            isFirst={index === 0}
+            isLast={index === steps.length - 1}
+            stepIndex={index}
+            currentStep={currentStep}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export type { StepperItemProps } from "./StepperItem";

package/src/components/Stepper/StepperItem.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { clsx } from "clsx";
+import styles from "./Stepper.module.css";
+import { Icon } from "../Icon/Icon";
+import type { StepStatus } from "./Stepper";
+import type { CustomDataAttributeProps } from "../../types/attributes";
+import type { IconName } from "../../types/icon";
+
+export interface StepperItemProps extends CustomDataAttributeProps {
+  label: string;
+  icon?: IconName;
+  doneIcon?: IconName;
+  status?: StepStatus;
+  isFirst?: boolean;
+  isLast?: boolean;
+  stepIndex?: number;
+  currentStep?: number;
+}
+
+export const StepperItem = ({
+  label,
+  icon,
+  doneIcon,
+  status = "undone",
+  isFirst = false,
+  isLast = false,
+  stepIndex = 0,
+  currentStep = 0,
+  ...props
+}: StepperItemProps) => {
+  const renderIcon = () => {
+    // カスタムアイコンが指定されている場合はそれを使用
+    if (status === "done" && doneIcon) {
+      return <Icon icon={doneIcon} />;
+    }
+    if ((status === "current" || status === "undone") && icon) {
+      return <Icon icon={icon} />;
+    }
+
+    // デフォルトの状態に応じた描画
+    if (status === "done") {
+      // 白い丸で囲まれたチェックアイコン
+      return (
+        <div className={styles.doneCircle}>
+          <Icon icon="CheckAIcon" />
+        </div>
+      );
+    }
+
+    if (status === "current") {
+      // 塗りつぶされた青い丸
+      return <div className={styles.currentCircle} />;
+    }
+
+    // undone: グレーの枠の塗りつぶされていない丸
+    return <div className={styles.undoneCircle} />;
+  };
+
+  const itemClass = clsx({
+    [styles.stepperItem]: true,
+    [styles.current]: status === "current",
+    [styles.done]: status === "done",
+    [styles.undone]: status === "undone",
+  });
+
+  const leftBorderClass = clsx({
+    [styles.leftBorder]: true,
+  });
+
+  const rightBorderClass = clsx({
+    [styles.rightBorder]: true,
+  });
+
+  // 左の線: 現在のステップより左（つまり stepIndex <= currentStep）の場合は青
+  const leftBorderLineClass = clsx({
+    [styles.border]: true,
+    [styles.hidden]: isFirst,
+    [styles.borderColorBlue]: !isFirst && stepIndex <= currentStep,
+    [styles.borderColorGray]: !isFirst && stepIndex > currentStep,
+  });
+
+  // 右の線: 現在のステップより左（つまり stepIndex < currentStep）の場合は青
+  const rightBorderLineClass = clsx({
+    [styles.border]: true,
+    [styles.hidden]: isLast,
+    [styles.borderColorBlue]: !isLast && stepIndex < currentStep,
+    [styles.borderColorGray]: !isLast && stepIndex >= currentStep,
+  });
+
+  const labelClass = clsx({
+    [styles.label]: true,
+    [styles.currentLabel]: status === "current",
+    [styles.doneLabel]: status === "done",
+    [styles.undoneLabel]: status === "undone",
+  });
+
+  return (
+    <div className={itemClass} {...props}>
+      <div className={styles.borderLine}>
+        <div className={leftBorderClass}>
+          <div className={leftBorderLineClass} />
+        </div>
+        <div className={styles.iconSpacer} />
+        <div className={rightBorderClass}>
+          <div className={rightBorderLineClass} />
+        </div>
+      </div>
+      <div className={styles.iconWrapper}>{renderIcon()}</div>
+      <div className={labelClass}>{label}</div>
+    </div>
+  );
+};