@octopusdeploy/design-system-components
Version:
The design systems component library.
88 lines (87 loc) • 4.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LeadingSegment = LeadingSegment;
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 Divider_1 = require("../Divider");
function LeadingSegment({ logo, logoLinkURL, title, titleIcon, titleBadges }) {
const isLargerThanIpad = (0, hooks_1.useIsLargerThanIpadResolution)();
const Link = (0, routing_1.useOctopusLinkComponent)();
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(leadingSegmentStyles, { [leadingSegmentMobileStyles]: !isLargerThanIpad }), children: [logo &&
(logoLinkURL ? ((0, jsx_runtime_1.jsxs)(Link, { href: logoLinkURL, className: (0, css_1.cx)(logoLinkStyles, logoContainerStyles), children: [(0, jsx_runtime_1.jsx)("div", { className: logoLinkHoverStyles, children: "Edit" }), (0, jsx_runtime_1.jsx)("img", { className: logoStyles, src: logo.href, alt: logo.accessibleName })] })) : ((0, jsx_runtime_1.jsx)("div", { className: logoContainerStyles, children: (0, jsx_runtime_1.jsx)("img", { className: logoStyles, src: logo.href, alt: logo.accessibleName }) }))), (0, jsx_runtime_1.jsxs)("div", { className: titleContainerStyles, children: [(0, jsx_runtime_1.jsx)("h2", { title: title, className: titleStyles, children: title }), titleIcon] }), titleBadges && ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(chipsWrapperStyles, { [chipsWrapperMobileStyles]: !isLargerThanIpad }), children: [isLargerThanIpad && (0, jsx_runtime_1.jsx)(Divider_1.Divider, { orientation: "vertical" }), titleBadges.map((badge, index) => isStatusBadge(badge) ? (0, jsx_runtime_1.jsx)(Badge_1.StatusBadge, { status: badge.status, showLabel: badge.showLabel, size: "medium" }, index) : (0, jsx_runtime_1.jsx)(Badge_1.Badge, { variant: badge.variant, label: badge.label, size: "medium", icon: badge.icon }, index))] }))] }));
}
function isStatusBadge(badge) {
return "status" in badge;
}
const leadingSegmentStyles = (0, css_1.css)({
minWidth: 0,
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[12],
});
const leadingSegmentMobileStyles = (0, css_1.css)({
gap: design_system_tokens_1.space[16],
flexWrap: "wrap",
});
const logoLinkStyles = (0, css_1.css)({
position: "relative",
"&:hover > div": {
opacity: "1",
},
});
const logoContainerStyles = (0, css_1.css)({
width: "2.25rem",
height: "2.25rem",
borderRadius: design_system_tokens_1.borderRadius.small,
display: "flex",
flexShrink: 0,
justifyContent: "center",
background: design_system_tokens_1.colorScales.white,
});
const logoLinkHoverStyles = (0, css_1.css)({
fontSize: design_system_tokens_1.fontSize.xSmall,
position: "absolute",
zIndex: "1",
width: "100%",
height: "100%",
display: "flex",
opacity: "0",
justifyContent: "center",
alignItems: "center",
color: design_system_tokens_1.colorScales.white,
borderRadius: design_system_tokens_1.borderRadius.extraSmall,
backgroundColor: `${design_system_tokens_1.colorScales.navy["900"]}BF`,
transition: "opacity 150ms ease-in-out",
});
const logoStyles = (0, css_1.css)({
borderRadius: design_system_tokens_1.borderRadius.extraSmall,
objectFit: "scale-down",
width: "100%",
height: "100%",
});
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",
});
const chipsWrapperStyles = (0, css_1.css)({
display: "flex",
gap: design_system_tokens_1.space[12],
});
const chipsWrapperMobileStyles = (0, css_1.css)({
flexBasis: "100%",
});