j40-cejst-2/client/src/pages/index.tsx
Vim db6b5de24e
Release of improve census tract display info (#1480)
* will replace mapbox logo (#1477)

* Replace maplibre logo with mapbox
* change the logo go to mapbox
* Add CodeQL and modify mapbox logo via useRef()

* Make side panel formula more apparent (#1481)

* Add ExceedBurden and CategorySpacer

- create ExceedBurden component that is used twice
- create a .categorySpacer class for the AND component
- modify indicator styling to work with background higlighting
- add BE stubs for Burden booleans
- remove Indicators header
- add copy to intl

* Add comments on disadv. indicator

- darken bg color
- add a border
- bold the text

* Adds indicator arrow and sub text to sidepanel

- add threshold to IndicatorInfo
- update SASS for indicatorValueCol
- update tests
- add constants to intl

* Make disadv indicators bold

- add 1px margin between indicators

* Add BE signals for new sidepanel

- tested with staging backend

* Add staging hash to URL

* Fix poverty backend signal

- refactor backend signals in constants file

* Make exceed burden value bold

* Refactor indicator values

- remove arrows and subtext when value is N/A
- Show -- when value is N/A
- intl alt tags in indicator
- fix alignment of arrows
- update snapshots

* Revert settings.json file

* revert settings file again

* Refactor what is displayed when data unavailable

- add an unavailable icon
- add data is not available subtext
- modify low income threshold
- update snapshots
- factor out rendered logic to JSX functions
- update image alt tags and intl

* Refactor Indicator component to unit test

- Add unit test for Indicator value icon
- Add unit test for Indicator value sub-text
- update snapshots

* Add de-coupled BE signals

* Rebase hotfix

* Fix indicator value 0 shows N/A icon

- remove coercion of 0 as null
- make components check null / failure case first and default all else
- update unit test to account for this use case
- update snapshots

* Add null check for percentage suffix

- update unit tests
- update snapshots

* remove cypress zoom test

- intermittent failure continue

* revert cypress to 8.3.0

* Revert cypress-cucumber

* Add Chrome to frontend deploy action

* Update logo css classname after update to maplibre (#1482)

* Add new wording to the map panel that appears upon load when no tract is selected and Outstanding CEQ changes to sidepanel (#1483)

* Add new side panel unselected tract

- add new icons
- refactor old component
- follow component folder pattern
- update snapshot tests
- add to intl

* Add bold to text, add spacing and correct typos

* Add tabindex to sidepanel content to pass a11y

* Refactor i18n anti-patterns on explore tool page

- add i18n patterns for nesting
- add i18n pattern for partial strings
- add i18n rich-text functions
- add i18n pattern for minimal context
- add i18n pattern for dates
- add i18n pattern for numbers
- add i18n pattern for centralizing rich text functions
- add i18n patter for description
- add i18n pattern for ids
- see shared drive file J40 Localization Patterns for status on refactor

* Remove links of expired public engagement sessions

- allow cypress tests to pass

* Update snapshots for public enagement page

* Copy updates to non-selected side panel

- update snapshots

* Updates to side panel copy

- ag loss and building loss text
- clean transit
- NPL RMP sites
- proportion to percent
- update snapshots
- updates to es.json

* Updates from QA

- make title smaller
- make margins above icons smaller
- add bottom margin on container
- add census before tracts in copy
- update snapshots

* Update snapshot after rebase

* disable max-len on description fields on i18n copy (#1487)

* Remove color key from Explore the tool page (#1484)

* Remove color key

* Add comment to Language component

* Move tribal note copy to meth page

- adjust responsive sizing props on Grid to allow for proper mobile viewing on Explore page

* Add responsive size to text under map

- reduce z-index of territory focus control so that it doesn't go over the survey button on mobile

* Rewrite the two "notes about" the "low" datasets (#1489)

* Refactor all copy to adhere to recommended patterns

- remove LowIncome component
- add intl README
- update snapshots

* Fix key error missing in datasetCard

- update type in IIndicators
- update snapshots

* Add two notes on low dataset cards

- refactor DatasetCard to standard component pattern
- add a note to the interface
- update snapshots

* Add function comment to force re-build

* Update missing sass module file name

* Update sidepanel non-selected copy (#1495)

* Update sidepanel non-selected copy

- update snapshots

* Update URL in deploy FE for cypress test

* removing trailing slash

* Add wording to UI that calls out improvements to display of census tract information (#1492)

* Adds census tract alert on all pages

- add i18n text
- updates snapshots
- makes public engagement page a fast link

* Style the Alert to have more space around it

* Update copy on Alert

- update snapshots

* Swap gerkhin order

* Set Alert to expire on Apr 15th 2022

* Add WHEJAC meetings (#1501)

* Add WHEJAC meetings

- add expired icons
- automatically load expired icons when event has passed
- update snapshots

* Update public engagement button

* Remove public eng gherkin tests

- need to troubleshoot why these are failing

* Remove the before CEQ in copy

* Make the count of thresholds exceeded on the side panel more clear (#1503)

* Update category / thrsh count in side panel

- connect BE signal of CC to side panel
- i18n functions to call from AreaDetail component
- update snapshots
-

* Update send feedback - color and icon

- update snapshots

* Update both exceed statements in sidepanel

- update snapshots

* Update copy for higher ed and high school (#1502)

* Update copy for higher ed and high school

- update dataset cards
- update taskforce card AND
- update side panel indicator titles
- add i18n for dataset cards title
- update snapshots

* Update threshold values for Higher ed and HS.

- update snapshots

* Update AND clause

- missing 'of' in copy
- update BE signal for non-higher ed enrollment signal
2022-03-29 19:49:57 -07:00

147 lines
4.9 KiB
TypeScript

import * as React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import AboutCard from '../components/AboutCard/AboutCard';
import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
import PublicEngageButton from '../components/PublicEngageButton';
import * as ABOUT_COPY from '../data/copy/about';
import * as COMMON_COPY from '../data/copy/common';
// @ts-ignore
import aboutUSMapImg from '../images/about-usmap-1.svg';
// @ts-ignore
import aboutJ40Img from '../images/about-j40-1.svg';
import accountBalanceIcon // @ts-ignore
from '/node_modules/uswds/dist/img/usa-icons/account_balance.svg';
import groupsIcon from // @ts-ignore
'/node_modules/uswds/dist/img/usa-icons/groups.svg';
import commentIcon from // @ts-ignore
'/node_modules/uswds/dist/img/usa-icons/comment.svg';
import githubIcon from // @ts-ignore
'/node_modules/uswds/dist/img/usa-icons/github.svg';
interface IndexPageProps {
location: Location;
}
// markup
const IndexPage = ({location}: IndexPageProps) => {
const intl = useIntl();
return (
<Layout location={location} title={intl.formatMessage(ABOUT_COPY.PAGE.TILE)}>
<J40MainGridContainer>
<section className={'page-heading'}>
<h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1>
<PublicEngageButton />
</section>
<AboutCardsContainer>
<AboutCard
size={'large'}
imgSrc={aboutUSMapImg}
header={intl.formatMessage(ABOUT_COPY.PAGE.HEADING_1)}>
<>
<p>
{ABOUT_COPY.HEADING_1.DESCRIPTION_1}
</p>
<p>
{intl.formatMessage(ABOUT_COPY.PAGE.HEADING1_DESCRIPTION2)}
</p>
</>
</AboutCard>
</AboutCardsContainer>
<AboutCardsContainer>
<AboutCard
size={'large'}
imgSrc={aboutJ40Img}
header={intl.formatMessage(ABOUT_COPY.PAGE.HEADING_2)}>
<>
<p>
{intl.formatMessage(ABOUT_COPY.PAGE.HEADING2_DESCRIPTION1)}
</p>
<p>
{ABOUT_COPY.HEADING_2.DESCRIPTION_2}
</p>
</>
</AboutCard>
</AboutCardsContainer>
</J40MainGridContainer>
<J40MainGridContainer
fullWidth={true}
blueBackground={true}>
<J40MainGridContainer>
<h2>
{intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.TITLE)}
</h2>
<AboutCardsContainer>
<AboutCard
size={'small'}
imgSrc={accountBalanceIcon}
header={intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.FEDERAL_PM_HEADING)}
linkText={intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.FEDERAL_PM_LINK_TEXT)}
url={'/methodology'}
internal={true}>
<p>
{intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.FEDERAL_PM_INFO)}
</p>
</AboutCard>
<AboutCard
size={'small'}
imgSrc={groupsIcon}
header={intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.COMMUNITY_MEMBERS_HEADING)}
linkText={intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.COMMUNITY_MEMBERS_LINK_TEXT)}
url={'/cejst'}
internal={true}>
<p>
{intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.COMMUNITY_MEMBERS_INFO)}
</p>
</AboutCard>
</AboutCardsContainer>
</J40MainGridContainer>
</J40MainGridContainer>
<J40MainGridContainer>
<h2>{intl.formatMessage(ABOUT_COPY.GET_INVOLVED.TITLE)}</h2>
<AboutCardsContainer>
<AboutCard
size={'small'}
imgSrc={commentIcon}
header={intl.formatMessage(ABOUT_COPY.GET_INVOLVED.SEND_FEEDBACK_HEADING)}
linkText={`Email: ${COMMON_COPY.FEEDBACK_EMAIL}`}
url={`mailto:${COMMON_COPY.FEEDBACK_EMAIL}`}
openUrlNewTab={true}
internal={false}>
<p>
{intl.formatMessage(ABOUT_COPY.GET_INVOLVED.SEND_FEEDBACK_INFO)}
</p>
</AboutCard>
<AboutCard
size={'small'}
imgSrc={githubIcon}
header={intl.formatMessage(ABOUT_COPY.GET_INVOLVED.JOIN_OSC_HEADING)}
linkText={intl.formatMessage(ABOUT_COPY.GET_INVOLVED.JOIN_OSC_LINK_TEXT)}
url={ABOUT_COPY.GITHUB_LINK}
openUrlNewTab={true}
internal={false}>
<p>
{intl.formatMessage(ABOUT_COPY.GET_INVOLVED.JOIN_OSC_INFO)}
</p>
</AboutCard>
</AboutCardsContainer>
</J40MainGridContainer>
</Layout>);
};
export default IndexPage;