@heycar-uikit/core
Version:
The React UI library from HeyCar
64 lines (60 loc) • 4.32 kB
JavaScript
import React from 'react';
import Grid from '../../../grid';
import Typography from '../../../typography';
import { DEFAULT_LOCALE } from '../constants/Header.constants.js';
import { getSubNavGroupDetails } from '../utils/navigationHelpers.js';
import '../tslib.es6-4ac54363.js';
import '../../../icons';
import '../utils/headerItemHelpers.js';
var styles = {"subNavItem":"header__subNavItem_1raj3","hasCaption":"header__hasCaption_1raj3","subNav":"header__subNav_1raj3","subNavGroup":"header__subNavGroup_1raj3","showAll":"header__showAll_1raj3"};
var SubNav = React.forwardRef(function (_a, ref) {
var isDropDownMenu = _a.isDropDownMenu, isOpen = _a.isOpen, itemOnClick = _a.itemOnClick, Link = _a.Link, _b = _a.locale, locale = _b === void 0 ? DEFAULT_LOCALE : _b, navItemId = _a.navItemId, navItemName = _a.navItemName, subNavGroups = _a.subNavGroups, trackingFn = _a.trackingFn;
var groupDeets = getSubNavGroupDetails(subNavGroups, isDropDownMenu);
return (React.createElement(Grid.Row, { "aria-expanded": isOpen, "aria-hidden": !isOpen, "aria-label": navItemName + " " + locale.subMenuLabel, className: styles.subNav, "data-test-id": navItemId + "-sub-nav", gutter: {
mobile: 0,
tablet: { s: 0, m: 0, l: 24 },
desktop: 24,
}, justify: "left", ref: ref, role: "group" }, subNavGroups.map(function (subNavGroup, i) {
var showAllLink = subNavGroup.showAllLink;
var canShowMoreLink = showAllLink && !showAllLink.hide;
var _a = groupDeets[i], className = _a.className, colWidth = _a.colWidth, maxItem = _a.maxItem;
return (React.createElement(Grid.Col, { className: styles.subNavGroup + " " + className, key: (isDropDownMenu ? 'dropdown' : 'burger') + "-" + navItemId + "-" + subNavGroup.heading, role: "none", width: {
mobile: 12,
tablet: { s: 12, m: 12, l: colWidth },
desktop: colWidth,
} },
React.createElement("span", { role: "separator" }, subNavGroup.heading),
React.createElement("ul", { "aria-label": subNavGroup.heading + " menu", role: "menu" }, subNavGroup.items.slice(0, maxItem).map(function (subNavItem) {
return (React.createElement("li", { key: (isDropDownMenu ? 'dropdown' : 'burger') + "-" + navItemId + "-" + subNavGroup.heading + "-" + subNavItem.label, role: "none" },
React.createElement(Link, { className: styles.subNavItem + " " + (subNavItem.desc ? styles.hasCaption : ''), href: subNavItem.href, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: "" + subNavItem.label,
parentLabel: navItemName,
type: 'subnav_item',
href: subNavItem.href,
navType: isDropDownMenu
? 'dropdown'
: 'burger_menu',
},
});
}, role: "menuitem", tabIndex: isOpen ? undefined : -1 },
React.createElement("span", null, subNavItem.label),
subNavItem.desc && isDropDownMenu ? (React.createElement(Typography, { Component: "q", variant: "body4" }, subNavItem.desc)) : undefined)));
})),
canShowMoreLink && (React.createElement(Link, { className: styles.showAll, href: showAllLink.href, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: subNavGroup.heading + " " + (showAllLink.label || locale.showAllLabel),
parentLabel: navItemName,
type: 'subnav_item',
href: showAllLink.href,
navType: isDropDownMenu ? 'dropdown' : 'burger_menu',
},
});
}, role: "menuitem", tabIndex: isOpen ? undefined : -1 }, showAllLink.label || locale.showAllLabel))));
})));
});
export { SubNav as default };