Add language links to switch between English and Spanish (#842)

* Add language links to gov banner

- align banners to site logo
- create Language component and snapshot test
- add Language component to GovBanner
- update namespace for betaBanner scss.d.ts file

* Update snapshots for each page

* Componentizes the GovBanner

- add styles
- add unit test
- token most styles to USWDS

* Add language icon and update snapshots

* Make language link text smaller

* Update total height of BetaBanner

* Add languageLink to scss.d.ts file

* Add language links to mobile

- add isDesktop prop to Language component
- refactors header links to a simple array
- update snapshots

* Add href value to language links

- update snapshots

* merge other PRs and add spanish links

- merge PR 817
- merge PR 794
- add spanish links for footer
- add diffEnEs.js to detect differences between two json files
- adds esNoBrackets.json
- update intl README

* Add government banner in spanish

* Add spanish content for About and Explore page

client/src/components/Language/Language.module.scss

@@ -0,0 +1,38 @@
+@use '../../styles/design-system.scss' as *;
+
+@mixin baseLanguageStyles {
+  @include u-margin-right(4);
+  @include u-display("flex");
+
+  .languageIcon {
+    align-self: baseline;
+  }
+
+  .languageLink {
+    @include u-display("inline-block");
+    @include u-margin-left(1.5);
+    cursor: pointer;
+    font-size: .8rem; // government banner text size not a token
+    @include u-padding-top('2px');
+    
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+}
+
+.languageContainer {
+    @include baseLanguageStyles();
+    @include at-media-max("desktop") {
+      display: none;
+    }
+  }
+  
+  .languageContainerMobile {
+    @include baseLanguageStyles();
+    @include u-padding-top(3);
+    @include at-media("desktop") {
+      display: none;
+    }
+  }
+  

client/src/components/Language/Language.module.scss.d.ts

@@ -0,0 +1,15 @@
+declare namespace LanguageNamespace {
+    export interface ILanguageScss {
+        languageContainer: string;
+        languageContainerMobile: string;
+        languageIcon: string;
+        languageLink: string;
+    }
+  }
+
+declare const LanguageScssModule: LanguageNamespace.ILanguageScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: LanguageNamespace.ILanguageScss;
+  };
+
+  export = LanguageScssModule;

client/src/components/Language/Language.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import Language from './Language';
+
+describe('rendering of the Language', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <Language />
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/Language/Language.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {IntlContextConsumer, changeLocale} from 'gatsby-plugin-intl';
+
+// @ts-ignore
+import languageIcon from '/node_modules/uswds/dist/img/usa-icons/language.svg';
+import * as styles from './Language.module.scss';
+
+const languageName = {
+  en: 'English',
+  es: 'Español',
+};
+
+interface ILanguageProps {
+  isDesktop: boolean
+}
+
+const Language = ({isDesktop}:ILanguageProps) => {
+  return (
+    <div className={isDesktop ? styles.languageContainer : styles.languageContainerMobile}>
+      <img className={styles.languageIcon} src={languageIcon} alt={'language icon for selecting language'}/>
+      <IntlContextConsumer>
+        {({languages, language: currentLocale}) =>
+          languages.map((language: React.Key | null | undefined) => (
+            <a
+              href="#"
+              className={styles.languageLink}
+              key={language}
+              onClick={() => changeLocale(language)}
+            >
+              {languageName[language]}
+            </a>
+          ))
+        }
+      </IntlContextConsumer>
+    </div>
+  );
+};
+
+export default Language;

client/src/components/Language/__snapshots__/Language.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the Language checks if component renders 1`] = `
+<DocumentFragment>
+  <div>
+    <img
+      alt="language icon for selecting language"
+      src="test-file-stub"
+    />
+    <a
+      href="#"
+    >
+      English
+    </a>
+    <a
+      href="#"
+    >
+      Español
+    </a>
+  </div>
+</DocumentFragment>
+`;

client/src/components/Language/index.tsx

@@ -0,0 +1,3 @@
+import Language from './Language';
+
+export default Language;