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

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.QuietCallout = QuietCallout;
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");
function QuietCallout({ type, title, children }) {
    const titleId = (0, react_1.useId)();
    const bodyId = (0, react_1.useId)();
    const labelledById = title ? titleId : bodyId;
    return ((0, jsx_runtime_1.jsxs)("div", { className: calloutContainerStyles, role: "status", "aria-labelledby": labelledById, 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: [title && ((0, jsx_runtime_1.jsx)("p", { id: titleId, className: calloutTitleStyles, children: title })), (0, jsx_runtime_1.jsx)("p", { id: bodyId, className: calloutBodyStyles, children: children })] })] }));
}
function CalloutIcon({ type }) {
    switch (type) {
        case "info":
            return (0, jsx_runtime_1.jsx)(design_system_icons_1.InfoCircleIcon, { size: 20, color: design_system_tokens_1.themeTokens.color.icon.info });
        case "success":
            return (0, jsx_runtime_1.jsx)(design_system_icons_1.CheckCircleIcon, { size: 20, color: design_system_tokens_1.themeTokens.color.icon.success });
        case "warning":
            return (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationCircleIcon, { size: 20, color: design_system_tokens_1.themeTokens.color.icon.warning });
        case "danger":
            return (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationTriangleIcon, { size: 20, color: design_system_tokens_1.themeTokens.color.icon.danger });
        case "feature":
            return (0, jsx_runtime_1.jsx)(design_system_icons_1.RocketIcon, { size: 20, color: design_system_tokens_1.themeTokens.color.icon.feature });
        case "upsell":
            return (0, jsx_runtime_1.jsx)(design_system_icons_1.GemIcon, { size: 20, color: design_system_tokens_1.themeTokens.color.icon.feature });
    }
}
const calloutContainerStyles = (0, css_1.css)({
    display: "flex",
    gap: design_system_tokens_1.space[6],
});
const iconWrapperStyles = (0, css_1.css)({
    flexShrink: 0,
    marginTop: design_system_tokens_1.space[2],
});
const contentStyles = (0, css_1.css)({
    display: "flex",
    flexDirection: "column",
    gap: design_system_tokens_1.space[4],
});
const calloutTitleStyles = (0, css_1.css)({
    ...utils_1.resetStyles.paragraph,
    font: design_system_tokens_1.text.heading.small,
});
const calloutBodyStyles = (0, css_1.css)({
    ...utils_1.resetStyles.paragraph,
    font: design_system_tokens_1.text.body.regular.large,
});