@octopusdeploy/design-system-components
Version:
The design systems component library.
68 lines (67 loc) • 3.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepCount = StepCount;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
function StepCount(props) {
const { variant, currentStep, totalSteps } = props;
switch (variant) {
case "circular":
return (0, jsx_runtime_1.jsx)(CircularStepCount, { currentStep: currentStep, totalSteps: totalSteps });
case "text":
return (0, jsx_runtime_1.jsx)(TextStepCount, { currentStep: currentStep, totalSteps: totalSteps });
}
}
function CircularStepCount(props) {
const { currentStep, totalSteps } = props;
const strokeWidth = 3;
const circleWidth = 35;
const radius = circleWidth / 2 - strokeWidth;
const dashArray = radius * Math.PI * 2;
const progressPercentage = Math.ceil((currentStep / totalSteps) * 100);
const dashOffset = dashArray - (dashArray * progressPercentage) / 100;
return ((0, jsx_runtime_1.jsx)("div", { className: circularStepCountStyles.container, children: (0, jsx_runtime_1.jsxs)("svg", { width: circleWidth, height: circleWidth, viewBox: `0 0 ${circleWidth} ${circleWidth}`, children: [(0, jsx_runtime_1.jsx)("circle", { cx: circleWidth / 2, cy: circleWidth / 2, strokeWidth: `${strokeWidth}px`, r: radius, className: circularStepCountStyles.backgroundCircle }), (0, jsx_runtime_1.jsx)("circle", { cx: circleWidth / 2, cy: circleWidth / 2, strokeWidth: `${strokeWidth}px`, r: radius, className: circularStepCountStyles.trackCircle }), (0, jsx_runtime_1.jsx)("circle", { cx: circleWidth / 2, cy: circleWidth / 2, strokeWidth: `${strokeWidth}px`, r: radius, transform: `rotate(-90 ${circleWidth / 2} ${circleWidth / 2})`, className: circularStepCountStyles.progressCircle, style: {
strokeDasharray: `${dashArray}`,
strokeDashoffset: `${dashOffset}`,
} }), (0, jsx_runtime_1.jsxs)("text", { x: "50%", y: "50%", dy: "0.3em", textAnchor: "middle", className: circularStepCountStyles.text, children: [props.currentStep, "/", props.totalSteps] })] }) }));
}
const circularStepCountStyles = {
container: (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[8],
flex: "1 0 0",
}),
backgroundCircle: (0, css_1.css)({
fill: design_system_tokens_1.themeTokens.color.icon.inverse.primary,
}),
trackCircle: (0, css_1.css)({
fill: "none",
stroke: design_system_tokens_1.themeTokens.color.progress.background.secondary,
}),
progressCircle: (0, css_1.css)({
fill: "none",
stroke: design_system_tokens_1.themeTokens.color.progress.background.primary,
strokeLinecap: "round",
strokeLinejoin: "round",
}),
text: (0, css_1.css)({
font: design_system_tokens_1.text.body.bold.xSmall,
fill: design_system_tokens_1.themeTokens.color.progress.text.info,
}),
};
function TextStepCount(props) {
const { currentStep, totalSteps } = props;
return ((0, jsx_runtime_1.jsx)("div", { className: textStepCountStyles.container, children: (0, jsx_runtime_1.jsxs)("div", { className: textStepCountStyles.text, children: [currentStep, " of ", totalSteps] }) }));
}
const textStepCountStyles = {
container: (0, css_1.css)({
display: "flex",
alignItems: "center",
}),
text: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.medium,
color: design_system_tokens_1.themeTokens.color.text.secondary,
}),
};