About page sprint4 (#544)

* Card sections of the About page
* Create index.test.tsx
* Add test that verifies no console errors and no undefined variables.
* Added unit test with snapshot
* use global.console.error
* Fix unit test for console.error()
* Remove areasOfFocusList since it's no longer used
* CSS adjustments from PR
* Add back in AlertWrapper
* github.com link opens in new tab
* adds comment to globalize console.error check
* Refactor AboutCard
* Fixing the top grid so it resizes correctly on mobile. (e.g. using `<Grid desktop={{col: 9}}>` will expand to full width when going to mobile.
* So AboutCard can now do 'large' cards (ones at the top) and 'small' cards (ones at the bottom that are 2x per row).
* change `desktop` -> `tablet`
* `<Grid col={1}>{' '}</Grid>`

Co-authored-by: Vim <86254807+vim-usds@users.noreply.github.com>

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+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 component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/AboutCard/AboutCard.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {Grid} from '@trussworks/react-uswds';
+
+// the "body" section is the child object to allow for html versus just text
+interface AboutCardProps {
+  imgSrc: string;
+  header: string;
+  size?: 'small' | 'large';
+  actionText?: string;
+  actionUrl?: string;
+  actionOpenInNewTab?: boolean;
+  className?: string;
+}
+
+const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
+  if (props.size === 'large') {
+    // large are the cards on top
+    // note it uses a top className='j40-aboutcard-lg-card'
+    return (
+      <Grid tablet={{col: true}} gap={'lg'} className={(props.className || '')}>
+        <Grid row className={'j40-aboutcard-lg-card'}>
+          <Grid tablet={{col: 3}} className={'j40-aboutpage-image-container'}>
+            <img
+              className={'j40-aboutcard-image'}
+              alt={props.header}
+              src={props.imgSrc}/>
+          </Grid>
+
+          <Grid tablet={{col: 9}}>
+            <Grid row>
+              <h3 className={'j40-section-header'}>{props.header}</h3>
+              <div className={'j40-section-body'}>{props.children}</div>
+            </Grid>
+          </Grid>
+
+        </Grid>
+      </Grid>
+    );
+  } else {
+    // small are the cards on the bottom
+    // note it uses a top className='j40-aboutcard-sm-card'
+    return (
+      <Grid tablet={{col: true}} gap={'lg'} className={(props.className || '')}>
+        <Grid row className={'j40-aboutcard-sm-card'}>
+          <Grid tablet={{col: 2}} className={'j40-aboutpage-image-container'}>
+            <img
+              className={'j40-aboutcard-image'}
+              alt={props.header}
+              src={props.imgSrc}/>
+          </Grid>
+
+          <Grid tablet={{col: 9}}>
+            <Grid row>
+              <h3 className={'j40-section-header'}>{props.header}</h3>
+              <div className={'j40-section-body'}>{props.children}</div>
+              <div className={'j40-section-footer'}>
+                {props.actionOpenInNewTab ?
+                  <a
+                    className={'j40-aboutcard-link'}
+                    href={props.actionUrl}
+                    target="_blank"
+                    rel="noreferrer">{props.actionText}</a> :
+                  <a
+                    className={'j40-aboutcard-link'}
+                    href={props.actionUrl}>{props.actionText}</a>
+                }
+              </div>
+            </Grid>
+          </Grid>
+          <Grid col={1}>{' '}</Grid>
+        </Grid>
+      </Grid>
+    );
+  }
+};
+
+export default AboutCard;

client/src/components/AboutCard/AboutCardsContainer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Grid} from '@trussworks/react-uswds';
+
+type AboutCardsContainerProps = {
+  className?: string
+}
+
+// note: this assumes a J40MainGridContainer container!
+const AboutCardsContainer = (props: React.PropsWithChildren<AboutCardsContainerProps>) => {
+  return (
+    <Grid row gap={'lg'} className={'j40-aboutcard-container ' + (props.className || '')}>
+      {props.children}
+    </Grid>
+  );
+};
+
+export default AboutCardsContainer;

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

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the AboutCard checks if component renders 1`] = `
+<DocumentFragment>
+  <div
+    class="grid-gap-lg tablet:grid-col"
+    data-testid="grid"
+  >
+    <div
+      class="grid-row j40-aboutcard-card"
+      data-testid="grid"
+    >
+      <div
+        class="grid-col-2"
+        data-testid="grid"
+      >
+        <img
+          alt="Test Header"
+          class="j40-aboutcard-image"
+          src="about:blank"
+        />
+      </div>
+      <div
+        class="grid-col-10"
+        data-testid="grid"
+      >
+        <div
+          class="grid-row"
+          data-testid="grid"
+        >
+          <div
+            class="j40-section-header"
+          >
+            Test Header
+          </div>
+          <div
+            class="j40-section-body"
+          >
+            Content body of the action card.
+          </div>
+          <div
+            class="j40-section-footer"
+          >
+            <a
+              class="j40-aboutcard-link"
+              href="#"
+            >
+              Test Action
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;