mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-07 02:04:18 -07:00
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
This commit is contained in:
Vim
GitHub
parent
dc981919f1
commit
db6b5de24e
91 changed files with 5339 additions and 3220 deletions
|
|
@ -0,0 +1,21 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
|
||||
.sidePanelInfoContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include u-padding-right(4);
|
||||
@include u-padding-left(4);
|
||||
@include u-padding-bottom(4);
|
||||
|
||||
.sidePanelInfoHeading {
|
||||
@include u-padding-top(2);
|
||||
font-size: x-large;
|
||||
line-height: 1.9rem;
|
||||
}
|
||||
|
||||
.sidePanelInfoIcon {
|
||||
@include u-height(5);
|
||||
@include u-margin-top(4);
|
||||
@include u-margin-bottom(-2)
|
||||
}
|
||||
}
|
||||
14
client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts
vendored
Normal file
14
client/src/components/SidePanelInfo/SidePanelInfo.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
declare namespace MapIntroductionModuleScssNamespace {
|
||||
export interface IMapIntroductionModuleScss {
|
||||
sidePanelInfoContainer: string;
|
||||
sidePanelInfoHeading: string;
|
||||
sidePanelInfoIcon: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const MapIntroductionModuleScssModule: MapIntroductionModuleScssNamespace.IMapIntroductionModuleScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: MapIntroductionModuleScssNamespace.IMapIntroductionModuleScss;
|
||||
};
|
||||
|
||||
export = MapIntroductionModuleScssModule;
|
||||
16
client/src/components/SidePanelInfo/SidePanelInfo.test.tsx
Normal file
16
client/src/components/SidePanelInfo/SidePanelInfo.test.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import * as React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
import SidePanelInfo from './SidePanelInfo';
|
||||
import {LocalizedComponent} from '../../test/testHelpers';
|
||||
|
||||
describe('rendering of the component', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<SidePanelInfo />
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
it('expects the render to match snapshot', () => {
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
60
client/src/components/SidePanelInfo/SidePanelInfo.tsx
Normal file
60
client/src/components/SidePanelInfo/SidePanelInfo.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
// @ts-ignore
|
||||
import puzzle from '../../images/sidePanelIcons/puzzle.svg';
|
||||
// @ts-ignore
|
||||
import bellCurve from '../../images/sidePanelIcons/bellCurve.svg';
|
||||
// @ts-ignore
|
||||
import pieChart from '../../images/sidePanelIcons/pieChart.svg';
|
||||
// @ts-ignore
|
||||
import upDown from '../../images/sidePanelIcons/upDown.svg';
|
||||
|
||||
import * as styles from './SidePanelInfo.module.scss';
|
||||
import * as EXPLORE_COPY from '../../data/copy/explore';
|
||||
|
||||
const MapIntroduction = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<aside className={styles.sidePanelInfoContainer}>
|
||||
|
||||
<header tabIndex={0} className={styles.sidePanelInfoHeading}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.TITLE)}
|
||||
</header>
|
||||
<p tabIndex={0}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA1)}
|
||||
</p>
|
||||
<img tabIndex={0} className={styles.sidePanelInfoIcon}
|
||||
src={puzzle}
|
||||
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON1)}
|
||||
/>
|
||||
<p tabIndex={0}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA2)}
|
||||
</p>
|
||||
<img tabIndex={0} className={styles.sidePanelInfoIcon}
|
||||
src={bellCurve}
|
||||
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON2)}
|
||||
/>
|
||||
<p tabIndex={0}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA3)}
|
||||
</p>
|
||||
<img tabIndex={0} className={styles.sidePanelInfoIcon}
|
||||
src={pieChart}
|
||||
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON3)}
|
||||
/>
|
||||
<p tabIndex={0}>
|
||||
{intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.PARA4)}
|
||||
</p>
|
||||
<img tabIndex={0} className={styles.sidePanelInfoIcon}
|
||||
src={upDown}
|
||||
alt={intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE.ALT_TEXT_ICON4)}
|
||||
/>
|
||||
<p tabIndex={0}>
|
||||
{EXPLORE_COPY.SIDE_PANEL_INITIAL_STATE_PARA5}
|
||||
</p>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapIntroduction;
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of the component expects the render to match snapshot 1`] = `
|
||||
<DocumentFragment>
|
||||
<aside>
|
||||
<header
|
||||
tabindex="0"
|
||||
>
|
||||
Things to know
|
||||
</header>
|
||||
<p
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
This tool identifies communities that are marginalized, underserved, and overburdened by pollution. These communities are located in census tracts that are at or above the thresholds in one or more of eight categories of criteria.
|
||||
|
||||
</p>
|
||||
<img
|
||||
alt="
|
||||
An icon that has depicts pieces of a block selected mimicing the census block census tracts
|
||||
"
|
||||
src="test-file-stub"
|
||||
tabindex="0"
|
||||
/>
|
||||
<p
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
The tool uses census tracts that represent about 4,000 people, which is the smallest unit of geography for which consistent data can be displayed on the tool.
|
||||
|
||||
</p>
|
||||
<img
|
||||
alt="
|
||||
An icon that a bell curve or gaussian distribution
|
||||
"
|
||||
src="test-file-stub"
|
||||
tabindex="0"
|
||||
/>
|
||||
<p
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
The tool ranks each census tract using percentiles that show how much burden each tract experiences relative to all other tracts, for each criteria.
|
||||
|
||||
</p>
|
||||
<img
|
||||
alt="
|
||||
An icon that depicts a part of pie chart being removed
|
||||
"
|
||||
src="test-file-stub"
|
||||
tabindex="0"
|
||||
/>
|
||||
<p
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
Percentages are used for certain variables, i.e. those relating to high school achievement rate and to the share of individuals not currently enrolled in higher education.
|
||||
|
||||
</p>
|
||||
<img
|
||||
alt="
|
||||
An icon that has an up arrow and a down arrow
|
||||
"
|
||||
src="test-file-stub"
|
||||
tabindex="0"
|
||||
/>
|
||||
<p
|
||||
tabindex="0"
|
||||
>
|
||||
|
||||
Thresholds for each category determine if a tract should be identified as disadvantaged because it has exceeded a certain value for the relevant indicators.
|
||||
|
||||
</p>
|
||||
</aside>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
3
client/src/components/SidePanelInfo/index.tsx
Normal file
3
client/src/components/SidePanelInfo/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import SidePanelInfo from './SidePanelInfo';
|
||||
|
||||
export default SidePanelInfo;
|
||||
Loading…
Add table
Add a link
Reference in a new issue