feat(@clayui/language-picker): LPD-45714 Add different labels to indicate the translation

Author: veroglez

packages/clay-language-picker/src/__tests__/index.tsx

@@ -92,6 +92,7 @@ describe('ClayLanguagePicker', () => {
 				labels={{
 					default: 'Default Label',
 					translated: 'Translated Label',
+					translating: 'Translating Label',
 					trigger: 'Trigger Label',
 					untranslated: 'Untranslated Label',
 				}}
@@ -127,8 +128,8 @@ describe('ClayLanguagePicker', () => {
 				selectedLocale={locales[0]!}
 				spritemap="/path/to/svg"
 				translations={{
-					'en-US': 'Apple',
-					'es-ES': 'Manzana',
+					'es-ES': {total: 4, translated: 2},
+					'fr-FR': {total: 4, translated: 4},
 				}}
 			/>
 		);
@@ -150,6 +151,33 @@ describe('ClayLanguagePicker', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders different labels for translations', () => {
+		render(
+			<ClayLanguagePicker
+				locales={locales}
+				onSelectedLocaleChange={onSelectedLocaleChange}
+				selectedLocale={locales[0]!}
+				spritemap="/path/to/svg"
+				translations={{
+					'es-ES': {total: 4, translated: 2},
+					'fr-FR': {total: 4, translated: 4},
+				}}
+			/>
+		);
+
+		fireEvent.click(screen.getByRole('combobox'));
+
+		const esOption = screen.getByRole('option', {name: /es-ES/});
+		const enOption = screen.getByRole('option', {name: /en-US/});
+		const frOption = screen.getByRole('option', {name: /fr-FR/});
+		const nlOption = screen.getByRole('option', {name: /nl-NL/});
+
+		expect(enOption).toHaveTextContent('Default');
+		expect(esOption).toHaveTextContent('Translating 2/4');
+		expect(frOption).toHaveTextContent('Translated');
+		expect(nlOption).toHaveTextContent('Untranslated');
+	});
+
 	it('calls onSelectedLocaleChange when a language is selected', () => {
 		render(
 			<ClayLanguagePicker

packages/clay-language-picker/src/index.tsx

@@ -12,15 +12,27 @@ import {InternalDispatch, sub} from '@clayui/shared';
 import classNames from 'classnames';
 import React from 'react';
 
+type DisplayType = 'info' | 'secondary' | 'success' | 'warning';
+
 type Item = {
 	href?: string;
 	id: string;
 	label: string;
 	symbol: string;
 };
 
+type Labels = {
+	default: string;
+	trigger: string;
+	translated: string;
+	translating: string;
+	untranslated: string;
+};
+
+type Translation = {total: number; translated: number};
+
 type Translations = {
-	[key: string]: string;
+	[key: string]: Translation;
 };
 
 type Props = {
@@ -49,12 +61,7 @@ type Props = {
 	/**
 	 * Labels for the component
 	 */
-	labels?: {
-		default: string;
-		trigger: string;
-		translated: string;
-		untranslated: string;
-	};
+	labels?: Labels;
 
 	/**
 	 * List of locales to allow localization for
@@ -93,6 +100,40 @@ type Props = {
 	translations?: Translations;
 };
 
+const TranslationLabel = ({
+	defaultLanguage,
+	labels,
+	locale,
+	translation,
+}: {
+	defaultLanguage: Item;
+	labels: Labels;
+	locale: Item;
+	translation: Translation;
+}) => {
+	let displayType: DisplayType = 'warning';
+	let label = labels.untranslated;
+
+	if (locale.label === defaultLanguage?.label) {
+		displayType = 'info';
+		label = labels.default;
+	} else if (translation) {
+		const {total, translated} = translation;
+
+		if (total && total === translated) {
+			displayType = 'success';
+			label = labels.translated;
+		} else {
+			displayType = 'secondary';
+			label = sub(labels.translating, [translated, total]);
+		}
+	}
+
+	return <ClayLabel displayType={displayType}>{label}</ClayLabel>;
+};
+
+TranslationLabel.displayName = 'Label';
+
 const Trigger = React.forwardRef<HTMLButtonElement>(
 	(
 		{
@@ -144,6 +185,7 @@ const ClayLanguagePicker = ({
 	labels = {
 		default: 'Default',
 		translated: 'Translated',
+		translating: 'Translating {0}/{1}',
 		trigger: 'Select a language, current language: {0}.',
 		untranslated: 'Untranslated',
 	},
@@ -201,23 +243,14 @@ const ClayLanguagePicker = ({
 							{hasTranslations ? (
 								<ClayLayout.ContentCol containerElement="span">
 									<ClayLayout.ContentSection>
-										<ClayLabel
-											displayType={
-												locale.label ===
-												defaultLanguage?.label
-													? 'info'
-													: translations[locale.label]
-													? 'success'
-													: 'warning'
+										<TranslationLabel
+											defaultLanguage={defaultLanguage!}
+											labels={labels}
+											locale={locale}
+											translation={
+												translations[locale.label]!
 											}
-										>
-											{locale.label ===
-											defaultLanguage?.label
-												? labels.default
-												: translations[locale.label]
-												? labels.translated
-												: labels.untranslated}
-										</ClayLabel>
+										/>
 									</ClayLayout.ContentSection>
 								</ClayLayout.ContentCol>
 							) : null}

packages/clay-language-picker/stories/LanguagePicker.stories.tsx

@@ -68,8 +68,8 @@ Default.args = {
 export const LanguagePickerWithTranslations = (args: any) => {
 	const [selectedLocale, setSelectedLocale] = useState<any>(locales[0]);
 	const translations = {
-		'en-US': 'Apple',
-		'es-ES': 'Manzana',
+		'ca-ES': {total: 4, translated: 2},
+		'nl-NL': {total: 4, translated: 4},
 	};
 
 	return (