mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-15 06:01:39 -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
80
client/src/components/DatasetCard/DatasetCard.tsx
Normal file
80
client/src/components/DatasetCard/DatasetCard.tsx
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/* eslint-disable valid-jsdoc */
|
||||
import React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as styles from './datasetCard.module.scss';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
interface IDatasetCardProps {
|
||||
datasetCardProps: METHODOLOGY_COPY.IIndicators
|
||||
}
|
||||
|
||||
/**
|
||||
* This component will take in a card and render a dataset card
|
||||
*
|
||||
* @param {IDatasetCardProps}
|
||||
* @return {JSX.Element}
|
||||
*/
|
||||
const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<div className={styles.datasetCard} id={datasetCardProps.domID}>
|
||||
{/* Dataset header */}
|
||||
<h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
|
||||
|
||||
{/* Dataset description */}
|
||||
<div className={styles.datasetCardDescription}>
|
||||
{datasetCardProps.description}
|
||||
</div>
|
||||
|
||||
{/* Dataset note */}
|
||||
{datasetCardProps.note && <div className={styles.datasetCardDescription}>
|
||||
<p>{datasetCardProps.note}</p>
|
||||
</div>}
|
||||
|
||||
<ul className={styles.datasetCardList}>
|
||||
|
||||
{/* Dataset Used in */}
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.USED_IN)}
|
||||
</span>
|
||||
{datasetCardProps.usedIn}
|
||||
</li>
|
||||
|
||||
{/* Dataset Responsible Party */}
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)}
|
||||
</span>
|
||||
{datasetCardProps.responsibleParty}
|
||||
</li>
|
||||
|
||||
|
||||
{datasetCardProps.sources.map((dataSource, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{/* Dataset Source */}
|
||||
<li className={styles.datasetCardListItemSource}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)}
|
||||
</span>
|
||||
{dataSource.source}
|
||||
</li>
|
||||
|
||||
{/* Dataset Available for */}
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.AVAILABLE_FOR)}
|
||||
</span>
|
||||
{dataSource.availableFor}
|
||||
</li>
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatasetCard;
|
||||
|
|
@ -1,68 +1,3 @@
|
|||
import React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as styles from './datasetCard.module.scss';
|
||||
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
|
||||
|
||||
interface IDatasetCardProps {
|
||||
datasetCardProps: METHODOLOGY_COPY.IIndicators
|
||||
}
|
||||
|
||||
const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<div className={styles.datasetCard} id={datasetCardProps.domID}>
|
||||
{/* Dataset header */}
|
||||
<h3 className={styles.datasetCardIndicator}>{datasetCardProps.indicator}</h3>
|
||||
|
||||
{/* Dataset description */}
|
||||
<div className={styles.datasetCardDescription}>
|
||||
{datasetCardProps.description}
|
||||
</div>
|
||||
|
||||
<ul className={styles.datasetCardList}>
|
||||
|
||||
{/* Dataset Used in */}
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.USED_IN)}
|
||||
</span>
|
||||
{datasetCardProps.usedIn}
|
||||
</li>
|
||||
|
||||
{/* Dataset Responsible Party */}
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.RESP_PARTY)}
|
||||
</span>
|
||||
{datasetCardProps.responsibleParty}
|
||||
</li>
|
||||
|
||||
|
||||
{datasetCardProps.sources.map((dataSource) => (
|
||||
<>
|
||||
{/* Dataset Source */}
|
||||
<li className={styles.datasetCardListItemSource}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.SOURCE)}
|
||||
</span>
|
||||
{dataSource.source}
|
||||
</li>
|
||||
|
||||
{/* Dataset Available for */}
|
||||
<li className={styles.datasetCardListItem}>
|
||||
<span className={styles.datasetCardLabels}>
|
||||
{intl.formatMessage(METHODOLOGY_COPY.DATASET_CARD_LABELS.AVAILABLE_FOR)}
|
||||
</span>
|
||||
{dataSource.availableFor}
|
||||
</li>
|
||||
</>
|
||||
))}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
import DatasetCard from './DatasetCard';
|
||||
|
||||
export default DatasetCard;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
import {LocalizedComponent} from '../../../test/testHelpers';
|
||||
import DatasetCard from '../../DatasetCard';
|
||||
import DatasetCard from '../DatasetCard';
|
||||
|
||||
import * as METHODOLOGY_COPY from '../../../data/copy/methodology';
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue