@openmrs/esm-styleguide 6.0.1-pre.2569 → 6.0.1-pre.2575

package/.turbo/turbo-build.log

@@ -45,4 +45,4 @@ WARNING in webpack performance recommendations:
 You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
 For more info visit https://webpack.js.org/guides/code-splitting/
 
-webpack 5.88.0 compiled with 3 warnings in 29884 ms
+webpack 5.88.0 compiled with 3 warnings in 28662 ms

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-styleguide",
-  "version": "6.0.1-pre.2569",
+  "version": "6.0.1-pre.2575",
   "license": "MPL-2.0",
   "description": "The styleguide for OpenMRS SPA",
   "browser": "dist/openmrs-esm-styleguide.js",
@@ -63,12 +63,12 @@
     "rxjs": "6.x"
   },
   "devDependencies": {
-    "@openmrs/esm-error-handling": "6.0.1-pre.2569",
-    "@openmrs/esm-extensions": "6.0.1-pre.2569",
-    "@openmrs/esm-navigation": "6.0.1-pre.2569",
-    "@openmrs/esm-react-utils": "6.0.1-pre.2569",
-    "@openmrs/esm-state": "6.0.1-pre.2569",
-    "@openmrs/esm-translations": "6.0.1-pre.2569",
+    "@openmrs/esm-error-handling": "6.0.1-pre.2575",
+    "@openmrs/esm-extensions": "6.0.1-pre.2575",
+    "@openmrs/esm-navigation": "6.0.1-pre.2575",
+    "@openmrs/esm-react-utils": "6.0.1-pre.2575",
+    "@openmrs/esm-state": "6.0.1-pre.2575",
+    "@openmrs/esm-translations": "6.0.1-pre.2575",
     "@types/geopattern": "^1.2.9",
     "autoprefixer": "^9.8.8",
     "css-minimizer-webpack-plugin": "^1.2.0",

package/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>
           )}
 

package/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();
+  });
 });