@octopusdeploy/design-system-components
Version:
The design systems component library.
108 lines (107 loc) • 4.92 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderCalloutContent = exports.calloutContent = exports.calloutExternalLink = exports.calloutLink = 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 React = __importStar(require("react"));
const routing_1 = require("../../routing");
const Link_1 = require("../Link/Link");
const calloutLink = (text, url, newTab = false) => {
return { type: "link", text, url, newTab };
};
exports.calloutLink = calloutLink;
// External links accept a short slug (resolved via the oc.to redirector) or a full URL, and render
// through ExternalLink so they get short-name resolution, the external-link icon, and link analytics.
const calloutExternalLink = (text, href) => ({ type: "externalLink", text, href });
exports.calloutExternalLink = calloutExternalLink;
const calloutContent = (strings, ...values) => {
const content = [];
strings.forEach((str, index) => {
if (str !== "")
content.push(str);
if (index < values.length) {
const value = values[index];
if (value === null || value === undefined || value === "" || typeof value === "boolean")
return;
content.push(typeof value === "number" ? String(value) : value);
}
});
return content;
};
exports.calloutContent = calloutContent;
const renderCalloutContent = (content) => {
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content.map((item, index) => renderCalloutItem(item, index)) });
};
exports.renderCalloutContent = renderCalloutContent;
function InternalCalloutLink({ item }) {
const DesignSystemLink = (0, routing_1.useOctopusLinkComponent)();
return ((0, jsx_runtime_1.jsx)(DesignSystemLink, { href: item.url, className: linkStyles, target: item.newTab ? "_blank" : undefined, rel: "noopener noreferrer", children: item.text }));
}
function renderCalloutItem(item, index) {
if (typeof item === "string") {
return (0, jsx_runtime_1.jsx)(React.Fragment, { children: item }, index);
}
if (Array.isArray(item)) {
return (0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, exports.renderCalloutContent)(item) }, index);
}
if (item.type === "link") {
return (0, jsx_runtime_1.jsx)(InternalCalloutLink, { item: item }, index);
}
if (item.type === "externalLink") {
return ((0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { href: item.href, children: item.text }, index));
}
return (0, jsx_runtime_1.jsx)(React.Fragment, {}, index);
}
const linkStyles = (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 codeStyles = (0, css_1.css)({
font: design_system_tokens_1.text.code.regular.medium,
backgroundColor: design_system_tokens_1.themeTokens.color.background.tertiary,
border: `1px solid ${design_system_tokens_1.themeTokens.color.border.secondary}`,
borderRadius: design_system_tokens_1.borderRadius.extraSmall,
padding: `${design_system_tokens_1.space[2]} ${design_system_tokens_1.space[4]}`,
color: design_system_tokens_1.themeTokens.color.text.primary,
});