@heycar-uikit/core
Version:
The React UI library from HeyCar
92 lines (88 loc) • 6.8 kB
JavaScript
import { _ as __assign } from '../tslib.es6-4ac54363.js';
import React from 'react';
import Collapse from '../../../collapse';
import { ChevronDown, Dealer } from '../../../icons';
import Typography from '../../../typography';
import { DEFAULT_LOCALE } from '../constants/Header.constants.js';
import { useNavigationItem } from '../hooks/useNavigationItem.js';
import { extendNavigation } from '../utils/navigationHelpers.js';
import SubNav from './SubNav.js';
import '../../../grid';
import '../utils/headerItemHelpers.js';
var styles = {"navItem":"header__navItem_1nrt7","isActive":"header__isActive_1nrt7","nav":"header__nav_1nrt7","headerItems":"header__headerItems_1nrt7","auxDetails":"header__auxDetails_1nrt7","auxContact":"header__auxContact_1nrt7","appDetails":"header__appDetails_1nrt7"};
var NavigationBurgerMenu = React.forwardRef(function (_a, ref) {
var accountItemConfig = _a.accountItemConfig, activeNavItem = _a.activeNavItem, aux = _a.auxiliaryDetails, dataTestId = _a.dataTestId, itemOnClick = _a.itemOnClick, langItemConfig = _a.langItemConfig, Link = _a.Link, _b = _a.locale, locale = _b === void 0 ? DEFAULT_LOCALE : _b, _c = _a.navigation, navigation = _c === void 0 ? [] : _c, setActiveNavItem = _a.setActiveNavItem, trackingFn = _a.trackingFn;
var hasAuxData = (aux === null || aux === void 0 ? void 0 : aux.tel) || (aux === null || aux === void 0 ? void 0 : aux.email) || (aux === null || aux === void 0 ? void 0 : aux.app);
var _d = useNavigationItem(activeNavItem, setActiveNavItem), toggleSubNav = _d.toggleSubNav, keyboardOpen = _d.keyboardOpen;
var extendedNavArray = extendNavigation(navigation, locale, langItemConfig, accountItemConfig);
return (React.createElement("nav", { className: styles.nav, "data-nav-type": "burger-menu", "data-test-id": dataTestId, ref: ref, role: "navigation" },
React.createElement("ul", { "aria-label": "Main navigation", role: "menubar", tabIndex: 0 }, extendedNavArray.map(function (navItem, i) {
var label = navItem.label, subNavGroups = navItem.subNavGroups;
var id = "burger-nav-item-" + label.replace(/^[^a-z]+|[^\w:.-]+/gi, '');
var hasSubNav = subNavGroups && (subNavGroups === null || subNavGroups === void 0 ? void 0 : subNavGroups.length) > 0;
var isActive = activeNavItem === id;
var isLastItem = i + 1 === navigation.length;
var commonProps = {
role: 'menuitem',
className: styles.navItem + " " + (isActive ? styles.isActive : ''),
id: id,
};
return (React.createElement("li", { className: (isLastItem ? 'lastNavItem' : '') + " " + (navItem.isBurgerMenuOnly ? styles.headerItems : ''), key: "burger-" + label, role: "none" }, hasSubNav ? (React.createElement(React.Fragment, null,
React.createElement("button", __assign({}, commonProps, { "aria-expanded": isActive, "aria-haspopup": true, "aria-label": label + " - " + locale.spaceBarNotification, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: "" + label,
type: 'nav_item',
navType: 'burger_menu',
},
}, function () { return toggleSubNav(id, isActive); }, false);
}, onKeyDown: function (e) { return keyboardOpen(e, id, isActive); } }),
React.createElement(Typography, { variant: "subheading3" }, label),
React.createElement(ChevronDown, null)),
React.createElement(Collapse, { "aria-hidden": !isActive, "aria-label": label + " " + locale.subMenuLabel, className: styles.collapse, open: isActive, role: "group" },
React.createElement(SubNav, { Link: Link, isDropDownMenu: false, isOpen: isActive, itemOnClick: itemOnClick, locale: locale, navItemId: commonProps.id, navItemName: label, subNavGroups: subNavGroups, trackingFn: trackingFn })))) : (React.createElement(Link, __assign({}, commonProps, { href: navItem.href, onClick: function () {
return itemOnClick({
fn: trackingFn,
obj: {
label: "" + label,
type: 'nav_item',
href: navItem.href,
navType: 'burger_menu',
},
}, navItem.onClick);
} }),
React.createElement(Typography, { variant: "subheading3" }, label),
label === (accountItemConfig === null || accountItemConfig === void 0 ? void 0 : accountItemConfig.label) ? (React.createElement(Dealer, null)) : undefined))));
})),
hasAuxData && (React.createElement("aside", { className: styles.auxDetails },
(aux === null || aux === void 0 ? void 0 : aux.tel) && (React.createElement("p", { className: styles.auxContact },
React.createElement(Typography, { Component: "span", variant: "caption2" }, aux.tel.label || locale.auxTelLabel),
React.createElement("a", { href: "tel:" + aux.tel.value, onClick: function () {
var _a;
return itemOnClick({
fn: trackingFn,
obj: {
label: 'aux telephone',
type: 'nav_item',
href: "tel:" + ((_a = aux.tel) === null || _a === void 0 ? void 0 : _a.value),
navType: 'burger_menu',
},
});
} }, aux.tel.value))),
(aux === null || aux === void 0 ? void 0 : aux.email) && (React.createElement("p", { className: styles.auxContact },
React.createElement(Typography, { Component: "span", variant: "caption2" }, aux.email.label || locale.auxEmailLabel),
React.createElement("a", { href: "mailto:" + aux.email.value, onClick: function () {
var _a;
return itemOnClick({
fn: trackingFn,
obj: {
label: 'aux email',
type: 'nav_item',
href: "tel:" + ((_a = aux.email) === null || _a === void 0 ? void 0 : _a.value),
navType: 'burger_menu',
},
});
} }, aux.email.value)))))));
});
export { NavigationBurgerMenu as default };