@hitachivantara/uikit-react-lab/dist/esm/StepNavigation/DefaultNavigation/Step/Step.js

Contributed React components for the NEXT UI Kit.

import { jsx } from "react/jsx-runtime";
import { HvButtonBase, HvAvatar } from "@hitachivantara/uikit-react-core";
import { Level0Good, Level3Bad, HourGlass } from "@hitachivantara/uikit-react-icons";
import { getColor, getSemantic } from "../utils.js";
import { useClasses } from "./Step.styles.js";
const iconSizeObject = {
  xs: "XS",
  sm: "XS",
  md: "S",
  lg: "M",
  xl: "M"
};
const stateObject = {
  Pending: 16,
  Failed: 24,
  Completed: 24
};
const iconStateObject = {
  Pending: HourGlass,
  Failed: Level3Bad,
  Completed: Level0Good
};
const HvStep = ({
  className,
  classes: classesProp,
  state,
  title,
  onClick,
  disabled,
  size = "md",
  number = 1
}) => {
  const { classes, cx } = useClasses(classesProp);
  const iconSize = iconSizeObject[size];
  const squareL = stateObject[state];
  const svgSize = {
    xs: squareL - 8,
    sm: squareL,
    md: squareL + 8,
    lg: squareL + 16,
    xl: squareL + 24
  }[size];
  const backgroundColor = getColor(state);
  const color = state === "Pending" ? "bgPage" : getSemantic(state);
  const status = state === "Current" ? "textDisabled" : void 0;
  const IconComponent = iconStateObject[state];
  return /* @__PURE__ */ jsx(
    HvButtonBase,
    {
      className: cx(classes.root, className, {
        [classes.notCurrent]: state !== "Current"
      }),
      "aria-label": title,
      disabled: disabled ?? ["Current", "Disabled"].includes(state),
      onClick,
      children: /* @__PURE__ */ jsx(
        HvAvatar,
        {
          className: cx(classes.avatar, classes[size]),
          backgroundColor,
          status,
          size,
          children: IconComponent ? /* @__PURE__ */ jsx(
            IconComponent,
            {
              color,
              style: { fontSize: svgSize },
              size: iconSize
            }
          ) : number
        }
      )
    }
  );
};
export {
  HvStep
};