@octopusdeploy/design-system-components
Version:
The design systems component library.
101 lines (100 loc) • 5.83 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InlineEmptyStateOnboarding = InlineEmptyStateOnboarding;
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 type_utils_1 = require("@octopusdeploy/type-utils");
const EmptyStateDefaultIllustration_1 = require("../../Illustrations/EmptyStateDefaultIllustration");
const NoEntitiesIllustration_1 = require("../../Illustrations/NoEntitiesIllustration");
const Link_1 = require("../../Link");
const PageActions_1 = require("../../PageActions/PageActions");
function InlineEmptyStateOnboarding(props) {
const { learnMore, actions } = props;
const [title, description] = getTitleAndDescription(props);
return ((0, jsx_runtime_1.jsxs)("div", { className: inlineEmptyStateOnboardingStyles.root, children: [(0, jsx_runtime_1.jsx)(InlineEmptyStateImage, { ...props }), (0, jsx_runtime_1.jsx)("h2", { className: inlineEmptyStateOnboardingStyles.heading, children: title }), description !== null && (0, jsx_runtime_1.jsx)("p", { className: inlineEmptyStateOnboardingStyles.description, children: description }), (actions || learnMore) && ((0, jsx_runtime_1.jsx)(InlineEmptyStateOnboardingPageActions, { primaryAction: actions && "primary" in actions ? actions.primary : undefined, externalLinkAction: actions && "external" in actions ? actions.external : undefined, secondaryAction: actions && "secondary" in actions ? actions.secondary : undefined, learnMore: learnMore }))] }));
}
function getTitleAndDescription(props) {
const getTitleFromEntityName = (entityName) => `You don't have any ${entityName} yet.`;
// If we have been provided with CustomTitleAndDescriptionProps values, preference using them
// It is enough to check title is in the props
if ("title" in props) {
return [props.title, props.description];
}
else if (props.actions) {
const actionLabel = getActionLabel(props.actions);
return [getTitleFromEntityName(props.entityName), `Start creating by clicking on ${actionLabel}`];
}
else {
return [getTitleFromEntityName(props.entityName), null];
}
}
function getActionLabel(props) {
return "primary" in props ? props.primary.label : props.external.label;
}
function InlineEmptyStateImage(props) {
return (0, jsx_runtime_1.jsx)("div", { className: inlineEmptyStateImageStyles, children: getIllustration(props) });
}
function getIllustration(props) {
switch (props.illustration) {
case "EmptyState":
return (0, jsx_runtime_1.jsx)(EmptyStateDefaultIllustration_1.EmptyStateDefaultIllustration, {});
case "NoEntities":
return (0, jsx_runtime_1.jsx)(NoEntitiesIllustration_1.NoEntitiesIllustration, {});
case "Custom":
return props.image;
default:
(0, type_utils_1.exhaustiveCheck)(props, "Not all illustration types have been handled");
}
}
const inlineEmptyStateImageStyles = (0, css_1.css)({
maxWidth: "120px",
maxHeight: "120px",
});
function InlineEmptyStateOnboardingPageActions({ primaryAction, externalLinkAction, secondaryAction, learnMore }) {
return ((0, jsx_runtime_1.jsxs)("div", { className: inlineEmptyStateOnboardingStyles.actions, children: [primaryAction && (0, jsx_runtime_1.jsx)(OnboardingPrimaryPageAction, { primaryAction: primaryAction }), externalLinkAction && (0, jsx_runtime_1.jsx)(OnboardingExternalPageAction, { externalAction: externalLinkAction }), secondaryAction && (0, jsx_runtime_1.jsx)(OnboardingPageAction, { action: secondaryAction }), learnMore && ((0, jsx_runtime_1.jsx)(Link_1.ExternalLink, { href: learnMore.path, onClick: learnMore.onClick, children: learnMore.label }))] }));
}
function OnboardingPrimaryPageAction({ primaryAction }) {
const internalPrimaryPageAction = (0, PageActions_1.toInternalPrimaryPageAction)(primaryAction);
return (0, jsx_runtime_1.jsx)(PageActions_1.PageActionComponent, { item: internalPrimaryPageAction });
}
function OnboardingPageAction({ action }) {
const internalPageAction = (0, PageActions_1.toInternalPageAction)(action);
return (0, jsx_runtime_1.jsx)(PageActions_1.PageActionComponent, { item: internalPageAction });
}
function OnboardingExternalPageAction({ externalAction }) {
const internalPageAction = (0, PageActions_1.toInternalPageAction)({ type: "button", buttonType: "secondary", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.ArrowUpRightFromSquareIcon, { size: 16 }), ...externalAction });
return (0, jsx_runtime_1.jsx)(PageActions_1.PageActionComponent, { item: internalPageAction });
}
const inlineEmptyStateOnboardingStyles = {
root: (0, css_1.css)({
padding: design_system_tokens_1.space[48],
display: "flex",
flexDirection: "column",
alignItems: "center",
}),
heading: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.primary,
font: design_system_tokens_1.text.heading.small,
margin: 0,
marginTop: design_system_tokens_1.space[16],
}),
actions: (0, css_1.css)({
marginTop: design_system_tokens_1.space[24],
display: "flex",
gap: design_system_tokens_1.space[16],
alignItems: "center",
"@media (max-width: 1088px)": {
justifyContent: "center",
flexWrap: "wrap",
},
}),
description: (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.secondary,
font: design_system_tokens_1.text.body.regular.medium,
margin: 0,
marginTop: design_system_tokens_1.space[8],
textAlign: "center",
}),
};