@octopusdeploy/design-system-components
Version:
The design systems component library.
100 lines (99 loc) • 6.44 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionableCallout = ActionableCallout;
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 react_1 = require("react");
const utils_1 = require("../../utils");
const Button_1 = require("../Button");
const Link_1 = require("../Link");
function ActionableCallout(props) {
const { type, title, primaryAction, children } = props;
const titleId = (0, react_1.useId)();
const bodyId = (0, react_1.useId)();
return ((0, jsx_runtime_1.jsxs)("div", { className: stylesByType[type].calloutContainer, role: "status", "aria-labelledby": titleId, "aria-describedby": bodyId, children: [(0, jsx_runtime_1.jsx)("div", { className: iconWrapperStyles, children: (0, jsx_runtime_1.jsx)(CalloutIcon, { type: type }) }), (0, jsx_runtime_1.jsxs)("div", { className: contentStyles, children: [(0, jsx_runtime_1.jsx)("p", { id: titleId, className: stylesByType[type].title, children: title }), (0, jsx_runtime_1.jsx)("p", { id: bodyId, className: calloutBodyStyles, children: children }), (0, jsx_runtime_1.jsxs)("div", { className: actionsContainer, children: [isButtonAction(primaryAction) ? (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "loud", ...primaryAction }) : (0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { ...primaryAction }), isUpsellCallout(props) && (0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { ...props.secondaryAction })] })] }), !isUpsellCallout(props) && ((0, jsx_runtime_1.jsx)("div", { className: closeButtonStyles, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", importance: "ghost", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.XmarkIcon, { size: 24 }), onClick: props.onClose, accessibleName: "Close" }) }))] }));
}
function isButtonAction(action) {
return "label" in action && !("href" in action);
}
function isUpsellCallout(calloutProps) {
return calloutProps.type === "upsell";
}
function CalloutIcon({ type }) {
switch (type) {
case "info":
return (0, jsx_runtime_1.jsx)(design_system_icons_1.InfoCircleIcon, { size: 24, color: design_system_tokens_1.themeTokens.color.callout.icon.info });
case "success":
return (0, jsx_runtime_1.jsx)(design_system_icons_1.CheckCircleIcon, { size: 24, color: design_system_tokens_1.themeTokens.color.callout.icon.success });
case "warning":
return (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationCircleIcon, { size: 24, color: design_system_tokens_1.themeTokens.color.callout.icon.warning });
case "error":
return (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationTriangleIcon, { size: 24, color: design_system_tokens_1.themeTokens.color.callout.icon.danger });
case "feature":
return (0, jsx_runtime_1.jsx)(design_system_icons_1.RocketIcon, { size: 24, color: design_system_tokens_1.themeTokens.color.callout.icon.feature });
case "upsell":
return (0, jsx_runtime_1.jsx)(design_system_icons_1.GemIcon, { size: 24, color: design_system_tokens_1.themeTokens.color.callout.icon.feature });
}
}
const iconWrapperStyles = (0, css_1.css)({
flexShrink: 0,
});
const contentStyles = (0, css_1.css)({
display: "flex",
flexGrow: 1,
flexDirection: "column",
font: design_system_tokens_1.text.body.regular.medium,
});
const calloutBodyStyles = (0, css_1.css)({
margin: `${design_system_tokens_1.space[4]} 0 ${design_system_tokens_1.space[12]}`,
});
const closeButtonStyles = (0, css_1.css)({
height: "2.25rem",
width: "2.25rem",
});
const calloutContainerBaseStyles = (0, css_1.css)({
display: "flex",
padding: design_system_tokens_1.space[12],
gap: design_system_tokens_1.space[8],
});
const titleBaseStyles = (0, css_1.css)({
...utils_1.resetStyles.paragraph,
marginTop: design_system_tokens_1.space[2],
font: design_system_tokens_1.text.body.bold.medium,
});
const actionsContainer = (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[16],
});
const stylesByType = {
info: getTypeStyle(design_system_tokens_1.themeTokens.color.callout.border.info, design_system_tokens_1.themeTokens.color.callout.background.info.default, design_system_tokens_1.themeTokens.color.callout.text.info),
success: getTypeStyle(design_system_tokens_1.themeTokens.color.callout.border.success, design_system_tokens_1.themeTokens.color.callout.background.success.default, design_system_tokens_1.themeTokens.color.callout.text.success),
warning: getTypeStyle(design_system_tokens_1.themeTokens.color.callout.border.warning, design_system_tokens_1.themeTokens.color.callout.background.warning.default, design_system_tokens_1.themeTokens.color.callout.text.warning),
error: getTypeStyle(design_system_tokens_1.themeTokens.color.callout.border.danger, design_system_tokens_1.themeTokens.color.callout.background.danger.default, design_system_tokens_1.themeTokens.color.callout.text.danger),
feature: getTypeStyle(design_system_tokens_1.themeTokens.color.callout.border.feature, design_system_tokens_1.themeTokens.color.callout.background.feature.default, design_system_tokens_1.themeTokens.color.callout.text.feature),
upsell: {
calloutContainer: (0, css_1.cx)(calloutContainerBaseStyles, (0, css_1.css)({
background: `${design_system_tokens_1.themeTokens.color.callout.border.upsell}, ${design_system_tokens_1.themeTokens.color.callout.background.upsell}`,
backgroundSize: `${design_system_tokens_1.space[4]} 100%, cover`,
backgroundPosition: "left top, center",
backgroundRepeat: "no-repeat, no-repeat",
})),
title: (0, css_1.cx)(titleBaseStyles, (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.primary,
})),
},
};
function getTypeStyle(borderColor, backgroundColor, titleColor) {
return {
calloutContainer: (0, css_1.cx)(calloutContainerBaseStyles, (0, css_1.css)({
borderLeft: `4px solid ${borderColor}`,
background: backgroundColor,
})),
title: (0, css_1.cx)(titleBaseStyles, (0, css_1.css)({
color: titleColor,
})),
};
}