@heycar-uikit/core/header/cssm/components/SubNav.js

The React UI library from HeyCar

var React = require('react');
var Grid = require('../../../grid/cssm');
var Typography = require('../../../typography/cssm');
var constants_Header_constants = require('../constants/Header.constants.js');
var utils_navigationHelpers = require('../utils/navigationHelpers.js');
var styles = require('../styles/subNav.module.css');
require('../tslib.es6-0efb545c.js');
require('../utils/headerItemHelpers.js');
require('../../../icons/cssm');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);

var SubNav = React__default["default"].forwardRef(function (_a, ref) {
    var isDropDownMenu = _a.isDropDownMenu, isOpen = _a.isOpen, itemOnClick = _a.itemOnClick, Link = _a.Link, _b = _a.locale, locale = _b === void 0 ? constants_Header_constants.DEFAULT_LOCALE : _b, navItemId = _a.navItemId, navItemName = _a.navItemName, subNavGroups = _a.subNavGroups, trackingFn = _a.trackingFn;
    var groupDeets = utils_navigationHelpers.getSubNavGroupDetails(subNavGroups, isDropDownMenu);
    return (React__default["default"].createElement(Grid__default["default"].Row, { "aria-expanded": isOpen, "aria-hidden": !isOpen, "aria-label": navItemName + " " + locale.subMenuLabel, className: styles__default["default"].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__default["default"].createElement(Grid__default["default"].Col, { className: styles__default["default"].subNavGroup + " " + className, key: (isDropDownMenu ? 'dropdown' : 'burger') + "-" + navItemId + "-" + subNavGroup.heading, role: "none", width: {
                mobile: 12,
                tablet: { s: 12, m: 12, l: colWidth },
                desktop: colWidth,
            } },
            React__default["default"].createElement("span", { role: "separator" }, subNavGroup.heading),
            React__default["default"].createElement("ul", { "aria-label": subNavGroup.heading + " menu", role: "menu" }, subNavGroup.items.slice(0, maxItem).map(function (subNavItem) {
                return (React__default["default"].createElement("li", { key: (isDropDownMenu ? 'dropdown' : 'burger') + "-" + navItemId + "-" + subNavGroup.heading + "-" + subNavItem.label, role: "none" },
                    React__default["default"].createElement(Link, { className: styles__default["default"].subNavItem + " " + (subNavItem.desc ? styles__default["default"].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__default["default"].createElement("span", null, subNavItem.label),
                        subNavItem.desc && isDropDownMenu ? (React__default["default"].createElement(Typography__default["default"], { Component: "q", variant: "body4" }, subNavItem.desc)) : undefined)));
            })),
            canShowMoreLink && (React__default["default"].createElement(Link, { className: styles__default["default"].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))));
    })));
});

module.exports = SubNav;