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 2022-04-25 18:59:58 -04:00 committed by GitHub
parent 0cdc44aaab
commit 5b4f4af2a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 2146 additions and 31 deletions

View file

@ -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"

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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;

View file

@ -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

File diff suppressed because it is too large Load diff

View file

@ -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 = {};

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>