feat(@clayui/language-picker): LPD-45714 Replace displayName by name

Author: veroglez

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

@@ -15,27 +15,27 @@ import React from 'react';
 
 const locales = [
 	{
-		displayName: 'English (United States)',
 		id: 'en_US',
 		label: 'en-US',
+		name: 'English (United States)',
 		symbol: 'en-us',
 	},
 	{
-		displayName: 'Spanish (Spain)',
 		id: 'es_ES',
 		label: 'es-ES',
+		name: 'Spanish (Spain)',
 		symbol: 'es-es',
 	},
 	{
-		displayName: 'French (France)',
 		id: 'fr_FR',
 		label: 'fr-FR',
+		name: 'French (France)',
 		symbol: 'fr-fr',
 	},
 	{
-		displayName: 'Dutch (Netherlands)',
 		id: 'nl_NL',
 		label: 'nl-NL',
+		name: 'Dutch (Netherlands)',
 		symbol: 'nl-nl',
 	},
 ];

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

@@ -15,9 +15,9 @@ import {Option, Picker} from '../picker';
 type DisplayType = 'info' | 'secondary' | 'success' | 'warning';
 
 type Item = {
-	displayName?: string;
 	id: string;
 	label: string;
+	name?: string;
 	symbol: string;
 };
 
@@ -171,7 +171,7 @@ const Trigger = React.forwardRef<HTMLButtonElement>(
 			<button
 				{...otherProps}
 				aria-label={sub(triggerMessage, [
-					selectedItem?.displayName || selectedItem?.label,
+					selectedItem?.name || selectedItem?.label,
 				])}
 				className={classNames(
 					classNamesTrigger,
@@ -255,7 +255,7 @@ const ClayLanguagePicker = ({
 				return (
 					<Option
 						aria-label={sub(messages.option, [
-							locale.displayName || locale.label,
+							locale.name || locale.label,
 							translationLabel.label,
 						])}
 						key={locale.id}
@@ -292,8 +292,7 @@ const ClayLanguagePicker = ({
 
 											<span className="sr-only">
 												{sub(messages.option, [
-													locale.displayName ||
-														locale.label,
+													locale.name || locale.label,
 													translationLabel.label,
 												])}
 											</span>

packages/clay-core/stories/LanguagePicker.stories.tsx

@@ -14,27 +14,27 @@ export default {
 
 const locales = [
 	{
-		displayName: 'English (United States)',
 		id: 'en_US',
 		label: 'en-US',
+		name: 'English (United States)',
 		symbol: 'en-us',
 	},
 	{
-		displayName: 'Arabic (Saudi Arabia)',
 		id: 'ar_SA',
 		label: 'ar-SA',
+		name: 'Arabic (Saudi Arabia)',
 		symbol: 'ar-sa',
 	},
 	{
-		displayName: 'Catalan (Spain)',
 		id: 'ca_ES',
 		label: 'ca-ES',
+		name: 'Catalan (Spain)',
 		symbol: 'ca-es',
 	},
 	{
-		displayName: 'Dutch (Netherlands)',
 		id: 'nl_NL',
 		label: 'nl-NL',
+		name: 'Dutch (Netherlands)',
 		symbol: 'nl-nl',
 	},
 ];