Update copy on site based on living copy document (#697)

* Update copy on site based on living copy document

* Updates copy from living doc v2

- updates shots

* Update styling to sidepanel

- make indicator heading white
- change bg color of add'nl indicators 'FAFAFA'

* Separate dataset cards sections by style

- abstract out additional cards color to utils
- create a baseCard mixin
- add datasetCardAdditional style block
- add additionalIndicator prop to DatasetCard
- lower abstaction of GridContainer from methodology to DatasetContainer
- updates snapshot

* Swap resolution and source in dataset cards

- update snapshots

* Update SVGs on About page

- re-center the SVGs to content vertically

client/src/components/DatasetCard/datasetCard.module.scss

@@ -1,10 +1,21 @@
-.datasetCard {
-  background-color: white;
+@import '../utils.scss';
+
+@mixin baseCard {
   padding: 2.7rem 3rem 3rem 3rem;
   margin-bottom: 3rem;
   max-width: 34rem;
 }
 
+.datasetCard {
+  @include baseCard;
+  background-color: white;
+}
+
+.datasetCardAdditional {
+  @include baseCard;
+  background-color: $additionalCardsBGColor;
+}
+
 .datasetCardIndicator {
   margin-top: 0;
   font-size: x-large;

client/src/components/DatasetCard/datasetCard.module.scss.d.ts

@@ -1,6 +1,7 @@
 declare namespace DatasetCardScssNamespace {
     export interface IDatasetCardScss {
         datasetCard: string;
+        datasetCardAdditional:string;
         datasetCardIndicator:string;
         datasetCardWhatIsIt: string;
         datasetCardDescription: string;

client/src/components/DatasetCard/index.tsx

@@ -5,16 +5,12 @@ import * as styles from './datasetCard.module.scss';
 
 interface IDatasetCardProps {
   datasetCardProps: { [key:string]: string }
+  additionalIndicator: boolean
 }
 
-const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
+const DatasetCard = ({datasetCardProps, additionalIndicator}:IDatasetCardProps) => {
   const intl = useIntl();
   const messages = defineMessages({
-    whatIsIt: {
-      id: 'datasetCard.whatIsIt',
-      defaultMessage: 'What is it?',
-      description: 'label associated with explaining the card',
-    },
     dataResolution: {
       id: 'datasetCard.dataResolution',
       defaultMessage: 'Data resolution: ',
@@ -33,20 +29,13 @@ const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
   });
 
   return (
-    <div className={styles.datasetCard}>
+    <div className={additionalIndicator ? styles.datasetCardAdditional : styles.datasetCard}>
       <h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
-      <div className={styles.datasetCardWhatIsIt}>{intl.formatMessage(messages.whatIsIt)}</div>
       <div className={styles.datasetCardDescription}>
         {datasetCardProps.description}
       </div>
 
       <ul className={styles.datasetCardList}>
-        <li className={styles.datasetCardListItem}>
-          <span className={styles.datasetCardLabels}>
-            {intl.formatMessage(messages.dataResolution)}
-          </span>
-          {datasetCardProps.dataResolution}
-        </li>
         <li className={styles.datasetCardListItem}>
           <span className={styles.datasetCardLabels}>
             {intl.formatMessage(messages.dataSource)}
@@ -55,6 +44,12 @@ const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
             {datasetCardProps.dataSourceLabel}
           </a>
         </li>
+        <li className={styles.datasetCardListItem}>
+          <span className={styles.datasetCardLabels}>
+            {intl.formatMessage(messages.dataResolution)}
+          </span>
+          {datasetCardProps.dataResolution}
+        </li>
         <li className={styles.datasetCardListItem}>
           <span className={styles.datasetCardLabels}>
             {intl.formatMessage(messages.dataDateRange)}

client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap

@@ -6,20 +6,11 @@ exports[`rendering of the DatasetCard checks if component renders 1`] = `
     <h3>
       Area Median Income
     </h3>
-    <div>
-      What is it?
-    </div>
     <div>
       Median income of the census block group calculated as a percent 
     of the metropolitan area’s or state's median income.
     </div>
     <ul>
-      <li>
-        <span>
-          Data resolution: 
-        </span>
-        Census block group
-      </li>
       <li>
         <span>
           Data source: 
@@ -32,6 +23,12 @@ exports[`rendering of the DatasetCard checks if component renders 1`] = `
           Census's American Community Survey
         </a>
       </li>
+      <li>
+        <span>
+          Data resolution: 
+        </span>
+        Census block group
+      </li>
       <li>
         <span>
           Data date range: 

client/src/components/DatasetCard/tests/datasetCard.test.tsx

@@ -3,12 +3,12 @@ import {render} from '@testing-library/react';
 import {LocalizedComponent} from '../../../test/testHelpers';
 import DatasetCard from '../../DatasetCard';
 
-import {cards} from '../../DatasetContainer/index';
+import {indicators} from '../../DatasetContainer/index';
 
 describe('rendering of the DatasetCard', () => {
   const {asFragment} = render(
       <LocalizedComponent>
-        <DatasetCard key={0} datasetCardProps={cards[0]}/>
+        <DatasetCard key={0} datasetCardProps={indicators[0]}/>
       </LocalizedComponent>,
   );