qpp-style 9.16.9 → 9.18.0

package/components/GovBanner/index.js

@@ -1,95 +1,103 @@
-import React, { useState } from 'react'
+import React, { useState } from 'react';
 
 const GovBanner = () => {
-  const [hideContent, setHideContent] = useState(true)
+  const [hideContent, setHideContent] = useState(true);
 
   return (
-    <section className='qpp-c-gov-banner' aria-label='Official government website'>
-      <div className='qpp-c-gov-banner__expand-wrap'>
-        <header 
-          className={ `qpp-c-gov-banner__header ${!hideContent ? 'qpp-c-gov-banner__header--expanded' : ''}` }
+    <section
+      className="qpp-c-gov-banner"
+      aria-label="Official government website"
+    >
+      <div className="qpp-c-gov-banner__expand-wrap">
+        <header
+          className={`qpp-c-gov-banner__header ${
+            !hideContent ? 'qpp-c-gov-banner__header--expanded' : ''
+          }`}
         >
-          <div className='qpp-c-gov-banner__inner'>
-            <div className='qpp-c-gov-banner__header-col1'>
+          <div className="qpp-c-gov-banner__inner">
+            <div className="qpp-c-gov-banner__header-col1">
               <img
-                className='qpp-c-gov-banner__header-flag'
-                src='/images/us_flag_small.png'
-                alt='U.S. flag'
+                className="qpp-c-gov-banner__header-flag"
+                src="/images/us_flag_small.png"
+                alt="U.S. flag"
               />
             </div>
-            <div className='qpp-c-gov-banner__header-col2'>
-              <p className='qpp-c-gov-banner__header-text'>
+            <div className="qpp-c-gov-banner__header-col2">
+              <p className="qpp-c-gov-banner__header-text">
                 An official website of the United States government
               </p>
-              <p className='qpp-c-gov-banner__header-action' aria-hidden='true'>
-                <span className='qpp-c-gov-banner__header-action-text qpp-c-button qpp-c-button--text'>Here’s how you know</span><span className='qpp-c-gov-banner__header-action-icon qpp-c-button qpp-c-button--text'></span>
+              <p className="qpp-c-gov-banner__header-action" aria-hidden="true">
+                <span className="qpp-c-gov-banner__header-action-text qpp-c-button qpp-c-button--text">
+                  Here’s how you know
+                </span>
+                <span className="qpp-c-gov-banner__header-action-icon qpp-c-button qpp-c-button--text"></span>
               </p>
             </div>
             <button
-              className='qpp-c-gov-banner__button qpp-c-button qpp-c-button--icon-after qpp-c-button--text'
-              aria-expanded={ !hideContent }
-              aria-controls='qpp-gov-banner-content'
-              onClick={ () => setHideContent(!hideContent) }
+              className="qpp-c-gov-banner__button qpp-c-button qpp-c-button--icon-after qpp-c-button--text"
+              aria-expanded={!hideContent}
+              aria-controls="qpp-gov-banner-content"
+              onClick={() => setHideContent(!hideContent)}
             >
-              <span className='qpp-c-gov-banner__button-text'>Here’s how you know</span>
+              <span className="qpp-c-gov-banner__button-text">
+                Here’s how you know
+              </span>
             </button>
           </div>
         </header>
         <div
-          className='qpp-c-gov-banner__content'
-          id='qpp-gov-banner-content'
-          hidden={ hideContent }
+          className="qpp-c-gov-banner__content"
+          id="qpp-gov-banner-content"
+          hidden={hideContent}
         >
-          <div className='qpp-u-display--flex qpp-u-flex-direction--column qpp-u-xs-flex-direction--row qpp-u-flex-gap--24'>
-            <div className='qpp-c-gov-banner__guidance'>
+          <div className="qpp-u-display--flex qpp-u-flex-direction--column qpp-u-xs-flex-direction--row qpp-u-flex-gap--24">
+            <div className="qpp-c-gov-banner__guidance">
               <img
-                className='qpp-c-gov-banner__icon'
-                src='/images/icon-dot-gov.svg'
-                role='img'
-                alt=''
-                aria-hidden='true'
+                className="qpp-c-gov-banner__icon"
+                src="/images/icon-dot-gov.svg"
+                role="img"
+                alt=""
+                aria-hidden="true"
               />
               <div>
                 <p>
                   <strong> Official websites use .gov </strong>
-                  <br />
-                  A <strong>.gov</strong> website belongs to an official
+                  <br />A <strong>.gov</strong> website belongs to an official
                   government organization in the United States.
                 </p>
               </div>
             </div>
-            <div className='qpp-c-gov-banner__guidance'>
+            <div className="qpp-c-gov-banner__guidance">
               <img
-                className='qpp-c-gov-banner__icon'
-                src='/images/icon-https.svg'
-                role='img'
-                alt=''
-                aria-hidden='true'
+                className="qpp-c-gov-banner__icon"
+                src="/images/icon-https.svg"
+                role="img"
+                alt=""
+                aria-hidden="true"
               />
               <div>
                 <p>
                   <strong> Secure .gov websites use HTTPS </strong>
-                  <br />
-                  A <strong>lock</strong> (
-                  <span className='icon-lock'>
+                  <br />A <strong>lock</strong> (
+                  <span className="icon-lock">
                     <svg
-                      xmlns='http://www.w3.org/2000/svg'
-                      width='52'
-                      height='64'
-                      viewBox='0 0 52 64'
-                      className='qpp-c-gov-banner__lock-image '
-                      role='img'
-                      aria-labelledby='banner-lock-title-default banner-lock-description-default'
-                      focusable='false'
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="52"
+                      height="64"
+                      viewBox="0 0 52 64"
+                      className="qpp-c-gov-banner__lock-image "
+                      role="img"
+                      aria-labelledby="banner-lock-title-default banner-lock-description-default"
+                      focusable="false"
                     >
-                      <title id='banner-lock-title-default'>Lock</title>
-                      <desc id='banner-lock-description-default'>
+                      <title id="banner-lock-title-default">Lock</title>
+                      <desc id="banner-lock-description-default">
                         A locked padlock
                       </desc>
                       <path
-                        fill='#000000'
-                        fillRule='evenodd'
-                        d='M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z'
+                        fill="#000000"
+                        fillRule="evenodd"
+                        d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                       />
                     </svg>
                   </span>
@@ -103,7 +111,7 @@ const GovBanner = () => {
         </div>
       </div>
     </section>
-  )
-}
+  );
+};
 
-export default GovBanner
+export default GovBanner;

package/components/Header/HeaderContainer.jsx

@@ -40,7 +40,7 @@ const HeaderContainer = ({
       </a>
     )}
     <GovBanner />
-    {!isIESupportPage && <NotificationBanner />}    
+    {!isIESupportPage && <NotificationBanner />}
     <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
       <HeaderLogo />
       {children}

package/components/Header/HeaderMenuItem.jsx

@@ -77,7 +77,7 @@ const HeaderMenuItem = ({
       ) {
         return;
       }
-      setOpenMobileSubMenu('')
+      setOpenMobileSubMenu('');
       closeMenus();
     };
     document.addEventListener('mousedown', listener);
@@ -85,10 +85,10 @@ const HeaderMenuItem = ({
   }, [menuRef]);
 
   useEffect(() => {
-    if (!isMobileMenuExpanded || !isOpen){
-      setOpenMobileSubMenu('')
+    if (!isMobileMenuExpanded || !isOpen) {
+      setOpenMobileSubMenu('');
     }
-  }, [isMobileMenuExpanded, isOpen])
+  }, [isMobileMenuExpanded, isOpen]);
 
   return (
     <li
@@ -148,7 +148,11 @@ const HeaderMenuItem = ({
                             <li
                               onClick={handleClick}
                               key={`item-link-${item.name}`}
-                              className={isSubLink ? 'nav-link-li sublink' : 'nav-link-li'}
+                              className={
+                                isSubLink
+                                  ? 'nav-link-li sublink'
+                                  : 'nav-link-li'
+                              }
                             >
                               <SubMenuComponent
                                 href={item.href}
@@ -170,7 +174,10 @@ const HeaderMenuItem = ({
                       >
                         <Accordion
                           title={c.heading}
-                          isOpen={isMobileMenuExpanded && openMobileSubMenu === c.heading}
+                          isOpen={
+                            isMobileMenuExpanded &&
+                            openMobileSubMenu === c.heading
+                          }
                         >
                           <ul>
                             {c.items.map((item) => {

package/components/Header/HeaderMenuLink.js

@@ -33,6 +33,12 @@ const HeaderMenuLink = ({ href, name }) => {
       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);
       }}

package/components/Modal/Modal.jsx

@@ -72,7 +72,7 @@ const Modal = ({
         id="modal-body"
         className="qpp-c-modal__body"
         ref={contentRef}
-        tabIndex={overflowSeparator ? "0" : undefined}
+        tabIndex={overflowSeparator ? '0' : undefined}
       >
         {children}
       </div>

package/components/NotificationBanner/CollapsedView.js

@@ -0,0 +1,32 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { BellOutline } from '../../lib/SvgComponents.jsx';
+
+const CollapsedView = (
+  { expandNotification, label },
+  { collapsedWrapperRef, collapsedBannerRef }
+) => {
+  return (
+    <div
+      ref={collapsedWrapperRef}
+      className={`notification-banner-wrapper collapsed-view`}
+      onClick={expandNotification}
+    >
+      <button ref={collapsedBannerRef} className={`notification-banner-label`}>
+        {label}
+        <span className="bell-icon">
+          <svg aria-hidden="true" focusable="false">
+            <BellOutline />
+          </svg>
+        </span>
+      </button>
+    </div>
+  );
+};
+
+CollapsedView.propTypes = {
+  expandNotification: PropTypes.func,
+  label: PropTypes.string,
+};
+
+export default forwardRef(CollapsedView);

package/components/NotificationBanner/ExpandedView.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SanitizedContent from '../SanitizedContent';
+import { CloseXIcon } from '../../lib/SvgComponents.jsx';
+
+const ExpandedView = ({
+  label,
+  expanded,
+  content,
+  dismissable,
+  collapseNotification,
+}) => {
+  return (
+    <div className={`notification-banner-wrapper expanded-view`}>
+      <div className="notification-banner-label">{label}</div>
+      <div className="notification-banner-content">
+        <SanitizedContent
+          html={expanded ? content : '<p>No notifications to display</p>'}
+        />
+      </div>
+      {expanded && dismissable && (
+        <button
+          onClick={collapseNotification}
+          type="button"
+          className="notification-banner-close"
+        >
+          <svg className="close-icon" aria-hidden="true" focusable="false">
+            <CloseXIcon />
+          </svg>
+          <span className="sr-only">Close</span>
+        </button>
+      )}
+    </div>
+  );
+};
+
+ExpandedView.propTypes = {
+  label: PropTypes.string,
+  expanded: PropTypes.bool,
+  content: PropTypes.string,
+  dismissable: PropTypes.bool,
+  collapseNotification: PropTypes.func,
+};
+
+export default ExpandedView;

package/components/NotificationBanner/NotificationBanner.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import NotificationBanner from './index';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withKnobs } from '@storybook/addon-knobs';
 
 export default {
   title: 'NotificationBanner',
@@ -11,11 +11,11 @@ export default {
 export const ExampleNotificationBanner = () => (
   <NotificationBanner
     result={{
-      content: 'CONTENT',
-      label: 'Label',
-      name: 'name',
+      display: true,
+      dismissable: true,
+      content: 'test',
+      label: 'Update',
       color: 'blue',
-      dismissable: boolean('dismissable', false),
     }}
   />
 );