@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 });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
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 }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    color: ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    background-color: transparent;
  }

  &.complete {
    border-color: ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    color: #fff;
    background-color: ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
  }
`;
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 }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    }
  }

  &.active:before {
    background: ${({ theme }) => ((0, is_rebrand_js_1.default)(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
  }

  // 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;
`;
exports.default = ({ currentIndex = 0, steps = [], className }) => {
    return ((0, jsx_runtime_1.jsx)(StyledStatusBar, Object.assign({ className: className }, { children: steps.map((step, i) => {
            // eslint-disable-next-line no-nested-ternary
            const state = i === currentIndex ? 'active' : i > currentIndex ? 'incomplete' : 'complete';
            return ((0, jsx_runtime_1.jsxs)(StepContainer, Object.assign({ className: state }, { children: [(0, jsx_runtime_1.jsx)(IconStepContainer, Object.assign({ className: (0, utils_1.classNames)(state, { first: i === 0, last: i === steps.length - 1 }) }, { children: (0, jsx_runtime_1.jsx)(FlowIcon, Object.assign({ className: state }, { children: i + 1 })) })), (0, jsx_runtime_1.jsx)(Content, { children: step.content })] }), i));
        }) })));
};
//# sourceMappingURL=numeric-flow-steps.js.map