mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-24 00:21:41 -07:00
Modifies ExploreTool page to match sprint 4 design (#481)
* initial commit of sprint 4 explore page * adds styling on HowYouCanHelp module * troubleshooting li element on deployed URL removing local bullet styles * removing unused styles * recreating HowYouCanHelp * explicit list el styles * adds bullets back in * fixes tooltip style and alert padding * componentize MapLegend * fix links * inital intl and unit tests * adds trusswork tooltip for comparison * updates based on various feedback and disucssions: - removes react-tooltip - placeholder trussworks tooltip - removes download packet component - intl on HowYouCanHelp - updates MapLegend tests - add initial cy test on ExploreTool page * removes bold on alert * PR feedback: - removes location from J40Alert - localizes `COLOR KEY` * adds intl to constants file * modifies download zip URL to new S3 location * removes location depedencies on Alerts * add localization for HowYouCanHelp
This commit is contained in:
Vim
GitHub
parent
ebe6180f7c
commit
174a0e1330
44 changed files with 974 additions and 426 deletions
117
client/src/components/MapLegend/index.tsx
Normal file
117
client/src/components/MapLegend/index.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
import React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {Tooltip} from '@trussworks/react-uswds';
|
||||
|
||||
import * as styles from './mapLegend.module.scss';
|
||||
import * as constants from '../../data/constants';
|
||||
|
||||
// @ts-ignore
|
||||
import infoIcon from '/node_modules/uswds/dist/img/usa-icons/info_outline.svg';
|
||||
|
||||
// Todo VS: This information will be used in the re-design of the tool-tip
|
||||
// const getToolTipContent = (type:string) => {
|
||||
// const intl = useIntl();
|
||||
// const messages = defineMessages({
|
||||
// priorityHeader: {
|
||||
// id: 'tooltip.info.priority.header',
|
||||
// defaultMessage: constants.PRIORITIZED_COMMUNITY,
|
||||
// description: 'the header of the prioritized community tooltip',
|
||||
// },
|
||||
// thresholdHeader: {
|
||||
// id: 'tooltip.info.threshold.header',
|
||||
// defaultMessage: constants.THRESHOLD_COMMUNITY,
|
||||
// description: 'the header of the threshold community tooltip',
|
||||
// },
|
||||
// priorityText: {
|
||||
// id: 'tooltip.info.priority.text',
|
||||
// defaultMessage: 'A prioritized community is one that has a cumulative index score of Xth ' +
|
||||
// 'percentile and above. 40% of the benefits from investments outlined by the ' +
|
||||
// 'Justice40 Initiative should go to prioritized communities.',
|
||||
// description: 'the text of the prioritized community tooltip',
|
||||
// },
|
||||
// thresholdText: {
|
||||
// id: 'tooltip.info.threshold.text',
|
||||
// defaultMessage: 'Communities with a cumulative index score between Y - X.99th percentile are ' +
|
||||
// 'considered threshold communities. While these communities are currently not considered a ' +
|
||||
// 'prioritized community, this may change based on updates to the scoring method.',
|
||||
// description: 'the text of the threshold community tooltip',
|
||||
// },
|
||||
// });
|
||||
|
||||
// return (type === 'prioritized') ?
|
||||
// (
|
||||
// <div>
|
||||
// <h2>{intl.formatMessage(messages.priorityHeader)}</h2>
|
||||
// <p className={styles.legendTooltipText}>{intl.formatMessage(messages.priorityText)}</p>
|
||||
// </div>
|
||||
// ) :
|
||||
// (
|
||||
// <div>
|
||||
// <h2>{intl.formatMessage(messages.thresholdHeader)}</h2>
|
||||
// <p className={styles.legendTooltipText}>{intl.formatMessage(messages.thresholdText)}</p>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
const MapLegend = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
// Type definitions required for @trussworks tooltip. This type defines the div that wraps the icon.
|
||||
// This allows to pass children and other attributes.
|
||||
type IconWrapperProps = React.PropsWithChildren<{
|
||||
className?: string
|
||||
}> &
|
||||
JSX.IntrinsicElements['div'] &
|
||||
React.RefAttributes<HTMLDivElement>
|
||||
const IconWrapper: React.ForwardRefExoticComponent<IconWrapperProps> = React.forwardRef(
|
||||
({className, children, ...tooltipProps}: IconWrapperProps, ref) => (
|
||||
<div ref={ref} className={styles.infoIconWrapper} {...tooltipProps}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
);
|
||||
IconWrapper.displayName = 'custom info wrapper';
|
||||
|
||||
return (
|
||||
<div className={styles.legendContainer}>
|
||||
<h3 className={styles.legendHeader}>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}</h3>
|
||||
<div className={styles.swatchContainer}>
|
||||
<div className={styles.legendItem}>
|
||||
<div className={styles.colorSwatch} id={styles.prioritized} />
|
||||
<span>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL)}</span>
|
||||
|
||||
{/* Using @trussworks tooltip */}
|
||||
<Tooltip<IconWrapperProps>
|
||||
label={`
|
||||
Communities that have cumulative
|
||||
index score of Xth percentile
|
||||
and above
|
||||
`}
|
||||
position='left'
|
||||
asCustom={IconWrapper}>
|
||||
<img className={styles.infoIcon} src={infoIcon} />
|
||||
</Tooltip>
|
||||
|
||||
</div>
|
||||
<div className={styles.legendItem}>
|
||||
<div className={styles.colorSwatch} id={styles.threshold} />
|
||||
<span>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.THRESHOLD_LABEL)}</span>
|
||||
|
||||
{/* Using @trussworks tooltip */}
|
||||
<Tooltip<IconWrapperProps>
|
||||
label={`
|
||||
Communities with a cumulative
|
||||
index score between Y - X.99th
|
||||
percentile
|
||||
`}
|
||||
position='left'
|
||||
asCustom={IconWrapper}>
|
||||
<img className={styles.infoIcon} src={infoIcon} />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MapLegend;
|
||||
96
client/src/components/MapLegend/mapLegend.module.scss
Normal file
96
client/src/components/MapLegend/mapLegend.module.scss
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
@import "../utils.scss";
|
||||
|
||||
$min-color: #fafaf8;
|
||||
$med-color: rgba(26, 68, 128, 0.2);
|
||||
$max-color: rgba(26, 68, 128, 0.6);
|
||||
$alertInfoColor: #e7f6f8;
|
||||
|
||||
.legendContainer {
|
||||
margin: 1rem 1.2rem 1rem 2.5rem;
|
||||
font-size: 0.8em;
|
||||
border: 1px solid #8c9297;
|
||||
padding: 0 1.8rem;
|
||||
flex: 1;
|
||||
color: $headingFontColor;
|
||||
|
||||
.legendTooltipText {
|
||||
max-width: 14rem;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobileBreakpoint) {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.legendHeader {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.swatchContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
@media screen and (max-width: $mobileBreakpoint) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.legendItem {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
.infoIconWrapper {
|
||||
margin-left: 0.8rem;
|
||||
.infoIcon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobileBreakpoint) {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.colorSwatch {
|
||||
box-sizing: border-box;
|
||||
height: 1.7rem;
|
||||
width: 1.7rem;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#prioritized {
|
||||
background-color: $max-color;
|
||||
}
|
||||
|
||||
#threshold {
|
||||
background-color: $med-color;
|
||||
}
|
||||
|
||||
#nonPrioritized {
|
||||
background-color: $min-color;
|
||||
}
|
||||
|
||||
.legendTooltipTheme {
|
||||
color: $headingFontColor !important;
|
||||
background-color: white !important;
|
||||
opacity: 1 !important;
|
||||
border: $sidePanelBorder !important;
|
||||
box-shadow: 0 0 11px rgba(33, 33, 33, 0.2) !important;
|
||||
&.place-top {
|
||||
&:after {
|
||||
border-top-color: white !important;
|
||||
border-top-style: solid !important;
|
||||
border-top-width: 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
client/src/components/MapLegend/mapLegend.module.scss.d.ts
vendored
Normal file
23
client/src/components/MapLegend/mapLegend.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
declare namespace HowYouCanHelpModuleScssNamespace {
|
||||
export interface IHowYouCanHelpModuleScss {
|
||||
legendContainer: string;
|
||||
legendHeader: string;
|
||||
swatchContainer: string;
|
||||
colorSwatch: string;
|
||||
prioritized: string,
|
||||
threshold: string,
|
||||
nonPrioritized: string,
|
||||
legendItem: string,
|
||||
infoIcon: string,
|
||||
legendTooltipText: string,
|
||||
legendTooltipTheme: string,
|
||||
infoIconWrapper: string,
|
||||
}
|
||||
}
|
||||
|
||||
declare const HowYouCanHelpModuleScssModule: HowYouCanHelpModuleScssNamespace.IHowYouCanHelpModuleScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: HowYouCanHelpModuleScssNamespace.IHowYouCanHelpModuleScss;
|
||||
};
|
||||
|
||||
export = HowYouCanHelpModuleScssModule;
|
||||
25
client/src/components/MapLegend/tests/mapLegend.test.tsx
Normal file
25
client/src/components/MapLegend/tests/mapLegend.test.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import * as React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
|
||||
import {LocalizedComponent} from '../../../test/testHelpers';
|
||||
import MapLegend from '../index';
|
||||
import * as constants from '../../../data/constants';
|
||||
|
||||
describe('rendering of the MapLegend', () => {
|
||||
const {getAllByText} = render(
|
||||
<LocalizedComponent>
|
||||
<MapLegend />
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
// Snapshot testing was unusable as the Tooltip lib rendered hash based class
|
||||
// names on each render
|
||||
|
||||
const intlPriorityLabel = constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL.defaultMessage;
|
||||
const intlThresholdLabel = constants.EXPLORE_TOOL_PAGE_TEXT.THRESHOLD_LABEL.defaultMessage;
|
||||
|
||||
it('checks if various objects in the component rendered', () => {
|
||||
expect(getAllByText(intlPriorityLabel)[0]).toHaveTextContent(intlPriorityLabel);
|
||||
expect(getAllByText(intlThresholdLabel)[0]).toHaveTextContent(intlThresholdLabel);
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue