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/J40MainGridContainer.tsx

@@ -6,13 +6,18 @@ import {GridContainer} from '@trussworks/react-uswds';
 interface ILayoutProps {
   children: ReactNode,
   fullWidth?: boolean,
+   blueBackground?: boolean,
   className?: string
 }
 
 const J40MainGridContainer = ({
   children,
   fullWidth = false,
-  className = 'j40-grid-container'}: ILayoutProps) => {
+  blueBackground = false,
+  className = 'j40-grid-container '}: ILayoutProps) => {
+  // is it a blue background strip?
+  className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
+
   return fullWidth ? (
     <div
       className={'j40-grid-container ' + className}>