Add external link icons & all outstanding changes from Living copy (#1173)

* Refactor Footer component

- Make Footer component align to normal folder structure
- Make links in Footer use LinkTypeWrapper, which will allow icon to be added to all external links in one place

* Add Trussworks link to LinkTypeWrapper

* Add icon to SurveyButton comp

* Add launch icon to About page cards

* Add launch icon to FederalRegister link

* Refactor Methodology page

- Add Source and Available for fields to dataset Cards
- refactor data structure for dataset Cards to handle more than 1 source
- update constants file
- modify SASS for source list items
- update snapshots

* Add copy changes; How you can help and territories

* Update methodology section with copy changes

* Swap out all email links with <LinkTypeWrapper>

- update tests

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

@@ -40,6 +40,13 @@
   font-size: large;
 }
 
+
+.datasetCardListItemSource {
+  @include u-margin-top(2);
+  margin-bottom: 0.4rem;
+  font-size: large;
+}
+
 .datasetCardDescription {
   font-size: large;
   padding-top: 0.3rem;

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

@@ -7,6 +7,7 @@ declare namespace DatasetCardScssNamespace {
         datasetCardDescription: string;
         datasetCardLabels: string;
         datasetCardList: string;
+        datasetCardListItemSource: string;
         datasetCardListItem: string;
     }
   }

client/src/components/DatasetCard/index.tsx

@@ -5,9 +5,7 @@ import * as styles from './datasetCard.module.scss';
 import * as METHODOLOGY_COPY from '../../data/copy/methodology';
 
 interface IDatasetCardProps {
-  datasetCardProps: {
-    [key:string]: string
-  }
+  datasetCardProps: METHODOLOGY_COPY.IIndicators
 }
 
 const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
@@ -15,30 +13,53 @@ const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
 
   return (
     <div className={styles.datasetCard} id={datasetCardProps.domID}>
+      {/* Dataset header */}
       <h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
+
+      {/* Dataset description */}
       <div className={styles.datasetCardDescription}>
         {datasetCardProps.description}
       </div>
 
       <ul className={styles.datasetCardList}>
-        <li className={styles.datasetCardListItem}>
-          <span className={styles.datasetCardLabels}>
-            {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)}
-          </span>
-          {datasetCardProps.responsibleParty}
-        </li>
-        <li className={styles.datasetCardListItem}>
-          <span className={styles.datasetCardLabels}>
-            {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.DATE_RANGE)}
-          </span>
-          {datasetCardProps.dateRange}
-        </li>
+
+        {/* Dataset Used in */}
         <li className={styles.datasetCardListItem}>
           <span className={styles.datasetCardLabels}>
             {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.USED_IN)}
           </span>
           {datasetCardProps.usedIn}
         </li>
+
+        {/* Dataset Responsible Party */}
+        <li className={styles.datasetCardListItem}>
+          <span className={styles.datasetCardLabels}>
+            {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)}
+          </span>
+          {datasetCardProps.responsibleParty}
+        </li>
+
+
+        {datasetCardProps.sources.map((dataSource) => (
+          <>
+            {/* Dataset Source */}
+            <li className={styles.datasetCardListItemSource}>
+              <span className={styles.datasetCardLabels}>
+                {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)}
+              </span>
+              {dataSource.source}
+            </li>
+
+            {/* Dataset Available for */}
+            <li className={styles.datasetCardListItem}>
+              <span className={styles.datasetCardLabels}>
+                {intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.AVAILABLE_FOR)}
+              </span>
+              {dataSource.availableFor}
+            </li>
+          </>
+        ))}
+
       </ul>
     </div>
   );

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

@@ -15,29 +15,38 @@ exports[`rendering of indicator dataset card checks if component renders 1`] = `
       
     </div>
     <ul>
+      <li>
+        <span>
+          Used in: 
+        </span>
+        All methodologies except for training and workforce development
+      </li>
       <li>
         <span>
           Responsible Party: 
         </span>
+        Census
+      </li>
+      <li>
+        <span>
+          Source: 
+        </span>
         <a
+          class="usa-link usa-link--external"
+          data-cy=""
           href="https://www.census.gov/programs-surveys/acs"
           rel="noreferrer"
           target="_blank"
         >
-          Census's American Community Survey
+          American Community Survey
         </a>
+         from 2015-2019
       </li>
       <li>
         <span>
-          Date range: 
+          Available for: 
         </span>
-        2015-2019
-      </li>
-      <li>
-        <span>
-          Used in: 
-        </span>
-        All methodologies except for training and workforce development
+        All U.S. states and the District of Columbia
       </li>
     </ul>
   </div>