@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 isRebrand from './is-rebrand.js';
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 }) => (isRebrand(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    color: ${({ theme }) => (isRebrand(theme) ? theme.navPrimary400 : theme.bubbleBlue500)};
    background-color: transparent;
  }

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

  &.active:before {
    background: ${({ theme }) => (isRebrand(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.div.withConfig({ displayName: "brc-sc-StyledStatusBar", componentId: "brc-sc-1v6yqys" }) `
  display: flex;
  flex-direction: row;
`;
export default ({ currentIndex = 0, steps = [], className }) => {
    return (_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 (_jsxs(StepContainer, Object.assign({ className: state }, { children: [_jsx(IconStepContainer, Object.assign({ className: classNames(state, { first: i === 0, last: i === steps.length - 1 }) }, { children: _jsx(FlowIcon, Object.assign({ className: state }, { children: i + 1 })) })), _jsx(Content, { children: step.content })] }), i));
        }) })));
};
//# sourceMappingURL=numeric-flow-steps.js.map