@octopusdeploy/design-system-components
Version:
The design systems component library.
105 lines (104 loc) • 5.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Notification = Notification;
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 Link_1 = require("../Link");
function Notification({ type, title, description, links, onNotificationCallToActionClicked }) {
return ((0, jsx_runtime_1.jsxs)("div", { className: notificationStyles.container, children: [(0, jsx_runtime_1.jsxs)("div", { className: notificationStyles.content, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(notificationStyles.title, {
[notificationStyles.infoTitle]: type === "happy" || type === "info",
[notificationStyles.alertTitle]: type === "warn",
[notificationStyles.errorTitle]: type === "error",
}), children: title }), (0, jsx_runtime_1.jsx)("div", { className: notificationStyles.description, children: description }), links && ((0, jsx_runtime_1.jsx)("div", { className: notificationStyles.links, children: links.map((link, i) => ((0, jsx_runtime_1.jsxs)("span", { children: [i > 0 && " | ", (0, jsx_runtime_1.jsx)(NotificationLink, { link: link, onNotificationCallToActionClicked: onNotificationCallToActionClicked })] }, i))) }))] }), (0, jsx_runtime_1.jsx)("div", { className: notificationStyles.icon, children: (0, jsx_runtime_1.jsx)(NotificationIcon, { notificationType: type }) })] }));
}
function NotificationLink({ link, onNotificationCallToActionClicked }) {
const Link = (0, routing_1.useOctopusLinkComponent)();
switch (link.type) {
case "External":
return ((0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { href: link.href, onClick: onNotificationCallToActionClicked, children: link.label }));
case "Internal":
return ((0, jsx_runtime_1.jsx)(Link, { className: notificationStyles.linkItem, href: link.href, onClick: onNotificationCallToActionClicked, children: link.label }));
case "Refresh":
return ((0, jsx_runtime_1.jsx)(Link, { className: notificationStyles.linkItem, onClick: () => {
onNotificationCallToActionClicked();
window.location.reload();
}, href: "#", children: link.label }));
default:
return (0, jsx_runtime_1.jsx)("span", { children: link.label });
}
}
const notificationStyles = {
container: (0, css_1.css)({
display: "flex",
padding: `${design_system_tokens_1.space[8]} ${design_system_tokens_1.space[12]}`,
gap: design_system_tokens_1.space["8"],
}),
content: (0, css_1.css)({
flexGrow: 1,
}),
title: (0, css_1.css)({
font: design_system_tokens_1.text.body.bold.medium,
}),
infoTitle: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.info,
}),
alertTitle: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.warning,
}),
errorTitle: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.danger,
}),
description: (0, css_1.css)({
fontSize: design_system_tokens_1.fontSize.small,
marginTop: design_system_tokens_1.space[1],
marginBottom: design_system_tokens_1.space[8],
}),
links: (0, css_1.css)({
fontSize: design_system_tokens_1.fontSize.small,
}),
linkItem: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.medium,
textDecoration: "none",
color: design_system_tokens_1.themeTokens.color.text.link.default,
}),
icon: (0, css_1.css)({
display: "flex",
alignItems: "flex-start",
}),
};
function NotificationIcon({ notificationType }) {
switch (notificationType) {
case "happy":
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(iconStyles.iconWrapper, iconStyles.infoBackground), children: (0, jsx_runtime_1.jsx)(design_system_icons_1.ThumbsUpIcon, { size: "font-size" }) }));
case "info":
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(iconStyles.iconWrapper, iconStyles.infoBackground), children: (0, jsx_runtime_1.jsx)(design_system_icons_1.InfoCircleFilledIcon, { size: "font-size" }) }));
case "warn":
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(iconStyles.iconWrapper, iconStyles.warningBackground), children: (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationTriangleIcon, { size: "font-size" }) }));
case "error":
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(iconStyles.iconWrapper, iconStyles.errorBackground), children: (0, jsx_runtime_1.jsx)(design_system_icons_1.ExclamationTriangleIcon, { size: "font-size" }) }));
}
}
const iconStyles = {
iconWrapper: (0, css_1.css)({
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: design_system_tokens_1.borderRadius.extraSmall,
width: design_system_tokens_1.space[32],
height: design_system_tokens_1.space[32],
fontSize: design_system_tokens_1.fontSize.large,
color: design_system_tokens_1.themeTokens.color.badge.icon.primary,
}),
infoBackground: (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.badge.background.info,
}),
warningBackground: (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.badge.background.warning,
}),
errorBackground: (0, css_1.css)({
backgroundColor: design_system_tokens_1.themeTokens.color.badge.background.danger,
}),
};