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/J40Footer.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-import {
-  Address,
-  Logo,
-} from '@trussworks/react-uswds';
-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';
-
-// @ts-ignore
-import whitehouseIcon from '../images/eop-seal.svg';
-import * as COMMON_COPY from '../data/copy/common';
-
-const J40Footer = () => {
-  const intl = useIntl();
-
-  const NAVLINKS = [
-    [
-      intl.formatMessage(COMMON_COPY.FOOTER.CONTACT),
-      <Address
-        className={'j40-footer-address'}
-        key={'footeraddress'}
-        size={'big'}
-        items={[
-          COMMON_COPY.FOOTER_CEQ_ADDRESS.NAME,
-          COMMON_COPY.FOOTER_CEQ_ADDRESS.STREET,
-          COMMON_COPY.FOOTER_CEQ_ADDRESS.CITY_STATE,
-          COMMON_COPY.FOOTER_CEQ_ADDRESS.PHONE,
-        ]}
-      />,
-    ],
-    [
-      intl.formatMessage(COMMON_COPY.FOOTER.MORE_INFO),
-      <a
-        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
-        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>,
-    ],
-    [
-      intl.formatMessage(COMMON_COPY.FOOTER.QUESTIONS),
-      <a
-        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>,
-    ],
-  ];
-
-  // see https://designsystem.digital.gov/components/footer/
-  return (
-    // we cannot use trussworks Footer because it doesn't layout correct
-    // and there's no easy way to override. It comes down to the
-    // `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
-    // `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
-    <footer className={'j40-footer'}>
-      <div className="usa-footer__primary-section pb2" data-cy={`footer-primary-block`}>
-        <J40MainGridContainer>
-          <div className={'grid-row tablet-lg:grid-col4'}>
-            {NAVLINKS.map((links, i) => (
-              <div
-                key={`linkSection-${i}`}
-                className="mobile-lg:grid-col-12 desktop:grid-col-4">
-                <NavSection links={links} />
-              </div>
-            ))}
-          </div>
-        </J40MainGridContainer>
-      </div>
-
-      <div className="usa-footer__secondary-section">
-        <J40MainGridContainer>
-          <Logo
-            size="medium"
-            key={'logoimg'}
-            image={
-              <img
-                className={'usa-footer__logo-img'}
-                src={whitehouseIcon}
-                alt={intl.formatMessage(COMMON_COPY.FOOTER.LOGO_ALT)}/>
-            }
-            heading={
-              <div className={'j40-footer-ceq-font'}>
-                {intl.formatMessage(COMMON_COPY.FOOTER.TITLE)}
-              </div>
-            }
-          />
-        </J40MainGridContainer>
-      </div>
-      <SurveyButton />
-    </footer>
-  );
-};
-
-const NavSection = ({
-  links,
-}: {
-  links: React.ReactNode[]
-}): React.ReactElement => {
-  const [primaryLinkOrHeading, ...secondaryLinks] = links;
-  return (
-    <section>
-      <div className="j40-h4">{primaryLinkOrHeading}</div>
-      <NavList type="footerSecondary" items={secondaryLinks} />
-    </section>
-  );
-};
-
-export default J40Footer;