@navinc/base-react-components
Version:
Nav's Pattern Library
21 lines (20 loc) • 1.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { Copy } from './copy';
const ProgressContainer = styled.div.withConfig({ displayName: "brc-sc-ProgressContainer", componentId: "brc-sc-bw3cus" }) `
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 100%;
align-items: center;
`;
const StepsProgressPill = styled.div.withConfig({ displayName: "brc-sc-StepsProgressPill", componentId: "brc-sc-1mprqw2" }) `
background-color: ${({ bgColor, complete, theme }) => { var _a; return (complete ? (_a = theme[bgColor]) !== null && _a !== void 0 ? _a : bgColor : theme.navNeutral100); }};
height: 8px;
width: 60px;
border-radius: 10px;
`;
export const ProgressSteps = ({ steps, stepsComplete, bgColor = 'navStatusPositive', 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}`, bgColor: bgColor, complete: i < stepsComplete }, i))), _jsxs(Copy, { children: [stepsComplete, "/", steps, " Complete"] })] }));
};
//# sourceMappingURL=progress-steps.js.map