qpp-style 0.0.8 → 0.0.10

package/components/Header/HeaderMenuItem.jsx

@@ -0,0 +1,239 @@
+import React, { Fragment, useRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useWindowWidth, useHeaderState } from './hooks';
+import HeaderMenuLink from './HeaderMenuLink';
+import HeaderMenuButton from './HeaderMenuButton';
+import HeaderMenuSignOutButton from './HeaderMenuSignOutButton';
+import Accordion from '../Accordion';
+import { Chevron } from '../../lib/Chevron.jsx';
+
+const menuSizes = {
+  1: 315,
+  2: 650,
+  3: 890,
+  4: 1200,
+};
+
+const excludedClickOutClasses = [
+  'menu-dropdown-toggle',
+  'nav-link',
+  'nav-link-li',
+  'dropdown-description',
+  'dropdown-title',
+  'dropdown-title-chevron-container',
+  'signout-button',
+  'submenu-section',
+  'accordion',
+  'accordion-title',
+  'accordion-left-title',
+  'header-menu-btn',
+  'btn-navigation-icon',
+];
+
+const HeaderMenuItem = ({
+  handleClick,
+  isMobileMenuExpanded,
+  columns,
+  menuName,
+  rows,
+  name,
+  subtitle,
+  className,
+}) => {
+  const [isSubMenuFullWidth, setSubMenuFullWidth] = useState(false);
+  const [openMobileSubMenu, setOpenMobileSubMenu] = useState('');
+
+  const windowWidth = useWindowWidth();
+  const menuButtonRef = useRef(null);
+  const menuRef = useRef(null);
+  const { RouterLink, handleToggleMenu, currentOpenMenu, closeMenus } =
+    useHeaderState();
+  const numColumns = (columns || []).length;
+
+  const menuIdentifier = menuName || name;
+  const isOpen = menuIdentifier === currentOpenMenu;
+
+  useEffect(() => {
+    const isMobile = windowWidth < 768;
+    if (isOpen) {
+      const shouldSetFullWidth =
+        isMobile ||
+        menuSizes[numColumns] >
+          menuButtonRef.current.getBoundingClientRect().right;
+      setSubMenuFullWidth(shouldSetFullWidth);
+    }
+  }, [windowWidth, isOpen]);
+
+  useEffect(() => {
+    const listener = (event) => {
+      if (
+        !menuRef ||
+        !menuRef.current ||
+        menuRef.current.contains(event.target) ||
+        excludedClickOutClasses.some((className) =>
+          event?.target?.classList.contains(className)
+        )
+      ) {
+        return;
+      }
+      setOpenMobileSubMenu('');
+      closeMenus();
+    };
+    document.addEventListener('mousedown', listener);
+    return () => document.removeEventListener('mousedown', listener);
+  }, [menuRef]);
+
+  useEffect(() => {
+    if (!isMobileMenuExpanded || !isOpen) {
+      setOpenMobileSubMenu('');
+    }
+  }, [isMobileMenuExpanded, isOpen]);
+
+  return (
+    <li
+      key={`header-item-${menuIdentifier}`}
+      className={`header-item-${menuIdentifier}${
+        isSubMenuFullWidth ? ' full-width-menu' : ''
+      }${className ? ` ${className}` : ''}`}
+      ref={menuRef}
+    >
+      <button
+        ref={menuButtonRef}
+        className="menu-dropdown-toggle"
+        aria-label={`${name} navigation dropdown`}
+        aria-expanded={isOpen}
+        aria-controls={`nav-section-${menuIdentifier}`}
+        data-toggle="dropdown"
+        onClick={() => handleToggleMenu(menuIdentifier)}
+      >
+        <div className="dropdown-title-chevron-container">
+          <span className="dropdown-title">{name}</span>
+          <div className="chevron-container">
+            <Chevron focusable="false" />
+          </div>
+        </div>
+
+        <span className={`dropdown-description ${isOpen ? 'active' : ''}`}>
+          {subtitle}
+        </span>
+      </button>
+      <div
+        className={`nav-section${isOpen ? ' open' : ''}`}
+        id={`nav-section-${menuIdentifier}`}
+        hidden={!isOpen}
+        data-columns={numColumns}
+      >
+        {rows.map((columnContent, index) => {
+          return (
+            <ul key={`${menuIdentifier}-${index}`} className="nav-column">
+              {columnContent.map((c, cIndex) => {
+                return (
+                  <Fragment key={`${menuIdentifier}-${index}-${cIndex}`}>
+                    <li className="submenu-section">
+                      {c.heading && (
+                        <h3 className="submenu-heading">{c.heading}</h3>
+                      )}
+                      <ul>
+                        {c.items.map((item) => {
+                          const isSubLink = item.type === 'sublink';
+                          const componentsByType = {
+                            button: HeaderMenuButton,
+                            signout: HeaderMenuSignOutButton,
+                            link: HeaderMenuLink,
+                            sublink: HeaderMenuLink,
+                          };
+                          const SubMenuComponent = componentsByType[item.type];
+                          return (
+                            <li
+                              onClick={handleClick}
+                              key={`item-link-${item.name}`}
+                              className={
+                                isSubLink
+                                  ? 'nav-link-li sublink'
+                                  : 'nav-link-li'
+                              }
+                            >
+                              <SubMenuComponent
+                                href={item.href}
+                                name={item.name}
+                                RouterLink={RouterLink}
+                              />
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    </li>
+                    {name === 'MIPS' && (
+                      <li
+                        key={`${menuIdentifier}-mobile-${index}-${cIndex}`}
+                        className="submenu-section-mips-mobile"
+                        onClick={() => {
+                          setOpenMobileSubMenu(c.heading);
+                        }}
+                      >
+                        <Accordion
+                          title={c.heading}
+                          isOpen={
+                            isMobileMenuExpanded &&
+                            openMobileSubMenu === c.heading
+                          }
+                        >
+                          <ul>
+                            {c.items.map((item) => {
+                              const isSubLink = item.type === 'sublink';
+                              const componentsByType = {
+                                button: HeaderMenuButton,
+                                signout: HeaderMenuSignOutButton,
+                                link: HeaderMenuLink,
+                                sublink: HeaderMenuLink,
+                              };
+                              const SubMenuComponent =
+                                componentsByType[item.type];
+                              return (
+                                <li
+                                  onClick={handleClick}
+                                  key={`item-link-${item.name}`}
+                                  className={isSubLink ? 'sublink' : ''}
+                                >
+                                  <SubMenuComponent
+                                    href={item.href}
+                                    name={item.name}
+                                    RouterLink={RouterLink}
+                                  />
+                                </li>
+                              );
+                            })}
+                          </ul>
+                        </Accordion>
+                      </li>
+                    )}
+                  </Fragment>
+                );
+              })}
+            </ul>
+          );
+        })}
+      </div>
+    </li>
+  );
+};
+
+HeaderMenuItem.propTypes = {
+  columns: PropTypes.array,
+  menuName: PropTypes.string,
+  rows: PropTypes.array,
+  name: PropTypes.string.isRequired,
+  subtitle: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  handleClick: PropTypes.func.isRequired,
+  isMobileMenuExpanded: PropTypes.bool.isRequired,
+};
+HeaderMenuItem.defaultProps = {
+  menuName: '',
+  columns: [],
+  rows: [],
+  className: null,
+};
+
+export default HeaderMenuItem;

package/components/Header/HeaderMenuLink.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { submissionsUrl } from '../SideNav/helpers';
+import { useHeaderState } from './hooks';
+import { setUtagLink } from './utag-helpers';
+
+// exclude submissions urls
+const isNotExcluded = (href) => !href.includes(submissionsUrl);
+
+const HeaderMenuLink = ({ href, name }) => {
+  const { RouterLink, closeMenus } = useHeaderState();
+  if (RouterLink && isNotExcluded(href)) {
+    return (
+      <RouterLink
+        to={href}
+        onClick={() => {
+          closeMenus();
+          setUtagLink('main navbar', 'click', href);
+        }}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+        className="nav-link"
+      >
+        {name}
+      </RouterLink>
+    );
+  }
+  return (
+    <a
+      href={href}
+      className="nav-link"
+      data-track-category="TopNav"
+      data-track-action="click"
+      data-track-label={name}
+      onKeyDown={(e) => {
+        if (e.key === ' ' || e.code === 'Space') {
+          window.location.href = window.location.origin + href;
+          setUtagLink('main navbar', 'keydown', href);
+        }
+      }}
+      onClick={() => {
+        setUtagLink('main navbar', 'click', href);
+      }}
+    >
+      {name}
+    </a>
+  );
+};
+
+HeaderMenuLink.propTypes = {
+  href: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuLink;

package/components/Header/HeaderMenuSignOutButton.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { LogoutSession } from '../../session';
+import { setUtagLink } from './utag-helpers';
+import Modal from '../Modal/index';
+
+const useModal = () => {
+  const [open, setOpen] = useState(false);
+  const openModal = () => setOpen(true);
+  const closeModal = () => setOpen(false);
+  return [open, openModal, closeModal];
+};
+
+const HeaderMenuSignOutButton = ({ name }) => {
+  const [open, openModal, closeModal] = useModal();
+  const showLogoutWarning = () => {
+    LogoutSession(window);
+  };
+  return (
+    <>
+      <button
+        className="signout-button"
+        aria-label="Sign out"
+        onClick={openModal}
+        data-track-category="TopNav"
+        data-track-action="click"
+        data-track-label={name}
+      >
+        {name}
+      </button>
+      <Modal
+        useDesignSystem
+        isOpen={open}
+        title="Sign out"
+        onRequestClose={closeModal}
+        primary={{
+          title: 'Sign me out now',
+          onClick: () => {
+            showLogoutWarning();
+            setUtagLink('button', 'click', 'Sign me out now');
+          },
+        }}
+        secondary={{
+          title: 'Keep me signed in',
+          onClick: () => {
+            closeModal();
+            setUtagLink('button', 'click', 'Keep me signed in');
+          },
+        }}
+      >
+        <p>Are you sure you want to sign out?</p>
+      </Modal>
+    </>
+  );
+};
+
+HeaderMenuSignOutButton.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default HeaderMenuSignOutButton;

package/components/Header/HeaderMobileButton.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+
+const HeaderMobileButton = ({ isMobileMenuExpanded, handleClick }) => (
+  <button
+    className="mobile-menu-btn-new"
+    type="button"
+    data-toggle="collapse"
+    data-target="#nav-mobile"
+    aria-label="Navigation menu"
+    aria-expanded={isMobileMenuExpanded ? 'true' : 'false'}
+    aria-controls="nav-mobile"
+    onClick={handleClick}
+  >
+    {!isMobileMenuExpanded && (
+      <div className="icon">
+        <span className="icon-bar" />
+        <span className="icon-bar" />
+        <span className="icon-bar" />
+      </div>
+    )}
+    {isMobileMenuExpanded && (
+      <svg className="close-icon" aria-hidden="true">
+        <CloseXIcon />
+      </svg>
+    )}
+    <div className="toggle-text">Menu</div>
+  </button>
+);
+
+HeaderMobileButton.propTypes = {
+  isMobileMenuExpanded: PropTypes.bool.isRequired,
+  handleClick: PropTypes.func.isRequired,
+};
+
+export default HeaderMobileButton;