Replace mail with launch icon, replace public eng btn with data source btn, copy update on Census, add census disclaimer text (#2161)

* update UI
- closes #2159

* replace pub eng btn with data source btn
- closes #2158

* update to US Census
- closes #2157

* add census disclaimer
- closes #2156

client/src/components/AreaDetail/AreaDetail.tsx

@@ -20,7 +20,7 @@ import * as constants from '../../data/constants';
 import * as EXPLORE_COPY from '../../data/copy/explore';
 
 // @ts-ignore
-import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail_outline.svg';
+import launchIcon from '/node_modules/uswds/dist/img/usa-icons/launch.svg';
 
 interface IAreaDetailProps {
   properties: constants.J40Properties,
@@ -886,7 +886,7 @@ const AreaDetail = ({properties}: IAreaDetailProps) => {
             </div>
             <img
               className={styles.buttonImage}
-              src={mailIcon}
+              src={launchIcon}
               alt={intl.formatMessage(EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.IMG_ICON.ALT_TAG)}
             />
           </div>

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

@@ -45,7 +45,7 @@ exports[`rendering of indicator dataset card checks if component renders 1`] = `
         <span>
           Responsible party: 
         </span>
-        Census
+        U.S. Census
       </li>
       <li>
         <span>

client/src/components/DatasetContainer/dsContainer.module.scss

@@ -11,4 +11,8 @@
   display: flex;
   justify-content: flex-end;
   @include u-margin-bottom(4);
+}
+
+.alignItemsCenter {
+  align-items: center;
 }

client/src/components/DatasetContainer/dsContainer.module.scss.d.ts

@@ -2,6 +2,7 @@ declare namespace DatasetContainerScssNamespace {
     export interface IDatasetContainerScss {
       datasetCardsContainer: string;
       returnToTop: string;
+      alignItemsCenter: string;
     }
   }
 

client/src/components/DatasetContainer/index.tsx

@@ -27,14 +27,15 @@ const DatasetContainer = () => {
             </Grid>
           </Grid>
 
-          <Grid row gap>
+          <Grid row gap className={styles.alignItemsCenter}>
             <Grid desktop={{col: 7}}>
               <p>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.INFO)}</p>
+              <p>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.CENSUS_DISCLAIMER)}</p>
             </Grid>
             <Grid desktop={{col: 1}}>
             </Grid>
             <Grid desktop={{col: 4}}>
-              <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'} />
+              <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'}/>
             </Grid>
           </Grid>
 

client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap

@@ -35,6 +35,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             
       The tool's datasets are public and consistent nationwide. They come from different sources and are high quality. The Council on Environmental Quality (CEQ) chose them based on relevance,  availability, and quality. They identify climate, environmental, and other burdens on communities.
     
+          </p>
+          <p>
+            
+      This product uses the Census Bureau Data API but is not endorsed or certified by the Census Bureau.
+    
           </p>
         </div>
         <div
@@ -116,7 +121,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   <span>
                     Responsible party: 
                   </span>
-                  Census
+                  U.S. Census
                 </li>
                 <li>
                   <span>

client/src/components/DatasetsButton/DatasetsButton.module.scss

@@ -1,7 +1,6 @@
 @use '../../styles/design-system.scss' as *;
 
 .datasetsButtonContainer{
-      @include u-margin-top(3);
 
       @include u-height(6);
       z-index: 2;

client/src/data/copy/methodology.tsx

@@ -403,6 +403,13 @@ export const DATASETS = defineMessages({
     `,
     description: 'Navigate to the Methodology page. This is the description of the dataset section',
   },
+  CENSUS_DISCLAIMER: {
+    id: 'methodology.page.datasetContainer.census.disclaimer',
+    defaultMessage: `
+      This product uses the Census Bureau Data API but is not endorsed or certified by the Census Bureau.
+    `,
+    description: 'Navigate to the Methodology page. This is the disclaimer when using census data',
+  },
   ADDITIONAL_HEADING: {
     id: 'methodology.page.datasetContainer.additional.heading',
     defaultMessage: 'Additional Indicators',
@@ -857,7 +864,7 @@ export const INDICATORS = [
       }}
     />,
     usedIn: CATEGORIES.ALL,
-    responsibleParty: RESPONSIBLE_PARTIES.CEN,
+    responsibleParty: RESPONSIBLE_PARTIES.CENSUS,
     sources: [
       {
         source: SOURCE_LINKS.CENSUS_ACS_15_19,

client/src/intl/en.json

@@ -2395,6 +2395,10 @@
     "defaultMessage": "Share data sources with CEQ",
     "description": "Navigate to the Methodology page. This is the section heading of which datasets are used in cumulative score with a button labeled: Share data sources with CEQ"
   },
+  "methodology.page.datasetContainer.census.disclaimer": {
+    "defaultMessage": "This product uses the Census Bureau Data API but is not endorsed or certified by the Census Bureau.",
+    "description": "Navigate to the Methodology page. This is the disclaimer when using census data"
+  },
   "methodology.page.datasetContainer.heading": {
     "defaultMessage": "Datasets used in beta methodology",
     "description": "Navigate to the Methodology page. This is the section heading of which datasets are used in cumulative score"

client/src/pages/about.tsx

@@ -8,7 +8,7 @@ import {Grid} from '@trussworks/react-uswds';
 import HowYouCanHelp from '../components/HowYouCanHelp';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
-import PublicEngageButton from '../components/PublicEngageButton';
+import DatasetsButton from '../components/DatasetsButton';
 import SubPageNav from '../components/SubPageNav';
 
 import * as ABOUT_COPY from '../data/copy/about';
@@ -43,7 +43,7 @@ const AboutPage = ({location}: IAboutPageProps) => {
 
         <section className={'page-heading'}>
           <h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.TITLE)}</h1>
-          <PublicEngageButton />
+          <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'} />
         </section>
 
         <Grid row gap className={'j40-mb5-mt3'}>

client/src/pages/contact.tsx

@@ -5,7 +5,7 @@ import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 import LinkTypeWrapper from '../components/LinkTypeWrapper';
-import PublicEngageButton from '../components/PublicEngageButton';
+import DatasetsButton from '../components/DatasetsButton';
 
 import * as CONTACT_COPY from '../data/copy/contact';
 import {FEEDBACK_EMAIL} from '../data/copy/common';
@@ -24,7 +24,7 @@ const ContactPage = ({location}: IContactPageProps) => {
 
         <section className={'page-heading'}>
           <h1>{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
-          <PublicEngageButton />
+          <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'} />
         </section>
 
         <Grid row gap={6}>

client/src/pages/downloads.tsx

@@ -5,7 +5,7 @@ import {useWindowSize} from 'react-use';
 
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
-import PublicEngageButton from '../components/PublicEngageButton';
+import DatasetsButton from '../components/DatasetsButton';
 import ReleaseUpdate from '../components/ReleaseUpdate';
 import SubPageNav from '../components/SubPageNav';
 
@@ -26,7 +26,7 @@ const DownloadsPage = ({location}: IDownloadsPageProps) => {
 
         <section className={'page-heading'}>
           <h1>{intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_HEADING1)}</h1>
-          <PublicEngageButton />
+          <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'} />
         </section>
 
         <Grid row gap className={'j40-mb5-mt3'}>

client/src/pages/frequently-asked-questions.tsx

@@ -6,7 +6,7 @@ import {useWindowSize} from 'react-use';
 
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
-import PublicEngageButton from '../components/PublicEngageButton';
+import DatasetsButton from '../components/DatasetsButton';
 import SubPageNav from '../components/SubPageNav';
 
 import {USWDS_BREAKPOINTS} from '../data/constants';
@@ -237,7 +237,7 @@ const FAQPage = ({location}: IFAQPageProps) => {
 
         <section className={'page-heading'}>
           <h1>{intl.formatMessage(FAQS_COPY.PAGE_INTRO.PAGE_TILE)}</h1>
-          <PublicEngageButton />
+          <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'} />
         </section>
 
         <Grid row gap className={'j40-mb5-mt3'}>

client/src/pages/index.tsx

@@ -6,7 +6,7 @@ import ExploreDataBox from '../components/ExploreDataBox';
 import J40Map from '../components/J40Map';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
-import PublicEngageButton from '../components/PublicEngageButton';
+import DatasetsButton from '../components/DatasetsButton';
 
 import * as EXPLORE_COPY from '../data/copy/explore';
 
@@ -26,7 +26,7 @@ const ExporeToolPage = ({location}: IMapPageProps) => {
 
       <section className={'page-heading'}>
         <h1>{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
-        <PublicEngageButton />
+        <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'} />
       </section>
 
       <Grid row gap className={'j40-mb5-mt3'}>

client/src/pages/methodology.tsx

@@ -8,7 +8,7 @@ import DatasetContainer from '../components/DatasetContainer';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 import SubPageNav from '../components/SubPageNav';
-import PublicEngageButton from '../components/PublicEngageButton';
+import DatasetsButton from '../components/DatasetsButton';
 
 import {USWDS_BREAKPOINTS} from '../data/constants';
 import * as METHODOLOGY_COPY from '../data/copy/methodology';
@@ -29,7 +29,7 @@ const IndexPage = ({location}: MethodPageProps) => {
 
         <section className={'page-heading'}>
           <h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
-          <PublicEngageButton />
+          <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'} />
         </section>
 
         <Grid row gap className={'j40-mt3'}>

client/src/pages/previous-versions.tsx

@@ -6,7 +6,7 @@ import {Card, CardBody, CardFooter, CardHeader, Grid} from '@trussworks/react-us
 import DownloadButton from '../components/DownloadButton';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
-import PublicEngageButton from '../components/PublicEngageButton';
+import DatasetsButton from '../components/DatasetsButton';
 import SubPageNav from '../components/SubPageNav';
 
 import * as PREV_VER_COPY from '../data/copy/previousVer';
@@ -33,7 +33,7 @@ const PreviousVersions = ({location}: IPreviousVersionsProps) => {
 
         <section className={'page-heading'}>
           <h1 data-cy={'about-page-heading'}>{intl.formatMessage(PREV_VER_COPY.PAGE.TITLE)}</h1>
-          <PublicEngageButton />
+          <DatasetsButton href= {'https://www.surveymonkey.com/r/6G9TQJ8'} />
         </section>
 
         <Grid row gap className={'j40-mb5-mt3'}>

client/src/pages/tests/__snapshots__/about.test.tsx.snap

@@ -392,27 +392,23 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         >
           About
         </h1>
-        <div>
+        <a
-          <a
+          href="https://www.surveymonkey.com/r/6G9TQJ8"
-            href="/en/public-engagement"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <button
+            class="usa-button"
+            data-testid="button"
+            type="button"
           >
-            <button
+            Share data sources with CEQ
-              class="usa-button"
+            <img
-              data-testid="button"
+              alt="launch icon"
-              type="button"
+              src="test-file-stub"
-            >
+            />
-              <div>
+          </button>
-                <img
+        </a>
-                  alt="an icon that represents a calendar"
-                  src="test-file-stub"
-                />
-                <div>
-                  Public engagement
-                </div>
-              </div>
-            </button>
-          </a>
-        </div>
       </section>
       <div
         class="grid-row grid-gap j40-mb5-mt3"

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

@@ -390,27 +390,23 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         <h1>
           Contact
         </h1>
-        <div>
+        <a
-          <a
+          href="https://www.surveymonkey.com/r/6G9TQJ8"
-            href="/en/public-engagement"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <button
+            class="usa-button"
+            data-testid="button"
+            type="button"
           >
-            <button
+            Share data sources with CEQ
-              class="usa-button"
+            <img
-              data-testid="button"
+              alt="launch icon"
-              type="button"
+              src="test-file-stub"
-            >
+            />
-              <div>
+          </button>
-                <img
+        </a>
-                  alt="an icon that represents a calendar"
-                  src="test-file-stub"
-                />
-                <div>
-                  Public engagement
-                </div>
-              </div>
-            </button>
-          </a>
-        </div>
       </section>
       <div
         class="grid-row grid-gap-6"

client/src/pages/tests/__snapshots__/downloads.test.tsx.snap

@@ -390,27 +390,23 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         <h1>
           Downloads
         </h1>
-        <div>
+        <a
-          <a
+          href="https://www.surveymonkey.com/r/6G9TQJ8"
-            href="/en/public-engagement"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <button
+            class="usa-button"
+            data-testid="button"
+            type="button"
           >
-            <button
+            Share data sources with CEQ
-              class="usa-button"
+            <img
-              data-testid="button"
+              alt="launch icon"
-              type="button"
+              src="test-file-stub"
-            >
+            />
-              <div>
+          </button>
-                <img
+        </a>
-                  alt="an icon that represents a calendar"
-                  src="test-file-stub"
-                />
-                <div>
-                  Public engagement
-                </div>
-              </div>
-            </button>
-          </a>
-        </div>
       </section>
       <div
         class="grid-row grid-gap j40-mb5-mt3"

client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap

@@ -390,27 +390,23 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         <h1>
           Frequently asked questions
         </h1>
-        <div>
+        <a
-          <a
+          href="https://www.surveymonkey.com/r/6G9TQJ8"
-            href="/en/public-engagement"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <button
+            class="usa-button"
+            data-testid="button"
+            type="button"
           >
-            <button
+            Share data sources with CEQ
-              class="usa-button"
+            <img
-              data-testid="button"
+              alt="launch icon"
-              type="button"
+              src="test-file-stub"
-            >
+            />
-              <div>
+          </button>
-                <img
+        </a>
-                  alt="an icon that represents a calendar"
-                  src="test-file-stub"
-                />
-                <div>
-                  Public engagement
-                </div>
-              </div>
-            </button>
-          </a>
-        </div>
       </section>
       <div
         class="grid-row grid-gap j40-mb5-mt3"

client/src/pages/tests/__snapshots__/methodology.test.tsx.snap

@@ -390,27 +390,23 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         <h1>
           Methodology
         </h1>
-        <div>
+        <a
-          <a
+          href="https://www.surveymonkey.com/r/6G9TQJ8"
-            href="/en/public-engagement"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <button
+            class="usa-button"
+            data-testid="button"
+            type="button"
           >
-            <button
+            Share data sources with CEQ
-              class="usa-button"
+            <img
-              data-testid="button"
+              alt="launch icon"
-              type="button"
+              src="test-file-stub"
-            >
+            />
-              <div>
+          </button>
-                <img
+        </a>
-                  alt="an icon that represents a calendar"
-                  src="test-file-stub"
-                />
-                <div>
-                  Public engagement
-                </div>
-              </div>
-            </button>
-          </a>
-        </div>
       </section>
       <div
         class="grid-row grid-gap j40-mt3"
@@ -1048,6 +1044,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
               
       The tool's datasets are public and consistent nationwide. They come from different sources and are high quality. The Council on Environmental Quality (CEQ) chose them based on relevance,  availability, and quality. They identify climate, environmental, and other burdens on communities.
     
+            </p>
+            <p>
+              
+      This product uses the Census Bureau Data API but is not endorsed or certified by the Census Bureau.
+    
             </p>
           </div>
           <div
@@ -1129,7 +1130,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                     <span>
                       Responsible party: 
                     </span>
-                    Census
+                    U.S. Census
                   </li>
                   <li>
                     <span>

client/src/styles/global.scss

@@ -166,6 +166,7 @@ li.usa-nav__primary-item a:hover::after{
   .page-heading {
     display: flex;
     justify-content: space-between;
+    align-items: flex-end;
 
     @include at-media-max("tablet"){
       flex-direction: column;