feat(@clayui/language-picker): LPD-45714 Rename labels to messages

Author: veroglez

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

@@ -89,15 +89,15 @@ describe('ClayLanguagePicker', () => {
 	it('renders with custom labels', () => {
 		const {container} = render(
 			<ClayLanguagePicker
-				labels={{
+				locales={locales}
+				messages={{
 					default: 'Default Label',
 					option: 'Option Label',
 					translated: 'Translated Label',
 					translating: 'Translating Label',
 					trigger: 'Trigger Label',
 					untranslated: 'Untranslated Label',
 				}}
-				locales={locales}
 				onSelectedLocaleChange={onSelectedLocaleChange}
 				selectedLocale={locales[0]!}
 				spritemap="/path/to/svg"

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

@@ -22,7 +22,7 @@ type Item = {
 	symbol: string;
 };
 
-type Labels = {
+type Messages = {
 	default: string;
 	option: string;
 	trigger: string;
@@ -61,9 +61,9 @@ type Props = {
 	id?: string;
 
 	/**
-	 * Labels for the component
+	 * Messages for the component
 	 */
-	labels?: Labels;
+	messages?: Messages;
 
 	/**
 	 * List of locales to allow localization for
@@ -103,37 +103,37 @@ type Props = {
 
 const TranslationLabel = ({
 	defaultLanguage,
-	labels,
 	locale,
+	messages,
 	translation,
 }: {
 	defaultLanguage: Item;
-	labels: Labels;
+	messages: Messages;
 	locale: Item;
 	translation: Translation;
 }) => {
 	let displayType: DisplayType = 'warning';
-	let label = labels.untranslated;
+	let label = messages.untranslated;
 
 	if (locale.label === defaultLanguage?.label) {
 		displayType = 'info';
-		label = labels.default;
+		label = messages.default;
 	} else if (translation) {
 		const {total, translated} = translation;
 
 		if (total && total === translated) {
 			displayType = 'success';
-			label = labels.translated;
+			label = messages.translated;
 		} else {
 			displayType = 'secondary';
-			label = sub(labels.translating, [translated, total]);
+			label = sub(messages.translating, [translated, total]);
 		}
 	}
 
 	return (
 		<>
 			<span className="sr-only">
-				{sub(labels.option, [
+				{sub(messages.option, [
 					locale.displayName || locale.label,
 					label,
 				])}
@@ -195,18 +195,18 @@ const Trigger = React.forwardRef<HTMLButtonElement>(
 Trigger.displayName = 'Trigger';
 
 const ClayLanguagePicker = ({
-	labels = {
+	active,
+	classNamesTrigger,
+	hideTriggerText,
+	id,
+	messages = {
 		default: 'Default',
 		option: '{0} language: {1}.',
 		translated: 'Translated',
 		translating: 'Translating {0}/{1}',
 		trigger: 'Select a language, current language: {0}.',
 		untranslated: 'Untranslated',
 	},
-	active,
-	classNamesTrigger,
-	hideTriggerText,
-	id,
 	locales,
 	onActiveChange,
 	onSelectedLocaleChange,
@@ -221,7 +221,7 @@ const ClayLanguagePicker = ({
 	return (
 		<Picker
 			active={active}
-			ariaLabelTrigger={sub(labels.trigger, [
+			ariaLabelTrigger={sub(messages.trigger, [
 				selectedLocale.displayName || selectedLocale.label,
 			])}
 			as={Trigger}
@@ -263,8 +263,8 @@ const ClayLanguagePicker = ({
 									<ClayLayout.ContentSection>
 										<TranslationLabel
 											defaultLanguage={defaultLanguage!}
-											labels={labels}
 											locale={locale}
+											messages={messages}
 											translation={
 												translations[locale.label]!
 											}