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/AboutCard/AboutCard.test.tsx

@@ -4,19 +4,35 @@ import {LocalizedComponent} from '../../test/testHelpers';
 import AboutCard from './AboutCard';
 
 describe('rendering of the AboutCard', () => {
-  const {asFragment} = render(
-      <LocalizedComponent>
-        <AboutCard
-          imgSrc={'about:blank'}
-          header={'Test Header'}
-          actionText={'Test Action'}
-          actionUrl={'#'}>
-        Content body of the action card.
-        </AboutCard>
-      </LocalizedComponent>,
-  );
+  it('checks if small cards component renders', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <AboutCard
+            imgSrc={'about:blank'}
+            header={'Test Header'}
+            size={'small'}
+            linkText={'Test Action'}
+            url={'#'}>
+          Content body of the action card.
+          </AboutCard>
+        </LocalizedComponent>,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 
-  it('checks if component renders', () => {
+  it('checks if large cards component renders', () => {
+    const {asFragment} = render(
+        <LocalizedComponent>
+          <AboutCard
+            imgSrc={'about:blank'}
+            header={'Test Header'}
+            size={'large'}
+            linkText={'Test Action'}
+            url={'#'}>
+          Content body of the action card.
+          </AboutCard>
+        </LocalizedComponent>,
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,6 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`rendering of the AboutCard checks if component renders 1`] = `
+exports[`rendering of the AboutCard checks if large cards component renders 1`] = `
+<DocumentFragment>
+  <div
+    class="grid-gap-lg tablet:grid-col"
+    data-testid="grid"
+  >
+    <div
+      class="grid-row j40-aboutcard-lg-card"
+      data-testid="grid"
+    >
+      <div
+        class="tablet:grid-col-3 j40-aboutpage-image-container"
+        data-testid="grid"
+      >
+        <img
+          alt="Test Header"
+          class="j40-aboutcard-image"
+          src="about:blank"
+        />
+      </div>
+      <div
+        class="tablet:grid-col-9"
+        data-cy="test-header-block"
+        data-testid="grid"
+      >
+        <div
+          class="grid-row"
+          data-testid="grid"
+        >
+          <h2>
+            Test Header
+          </h2>
+          Content body of the action card.
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`rendering of the AboutCard checks if small cards component renders 1`] = `
 <DocumentFragment>
   <div
     class="grid-gap-lg tablet:grid-col"
@@ -38,7 +78,10 @@ exports[`rendering of the AboutCard checks if component renders 1`] = `
           >
             <a
               class="j40-aboutcard-link"
-            />
+              href="#"
+            >
+              Test Action
+            </a>
           </div>
         </div>
       </div>