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 = ( + + 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}

@@ -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`] = ` +
+
+
+
+
+ U.S. flag +
+
+

+ An official website of the United States government +

+ +
+ +
+
+ +
+
+`; + +exports[`GovBanner component static content renders consistently in English for .mil sites 1`] = ` +
+
+
+
+
+ U.S. flag +
+
+

+ An official website of the United States government +

+ +
+ +
+
+ +
+
+`; + +exports[`GovBanner component static content renders consistently in Spanish for .gov sites 1`] = ` +
+
+
+
+
+ U.S. flag +
+
+

+ Un sitio oficial del Gobierno de Estados Unidos +

+ +
+ +
+
+ +
+
+`; + +exports[`GovBanner component static content renders consistently in Spanish for .mil sites 1`] = ` +
+
+
+
+
+ U.S. flag +
+
+

+ Un sitio oficial del Gobierno de Estados Unidos +

+ +
+ +
+
+ +
+
+`; + +exports[`GovBanner component static content renders consistently with default props 1`] = ` +
+
+
+
+
+ U.S. flag +
+
+

+ An official website of the United States government +

+ +
+ +
+
+ +
+
+`; diff --git a/yarn.lock b/yarn.lock index 7e4b5cc003..d7b2f2d49e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2470,11 +2470,6 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.27.tgz#a151873af5a5e851b51b3b065c9e63390a9e0eb1" integrity sha512-kVrqXhbclHNHGu9ztnAwSncIgJv/FaxmzXJvGXNdcCpV1b8u1/Mi6z6m0vwy0LzKeXFTPLH0NzwmoJ3fNCIq0g== -"@types/node@^13.13.12": - version "13.13.15" - resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.15.tgz#fe1cc3aa465a3ea6858b793fd380b66c39919766" - integrity sha512-kwbcs0jySLxzLsa2nWUAGOd/s21WU1jebrEdtzhsj1D4Yps1EOuyI1Qcu+FD56dL7NRNIJtDDjcqIG22NwkgLw== - "@types/normalize-package-data@^2.4.0": version "2.4.0" resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e" @@ -13809,11 +13804,6 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^2.4.1: - version "2.9.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.9.2.tgz#1cbf61d05d6b96269244eb6a3bce4bd914e0f00c" - integrity sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w== - typescript@^3.8.0: version "3.9.7" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" @@ -14067,12 +14057,11 @@ use@^3.1.0: resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f" integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ== -uswds@2.7.1: - version "2.7.1" - resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.7.1.tgz#43f719fb3ef450e3faef722d336b29a39f6eee3b" - integrity sha512-RzczCK4TfnJud6WFj7pV6er5BQ0qQviM/GZgyDkYT6ZvOIXR0khbk7WZR72a+vy75fEiAzJut4N/x5/UZq0ZrA== +uswds@2.8.0: + version "2.8.0" + resolved "https://registry.yarnpkg.com/uswds/-/uswds-2.8.0.tgz#635e829555a359562f28ab51e1b6c983f149f739" + integrity sha512-LI7ZNbh823ehtThvebwQ5eHNKGY791vcT5d3T9gJ+RY511HgstWLRSEEso7YO/ifjoV/FwuTAtDwQqt7zsXRvA== dependencies: - "@types/node" "^13.13.12" classlist-polyfill "^1.0.3" del "^5.1.0" domready "^1.0.8" @@ -14081,8 +14070,6 @@ uswds@2.7.1: object-assign "^4.1.1" receptor "^1.0.0" resolve-id-refs "^0.1.0" - typescript "^2.4.1" - yargs "^15.3.1" util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2"