@octopusdeploy/design-system-components
Version:
The design systems component library.
80 lines (79 loc) • 5.11 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressTrackerItem = void 0;
exports.getProgressTrackerItemState = getProgressTrackerItemState;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const routing_1 = require("../../routing");
const ProgressTrackerItem = ({ label, state, href, onClick, layout = "normal" }) => {
const Link = (0, routing_1.useOctopusLinkComponent)();
const itemContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ProgressTrackerIcon, { state: state }), (0, jsx_runtime_1.jsx)("span", { children: label })] }));
const itemStyles = (0, css_1.cx)(styles.container(layout), {
[styles.active]: state === "Current",
[styles.complete]: state === "Done",
[styles.isLink]: !!href && state === "Current",
});
if (state === "Current" && (href || onClick)) {
if (href) {
return ((0, jsx_runtime_1.jsx)(Link, { className: itemStyles, href: href, onClick: onClick, children: itemContent }));
}
return ((0, jsx_runtime_1.jsx)("button", { className: itemStyles, onClick: onClick, type: "button", children: itemContent }));
}
return (0, jsx_runtime_1.jsx)("div", { className: itemStyles, children: itemContent });
};
exports.ProgressTrackerItem = ProgressTrackerItem;
const ProgressTrackerIcon = ({ state }) => {
if (state === "Current") {
return ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z", fill: design_system_tokens_1.themeTokens.color.background.success }), (0, jsx_runtime_1.jsx)("path", { d: "M14 10C14 12.2091 12.2091 14 10 14C7.79086 14 6 12.2091 6 10C6 7.79086 7.79086 6 10 6C12.2091 6 14 7.79086 14 10Z", fill: design_system_tokens_1.themeTokens.color.icon.success })] }));
}
if (state === "Pending") {
return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "4", fill: design_system_tokens_1.themeTokens.color.icon.tertiary }) }));
}
if (state === "Done") {
return ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.0156 18C7.14062 18 4.51562 16.5 3.07812 14C1.64062 11.5312 1.64062 8.5 3.07812 6C4.51562 3.53125 7.14062 2 10.0156 2C12.8594 2 15.4844 3.53125 16.9219 6C18.3594 8.5 18.3594 11.5312 16.9219 14C15.4844 16.5 12.8594 18 10.0156 18ZM13.5469 8.53125H13.5156C13.8281 8.25 13.8281 7.78125 13.5156 7.46875C13.2344 7.1875 12.7656 7.1875 12.4844 7.46875L9.01562 10.9688L7.54688 9.5C7.23438 9.1875 6.76562 9.1875 6.48438 9.5C6.17188 9.78125 6.17188 10.25 6.48438 10.5312L8.48438 12.5312C8.76562 12.8438 9.23438 12.8438 9.54688 12.5312L13.5469 8.53125Z", fill: design_system_tokens_1.themeTokens.color.icon.success }) }));
}
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
};
function getProgressTrackerItemState(index, activeIndex) {
if (index < activeIndex)
return "Done";
if (index > activeIndex)
return "Pending";
return "Current";
}
const styles = {
container: (layout) => (0, css_1.css)({
display: "flex",
alignItems: "center",
justifyContent: "start",
gap: layout === "compact" ? design_system_tokens_1.space[4] : design_system_tokens_1.space[8],
borderRadius: design_system_tokens_1.borderRadius.small,
whiteSpace: "nowrap",
color: design_system_tokens_1.themeTokens.color.text.tertiary,
padding: layout === "compact" ? `${design_system_tokens_1.space[4]} ${design_system_tokens_1.space[6]} ${design_system_tokens_1.space[4]} ${design_system_tokens_1.space[2]}` : `${design_system_tokens_1.space[4]} ${design_system_tokens_1.space[8]}`,
background: "none",
border: "none",
font: "inherit",
textDecoration: "none",
}),
active: (0, css_1.css)({
background: design_system_tokens_1.themeTokens.color.background.primary.default,
fontWeight: design_system_tokens_1.fontWeight[500],
"&&": {
color: design_system_tokens_1.themeTokens.color.text.primary,
},
}),
complete: (0, css_1.css)({
"&&": {
color: design_system_tokens_1.themeTokens.color.text.primary,
},
}),
isLink: (0, css_1.css)({
cursor: "pointer",
"&&:hover": {
color: design_system_tokens_1.themeTokens.color.text.primary,
background: design_system_tokens_1.themeTokens.color.background.primary.pressed,
},
}),
};