banhaten 0.1.3 → 0.3.0

package/registry/components/expanded/Steps.tsx

@@ -25,6 +25,34 @@ export type StepsProps = {
   items?: StepItem[];
 };
 
+export type ProgressStepState = "complete" | "active" | "todo";
+
+export type ProgressStep = {
+  label?: ReactNode;
+  marker?: ReactNode;
+  state?: ProgressStepState;
+};
+
+export type ProgressStepsClassNames = {
+  connector?: string;
+  item?: string;
+  label?: string;
+  marker?: string;
+  segment?: string;
+  track?: string;
+};
+
+export type ProgressStepsProps = {
+  activeIndex?: number;
+  ariaLabel: string;
+  className?: string;
+  classNames?: ProgressStepsClassNames;
+  dir?: "ltr" | "rtl";
+  items: ProgressStep[];
+  label?: ReactNode;
+  variant?: "bars" | "markers";
+};
+
 export type HorizontalStepItemProps = {
   alignment?: StepAlignment;
   caption?: ReactNode;
@@ -61,18 +89,17 @@ export type VerticalStepItemProps = {
 export function Steps({
   alignment = "leading",
   className = "",
-  dir = "ltr",
+  dir,
   direction = "horizontal",
   indicator = "icon",
   items,
 }: StepsProps) {
-  const rtl = dir === "rtl";
   const stepItems = items ?? [];
 
   if (direction === "vertical") {
     return (
       <div
-        className={["ds-steps", "ds-steps--vertical", rtl ? "ds-steps--rtl" : "ds-steps--ltr", className]
+        className={["ds-steps", "ds-steps--vertical", className]
           .filter(Boolean)
           .join(" ")}
         dir={dir}
@@ -102,7 +129,7 @@ export function Steps({
 
   return (
     <div
-      className={["ds-steps", "ds-steps--horizontal", rtl ? "ds-steps--rtl" : "ds-steps--ltr", className]
+      className={["ds-steps", "ds-steps--horizontal", className]
         .filter(Boolean)
         .join(" ")}
       dir={dir}
@@ -122,6 +149,122 @@ export function Steps({
   );
 }
 
+export function ProgressSteps({
+  activeIndex = 0,
+  ariaLabel,
+  className = "",
+  classNames = {},
+  dir,
+  items,
+  label,
+  variant = "markers",
+}: ProgressStepsProps) {
+  const rootClassName = [
+    "ds-progress-steps",
+    `ds-progress-steps--${variant}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (variant === "bars") {
+    return (
+      <div
+        aria-label={ariaLabel}
+        aria-valuemax={items.length}
+        aria-valuemin={1}
+        aria-valuenow={Math.min(activeIndex + 1, items.length)}
+        className={rootClassName}
+        dir={dir}
+        role="progressbar"
+      >
+        {label ? <span data-slot="progress-steps-label">{label}</span> : null}
+        <div
+          aria-hidden="true"
+          className={["ds-progress-steps__track", classNames.track]
+            .filter(Boolean)
+            .join(" ")}
+          data-slot="progress-steps-track"
+        >
+          {items.map((item, index) => (
+            <span
+              className={["ds-progress-steps__segment", classNames.segment]
+                .filter(Boolean)
+                .join(" ")}
+              data-active={index <= activeIndex ? "true" : "false"}
+              data-slot="progress-steps-segment"
+              data-state={item.state ?? (index < activeIndex ? "complete" : index === activeIndex ? "active" : "todo")}
+              key={index}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ol aria-label={ariaLabel} className={rootClassName} dir={dir}>
+      {items.map((item, index) => {
+        const state =
+          item.state ??
+          (index < activeIndex
+            ? "complete"
+            : index === activeIndex
+              ? "active"
+              : "todo");
+
+        return (
+          <li
+            className={[
+              "ds-progress-steps__item",
+              `is-${state}`,
+              classNames.item,
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            data-slot="progress-steps-item"
+            data-state={state}
+            key={index}
+          >
+            <span
+              aria-hidden="true"
+              className={["ds-progress-steps__marker", classNames.marker]
+                .filter(Boolean)
+                .join(" ")}
+              data-slot="progress-steps-marker"
+            >
+              {item.marker ?? index + 1}
+            </span>
+            {item.label ? (
+              <span
+                className={["ds-progress-steps__label", classNames.label]
+                  .filter(Boolean)
+                  .join(" ")}
+                data-slot="progress-steps-item-label"
+              >
+                {item.label}
+              </span>
+            ) : null}
+            {index < items.length - 1 ? (
+              <span
+                aria-hidden="true"
+                className={[
+                  "ds-progress-steps__connector",
+                  state === "complete" && "is-complete",
+                  classNames.connector,
+                ]
+                  .filter(Boolean)
+                  .join(" ")}
+                data-slot="progress-steps-connector"
+              />
+            ) : null}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
 export function HorizontalStepItem({
   alignment = "leading",
   caption,
@@ -131,11 +274,10 @@ export function HorizontalStepItem({
   label,
   number = 1,
   position = "top",
-  dir = "ltr",
+  dir,
   showLeadingLine = true,
   showTrailingLine = true,
 }: HorizontalStepItemProps) {
-  const rtl = dir === "rtl";
   const linePlacement = getHorizontalLinePlacement(alignment, showLeadingLine, showTrailingLine);
   const text = (
     <div className="ds-horizontal-step-item__text">
@@ -157,7 +299,6 @@ export function HorizontalStepItem({
         "ds-horizontal-step-item",
         `ds-horizontal-step-item--${alignment}`,
         `ds-horizontal-step-item--${position}`,
-        rtl ? "ds-horizontal-step-item--rtl" : "ds-horizontal-step-item--ltr",
         className,
       ]
         .filter(Boolean)
@@ -183,13 +324,12 @@ export function VerticalStepItem({
   indicator = "icon",
   label,
   number = 1,
-  dir = "ltr",
+  dir,
   showBottomPadding = true,
   showLine = true,
   slotContent,
   supportText,
 }: VerticalStepItemProps & { children?: ReactNode }) {
-  const rtl = dir === "rtl";
   const marker = (
     <div className="ds-vertical-step-item__rail" aria-hidden="true">
       <StepMarker indicator={indicator} number={number} />
@@ -205,7 +345,6 @@ export function VerticalStepItem({
       className={[
         "ds-vertical-step-item",
         `ds-vertical-step-item--${alignment}`,
-        rtl ? "ds-vertical-step-item--rtl" : "ds-vertical-step-item--ltr",
         className,
       ]
         .filter(Boolean)
@@ -216,9 +355,8 @@ export function VerticalStepItem({
       <div className="ds-vertical-step-item__content">
         <div className="ds-vertical-step-item__copy">
           <div className="ds-vertical-step-item__header">
-            {rtl && hasSupportText && supportText && <div className="ds-vertical-step-item__support">{supportText}</div>}
             {label && <div className="ds-vertical-step-item__label">{label}</div>}
-            {!rtl && hasSupportText && supportText && <div className="ds-vertical-step-item__support">{supportText}</div>}
+            {hasSupportText && supportText && <div className="ds-vertical-step-item__support">{supportText}</div>}
           </div>
           {hasCaption && caption && <div className="ds-vertical-step-item__caption">{caption}</div>}
         </div>
@@ -242,7 +380,7 @@ function StepMarker({ indicator, number }: { indicator: StepIndicator; number: R
 
   return (
     <span className="ds-step-marker ds-step-marker--icon">
-      <CheckIcon aria-hidden="true" focusable="false" strokeWidth={3} />
+      <CheckIcon aria-hidden="true" focusable="false" strokeWidth="var(--bh-icon-stroke-300)" />
     </span>
   );
 }