@xo-union/tk-component-header-nav
Version:
293 lines (291 loc) • 9.43 kB
JavaScript
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { Row, Column } from "@xo-union/tk-component-grid";
import { Body2, Subhead } from "@xo-union/tk-ui-typography";
import { compose } from "@xo-union/react-css-modules";
import Icon from "@xo-union/tk-component-icons";
import BlankButton from "@xo-union/component-blank-button";
import { useMegaMenuID, useMegaMenuLayout } from "./MegaMenuCore.js";
import { useHeaderNavContext } from "../Context.js";
import Link from "../Link/index.js";
import { useToggle } from "../useToggle.js";
import { Menu2, Menu3 } from "./MenuSections.js";
const MainCategoryLinkMenuButton = _ref => {
let {
isOpen,
onClick,
children,
...props
} = _ref;
const {
classes
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(Body2, _extends({
as: BlankButton,
className: cx(classes['sub-menu-button'], classes['menu-item-interactive-item']),
onClick: onClick,
bold: true,
"aria-expanded": isOpen,
type: "button"
}, props), /*#__PURE__*/React.createElement("span", null, children), /*#__PURE__*/React.createElement(Icon, {
className: classes['menu-button-caret'],
size: "md",
name: isOpen ? 'caret_up' : 'caret_down',
"aria-hidden": "true"
}));
};
process.env.NODE_ENV !== "production" ? MainCategoryLinkMenuButton.propTypes = {
children: PropTypes.node,
isOpen: PropTypes.bool,
onClick: PropTypes.func
} : void 0;
const MainCategoryLinkMenuHeading = _ref2 => {
let {
children,
...props
} = _ref2;
const {
classes
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(Body2, _extends({
role: "heading",
"aria-level": "1",
as: "div",
bold: true,
className: classes['sub-menu-heading']
}, props), children);
};
process.env.NODE_ENV !== "production" ? MainCategoryLinkMenuHeading.propTypes = {
children: PropTypes.node
} : void 0;
const MainCategoryLinkMenu = props => {
const {
classes
} = useHeaderNavContext();
const {
className,
headingContent,
href,
children,
linkProps,
id,
isOpenByDefault = false
} = props;
const [isOpen, menuActions] = useToggle(isOpenByDefault);
const headingID = `${id}-sub-menu-heading`;
return /*#__PURE__*/React.createElement("div", {
role: "listitem",
className: cx(classes['menu-item'], classes['menu-item-space-accent-on-desktop'], isOpen && classes['menu-item-space-accent-on-mobile'], !isOpen && classes['sub-menu-is-closed'], className)
}, /*#__PURE__*/React.createElement(MainCategoryLinkMenuButton, {
isOpen: isOpen,
onClick: menuActions.toggle
}, headingContent), /*#__PURE__*/React.createElement(Menu3, {
"aria-labelledby": headingID
}, /*#__PURE__*/React.createElement(MainCategoryLinkMenuHeading, {
id: headingID
}, /*#__PURE__*/React.createElement(Link, _extends({
href: href,
className: classes['menu-item-interactive-item']
}, linkProps), headingContent)), /*#__PURE__*/React.createElement("ul", {
role: "list",
className: cx(classes['sub-menu-nav-list'])
}, children)));
};
process.env.NODE_ENV !== "production" ? MainCategoryLinkMenu.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
headingContent: PropTypes.node,
href: PropTypes.string,
menuID: PropTypes.string,
isOpenByDefault: PropTypes.bool,
linkProps: PropTypes.shape({}),
id: PropTypes.string
} : void 0;
MainCategoryLinkMenu.defaultProps = {
isOpenByDefault: false
};
const MenuLink = _ref3 => {
let {
pushSelfDown,
spaceAccent,
hide,
bold,
className,
...rest
} = _ref3;
const {
classes
} = useHeaderNavContext();
const spaceAccentDesktopClass = classes['menu-item-space-accent-on-desktop'];
const pushSelfDownDesktopClass = classes['menu-item-push-self-down-on-desktop'];
return /*#__PURE__*/React.createElement(Body2, {
role: "listitem",
className: cx(classes['menu-item'], spaceAccent === 'desktop' && spaceAccentDesktopClass, pushSelfDown === 'desktop' && pushSelfDownDesktopClass, hide === 'desktop' && classes['hide-in-desktop'], bold === true && classes.bold, bold === 'mobile' && classes['bold-in-mobile'], className)
}, /*#__PURE__*/React.createElement(GenericMenuItemLink, rest));
};
process.env.NODE_ENV !== "production" ? MenuLink.propTypes = {
pushSelfDown: PropTypes.oneOf(['desktop']),
hide: PropTypes.oneOf(['desktop']),
spaceAccent: PropTypes.oneOf(['desktop']),
bold: PropTypes.oneOf([true, 'mobile']),
className: PropTypes.string,
children: PropTypes.node
} : void 0;
const GenericMenuItemLink = _ref4 => {
let {
children,
leftIcon,
rightIcon,
...props
} = _ref4;
const {
classes
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(Link, _extends({}, props, {
className: cx(classes['menu-item-interactive-item'])
}), leftIcon && /*#__PURE__*/React.createElement(Icon, {
className: classes['menu-item-left-icon'],
name: leftIcon,
size: "sm",
"aria-hidden": "true"
}), children, rightIcon && /*#__PURE__*/React.createElement(Icon, {
className: classes['menu-item-right-icon'],
name: rightIcon,
size: "sm",
"aria-hidden": "true"
}));
};
process.env.NODE_ENV !== "production" ? GenericMenuItemLink.propTypes = {
children: PropTypes.node,
leftIcon: PropTypes.string,
rightIcon: PropTypes.string
} : void 0;
const LinkSectionHeading = _ref5 => {
let {
headingContent,
headingTextProps,
id
} = _ref5;
const {
classes
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(Subhead, {
bold: true,
role: "heading",
"aria-level": "1",
as: "div",
className: classes['heading-text-container'],
id: id
}, /*#__PURE__*/React.createElement("a", _extends({
className: classes['heading-text']
}, headingTextProps, {
"data-trackable": ""
}), headingContent, /*#__PURE__*/React.createElement("div", {
"aria-hidden": "true",
className: classes['arrow-long-right']
})));
};
process.env.NODE_ENV !== "production" ? LinkSectionHeading.propTypes = {
children: PropTypes.node,
headingContent: PropTypes.string,
headingTextProps: PropTypes.shape({}),
id: PropTypes.string
} : void 0;
const LinkSectionContainer = _ref6 => {
let {
children
} = _ref6;
const {
classes
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement("div", {
className: classes['list-section-container']
}, children);
};
process.env.NODE_ENV !== "production" ? LinkSectionContainer.propTypes = {
children: PropTypes.node
} : void 0;
const LinkSection = _ref7 => {
let {
children,
headingContent,
headingTextProps
} = _ref7;
const layout = useMegaMenuLayout();
const menuID = useMegaMenuID();
const {
classes
} = useHeaderNavContext();
const headingID = `header-${menuID}-mega-menu-heading`;
const columnProps = {
[layout.alignSectionsBreakpoint]: true
};
return /*#__PURE__*/React.createElement(Column, _extends({
as: Menu2,
className: classes['link-section'],
"aria-labelledby": headingID,
xs: "12"
}, columnProps), /*#__PURE__*/React.createElement(LinkSectionHeading, {
id: headingID,
headingContent: headingContent,
headingTextProps: headingTextProps
}), /*#__PURE__*/React.createElement(LinkSectionContainer, null, /*#__PURE__*/React.createElement(Row, {
classes: compose({
row: cx(classes['link-section-list'])
}),
role: "list"
}, children)));
};
process.env.NODE_ENV !== "production" ? LinkSection.propTypes = {
children: PropTypes.node,
headingContent: PropTypes.node,
headingTextProps: PropTypes.shape({}),
columnProps: PropTypes.shape({})
} : void 0;
const LinkColumn = _ref8 => {
let {
children
} = _ref8;
const {
classes
} = useHeaderNavContext();
const layout = useMegaMenuLayout();
return /*#__PURE__*/React.createElement(Column, _extends({
role: "presentation",
className: classes['link-column'],
xs: "12",
md: true
}, layout.linkColumnProps), children);
};
process.env.NODE_ENV !== "production" ? LinkColumn.propTypes = {
children: PropTypes.node
} : void 0;
// Bold links that are only bold on mobile
const MainCategorySecondaryLink = props => /*#__PURE__*/React.createElement(MenuLink, props);
// Bold links that are emphasized with extra space and stay bold on mobile and desktop
const MainCategoryPrimaryLink = props => /*#__PURE__*/React.createElement(MenuLink, _extends({
bold: true,
spaceAccent: "desktop"
}, props));
const SeeAllSubCategoryLink = props => /*#__PURE__*/React.createElement(SubCategoryLink, _extends({
hide: "desktop"
}, props));
const SubCategoryLink = _ref9 => {
let {
hide,
...rest
} = _ref9;
const {
classes
} = useHeaderNavContext();
return /*#__PURE__*/React.createElement(Body2, {
as: "li",
className: cx(classes['sub-menu-item'], hide === 'desktop' && classes['hide-in-desktop'])
}, /*#__PURE__*/React.createElement(GenericMenuItemLink, rest));
};
process.env.NODE_ENV !== "production" ? SubCategoryLink.propTypes = {
hide: PropTypes.oneOf(['desktop'])
} : void 0;
export { LinkSection, MainCategoryLinkMenu, MainCategoryPrimaryLink, MainCategorySecondaryLink, LinkColumn, SubCategoryLink, SeeAllSubCategoryLink };