@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 = 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 Link_1 = require("../Link/Link");
const renderCalloutContent_1 = require("./renderCalloutContent");
const Callout = (props) => {
    let iconElement = null;
    const containerStyles = stylesByType[props.messageState].container;
    const iconContainerStyles = stylesByType[props.messageState].iconContainer;
    const titleStyles = stylesByType[props.messageState].title;
    const closeIconStyles = stylesByType[props.messageState].closeIcon;
    const outlineStyles = props.type === "outlined" ? outlineStylesByState[props.messageState] : undefined;
    const outlineIconColor = props.type === "outlined" ? outlineIconColorByState[props.messageState] : undefined;
    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.ExclamationTriangleIcon, { size: 24 });
            break;
        case "danger":
            iconElement = (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationDiamondIcon, { 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: (0, css_1.cx)(containerStyles, outlineStyles && outlineContainer, outlineStyles), role: "alert", children: [iconElement && (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(iconContainerStyles, outlineIconColor), children: iconElement }), (0, jsx_runtime_1.jsxs)("div", { className: contentContainerStyles, children: [(0, jsx_runtime_1.jsxs)("div", { className: contentAndTitleStyles, children: [!props.hideTitle && (0, jsx_runtime_1.jsx)("div", { className: titleStyles, children: props.title }), props.content && (0, jsx_runtime_1.jsx)("div", { className: contentStyles, children: (0, renderCalloutContent_1.renderCalloutContent)(props.content, props.type ?? "standard") })] }), 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 && props.onClose && ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(closeButtonContainerStyles, closeIconStyles, outlineIconColor), children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.XmarkIcon, { size: 20, color: "currentColor" }), accessibleName: "Dismiss callout", importance: "ghost", onClick: props.onClose }) }))] }));
};
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, { size: "medium", 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)({
    borderRadius: design_system_tokens_1.borderRadius.medium,
    display: "flex",
    alignItems: "flex-start",
    padding: `${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[16]}`,
    gap: design_system_tokens_1.space[0],
});
// The dismiss button is a ghost Button whose padding makes it taller than a single line of content. Capping its
// container to the icon/title line height keeps the callout sized to its content, so toggling dismiss doesn't change the height.
const closeButtonContainerStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "flex-start",
    height: "1.5rem",
});
const baseIconContainerStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "flex-start",
    justifyContent: "center",
    padding: `${design_system_tokens_1.space[6]} ${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[0]} ${design_system_tokens_1.space[0]}`,
});
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 outlineContainer = (0, css_1.css)({
    border: "solid",
    borderWidth: "1px",
});
const outlineStylesByState = {
    information: (0, css_1.css)({ background: "transparent", borderColor: design_system_tokens_1.themeTokens.color.border.info }),
    success: (0, css_1.css)({ background: "transparent", borderColor: design_system_tokens_1.themeTokens.color.border.success }),
    warning: (0, css_1.css)({ background: "transparent", borderColor: design_system_tokens_1.themeTokens.color.border.warning }),
    danger: (0, css_1.css)({ background: "transparent", borderColor: design_system_tokens_1.themeTokens.color.border.danger }),
    "new-feature": (0, css_1.css)({ background: "transparent", borderColor: design_system_tokens_1.themeTokens.color.border.feature }),
};
// Outlined callouts use a different icon/dismiss colour than standard callouts (color.icon.* rather than color.callout.icon.*).
const outlineIconColorByState = {
    information: (0, css_1.css)({ color: design_system_tokens_1.themeTokens.color.icon.info }),
    success: (0, css_1.css)({ color: design_system_tokens_1.themeTokens.color.icon.success }),
    warning: (0, css_1.css)({ color: design_system_tokens_1.themeTokens.color.icon.warning }),
    danger: (0, css_1.css)({ color: design_system_tokens_1.themeTokens.color.icon.danger }),
    "new-feature": (0, css_1.css)({ color: design_system_tokens_1.themeTokens.color.icon.feature }),
};
const stylesByType = {
    information: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: 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,
        })),
        closeIcon: (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.info,
        }),
    },
    success: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: 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,
        })),
        closeIcon: (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.success,
        }),
    },
    warning: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: 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,
        })),
        closeIcon: (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.warning,
        }),
    },
    danger: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: 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,
        })),
        closeIcon: (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.danger,
        }),
    },
    "new-feature": {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: 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,
        })),
        closeIcon: (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.feature,
        }),
    },
    upsell: {
        container: (0, css_1.cx)(baseContainerStyles, (0, css_1.css)({
            background: design_system_tokens_1.themeTokens.color.callout.background.upsell,
        })),
        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,
        })),
        closeIcon: (0, css_1.css)({
            color: design_system_tokens_1.themeTokens.color.callout.icon.feature,
        }),
    },
};
const contentAndTitleStyles = (0, css_1.css)({
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    gap: design_system_tokens_1.space[4],
    alignSelf: "stretch",
});
const contentContainerStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "flex-start",
    flexDirection: "column",
    gap: design_system_tokens_1.space[12],
    padding: `${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[2]} ${design_system_tokens_1.space[0]}`,
    flex: 1,
});
const contentStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.regular.medium,
    color: design_system_tokens_1.themeTokens.color.callout.text.body,
});
const calloutActionLinkStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.body.regular.medium,
    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[0],
});