qpp-style 9.15.2-beta.4 → 9.16.0

package/components/GovBanner/index.js

@@ -0,0 +1,109 @@
+import React, { useState } from 'react'
+
+const GovBanner = () => {
+  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' : ''}` }
+        >
+          <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'
+              />
+            </div>
+            <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>
+            </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) }
+            >
+              <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 }
+        >
+          <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'
+              />
+              <div>
+                <p>
+                  <strong> Official websites use .gov </strong>
+                  <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'>
+              <img
+                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'>
+                    <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'
+                    >
+                      <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'
+                      />
+                    </svg>
+                  </span>
+                  ) or <strong>https://</strong> means you’ve safely connected
+                  to the .gov website. Share sensitive information only on
+                  official, secure websites.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default GovBanner

package/components/Header/HeaderContainer.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import HeaderLogo from './HeaderLogo';
 import NotificationBanner from '../NotificationBanner';
+import GovBanner from '../GovBanner';
 
 /**
  * Accessibility enhancement that moves focus to an element for "Skip" links
@@ -38,7 +39,8 @@ const HeaderContainer = ({
         Skip to sidebar
       </a>
     )}
-    {!isIESupportPage && <NotificationBanner />}
+    <GovBanner />
+    {!isIESupportPage && <NotificationBanner />}    
     <header id="top" className={showCancelButton ? 'show-cancel-button' : ''}>
       <HeaderLogo />
       {children}