mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-22 09:41:26 -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:
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:fix": "npm run lint -- --quiet --fix",
|
||||
"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",
|
||||
"test:intl-extraction": "node src/intl/testIntlExtraction",
|
||||
"prepare": "cd .. && husky install client/.husky"
|
||||
|
|
|
@ -2,31 +2,19 @@ import React from 'react';
|
|||
import {GovBanner} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
// Contexts:
|
||||
import {useFlags} from '../../contexts/FlagContext';
|
||||
|
||||
import Language from '../Language';
|
||||
|
||||
import * as styles from './GovernmentBanner.module.scss';
|
||||
|
||||
const GovernmentBanner = () => {
|
||||
const intl = useIntl();
|
||||
const flags = useFlags();
|
||||
|
||||
return (
|
||||
<div className={styles.fullScreenContainer}>
|
||||
<div className={styles.bannerContainer}>
|
||||
|
||||
{'sp' in flags ? (
|
||||
<>
|
||||
<GovBanner language={intl.locale === 'es' ? 'spanish' : 'english'}/>
|
||||
<Language isDesktop={true}/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<GovBanner/>
|
||||
</>
|
||||
)}
|
||||
<GovBanner language={intl.locale === 'es' ? 'spanish' : 'english'}/>
|
||||
<Language isDesktop={true}/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -135,6 +135,22 @@ exports[`rendering of the GovernmentBanner checks if component renders 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</DocumentFragment>
|
||||
|
|
|
@ -140,6 +140,22 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -261,7 +277,24 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
|
|||
<li
|
||||
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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
import React from 'react';
|
||||
import {IntlContextConsumer, changeLocale} from 'gatsby-plugin-intl';
|
||||
|
||||
// Contexts:
|
||||
import {useFlags} from '../../contexts/FlagContext';
|
||||
|
||||
// @ts-ignore
|
||||
import languageIcon from '/node_modules/uswds/dist/img/usa-icons/language.svg';
|
||||
import * as styles from './Language.module.scss';
|
||||
|
@ -24,9 +21,8 @@ interface ILanguageProps {
|
|||
* @return {JSX.Element | null}
|
||||
*/
|
||||
const Language = ({isDesktop}:ILanguageProps) => {
|
||||
const flags = useFlags();
|
||||
|
||||
return 'sp' in flags ? (
|
||||
return (
|
||||
<div className={isDesktop ? styles.languageContainer : styles.languageContainerMobile}>
|
||||
<img className={styles.languageIcon} src={languageIcon} alt={'language icon for selecting language'}/>
|
||||
<IntlContextConsumer>
|
||||
|
@ -44,7 +40,7 @@ const Language = ({isDesktop}:ILanguageProps) => {
|
|||
}
|
||||
</IntlContextConsumer>
|
||||
</div>
|
||||
) : null;
|
||||
)
|
||||
};
|
||||
|
||||
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 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 englishJson = require('./es_translated_final.json');
|
||||
const englishJson = require('./es_4.12.22-translated-final.json');
|
||||
|
||||
// placeholder for fixed es json file
|
||||
const fixedEs = {};
|
||||
|
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
<li
|
||||
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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
<li
|
||||
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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
<li
|
||||
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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
<li
|
||||
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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
<li
|
||||
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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
<li
|
||||
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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
@ -140,6 +140,22 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -261,7 +277,24 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
<li
|
||||
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>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
Loading…
Add table
Reference in a new issue