@octopusdeploy/design-system-components
Version:
The design systems component library.
51 lines (50 loc) • 2.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProgressTracker = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Button_1 = require("../Button/Button");
const Tooltip_1 = require("../Tooltip/Tooltip");
const ProgressTracker = ({ onClose, showCloseButton = false, closeButtonTooltip, layout = "normal", children }) => {
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(styles.wrapper), children: (0, jsx_runtime_1.jsxs)("div", { className: styles.container(layout), children: [children, showCloseButton && onClose && (0, jsx_runtime_1.jsx)(CloseButton, { onClick: onClose, tooltip: closeButtonTooltip })] }) }));
};
exports.ProgressTracker = ProgressTracker;
const CloseButton = ({ onClick, tooltip }) => {
if (tooltip) {
return ((0, jsx_runtime_1.jsx)("div", { className: styles.closeButtonStyles, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: (0, jsx_runtime_1.jsx)("div", { className: styles.tooltipContentStyles, children: tooltip }), position: "top", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "ghost", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.XmarkIcon, { size: 20 }), onClick: onClick }) }) }));
}
return ((0, jsx_runtime_1.jsx)("div", { className: styles.closeButtonStyles, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "ghost", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.XmarkIcon, { size: 20 }), onClick: onClick }) }));
};
const styles = {
wrapper: (0, css_1.css)({
overflowX: "auto",
background: design_system_tokens_1.themeTokens.color.background.secondary.default,
borderRadius: design_system_tokens_1.borderRadius.small,
"& *": {
boxSizing: "border-box",
},
}),
container: (layout) => (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.xSmall,
display: "flex",
gap: layout === "compact" ? design_system_tokens_1.space[6] : design_system_tokens_1.space[8],
alignItems: "center",
justifyContent: "start",
padding: `${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[12]}`,
userSelect: "none",
height: "2.75rem", // required to prevent close button increasing height
}),
tooltipContentStyles: (0, css_1.css)({
position: "relative",
bottom: "4px",
width: "174px",
height: "32px",
marginTop: design_system_tokens_1.space[2],
marginBottom: design_system_tokens_1.space[2],
}),
closeButtonStyles: (0, css_1.css)({
marginLeft: "auto",
}),
};