studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🌐(frontend) add language name to LanguagePicker

Browse Source 
The language picker were only showing the language
code, now it shows the language name.
This commit is contained in:
Anthony LC
2024-10-04 13:27:53 +02:00
committed by Anthony LC
parent fe391523c8
commit 8dd7671d1f
5 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts
View File

@@ -13,9 +13,11 @@ test.describe('Language', () => {
).toBeVisible(); ).toBeVisible();
const header = page.locator('header').first(); const header = page.locator('header').first();
await header.getByRole('combobox').getByText('EN').click(); await header.getByRole('combobox').getByText('English').click();
await header.getByRole('option', { name: 'FR' }).click(); await header.getByRole('option', { name: 'Français' }).click();
await expect(header.getByRole('combobox').getByText('FR')).toBeVisible(); await expect(
header.getByRole('combobox').getByText('Français'),
).toBeVisible();
await expect( await expect(
page.getByRole('button', { page.getByRole('button', {

3
src/frontend/apps/impress/src/features/language/LanguagePicker.tsx
View File

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
import styled from 'styled-components'; import styled from 'styled-components';
import { Box, Text } from '@/components/'; import { Box, Text } from '@/components/';
import { LANGUAGES_ALLOWED } from '@/i18n/conf';
import IconLanguage from './assets/icon-language.svg?url'; import IconLanguage from './assets/icon-language.svg?url';
@@ -49,7 +50,7 @@ export const LanguagePicker = () => {
$align="center" $align="center"
> >
<Image priority src={IconLanguage} alt={t('Language Icon')} /> <Image priority src={IconLanguage} alt={t('Language Icon')} />
<Text $theme="primary">{lang.toUpperCase()}</Text> <Text $theme="primary">{LANGUAGES_ALLOWED[lang]}</Text>
</Box> </Box>
), ),
})); }));

5
src/frontend/apps/impress/src/i18n/conf.ts
View File

@@ -1,3 +1,6 @@
export const LANGUAGES_ALLOWED = ['en', 'fr']; export const LANGUAGES_ALLOWED: { [key: string]: string } = {
en: 'English',
fr: 'Français',
};
export const LANGUAGE_LOCAL_STORAGE = 'impress-language'; export const LANGUAGE_LOCAL_STORAGE = 'impress-language';
export const BASE_LANGUAGE = 'fr'; export const BASE_LANGUAGE = 'fr';

2
src/frontend/apps/impress/src/i18n/initI18n.ts
View File

@@ -13,7 +13,7 @@ i18n
interpolation: { interpolation: {
escapeValue: false, escapeValue: false,
}, },
preload: LANGUAGES_ALLOWED, preload: Object.keys(LANGUAGES_ALLOWED),
nsSeparator: '||', nsSeparator: '||',
}) })
.catch(() => { .catch(() => {

4
src/frontend/apps/impress/src/i18n/utils.ts
View File

@@ -22,5 +22,7 @@ export const getLanguage = () => {
const language = splitLocaleCode(languageStore).language; const language = splitLocaleCode(languageStore).language;
return LANGUAGES_ALLOWED.includes(language) ? language : BASE_LANGUAGE; return Object.keys(LANGUAGES_ALLOWED).includes(language)
? language
: BASE_LANGUAGE;
}; };