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/AboutCard/__snapshots__/AboutCard.test.tsx.snap

@@ -78,6 +78,7 @@ exports[`rendering of the AboutCard checks if small cards component renders 1`]
           >
             <a
               class="j40-aboutcard-link"
+              data-cy=""
               href="#"
             >
               Test Action

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: {
+  datasetCardProps: METHODOLOGY_COPY.IIndicators
-    [key:string]: string
-  }
 }
 
 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}>
+        {/* Dataset Used in */}
-            {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>
         <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
+        All U.S. states and the District of Columbia
-      </li>
-      <li>
-        <span>
-          Used in: 
-        </span>
-        All methodologies except for training and workforce development
       </li>
     </ul>
   </div>

client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap

@@ -8,29 +8,35 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
     </h2>
     <ul>
       <li>
-        View our 
+        View the 
         <a
           href="/en/methodology"
         >
           Methodology & data
         </a>
-         page and send us feedback.
+         page and send feedback.
       </li>
       <li>
         Find communities of interest and 
         <a
-          href="mailto:Screeningtool-Support@omb.eop.gov"
+          class="usa-link usa-link--external"
-          target="blank"
+          data-cy=""
+          href="mailto=Screeningtool-Support@omb.eop.gov"
+          rel="noreferrer"
+          target="_blank"
         >
-          share your feedback
+          share feedback
         </a>
         .
       </li>
       <li>
         Respond to our request for information on 
         <a
+          class="usa-link usa-link--external"
+          data-cy=""
           href="https://www.federalregister.gov/"
-          target="blank"
+          rel="noreferrer"
+          target="_blank"
         >
           federalregister.gov
         </a>

client/src/components/J40Footer/J40Footer.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {render} from '@testing-library/react';
 import J40Footer from './J40Footer';
-import {LocalizedComponent} from '../test/testHelpers';
+import {LocalizedComponent} from '../../test/testHelpers';
 
 describe('J40Footer', () => {
   it('renders correctly', () => {

client/src/components/J40Footer/J40Footer.tsx

@@ -6,13 +6,14 @@ import {
 import {NavList} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';
 
-import J40MainGridContainer from './J40MainGridContainer';
+import {hyphenizeString} from '../../../cypress/integration/common/helpers';
-import {hyphenizeString} from '../../cypress/integration/common/helpers';
+import J40MainGridContainer from '../J40MainGridContainer';
-import SurveyButton from './SurveyButton';
+import LinkTypeWrapper from '../LinkTypeWrapper';
+import SurveyButton from '../SurveyButton';
 
 // @ts-ignore
-import whitehouseIcon from '../images/eop-seal.svg';
+import whitehouseIcon from '../../images/eop-seal.svg';
-import * as COMMON_COPY from '../data/copy/common';
+import * as COMMON_COPY from '../../data/copy/common';
 
 const J40Footer = () => {
   const intl = useIntl();
@@ -34,43 +35,43 @@ const J40Footer = () => {
     ],
     [
       intl.formatMessage(COMMON_COPY.FOOTER.MORE_INFO),
-      <a
+      <LinkTypeWrapper
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE)}
+        internal={false}
+        url={intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE_LINK)}
+        openUrlNewTab={true}
         className={'footer-link-first-child'}
         key={'whitehouselink2'}
-        href={intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE_LINK)}
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.WHITEHOUSE.defaultMessage)}
-        target={'_blank'}
+      />,
-        rel={'noreferrer'}
+      <LinkTypeWrapper
-        data-cy={hyphenizeString(COMMON_COPY.FOOTER.WHITEHOUSE.defaultMessage)}>
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.FOIA)}
-        {intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE)}
+        internal={false}
-      </a>,
+        url={'https://www.whitehouse.gov/ceq/foia'}
-      <a
+        openUrlNewTab={true}
-        key="foialink"
+        key={'foialink'}
-        href={'https://www.whitehouse.gov/ceq/foia'}
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.FOIA.defaultMessage)}
-        target={'_blank'}
+      />,
-        rel={'noreferrer'}
+      <LinkTypeWrapper
-        data-cy={hyphenizeString(COMMON_COPY.FOOTER.FOIA.defaultMessage)}>
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY)}
-        {intl.formatMessage(COMMON_COPY.FOOTER.FOIA)}
+        internal={false}
-      </a>,
+        url={intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY_LINK)}
-      <a
+        openUrlNewTab={true}
         key={'privacylink'}
-        href={intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY_LINK)}
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.PRIVACY.defaultMessage)}
-        target={'_blank'}
+      />,
-        rel={'noreferrer'}
-        data-cy={hyphenizeString(COMMON_COPY.FOOTER.PRIVACY.defaultMessage)}>
-        {intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY)}
-      </a>,
     ],
     [
       intl.formatMessage(COMMON_COPY.FOOTER.QUESTIONS),
-      <a
+      <LinkTypeWrapper
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT)}
+        internal={false}
+        url={intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT_LINK)}
+        openUrlNewTab={true}
         className={'footer-link-first-child'}
         key={'contactlink'}
-        href={intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT_LINK)}
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.FIND_CONTACT.defaultMessage)}
-        target={'_blank'}
+      />,
-        rel="noreferrer"
-        data-cy={hyphenizeString(COMMON_COPY.FOOTER.FIND_CONTACT.defaultMessage)}>
-        {intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT)}
-      </a>,
     ],
   ];
 

client/src/components/J40Footer/__snapshots__/J40Footer.spec.tsx.snap

@@ -79,7 +79,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link usa-link--external footer-link-first-child"
                     data-cy="whitehouse-gov"
                     href="https://www.whitehouse.gov/"
                     rel="noreferrer"
@@ -92,6 +92,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    class="usa-link usa-link--external"
                     data-cy="freedom-of-information-act-(foia)"
                     href="https://www.whitehouse.gov/ceq/foia"
                     rel="noreferrer"
@@ -104,6 +105,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    class="usa-link usa-link--external"
                     data-cy="privacy-policy"
                     href="https://www.whitehouse.gov/privacy/"
                     rel="noreferrer"
@@ -131,7 +133,7 @@ exports[`J40Footer renders correctly 1`] = `
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link usa-link--external footer-link-first-child"
                     data-cy="find-a-contact-at-usa-gov"
                     href="https://www.usa.gov/"
                     rel="noreferrer"
@@ -188,6 +190,10 @@ exports[`J40Footer renders correctly 1`] = `
         type="button"
       >
         Help improve the site & data
+        <img
+          alt="launch icon"
+          src="test-file-stub"
+        />
       </button>
     </div>
   </footer>

client/src/components/J40Footer/index.tsx

@@ -0,0 +1,3 @@
+import J40Footer from './J40Footer';
+
+export default J40Footer;

