@octopusdeploy/design-system-components/dist/src/components/HeaderSecondary/HeaderSecondaryMainContent.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeaderSecondaryMainContent = HeaderSecondaryMainContent;
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 Badge_1 = require("../Badge");
const PageActions_1 = require("../PageActions");
const Tooltip_1 = require("../Tooltip");
function HeaderSecondaryMainContent({ titleStatusIcon, title, titleChip, titleBadge, titleSecondaryBadge, titleAccessory, titleComplementaryText, ...actionProps }) {
    const isLargerThanIpad = (0, hooks_1.useIsLargerThanIpadResolution)();
    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(mainContentStyles, { [mainContentMobileStyles]: !isLargerThanIpad }), children: [(0, jsx_runtime_1.jsx)(PageHeaderTitle, { title: title, titleStatusIcon: titleStatusIcon, titleChip: titleChip, titleBadge: titleBadge, titleSecondaryBadge: titleSecondaryBadge, titleAccessory: titleAccessory, titleComplementaryText: titleComplementaryText }), (0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { primaryAction: actionProps.primaryAction, actions: actionProps.pageActions, overflowActions: actionProps.overflowActions })] }));
}
function PageHeaderTitle({ titleStatusIcon, title, titleAccessory, titleChip, titleBadge, titleSecondaryBadge, titleComplementaryText }) {
    const isLargerThanIpad = (0, hooks_1.useIsLargerThanIpadResolution)();
    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(titleSectionStyles, { [titleSectionMobileStyles]: !isLargerThanIpad }), children: [(0, jsx_runtime_1.jsxs)("div", { className: titleLabelStyles, children: [titleStatusIcon, (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("h1", { className: titleStyles, children: title }), titleComplementaryText && (0, jsx_runtime_1.jsxs)("span", { className: titleComplementaryTextStyles, children: [" ", titleComplementaryText] })] })] }), titleAccessory, (titleBadge || titleSecondaryBadge) && ((0, jsx_runtime_1.jsxs)("div", { className: badgesWrapperStyles, children: [titleBadge && renderBadge(titleBadge), titleSecondaryBadge && renderBadge(titleSecondaryBadge)] })), (0, jsx_runtime_1.jsx)("div", { className: chipAndLoadingIndicatorWrapperStyles, children: titleChip })] }));
}
function renderBadge(badge) {
    if (badge.tooltipContent) {
        return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: badge.tooltipContent, children: (0, jsx_runtime_1.jsx)("div", { className: tooltipBadgeContainer, children: (0, jsx_runtime_1.jsx)(Badge_1.Badge, { size: "medium", variant: badge.variant, label: badge.label, icon: badge.icon }) }) }));
    }
    return (0, jsx_runtime_1.jsx)(Badge_1.Badge, { size: "medium", variant: badge.variant, label: badge.label, icon: badge.icon });
}
const mainContentStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    flexWrap: "wrap",
    gap: design_system_tokens_1.space[24],
    minHeight: "2.25rem",
});
const mainContentMobileStyles = (0, css_1.css)({
    flexDirection: "column",
    alignItems: "flex-start",
});
const titleLabelStyles = (0, css_1.css)({
    display: "flex",
    gap: design_system_tokens_1.space[12],
    alignItems: "center",
});
const titleSectionStyles = (0, css_1.css)({
    display: "flex",
    gap: design_system_tokens_1.space[8],
    alignItems: "center",
});
const titleSectionMobileStyles = (0, css_1.css)({
    width: "100%",
    flexDirection: "column",
    alignItems: "flex-start",
});
const titleStyles = (0, css_1.css)({
    all: "unset",
    font: design_system_tokens_1.text.heading.medium,
    color: design_system_tokens_1.themeTokens.color.text.primary,
});
const titleComplementaryTextStyles = (0, css_1.css)({
    font: design_system_tokens_1.text.heading.medium,
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
});
const chipAndLoadingIndicatorWrapperStyles = (0, css_1.css)({
    display: "flex",
    alignItems: "center",
    gap: design_system_tokens_1.space[12],
});
const badgesWrapperStyles = (0, css_1.css)({
    display: "flex",
    gap: design_system_tokens_1.space[12],
});
const tooltipBadgeContainer = (0, css_1.css)({
    display: "flex",
});