@kiwicom/orbit-components/es/Wizard/WizardStep.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

"use client";

import * as React from "react";
import cx from "clsx";
import ButtonLink from "../ButtonLink";
import Stack from "../Stack";
import Text from "../Text";
import WizardStepIcon from "./WizardStepIcon";
import { WizardStepContext } from "./WizardContext";
const ProgressBarPart = ({
  isColumn,
  className
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: cx("absolute", isColumn ? "w-50 h-1000 top-[calc(theme(size.icon-small)+1px)] ltr:left-[calc(theme(size.icon-small)+1px)] rtl:right-[calc(theme(size.icon-small)+1px)]" : "h-50 top-[calc(theme(size.icon-small)/2-1px)] w-1/2", className)
  });
};
const WizardStep = ({
  dataTest,
  title,
  onClick,
  isCompleted
}) => {
  const {
    index,
    status,
    isColumnOnDesktop,
    nextStepStatus,
    isCompact,
    isActive,
    onChangeStep,
    onClose,
    isLastStep
  } = React.useContext(WizardStepContext);
  const handleClick = event => {
    if (onClick) onClick(event);
    if (onChangeStep) onChangeStep(index);
    onClose();
  };
  if (isCompact) {
    return /*#__PURE__*/React.createElement("li", {
      className: cx("relative -my-px [&_button]:rounded-none", status === "disabled" && "[&_button]:bg-cloud-light [&_button]:opacity-100"),
      "data-test": dataTest
    }, /*#__PURE__*/React.createElement(ButtonLink, {
      disabled: status === "disabled",
      type: "secondary",
      fullWidth: true,
      iconLeft: /*#__PURE__*/React.createElement(WizardStepIcon, null),
      ariaCurrent: isActive ? "step" : "false",
      onClick: handleClick
    }, status === "disabled" ? /*#__PURE__*/React.createElement(Text, {
      as: "span",
      type: "secondary"
    }, title) : title), isActive && /*#__PURE__*/React.createElement("div", {
      className: "w-50 bg-product-normal rounded-e-100 absolute inset-y-px ltr:left-0 rtl:right-0"
    }), status !== "disabled" && /*#__PURE__*/React.createElement("div", {
      className: "border-cloud-normal ms-1000 absolute inset-x-0 bottom-0 border-t border-solid"
    }));
  }
  const step = /*#__PURE__*/React.createElement(Stack, {
    flex: true,
    direction: isColumnOnDesktop ? "row" : "column",
    align: isColumnOnDesktop ? "start" : "center",
    spacing: "200",
    spaceAfter: isColumnOnDesktop ? "large" : "none"
  }, /*#__PURE__*/React.createElement(WizardStepIcon, {
    isCompleted: isCompleted
  }), /*#__PURE__*/React.createElement("div", {
    className: "px-200"
  }, status === "disabled" ? /*#__PURE__*/React.createElement(Text, {
    as: "div",
    type: "secondary",
    size: "small",
    align: "center"
  }, title) : /*#__PURE__*/React.createElement("div", {
    className: cx("block [&_span]:block", !isActive && "group-hover/button:[&_span]:text-primary-foreground group-focus/button:[&_span]:text-primary-foreground group-hover/button:[&_span]:underline group-focus/button:[&_span]:underline")
  }, /*#__PURE__*/React.createElement(Text, {
    as: "span",
    size: "small",
    align: "center",
    type: isActive ? "primary" : "secondary",
    weight: isActive ? "medium" : "normal"
  }, title))));
  return /*#__PURE__*/React.createElement("li", {
    className: "group/container relative -my-px flex-1",
    "data-test": dataTest
  }, /*#__PURE__*/React.createElement("div", {
    className: "relative"
  }, /*#__PURE__*/React.createElement(ProgressBarPart, {
    isColumn: isColumnOnDesktop,
    className: cx(isColumnOnDesktop ? "hidden" : "ltr:left-0 rtl:right-0", status === "disabled" ? "bg-cloud-normal-hover" : "bg-product-normal")
  }), /*#__PURE__*/React.createElement(ProgressBarPart, {
    isColumn: isColumnOnDesktop,
    className: cx(!isColumnOnDesktop && "ltr:right-0 rtl:left-0", isColumnOnDesktop && isLastStep && "hidden", status === "disabled" || nextStepStatus === "disabled" ? "bg-cloud-normal-hover" : "bg-product-normal")
  })), /*#__PURE__*/React.createElement("div", {
    className: "relative"
  }, /*#__PURE__*/React.createElement(Stack, {
    flex: true,
    direction: "column",
    align: isColumnOnDesktop ? "start" : "center"
  }, status === "disabled" ? /*#__PURE__*/React.createElement("span", {
    className: "px-200"
  }, step) : /*#__PURE__*/React.createElement("div", {
    className: "group/button px-200 cursor-pointer",
    role: "button",
    tabIndex: 0,
    "aria-current": isActive ? "step" : "false",
    onClick: event => {
      event.currentTarget.blur();
      handleClick(event);
    }
    // keep focus for people who are navigating with the keyboard
    ,
    onKeyDown: event => {
      if (event.key === "Enter") {
        handleClick(event);
      }
    }
  }, step))));
};
export default WizardStep;