@octopusdeploy/design-system-components
Version:
The design systems component library.
101 lines (100 loc) • 5.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EmptyStateOnboarding = EmptyStateOnboarding;
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 Callout_1 = require("../../Callout");
const index_1 = require("../../Divider/index");
const Illustrations_1 = require("../../Illustrations");
const PageActions_1 = require("../../PageActions");
function EmptyStateOnboarding({ title, description, secondaryDescription, image, primaryAction, actions, learnMore, callout, headerBadge }) {
return ((0, jsx_runtime_1.jsx)("div", { className: pageContainerStyles.container, children: (0, jsx_runtime_1.jsxs)("div", { className: pageContentStyles.container, children: [(0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.content, children: title && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [headerBadge && (0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.headerBadge, children: headerBadge }), (0, jsx_runtime_1.jsx)("h2", { className: pageContentStyles.header, children: title }), (0, jsx_runtime_1.jsxs)("div", { className: pageContentStyles.descriptionAndActions, children: [description && (0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.description, children: description }), callout && (callout.title ? (0, jsx_runtime_1.jsx)(Callout_1.Callout, { ...callout, title: callout.title, canClose: !!callout.onClose }) : (0, jsx_runtime_1.jsx)(Callout_1.Callout, { ...callout, hideTitle: true, canClose: !!callout.onClose })), (0, jsx_runtime_1.jsxs)("div", { className: pageContentStyles.actions, children: [(0, jsx_runtime_1.jsx)(PageActions, { primaryAction: primaryAction, actions: actions }), learnMore && learnMore] }), secondaryDescription ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.divider, children: (0, jsx_runtime_1.jsx)(index_1.Divider, {}) }), (0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.secondaryDescription, children: secondaryDescription })] })) : null] })] })) }), (0, jsx_runtime_1.jsx)("div", { className: pageContentStyles.illustrationWrapperStyles, children: image ?? (0, jsx_runtime_1.jsx)(Illustrations_1.EmptyStateDefaultIllustration, {}) })] }) }));
}
function PageActions({ primaryAction, actions }) {
const hasPrimaryAction = primaryAction !== undefined;
const actionButtons = actions?.map(PageActions_1.toInternalPageAction);
if ((!actions || actions.length === 0) && !hasPrimaryAction) {
return null;
}
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasPrimaryAction && (0, jsx_runtime_1.jsx)(PageActions_1.PageActionComponent, { item: (0, PageActions_1.toInternalPrimaryPageAction)(primaryAction) }, "primary"), actionButtons && actionButtons.map((item, id) => (0, jsx_runtime_1.jsx)(PageActions_1.PageActionComponent, { item: item }, id))] }));
}
const pageContainerStyles = {
container: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.medium,
margin: design_system_tokens_1.space[32],
display: "grid",
height: `calc(100% - (${design_system_tokens_1.space[32]} * 2))`, // minus the top and bottom margin
"@media (max-width: 1088px)": {
alignContent: "start",
textAlign: "center",
},
}),
};
const pageContentStyles = {
container: (0, css_1.css)({
display: "grid",
gap: design_system_tokens_1.space[80],
gridTemplateColumns: "2fr 2fr",
alignItems: "center",
justifyItems: "end",
margin: "0 auto",
"@media (max-width: 1488px)": {
gap: design_system_tokens_1.space[64],
},
"@media (max-width: 1088px)": {
justifyItems: "center",
gridTemplateColumns: "1fr",
gap: design_system_tokens_1.space[40],
},
}),
illustrationWrapperStyles: (0, css_1.css)({
width: "100%",
"@media (max-width: 1088px)": {
alignSelf: "end",
order: "-1",
maxWidth: "250px",
},
}),
content: (0, css_1.css)({
maxWidth: "536px",
"@media (max-width: 1088px)": {
alignSelf: "start",
},
}),
header: (0, css_1.css)({
font: design_system_tokens_1.text.heading.large,
color: design_system_tokens_1.themeTokens.color.text.primary,
margin: 0,
marginBottom: design_system_tokens_1.space[16],
}),
headerBadge: (0, css_1.css)({
marginBottom: design_system_tokens_1.space[16],
}),
descriptionAndActions: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[24],
}),
description: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.large,
color: design_system_tokens_1.themeTokens.color.text.secondary,
}),
divider: (0, css_1.css)({
marginBottom: design_system_tokens_1.space[16],
}),
secondaryDescription: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.medium,
color: design_system_tokens_1.themeTokens.color.text.secondary,
}),
actions: (0, css_1.css)({
display: "flex",
flexWrap: "wrap",
gap: design_system_tokens_1.space[16],
alignItems: "center",
"@media (max-width: 1088px)": {
justifyContent: "center",
flexWrap: "wrap",
},
}),
};