@navinc/base-react-components/dist/progress-steps.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { styled } from 'styled-components';
import { isKeyOf } from '@navinc/utils';
const ProgressContainer = styled.div.withConfig({ displayName: "brc-sc-ProgressContainer", componentId: "brc-sc-zd8f0i" }) `
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  align-items: center;
`;
const StepsProgressPill = styled.div.withConfig({ displayName: "brc-sc-StepsProgressPill", componentId: "brc-sc-1hvd29w" }) `
  background-color: ${({ FilledBgColor, EmptyBgColor, complete, theme }) => complete
    ? (isKeyOf(FilledBgColor, theme.colors) && theme.colors[FilledBgColor]) || FilledBgColor
    : (isKeyOf(EmptyBgColor, theme.colors) && theme.colors[EmptyBgColor]) || EmptyBgColor};
  height: 8px;
  width: 60px;
  border-radius: 10px;
`;
/**
`ProgressSteps` is an animated progress bar.
The `steps` and `stepsComplete` props are required, `bgColor` is optional and will use the default color if not provided.

```
<ProgressSteps bgColor="navStatusPositive" steps={5} stepsComplete={3} />

```
 */
export const ProgressSteps = ({ steps, stepsComplete, FilledBgColor = 'navStatusPositive', EmptyBgColor = 'navNeutral100', className, }) => {
    return (_jsxs(ProgressContainer, { className: className, "data-testid": "progress-steps:container", children: [[...Array(steps)].map((_, i) => (_jsx(StepsProgressPill, { "data-testid": `progress-steps:step-${i + 1}`, FilledBgColor: FilledBgColor, EmptyBgColor: EmptyBgColor, complete: i < stepsComplete }, i))), _jsxs("p", { className: "body2", children: [stepsComplete, "/", steps, " Complete"] })] }));
};
//# sourceMappingURL=progress-steps.js.map