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
2025-02-23 01:54:18 -08:00 · 2022-01-26 16:12:33 -05:00 · 2022-01-26 16:12:33 -05:00 · e677df794d
commit e677df794d
parent 4c7d729cf7
26 changed files with 1867 additions and 968 deletions
--- a/client/src/components/AboutCard/snapshots/AboutCard.test.tsx.snap
+++ b/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
--- a/client/src/components/DatasetCard/datasetCard.module.scss
+++ b/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;
--- a/client/src/components/DatasetCard/datasetCard.module.scss.d.ts
+++ b/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;
    }
  }
--- a/client/src/components/DatasetCard/index.tsx
+++ b/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>
  );
--- a/client/src/components/DatasetCard/tests/snapshots/datasetCard.test.tsx.snap
+++ b/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>
--- a/client/src/components/DatasetContainer/tests/snapshots/datasetContainer.test.tsx.snap
+++ b/client/src/components/DatasetContainer/tests/snapshots/datasetContainer.test.tsx.snap
--- a/client/src/components/HowYouCanHelp/tests/snapshots/howYouCanHelp.test.tsx.snap
+++ b/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"
-          target="blank"
+          class="usa-link usa-link--external"
+          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>
--- a/client/src/components/J40Footer/J40Footer.spec.tsx
+++ b/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', () => {
--- a/client/src/components/J40Footer/J40Footer.tsx
+++ b/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 SurveyButton from './SurveyButton';
+import {hyphenizeString} from '../../../cypress/integration/common/helpers';
+import J40MainGridContainer from '../J40MainGridContainer';
+import LinkTypeWrapper from '../LinkTypeWrapper';
+import SurveyButton from '../SurveyButton';

 // @ts-ignore
-import whitehouseIcon from '../images/eop-seal.svg';
-import * as COMMON_COPY from '../data/copy/common';
+import whitehouseIcon from '../../images/eop-seal.svg';
+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)}
-        target={'_blank'}
-        rel={'noreferrer'}
-        data-cy={hyphenizeString(COMMON_COPY.FOOTER.WHITEHOUSE.defaultMessage)}>
-        {intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE)}
-      </a>,
-      <a
-        key="foialink"
-        href={'https://www.whitehouse.gov/ceq/foia'}
-        target={'_blank'}
-        rel={'noreferrer'}
-        data-cy={hyphenizeString(COMMON_COPY.FOOTER.FOIA.defaultMessage)}>
-        {intl.formatMessage(COMMON_COPY.FOOTER.FOIA)}
-      </a>,
-      <a
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.WHITEHOUSE.defaultMessage)}
+      />,
+      <LinkTypeWrapper
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.FOIA)}
+        internal={false}
+        url={'https://www.whitehouse.gov/ceq/foia'}
+        openUrlNewTab={true}
+        key={'foialink'}
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.FOIA.defaultMessage)}
+      />,
+      <LinkTypeWrapper
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY)}
+        internal={false}
+        url={intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY_LINK)}
+        openUrlNewTab={true}
        key={'privacylink'}
-        href={intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY_LINK)}
-        target={'_blank'}
-        rel={'noreferrer'}
-        data-cy={hyphenizeString(COMMON_COPY.FOOTER.PRIVACY.defaultMessage)}>
-        {intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY)}
-      </a>,
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.PRIVACY.defaultMessage)}
+      />,
    ],
    [
      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)}
-        target={'_blank'}
-        rel="noreferrer"
-        data-cy={hyphenizeString(COMMON_COPY.FOOTER.FIND_CONTACT.defaultMessage)}>
-        {intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT)}
-      </a>,
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.FIND_CONTACT.defaultMessage)}
+      />,
    ],
  ];

