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

Add Spanish to site (#1541)

Browse source 
* Add script to un-nest the translated es.json file

* Update unit tests

* Update i18n IDs to conformity

* Update READMEs

* Make ordinal values in sidepanel i18n compliant

* remove redudant IDs in en.json

* Add oridinal i18n to IndicatorValue sub-text

* Update plurals in sidepanel

- Disadvantaged in 1 category
- Disadvantaged in 5 categories
- At or above 1 threshold
- At or above 10 thresholds

* Add en.json link to GHA

* Enable FormatJS linter rules to catch i18n issues

* Testing if commit hash will render in PR message

* Testing if commit hash will render in PR message

* Enable allow repeats

* Try to add run command

* remove attempts to link to en.json

* Define COMMIT HASH env variable

* Move commit hash to deploy job
This commit is contained in:
Vim 2022-04-11 18:51:38 -04:00 • committed by GitHub
commit ce6f7974fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 1821 additions and 506 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/AreaDetail/AreaDetail.tsx
View file

@ -34,7 +34,7 @@ interface IAreaDetailProps {
export interface indicatorInfo {
label: string,
description: string,
value: number,
value: number | null,
isDisadvagtaged: boolean,
isPercent?: boolean,
threshold?: number,

347
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -137,10 +137,10 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
<div>
<div>
60
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -152,10 +152,13 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
</div>
<div>
<div>
below 90th
</div>
<div>
percentile
below 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -176,10 +179,10 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
<div>
<div>
90
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -191,10 +194,13 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
</div>
<div>
<div>
above 90th
</div>
<div>
percentile
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -218,10 +224,10 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
<div>
<div>
50
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -233,10 +239,13 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
</div>
<div>
<div>
below 90th
</div>
<div>
percentile
below 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -592,10 +601,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
19
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -607,10 +616,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
below 65th
</div>
<div>
percentile
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -769,10 +781,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
19
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -784,10 +796,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
below 65th
</div>
<div>
percentile
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -946,10 +961,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
19
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -961,10 +976,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
below 65th
</div>
<div>
percentile
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1052,10 +1070,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
95
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -1067,10 +1085,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
above 90th
</div>
<div>
percentile
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1135,10 +1156,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
19
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -1150,10 +1171,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
below 65th
</div>
<div>
percentile
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1341,10 +1365,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
19
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -1356,10 +1380,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
below 65th
</div>
<div>
percentile
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1489,10 +1516,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
19
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -1504,10 +1531,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
below 65th
</div>
<div>
percentile
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1727,10 +1757,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
19
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -1742,10 +1772,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
below 65th
</div>
<div>
percentile
below 65
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1835,10 +1868,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
97
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -1850,10 +1883,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
above 90th
</div>
<div>
percentile
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1903,10 +1939,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
96
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -1918,10 +1954,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
above 90th
</div>
<div>
percentile
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1945,10 +1984,10 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
12
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -1960,10 +1999,13 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
below 90th
</div>
<div>
percentile
below 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -1996,9 +2038,8 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
<div>
<div>
<div>
98
<span>
%
98%
</span>
</div>
<div>
@ -2010,10 +2051,11 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<div>
<div>
above 10
</div>
<div>
percent
above
<span>
10%
</span>
percent
</div>
</div>
</div>
@ -2196,10 +2238,10 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
<div>
<div>
97
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -2211,10 +2253,13 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
</div>
<div>
<div>
above 90th
</div>
<div>
percentile
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -2264,10 +2309,10 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
<div>
<div>
96
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -2279,10 +2324,13 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
</div>
<div>
<div>
above 90th
</div>
<div>
percentile
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -2306,10 +2354,10 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
<div>
<div>
12
<sup>
<span>
th
</span>
<sup
style="top: -0.2em;"
>
th
</sup>
</div>
<div>
@ -2321,10 +2369,13 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
</div>
<div>
<div>
below 90th
</div>
<div>
percentile
below 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</div>
</div>
@ -2357,9 +2408,8 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
<div>
<div>
<div>
98
<span>
%
98%
</span>
</div>
<div>
@ -2371,10 +2421,11 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
</div>
<div>
<div>
above 10
</div>
<div>
percent
above
<span>
10%
</span>
percent
</div>
</div>
</div>

5
client/src/components/Indicator/Indicator.module.scss
View file

@ -47,10 +47,6 @@
.indicatorValue {
margin-left: 2.2rem;
.indicatorSuperscript {
top: -0.2em
}
}
.indicatorArrow {
@ -73,6 +69,7 @@
flex-direction: column;
align-self: flex-end;
text-align: right;
@include u-width(8);
@include typeset('sans', '3xs', 2);
@include u-text('thin');
}

16
client/src/components/Indicator/Indicator.test.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react';
import {render, screen} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import Indicator, {IndicatorValueIcon, IndicatorValueSubText, DisplayStatUnit} from './Indicator';
import Indicator, {IndicatorValueIcon, IndicatorValueSubText, IndicatorValue} from './Indicator';
import {indicatorInfo} from '../AreaDetail/AreaDetail';
import * as EXPLORE_COPY from '../../data/copy/explore';
@ -9,7 +9,7 @@ import * as EXPLORE_COPY from '../../data/copy/explore';
const highSchool:indicatorInfo = {
label: 'some label',
description: 'some description',
value: 97,
value: .97,
isDisadvagtaged: true,
isPercent: true,
threshold: 20,
@ -136,8 +136,8 @@ describe('test that the unit suffix renders correctly', ()=> {
const {asFragment} = render(
<LocalizedComponent>
<DisplayStatUnit
indicator={lowLife}
<IndicatorValue
isPercent={lowLife.isPercent}
displayStat={90}
/>
</LocalizedComponent>,
@ -156,8 +156,8 @@ describe('test that the unit suffix renders correctly', ()=> {
const {asFragment} = render(
<LocalizedComponent>
<DisplayStatUnit
indicator={lowLife}
<IndicatorValue
isPercent={lowLife.isPercent}
displayStat={90}
/>
</LocalizedComponent>,
@ -175,8 +175,8 @@ describe('test that the unit suffix renders correctly', ()=> {
const {asFragment} = render(
<LocalizedComponent>
<DisplayStatUnit
indicator={lowLife}
<IndicatorValue
isPercent={lowLife.isPercent}
displayStat={null}
/>
</LocalizedComponent>,

127
client/src/components/Indicator/Indicator.tsx
View file

@ -30,8 +30,8 @@ interface IIndicatorValueSubText {
isPercent: boolean | undefined,
}
interface IDisplayStatUnit {
indicator: indicatorInfo,
interface IIndicatorValue {
isPercent: boolean | undefined,
displayStat: number | null,
}
@ -78,63 +78,87 @@ export const IndicatorValueSubText = ({value, isAboveThresh, threshold, isPercen
<div>
{EXPLORE_COPY.SIDE_PANEL_VALUES.UNAVAILBLE_MSG}
</div> :
<React.Fragment>
<div>
{
isAboveThresh ?
EXPLORE_COPY.SIDE_PANEL_VALUES.ABOVE :
EXPLORE_COPY.SIDE_PANEL_VALUES.BELOW
}
{`${threshold ? threshold : 90}`}
<div>
{
isAboveThresh ?
EXPLORE_COPY.SIDE_PANEL_VALUES.ABOVE :
EXPLORE_COPY.SIDE_PANEL_VALUES.BELOW
}
{threshold ?
<IndicatorValue isPercent={isPercent} displayStat={threshold} /> :
<IndicatorValue isPercent={isPercent} displayStat={90} />
}
{!isPercent && `th`}
</div>
<div>
{
isPercent ?
EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENT :
EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENTILE
}
</div>
</React.Fragment>;
{/* {!isPercent && `th`} */}
{` `}
{
isPercent ?
EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENT :
EXPLORE_COPY.SIDE_PANEL_VALUES.PERCENTILE
}
</div>;
};
/**
* This component will return the value suffix as either a percent or
* ordinal value of the displayed statistic
* The react-i18n library allow to add ordinal suffix (st, nd, rd, th) to indicator values.
* The number and the suffix is a single entity. We are looking to add styling to
* just the suffix portion if the value is a percentile. This function will add
* a superscript styling to just the suffix portion of percentile values.
*
* @return {JSX.Element}
* @param {string} indicatorValueWithSuffix
* @return {string}
*/
export const DisplayStatUnit = ({indicator, displayStat}:IDisplayStatUnit) => {
if (indicator.value !== null) {
return indicator.isPercent ?
<span>{`%`}</span> :
<sup className={styles.indicatorSuperscript}>
<span>{getSuperscriptOrdinal(displayStat)}</span>
</sup>;
} else {
return <React.Fragment></React.Fragment>;
}
export const superscriptOrdinal = (indicatorValueWithSuffix:string) => {
const valueRegEx = /[0-9]{1,2}/;
const suffixRegEx = /[a-z]{2}/; // ie, (st, nd, rd, th)
const indicatorValue = valueRegEx.exec(indicatorValueWithSuffix);
const ordinalSuffix = suffixRegEx.exec(indicatorValueWithSuffix);
return <>{indicatorValue}<sup style={{top: '-0.2em'}}>{ordinalSuffix}</sup></>;
};
/**
* This component will return the indicators's value with an ordinal suffix
* or a percentage sign using i18n functions
*
* @return {JSX.Element | null}
*/
export const IndicatorValue = ({isPercent, displayStat}:IIndicatorValue) => {
const intl = useIntl();
// Todo: Add internationalization to superscript ticket #582
export const getSuperscriptOrdinal = (percentile: number | string | null) => {
if (percentile === null) return '';
if (typeof percentile === 'number') {
const englishOrdinalRules = new Intl.PluralRules('en', {
type: 'ordinal',
});
const suffixes = {
zero: 'th',
one: 'st',
two: 'nd',
few: 'rd',
many: 'th',
other: 'th',
};
return suffixes[englishOrdinalRules.select(percentile)];
}
if (displayStat === null) return <React.Fragment></React.Fragment>;
const i18nOrdinalSuffix: string = intl.formatMessage(
{
id: 'explore.tool.page.side.panel.indicator.percentile.value.ordinal.suffix',
// eslint-disable-next-line max-len
description: `Navigate to the explore the tool page. Click on the map. The side panel will show categories. Open a category. This will define the indicator value's oridinal suffix. For example the st in 91st, the rd in 23rd, and the th in 26th, etc.`,
defaultMessage: `
{indicatorValue, selectordinal,
one {#st}
two {#nd}
=3 {#rd}
other {#th}
}
`,
},
{
indicatorValue: displayStat,
},
);
return isPercent ?
<span>
{intl.formatNumber(
displayStat,
{
style: 'unit',
unit: 'percent',
unitDisplay: 'short',
},
)}
</span> : superscriptOrdinal(i18nOrdinalSuffix);
};
/**
@ -175,8 +199,7 @@ const Indicator = ({indicator}:IIndicator) => {
{/* Indicator value */}
<div className={styles.indicatorValue}>
{displayStat}
<DisplayStatUnit indicator={indicator} displayStat={displayStat}/>
<IndicatorValue isPercent={indicator.isPercent} displayStat={displayStat}/>
</div>
{/* Indicator icon - up arrow, down arrow, or unavailable */}

45
client/src/components/Indicator/__snapshots__/Indicator.test.tsx.snap
View file

@ -16,9 +16,8 @@ exports[`rendering of the Indicator checks if component renders 1`] = `
<div>
<div>
<div>
9700
<span>
%
97%
</span>
</div>
<div>
@ -30,10 +29,11 @@ exports[`rendering of the Indicator checks if component renders 1`] = `
</div>
<div>
<div>
above 20
</div>
<div>
percent
above
<span>
20%
</span>
percent
</div>
</div>
</div>
@ -81,10 +81,13 @@ exports[`test rendering of Indicator value icons renders the up arrow when value
exports[`test rendering of Indicator value sub-text renders the "above 90 percentile" 1`] = `
<DocumentFragment>
<div>
above 90th
</div>
<div>
percentile
above 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</DocumentFragment>
`;
@ -92,10 +95,13 @@ exports[`test rendering of Indicator value sub-text renders the "above 90 percen
exports[`test rendering of Indicator value sub-text renders the "below 90 percentile" 1`] = `
<DocumentFragment>
<div>
below 90th
</div>
<div>
percentile
below 90
<sup
style="top: -0.2em;"
>
th
</sup>
percentile
</div>
</DocumentFragment>
`;
@ -113,17 +119,18 @@ exports[`test that the unit suffix renders correctly renders correctly when the
exports[`test that the unit suffix renders correctly renders correctly when the value is a percent 1`] = `
<DocumentFragment>
<span>
%
90%
</span>
</DocumentFragment>
`;
exports[`test that the unit suffix renders correctly renders correctly when the value is a percentile 1`] = `
<DocumentFragment>
<sup>
<span>
th
</span>
90
<sup
style="top: -0.2em;"
>
th
</sup>
</DocumentFragment>
`;

16
client/src/components/Language/Language.test.tsx
View file

@ -3,10 +3,22 @@ import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import Language from './Language';
describe('rendering of the Language', () => {
describe('rendering of the Language component on mobile', () => {
const {asFragment} = render(
<LocalizedComponent>
<Language />
<Language isDesktop={false}/>
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});
describe('rendering of the Language component on desktop', () => {
const {asFragment} = render(
<LocalizedComponent>
<Language isDesktop={true}/>
</LocalizedComponent>,
);

4
client/src/components/Language/__snapshots__/Language.test.tsx.snap
View file

@ -1,3 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the Language checks if component renders 1`] = `<DocumentFragment />`;
exports[`rendering of the Language component on desktop checks if component renders 1`] = `<DocumentFragment />`;
exports[`rendering of the Language component on mobile checks if component renders 1`] = `<DocumentFragment />`;