@octopusdeploy/design-system-components/dist/src/components/literal/renderLiteral.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderLiteral = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const type_utils_1 = require("@octopusdeploy/type-utils");
const react_1 = require("react");
const routing_1 = require("../../routing");
const Link_1 = require("../Link");
const renderLiteral = (content, options) => {
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content.map((item, index) => renderItem(item, index, options)) });
};
exports.renderLiteral = renderLiteral;
function renderItem(item, index, options) {
    if (typeof item === "string") {
        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: item }, index);
    }
    if (Array.isArray(item)) {
        return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, exports.renderLiteral)(item, options) }, index);
    }
    if (item.type === "link") {
        return (0, jsx_runtime_1.jsx)(InternalLink, { item: item, appearance: options.link }, index);
    }
    if (item.type === "externalLink") {
        return ((0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { href: item.href, children: item.text }, index));
    }
    if (item.type === "bold") {
        return (0, jsx_runtime_1.jsx)("strong", { children: item.text }, index);
    }
    if (item.type === "inline-code") {
        return ((0, jsx_runtime_1.jsx)("code", { className: codeStylesByAppearance[options.code], children: item.text }, index));
    }
    (0, type_utils_1.exhaustiveCheck)(item, "Not all literal content node types were handled");
}
function InternalLink({ item, appearance }) {
    const DesignSystemLink = (0, routing_1.useOctopusLinkComponent)();
    return ((0, jsx_runtime_1.jsx)(DesignSystemLink, { href: item.url, className: linkStylesByAppearance[appearance], target: item.newTab ? "_blank" : undefined, rel: "noopener noreferrer", children: item.text }));
}
const highContrastLinkStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.primary,
    textDecoration: "underline",
    "&:hover": {
        textDecoration: "none",
        color: design_system_tokens_1.themeTokens.color.text.primary,
    },
    "&:focus-visible": {
        boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
    },
});
const defaultLinkStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.link.default,
    textDecoration: "underline",
    "&:hover": {
        textDecoration: "none",
        color: design_system_tokens_1.themeTokens.color.text.link.hover,
    },
    "&:focus-visible": {
        boxShadow: design_system_tokens_1.themeTokens.shadow.focused,
    },
});
const linkStylesByAppearance = {
    "high-contrast": highContrastLinkStyles,
    default: defaultLinkStyles,
};
const baseCodeStyles = (0, css_1.css)({
    display: "inline-flex",
    font: design_system_tokens_1.text.code.regular.medium,
    padding: `${design_system_tokens_1.space[0]} ${design_system_tokens_1.space[4]}`,
    borderRadius: design_system_tokens_1.borderRadius.small,
});
const codeStylesByAppearance = {
    "high-contrast": (0, css_1.cx)(baseCodeStyles, (0, css_1.css)({
        color: design_system_tokens_1.themeTokens.color.chip.text.inverse,
        backgroundColor: design_system_tokens_1.themeTokens.color.callout.code.background,
    })),
    default: (0, css_1.cx)(baseCodeStyles, (0, css_1.css)({
        color: design_system_tokens_1.themeTokens.color.chip.text.primary,
        backgroundColor: design_system_tokens_1.themeTokens.color.chip.background.primary,
    })),
};