(fix) O3-5831: Fix patient banner building blocks at narrow widths

Author: solomonfortune

packages/framework/esm-styleguide/src/patient-banner/contact-details/patient-banner-contact-details.module.scss

@@ -8,6 +8,8 @@
   color: $text-02;
   width: 100%;
   border-top: 1px solid $ui-03;
+  container-type: inline-size;
+  container-name: contact-details;
 }
 
 .heading {
@@ -22,6 +24,10 @@
   &:first-child {
     border-bottom: 1px solid $ui-03;
   }
+
+  @container contact-details (max-width: 40rem) {
+    flex-direction: column;
+  }
 }
 
 .row > .col {
@@ -31,6 +37,13 @@
   &:nth-of-type(2n + 1) {
     border-right: 1px solid $ui-03;
   }
+
+  @container contact-details (max-width: 40rem) {
+    &:nth-of-type(2n + 1) {
+      border-right: none;
+      border-bottom: 1px solid $ui-03;
+    }
+  }
 }
 
 .row li {
@@ -39,7 +52,7 @@
 
 .relationship {
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: row wrap;
 }
 
 .relationship div {

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

@@ -1,4 +1,5 @@
 /** @module @category UI */
+import classNames from 'classnames';
 import React from 'react';
 import { FormLabel, Tag } from '@carbon/react';
 import { useConfig, usePrimaryIdentifierCode } from '@openmrs/esm-react-utils';
@@ -14,6 +15,8 @@ interface IdentifiersProps {
 interface PatientBannerPatientIdentifiersProps {
   identifiers: fhir.Identifier[] | undefined;
   showIdentifierLabel: boolean;
+  showLeadingSeparator?: boolean;
+  showAllIdentifiers?: boolean;
 }
 
 function PrimaryIdentifier({ showIdentifierLabel, type, value }: IdentifiersProps) {
@@ -39,30 +42,35 @@ function SecondaryIdentifier({ showIdentifierLabel, type, value }: IdentifiersPr
 export function PatientBannerPatientIdentifiers({
   identifiers,
   showIdentifierLabel,
+  showLeadingSeparator = false,
+  showAllIdentifiers = true,
 }: PatientBannerPatientIdentifiersProps) {
   const { excludePatientIdentifierCodeTypes } = useConfig<StyleguideConfigObject>();
   const { primaryIdentifierCode } = usePrimaryIdentifierCode();
 
-  const filteredIdentifiers =
+  const filteredIdentifiers = (
     identifiers?.filter((identifier) => {
       const code = identifier.type?.coding?.[0]?.code;
       return code && !excludePatientIdentifierCodeTypes?.uuids.includes(code);
-    }) ?? [];
+    }) ?? []
+  ).filter((identifier) => (showAllIdentifiers ? true : identifier.type?.coding?.[0]?.code === primaryIdentifierCode));
 
   return (
     <>
       {filteredIdentifiers?.length
         ? filteredIdentifiers.map(({ value, type }, index) => (
-            <React.Fragment key={value}>
-              <span className={styles.identifier}>
-                {type?.coding?.[0]?.code === primaryIdentifierCode ? (
-                  <PrimaryIdentifier showIdentifierLabel={showIdentifierLabel} type={type} value={value} />
-                ) : (
-                  <SecondaryIdentifier showIdentifierLabel={showIdentifierLabel} type={type} value={value} />
-                )}
-              </span>
-              {index < filteredIdentifiers.length - 1 && <span className={styles.separator}>&middot;</span>}
-            </React.Fragment>
+            <span
+              key={value}
+              className={classNames(styles.identifier, {
+                [styles.withSeparator]: index > 0 || showLeadingSeparator,
+              })}
+            >
+              {type?.coding?.[0]?.code === primaryIdentifierCode ? (
+                <PrimaryIdentifier showIdentifierLabel={showIdentifierLabel} type={type} value={value} />
+              ) : (
+                <SecondaryIdentifier showIdentifierLabel={showIdentifierLabel} type={type} value={value} />
+              )}
+            </span>
           ))
         : ''}
     </>

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

@@ -17,6 +17,7 @@ interface PatientBannerPatientInfoProps {
    * affect how / if they should be rendered
    */
   renderedFrom?: string;
+  showAllIdentifiers?: boolean;
 }
 
 type Gender = 'female' | 'male' | 'other' | 'unknown';
@@ -58,7 +59,11 @@ const getGender = (gender: string) => {
   };
 };
 
-export function PatientBannerPatientInfo({ patient, renderedFrom }: PatientBannerPatientInfoProps) {
+export function PatientBannerPatientInfo({
+  patient,
+  renderedFrom,
+  showAllIdentifiers = true,
+}: PatientBannerPatientInfoProps) {
   const name = getPatientName(patient);
   const genderInfo = patient?.gender && getGender(patient.gender);
 
@@ -87,12 +92,15 @@ export function PatientBannerPatientInfo({ patient, renderedFrom }: PatientBanne
         {patient.birthDate && (
           <>
             <span>{age(patient.birthDate)}</span>
-            <span className={styles.separator}>&middot;</span>
-            <span>{formatPartialDate(patient.birthDate, { time: false })}</span>
-            <span className={styles.separator}>&middot;</span>
+            <span className={styles.withSeparator}>{formatPartialDate(patient.birthDate, { time: false })}</span>
           </>
         )}
-        <PatientBannerPatientIdentifiers identifiers={patient.identifier} showIdentifierLabel />
+        <PatientBannerPatientIdentifiers
+          identifiers={patient.identifier}
+          showIdentifierLabel
+          showLeadingSeparator={Boolean(patient.birthDate)}
+          showAllIdentifiers={showAllIdentifiers}
+        />
         <ExtensionSlot className={styles.extensionSlot} name="patient-banner-bottom-slot" state={extensionState} />
       </div>
     </div>

packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss

@@ -13,6 +13,13 @@
   background-color: $ui-01;
 }
 
+.withSeparator {
+  &::before {
+    content: '\00B7';
+    margin: 0 layout.$spacing-02;
+  }
+}
+
 .patientBanner {
   display: flex;
 }
@@ -22,6 +29,7 @@
   color: colors.$gray-100;
   font-weight: 600;
   margin-right: layout.$spacing-02;
+  overflow-wrap: anywhere;
 }
 
 .patientAvatar {
@@ -43,6 +51,7 @@
   flex-direction: column;
   padding: layout.$spacing-05 layout.$spacing-03 layout.$spacing-05 0;
   width: 100%;
+  min-width: 0;
 }
 
 .demographics {

packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx

@@ -13,13 +13,10 @@ export interface PatientPhotoProps {
   alt?: string;
 }
 
-function getInitials(name: string, maxInitials = 3): string {
-  return name
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, maxInitials)
-    .map((part) => part[0])
-    .join('');
+function getInitials(name: string, maxInitials = 2): string {
+  const parts = name.split(/\s+/).filter(Boolean);
+  const selected = parts.length > maxInitials ? [parts[0], parts[parts.length - 1]] : parts;
+  return selected.map((part) => part[0]).join('');
 }
 
 /**

packages/framework/esm-styleguide/src/patient-photo/patient-photo.test.tsx

@@ -184,4 +184,17 @@ describe('PatientPhoto', () => {
     // Restore the original Image constructor
     window.Image = originalImage;
   });
+
+  it('caps initials at two characters, using first and last name parts, for multi-part names', () => {
+    mockUsePatientPhoto.mockReturnValue({
+      isLoading: false,
+      data: null,
+      error: undefined,
+    });
+
+    render(<PatientPhoto patientUuid={patientUuid} patientName="Wanjiru Achieng Nakato" />);
+
+    const avatar = screen.getByTitle('Wanjiru Achieng Nakato');
+    expect(avatar).toHaveTextContent('WN');
+  });
 });