feat(@clayui/language-picker): LPD-45714 Add translations

Author: veroglez

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

@@ -140,3 +140,31 @@ exports[`ClayLanguagePicker renders with custom labels 1`] = `
   </button>
 </div>
 `;
+
+exports[`ClayLanguagePicker renders with translations 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: en-US."
+    class="form-control-select btn btn-secondary"
+    role="combobox"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      class="inline-item-before"
+    >
+      <svg
+        class="lexicon-icon lexicon-icon-en-us"
+        role="presentation"
+      >
+        <use
+          href="/path/to/svg#en-us"
+        />
+      </svg>
+    </span>
+  </button>
+</div>
+`;

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

@@ -119,6 +119,23 @@ describe('ClayLanguagePicker', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders with translations', () => {
+		const {container} = render(
+			<ClayLanguagePicker
+				locales={locales}
+				onSelectedLocaleChange={onSelectedLocaleChange}
+				selectedLocale={locales[0]!}
+				spritemap="/path/to/svg"
+				translations={{
+					'en-US': 'Apple',
+					'es-ES': 'Manzana',
+				}}
+			/>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
 	it('calls onSelectedLocaleChange when a language is selected', () => {
 		render(
 			<ClayLanguagePicker

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

@@ -6,6 +6,7 @@
 import ClayButton from '@clayui/button';
 import {Option, Picker} from '@clayui/core';
 import ClayIcon from '@clayui/icon';
+import ClayLabel from '@clayui/label';
 import ClayLayout from '@clayui/layout';
 import {InternalDispatch, sub} from '@clayui/shared';
 import classNames from 'classnames';
@@ -18,6 +19,10 @@ type Item = {
 	symbol: string;
 };
 
+type Translations = {
+	[key: string]: string;
+};
+
 type Props = {
 	/**
 	 * Flag to indicate if the Picker is active or not (controlled).
@@ -75,6 +80,11 @@ type Props = {
 	 * Path to the location of the spritemap resource.
 	 */
 	spritemap?: string;
+
+	/**
+	 * Translations provided to the component to be used and modified by it
+	 */
+	translations?: Translations;
 };
 
 const Trigger = React.forwardRef<HTMLButtonElement>(
@@ -127,7 +137,11 @@ const ClayLanguagePicker = ({
 	selectedLocale,
 	small,
 	spritemap,
+	translations = {},
 }: Props) => {
+	const defaultLanguage = locales[0];
+	const hasTranslations = Object.keys(translations).length;
+
 	return (
 		<Picker
 			active={active}
@@ -163,6 +177,29 @@ const ClayLanguagePicker = ({
 									{locale.label}
 								</ClayLayout.ContentSection>
 							</ClayLayout.ContentCol>
+							{hasTranslations ? (
+								<ClayLayout.ContentCol containerElement="span">
+									<ClayLayout.ContentSection>
+										<ClayLabel
+											displayType={
+												locale.label ===
+												defaultLanguage?.label
+													? 'info'
+													: translations[locale.label]
+													? 'success'
+													: 'warning'
+											}
+										>
+											{locale.label ===
+											defaultLanguage?.label
+												? labels.default
+												: translations[locale.label]
+												? labels.translated
+												: labels.untranslated}
+										</ClayLabel>
+									</ClayLayout.ContentSection>
+								</ClayLayout.ContentCol>
+							) : null}
 						</ClayLayout.ContentRow>
 					</Option>
 				);

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

@@ -12,34 +12,34 @@ export default {
 	title: 'Design System/Components/LanguagePicker',
 };
 
-export const Default = (args: any) => {
-	const locales = [
-		{
-			displayName: 'English (United States)',
-			id: 'en_US',
-			label: 'en-US',
-			symbol: 'en-us',
-		},
-		{
-			displayName: 'Arabic (Saudi Arabia)',
-			id: 'ar_SA',
-			label: 'ar-SA',
-			symbol: 'ar-sa',
-		},
-		{
-			displayName: 'Catalan (Spain)',
-			id: 'ca_ES',
-			label: 'ca-ES',
-			symbol: 'ca-es',
-		},
-		{
-			displayName: 'Dutch (Netherlands)',
-			id: 'nl_NL',
-			label: 'nl-NL',
-			symbol: 'nl-nl',
-		},
-	];
+const locales = [
+	{
+		displayName: 'English (United States)',
+		id: 'en_US',
+		label: 'en-US',
+		symbol: 'en-us',
+	},
+	{
+		displayName: 'Arabic (Saudi Arabia)',
+		id: 'ar_SA',
+		label: 'ar-SA',
+		symbol: 'ar-sa',
+	},
+	{
+		displayName: 'Catalan (Spain)',
+		id: 'ca_ES',
+		label: 'ca-ES',
+		symbol: 'ca-es',
+	},
+	{
+		displayName: 'Dutch (Netherlands)',
+		id: 'nl_NL',
+		label: 'nl-NL',
+		symbol: 'nl-nl',
+	},
+];
 
+export const Default = (args: any) => {
 	const [selectedLocale, setSelectedLocale] = useState<any>(locales[0]);
 
 	return (
@@ -62,3 +62,32 @@ export const Default = (args: any) => {
 Default.args = {
 	small: false,
 };
+
+export const LanguagePickerWithTranslations = (args: any) => {
+	const [selectedLocale, setSelectedLocale] = useState<any>(locales[0]);
+	const translations = {
+		'en-US': 'Apple',
+		'es-ES': 'Manzana',
+	};
+
+	return (
+		<ClayLanguagePicker
+			id="languagePicker"
+			locales={locales}
+			onSelectedLocaleChange={(id) => {
+				const locale = locales.find((locale) => locale.id === id);
+
+				if (locale) {
+					setSelectedLocale(locale);
+				}
+			}}
+			selectedLocale={selectedLocale}
+			small={args.small}
+			translations={translations}
+		/>
+	);
+};
+
+LanguagePickerWithTranslations.args = {
+	small: false,
+};