@octopusdeploy/design-system-components
Version:
The design systems component library.
102 lines (101 loc) • 5.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AreaNavList = AreaNavList;
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 resetStyles_1 = require("../../utils/resetStyles");
const Divider_1 = require("../Divider");
const AreaNavListLink_1 = require("./AreaNavListLink");
function AreaNavList({ listItems, onLinkClicked }) {
const visibleListItems = listItems.filter(isAreaNavListItemVisible);
return ((0, jsx_runtime_1.jsx)("nav", { className: areaNavListStyles, children: (0, jsx_runtime_1.jsx)("ul", { className: areaNavListUlStyles, children: visibleListItems.map((item, itemIndex) => ((0, jsx_runtime_1.jsx)(AreaNavListItem, { item: item, onLinkClicked: onLinkClicked }, itemIndex))) }) }));
}
function AreaNavListItem({ item, onLinkClicked }) {
if (isSpacer(item))
return (0, jsx_runtime_1.jsx)(AreaNavListSpacerListItem, {});
if (isDivider(item))
return (0, jsx_runtime_1.jsx)(AreaNavListDividerListItem, {});
if (isPlaceholderLabel(item))
return (0, jsx_runtime_1.jsx)(AreaNavListPlaceholderListItem, { item: item });
if (isGroup(item))
return (0, jsx_runtime_1.jsx)(AreaNavListGroupListItem, { group: item, onLinkClicked: onLinkClicked });
else
return (0, jsx_runtime_1.jsx)(AreaNavListLinkListItem, { item: item, onLinkClicked: onLinkClicked });
}
function AreaNavListGroupListItem({ group, onLinkClicked }) {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("li", { children: [group.heading && (0, jsx_runtime_1.jsx)("div", { className: listGroupTitleStyles, children: group.heading }), (0, jsx_runtime_1.jsx)("ul", { className: areaNavListUlStyles, "aria-label": group.heading, children: group.items.filter(isAreaNavListItemVisible).map((linkItem, index) => ((0, jsx_runtime_1.jsx)(AreaNavListItem, { item: linkItem, onLinkClicked: onLinkClicked }, index))) })] }), group.hasTrailingDivider && (0, jsx_runtime_1.jsx)(AreaNavListDividerListItem, {})] }));
}
function AreaNavListLinkListItem({ item, onLinkClicked }) {
const onClick = () => {
onLinkClicked?.(item);
};
return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "row" }, children: (0, jsx_runtime_1.jsx)(AreaNavListLink_1.AreaNavListLink, { label: item.label, href: item.href, showLinkAsActive: item.showLinkAsActive, accessibleName: item.accessibleName, onClick: onClick, icon: item.icon, featureBadgeLabel: item.featureBadgeLabel }) }) }));
}
function AreaNavListSpacerListItem() {
return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("div", { className: spacerStyles }) }));
}
function AreaNavListDividerListItem() {
return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("div", { className: dividerStyles, children: (0, jsx_runtime_1.jsx)(Divider_1.Divider, {}) }) }));
}
function AreaNavListPlaceholderListItem({ item }) {
return (0, jsx_runtime_1.jsx)("li", { className: placeholderItemStyles, children: item.placeholderLabel });
}
function isAreaNavListItemVisible(item) {
if (isLink(item))
return item.isVisible !== false;
if (isGroup(item)) {
const visibleGroupItems = item.items.filter(isAreaNavListItemVisible);
return visibleGroupItems.length > 0;
}
return true;
}
function isPlaceholderLabel(item) {
return typeof item === "object" && "placeholderLabel" in item;
}
function isGroup(item) {
return typeof item === "object" && "items" in item;
}
function isLink(item) {
return typeof item === "object" && "href" in item;
}
function isSpacer(item) {
return item === "spacer";
}
function isDivider(item) {
return item === "divider";
}
const areaNavListStyles = (0, css_1.css)({
width: "15rem",
height: "100%",
padding: `${design_system_tokens_1.space[32]} ${design_system_tokens_1.space[16]} ${design_system_tokens_1.space[24]} ${design_system_tokens_1.space[16]}`,
background: design_system_tokens_1.themeTokens.color.background.primary.transparent,
overflowY: "auto",
// to hide the scrollbar on the right side of the panel, while scrolling is enabled
scrollbarWidth: "none",
msOverflowStyle: "none",
"&::-webkit-scrollbar": {
width: 0,
height: 0,
},
});
const areaNavListUlStyles = (0, css_1.css)({
...resetStyles_1.resetStyles.list,
});
const listGroupTitleStyles = (0, css_1.css)({
font: design_system_tokens_1.text.body.bold.xSmall,
color: design_system_tokens_1.themeTokens.color.text.tertiary,
textTransform: "uppercase",
padding: `${design_system_tokens_1.space[4]} ${design_system_tokens_1.space[8]}`,
});
const spacerStyles = (0, css_1.css)({
height: "1rem",
});
const dividerStyles = (0, css_1.css)({
margin: `${design_system_tokens_1.space[24]} 0`,
});
const placeholderItemStyles = (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.medium,
fontStyle: "italic",
padding: `${design_system_tokens_1.space[4]} ${design_system_tokens_1.space[8]}`,
});