diff --git a/package.json b/package.json
index 45a10f52a5..be9cc548b1 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/GovBanner/GovBanner.stories.tsx b/src/components/GovBanner/GovBanner.stories.tsx
index a9ee77e847..068c1e02ef 100644
--- a/src/components/GovBanner/GovBanner.stories.tsx
+++ b/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 => (
)
+
+export const govBannerEnglishDotGov = (): React.ReactElement => (
+
+)
+
+export const govBannerEnglishDotMil = (): React.ReactElement => (
+
+)
+
+export const govBannerSpanishDotGov = (): React.ReactElement => (
+
+)
+
+export const govBannerSpanishDotMil = (): React.ReactElement => (
+
+)
diff --git a/src/components/GovBanner/GovBanner.test.tsx b/src/components/GovBanner/GovBanner.test.tsx
index 94a6c83ce5..8080d1fa3a 100644
--- a/src/components/GovBanner/GovBanner.test.tsx
+++ b/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(
+
+ )
+ expect(queryByTestId('govBanner')).toBeInTheDocument
+ })
+
+ describe('static content', () => {
+ it('renders consistently with default props', () => {
+ const tree = renderer.create().toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+
+ it('renders consistently in English for .gov sites', () => {
+ const tree = renderer
+ .create()
+ .toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+
+ it('renders consistently in English for .mil sites', () => {
+ const tree = renderer
+ .create()
+ .toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+
+ it('renders consistently in Spanish for .gov sites', () => {
+ const tree = renderer
+ .create()
+ .toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+
+ it('renders consistently in Spanish for .mil sites', () => {
+ const tree = renderer
+ .create()
+ .toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+ })
})
diff --git a/src/components/GovBanner/GovBanner.tsx b/src/components/GovBanner/GovBanner.tsx
index 225899643d..42827e985e 100644
--- a/src/components/GovBanner/GovBanner.tsx
+++ b/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 = (
+
+
+
+ )
+
+ 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 .gov website belongs to an official
+ government organization in the United States.
+ >
+ )
+ case '.mil':
+ return (
+ <>
+ A .mil website belongs to an official U.S.
+ Department of Defense organization.
+ >
+ )
+ }
+ })(),
+ httpsSectionHeader: `Secure ${tld} websites use HTTPS`,
+ httpsSectionContent: (
+ <>
+ A lock ({lock}) or https:// 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 .gov pertenece a una
+ organización oficial del Gobierno de Estados Unidos.
+ >
+ )
+ case '.mil':
+ return (
+ <>
+ Un sitio web .mil pertenece a una
+ organización oficial del Departamento de Defensa de EE. UU.
+ >
+ )
+ }
+ })(),
+ httpsSectionHeader: `Los sitios web seguros ${tld} usan HTTPS`,
+ httpsSectionContent: (
+ <>
+ Un candado ({lock}) o https://{' '}
+ 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 (
@@ -27,11 +129,9 @@ export const GovBanner = (
/>
-
- An official website of the United States government
-
+
{copy.header}
- Here’s how you know
+ {copy.headerAction}
@@ -61,11 +161,9 @@ export const GovBanner = (
/>
- The .gov means it’s official.
+ {copy.tldSectionHeader}
- Federal government websites often end in .gov or .mil. Before
- sharing sensitive information, make sure you’re on a federal
- government site.
+ {copy.tldSectionContent}
@@ -77,11 +175,9 @@ export const GovBanner = (
/>
- The site is secure.
+ {copy.httpsSectionHeader}
- The https:// ensures that you are connecting
- to the official website and that any information you provide
- is encrypted and transmitted securely.
+ {copy.httpsSectionContent}
diff --git a/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap b/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap
new file mode 100644
index 0000000000..71e6548566
--- /dev/null
+++ b/src/components/GovBanner/__snapshots__/GovBanner.test.tsx.snap
@@ -0,0 +1,658 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GovBanner component static content renders consistently in English for .gov sites 1`] = `
+
+
+
+
+
+
+
+
+
+ An official website of the United States government
+
+
+ Here’s how you know
+
+
+
+
+
+
+
+
+
+
+
+
+ Official websites use .gov
+
+
+ A
+
+ .gov
+
+ website belongs to an official government organization in the United States.
+
+
+
+
+
+
+
+
+ Secure .gov websites use HTTPS
+
+
+ A
+
+ lock (
+
+
+
+ )
+
+ or
+
+ https://
+
+ means you’ve safely connected to the
+ .gov
+ website. Share sensitive information only on official, secure websites.
+
+
+
+
+
+
+
+`;
+
+exports[`GovBanner component static content renders consistently in English for .mil sites 1`] = `
+
+
+
+
+
+
+
+
+
+ An official website of the United States government
+
+
+ Here’s how you know
+
+
+
+
+
+
+
+
+
+
+
+
+ Official websites use .mil
+
+
+ A
+
+ .mil
+
+ website belongs to an official U.S. Department of Defense organization.
+
+
+
+
+
+
+
+
+ Secure .mil websites use HTTPS
+
+
+ A
+
+ lock (
+
+
+
+ )
+
+ or
+
+ https://
+
+ means you’ve safely connected to the
+ .mil
+ website. Share sensitive information only on official, secure websites.
+
+
+
+
+
+
+
+`;
+
+exports[`GovBanner component static content renders consistently in Spanish for .gov sites 1`] = `
+
+
+
+
+
+
+
+
+
+ Un sitio oficial del Gobierno de Estados Unidos
+
+
+ Así es como usted puede verificarlo
+
+
+
+
+
+
+
+
+
+
+
+
+ Los sitios web oficiales usan .gov
+
+
+ Un sitio web
+
+ .gov
+
+ pertenece a una organización oficial del Gobierno de Estados Unidos.
+
+
+
+
+
+
+
+
+ Los sitios web seguros .gov usan HTTPS
+
+
+ Un
+
+ candado (
+
+
+
+ )
+
+ o
+
+ https://
+
+
+ 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.
+
+
+
+
+
+
+
+`;
+
+exports[`GovBanner component static content renders consistently in Spanish for .mil sites 1`] = `
+
+
+
+
+
+
+
+
+
+ Un sitio oficial del Gobierno de Estados Unidos
+
+
+ Así es como usted puede verificarlo
+
+
+
+
+
+
+
+
+
+
+
+
+ Los sitios web oficiales usan .mil
+
+
+ Un sitio web
+
+ .mil
+
+ pertenece a una organización oficial del Departamento de Defensa de EE. UU.
+
+
+
+
+
+
+
+
+ Los sitios web seguros .mil usan HTTPS
+
+
+ Un
+
+ candado (
+
+
+
+ )
+
+ o
+
+ https://
+
+
+ significa que usted se conectó de forma segura a un sitio web
+ .mil
+ . Comparta información sensible sólo en sitios web oficiales y seguros.
+