(fix) Gender icons not showing in non-English locales (#1241)

* (fix) Gender icons not showing in non-English locales

Fixes an issue where gender icons would not show in non-English locales. With this fix, gender icons will now show in all locales.

* Add a test for the gender icon

packages/framework/esm-framework/docs/API.md

@@ -7054,7 +7054,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx:43](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx#L43)
+[packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx:54](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx#L54)
 
 ___
 

packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx

@@ -35,14 +35,25 @@ const GenderIcon = ({ gender }: GenderIconProps) => {
   return <IconComponent fill="#525252" />;
 };
 
-const getGender = (gender: string): string => {
-  const key = gender.toLowerCase() as Gender;
-  return getCoreTranslation(key, gender);
+const GENDER_MAP = {
+  male: 'Male',
+  female: 'Female',
+  other: 'Other',
+  unknown: 'Unknown',
+} as const;
+
+const getGender = (gender: string) => {
+  const normalizedGender = gender.toLowerCase() as Gender;
+  const iconKey = GENDER_MAP[normalizedGender] ?? 'Unknown';
+  return {
+    displayText: getCoreTranslation(normalizedGender, gender),
+    iconKey,
+  };
 };
 
 export function PatientBannerPatientInfo({ patient }: PatientBannerPatientInfoProps) {
   const name = `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0]?.family}`;
-  const gender = patient?.gender && getGender(patient.gender);
+  const genderInfo = patient?.gender && getGender(patient.gender);
 
   const extensionState = useMemo(() => ({ patientUuid: patient.id, patient }), [patient.id, patient]);
 
@@ -52,10 +63,10 @@ export function PatientBannerPatientInfo({ patient }: PatientBannerPatientInfoPr
         <div className={styles.flexRow}>
           <span className={styles.patientName}>{name}</span>
 
-          {gender && (
+          {genderInfo && (
             <div className={styles.gender}>
-              <GenderIcon gender={gender as keyof typeof GENDER_ICONS} />
-              <span>{gender}</span>
+              <GenderIcon gender={genderInfo.iconKey} />
+              <span>{genderInfo.displayText}</span>
             </div>
           )}
 

packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.test.tsx

@@ -74,4 +74,16 @@ describe('PatientBannerPatientInfo', () => {
     expect(screen.getByText(/national id/i)).toBeInTheDocument();
     expect(screen.getByText(/123456789/i)).toBeInTheDocument();
   });
+
+  it('renders the correct gender icon based on patient gender', () => {
+    render(<PatientBannerPatientInfo patient={mockPatient} />);
+
+    expect(screen.getByText('', { selector: 'use[href="#omrs-icon-gender-male"]' })).toBeInTheDocument();
+
+    const patientWithUnknownGender = { ...mockPatient, gender: 'unknown' };
+
+    render(<PatientBannerPatientInfo patient={patientWithUnknownGender} />);
+
+    expect(screen.getByText('', { selector: 'use[href="#omrs-icon-gender-unknown"]' })).toBeInTheDocument();
+  });
 });