mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-23 22:01:40 -07:00
Website copy layout styling updates for Tuesday launch (#685)
* Add basic accordion in AreaDetail * Refactor AreaDetail to use a Grid layout - adds useWindowSize to detect window resizes for mobile view - Map and AreaDetail to use Grid - removes some component styling from J40 - updates snapshot - MapWrapper to use Grid * Add custom Accordion styling - make J40 map a 9:3 Grid layout split - override native Accordion heading styles - make the Accordion multi-selectable - add some dummy data for indicators * Update AreaDetail to match design - remove styles in AreaDetail - increase height of MapInfoPanel - add Accordian items (indicators) - updates snapshot * Add a Beta Tag to the logo * Change the line height on indicators descriptions * Update package-lock after the rebase * Remove threshold from MapLegend - move feature selected border color to utils - remove all tooltip logic - remove all styles associated with tooltips - add legend label and descript to constants - refactor tests to be snapshots * Add borders between additional indicators * Modify copy and update styles - add the ordinal superscript back - update the copy - update the snapshots * Add additional indicators keys * Connect indicator keys to the UI - update the areaDetail snapshot * Render additional indicators accordion open onLoad - update snapshot * Update copy on About page * Update copy on indicator descriptions - update snapshots * Update the "How you can help section" - update the snapshot * Add a comma to "ZIP file will contain..." * Add the Datasets section to the methodology page - update snapshot * Update Methodology process list to trussworks - remove custom process list - remove custom CSS from global file - change copy * Modify layout of Methodology to using Grid - modify Dataset section to use Grid - remove outdated component CSS - update the snapshot * Update copy based on product feedback - update snapshots * Remove Accordions - updates snapshots - white CBG groups will show "Not community of focus"
This commit is contained in:
Vim
GitHub
parent
487f6a8e04
commit
522872037a
33 changed files with 2029 additions and 1208 deletions
|
|
@ -1,114 +1,21 @@
|
|||
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}>
|
||||
<h6>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}</h6>
|
||||
<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 className={styles.colorSwatch} />
|
||||
<div>
|
||||
<h4>
|
||||
{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL)}
|
||||
</h4>
|
||||
<p className={'secondary'}>
|
||||
{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_DESCRIPT)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,88 +6,23 @@ $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: 1rem 1.8rem 0;
|
||||
flex: 1;
|
||||
color: $headingFontColor;
|
||||
|
||||
.legendTooltipText {
|
||||
max-width: 14rem;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobileBreakpoint) {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.swatchContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 1rem 0 1rem 2.5rem;
|
||||
border: 1px solid #DFE1E2;
|
||||
padding: .5rem 1.5rem 1rem 1.5rem;
|
||||
|
||||
@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;
|
||||
@media screen and (max-width: 640px) {
|
||||
margin: 1rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.colorSwatch {
|
||||
flex: 1 0 2rem;
|
||||
box-sizing: border-box;
|
||||
height: 1.7rem;
|
||||
width: 1.7rem;
|
||||
margin-right: 10px;
|
||||
margin: 2rem 1.5rem 2rem 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
border: 2px solid $featureSelectBorderColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,7 @@
|
|||
declare namespace HowYouCanHelpModuleScssNamespace {
|
||||
export interface IHowYouCanHelpModuleScss {
|
||||
legendContainer: string;
|
||||
swatchContainer: string;
|
||||
colorSwatch: string;
|
||||
prioritized: string,
|
||||
threshold: string,
|
||||
nonPrioritized: string,
|
||||
legendItem: string,
|
||||
infoIcon: string,
|
||||
legendTooltipText: string,
|
||||
legendTooltipTheme: string,
|
||||
infoIconWrapper: string,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of the MapLegend checks if snapshots have changed 1`] = `
|
||||
<DocumentFragment>
|
||||
<div>
|
||||
<div />
|
||||
<div>
|
||||
<h4>
|
||||
Draft community of focus
|
||||
</h4>
|
||||
<p
|
||||
class="secondary"
|
||||
>
|
||||
These communities are identified as experiencing disadvantages that merit the focus of certain Federal investments, including through the Justice40 Initiative
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
@ -3,23 +3,16 @@ 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(
|
||||
const {asFragment} = 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);
|
||||
it('checks if snapshots have changed', () => {
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue