@octopusdeploy/design-system-components/dist/src/components/Callout/Callout.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Callout = exports.calloutTypes = 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 routing_1 = require("../../routing");
const Button_1 = require("../Button");
const IconButton_1 = require("../IconButton");
const Link_1 = require("../Link/Link");
exports.calloutTypes = ["information", "success", "warning", "danger", "new-feature", "upsell"];
const Callout = (props) => {
    let iconElement = null;
    const containerStyles = stylesByType[props.messageState].container;
    const iconContainerStyles = stylesByType[props.messageState].iconContainer;
    const titleStyles = stylesByType[props.messageState].title;
    switch (props.messageState) {
        case "information":
            iconElement = (0, jsx_runtime_1.jsx)(design_system_icons_1.InfoCircleIcon, { size: 24 });
            break;
        case "success":
            iconElement = (0, jsx_runtime_1.jsx)(design_system_icons_1.CheckCircleIcon, { size: 24 });
            break;
        case "warning":
            iconElement = (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationCircleIcon, { size: 24 });
            break;
        case "danger":
            iconElement = (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationTriangleIcon, { size: 24 });
            break;
        case "new-feature":
            iconElement = (0, jsx_runtime_1.jsx)(design_system_icons_1.RocketIcon, { size: 24 });
            break;
        case "upsell":
            iconElement = (0, jsx_runtime_1.jsx)(design_system_icons_1.GemIcon, { size: 24 });
            break;
    }
    return ((0, jsx_runtime_1.jsxs)("div", { className: containerStyles, role: "alert", children: [iconElement && (0, jsx_runtime_1.jsx)("div", { className: iconContainerStyles, children: iconElement }), (0, jsx_runtime_1.jsxs)("div", { className: contentContainerStyles, children: [!props.hideTitle && (0, jsx_runtime_1.jsx)("div", { className: titleStyles, children: props.title }), props.children && (0, jsx_runtime_1.jsx)("div", { className: bodyStyles, children: props.children }), props.actions && (props.actions.link || props.actions.primary) && ((0, jsx_runtime_1.jsxs)("div", { className: actionsContainerStyles, children: [props.actions.primary && (0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "loud", ...props.actions.primary }), props.actions.link && (0, jsx_runtime_1.jsx)(CalloutActionLink, { ...props.actions.link })] }))] }), props.canClose && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(IconButton_1.DeprecatedIconButton, { className: closeButtonStyles, accessibleName: "Close Button", onClick: props.onClose, icon: "XmarkIcon" }) }))] }));
};
exports.Callout = Callout;
exports.Callout.displayName = "Callout";
function CalloutActionLink(props) {
    const InternalLink = (0, routing_1.useOctopusLinkComponent)();
    if (props.isExternal) {
        return ((0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { href: props.href, type: "high-contrast", onClick: props.onClick, children: props.label }));
    }
    return ((0, jsx_runtime_1.jsx)(InternalLink, { href: props.href, className: calloutActionLinkStyles, onClick: props.onClick, children: props.label }));
}
const baseContainerStyles = (0, css_1.css)({
    display: "flex",
    padding: `${design_system_tokens_1.space[12]} ${design_system_tokens_1.space[16]}`,
    gap: design_system_tokens_1.space[8],
});
// This creates a background with a solid border on the left edge
function buildBackgroundGradient(borderColor, backgroundColor) {
    return `linear-gradient(90deg, ${borderColor} 0%, ${borderColor} ${design_system_tokens_1.space[4]}, ${backgroundColor} ${design_system_tokens_1.space[4]}, ${backgroundColor} 100%)`;
}
const baseIconContainerStyles = (0, css_1.css)({
    height: "1.5rem",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
});
const baseTitleStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "center",
    font: design_system_tokens_1.text.body.bold.medium,
    lineHeight: "1.25rem", // This is needed to align to designs while the line height text token changes are not yet merged
});
const stylesByType = {
    information: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: buildBackgroundGradient(design_system_tokens_1.themeTokens.color.callout.border.info, design_system_tokens_1.themeTokens.color.callout.background.info.default),
        })),
        iconContainer: (0, css_1.cx)(baseIconContainerStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.info,
        })),
        title: (0, css_1.cx)(baseTitleStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.text.info,
        })),
    },
    success: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: buildBackgroundGradient(design_system_tokens_1.themeTokens.color.callout.border.success, design_system_tokens_1.themeTokens.color.callout.background.success.default),
        })),
        iconContainer: (0, css_1.cx)(baseIconContainerStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.success,
        })),
        title: (0, css_1.cx)(baseTitleStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.text.success,
        })),
    },
    warning: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: buildBackgroundGradient(design_system_tokens_1.themeTokens.color.callout.border.warning, design_system_tokens_1.themeTokens.color.callout.background.warning.default),
        })),
        iconContainer: (0, css_1.cx)(baseIconContainerStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.warning,
        })),
        title: (0, css_1.cx)(baseTitleStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.text.warning,
        })),
    },
    danger: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: buildBackgroundGradient(design_system_tokens_1.themeTokens.color.callout.border.danger, design_system_tokens_1.themeTokens.color.callout.background.danger.default),
        })),
        iconContainer: (0, css_1.cx)(baseIconContainerStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.danger,
        })),
        title: (0, css_1.cx)(baseTitleStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.text.danger,
        })),
    },
    "new-feature": {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: buildBackgroundGradient(design_system_tokens_1.themeTokens.color.callout.border.feature, design_system_tokens_1.themeTokens.color.callout.background.feature.default),
        })),
        iconContainer: (0, css_1.cx)(baseIconContainerStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.feature,
        })),
        title: (0, css_1.cx)(baseTitleStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.text.feature,
        })),
    },
    upsell: {
        container: (0, css_1.cx)(baseContainerStyles, (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",
        })),
        iconContainer: (0, css_1.cx)(baseIconContainerStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.feature,
        })),
        title: (0, css_1.cx)(baseTitleStyles, (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.text.primary,
        })),
    },
};
const contentContainerStyles = (0, css_1.css)({
    display: "flex",
    flexDirection: "column",
    gap: design_system_tokens_1.space[4],
    padding: `${design_system_tokens_1.space[2]} 0`,
    flex: 1,
});
const bodyStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.regular.medium,
    color: design_system_tokens_1.themeTokens.color.callout.text.body,
    lineHeight: "1.25rem", // This is needed to align to designs while the line height text token changes are not yet merged
});
const calloutActionLinkStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.primary,
    textDecoration: "underline",
    "&:hover": {
        color: design_system_tokens_1.themeTokens.color.text.primary,
        textDecoration: "none",
    },
});
const actionsContainerStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "center",
    alignContent: "center",
    flexWrap: "wrap",
    gap: design_system_tokens_1.space[16],
    paddingTop: design_system_tokens_1.space[12],
});
const closeButtonStyles = (0, css_1.css)({
    // We don't have a great way of customizing colors for components yet, so this is a hacky workaround
    "&.MuiIconButton-root": {
        color: design_system_tokens_1.themeTokens.color.icon.secondary,
    },
});