@octopusdeploy/design-system-components
Version:
The design systems component library.
94 lines (93 loc) • 4.62 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Link = Link;
exports.ExternalLink = ExternalLink;
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 OctopusRoutingContext_1 = require("../../routing/OctopusRoutingContext");
const formatExternalUrl_1 = require("./formatExternalUrl");
// For internal use only. Do not export this component.
function BaseLink({ href, children, external = false, video = false, openInNewTab = false, size, weight = "normal", onClick, download, accessibleName, type = "primary" }) {
return ((0, jsx_runtime_1.jsxs)("a", { className: (0, css_1.cx)(styles.link, linkStyles[type], { [styles.bold]: weight === "bold" }, styles.fontSize(size)), href: href, target: openInNewTab ? "_blank" : undefined, rel: openInNewTab ? "noreferrer noopener" : undefined, onClick: onClick, download: download, "aria-label": accessibleName, children: [video ? (0, jsx_runtime_1.jsx)(design_system_icons_1.PlayIcon, { size: "font-size" }) : null, (0, jsx_runtime_1.jsx)("span", { children: children }), external ? (0, jsx_runtime_1.jsx)(design_system_icons_1.ArrowUpRightFromSquareIcon, { size: "font-size" }) : null] }));
}
function Link({ href, children, size, weight = "normal", onClick, type }) {
return ((0, jsx_runtime_1.jsx)(BaseLink, { size: size, weight: weight, href: href, onClick: onClick, type: type, children: children }));
}
function ExternalLink({ href, children, size, weight, onClick, trackAnalytics = true, video = false, downloadFileName, linkLocation, openInSelf = false, hideIcon = false, accessibleName, type }) {
const dispatchAnalytics = (0, OctopusRoutingContext_1.useDispatchLinkAnalytics)();
const handleOnClick = () => {
if (onClick) {
onClick();
}
if (trackAnalytics === true) {
dispatchAnalytics(children, href, "Navigate to External Link", linkLocation);
}
};
return ((0, jsx_runtime_1.jsx)(BaseLink, { href: (0, formatExternalUrl_1.formatExternalUrl)(href), size: size, weight: weight, onClick: handleOnClick, external: !hideIcon, openInNewTab: !openInSelf, video: video, download: downloadFileName, accessibleName: accessibleName, type: type, children: children }));
}
const linkStyles = {
"high-contrast": (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.primary,
"&:hover": {
color: design_system_tokens_1.themeTokens.color.text.primary,
textDecoration: "none",
},
}),
primary: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.link.default,
"&:hover": {
color: design_system_tokens_1.themeTokens.color.text.link.hover,
textDecoration: "none",
},
}),
};
const styles = {
link: (0, css_1.css)({
display: "inline",
textDecoration: "underline",
textUnderlinePosition: "from-font",
textUnderlineOffset: "auto",
color: design_system_tokens_1.themeTokens.color.text.link.default,
"&:hover": {
color: design_system_tokens_1.themeTokens.color.text.link.hover,
},
svg: {
display: "inline",
verticalAlign: "text-top",
},
"svg + span": {
marginLeft: design_system_tokens_1.space[4], // gap between leading icon and label
},
"span + svg": {
marginLeft: design_system_tokens_1.space[4], // gap between label and trailing icon
},
}),
bold: (0, css_1.css)({
fontWeight: design_system_tokens_1.fontWeight[700],
}),
fontSize: (size) => {
switch (size) {
case undefined:
// allow Link to inherit font size from parent
return undefined;
case "xSmall":
return (0, css_1.css)({
fontSize: design_system_tokens_1.fontSize.xSmall,
});
case "small":
return (0, css_1.css)({
fontSize: design_system_tokens_1.fontSize.small,
});
case "medium":
return (0, css_1.css)({
fontSize: design_system_tokens_1.fontSize.medium,
});
case "large":
return (0, css_1.css)({
fontSize: design_system_tokens_1.fontSize.base,
});
}
},
};