feat: Update GovBanner to match USWDS 2.8.0 release (#782)

* Update GovBanner to correspond with uswds 2.8.0

* Add GovBanner storybook stories

* Add basic test verifying component render w/ props

* Fix typo "Offical" -> "Official"

* Add Jest Snapshot tests

package.json

@@ -65,7 +65,7 @@
     "happo-plugin-storybook": "^2.5.3",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",
-    "uswds": "2.7.1"
+    "uswds": "2.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",

src/components/GovBanner/GovBanner.stories.tsx

@@ -3,6 +3,38 @@ import { GovBanner } from './GovBanner'
 
 export default { title: 'GovBanner', component: GovBanner }
 
-export const govBanner = (): React.ReactElement => (
+export const govBannerDefault = (): React.ReactElement => (
   <GovBanner aria-label="Official government website" />
 )
+
+export const govBannerEnglishDotGov = (): React.ReactElement => (
+  <GovBanner
+    language="english"
+    tld=".gov"
+    aria-label="Official government website"
+  />
+)
+
+export const govBannerEnglishDotMil = (): React.ReactElement => (
+  <GovBanner
+    language="english"
+    tld=".mil"
+    aria-label="Official government website"
+  />
+)
+
+export const govBannerSpanishDotGov = (): React.ReactElement => (
+  <GovBanner
+    language="spanish"
+    tld=".gov"
+    aria-label="Official government website"
+  />
+)
+
+export const govBannerSpanishDotMil = (): React.ReactElement => (
+  <GovBanner
+    language="spanish"
+    tld=".mil"
+    aria-label="Official government website"
+  />
+)

src/components/GovBanner/GovBanner.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
+import renderer from 'react-test-renderer'
 
 import { GovBanner } from './GovBanner'
 
@@ -15,4 +16,46 @@ describe('GovBanner component', () => {
     )
     expect(queryByTestId('govBanner')).toHaveAttribute('aria-label')
   })
+
+  it('renders with language and tld props passed', () => {
+    const { queryByTestId } = render(
+      <GovBanner language="english" tld=".mil" />
+    )
+    expect(queryByTestId('govBanner')).toBeInTheDocument
+  })
+
+  describe('static content', () => {
+    it('renders consistently with default props', () => {
+      const tree = renderer.create(<GovBanner />).toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('renders consistently in English for .gov sites', () => {
+      const tree = renderer
+        .create(<GovBanner language="english" tld=".gov" />)
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('renders consistently in English for .mil sites', () => {
+      const tree = renderer
+        .create(<GovBanner language="english" tld=".mil" />)
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('renders consistently in Spanish for .gov sites', () => {
+      const tree = renderer
+        .create(<GovBanner language="spanish" tld=".gov" />)
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('renders consistently in Spanish for .mil sites', () => {
+      const tree = renderer
+        .create(<GovBanner language="spanish" tld=".mil" />)
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+  })
 })

src/components/GovBanner/GovBanner.tsx

@@ -5,15 +5,117 @@ import classnames from 'classnames'
 import flagImg from 'uswds/src/img/us_flag_small.png'
 import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
 import httpsIcon from 'uswds/src/img/icon-https.svg'
+import lockIcon from 'uswds/src/img/lock.svg'
+
+type Language = 'english' | 'spanish'
+
+type TLD = '.gov' | '.mil'
+
+interface GovBannerCopy {
+  header: string
+  headerAction: string
+  tldSectionHeader: string
+  tldSectionContent: JSX.Element
+  httpsSectionHeader: string
+  httpsSectionContent: JSX.Element
+}
+
+const getCopy = (language: Language, tld: TLD): GovBannerCopy => {
+  const lock = (
+    <span className="icon-lock">
+      <img src={lockIcon} className="usa-banner__lock-image" alt="lock" />
+    </span>
+  )
+
+  switch (language) {
+    case 'english':
+      return {
+        header: 'An official website of the United States government',
+        headerAction: 'Here’s how you know',
+        tldSectionHeader: `Official websites use ${tld}`,
+        tldSectionContent: ((): JSX.Element => {
+          switch (tld) {
+            case '.gov':
+              return (
+                <>
+                  A <strong>.gov</strong> website belongs to an official
+                  government organization in the United States.
+                </>
+              )
+            case '.mil':
+              return (
+                <>
+                  A <strong>.mil</strong> website belongs to an official U.S.
+                  Department of Defense organization.
+                </>
+              )
+          }
+        })(),
+        httpsSectionHeader: `Secure ${tld} websites use HTTPS`,
+        httpsSectionContent: (
+          <>
+            A <strong>lock ({lock})</strong> or <strong>https://</strong> means
+            you’ve safely connected to the {tld} website. Share sensitive
+            information only on official, secure websites.
+          </>
+        ),
+      }
+    case 'spanish':
+      return {
+        header: 'Un sitio oficial del Gobierno de Estados Unidos',
+        headerAction: 'Así es como usted puede verificarlo',
+        tldSectionHeader: `Los sitios web oficiales usan ${tld}`,
+        tldSectionContent: ((): JSX.Element => {
+          switch (tld) {
+            case '.gov':
+              return (
+                <>
+                  Un sitio web <strong>.gov</strong> pertenece a una
+                  organización oficial del Gobierno de Estados Unidos.
+                </>
+              )
+            case '.mil':
+              return (
+                <>
+                  Un sitio web <strong>.mil</strong> pertenece a una
+                  organización oficial del Departamento de Defensa de EE. UU.
+                </>
+              )
+          }
+        })(),
+        httpsSectionHeader: `Los sitios web seguros ${tld} usan HTTPS`,
+        httpsSectionContent: (
+          <>
+            Un <strong>candado ({lock})</strong> o <strong>https://</strong>{' '}
+            significa que usted se conectó de forma segura a un sitio web {tld}.
+            Comparta información sensible sólo en sitios web oficiales y
+            seguros.
+          </>
+        ),
+      }
+  }
+}
+
+interface GovBannerProps {
+  tld?: TLD
+  language?: Language
+}
 
 export const GovBanner = (
-  props: JSX.IntrinsicElements['section']
+  props: GovBannerProps & JSX.IntrinsicElements['section']
 ): React.ReactElement => {
-  const { className, ...sectionProps } = props
+  const {
+    tld = '.gov',
+    language = 'english',
+    className,
+    ...sectionProps
+  } = props
   const [isOpen, setOpenState] = useState(false)
 
   const classes = classnames('usa-banner', className)
 
+  const copy = getCopy(language, tld)
+
   return (
     <section className={classes} data-testid="govBanner" {...sectionProps}>
       <div className="usa-accordion">
@@ -27,11 +129,9 @@ export const GovBanner = (
               />
             </div>
             <div className="grid-col-fill tablet:grid-col-auto">
-              <p className="usa-banner__header-text">
-                An official website of the United States government
-              </p>
+              <p className="usa-banner__header-text">{copy.header}</p>
               <p className="usa-banner__header-action" aria-hidden="true">
-                Here’s how you know
+                {copy.headerAction}
               </p>
             </div>
             <button
@@ -43,7 +143,7 @@ export const GovBanner = (
                 setOpenState(!isOpen)
               }}>
               <span className="usa-banner__button-text">
-                Here’s how you know
+                {copy.headerAction}
               </span>
             </button>
           </div>
@@ -61,11 +161,9 @@ export const GovBanner = (
               />
               <div className="usa-media-block__body">
                 <p>
-                  <strong>The .gov means it’s official.</strong>
+                  <strong>{copy.tldSectionHeader}</strong>
                   <br />
-                  Federal government websites often end in .gov or .mil. Before
-                  sharing sensitive information, make sure you’re on a federal
-                  government site.
+                  {copy.tldSectionContent}
                 </p>
               </div>
             </div>
@@ -77,11 +175,9 @@ export const GovBanner = (
               />
               <div className="usa-media-block__body">
                 <p>
-                  <strong>The site is secure.</strong>
+                  <strong>{copy.httpsSectionHeader}</strong>
                   <br />
-                  The <strong>https://</strong> ensures that you are connecting
-                  to the official website and that any information you provide
-                  is encrypted and transmitted securely.
+                  {copy.httpsSectionContent}
                 </p>
               </div>
             </div>