client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Link} from 'gatsby-plugin-intl';
+import {Link as TrussLink} from '@trussworks/react-uswds';
+
+interface ILinkTypeWrapper {
+    linkText?: string;
+    internal?: boolean;
+    url?: string;
+    openUrlNewTab?: boolean;
+    className?: string;
+    dataCy?: string;
+  }
+
+// eslint-disable-next-line valid-jsdoc
+/**
+ * This function wraps the two types of links we have. Internal links and
+ * external links. Internal links should use the Gatsby <Link> component.
+ * Eternal links that will open in a new tab will use the Trussworks
+ * <Link> component and external links that stay on the page will use the
+ * standard <a> tag. This function allows the instance to choose the type of link
+ * along with the props necessary to set new tabs, classes.
+ *
+ * Note - if the link is an external link and will not open in a new
+ * browser tab, ensure that hitting the back button works. This has shown to
+ * have errors on edge cases (ie, launching the gmail client with mailto links)
+ * and it is the recommendation to not have external links open in the same tab.
+ *
+ * @param props
+ * @returns
+ */
+const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
+  if (props.internal) {
+    return (
+      <Link to={`${props.url}`}>
+        {props.linkText}
+      </Link>
+    );
+  } else {
+    return props.openUrlNewTab ?
+    <TrussLink
+      variant={'external'}
+      className={props.className}
+      href={`${props.url}`}
+      target="_blank"
+      rel="noreferrer"
+      data-cy={props.dataCy ? props.dataCy : ''}
+    >
+      {props.linkText}
+    </TrussLink> :
+    <a
+      className={props.className}
+      href={props.url}
+      data-cy={props.dataCy? props.dataCy : ''}
+    >
+      {props.linkText}
+    </a>;
+  }
+};
+
+export default LinkTypeWrapper;

client/src/components/LinkTypeWrapper/__snapshots__/linkTypeWrapper.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`testing all link types tests external links new tab 1`] = `
 <DocumentFragment>
   <a
+    data-cy=""
     href="www.usds.gov"
   >
     test link text
@@ -13,6 +14,8 @@ exports[`testing all link types tests external links new tab 1`] = `
 exports[`testing all link types tests external links same tab 1`] = `
 <DocumentFragment>
   <a
+    class="usa-link usa-link--external"
+    data-cy=""
     href="www.usds.gov"
     rel="noreferrer"
     target="_blank"

client/src/components/LinkTypeWrapper/index.tsx

@@ -1,50 +1,3 @@
-import React from 'react';
+import LinkTypeWrapper from './LinkTypeWrapper';
-import {Link} from 'gatsby-plugin-intl';
-
-interface ILinkTypeWrapper {
-    linkText?: string;
-    internal?: boolean;
-    url?: string;
-    openUrlNewTab?: boolean;
-    className?: string;
-  }
-
-// eslint-disable-next-line valid-jsdoc
-/**
- * This function wraps the two types of links we have. Internal links and
- * external links. Internal links should use the <Link> component, while
- * eternal links can use the standard <a> tag. This function allows the
- * instance to choose the type of link along with the props necessary to
- * set new tabs, classes.
- *
- * Note - if the link is an external link and will not open in a new
- * browser tab, ensure that hitting the back button works. This has shown to
- * have errors on edge cases (ie, launching the gmail client with mailto links)
- * and it is the recommendation to not have external links open in the same tab.
- *
- * @param props
- * @returns
- */
-const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
-  if (props.internal) {
-    return (
-      <Link to={`${props.url}`}>
-        {props.linkText}
-      </Link>
-    );
-  } else {
-    return props.openUrlNewTab ?
-    <a
-      className={props.className}
-      href={props.url}
-      target="_blank"
-      rel="noreferrer">{props.linkText}
-    </a> :
-    <a
-      className={props.className}
-      href={props.url}>{props.linkText}
-    </a>;
-  }
-};
 
 export default LinkTypeWrapper;

client/src/components/MapWrapper/index.tsx

@@ -30,6 +30,7 @@ const MapWrapper = ({location}: IMapWrapperProps) => {
           <h2>{EXPLORE_COPY.NOTE_ON_TERRITORIES.INTRO}</h2>
           <p>{EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_1}</p>
           <p>{EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_2}</p>
+          <p>{EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_3}</p>
         </Grid>
       </Grid>
     </>

client/src/components/SurveyButton/SurveyButton.module.scss

@@ -15,12 +15,17 @@
     @include u-height(6);
     z-index: 2;
 
-    @include u-text("gray-90");
+    @include u-text("blue-70v");
     @include u-bg("yellow-20v");
 
     &:hover {
       @include u-bg("yellow-20");
       @include u-text("gray-90");
     }
+
+    .launchIcon {
+      height: .8rem;
+      // @include u-margin-bottom('neg-05');
+    }
   }
 }

client/src/components/SurveyButton/SurveyButton.module.scss.d.ts

@@ -2,6 +2,7 @@ declare namespace SurveyButtonNamespace {
     export interface ISurveyButtonScss {
         surveyButton: string;
         surveyButtonContainer: string;
+        launchIcon: string;
     }
   }
 

client/src/components/SurveyButton/SurveyButton.tsx

@@ -6,6 +6,9 @@ import * as styles from './SurveyButton.module.scss';
 import * as CONTACT_COPY from '../../data/copy/contact';
 import J40MainGridContainer from '../J40MainGridContainer';
 
+// @ts-ignore
+import launchIcon from '/node_modules/uswds/dist/img/usa-icons-bg/launch--blue-70v.svg';
+
 export const onClickHandler = () => {
   Object.assign(document.createElement('a'), {target: '_blank', href: 'https://www.surveymonkey.com/r/cejst-survey'}).click();
 };
@@ -19,6 +22,11 @@ const SurveyButton = () => {
         className={styles.surveyButton}
         onClick={() => onClickHandler()}>
         {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.SURVEY_TEXT)}
+        <img
+          className={styles.launchIcon}
+          src={launchIcon}
+          alt={'launch icon'}
+        />
       </Button>
     </J40MainGridContainer>
   );

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

@@ -12,6 +12,10 @@ exports[`rendering of the SurveyButton checks if component renders 1`] = `
       type="button"
     >
       Help improve the site & data
+      <img
+        alt="launch icon"
+        src="test-file-stub"
+      />
     </button>
   </div>
 </DocumentFragment>

client/src/data/copy/about.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import {defineMessages} from 'react-intl';
 import {FormattedMessage} from 'gatsby-plugin-intl';
 
