@mich8060/unified-design-system 0.1.10

package/src/ui/Status/Status.stories.jsx

@@ -0,0 +1,14 @@
+import Status from "./Status";
+
+export default {
+  title: "Components/Status",
+  component: Status,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Status/Status.stories.tsx

@@ -0,0 +1,14 @@
+import Status from "./Status.jsx";
+
+export default {
+  title: "Components/Status",
+  component: Status,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Status/Status.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Status/Status.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyStatus from "./Status.jsx";
+
+const Status = LegacyStatus as ComponentType<any>;
+
+export default Status;

package/src/ui/Status/Status.types.ts

@@ -0,0 +1,3 @@
+export interface StatusProps {
+  className?: string;
+}

package/src/ui/Status/index.js

@@ -0,0 +1 @@
+export { default } from "./Status";

package/src/ui/Steps/Steps.ai.md

@@ -0,0 +1,56 @@
+# Steps
+
+Step indicator for multi-step workflows and wizards.
+
+## When to Use
+- Multi-step forms (registration, checkout, onboarding)
+- Wizards and guided processes
+- Progress indicators for sequential tasks
+
+## Props
+
+### Steps (container)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `currentStep` | `number` | `0` | Zero-based index of current step |
+| `children` | `ReactNode` | — | `Step` components |
+| `className` | `string` | `""` | Additional CSS classes |
+
+### Step
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Step label |
+| `description` | `string` | — | Optional sub-description |
+
+## Examples
+
+```jsx
+<Steps currentStep={1}>
+  <Step label="Account" description="Create your account" />
+  <Step label="Profile" description="Set up your profile" />
+  <Step label="Preferences" description="Choose your settings" />
+  <Step label="Review" description="Confirm details" />
+</Steps>
+```
+
+### With form wizard
+```jsx
+const [step, setStep] = useState(0);
+
+<Steps currentStep={step}>
+  <Step label="Info" />
+  <Step label="Address" />
+  <Step label="Payment" />
+</Steps>
+
+{step === 0 && <InfoForm onNext={() => setStep(1)} />}
+{step === 1 && <AddressForm onBack={() => setStep(0)} onNext={() => setStep(2)} />}
+{step === 2 && <PaymentForm onBack={() => setStep(1)} onSubmit={handleSubmit} />}
+```
+
+## Import
+```jsx
+import { Steps, Step } from "@mich8060/chg-design-system";
+```

package/src/ui/Steps/Steps.jsx

@@ -0,0 +1,201 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import "./Steps.scss";
+
+const BASE_CLASS = "uds-steps";
+
+const orientationClassMap = {
+  horizontal: "horizontal",
+  vertical: "vertical",
+};
+
+const statusClassMap = {
+  complete: "complete",
+  active: "active",
+  incomplete: "incomplete",
+  disabled: "disabled",
+  error: "error",
+  warning: "warning",
+};
+
+const sizeClassMap = {
+  default: "default",
+  compact: "compact",
+};
+
+/**
+ * Steps component for displaying multi-step processes
+ * @param {array} steps - Array of step objects. Each step should have: { label, optionalLabel, status }
+ * @param {string} orientation - Orientation: 'horizontal' or 'vertical'
+ * @param {string} size - Size variant: 'default' or 'compact'
+ * @param {boolean} displayLabel - Whether to display labels
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the steps container
+ */
+export default function Steps({
+  steps = [],
+  orientation = "horizontal",
+  size = "default",
+  displayLabel = true,
+  className = "",
+  ...props
+}) {
+  if (!steps || steps.length === 0) {
+    return null;
+  }
+
+  const classNames = [
+    BASE_CLASS,
+    orientationClassMap[orientation] &&
+      `${BASE_CLASS}--${orientationClassMap[orientation]}`,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const getStepPosition = (index, total) => {
+    if (index === 0) return "start";
+    if (index === total - 1) return "end";
+    return "middle";
+  };
+
+  const getStepStatus = (step) => {
+    return step.status || "incomplete";
+  };
+
+  const shouldShowConnector = (index, total) => {
+    return index < total - 1;
+  };
+
+  const isStepComplete = (stepStatus) => {
+    return stepStatus === "complete";
+  };
+
+  const isStepActive = (stepStatus) => {
+    return stepStatus === "active";
+  };
+
+  const isStepIncomplete = (stepStatus) => {
+    return stepStatus === "incomplete";
+  };
+
+  const isStepError = (stepStatus) => {
+    return stepStatus === "error";
+  };
+
+  const isStepWarning = (stepStatus) => {
+    return stepStatus === "warning";
+  };
+
+  const isStepDisabled = (stepStatus) => {
+    return stepStatus === "disabled";
+  };
+
+  const getConnectorStatus = (currentStepStatus, nextStepStatus) => {
+    // Connector is active if current step is complete or active
+    if (isStepComplete(currentStepStatus) || isStepActive(currentStepStatus)) {
+      return "active";
+    }
+    return "inactive";
+  };
+
+  return (
+    <div className={classNames} {...props}>
+      {steps.map((step, index) => {
+        const stepStatus = getStepStatus(step);
+        const stepPosition = getStepPosition(index, steps.length);
+        const showConnector = shouldShowConnector(index, steps.length);
+        const connectorStatus = showConnector
+          ? getConnectorStatus(stepStatus, getStepStatus(steps[index + 1]))
+          : null;
+
+        const stepClassNames = [
+          `${BASE_CLASS}__step`,
+          statusClassMap[stepStatus] &&
+            `${BASE_CLASS}__step--${statusClassMap[stepStatus]}`,
+          `${BASE_CLASS}__step--${stepPosition}`,
+        ]
+          .filter(Boolean)
+          .join(" ");
+
+        return (
+          <React.Fragment key={index}>
+            <div className={stepClassNames}>
+              <div className={`${BASE_CLASS}__indicator`}>
+                {isStepComplete(stepStatus) && (
+                  <div
+                    className={`${BASE_CLASS}__indicator-circle ${BASE_CLASS}__indicator-circle--complete`}
+                  >
+                    <Icon
+                      name="Check"
+                      size={12}
+                      appearance="bold"
+                      className={`${BASE_CLASS}__check-icon`}
+                    />
+                  </div>
+                )}
+                {isStepActive(stepStatus) && (
+                  <div
+                    className={`${BASE_CLASS}__indicator-circle ${BASE_CLASS}__indicator-circle--active`}
+                  />
+                )}
+                {isStepIncomplete(stepStatus) && (
+                  <div
+                    className={`${BASE_CLASS}__indicator-circle ${BASE_CLASS}__indicator-circle--incomplete`}
+                  />
+                )}
+                {isStepError(stepStatus) && (
+                  <div
+                    className={`${BASE_CLASS}__indicator-circle ${BASE_CLASS}__indicator-circle--error`}
+                  >
+                    <Icon
+                      name="X"
+                      size={12}
+                      appearance="bold"
+                      className={`${BASE_CLASS}__error-icon`}
+                    />
+                  </div>
+                )}
+                {isStepWarning(stepStatus) && (
+                  <div
+                    className={`${BASE_CLASS}__indicator-circle ${BASE_CLASS}__indicator-circle--warning`}
+                  >
+                    <Icon
+                      name="WarningCircle"
+                      size={12}
+                      appearance="bold"
+                      className={`${BASE_CLASS}__warning-icon`}
+                    />
+                  </div>
+                )}
+                {isStepDisabled(stepStatus) && (
+                  <div
+                    className={`${BASE_CLASS}__indicator-circle ${BASE_CLASS}__indicator-circle--disabled`}
+                  />
+                )}
+              </div>
+              {displayLabel && (
+                <div className={`${BASE_CLASS}__label-container`}>
+                  {step.label && (
+                    <span className={`${BASE_CLASS}__label`}>{step.label}</span>
+                  )}
+                  {step.optionalLabel && (
+                    <span className={`${BASE_CLASS}__optional-label`}>
+                      {step.optionalLabel}
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+            {showConnector && (
+              <div
+                className={`${BASE_CLASS}__connector ${BASE_CLASS}__connector--${connectorStatus}`}
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/Steps/Steps.scss

@@ -0,0 +1,240 @@
+@use "../../styles/typography" as *;
+
+.uds-steps {
+  display: flex;
+  width: 100%;
+
+  // Horizontal orientation
+  &--horizontal {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  // Vertical orientation
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &__step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1 0 0;
+    position: relative;
+  }
+
+  // Horizontal step layout
+  &--horizontal &__step {
+    min-width: 0;
+  }
+
+  // Vertical step layout
+  &--vertical &__step {
+    flex-direction: row;
+    align-items: flex-start;
+    width: 100%;
+    flex: 0 0 auto;
+  }
+
+  &__indicator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    z-index: 2;
+  }
+
+  &__indicator-circle {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-shrink: 0;
+
+    &--complete {
+      background-color: var(--uds-surface-brand-primary, #009add);
+      border: none;
+    }
+
+    &--active {
+      background-color: transparent;
+      border: var(--uds-border-width-2) solid
+        var(--uds-border-brand-primary, #009add);
+    }
+
+    &--incomplete {
+      background-color: transparent;
+      border: var(--uds-border-width-2) solid var(--uds-border-primary);
+    }
+
+    &--error {
+      background-color: #ef4444;
+      border: none;
+    }
+
+    &--warning {
+      background-color: #f97316;
+      border: none;
+    }
+
+    &--disabled {
+      background-color: transparent;
+      border: var(--uds-border-width-2) solid var(--uds-border-primary);
+      opacity: 0.5;
+    }
+  }
+
+  &__check-icon,
+  &__error-icon,
+  &__warning-icon {
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__connector {
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  // Horizontal connector
+  &--horizontal &__connector {
+    flex: 1 0 0;
+    height: 18px;
+    min-width: 0;
+    margin-top: 9px;
+    transform: translateY(-50%);
+  }
+
+  &--horizontal &__connector--active {
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: var(--uds-surface-brand-primary, #009add);
+      transform: translateY(-50%);
+    }
+  }
+
+  &--horizontal &__connector--inactive {
+    &::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: var(--uds-border-primary);
+      transform: translateY(-50%);
+    }
+  }
+
+  // Vertical connector
+  &--vertical &__connector {
+    width: 18px;
+    flex: 0 0 auto;
+    margin-left: 9px;
+    transform: translateX(-50%);
+  }
+
+  &--vertical &__connector--active {
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background-color: var(--uds-surface-brand-primary, #009add);
+      transform: translateX(-50%);
+    }
+  }
+
+  &--vertical &__connector--inactive {
+    &::before {
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background-color: var(--uds-border-primary);
+      transform: translateX(-50%);
+    }
+  }
+
+  &__label-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-top: var(--uds-gap-8);
+    gap: var(--uds-gap-4);
+  }
+
+  // Vertical label container
+  &--vertical &__label-container {
+    margin-top: 0;
+    margin-left: var(--uds-gap-12);
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  &__label {
+    @include uds-body-16-medium;
+    color: var(--uds-text-primary);
+    white-space: nowrap;
+  }
+
+  &__optional-label {
+    @include uds-body-12;
+    color: var(--uds-text-tertiary, #6b7380);
+    white-space: nowrap;
+  }
+
+  // Compact size
+  &--compact {
+    .uds-steps__indicator-circle {
+      width: 12px;
+      height: 12px;
+    }
+
+    .uds-steps__check-icon,
+    .uds-steps__error-icon,
+    .uds-steps__warning-icon {
+      width: 8px;
+      height: 8px;
+    }
+
+    .uds-steps__label-container {
+      margin-top: var(--uds-gap-4);
+    }
+
+    &--vertical .uds-steps__label-container {
+      margin-top: 0;
+    }
+  }
+
+  // Disabled step
+  &__step--disabled {
+    .uds-steps__label {
+      color: var(--uds-text-secondary);
+    }
+
+    .uds-steps__optional-label {
+      color: var(--uds-text-tertiary);
+      opacity: 0.6;
+    }
+  }
+}

package/src/ui/Steps/Steps.spec.ts

@@ -0,0 +1,12 @@
+export const STEPS_DEFAULTS = {
+  className: "",
+} as const;
+
+export const STEPS_STORY_SPEC = {
+  defaults: {
+    className: STEPS_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Steps/Steps.stories.jsx

@@ -0,0 +1,14 @@
+import Steps from "./Steps";
+
+export default {
+  title: "Components/Steps",
+  component: Steps,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Steps/Steps.stories.tsx

@@ -0,0 +1,14 @@
+import Steps from "./Steps.jsx";
+
+export default {
+  title: "Components/Steps",
+  component: Steps,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Steps/Steps.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Steps/Steps.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacySteps from "./Steps.jsx";
+
+const Steps = LegacySteps as ComponentType<any>;
+
+export default Steps;

package/src/ui/Steps/Steps.types.ts

@@ -0,0 +1,3 @@
+export interface StepsProps {
+  className?: string;
+}

package/src/ui/Steps/index.js

@@ -0,0 +1 @@
+export { default } from "./Steps";