Add usa banner component (#874)

* [WNMGDS-480] Add usa banner component (#869)

* move scss to design system

* add doc site page

* Update doc page

* Add examples

* Add component

* Add e2e test

* PR feedback

* Add USA flag as SVG

* remove PNG version of flag and update SVG

* Add USA banner to export list

* Update examples

* Doc page feedback

* Add banner icons

* Update styles and remove utilities

* Adding React Icons

* Add lock SVG

* Export icons

* Update styles

* Update component

* Rename icons

* Remove icons from export

* Remove component from doc site

* Update doc site header

* Add color variables for banner bg and text

* Add babel-plugin-inline-react-svg dep

* Remove JSX SVG icons

* Add classes to SVGs

* Update SVG references

* Update example

* Remove props from Doc

* Remove props and update toggle

* Add and update tests

* Remove classes from SVGs in images folder

* Add class names to SVGs

* Move theme variables to component SCSS

* Delete doc site banner images that are not needed

* Update HTML example to use SVGs

* Remove old banner props from doc site header

* Update banner

* Test updates

* Update packages/design-system/src/components/UsaBanner/UsaBanner.e2e.test.js

Co-authored-by: Ni Chia <[email protected]>

* Style updates for IE11

* Add Draft status

Co-authored-by: bernardwang <[email protected]>
Co-authored-by: Ni Chia <[email protected]>

* [WNMGDS-698] Add Spanish translation prop to US banner component (#888)

* Add prop for rendering USA banner in Spanish

* Add testing for localeSpanish prop

* Update to check for localeSpanish prop only once

* Update to use locale prop instead of localeSpanish

* Update test and snapshot

* Add typescript definition file

* Add the react prop info to the doc page

* Add Spanish version of usa banner to js examples

* Move banner text to .json file

* Revert back to svg path references in HTML example

* Update test

* Rename variables

* Update SVG references in HTML example

* Wrap multipl svg elements by <g> elements

* Update html example and snapshots from test

* Add Spanish banner to html example

* Update html example

Co-authored-by: Scott Weber <[email protected]>

* [WNMGDS-718] Add responsive styling to USA banner component (#904)

* Add responsiveness to small viewport

* Fix banner-content padding

* Show close-alt.svg on background

* Fix flag from squishing on small view

* Fix banner header from wrapping incorrectly

* Update html example

* Update snapshots

* Tidy scss code variables

* Replace background property with individual background-image properties and expand banner by default for HTML example

* [WMNGDS-722] Update Banner scss (#916)

* Update banner scss

* Update svg file for accessibility

* Update banner examples and test

* Fix svgmin options to keep accessiblity flags

* Update docs site examples

* Add loadash to generate uniqueID

* Update svgmin option to keep Role attribute

* Replace rem unit with px

* Fix -x

* Fix accessiblity issue with inline svg file

* Update html example and test file

* Add role prop to inline SVG file

* Add className prop and update as per feedback

* Update test

* Add lang attribute for Spanish language and update aria-label to Spanish

* Add Spanish version for the Flag and Lock SVG icons

* Update tes snapshots

* Update packages/design-system-docs/src/pages/components/UsaBanner/_UsaBanner.docs.scss

Co-authored-by: Scott Weber <[email protected]>

* Update packages/design-system/src/components/UsaBanner/UsaBanner.jsx

Co-authored-by: Scott Weber <[email protected]>

* Update packages/design-system/src/types/UsaBanner/UsaBanner.d.ts

Co-authored-by: Scott Weber <[email protected]>

Co-authored-by: Scott Weber <[email protected]>
Co-authored-by: Ni Chia <[email protected]>

lerna.json

@@ -5,9 +5,7 @@
     }
   },
   "npmClient": "yarn",
-  "packages": [
-    "packages/*"
-  ],
+  "packages": ["packages/*"],
   "ignoreChanges": [
     "packages/stylelint-config-design-system/**",
     "packages/eslint-config-design-system/**"

packages/design-system-docs/src/pages/components/UsaBanner/UsaBanner.example.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { UsaBanner } from '@cmsgov/design-system';
+
+ReactDOM.render(
+  <div>
+    <h6 className="preview__label">English banner</h6>
+    <UsaBanner />
+    <h6 className="preview__label">Spanish banner</h6>
+    <UsaBanner locale="es" />
+  </div>,
+  document.getElementById('js-example')
+);

packages/design-system-docs/src/pages/components/UsaBanner/_UsaBanner.docs.scss

@@ -0,0 +1,45 @@
+/*
+USA banner
+
+@status Draft
+
+The USA banner identifies official websites of government organizations in the United States. It also helps visitors understand how to tell that a website is both official and secure.
+
+@uswds https://designsystem.digital.gov/components/banner/
+
+Markup: usabanner.example.html
+
+Style guide: components.usa-banner
+*/
+
+/*
+`<UsaBanner>`
+
+@react-example UsaBanner.example.jsx
+
+@react-props UsaBanner.jsx
+
+Style guide: components.usa-banner.react
+*/
+
+/*
+---
+
+### When to use
+
+- To identify as an official government site. Most government sites should use the banner.
+
+### When to consider alternatives
+
+- If you don't use a .gov domain and HTTPS. The banner text identifies .gov domains and HTTPS as indicators that a website is an official government website. Use the banner only if your site uses both the proper TLD and HTTPS.
+- Any time it would be misleading. The banner should be used to reduce confusion. Avoid using the banner on any site meant only for testing or otherwise not meant to be identified as an official government website.
+
+### Usage
+
+- Use the provided text without customization. The banner is most effective as an identifier and a learning tool when its message is consistent across government websites.
+- Show the banner on every page. Use the banner at the top of every page of a site. It can be confusing or misleading if it appears on some pages and not others.
+- Avoid distraction. The banner appears on every page of your site. Choose background colors that fit with your site theme and avoid color combinations that draw excessive attention to the banner.
+- Keep the text up-to-date. Use the most current version of the banner.
+
+Style guide: components.usa-banner.guidance
+*/

packages/design-system-docs/src/pages/components/UsaBanner/usabanner.example.html

@@ -0,0 +1,172 @@
+<h6 class="preview__label">English banner</h6>
+<section class="ds-c-usa-banner" aria-label="Official government website">
+  <header class="ds-c-usa-banner__header">
+    <p class="ds-c-usa-banner__header-text">
+      <svg
+        role="img"
+        width="16"
+        height="11"
+        xmlns="http://www.w3.org/2000/svg"
+        class="ds-c-usa-banner__header-flag"
+        aria-labelledby="banner-flag-title-1 banner-flag-description-1"
+        focusable="false"
+      >
+        <title id="banner-flag-title-1">Flag</title>
+        <desc id="banner-flag-description-1">U.S. flag</desc>
+        <use href="{{root}}/images/usa-banner-flag.svg#svg"></use>
+      </svg>
+    </p>
+    <p class="ds-c-usa-banner__header-text">
+      <span>An official website of the United States government</span>
+      <span class="ds-c-usa-banner__header-action" aria-hidden="true">Here’s how you know</span>
+      <button class="ds-c-usa-banner__button" aria-expanded="true" aria-controls="gov-banner">
+        <span class="ds-c-usa-banner__button-text">Here’s how you know</span>
+      </button>
+    </p>
+  </header>
+  <div class="ds-c-usa-banner__content" id="gov-banner">
+    <div
+      class="ds-u-display--flex ds-u-flex-direction--column ds-u-sm-flex-direction--row ds-u-flex-wrap--nowrap"
+    >
+      <div class="ds-c-usa-banner__guidance">
+        <svg
+          class="ds-c-usa-banner__icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 54 54"
+          aria-hidden="true"
+        >
+          <use href="{{root}}/images/usa-banner-dot-gov.svg#svg"></use>
+        </svg>
+        <p class="ds-c-usa-banner__media-body">
+          <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 class="ds-c-usa-banner__guidance">
+        <svg
+          class="ds-c-usa-banner__icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 54 54"
+          aria-hidden="true"
+        >
+          <use href="{{root}}/images/usa-banner-https.svg#svg"></use>
+        </svg>
+        <p class="ds-c-usa-banner__media-body">
+          <strong>Secure .gov websites use HTTPS</strong>
+          <br />
+          A
+          <strong>
+            lock
+          </strong>
+          (
+          <svg
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 52 64"
+            class="ds-c-usa-banner__lock-image"
+            aria-labelledby="banner-lock-title-1 banner-lock-description-1"
+            focusable="false"
+          >
+            <title id="banner-lock-title-1">Lock</title>
+            <desc id="banner-lock-description-1">A locked padlock</desc>
+            <use href="{{root}}/images/usa-banner-lock.svg#svg"></use>
+          </svg>
+          ) 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>
+</section>
+<h6 class="preview__label">Spanish banner</h6>
+<section class="ds-c-usa-banner" aria-label="Sitio web oficial del gobierno" lang="es">
+  <header class="ds-c-usa-banner__header">
+    <p class="ds-c-usa-banner__header-text">
+      <svg
+        role="img"
+        width="16"
+        height="11"
+        xmlns="http://www.w3.org/2000/svg"
+        class="ds-c-usa-banner__header-flag"
+        aria-labelledby="banner-flag-title-2 banner-flag-description-2"
+        focusable="false"
+      >
+        <title id="banner-flag-title-2">Bandera</title>
+        <desc id="banner-flag-description-2">U.S. Bandera</desc>
+        <use href="{{root}}/images/usa-banner-flag.svg#svg"></use>
+      </svg>
+    </p>
+    <p class="ds-c-usa-banner__header-text">
+      <span>Un sitio oficial del Gobierno de Estados Unidos</span>
+      <span class="ds-c-usa-banner__header-action" aria-hidden="true"
+        >Así es como usted puede verificarlo</span
+      >
+      <button class="ds-c-usa-banner__button" aria-expanded="true" aria-controls="gov-banner">
+        <span class="ds-c-usa-banner__button-text">Así es como usted puede verificarlo</span>
+      </button>
+    </p>
+  </header>
+  <div class="ds-c-usa-banner__content" id="gov-banner">
+    <div
+      class="ds-u-display--flex ds-u-flex-direction--column ds-u-sm-flex-direction--row ds-u-flex-wrap--nowrap"
+    >
+      <div class="ds-c-usa-banner__guidance">
+        <svg
+          class="ds-c-usa-banner__icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 54 54"
+          aria-hidden="true"
+        >
+          <use href="{{root}}/images/usa-banner-dot-gov.svg#svg"></use>
+        </svg>
+        <p class="ds-c-usa-banner__media-body">
+          <strong>Los sitios web oficiales usan .gov</strong>
+          <br />
+          Un sitio web
+          <strong> .gov </strong>
+          pertenece a una organización oficial del Gobierno de Estados Unidos.
+        </p>
+      </div>
+      <div class="ds-c-usa-banner__guidance">
+        <svg
+          class="ds-c-usa-banner__icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 54 54"
+          aria-hidden="true"
+        >
+          <use href="{{root}}/images/usa-banner-https.svg#svg"></use>
+        </svg>
+        <p class="ds-c-usa-banner__media-body">
+          <strong>Los sitios web seguros .gov usan HTTPS</strong>
+          <br />
+          Un
+          <strong>
+            candado
+          </strong>
+          (
+          <svg
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 52 64"
+            class="ds-c-usa-banner__lock-image"
+            aria-labelledby="banner-lock-title-2 banner-lock-description-2"
+            focusable="false"
+          >
+            <title id="banner-lock-title-2">Candado</title>
+            <desc id="banner-lock-description-2">Un candado cerrado</desc>
+            <use href="{{root}}/images/usa-banner-lock.svg#svg"></use>
+          </svg>
+          ) o
+          <strong> https:// </strong>
+          significa que usted se conectó de forma segura a un sitio web .gov. Comparta información
+          sensible sólo en sitios web oficiales y seguros.
+        </p>
+      </div>
+    </div>
+  </div>
+</section>

packages/design-system-docs/src/scripts/components/Header.jsx

@@ -1,55 +1,40 @@
 import GitHubLinks from './GitHubLinks';
 import React from 'react';
-import UsaBanner from './UsaBanner';
+import { UsaBanner } from '@cmsgov/design-system';
 import path from 'path';
 
-class Header extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = { isBannerOpen: false };
-    this.handleToggleBanner = this.handleToggleBanner.bind(this);
-  }
-
-  handleToggleBanner() {
-    this.setState({ isBannerOpen: !this.state.isBannerOpen });
-  }
-
-  render() {
-    return (
-      <div>
-        <UsaBanner
-          isBannerOpen={this.state.isBannerOpen}
-          onToggleBanner={this.handleToggleBanner}
-        />
-        <header className="ds-base--inverse ds-u-padding--3 ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center">
-          <h1 className="ds-h3 ds-u-margin-bottom--0">
-            <a
-              href={path.join('/', process.env.rootPath)}
-              className="ds-c-link--inverse c-header__title"
-              title="Home"
-            >
-              {process.env.name}
-            </a>
-          </h1>
-          <GitHubLinks className="ds-u-display--none ds-u-sm-display--block" inversed />
-        </header>
-        {process.env.core && (
-          <div className="ds-c-alert ds-c-alert--warn  ds-c-alert--hide-icon ds-u-border--0 ">
-            <div className="ds-c-alert__body">
-              <p className="ds-c-alert__text">
-                <strong>CMS Design System v2 is released!</strong>
-                &nbsp; See our{' '}
-                <a href={path.join('/', process.env.rootPath, 'startup/migrating-v2/')}>
-                  migration guide
-                </a>
-                .
-              </p>
-            </div>
+const Header = () => {
+  return (
+    <div>
+      <UsaBanner />
+      <header className="ds-base--inverse ds-u-padding--3 ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center">
+        <h1 className="ds-h3 ds-u-margin-bottom--0">
+          <a
+            href={path.join('/', process.env.rootPath)}
+            className="ds-c-link--inverse c-header__title"
+            title="Home"
+          >
+            {process.env.name}
+          </a>
+        </h1>
+        <GitHubLinks className="ds-u-display--none ds-u-sm-display--block" inversed />
+      </header>
+      {process.env.core && (
+        <div className="ds-c-alert ds-c-alert--warn  ds-c-alert--hide-icon ds-u-border--0 ">
+          <div className="ds-c-alert__body">
+            <p className="ds-c-alert__text">
+              <strong>CMS Design System v2 is released!</strong>
+              &nbsp; See our{' '}
+              <a href={path.join('/', process.env.rootPath, 'startup/migrating-v2/')}>
+                migration guide
+              </a>
+              .
+            </p>
           </div>
-        )}
-      </div>
-    );
-  }
-}
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default Header;