+import LinkTypeWrapper from '../../components/LinkTypeWrapper';
+
 export const EXEC_ORDER_LINK = 'https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/27/executive-order-on-tackling-the-climate-crisis-at-home-and-abroad/';
 
 export const PAGE = defineMessages({
@@ -61,10 +63,12 @@ export const HEADING_1 = {
     tool identifies disadvantaged communities through publicly-available, nationally-consistent, and high-quality data.
     `}
     values={{
-      eoLink:
+      eoLink: <LinkTypeWrapper
-      <a href={EXEC_ORDER_LINK} target={'blank'}>
+        linkText={'Executive Order 14008'}
-        Executive Order 14008
+        internal={false}
-      </a>,
+        url={EXEC_ORDER_LINK}
+        openUrlNewTab={true}
+      />,
       tacklingItalics: <i>Tackling the Climate Crisis at Home and Abroad</i>,
     }}
   />,
@@ -80,10 +84,12 @@ export const HEADING_2 = {
     {eoLink} on {tacklingItalics}.
     `}
     values={{
-      eoLink:
+      eoLink: <LinkTypeWrapper
-      <a href={EXEC_ORDER_LINK} target={'blank'}>
+        linkText={'Executive Order 14008'}
-        Executive Order 14008
+        internal={false}
-      </a>,
+        url={EXEC_ORDER_LINK}
+        openUrlNewTab={true}
+      />,
       tacklingItalics: <i>Tackling the Climate Crisis at Home and Abroad</i>,
     }}
   />,

client/src/data/copy/explore.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import {defineMessages} from 'react-intl';
 import {FormattedMessage, Link} from 'gatsby-plugin-intl';
+import LinkTypeWrapper from '../../components/LinkTypeWrapper';
 
 import * as CONTACT_COPY from './contact';
 import * as METHODOLOGY_COPY from './methodology';
@@ -623,15 +624,21 @@ export const NOTE_ON_TERRITORIES = {
   PARA_2: <FormattedMessage
     id={'explore.page.note.on.territories.para.2'}
     defaultMessage={`
-      For American Samoa, Northern Mariana Islands, Guam and U.S. Virgin Islands, the last reported data from 
+      The Decennial Census data from 2010 was used 
-      the Census Bureau is the Decennial Census from 2010. The Decennial Census data from 2010 was used 
+      for American Samoa and Northern Mariana Islands using only the unemployment, poverty, low median 
-      for American Samoa and Northern Mariana Islands using only the unemployment, poverty, area median 
       income, and high school degree achievement rate fields in the Training and Workforce Development 
-      category of the methodology. Work is underway to identify disadvantaged communities and update the 
+      category of the methodology.
-      CEJST accordingly for Guam and the U.S. Virgin Islands.
     `}
     description={`territories paragraph 2`}
   />,
+  PARA_3: <FormattedMessage
+    id={'explore.page.note.on.territories.para.3'}
+    defaultMessage={`
+      Work is underway to identify disadvantaged communities and update the 
+      CEJST accordingly for Guam and the U.S. Virgin Islands.
+        `}
+    description={`territories paragraph 3`}
+  />,
 
 };
 export const HOW_YOU_CAN_HELP_LIST_ITEMS = {
@@ -643,7 +650,7 @@ export const HOW_YOU_CAN_HELP_LIST_ITEMS = {
   LIST_ITEM_1: <FormattedMessage
     id={'youCanHelpInfoText.list.item.1'}
     description={'give us feedback on our data and methodology'}
-    defaultMessage={`View our {dataMeth} page and send us feedback.`}
+    defaultMessage={`View the {dataMeth} page and send feedback.`}
     values={{
       dataMeth:
     <Link to={'/methodology'}>
@@ -661,9 +668,12 @@ export const HOW_YOU_CAN_HELP_LIST_ITEMS = {
     defaultMessage={`Find communities of interest and {shareFeedback}.`}
     values={{
       shareFeedback:
-        <a href={`mailto:${CONTACT_COPY.FEEDBACK_EMAIL}`} target={'blank'}>
+        <LinkTypeWrapper
-          {'share your feedback'}
+          linkText= {'share feedback'}
-        </a>,
+          internal= {false}
+          url= {`mailto=${CONTACT_COPY.FEEDBACK_EMAIL}`}
+          openUrlNewTab= {true}
+        />,
     }}
   />,
   LIST_ITEM_3: <FormattedMessage
@@ -672,9 +682,12 @@ export const HOW_YOU_CAN_HELP_LIST_ITEMS = {
     defaultMessage={`Respond to our request for information on {federalRegisterLink}.`}
     values={{
       federalRegisterLink:
-        <a href={`https://www.federalregister.gov/`} target={'blank'}>
+      <LinkTypeWrapper
-          {'federalregister.gov'}
+        linkText={'federalregister.gov'}
-        </a>,
+        internal={false}
+        url={`https://www.federalregister.gov/`}
+        openUrlNewTab={true}
+      />,
     }}
   />,
 

client/src/data/copy/methodology.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {defineMessages} from 'react-intl';
 import {FormattedMessage} from 'gatsby-plugin-intl';
+import LinkTypeWrapper from '../../components/LinkTypeWrapper';
 
 export const PAGE = defineMessages({
   TILE: {
@@ -549,203 +550,20 @@ export const DATASET_CARD_LABELS = defineMessages({
     defaultMessage: 'Date range: ',
     description: 'label associated with explaining the card',
   },
+  SOURCE: {
+    id: 'datasetCard.source',
+    defaultMessage: 'Source: ',
+    description: 'label associated with source of the card',
+  },
+  AVAILABLE_FOR: {
+    id: 'datasetCard.available.for',
+    defaultMessage: 'Available for: ',
+    description: 'label associated with available for which regions of the card',
+  },
 });
 
-export const RESPONSIBLE_PARTIES = {
-  CENSUS_ACS: <FormattedMessage
-    id= {'category.resp.party.census.link'}
-    defaultMessage= {'{resPartyCensusLink}'}
-    description= {'responsible party link for Census ACS'}
-    values= {{
-      resPartyCensusLink:
-      <a href={`https://www.census.gov/programs-surveys/acs`} target={'_blank'} rel="noreferrer">
-        {`Census's American Community Survey`}
-      </a>,
-    }}
-  />,
-  FEMA: <FormattedMessage
-    id= {'category.resp.party.fema.link'}
-    defaultMessage= {`{resPartyFemaLink}`}
-    description= {'responsible party link for FEMA'}
-    values={{
-      resPartyFemaLink:
-      <a href={`https://hazards.fema.gov/nri/expected-annual-loss`} target={'_blank'} rel="noreferrer">
-        {`Federal Emergency Management Agency (FEMA)`}
-      </a>,
-    }}
-  />,
-  DOE: <FormattedMessage
-    id= {'category.resp.party.doe.link'}
-    defaultMessage= {`{resPartyDoeLink}`}
-    description= {'responsible party link for FEMA'}
-    values={{
-      resPartyDoeLink:
-      <a href={`https://www.energy.gov/eere/slsc/low-income-energy-affordability-data-lead-tool`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`Department of Energy (DOE) LEAD Score`}
-      </a>,
-    }}
-  />,
-  EPA_OAR: <FormattedMessage
-    id= {'category.resp.party.epa.oar.link'}
-    defaultMessage= {`{resPartyEpaOarLink}`}
-    description= {'responsible party link for EPA OAR'}
-    values={{
-      resPartyEpaOarLink:
-      <a href={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Environmental Protection Agency (EPA) Office of Air and Radiation (OAR) fusion of model and monitor 
-          data as compiled by EPA's EJSCREEN, sourced from EPA National Air Toxics Assessment (NATA), 2017 
-          U.S. Department of Transportation (DOT) traffic data
-        `}
-      </a>,
-    }}
-  />,
-  EPA_NATA: <FormattedMessage
-    id= {'category.resp.party.epa.nata.link'}
-    defaultMessage= {`{resPartyEpaOarLink}`}
-    description= {'responsible party link for EPA NATA'}
-    values={{
-      resPartyEpaOarLink:
-      <a href={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Environmental Protection Agency (EPA) National Air Toxics Assessment (NATA)
-          as compiled by EPA's EJSCREEN        
-        `}
-      </a>,
-    }}
-  />,
-  DOT_EPA: <FormattedMessage
-    id= {'category.resp.party.dot.epa.link'}
-    defaultMessage= {`{resPartyDotEpaLink}`}
-    description= {'responsible party link for DOT EPA'}
-    values={{
-      resPartyDotEpaLink:
-      <a href={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Department of Transportation (DOT) traffic data as compiled by EPA's EJSCREEN      
-        `}
-      </a>,
-    }}
-  />,
-  HUD: <FormattedMessage
-    id= {'category.resp.party.hud.link'}
-    defaultMessage= {`{resPartyHudLink}`}
-    description= {'responsible party link for HUD'}
-    values={{
-      resPartyHudLink:
-      <a href={`https://www.huduser.gov/portal/datasets/cp.html`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Department of Housing & Urban Development’s
-          (HUD) Comprehensive Housing Affordability Strategy dataset
-        `}
-      </a>,
-    }}
-  />,
-  EPA_TSDF: <FormattedMessage
-    id= {'category.resp.party.epa.tsdf.link'}
-    defaultMessage= {`{resPartyEpaTsdfLink}`}
-    description= {'responsible party link for EPA TSDF'}
-    values={{
-      resPartyEpaTsdfLink:
-      <a href={`https://enviro.epa.gov/facts/rcrainfo/search.html`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Environmental Protection Agency (EPA) Treatment Storage, and Disposal Facilities
-          (TSDF) data calculated from EPA RCRA info database as compiled by EPA’s EJSCREEN
-        `}
-      </a>,
-    }}
-  />,
-  EPA_CERCLIS: <FormattedMessage
-    id= {'category.resp.party.epa.cerclis.link'}
-    defaultMessage= {`{resPartyEpaCerclisLink}`}
-    description= {'responsible party link for EPA CERCLIS'}
-    values={{
-      resPartyEpaCerclisLink:
-      <a href={`https://enviro.epa.gov/facts/rcrainfo/search.html`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Environmental Protection Agency (EPA) CERCLIS database as compiled by EPA’s EJSCREEN        
-        `}
-      </a>,
-    }}
-  />,
-  EPA_RMP: <FormattedMessage
-    id= {'category.resp.party.epa.rmp.link'}
-    defaultMessage= {`{resPartyEpaRmpLink}`}
-    description= {'responsible party link for EPA RMP'}
-    values={{
-      resPartyEpaRmpLink:
-      <a href={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Environmental Protection Agency (EPA) RMP database as compiled by EPA’s EJSCREEN        
-        `}
-      </a>,
-    }}
-  />,
-  EPA_RSEI: <FormattedMessage
-    id= {'category.resp.party.epa.rsei.link'}
-    defaultMessage= {`{resPartyEpaRseiLink}`}
-    description= {'responsible party link for EPA RSEI'}
-    values={{
-      resPartyEpaRseiLink:
-      <a href={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Environmental Protection Agency (EPA) Risk-Screening
-          Environmental Indicators (RSEI) Model as compiled by EPA's EJSCREEN        
-        `}
-      </a>,
-    }}
-  />,
-  CDC_PLACES: <FormattedMessage
-    id= {'category.resp.party.cdc.places.link'}
-    defaultMessage= {`{resPartyCdcPlacesLink}`}
-    description= {'responsible party link for CDC Places'}
-    values={{
-      resPartyCdcPlacesLink:
-      <a href={`https://www.cdc.gov/places/index.html`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          Centers for Disease Control and Prevention (CDC) PLACES        
-        `}
-      </a>,
-    }}
-  />,
-  CDC_SLEEP: <FormattedMessage
-    id= {'category.resp.party.cdc.sleep.link'}
-    defaultMessage= {`{resPartyCdcSleepLink}`}
-    description= {'responsible party link for CDC Sleep'}
-    values={{
-      resPartyCdcSleepLink:
-      <a href={`https://www.cdc.gov/nchs/nvss/usaleep/usaleep.html#data`}
-        target={'_blank'}
-        rel="noreferrer">
-        {`
-          CDC’s U.S. Small-area Life Expectancy Estimates Project (USALEEP)        
-        `}
-      </a>,
-    }}
-  />,
-};
-
 export const DATE_RANGE = {
+  TEN: '2010',
   TEN_PLUS_5: '2010-2015',
   FOURTEEN: '2014',
   FOURTEEN_PLUS_4: '2014-2018',
@@ -758,6 +576,254 @@ export const DATE_RANGE = {
   TWENTY: '2020',
 };
 
+export const RESPONSIBLE_PARTIES = {
+  CDC: `Centers for Disease Control and Prevention (CDC)`,
+  CENSUS: `Census`,
+  DOE: `Department of Energy (DOE)`,
+  DOT: `Department of Transportation (DOT)`,
+  EPA: `Environmental Protection Agency (EPA)`,
+  EPA_OAR: `Environmental Protection Agency (EPA) Office of Air and Radiation (OAR)`,
+  FEMA: `Federal Emergency Management Agency (FEMA)`,
+  HUD: `Department of Housing & Urban Development's (HUD)`,
+};
+
+export const SOURCE_LINKS = {
+  CENSUS_ACS_15_19: <FormattedMessage
+    id= {'category.source.census.link'}
+    defaultMessage= {'{sourceCensusLink} from {date15_19}'}
+    description= {'source link for Census ACS'}
+    values= {{
+      sourceCensusLink:
+        <LinkTypeWrapper
+          linkText={`American Community Survey`}
+          internal={false}
+          url={`https://www.census.gov/programs-surveys/acs`}
+          openUrlNewTab={true}
+        />,
+      date15_19: DATE_RANGE.FIFETEEN_PLUS_4,
+    }}
+  />,
+  CENSUS_ACS_10: <FormattedMessage
+    id= {'category.source.census.link'}
+    defaultMessage= {'{sourceCensusLink} from {date10}'}
+    description= {'source link for Census ACS'}
+    values= {{
+      sourceCensusLink:
+        <LinkTypeWrapper
+          linkText={`American Community Survey`}
+          internal={false}
+          url={`https://www.census.gov/programs-surveys/acs`}
+          openUrlNewTab={true}
+        />,
+      date10: DATE_RANGE.TEN,
+    }}
+  />,
+  FEMA_NRI: <FormattedMessage
+    id= {'category.source.fema.link'}
+    defaultMessage= {`{sourceFemaLink} from {date14_21}`}
+    description= {'source link for FEMA'}
+    values={{
+      sourceFemaLink:
+        <LinkTypeWrapper
+          linkText={`National Risk Index`}
+          internal={false}
+          url={`https://hazards.fema.gov/nri/expected-annual-loss`}
+          openUrlNewTab={true}
+        />,
+      date14_21: DATE_RANGE.FOURTEEN_PLUS_7,
+    }}
+  />,
+  DOE_LEAD: <FormattedMessage
+    id= {'category.source.doe.lead.link'}
+    defaultMessage= {`{sourceDoeLeadLink} from {date18}`}
+    description= {'source link for DOE FEMA'}
+    values={{
+      sourceDoeLeadLink:
+        <LinkTypeWrapper
+          linkText={`LEAD Score`}
+          internal={false}
+          url={`https://www.energy.gov/eere/slsc/low-income-energy-affordability-data-lead-tool`}
+          openUrlNewTab={true}
+        />,
+      date18: DATE_RANGE.EIGHTEEN,
+    }}
+  />,
+  EPA_OAR: <FormattedMessage
+    id= {'category.source.epa.oar.link'}
+    defaultMessage= {`
+      {sourceEpaOarLink} from {date17} as compiled by EPA’s EJSCREEN, sourced from EPA National Air 
+      Toxics Assessment (NATA) and the U.S. Department of Transportation (DOT) traffic data
+    `}
+    description= {'source link for EPA OAR'}
+    values={{
+      sourceEpaOarLink:
+        <LinkTypeWrapper
+          linkText={`Fusion of model and monitor data`}
+          internal={false}
+          url={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
+          openUrlNewTab={true}
+        />,
+      date17: DATE_RANGE.SEVENTEEN,
+    }}
+  />,
+  EPA_NATA: <FormattedMessage
+    id= {'category.source.epa.nata.link'}
+    defaultMessage= {`{sourceEpaOarLink} from {date14} as compiled by EPA's EJSCREEN`}
+    description= {'source link for EPA NATA'}
+    values={{
+      sourceEpaOarLink:
+        <LinkTypeWrapper
+          linkText={`National Air Toxics Assessment (NATA)`}
+          internal={false}
+          url={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
+          openUrlNewTab={true}
+        />,
+      date14: DATE_RANGE.FOURTEEN,
+    }}
+  />,
+  DOT_EPA: <FormattedMessage
+    id= {'category.source.dot.epa.link'}
+    defaultMessage= {`{sourceDotEpaLink} from {date17} as compiled by EPA's EJSCREEN`}
+    description= {'source link for DOT EPA'}
+    values={{
+      sourceDotEpaLink:
+        <LinkTypeWrapper
+          linkText={`Traffic Data`}
+          internal={false}
+          url={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
+          openUrlNewTab={true}
+        />,
+      date17: DATE_RANGE.SEVENTEEN,
+    }}
+  />,
+  HUD: <FormattedMessage
+    id= {'category.source.hud.link'}
+    defaultMessage= {`{sourceHudLink} from {date14_18}`}
+    description= {'source link for HUD'}
+    values={{
+      sourceHudLink:
+        <LinkTypeWrapper
+          linkText={`Comprehensive Housing Affordability Strategy dataset`}
+          internal={false}
+          url={`https://www.huduser.gov/portal/datasets/cp.html`}
+          openUrlNewTab={true}
+        />,
+      date14_18: DATE_RANGE.FOURTEEN_PLUS_4,
+    }}
+  />,
+  EPA_TSDF: <FormattedMessage
+    id= {'category.source.epa.tsdf.link'}
+    defaultMessage= {`
+      {sourceEpaTsdfLink} from {date20} calculated from EPA RCRA database as compiled 
+      by EPA's EJSCREEN
+    `}
+    description= {'source link for EPA TSDF'}
+    values={{
+      sourceEpaTsdfLink:
+        <LinkTypeWrapper
+          linkText={`Treatment Storage, and Disposal Facilities (TSDF) data`}
+          internal={false}
+          url={`https://enviro.epa.gov/facts/rcrainfo/search.html`}
+          openUrlNewTab={true}
+        />,
+      date20: DATE_RANGE.TWENTY,
+    }}
+  />,
+  EPA_CERCLIS: <FormattedMessage
+    id= {'category.source.epa.cerclis.link'}
+    defaultMessage= {`{sourceEpaCerclisLink} from {date20} as compiled by EPA’s EJSCREEN`}
+    description= {'source link for EPA CERCLIS'}
+    values={{
+      sourceEpaCerclisLink:
+        <LinkTypeWrapper
+          linkText={`CERCLIS database`}
+          internal={false}
+          url={`https://enviro.epa.gov/facts/rcrainfo/search.html`}
+          openUrlNewTab={true}
+        />,
+      date20: DATE_RANGE.TWENTY,
+    }}
+  />,
+  EPA_RMP: <FormattedMessage
+    id= {'category.source.epa.rmp.link'}
+    defaultMessage= {`{sourceEpaRmpLink} from {date20} as compiled by EPA’s EJSCREEN`}
+    description= {'source link for EPA RMP'}
+    values={{
+      sourceEpaRmpLink:
+        <LinkTypeWrapper
+          linkText={`RMP database`}
+          internal={false}
+          url={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
+          openUrlNewTab={true}
+        />,
+      date20: DATE_RANGE.TWENTY,
+    }}
+  />,
+  EPA_RSEI: <FormattedMessage
+    id= {'category.source.epa.rsei.link'}
+    defaultMessage= {`{sourceEpaRseiLink} from {date20} as compiled by EPA’s EJSCREEN`}
+    description= {'source link for EPA RSEI'}
+    values={{
+      sourceEpaRseiLink:
+        <LinkTypeWrapper
+          linkText={`Risk-Screening Environmental Indicators (RSEI) Model`}
+          internal={false}
+          url={`https://www.epa.gov/ejscreen/technical-documentation-ejscreen`}
+          openUrlNewTab={true}
+        />,
+      date20: DATE_RANGE.TWENTY,
+    }}
+  />,
+  CDC_PLACES: <FormattedMessage
+    id= {'category.source.cdc.places.link'}
+    defaultMessage= {`{sourceCdcPlacesLink} from {date16_19}`}
+    description= {'source link for CDC Places'}
+    values={{
+      sourceCdcPlacesLink:
+        <LinkTypeWrapper
+          linkText={`PLACES data`}
+          internal={false}
+          url={`https://www.cdc.gov/places/index.html`}
+          openUrlNewTab={true}
+        />,
+      date16_19: DATE_RANGE.SIXTEEN_PLUS_3,
+    }}
+  />,
+  CDC_SLEEP: <FormattedMessage
+    id= {'category.source.cdc.sleep.link'}
+    defaultMessage= {`{sourceCdcSleepLink} from {date10_15}`}
+    description= {'source link for CDC Sleep'}
+    values={{
+      sourceCdcSleepLink:
+        <LinkTypeWrapper
+          linkText={`U.S. Small-area Life Expectancy Estimates Project (USALEEP)`}
+          internal={false}
+          url={`https://www.cdc.gov/nchs/nvss/usaleep/usaleep.html#data`}
+          openUrlNewTab={true}
+        />,
+      date10_15: DATE_RANGE.TEN_PLUS_5,
+    }}
+  />,
+};
+
+export const AVAILABLE_FOR = {
+  ALL_US_DC: `All U.S. states and the District of Columbia`,
+  ALL_US_DC_PR: `All U.S. states, the District of Columbia, and Puerto Rico`,
+  AS_NMI: `American Samoa and the Northern Mariana Islands`,
+};
+
+export interface IIndicators {
+  domID: string,
+  indicator: string,
+  description: string,
+  usedIn: string,
+  responsibleParty: string,
+  sources: [ {
+    source: string,
+    availableFor: string,
+  }]
+};
+
 export const INDICATORS = [
   {
     domID: 'low-income',
@@ -771,8 +837,13 @@ export const INDICATORS = [
       description= {'description text for low income'}
     />,
     usedIn: CATEGORIES.ALL.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CENSUS_ACS,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'exp-agr-loss-rate',
@@ -780,17 +851,22 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.exp.agr.loss.rate.description.text'}
       defaultMessage= {`
-        Percent of agriculture value at risk from losses due to natural hazards. Calculated by dividing 
+        Percent of agriculture value at risk from losses due to natural hazards such as the fourteen 
-        the agriculture value at risk in a census tract by the total agriculture value in that census 
+        natural hazards that have some link to climate change including: avalanche, coastal flooding, 
-        tract. Fourteen natural hazards that have some link to climate change include: avalanche, 
+        cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine flooding, strong 
-        coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, 
+        wind, tornado, wildfire, and winter weather. Calculated by dividing the agriculture value at risk in 
-        riverine flooding, strong wind, tornado, wildfire, and winter weather.
+        a census tract by the total agriculture value in that census tract.
       `}
       description= {'description text for exp agr loss rate'}
     />,
     usedIn: CATEGORIES.CLIMATE_CHANGE.METHODOLOGY,
     responsibleParty: RESPONSIBLE_PARTIES.FEMA,
-    dateRange: DATE_RANGE.FOURTEEN_PLUS_7,
+    sources: [
+      {
+        source: SOURCE_LINKS.FEMA_NRI,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'exp-bld-loss-rate',
@@ -798,17 +874,22 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.exp.bld.loss.rate.description.text'}
       defaultMessage= {`
-        Percent of building value at risk from losses due to natural hazards. Calculated by dividing the 
+        Percent of building value at risk from losses due to natural hazards such as the fourteen 
-        building value at risk in a census tract by the total building value in that census tract. 
+        natural hazards that have some link to climate change including: avalanche, coastal flooding, 
-        Fourteen natural hazards that have some link to climate change include: avalanche, 
+        cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine flooding, strong 
-        coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, 
+        wind, tornado, wildfire, and winter weather. Calculated by dividing the building value at risk in 
-        riverine flooding, strong wind, tornado, wildfire, and winter weather.
+        a census tract by the total building value in that census tract.
-        `}
+      `}
       description= {'description text for exp bld loss rate'}
     />,
     usedIn: CATEGORIES.CLIMATE_CHANGE.METHODOLOGY,
     responsibleParty: RESPONSIBLE_PARTIES.FEMA,
-    dateRange: DATE_RANGE.FOURTEEN_PLUS_7,
+    sources: [
+      {
+        source: SOURCE_LINKS.FEMA_NRI,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'exp-pop-loss-rate',
@@ -816,23 +897,28 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.exp.pop.loss.rate.description.text'}
       defaultMessage= {`
-        Rate relative to the population in fatalities and injuries due to natural hazards each year. 
+        Rate relative to the population in fatalities and injuries due to natural hazards each year such as 
-        Fourteen natural hazards that have some link to climate change include: avalanche, coastal 
+        the fourteen natural hazards that have some link to climate change including: avalanche, 
-        flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine 
+        coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, 
-        flooding, strong wind, tornado, wildfire, and winter weather.
+        riverine flooding, strong wind, tornado, wildfire, and winter weather. Population loss is defined 
-        Population loss is defined as the Spatial Hazard Events and Losses or National Centers 
+        as the Spatial Hazard Events and Losses or National Centers for Environmental Information’s 
-        for Environmental Information’s (NCEI) reported number of fatalities and injuries caused by the 
+        (NCEI) reported number of fatalities and injuries caused by the hazard occurrence. To 
-        hazard occurrence. To combine fatalities and injuries for the computation of population loss value, 
+        combine fatalities and injuries for the computation of population loss value, an injury is counted 
-        an injury is counted as one-tenth (1/10) of a fatality. The NCEI Storm Events Database 
+        as one-tenth (1/10) of a fatality. The NCEI Storm Events Database classifies injuries and fatalities 
-        classifies injuries and fatalities as direct or indirect. Both direct and indirect injuries 
+        as direct or indirect. Both direct and indirect injuries and fatalities are counted as population 
-        and fatalities are counted as population loss. This total number of injuries and fatalities 
+        loss. This total number of injuries and fatalities is then divided by the population in the 
-        is then divided by the population in the census tract to get a per-capita rate of population risk.   
+        census tract to get a per-capita rate of population risk. 
       `}
       description= {'description text for exp pop loss rate'}
     />,
     usedIn: CATEGORIES.CLIMATE_CHANGE.METHODOLOGY,
     responsibleParty: RESPONSIBLE_PARTIES.FEMA,
-    dateRange: DATE_RANGE.FOURTEEN_PLUS_7,
+    sources: [
+      {
+        source: SOURCE_LINKS.FEMA_NRI,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'energy-burden',
@@ -844,7 +930,12 @@ export const INDICATORS = [
     />,
     usedIn: CATEGORIES.CLEAN_ENERGY.METHODOLOGY,
     responsibleParty: RESPONSIBLE_PARTIES.DOE,
-    dateRange: DATE_RANGE.EIGHTEEN,
+    sources: [
+      {
+        source: SOURCE_LINKS.DOE_LEAD,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'pm-25',
@@ -858,7 +949,12 @@ export const INDICATORS = [
     />,
     usedIn: CATEGORIES.CLEAN_ENERGY.METHODOLOGY,
     responsibleParty: RESPONSIBLE_PARTIES.EPA_OAR,
-    dateRange: DATE_RANGE.SEVENTEEN,
+    sources: [
+      {
+        source: SOURCE_LINKS.EPA_OAR,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'diesel-pm',
@@ -871,8 +967,13 @@ export const INDICATORS = [
       description= {'description text for diesel pm'}
     />,
     usedIn: CATEGORIES.CLEAN_TRANSPORT.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.EPA_NATA,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
-    dateRange: DATE_RANGE.FOURTEEN,
+    sources: [
+      {
+        source: SOURCE_LINKS.EPA_NATA,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'traffic-vol',
@@ -886,8 +987,13 @@ export const INDICATORS = [
       description= {'description text for traffic volume'}
     />,
     usedIn: CATEGORIES.CLEAN_TRANSPORT.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.DOT_EPA,
+    responsibleParty: RESPONSIBLE_PARTIES.DOT,
-    dateRange: DATE_RANGE.SEVENTEEN,
+    sources: [
+      {
+        source: SOURCE_LINKS.DOT_EPA,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'house-burden',
@@ -895,14 +1001,19 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.house.burden.description.text'}
       defaultMessage= {`
-        The percent of households in a census tract that are both earning less than 80% of HUD Area Median 
+        The percent of households in a census tract that are both earning less than 80% of HUD Area Median
-        Family Income by county and are paying greater than 30% of their income to housing costs.    
+        Family Income by county and are paying greater than 30% of their income to housing costs.
       `}
       description= {'description text for housing burden'}
     />,
     usedIn: CATEGORIES.AFFORDABLE_HOUSING.METHODOLOGY,
     responsibleParty: RESPONSIBLE_PARTIES.HUD,
-    dateRange: DATE_RANGE.FOURTEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.HUD,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'lead-paint',
@@ -910,14 +1021,19 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.lead.paint.description.text'}
       defaultMessage= {`
-        Percent of housing units built pre-1960, used as an indicator of potential lead paint exposure in 
+        Percent of housing units built pre-1960, used as an indicator of potential lead paint exposure in
         tracts with median home values less than 90th percentile
       `}
       description= {'description text for lead paint'}
     />,
     usedIn: CATEGORIES.AFFORDABLE_HOUSING.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CENSUS_ACS,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'median-home',
@@ -930,8 +1046,13 @@ export const INDICATORS = [
       description= {'description text for lead paint'}
     />,
     usedIn: CATEGORIES.AFFORDABLE_HOUSING.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CENSUS_ACS,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'prox-haz',
@@ -945,8 +1066,13 @@ export const INDICATORS = [
       description= {'description text for proximity to hazards'}
     />,
     usedIn: CATEGORIES.LEGACY_POLLUTION.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.EPA_TSDF,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
-    dateRange: DATE_RANGE.TWENTY,
+    sources: [
+      {
+        source: SOURCE_LINKS.EPA_TSDF,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'prox-npl',
@@ -955,13 +1081,18 @@ export const INDICATORS = [
       id= {'category.prox.npl.description.text'}
       defaultMessage= {`
         Count of proposed or listed NPL - also known as superfund - sites within 5 km (or nearest one
-        beyond 5 km), each divided by distance in kilometers.      
+        beyond 5 km), each divided by distance in kilometers.
         `}
       description= {'description text for proximity to npl'}
     />,
     usedIn: CATEGORIES.LEGACY_POLLUTION.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.EPA_CERCLIS,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
-    dateRange: DATE_RANGE.TWENTY,
+    sources: [
+      {
+        source: SOURCE_LINKS.EPA_CERCLIS,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'prox-rmp',
@@ -975,8 +1106,13 @@ export const INDICATORS = [
       description= {'description text for proximity to rmp'}
     />,
     usedIn: CATEGORIES.LEGACY_POLLUTION.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.EPA_RMP,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
-    dateRange: DATE_RANGE.TWENTY,
+    sources: [
+      {
+        source: SOURCE_LINKS.EPA_RMP,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'waste-water',
@@ -984,14 +1120,19 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.waste.water.description.text'}
       defaultMessage= {`
-        Risk-Screening Environmental Indicators (RSEI) modeled Toxic Concentrations at 
+        Risk-Screening Environmental Indicators (RSEI) modeled Toxic Concentrations at
         stream segments within 500 meters, divided by distance in kilometers (km).
       `}
       description= {'description text for waste water'}
     />,
     usedIn: CATEGORIES.CLEAN_WATER.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.EPA_RSEI,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
-    dateRange: DATE_RANGE.TWENTY,
+    sources: [
+      {
+        source: SOURCE_LINKS.EPA_RSEI,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'asthma',
@@ -999,15 +1140,20 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.asthma.description.text'}
       defaultMessage= {`
-        Weighted percent of people who answer “yes” to both of the following questions: “Have you ever 
+        Weighted percent of people who answer “yes” to both of the following questions: “Have you ever
         been told by a doctor, nurse, or other health professional that you have asthma?” and the question
         “Do you still have asthma?”
       `}
       description= {'description text for asthma'}
     />,
     usedIn: CATEGORIES.HEALTH_BURDENS.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CDC_PLACES,
+    responsibleParty: RESPONSIBLE_PARTIES.CDC,
-    dateRange: DATE_RANGE.SIXTEEN_PLUS_3,
+    sources: [
+      {
+        source: SOURCE_LINKS.CDC_PLACES,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'diabetes',
@@ -1022,8 +1168,13 @@ export const INDICATORS = [
       description= {'description text for diabetes'}
     />,
     usedIn: CATEGORIES.HEALTH_BURDENS.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CDC_PLACES,
+    responsibleParty: RESPONSIBLE_PARTIES.CDC,
-    dateRange: DATE_RANGE.SIXTEEN_PLUS_3,
+    sources: [
+      {
+        source: SOURCE_LINKS.CDC_PLACES,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'heart-disease',
@@ -1038,8 +1189,13 @@ export const INDICATORS = [
       description= {'description text for diabetes'}
     />,
     usedIn: CATEGORIES.HEALTH_BURDENS.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CDC_PLACES,
+    responsibleParty: RESPONSIBLE_PARTIES.CDC,
-    dateRange: DATE_RANGE.SIXTEEN_PLUS_3,
+    sources: [
+      {
+        source: SOURCE_LINKS.CDC_PLACES,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'life-exp',
@@ -1053,17 +1209,22 @@ export const INDICATORS = [
       description= {'description text for low life expectancy'}
       values= {{
         note: <p><strong>Note:</strong>{`
-          Unlike most of the other datasets, high values of this indicator indicate low burdens. 
+          Unlike most of the other datasets, high values of this indicator indicate low burdens.
-          For percentile calculations, the percentile is calculated in reverse order, so that the tract with 
+          For percentile calculations, the percentile is calculated in reverse order, so that the tract with
-          the highest median income relative to area median income (lowest burden on this measure) is at the 
+          the highest median income relative to area median income (lowest burden on this measure) is at the
-          0th percentile, and the tract with the lowest median income relative to area median income 
+          0th percentile, and the tract with the lowest median income relative to area median income
           (highest burden on this measure) is at the 100th percentile.
         `}</p>,
       }}
     />,
     usedIn: CATEGORIES.HEALTH_BURDENS.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CDC_SLEEP,
+    responsibleParty: RESPONSIBLE_PARTIES.CDC,
-    dateRange: DATE_RANGE.TEN_PLUS_5,
+    sources: [
+      {
+        source: SOURCE_LINKS.CDC_SLEEP,
+        availableFor: AVAILABLE_FOR.ALL_US_DC,
+      },
+    ],
   },
   {
     domID: 'low-med-inc',
@@ -1076,8 +1237,17 @@ export const INDICATORS = [
       description= {'description text for workforce dev'}
     />,
     usedIn: CATEGORIES.WORKFORCE_DEV.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CENSUS_ACS,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC_PR,
+      },
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_10,
+        availableFor: AVAILABLE_FOR.AS_NMI,
+      },
+    ],
   },
   {
     domID: 'ling-iso',
@@ -1085,13 +1255,19 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.linguistic.iso.description.text'}
       defaultMessage= {`
-        The percent of limited speaking households, which are households where no one over age 14 speaks English well.
+        The percent of limited speaking households, which are households where no one over age
+        14 speaks English well.
       `}
       description= {'description text for linguistic isolation'}
     />,
     usedIn: CATEGORIES.WORKFORCE_DEV.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CENSUS_ACS,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC_PR,
+      },
+    ],
   },
   {
     domID: 'unemploy',
@@ -1104,8 +1280,17 @@ export const INDICATORS = [
       description= {'description text for unemployment'}
     />,
     usedIn: CATEGORIES.WORKFORCE_DEV.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CENSUS_ACS,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC_PR,
+      },
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_10,
+        availableFor: AVAILABLE_FOR.AS_NMI,
+      },
+    ],
   },
   {
     domID: 'poverty',
@@ -1113,14 +1298,23 @@ export const INDICATORS = [
     description: <FormattedMessage
       id= {'category.poverty.description.text'}
       defaultMessage= {`
-        Percent of a tract's population in households where the household income is at or below 100% of 
+        Percent of a tract's population in households where the household income is at or below 100% of
         the federal poverty level.
       `}
       description= {'description text for poverty'}
     />,
     usedIn: CATEGORIES.WORKFORCE_DEV.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CENSUS_ACS,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC_PR,
+      },
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_10,
+        availableFor: AVAILABLE_FOR.AS_NMI,
+      },
+    ],
   },
   {
     domID: 'high-school',
@@ -1134,8 +1328,17 @@ export const INDICATORS = [
       description= {'description text for highschool'}
     />,
     usedIn: CATEGORIES.WORKFORCE_DEV.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CENSUS_ACS,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    sources: [
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_15_19,
+        availableFor: AVAILABLE_FOR.ALL_US_DC_PR,
+      },
+      {
+        source: SOURCE_LINKS.CENSUS_ACS_10,
+        availableFor: AVAILABLE_FOR.AS_NMI,
+      },
+    ],
     isPercent: true,
   },
 ];

client/src/pages/__snapshots__/contact.test.tsx.snap

@@ -293,6 +293,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
           <p>
             For general feedback, email 
             <a
+              class="usa-link usa-link--external"
+              data-cy=""
               href="mailto:Screeningtool-Support@omb.eop.gov"
               rel="noreferrer"
               target="_blank"
@@ -382,7 +384,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link usa-link--external footer-link-first-child"
                     data-cy="whitehouse-gov"
                     href="https://www.whitehouse.gov/"
                     rel="noreferrer"
@@ -395,6 +397,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    class="usa-link usa-link--external"
                     data-cy="freedom-of-information-act-(foia)"
                     href="https://www.whitehouse.gov/ceq/foia"
                     rel="noreferrer"
@@ -407,6 +410,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    class="usa-link usa-link--external"
                     data-cy="privacy-policy"
                     href="https://www.whitehouse.gov/privacy/"
                     rel="noreferrer"
@@ -434,7 +438,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link usa-link--external footer-link-first-child"
                     data-cy="find-a-contact-at-usa-gov"
                     href="https://www.usa.gov/"
                     rel="noreferrer"
@@ -491,6 +495,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         type="button"
       >
         Help improve the site & data
+        <img
+          alt="launch icon"
+          src="test-file-stub"
+        />
       </button>
     </div>
   </footer>

client/src/pages/__snapshots__/index.test.tsx.snap

@@ -319,8 +319,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   
     In 
                   <a
+                    class="usa-link usa-link--external"
+                    data-cy=""
                     href="https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/27/executive-order-on-tackling-the-climate-crisis-at-home-and-abroad/"
-                    target="blank"
+                    rel="noreferrer"
+                    target="_blank"
                   >
                     Executive Order 14008
                   </a>
@@ -395,8 +398,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
     Read more about the Justice40 Initiative in President Biden’s
     
                   <a
+                    class="usa-link usa-link--external"
+                    data-cy=""
                     href="https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/27/executive-order-on-tackling-the-climate-crisis-at-home-and-abroad/"
-                    target="blank"
+                    rel="noreferrer"
+                    target="_blank"
                   >
                     Executive Order 14008
                   </a>
@@ -587,7 +593,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="j40-aboutcard-sm-link"
                 >
                   <a
-                    class="j40-aboutcard-link"
+                    class="usa-link usa-link--external j40-aboutcard-link"
+                    data-cy=""
                     href="mailto:Screeningtool-Support@omb.eop.gov"
                     rel="noreferrer"
                     target="_blank"
@@ -642,7 +649,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="j40-aboutcard-sm-link"
                 >
                   <a
-                    class="j40-aboutcard-link"
+                    class="usa-link usa-link--external j40-aboutcard-link"
+                    data-cy=""
                     href="https://github.com/usds/justice40-tool"
                     rel="noreferrer"
                     target="_blank"
@@ -740,7 +748,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link usa-link--external footer-link-first-child"
                     data-cy="whitehouse-gov"
                     href="https://www.whitehouse.gov/"
                     rel="noreferrer"
@@ -753,6 +761,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    class="usa-link usa-link--external"
                     data-cy="freedom-of-information-act-(foia)"
                     href="https://www.whitehouse.gov/ceq/foia"
                     rel="noreferrer"
@@ -765,6 +774,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
+                    class="usa-link usa-link--external"
                     data-cy="privacy-policy"
                     href="https://www.whitehouse.gov/privacy/"
                     rel="noreferrer"
@@ -792,7 +802,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   class="usa-footer__secondary-link"
                 >
                   <a
-                    class="footer-link-first-child"
+                    class="usa-link usa-link--external footer-link-first-child"
                     data-cy="find-a-contact-at-usa-gov"
                     href="https://www.usa.gov/"
                     rel="noreferrer"
@@ -849,6 +859,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         type="button"
       >
         Help improve the site & data
+        <img
+          alt="launch icon"
+          src="test-file-stub"
+        />
       </button>
     </div>
   </footer>

client/src/pages/contact.tsx

@@ -4,6 +4,7 @@ import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
 
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
+import LinkTypeWrapper from '../components/LinkTypeWrapper';
 
 import * as CONTACT_COPY from '../data/copy/contact';
 interface IContactPageProps {
@@ -32,12 +33,12 @@ const ContactPage = ({location}: IContactPageProps) => {
                 defaultMessage={CONTACT_COPY.CONTACT_VIA_EMAIL.DEFAULT_MESSAGE}
                 values={{
                   general_email_address:
-                    <a
+                  <LinkTypeWrapper
-                      href={`mailto:${CONTACT_COPY.FEEDBACK_EMAIL}`}
+                    linkText= {CONTACT_COPY.FEEDBACK_EMAIL}
-                      target="_blank"
+                    internal= {false}
-                      rel="noreferrer">
+                    url= {`mailto:${CONTACT_COPY.FEEDBACK_EMAIL}`}
-                      {CONTACT_COPY.FEEDBACK_EMAIL}
+                    openUrlNewTab= {true}
-                    </a>,
+                  />,
                 }}/>
             </p>
           </Grid>