@xo-union/tk-component-header-nav/lib/components/HeaderNav/MegaMenu/LinkSection.cjs.js

"use strict";

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
  value: true
});
exports.SubCategoryLink = exports.SeeAllSubCategoryLink = exports.MainCategorySecondaryLink = exports.MainCategoryPrimaryLink = exports.MainCategoryLinkMenu = exports.LinkSection = exports.LinkColumn = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _tkComponentGrid = require("@xo-union/tk-component-grid");
var _tkUiTypography = require("@xo-union/tk-ui-typography");
var _reactCssModules = require("@xo-union/react-css-modules");
var _tkComponentIcons = _interopRequireDefault(require("@xo-union/tk-component-icons"));
var _componentBlankButton = _interopRequireDefault(require("@xo-union/component-blank-button"));
var _MegaMenuCoreCjs = require("./MegaMenuCore.cjs.js");
var _ContextCjs = require("../Context.cjs.js");
var _indexCjs = _interopRequireDefault(require("../Link/index.cjs.js"));
var _useToggleCjs = require("../useToggle.cjs.js");
var _MenuSectionsCjs = require("./MenuSections.cjs.js");
const MainCategoryLinkMenuButton = _ref => {
  let {
    isOpen,
    onClick,
    children,
    ...props
  } = _ref;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement(_tkUiTypography.Body2, (0, _extends2.default)({
    as: _componentBlankButton.default,
    className: (0, _classnames.default)(classes['sub-menu-button'], classes['menu-item-interactive-item']),
    onClick: onClick,
    bold: true,
    "aria-expanded": isOpen,
    type: "button"
  }, props), /*#__PURE__*/_react.default.createElement("span", null, children), /*#__PURE__*/_react.default.createElement(_tkComponentIcons.default, {
    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.default.node,
  isOpen: _propTypes.default.bool,
  onClick: _propTypes.default.func
} : void 0;
const MainCategoryLinkMenuHeading = _ref2 => {
  let {
    children,
    ...props
  } = _ref2;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement(_tkUiTypography.Body2, (0, _extends2.default)({
    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.default.node
} : void 0;
const MainCategoryLinkMenu = props => {
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  const {
    className,
    headingContent,
    href,
    children,
    linkProps,
    id,
    isOpenByDefault = false
  } = props;
  const [isOpen, menuActions] = (0, _useToggleCjs.useToggle)(isOpenByDefault);
  const headingID = `${id}-sub-menu-heading`;
  return /*#__PURE__*/_react.default.createElement("div", {
    role: "listitem",
    className: (0, _classnames.default)(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.default.createElement(MainCategoryLinkMenuButton, {
    isOpen: isOpen,
    onClick: menuActions.toggle
  }, headingContent), /*#__PURE__*/_react.default.createElement(_MenuSectionsCjs.Menu3, {
    "aria-labelledby": headingID
  }, /*#__PURE__*/_react.default.createElement(MainCategoryLinkMenuHeading, {
    id: headingID
  }, /*#__PURE__*/_react.default.createElement(_indexCjs.default, (0, _extends2.default)({
    href: href,
    className: classes['menu-item-interactive-item']
  }, linkProps), headingContent)), /*#__PURE__*/_react.default.createElement("ul", {
    role: "list",
    className: (0, _classnames.default)(classes['sub-menu-nav-list'])
  }, children)));
};
exports.MainCategoryLinkMenu = MainCategoryLinkMenu;
process.env.NODE_ENV !== "production" ? MainCategoryLinkMenu.propTypes = {
  children: _propTypes.default.node,
  className: _propTypes.default.string,
  headingContent: _propTypes.default.node,
  href: _propTypes.default.string,
  menuID: _propTypes.default.string,
  isOpenByDefault: _propTypes.default.bool,
  linkProps: _propTypes.default.shape({}),
  id: _propTypes.default.string
} : void 0;
MainCategoryLinkMenu.defaultProps = {
  isOpenByDefault: false
};
const MenuLink = _ref3 => {
  let {
    pushSelfDown,
    spaceAccent,
    hide,
    bold,
    className,
    ...rest
  } = _ref3;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  const spaceAccentDesktopClass = classes['menu-item-space-accent-on-desktop'];
  const pushSelfDownDesktopClass = classes['menu-item-push-self-down-on-desktop'];
  return /*#__PURE__*/_react.default.createElement(_tkUiTypography.Body2, {
    role: "listitem",
    className: (0, _classnames.default)(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.default.createElement(GenericMenuItemLink, rest));
};
process.env.NODE_ENV !== "production" ? MenuLink.propTypes = {
  pushSelfDown: _propTypes.default.oneOf(['desktop']),
  hide: _propTypes.default.oneOf(['desktop']),
  spaceAccent: _propTypes.default.oneOf(['desktop']),
  bold: _propTypes.default.oneOf([true, 'mobile']),
  className: _propTypes.default.string,
  children: _propTypes.default.node
} : void 0;
const GenericMenuItemLink = _ref4 => {
  let {
    children,
    leftIcon,
    rightIcon,
    ...props
  } = _ref4;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement(_indexCjs.default, (0, _extends2.default)({}, props, {
    className: (0, _classnames.default)(classes['menu-item-interactive-item'])
  }), leftIcon && /*#__PURE__*/_react.default.createElement(_tkComponentIcons.default, {
    className: classes['menu-item-left-icon'],
    name: leftIcon,
    size: "sm",
    "aria-hidden": "true"
  }), children, rightIcon && /*#__PURE__*/_react.default.createElement(_tkComponentIcons.default, {
    className: classes['menu-item-right-icon'],
    name: rightIcon,
    size: "sm",
    "aria-hidden": "true"
  }));
};
process.env.NODE_ENV !== "production" ? GenericMenuItemLink.propTypes = {
  children: _propTypes.default.node,
  leftIcon: _propTypes.default.string,
  rightIcon: _propTypes.default.string
} : void 0;
const LinkSectionHeading = _ref5 => {
  let {
    headingContent,
    headingTextProps,
    id
  } = _ref5;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement(_tkUiTypography.Subhead, {
    bold: true,
    role: "heading",
    "aria-level": "1",
    as: "div",
    className: classes['heading-text-container'],
    id: id
  }, /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
    className: classes['heading-text']
  }, headingTextProps, {
    "data-trackable": ""
  }), headingContent, /*#__PURE__*/_react.default.createElement("div", {
    "aria-hidden": "true",
    className: classes['arrow-long-right']
  })));
};
process.env.NODE_ENV !== "production" ? LinkSectionHeading.propTypes = {
  children: _propTypes.default.node,
  headingContent: _propTypes.default.string,
  headingTextProps: _propTypes.default.shape({}),
  id: _propTypes.default.string
} : void 0;
const LinkSectionContainer = _ref6 => {
  let {
    children
  } = _ref6;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes['list-section-container']
  }, children);
};
process.env.NODE_ENV !== "production" ? LinkSectionContainer.propTypes = {
  children: _propTypes.default.node
} : void 0;
const LinkSection = _ref7 => {
  let {
    children,
    headingContent,
    headingTextProps
  } = _ref7;
  const layout = (0, _MegaMenuCoreCjs.useMegaMenuLayout)();
  const menuID = (0, _MegaMenuCoreCjs.useMegaMenuID)();
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  const headingID = `header-${menuID}-mega-menu-heading`;
  const columnProps = {
    [layout.alignSectionsBreakpoint]: true
  };
  return /*#__PURE__*/_react.default.createElement(_tkComponentGrid.Column, (0, _extends2.default)({
    as: _MenuSectionsCjs.Menu2,
    className: classes['link-section'],
    "aria-labelledby": headingID,
    xs: "12"
  }, columnProps), /*#__PURE__*/_react.default.createElement(LinkSectionHeading, {
    id: headingID,
    headingContent: headingContent,
    headingTextProps: headingTextProps
  }), /*#__PURE__*/_react.default.createElement(LinkSectionContainer, null, /*#__PURE__*/_react.default.createElement(_tkComponentGrid.Row, {
    classes: (0, _reactCssModules.compose)({
      row: (0, _classnames.default)(classes['link-section-list'])
    }),
    role: "list"
  }, children)));
};
exports.LinkSection = LinkSection;
process.env.NODE_ENV !== "production" ? LinkSection.propTypes = {
  children: _propTypes.default.node,
  headingContent: _propTypes.default.node,
  headingTextProps: _propTypes.default.shape({}),
  columnProps: _propTypes.default.shape({})
} : void 0;
const LinkColumn = _ref8 => {
  let {
    children
  } = _ref8;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  const layout = (0, _MegaMenuCoreCjs.useMegaMenuLayout)();
  return /*#__PURE__*/_react.default.createElement(_tkComponentGrid.Column, (0, _extends2.default)({
    role: "presentation",
    className: classes['link-column'],
    xs: "12",
    md: true
  }, layout.linkColumnProps), children);
};
exports.LinkColumn = LinkColumn;
process.env.NODE_ENV !== "production" ? LinkColumn.propTypes = {
  children: _propTypes.default.node
} : void 0;

// Bold links that are only bold on mobile
const MainCategorySecondaryLink = props => /*#__PURE__*/_react.default.createElement(MenuLink, props);

// Bold links that are emphasized with extra space and stay bold on mobile and desktop
exports.MainCategorySecondaryLink = MainCategorySecondaryLink;
const MainCategoryPrimaryLink = props => /*#__PURE__*/_react.default.createElement(MenuLink, (0, _extends2.default)({
  bold: true,
  spaceAccent: "desktop"
}, props));
exports.MainCategoryPrimaryLink = MainCategoryPrimaryLink;
const SeeAllSubCategoryLink = props => /*#__PURE__*/_react.default.createElement(SubCategoryLink, (0, _extends2.default)({
  hide: "desktop"
}, props));
exports.SeeAllSubCategoryLink = SeeAllSubCategoryLink;
const SubCategoryLink = _ref9 => {
  let {
    hide,
    ...rest
  } = _ref9;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement(_tkUiTypography.Body2, {
    as: "li",
    className: (0, _classnames.default)(classes['sub-menu-item'], hide === 'desktop' && classes['hide-in-desktop'])
  }, /*#__PURE__*/_react.default.createElement(GenericMenuItemLink, rest));
};
exports.SubCategoryLink = SubCategoryLink;
process.env.NODE_ENV !== "production" ? SubCategoryLink.propTypes = {
  hide: _propTypes.default.oneOf(['desktop'])
} : void 0;