@navinc/base-react-components
Version:
Nav's Pattern Library
27 lines • 1.81 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressSteps = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const copy_variant_1 = require("./copy-variant");
const ProgressContainer = styled_components_1.default.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_components_1.default.div.withConfig({ displayName: "brc-sc-StepsProgressPill", componentId: "brc-sc-1mprqw2" }) `
background-color: ${({ FilledBgColor, EmptyBgColor, complete, theme }) => { var _a, _b; return complete ? (_a = theme[FilledBgColor]) !== null && _a !== void 0 ? _a : FilledBgColor : (_b = theme[EmptyBgColor]) !== null && _b !== void 0 ? _b : EmptyBgColor; }};
height: 8px;
width: 60px;
border-radius: 10px;
`;
const ProgressSteps = ({ steps, stepsComplete, FilledBgColor = 'navStatusPositive', EmptyBgColor = 'navNeutral100', className, }) => {
return ((0, jsx_runtime_1.jsxs)(ProgressContainer, { className: className, "data-testid": "progress-steps:container", children: [[...Array(steps)].map((_, i) => ((0, jsx_runtime_1.jsx)(StepsProgressPill, { "data-testid": `progress-steps:step-${i + 1}`, FilledBgColor: FilledBgColor, EmptyBgColor: EmptyBgColor, complete: i < stepsComplete }, i))), (0, jsx_runtime_1.jsxs)(copy_variant_1.CopyVariant, { children: [stepsComplete, "/", steps, " Complete"] })] }));
};
exports.ProgressSteps = ProgressSteps;
//# sourceMappingURL=progress-steps.js.map