mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-23 01:54:18 -08:00
Updates to Spanish Site (#1585)
* Updates to Spanish Site * update bad edit * take feature flag out * removing feature flag from Language component * bad return * updated snapshots * Update unit tests Co-authored-by: TomNUSDS <tomn.usds.opensource+tomnusds@gmail.com>
This commit is contained in:
Jorge Escobar
GitHub
parent
0cdc44aaab
commit
5b4f4af2a7
16 changed files with 2146 additions and 31 deletions
|
|
@ -25,6 +25,7 @@
|
||||||
"lint": "eslint './src/**/*.{ts,tsx}' --ignore-pattern node_modules/ --ignore-pattern public --ignore-pattern *scss.d.ts",
|
"lint": "eslint './src/**/*.{ts,tsx}' --ignore-pattern node_modules/ --ignore-pattern public --ignore-pattern *scss.d.ts",
|
||||||
"lint:fix": "npm run lint -- --quiet --fix",
|
"lint:fix": "npm run lint -- --quiet --fix",
|
||||||
"intl:extract": "formatjs extract 'src/**/*.tsx' --out-file src/intl/en.json",
|
"intl:extract": "formatjs extract 'src/**/*.tsx' --out-file src/intl/en.json",
|
||||||
|
"intl:removeNesting": "node src/intl/removeNesting.js",
|
||||||
"intl:compile-en": "formatjs compile src/intl/en.json --ast --out-file compiled-lang/en.json",
|
"intl:compile-en": "formatjs compile src/intl/en.json --ast --out-file compiled-lang/en.json",
|
||||||
"test:intl-extraction": "node src/intl/testIntlExtraction",
|
"test:intl-extraction": "node src/intl/testIntlExtraction",
|
||||||
"prepare": "cd .. && husky install client/.husky"
|
"prepare": "cd .. && husky install client/.husky"
|
||||||
|
|
|
||||||
|
|
@ -2,31 +2,19 @@ import React from 'react';
|
||||||
import {GovBanner} from '@trussworks/react-uswds';
|
import {GovBanner} from '@trussworks/react-uswds';
|
||||||
import {useIntl} from 'gatsby-plugin-intl';
|
import {useIntl} from 'gatsby-plugin-intl';
|
||||||
|
|
||||||
// Contexts:
|
|
||||||
import {useFlags} from '../../contexts/FlagContext';
|
|
||||||
|
|
||||||
import Language from '../Language';
|
import Language from '../Language';
|
||||||
|
|
||||||
import * as styles from './GovernmentBanner.module.scss';
|
import * as styles from './GovernmentBanner.module.scss';
|
||||||
|
|
||||||
const GovernmentBanner = () => {
|
const GovernmentBanner = () => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const flags = useFlags();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.fullScreenContainer}>
|
<div className={styles.fullScreenContainer}>
|
||||||
<div className={styles.bannerContainer}>
|
<div className={styles.bannerContainer}>
|
||||||
|
|
||||||
{'sp' in flags ? (
|
|
||||||
<>
|
|
||||||
<GovBanner language={intl.locale === 'es' ? 'spanish' : 'english'}/>
|
<GovBanner language={intl.locale === 'es' ? 'spanish' : 'english'}/>
|
||||||
<Language isDesktop={true}/>
|
<Language isDesktop={true}/>
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<GovBanner/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -135,6 +135,22 @@ exports[`rendering of the GovernmentBanner checks if component renders 1`] = `
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</DocumentFragment>
|
</DocumentFragment>
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -261,7 +277,24 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
|
||||||
<li
|
<li
|
||||||
class="usa-nav__primary-item"
|
class="usa-nav__primary-item"
|
||||||
>
|
>
|
||||||
<div />
|
<div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {IntlContextConsumer, changeLocale} from 'gatsby-plugin-intl';
|
import {IntlContextConsumer, changeLocale} from 'gatsby-plugin-intl';
|
||||||
|
|
||||||
// Contexts:
|
|
||||||
import {useFlags} from '../../contexts/FlagContext';
|
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import languageIcon from '/node_modules/uswds/dist/img/usa-icons/language.svg';
|
import languageIcon from '/node_modules/uswds/dist/img/usa-icons/language.svg';
|
||||||
import * as styles from './Language.module.scss';
|
import * as styles from './Language.module.scss';
|
||||||
|
|
@ -24,9 +21,8 @@ interface ILanguageProps {
|
||||||
* @return {JSX.Element | null}
|
* @return {JSX.Element | null}
|
||||||
*/
|
*/
|
||||||
const Language = ({isDesktop}:ILanguageProps) => {
|
const Language = ({isDesktop}:ILanguageProps) => {
|
||||||
const flags = useFlags();
|
|
||||||
|
|
||||||
return 'sp' in flags ? (
|
return (
|
||||||
<div className={isDesktop ? styles.languageContainer : styles.languageContainerMobile}>
|
<div className={isDesktop ? styles.languageContainer : styles.languageContainerMobile}>
|
||||||
<img className={styles.languageIcon} src={languageIcon} alt={'language icon for selecting language'}/>
|
<img className={styles.languageIcon} src={languageIcon} alt={'language icon for selecting language'}/>
|
||||||
<IntlContextConsumer>
|
<IntlContextConsumer>
|
||||||
|
|
@ -44,7 +40,7 @@ const Language = ({isDesktop}:ILanguageProps) => {
|
||||||
}
|
}
|
||||||
</IntlContextConsumer>
|
</IntlContextConsumer>
|
||||||
</div>
|
</div>
|
||||||
) : null;
|
)
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Language;
|
export default Language;
|
||||||
|
|
|
||||||
|
|
@ -2,4 +2,23 @@
|
||||||
|
|
||||||
exports[`rendering of the Language component on desktop 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 />`;
|
exports[`rendering of the Language component on mobile checks if component renders 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
1465
client/src/intl/es_4.12.22-translated-final.json
Normal file
1465
client/src/intl/es_4.12.22-translated-final.json
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,5 +1,5 @@
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
const englishJson = require('./es_translated_final.json');
|
const englishJson = require('./es_4.12.22-translated-final.json');
|
||||||
|
|
||||||
// placeholder for fixed es json file
|
// placeholder for fixed es json file
|
||||||
const fixedEs = {};
|
const fixedEs = {};
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
<li
|
<li
|
||||||
class="usa-nav__primary-item"
|
class="usa-nav__primary-item"
|
||||||
>
|
>
|
||||||
<div />
|
<div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
<li
|
<li
|
||||||
class="usa-nav__primary-item"
|
class="usa-nav__primary-item"
|
||||||
>
|
>
|
||||||
<div />
|
<div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
<li
|
<li
|
||||||
class="usa-nav__primary-item"
|
class="usa-nav__primary-item"
|
||||||
>
|
>
|
||||||
<div />
|
<div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
<li
|
<li
|
||||||
class="usa-nav__primary-item"
|
class="usa-nav__primary-item"
|
||||||
>
|
>
|
||||||
<div />
|
<div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
<li
|
<li
|
||||||
class="usa-nav__primary-item"
|
class="usa-nav__primary-item"
|
||||||
>
|
>
|
||||||
<div />
|
<div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
<li
|
<li
|
||||||
class="usa-nav__primary-item"
|
class="usa-nav__primary-item"
|
||||||
>
|
>
|
||||||
<div />
|
<div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
||||||
<li
|
<li
|
||||||
class="usa-nav__primary-item"
|
class="usa-nav__primary-item"
|
||||||
>
|
>
|
||||||
<div />
|
<div>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
alt="language icon for selecting language"
|
||||||
|
src="test-file-stub"
|
||||||
|
/>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
English
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
Español
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue