@octopusdeploy/design-system-components
Version:
The design systems component library.
44 lines (43 loc) • 2.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderPrimary = HeaderPrimary;
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 Breadcrumbs_1 = require("../Breadcrumbs");
const PageActions_1 = require("../PageActions");
const LeadingSegment_1 = require("./LeadingSegment");
function HeaderPrimary({ breadcrumbs, statusSection, logo, logoLinkURL, title, titleIcon, titleBadges, primaryAction, actions, overflowActions }) {
const isLargerThanIpad = (0, hooks_1.useIsLargerThanIpadResolution)();
(0, routing_1.useSetPageTitlePrimarySegmentEffect)(title);
return ((0, jsx_runtime_1.jsxs)("header", { className: (0, css_1.cx)(primaryHeaderStyles, { [headerPrimaryMobileStyles]: !isLargerThanIpad }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(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.jsx)(LeadingSegment_1.LeadingSegment, { logoLinkURL: logoLinkURL, logo: logo, title: title, titleIcon: titleIcon, titleBadges: titleBadges }), (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { primaryAction: primaryAction, actions: actions, overflowActions: overflowActions })] }), statusSection] }));
}
const primaryHeaderStyles = (0, css_1.css)({
display: "flex",
flexDirection: "column",
padding: `${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[32]}`,
gap: design_system_tokens_1.space[12],
});
const headerPrimaryMobileStyles = (0, css_1.css)({
padding: `${design_system_tokens_1.space[24]} ${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[16]}`,
});
const breadcrumbContainerStyles = (0, css_1.css)({
display: "flex",
alignItems: "flex-start",
height: "1.75rem",
});
const headerContentStyles = (0, css_1.css)({
display: "flex",
justifyContent: "space-between",
gap: design_system_tokens_1.space[48],
// 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 or removed.
minHeight: "2.25rem",
});
const headerContentMobileStyles = (0, css_1.css)({
flexDirection: "column",
gap: design_system_tokens_1.space[24],
alignItems: "unset",
});