@navinc/base-react-components/cjs/numeric-flow-steps.js

Nav's Pattern Library

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumericFlowSteps = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("@navinc/utils");
const FlowIcon = styled_components_1.default.div.withConfig({ displayName: "brc-sc-FlowIcon", componentId: "brc-sc-xx9pw5" }) `
  display: inline-flex;
  background-color: ${({ theme }) => theme.scuttleGray400};
  border: 0.15em solid ${({ theme }) => theme.scuttleGray400};
  color: #fff;
  border-radius: 100%;
  aspect-ratio: 1/1;
  height: 1.6em;
  justify-content: center;
  align-items: center;

  &.active {
    border-color: ${({ theme }) => theme.navPrimary400};
    color: ${({ theme }) => theme.navPrimary400};
    background-color: transparent;
  }

  &.complete {
    border-color: ${({ theme }) => theme.navPrimary400};
    color: #fff;
    background-color: ${({ theme }) => theme.navPrimary400};
  }
`;
const StepContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StepContainer", componentId: "brc-sc-1t29zy4" }) `
  width: 100%;
  text-align: center;
  color: ${({ theme }) => theme.scuttleGray400};

  &.complete,
  &.active {
    color: #000;
  }
`;
const Content = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Content", componentId: "brc-sc-qno3zp" }) `
  padding: 1em;
`;
const IconStepContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-IconStepContainer", componentId: "brc-sc-1aq3u07" }) `
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;

  /* before and after elements are the lines connecting the dots. Default to 'incomplete' state */
  &::before,
  &::after {
    flex-grow: 1;
    content: '';
    display: block;
    height: 0.15em;
    background: ${({ theme }) => theme.scuttleGray400};
  }

  &.complete {
    &::before,
    &::after {
      background: ${({ theme }) => theme.navPrimary400};
    }
  }

  &.active::before {
    background: ${({ theme }) => theme.navPrimary400};
  }

  /* hide line instead of removing so that it takes up the same space. This keeps the content centered consistently */
  &.first::before {
    visibility: hidden;
  }

  /* hide line instead of removing so that it takes up the same space. This keeps the content centered consistently */
  &.last::after {
    visibility: hidden;
  }
`;
const StyledStatusBar = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StyledStatusBar", componentId: "brc-sc-1v6yqys" }) `
  display: flex;
  flex-direction: row;
`;
const NumericFlowSteps = ({ currentIndex = 0, steps = [], className }) => {
    return ((0, jsx_runtime_1.jsx)(StyledStatusBar, { className: className, children: steps.map((step, i) => {
            // eslint-disable-next-line no-nested-ternary -- ternary is more readable here
            const state = i === currentIndex ? 'active' : i > currentIndex ? 'incomplete' : 'complete';
            return ((0, jsx_runtime_1.jsxs)(StepContainer, { className: state, children: [(0, jsx_runtime_1.jsx)(IconStepContainer, { className: (0, utils_1.classNames)(state, { first: i === 0, last: i === steps.length - 1 }), children: (0, jsx_runtime_1.jsx)(FlowIcon, { className: state, children: i + 1 }) }), (0, jsx_runtime_1.jsx)(Content, { children: step.content })] }, i));
        }) }));
};
exports.NumericFlowSteps = NumericFlowSteps;
//# sourceMappingURL=numeric-flow-steps.js.map