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
This commit is contained in:
Vim 2023-02-09 11:32:59 -08:00 committed by GitHub
commit 160cac1002
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 130 additions and 123 deletions

View file

@ -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>

View file

@ -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>

View file

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

View file

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

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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,

View file

@ -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"

View file

@ -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'}>

View file

@ -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}>

View file

@ -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'}>

View file

@ -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'}>

View file

@ -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'}>

View file

@ -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'}>

View file

@ -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'}>

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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;