Add beta site banner (#802)

* Add new BetaBanner and remove legacy Alerts

- add BetaBanner component and test
- update AboutCard test
- remove AlertWrapper component, copy and tests
- remove AlertWrapper from all pages
- add BetaBanner copy and intl
- update logo and color
- add styles using USWDS tokens to globals.scss

* Add Beta pill to header

- refactor Header to use Grid and USWDS
- refactor global.scss to use Grid and USWDS
- updates snapshots

* Move styles from global to modules

- move BetaBanner styles from global to modules
- move J40Header to a folder component and module styles
- add J40Header unit test
- add a design-system.scss file that allows USWDS styles in modules
- updates snapshots

* Update en.json file

* Trigger Build

* Add initial Spanish content

- add README for translation team
- add createSpanishJson script
- add initial version of es.json
- add a spanish string variable to test translation

* Add retry and timeout config to stalled test

* Remove redundant test cases for AboutCard

- update snapshot

* Update BetaBanner description

client/src/components/BetaBanner/BetaBanner.module.scss

@@ -0,0 +1,38 @@
+@use '../../styles/design-system.scss' as *;
+
+.betaBannerContainer {
+  @include u-bg("gray-cool-2");
+
+  .betaBanner {
+    @include u-display("flex");
+    @include u-height(3);
+    max-width: 60.25rem; // Needs this exact value to align with GovBanner
+    @include u-font("body", "3xs");
+    @include u-margin-left(auto);
+    @include u-margin-right(auto);
+    @include u-padding-top("05");
+    @include u-padding-bottom(3);
+
+    @include at-media-max("desktop") {
+      @include u-margin-left(2);
+      @include u-margin-right(0);
+    }
+
+    @include at-media-max("tablet-lg") {
+      @include u-height(6);
+    }
+
+    .betaPillIcon {
+      @include u-bg("yellow-20v");
+      @include u-height(1);
+      @include u-width(2);
+      @include u-radius("2px");
+      @include u-margin-right(1);
+      margin-top: 0.4rem; //Needs this exact value for vertical alignment
+    }
+
+    .betaHeading {
+      @include u-text("bold");
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+declare namespace BetaBannerNamespace {
+    export interface IDatasetCardScss {
+        betaBannerContainer: string;
+        betaBanner:string;
+        betaPillIcon:string;
+        betaHeading: string;
+    }
+  }
+
+declare const DatasetCardScssModule: BetaBannerNamespace.IDatasetCardScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: BetaBannerNamespace.IDatasetCardScss;
+  };
+
+  export = DatasetCardScssModule;

client/src/components/BetaBanner/BetaBanner.test.tsx

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

client/src/components/BetaBanner/BetaBanner.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import * as COMMON_COPY from '../../data/copy/common';
+import * as styles from './BetaBanner.module.scss';
+
+const BetaBanner = () => {
+  const intl = useIntl();
+
+  return (
+    <div className={styles.betaBannerContainer}>
+      <div className={styles.betaBanner}>
+        <div className={styles.betaPillIcon}></div>
+        <div>
+          <span className={styles.betaHeading}>
+            {intl.formatMessage(COMMON_COPY.BETA_BANNER.TITLE)}{' '}
+          </span>
+          <span>
+            {intl.formatMessage(COMMON_COPY.BETA_BANNER.INFO)}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BetaBanner;

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the BetaBanner checks if component renders 1`] = `
+<DocumentFragment>
+  <div>
+    <div>
+      <div />
+      <div>
+        <span>
+          This is a Beta site. 
+        </span>
+        <span>
+          It is an early, in-progress version of the tool with limited data 
+    sets that will be continuously updated.
+        </span>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

client/src/components/BetaBanner/index.tsx

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