--- a/client/src/components/J40Footer/snapshots/J40Footer.spec.tsx.snap
+++ b/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>
--- a/client/src/components/J40Footer/index.tsx
+++ b/client/src/components/J40Footer/index.tsx
@ -0,0 +1,3 @@
+import J40Footer from './J40Footer';
+
+export default J40Footer;
--- a/client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx
+++ b/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;
--- a/client/src/components/LinkTypeWrapper/snapshots/linkTypeWrapper.test.tsx.snap
+++ b/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"
--- a/client/src/components/LinkTypeWrapper/index.tsx
+++ b/client/src/components/LinkTypeWrapper/index.tsx
@ -1,50 +1,3 @@
-import React from 'react';
-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>;
-  }
-};
+import LinkTypeWrapper from './LinkTypeWrapper';

 export default LinkTypeWrapper;
--- a/client/src/components/MapWrapper/index.tsx
+++ b/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>
    </>
--- a/client/src/components/SurveyButton/SurveyButton.module.scss
+++ b/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');
+    }
  }
 }
--- a/client/src/components/SurveyButton/SurveyButton.module.scss.d.ts
+++ b/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;
    }
  }

--- a/client/src/components/SurveyButton/SurveyButton.tsx
+++ b/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>
  );
--- a/client/src/components/SurveyButton/snapshots/SurveyButton.test.tsx.snap
+++ b/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>
--- a/client/src/data/copy/about.tsx
+++ b/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:
-      <a href={EXEC_ORDER_LINK} target={'blank'}>
-        Executive Order 14008
-      </a>,
+      eoLink: <LinkTypeWrapper
+        linkText={'Executive Order 14008'}
+        internal={false}
+        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:
-      <a href={EXEC_ORDER_LINK} target={'blank'}>
-        Executive Order 14008
-      </a>,
+      eoLink: <LinkTypeWrapper
+        linkText={'Executive Order 14008'}
+        internal={false}
+        url={EXEC_ORDER_LINK}
+        openUrlNewTab={true}
+      />,
      tacklingItalics: <i>Tackling the Climate Crisis at Home and Abroad</i>,
    }}
  />,
--- a/client/src/data/copy/explore.tsx
+++ b/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 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, area median 
+      The Decennial Census data from 2010 was used 
+      for American Samoa and Northern Mariana Islands using only the unemployment, poverty, low 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 
-      CEJST accordingly for Guam and the U.S. Virgin Islands.
+      category of the methodology.
    `}
    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'}>
-          {'share your feedback'}
-        </a>,
+        <LinkTypeWrapper
+          linkText= {'share feedback'}
+          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'}>
-          {'federalregister.gov'}
-        </a>,
+      <LinkTypeWrapper
+        linkText={'federalregister.gov'}
+        internal={false}
+        url={`https://www.federalregister.gov/`}
+        openUrlNewTab={true}
+      />,
    }}
  />,

--- a/client/src/data/copy/methodology.tsx
+++ b/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,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    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 
-        the agriculture value at risk in a census tract by the total agriculture value in that census 
-        tract. Fourteen natural hazards that have some link to climate change include: avalanche, 
-        coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, 
-        riverine flooding, strong wind, tornado, wildfire, and winter weather.
+        Percent of agriculture value at risk from losses due to natural hazards such as the fourteen 
+        natural hazards that have some link to climate change including: avalanche, coastal flooding, 
+        cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine flooding, strong 
+        wind, tornado, wildfire, and winter weather. Calculated by dividing the agriculture value at risk in 
+        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 
-        building value at risk in a census tract by the total building value in that census tract. 
-        Fourteen natural hazards that have some link to climate change include: avalanche, 
-        coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, 
-        riverine flooding, strong wind, tornado, wildfire, and winter weather.
-        `}
+        Percent of building value at risk from losses due to natural hazards such as the fourteen 
+        natural hazards that have some link to climate change including: avalanche, coastal flooding, 
+        cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine flooding, strong 
+        wind, tornado, wildfire, and winter weather. Calculated by dividing the building value at risk in 
+        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. 
-        Fourteen natural hazards that have some link to climate change include: avalanche, coastal 
-        flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, riverine 
-        flooding, strong wind, tornado, wildfire, and winter weather.
-        Population loss is defined as the Spatial Hazard Events and Losses or National Centers 
-        for Environmental Information’s (NCEI) reported number of fatalities and injuries caused by the 
-        hazard occurrence. To combine fatalities and injuries for the computation of population loss value, 
-        an injury is counted as one-tenth (1/10) of a fatality. The NCEI Storm Events Database 
-        classifies injuries and fatalities as direct or indirect. Both direct and indirect injuries 
-        and fatalities are counted as population loss. This total number of injuries and fatalities 
-        is then divided by the population in the census tract to get a per-capita rate of population risk.   
+        Rate relative to the population in fatalities and injuries due to natural hazards each year such as 
+        the fourteen natural hazards that have some link to climate change including: avalanche, 
+        coastal flooding, cold wave, drought, hail, heat wave, hurricane, ice storm, landslide, 
+        riverine flooding, strong wind, tornado, wildfire, and winter weather. Population loss is defined 
+        as the Spatial Hazard Events and Losses or National Centers for Environmental Information’s 
+        (NCEI) reported number of fatalities and injuries caused by the hazard occurrence. To 
+        combine fatalities and injuries for the computation of population loss value, an injury is counted 
+        as one-tenth (1/10) of a fatality. The NCEI Storm Events Database classifies injuries and fatalities 
+        as direct or indirect. Both direct and indirect injuries and fatalities are counted as population 
+        loss. This total number of injuries and fatalities is then divided by the population in the 
+        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,
-    dateRange: DATE_RANGE.FOURTEEN,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
+    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,
-    dateRange: DATE_RANGE.SEVENTEEN,
+    responsibleParty: RESPONSIBLE_PARTIES.DOT,
+    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 
-        Family Income by county and are paying greater than 30% of their income to housing costs.    
+        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.
      `}
      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,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    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,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    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,
