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

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { classNames } from '@navinc/utils';
const FlowIcon = styled.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.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.div.withConfig({ displayName: "brc-sc-Content", componentId: "brc-sc-qno3zp" }) `
  padding: 1em;
`;
const IconStepContainer = styled.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.div.withConfig({ displayName: "brc-sc-StyledStatusBar", componentId: "brc-sc-1v6yqys" }) `
  display: flex;
  flex-direction: row;
`;
export const NumericFlowSteps = ({ currentIndex = 0, steps = [], className }) => {
    return (_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 (_jsxs(StepContainer, { className: state, children: [_jsx(IconStepContainer, { className: classNames(state, { first: i === 0, last: i === steps.length - 1 }), children: _jsx(FlowIcon, { className: state, children: i + 1 }) }), _jsx(Content, { children: step.content })] }, i));
        }) }));
};
//# sourceMappingURL=numeric-flow-steps.js.map