qpp-style 0.0.9 → 0.0.10

package/components/Header/HeaderMenuItem.jsx

@@ -1,99 +1,239 @@
-import React, { useRef, useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
+import React, { Fragment, useRef, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 
-import { useWindowWidth } from './hooks'
-import HeaderMenuLink from './HeaderMenuLink'
-import HeaderMenuButton from './HeaderMenuButton'
-import HeaderMenuSignOutButton from './HeaderMenuSignOutButton'
+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,
-}
+  1: 315,
+  2: 650,
+  3: 890,
+  4: 1200,
+};
 
-const HeaderMenuItem = ({ columns, isOpen, handleToggleMenu, name, subtitle }) => {
+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 windowWidth = useWindowWidth()
-  const menuToggle = useRef(null)
-  const numColumns = (columns || []).length
+  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
+    const isMobile = windowWidth < 768;
     if (isOpen) {
-      const shouldSetFullWidth = isMobile || menuSizes[numColumns] > menuToggle.current.getBoundingClientRect().right
-      setSubMenuFullWidth(shouldSetFullWidth)
+      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('');
     }
-  }, [windowWidth, isOpen])
+  }, [isMobileMenuExpanded, isOpen]);
+
   return (
-    <li key={`header-item-${name}`} className={`header-item-${name}${isSubMenuFullWidth ? ' full-width-menu': ''}`}>
+    <li
+      key={`header-item-${menuIdentifier}`}
+      className={`header-item-${menuIdentifier}${
+        isSubMenuFullWidth ? ' full-width-menu' : ''
+      }${className ? ` ${className}` : ''}`}
+      ref={menuRef}
+    >
       <button
-        ref={menuToggle}
+        ref={menuButtonRef}
         className="menu-dropdown-toggle"
+        aria-label={`${name} navigation dropdown`}
         aria-expanded={isOpen}
-        aria-controls={`nav-section-${name}`}
+        aria-controls={`nav-section-${menuIdentifier}`}
         data-toggle="dropdown"
-        onClick={handleToggleMenu}
+        onClick={() => handleToggleMenu(menuIdentifier)}
       >
-        <span className="dropdown-title">{name}</span>
-        <span className="dropdown-description">
+        <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-${name}`} hidden={!isOpen} data-columns={numColumns} style={{ gridTemplateColumns: `repeat(${numColumns}, 1fr)`  }}>
-        {columns.map((columnContent, index) => {
+      <div
+        className={`nav-section${isOpen ? ' open' : ''}`}
+        id={`nav-section-${menuIdentifier}`}
+        hidden={!isOpen}
+        data-columns={numColumns}
+      >
+        {rows.map((columnContent, index) => {
           return (
-            <ul key={`${name}-${index}`} className="nav-column">
+            <ul key={`${menuIdentifier}-${index}`} className="nav-column">
               {columnContent.map((c, cIndex) => {
                 return (
-                  <li key={`${name}-${index}-${cIndex}`} className="submenu-section">
-                    {c.heading && (
-                      <h3 className="submenu-heading">{c.heading}</h3>
+                  <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>
                     )}
-                    <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 
-                            key={`item-link-${item.name}`}
-                            className={isSubLink ? 'sublink' : ''}
-                          >
-                            <SubMenuComponent href={item.href} name={item.name} />
-                          </li>
-                        )
-                      })}
-                    </ul>
-                  </li>
-                )
+                  </Fragment>
+                );
               })}
             </ul>
-          )
+          );
         })}
       </div>
     </li>
-  )
-}
-
+  );
+};
 
 HeaderMenuItem.propTypes = {
   columns: PropTypes.array,
-  handleToggleMenu: PropTypes.func,
-  isOpen: PropTypes.bool,
+  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: [],
-  handleToggleMenu: null,
-  isOpen: false,
-}
+  rows: [],
+  className: null,
+};
 
-export default HeaderMenuItem
+export default HeaderMenuItem;

package/components/Header/HeaderMenuLink.js

@@ -1,16 +1,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { submissionsUrl } from '../SideNav/helpers';
+import { useHeaderState } from './hooks';
+import { setUtagLink } from './utag-helpers';
 
-const HeaderMenuLink = ({ href, name }) => (
-  <a
-    href={href}
-    data-track-category="TopNav"
-    data-track-action="click"
-    data-track-label={name}
-  >
-    {name}
-  </a>
-);
+// 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,

package/components/Header/HeaderMenuSignOutButton.js

@@ -1,21 +1,57 @@
-import React from 'react';
+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"
-      onClick={showLogoutWarning}
-      data-track-category="TopNav"
-      data-track-action="click"
-      data-track-label={name}
-    >
-      {name}
-    </button>
+    <>
+      <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>
+    </>
   );
 };
 

package/components/Header/HeaderMobileButton.js

@@ -1,21 +1,30 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { CloseXIcon } from '../../lib/SvgComponents.jsx';
 
 const HeaderMobileButton = ({ isMobileMenuExpanded, handleClick }) => (
   <button
-    className="mobile-menu-btn"
+    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}
   >
-    <div className="icon">
-      <span className="icon-bar" />
-      <span className="icon-bar" />
-      <span className="icon-bar" />
-    </div>
+    {!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>
 );