-    dateRange: DATE_RANGE.TWENTY,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
+    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,
-    dateRange: DATE_RANGE.TWENTY,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
+    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,
-    dateRange: DATE_RANGE.TWENTY,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
+    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,
-    dateRange: DATE_RANGE.TWENTY,
+    responsibleParty: RESPONSIBLE_PARTIES.EPA,
+    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,
-    dateRange: DATE_RANGE.SIXTEEN_PLUS_3,
+    responsibleParty: RESPONSIBLE_PARTIES.CDC,
+    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,
-    dateRange: DATE_RANGE.SIXTEEN_PLUS_3,
+    responsibleParty: RESPONSIBLE_PARTIES.CDC,
+    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,
-    dateRange: DATE_RANGE.SIXTEEN_PLUS_3,
+    responsibleParty: RESPONSIBLE_PARTIES.CDC,
+    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. 
-          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 
-          0th percentile, and the tract with the lowest median income relative to area median income 
+          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
+          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
          (highest burden on this measure) is at the 100th percentile.
        `}</p>,
      }}
    />,
    usedIn: CATEGORIES.HEALTH_BURDENS.METHODOLOGY,
-    responsibleParty: RESPONSIBLE_PARTIES.CDC_SLEEP,
-    dateRange: DATE_RANGE.TEN_PLUS_5,
+    responsibleParty: RESPONSIBLE_PARTIES.CDC,
+    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,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    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,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    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,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    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,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    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,
-    dateRange: DATE_RANGE.FIFETEEN_PLUS_4,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
+    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,
  },
 ];
--- a/client/src/pages/snapshots/contact.test.tsx.snap
+++ b/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>
--- a/client/src/pages/snapshots/index.test.tsx.snap
+++ b/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>
--- a/client/src/pages/snapshots/methodology.test.tsx.snap
+++ b/client/src/pages/snapshots/methodology.test.tsx.snap
--- a/client/src/pages/contact.tsx
+++ b/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
-                      href={`mailto:${CONTACT_COPY.FEEDBACK_EMAIL}`}
-                      target="_blank"
-                      rel="noreferrer">
-                      {CONTACT_COPY.FEEDBACK_EMAIL}
-                    </a>,
+                  <LinkTypeWrapper
+                    linkText= {CONTACT_COPY.FEEDBACK_EMAIL}
+                    internal= {false}
+                    url= {`mailto:${CONTACT_COPY.FEEDBACK_EMAIL}`}
+                    openUrlNewTab= {true}
+                  />,
                }}/>
            </p>
          </Grid>