feat(@clayui/language-picker): LPD-45714 Add prop to hide the trigger text

Author: veroglez

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

@@ -24,6 +24,11 @@ exports[`ClayLanguagePicker renders 1`] = `
         />
       </svg>
     </span>
+    <span
+      class="font-weight-normal mr-2"
+    >
+      en-US
+    </span>
   </button>
 </div>
 `;
@@ -52,6 +57,11 @@ exports[`ClayLanguagePicker renders a class name for the trigger 1`] = `
         />
       </svg>
     </span>
+    <span
+      class="font-weight-normal mr-2"
+    >
+      en-US
+    </span>
   </button>
 </div>
 `;
@@ -67,6 +77,39 @@ exports[`ClayLanguagePicker renders a small picker 1`] = `
     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>
+    <span
+      class="font-weight-normal mr-2"
+    >
+      en-US
+    </span>
+  </button>
+</div>
+`;
+
+exports[`ClayLanguagePicker renders hidding the trigger text 1`] = `
+<div>
+  <button
+    aria-activedescendant=""
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-label="Select a language, current language: en-US."
+    class="form-control-select hidden-label btn btn-secondary"
+    role="combobox"
+    tabindex="0"
+    type="button"
   >
     <span
       class="inline-item-before"
@@ -109,6 +152,11 @@ exports[`ClayLanguagePicker renders the picker with id 1`] = `
         />
       </svg>
     </span>
+    <span
+      class="font-weight-normal mr-2"
+    >
+      en-US
+    </span>
   </button>
 </div>
 `;
@@ -137,6 +185,11 @@ exports[`ClayLanguagePicker renders with custom labels 1`] = `
         />
       </svg>
     </span>
+    <span
+      class="font-weight-normal mr-2"
+    >
+      en-US
+    </span>
   </button>
 </div>
 `;
@@ -165,6 +218,11 @@ exports[`ClayLanguagePicker renders with translations 1`] = `
         />
       </svg>
     </span>
+    <span
+      class="font-weight-normal mr-2"
+    >
+      en-US
+    </span>
   </button>
 </div>
 `;

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

@@ -136,6 +136,20 @@ describe('ClayLanguagePicker', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('renders hidding the trigger text', () => {
+		const {container} = render(
+			<ClayLanguagePicker
+				hideTriggerText
+				locales={locales}
+				onSelectedLocaleChange={onSelectedLocaleChange}
+				selectedLocale={locales[0]!}
+				spritemap="/path/to/svg"
+			/>
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+
 	it('calls onSelectedLocaleChange when a language is selected', () => {
 		render(
 			<ClayLanguagePicker

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

@@ -35,6 +35,12 @@ type Props = {
 
 	classNamesTrigger?: string;
 
+	/**
+	 * Flag to hide the text in the trigger.
+	 */
+
+	hideTriggerText?: boolean;
+
 	/**
 	 * The id of the component.
 	 */
@@ -92,6 +98,7 @@ const Trigger = React.forwardRef<HTMLButtonElement>(
 		{
 			ariaLabelTrigger,
 			classNamesTrigger,
+			hideTriggerText,
 			selectedLocale,
 			small,
 			spritemap,
@@ -103,7 +110,13 @@ const Trigger = React.forwardRef<HTMLButtonElement>(
 			<ClayButton
 				{...otherProps}
 				aria-label={ariaLabelTrigger}
-				className={classNames(classNamesTrigger, 'form-control-select')}
+				className={classNames(
+					classNamesTrigger,
+					'form-control-select',
+					{
+						'hidden-label': hideTriggerText,
+					}
+				)}
 				displayType="secondary"
 				ref={ref}
 				size={small ? 'sm' : undefined}
@@ -114,6 +127,12 @@ const Trigger = React.forwardRef<HTMLButtonElement>(
 						symbol={selectedLocale.symbol}
 					/>
 				</span>
+
+				{!hideTriggerText ? (
+					<span className="font-weight-normal mr-2">
+						{selectedLocale.label}
+					</span>
+				) : null}
 			</ClayButton>
 		);
 	}
@@ -130,6 +149,7 @@ const ClayLanguagePicker = ({
 	},
 	active,
 	classNamesTrigger,
+	hideTriggerText,
 	id,
 	locales,
 	onActiveChange,
@@ -148,6 +168,7 @@ const ClayLanguagePicker = ({
 			ariaLabelTrigger={sub(labels.trigger, [selectedLocale.label])}
 			as={Trigger}
 			classNamesTrigger={classNamesTrigger}
+			hideTriggerText={hideTriggerText}
 			id={id}
 			items={locales}
 			onActiveChange={onActiveChange}

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

@@ -44,6 +44,7 @@ export const Default = (args: any) => {
 
 	return (
 		<ClayLanguagePicker
+			hideTriggerText={args.hideTriggerText}
 			id="languagePicker"
 			locales={locales}
 			onSelectedLocaleChange={(id) => {
@@ -60,6 +61,7 @@ export const Default = (args: any) => {
 };
 
 Default.args = {
+	hideTriggerText: false,
 	small: false,
 };
 
@@ -72,6 +74,7 @@ export const LanguagePickerWithTranslations = (args: any) => {
 
 	return (
 		<ClayLanguagePicker
+			hideTriggerText={args.hideTriggerText}
 			id="languagePicker"
 			locales={locales}
 			onSelectedLocaleChange={(id) => {
@@ -89,5 +92,6 @@ export const LanguagePickerWithTranslations = (args: any) => {
 };
 
 LanguagePickerWithTranslations.args = {
+	hideTriggerText: false,
 	small: false,
 };