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>
This commit is contained in:
TomNUSDS 2021-08-19 20:41:54 -07:00 committed by GitHub
commit a2eabda319
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 448 additions and 266 deletions

View file

@ -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>
`;