publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-11 20:04:18 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor alerts (#562)

Browse source 
* Refactor alerts
* Remove J40Alert and classes
* Make AlertWrapper the primary component.
* Props to show one or both alerts
* Unit tests to verify one or both works correctly
* Update pages to use AlertWrapper
* Remove unused J40Aside.
* Remove dead code from index
This commit is contained in:
TomNUSDS 2021-08-25 08:34:18 -07:00 • committed by GitHub
commit b32fd6ddcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 154 additions and 272 deletions
Download patch file Download diff file Expand all files Collapse all files

14
client/src/components/DatasetContainer/index.tsx
View file

@ -2,8 +2,8 @@ import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import {defineMessages} from 'react-intl';
import DatasetCard from '../DatasetCard';
import J40Alert from '../J40Alert';
import * as styles from './dsContainer.module.scss';
import AlertWrapper from '../AlertWrapper';
export const cards = [
{
@ -67,23 +67,21 @@ const DatasetContainer = () => {
subTitle: {
id: 'datasetContainer.subTitle',
defaultMessage: 'The datasets come from a variety of sources and ' +
'were selected after considering relevance, availability, recency and quality.',
'were selected after considering relevance, availability, recency and quality.',
description: 'description of the dataset section',
},
});
return (
<div className={`${styles.datasetContainer} desktop:grid-col`}>
<div className={`${styles.j40AlertContainer} desktop:grid-col`}>
<div className={'grid-container-desktop-lg'}>
<J40Alert isPaddedLeft={false}/>
</div>
</div>
<div className={'grid-container-desktop-lg'}>
<h1 className={styles.datasetContainerHeader}>{intl.formatMessage(messages.cumulativeScore)}</h1>
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
<p className={styles.datasetContainerSubTitle}>{intl.formatMessage(messages.subTitle)}</p>
<div className={styles.datasetCardsContainer}>
{cards.map((card) => <DatasetCard key={card.indicator} datasetCardProps={card}/>)}
{cards.map((card) => <DatasetCard
key={card.indicator}
datasetCardProps={card}/>)}
</div>
</div>
</div>

39
client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap
View file

@ -5,25 +5,38 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
<div
class="undefined desktop:grid-col"
>
<div
class="undefined desktop:grid-col"
>
<div
class="grid-container-desktop-lg"
>
<div
class="undefined undefined"
>
Limited data sources — Datasets may be added, updated, or removed.
</div>
</div>
</div>
<div
class="grid-container-desktop-lg"
>
<h1>
Datasets used in cumulative score
</h1>
<div>
<div
class="usa-alert usa-alert--warning j40-sitealert"
data-testid="alert"
>
<div
class="usa-alert__body"
>
<p
class="usa-alert__text"
>
<span
class="j40-sitealert-title"
>
Limited data sources
</span>
<span
class="j40-sitealert-body"
>
— Datasets may be added, updated, or removed.
</span>
<br />
</p>
</div>
</div>
</div>
<p>
The datasets come from a variety of sources and were selected after considering relevance, availability, recency and quality.
</p>