@octopusdeploy/design-system-components
Version:
The design systems component library.
66 lines (65 loc) • 3.35 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Level1PageHeader = Level1PageHeader;
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 hooks_1 = require("../../hooks");
const routing_1 = require("../../routing");
const Badge_1 = require("../Badge");
const Breadcrumbs_1 = require("../Breadcrumbs");
const PageActions_1 = require("../PageActions");
function Level1PageHeader({ breadcrumbs, title, titleBadge, titleAccessory, primaryAction, actions, overflowActions }) {
const isLargerThanIpad = (0, hooks_1.useIsLargerThanIpadResolution)();
(0, routing_1.useSetPageTitlePrimarySegmentEffect)(title);
return ((0, jsx_runtime_1.jsxs)("header", { "data-amplitude-unmask": true, className: primaryHeaderStyles, children: [(0, jsx_runtime_1.jsx)("div", { className: breadcrumbContainerStyles, children: breadcrumbs && (0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { items: breadcrumbs, showBackIcon: true }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(headerContentStyles, { [headerContentMobileStyles]: !isLargerThanIpad }), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(titleContainerStyles, { [titleContainerMobileStyles]: !isLargerThanIpad }), children: [(0, jsx_runtime_1.jsx)("h1", { title: title, className: titleStyles, children: title }), titleAccessory, titleBadge && (0, jsx_runtime_1.jsx)(Badge_1.Badge, { size: "medium", variant: titleBadge.variant, icon: titleBadge.icon, label: titleBadge.label })] }), (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { primaryAction: primaryAction, actions: actions, overflowActions: overflowActions })] })] }));
}
const primaryHeaderStyles = (0, css_1.css)({
display: "flex",
flexDirection: "column",
paddingBottom: design_system_tokens_1.space[32],
gap: "unset",
});
const breadcrumbContainerStyles = (0, css_1.css)({
display: "flex",
alignItems: "flex-start",
paddingBottom: design_system_tokens_1.space[8],
});
const headerContentStyles = (0, css_1.css)({
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
columnGap: design_system_tokens_1.space[48],
rowGap: design_system_tokens_1.space[24],
});
const headerContentMobileStyles = (0, css_1.css)({
flexDirection: "column",
gap: design_system_tokens_1.space[24],
alignItems: "unset",
});
const titleContainerStyles = (0, css_1.css)({
display: "flex",
flex: "1",
// This header content should have a min height set to the height of the buttons.
// This prevents the header from changing size to accommodate buttons that are added, removed or wrapped.
minHeight: "2.25rem",
minWidth: "38rem",
maxWidth: "100%",
gap: design_system_tokens_1.space[12],
alignItems: "center",
overflow: "hidden",
});
const titleContainerMobileStyles = (0, css_1.css)({
flexDirection: "column",
alignItems: "flex-start",
minWidth: "unset",
});
const titleStyles = (0, css_1.css)({
all: "unset",
maxWidth: "100%",
font: design_system_tokens_1.text.heading.large,
color: design_system_tokens_1.themeTokens.color.text.primary,
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
});