feat(@clayui/language-picker): LPD-45714 Add defaultLocaleId to the API

Author: veroglez

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

@@ -161,6 +161,26 @@ describe('ClayLanguagePicker', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders the Default label in the correct default locale', () => {
+		render(
+			<ClayLanguagePicker
+				defaultLocaleId="nl_NL"
+				locales={locales}
+				spritemap="/path/to/svg"
+				translations={{
+					'es-ES': {total: 4, translated: 2},
+					'fr-FR': {total: 4, translated: 4},
+				}}
+			/>
+		);
+
+		fireEvent.click(screen.getByRole('combobox'));
+
+		const nlOption = screen.getByRole('option', {name: /Dutch/});
+
+		expect(nlOption).toHaveTextContent('Default');
+	});
+
 	it('renders different labels for translations', () => {
 		render(
 			<ClayLanguagePicker

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

@@ -54,6 +54,11 @@ type Props = {
 	 */
 	defaultActive?: boolean;
 
+	/**
+	 * The default locale id.
+	 */
+	defaultLocaleId?: React.Key;
+
 	/**
 	 * The initial selected locale id (uncontrolled).
 	 */
@@ -112,20 +117,20 @@ type Props = {
 };
 
 const TranslationLabel = ({
-	defaultLanguage,
+	defaultLocaleId,
 	locale,
 	messages,
 	translation,
 }: {
-	defaultLanguage: Item;
+	defaultLocaleId: React.Key;
 	messages: Messages;
 	locale: Item;
 	translation: Translation;
 }) => {
 	let displayType: DisplayType = 'warning';
 	let label = messages.untranslated;
 
-	if (locale.label === defaultLanguage?.label) {
+	if (locale.id === defaultLocaleId) {
 		displayType = 'info';
 		label = messages.default;
 	} else if (translation) {
@@ -217,6 +222,7 @@ const ClayLanguagePicker = ({
 	active,
 	classNamesTrigger,
 	defaultActive = false,
+	defaultLocaleId,
 	defaultSelectedLocaleId,
 	hideTriggerText,
 	id,
@@ -236,7 +242,6 @@ const ClayLanguagePicker = ({
 	spritemap,
 	translations = {},
 }: Props) => {
-	const defaultLanguage = locales[0];
 	const hasTranslations = Object.keys(translations).length;
 	const selectedLocale = locales.find(({id}) => id === selectedLocaleId);
 
@@ -283,7 +288,10 @@ const ClayLanguagePicker = ({
 								<ClayLayout.ContentCol containerElement="span">
 									<ClayLayout.ContentSection>
 										<TranslationLabel
-											defaultLanguage={defaultLanguage!}
+											defaultLocaleId={
+												defaultLocaleId ||
+												locales[0]!.id
+											}
 											locale={locale}
 											messages={messages}
 											translation={