@heycar-uikit/core
Version:
The React UI library from HeyCar
59 lines (55 loc) • 3.89 kB
JavaScript
import React from 'react';
import Grid from '../../../grid/modern';
import Typography from '../../../typography/modern';
import { DEFAULT_LOCALE } from '../constants/Header.constants.js';
import { getSubNavGroupDetails } from '../utils/navigationHelpers.js';
import '../../../icons/modern';
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"};
require('./../styles/subnav.css');
const SubNav = React.forwardRef(({ isDropDownMenu, isOpen, itemOnClick, Link, locale = DEFAULT_LOCALE, navItemId, navItemName, subNavGroups, trackingFn, }, ref) => {
const 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((subNavGroup, i) => {
const { showAllLink } = subNavGroup;
const canShowMoreLink = showAllLink && !showAllLink.hide;
const { className, colWidth, maxItem } = groupDeets[i];
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(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: () => 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: () => 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 };