@octopusdeploy/design-system-components/dist/src/components/Level1PageHeader/Level1PageHeader.js

The design systems component library.

"use strict";
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, 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, "adora-unmask"), 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: titleContainerStyles, children: [(0, jsx_runtime_1.jsx)("h1", { title: title, className: titleStyles, children: title }), 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",
    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",
});
const titleContainerStyles = (0, css_1.css)({
    flex: "1",
    display: "flex",
    gap: design_system_tokens_1.space[12],
    alignItems: "center",
    overflow: "hidden",
});
const titleStyles = (0, css_1.css)({
    all: "unset",
    font: design_system_tokens_1.text.heading.large,
    color: design_system_tokens_1.themeTokens.color.text.primary,
    overflow: "hidden",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
});