(feat) O3-4160: Patient header redesign

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

@@ -695,7 +695,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/icons/icons.tsx:648](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L648)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:664](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L664)
 
 ___
 
@@ -1173,7 +1173,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/icons/icons.tsx:630](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L638)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:638](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L638)
 
 ___
 
@@ -1233,7 +1233,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/icons/icons.tsx:635](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L643)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:643](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L643)
 
 ___
 
@@ -1427,7 +1427,7 @@ Note this is an alias for ListCheckedIcon
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/icons/icons.tsx:642](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L650)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:650](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L650)
 
 ___
 
@@ -1549,7 +1549,7 @@ This is a utility type for custom icons that use the svg-sprite-loader to bundle
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/icons/icons.tsx:656](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L656)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:672](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L672)
 
 ___
 
@@ -1815,7 +1815,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/icons/icons.tsx:639](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L655)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:655](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L655)
 
 ___
 
@@ -1899,7 +1899,7 @@ Note this is an alias for ShoppingCartArrowDownIcon
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/icons/icons.tsx:654](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L662)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:662](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L662)
 
 ___
 
@@ -1955,9 +1955,10 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/icons/icons.tsx:471](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L627)
+[packages/framework/esm-styleguide/src/icons/icons.tsx:627](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/icons/icons.tsx#L627)
 
 ___
+
 ### TableIcon
 
 • `Const` **TableIcon**: `MemoExoticComponent`<`ForwardRefExoticComponent`<[`IconProps`](API.md#iconprops) & `RefAttributes`<`SVGSVGElement`\>\>\>
@@ -6718,7 +6719,7 @@ invalid key to this function will result in a type error.
 
 | Name | Type | Description |
 | :------ | :------ | :------ |
-| `key` | ``"error"`` \| ``"change"`` \| ``"close"`` \| ``"other"`` \| ``"actions"`` \| ``"address"`` \| ``"age"`` \| ``"cancel"`` \| ``"confirm"`` \| ``"contactAdministratorIfIssuePersists"`` \| ``"contactDetails"`` \| ``"errorCopy"`` \| ``"female"`` \| ``"hideDetails"`` \| ``"loading"`` \| ``"male"`` \| ``"patientIdentifierSticker"`` \| ``"patientLists"`` \| ``"print"`` \| ``"printError"`` \| ``"printErrorExplainer"`` \| ``"printIdentifierSticker"`` \| ``"printing"`` \| ``"relationships"`` \| ``"resetOverrides"`` \| ``"scriptLoadingFailed"`` \| ``"scriptLoadingError"`` \| ``"seeMoreLists"`` \| ``"sex"`` \| ``"showDetails"`` \| ``"unknown"`` \| ``"closeAllOpenedWorkspaces"`` \| ``"closingAllWorkspacesPromptBody"`` \| ``"closingAllWorkspacesPromptTitle"`` \| ``"discard"`` \| ``"hide"`` \| ``"maximize"`` \| ``"minimize"`` \| ``"openAnyway"`` \| ``"unsavedChangesInOpenedWorkspace"`` \| ``"unsavedChangesInWorkspace"`` \| ``"unsavedChangesTitleText"`` \| ``"workspaceHeader"`` \| ``"address1"`` \| ``"address2"`` \| ``"address3"`` \| ``"address4"`` \| ``"address5"`` \| ``"address6"`` \| ``"city"`` \| ``"cityVillage"`` \| ``"country"`` \| ``"countyDistrict"`` \| ``"postalCode"`` \| ``"state"`` \| ``"stateProvince"`` | - |
+| `key` | ``"error"`` \| ``"change"`` \| ``"close"`` \| ``"other"`` \| ``"actions"`` \| ``"address"`` \| ``"age"`` \| ``"cancel"`` \| ``"confirm"`` \| ``"contactAdministratorIfIssuePersists"`` \| ``"contactDetails"`` \| ``"errorCopy"`` \| ``"female"`` \| ``"loading"`` \| ``"male"`` \| ``"patientIdentifierSticker"`` \| ``"patientLists"`` \| ``"print"`` \| ``"printError"`` \| ``"printErrorExplainer"`` \| ``"printIdentifierSticker"`` \| ``"printing"`` \| ``"relationships"`` \| ``"resetOverrides"`` \| ``"scriptLoadingFailed"`` \| ``"scriptLoadingError"`` \| ``"seeMoreLists"`` \| ``"sex"`` \| ``"showLess"`` \| ``"showMore"`` \| ``"unknown"`` \| ``"closeAllOpenedWorkspaces"`` \| ``"closingAllWorkspacesPromptBody"`` \| ``"closingAllWorkspacesPromptTitle"`` \| ``"discard"`` \| ``"hide"`` \| ``"maximize"`` \| ``"minimize"`` \| ``"openAnyway"`` \| ``"unsavedChangesInOpenedWorkspace"`` \| ``"unsavedChangesInWorkspace"`` \| ``"unsavedChangesTitleText"`` \| ``"workspaceHeader"`` \| ``"address1"`` \| ``"address2"`` \| ``"address3"`` \| ``"address4"`` \| ``"address5"`` \| ``"address6"`` \| ``"city"`` \| ``"cityVillage"`` \| ``"country"`` \| ``"countyDistrict"`` \| ``"district"`` \| ``"postalCode"`` \| ``"state"`` \| ``"stateProvince"`` | - |
 | `defaultText?` | `string` | - |
 | `options?` | `Omit`<`TOptions`<`StringMap`\>, ``"defaultValue"`` \| ``"ns"``\> | Object passed to the i18next `t` function. See https://www.i18next.com/translation-function/essentials#overview-options           for more information. `ns` and `defaultValue` are already set and may not be used. |
 
@@ -6850,7 +6851,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx:13](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx#L13)
+[packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx:41](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx#L41)
 
 ___
 
@@ -6870,7 +6871,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx:14](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx#L14)
+[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)
 
 ___
 
@@ -6898,9 +6899,7 @@ ___
 
 ▸ **PatientPhoto**(`__namedParameters`): `Element`
 
-A component which displays the patient photo. If there is no photo, it will display
-a generated avatar. The default size is 80px. Set the size prop to 'small' to display
-a 48px avatar.
+A component which displays the patient photo https://zeroheight.com/23a080e38/p/6663f3-patient-header. If there is no photo, it will display a generated avatar. The default size is 56px.
 
 #### Parameters
 
@@ -6914,7 +6913,7 @@ a 48px avatar.
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx:18](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx#L18)
+[packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx:21](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx#L21)
 
 ___
 

packages/framework/esm-framework/docs/interfaces/PatientBannerPatientInfoProps.md

@@ -16,4 +16,4 @@
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx:11](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx#L11)
+[packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx:12](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx#L12)

packages/framework/esm-framework/docs/interfaces/PatientPhotoProps.md

@@ -18,7 +18,7 @@
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx:8](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx#L8)
+[packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx:12](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx#L12)
 
 ___
 
@@ -28,7 +28,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx:9](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx#L9)
+[packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx:13](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx#L13)
 
 ___
 
@@ -38,4 +38,4 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx:10](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx#L10)
+[packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx:15](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-photo/patient-photo.component.tsx#L15)

packages/framework/esm-styleguide/src/patient-banner/contact-details/patient-banner-toggle-contact-details-button.component.tsx

@@ -26,9 +26,7 @@ export function PatientBannerToggleContactDetailsButton({
       onClick={toggleContactDetails}
       renderIcon={showContactDetails ? ChevronUpIcon : ChevronDownIcon}
     >
-      {showContactDetails
-        ? getCoreTranslation('hideDetails', 'Hide details')
-        : getCoreTranslation('showDetails', 'Show details')}
+      {showContactDetails ? getCoreTranslation('showLess', 'Show less') : getCoreTranslation('showMore', 'Show more')}
     </Button>
   );
 }

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

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export const FemaleIcon: React.FC = () => (
+  <svg fill="currentColor" width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.625 12.457a5 5 0 1 0-1.25 0v1.293H6.25V15h3.125v2.5h1.25V15h3.125v-1.25h-3.125v-1.293zM6.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0z" />
+  </svg>
+);
+
+export const MaleIcon: React.FC = () => (
+  <svg height="20" width="20" viewBox="0 0 20 20">
+    <circle cx="8" cy="12" r="5" stroke="#525252" strokeWidth="1" fill="none" />
+    <path d="M12 8L17 3M17 3H13M17 3V7" stroke="#525252" strokeWidth="1" strokeLinecap="round" />
+  </svg>
+);
+
+export const UnknownIcon: React.FC = () => (
+  <svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="16" cy="22.5" r="1.5" />
+    <path d="M17 19h-2v-4h2c1.103 0 2-.897 2-2s-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.5h-2V13c0-2.206 1.794-4 4-4h2c2.206 0 4 1.794 4 4s-1.794 4-4 4v2z" />
+    <path d="M29.391 14.527 17.473 2.609A2.078 2.078 0 0 0 16 2c-.533 0-1.067.203-1.473.609L2.609 14.527C2.203 14.933 2 15.466 2 16s.203 1.067.609 1.473L14.526 29.39c.407.407.941.61 1.474.61s1.067-.203 1.473-.609L29.39 17.474c.407-.407.61-.94.61-1.474s-.203-1.067-.609-1.473zM16 28.036 3.965 16 16 3.964 28.036 16 16 28.036z" />
+    <path d="M0 0h32v32H0z" />
+  </svg>
+);
+
+export const OtherIcon: React.FC = () => (
+  <svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22 2v2h4.586l-6.402 6.401a6.947 6.947 0 0 0-8.368 0L10.414 9 13 6.414 11.586 5 9 7.586 5.414 4H10V2H2v8h2V5.414L7.586 9 5 11.585 6.414 13 9 10.414l1.401 1.401A6.979 6.979 0 0 0 15 22.92V25h-4v2h4v3h2v-3h4v-2h-4v-2.08a6.979 6.979 0 0 0 4.598-11.104L28 5.414V10h2V2Zm-6 19a5 5 0 1 1 5-5 5.006 5.006 0 0 1-5 5Z" />
+    <path d="M0 0h32v32H0z" />
+  </svg>
+);

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

@@ -1,54 +1,73 @@
 /** @module @category UI */
 import React from 'react';
-import { Tag } from '@carbon/react';
+import { FormLabel, Tag } from '@carbon/react';
 import { useConfig, usePrimaryIdentifierCode } from '@openmrs/esm-react-utils';
 import { type StyleguideConfigObject } from '../../config-schema';
 import styles from './patient-banner-patient-info.module.scss';
 
+interface IdentifierProps {
+  showIdentifierLabel: boolean;
+  type: fhir.CodeableConcept | undefined;
+  value: string | undefined;
+}
+
 interface PatientBannerPatientIdentifierProps {
   identifier: fhir.Identifier[] | undefined;
   showIdentifierLabel: boolean;
 }
 
+function PrimaryIdentifier({ showIdentifierLabel, type, value }: IdentifierProps) {
+  return (
+    <span className={styles.primaryIdentifier}>
+      {showIdentifierLabel && (
+        <Tag className={styles.tag} type="gray" title={type?.text}>
+          {type?.text && <span className={styles.label}>{type.text}: </span>}
+          <span className={styles.value}>{value}</span>
+        </Tag>
+      )}
+    </span>
+  );
+}
+
+function SecondaryIdentifier({ showIdentifierLabel, type, value }: IdentifierProps) {
+  return (
+    <FormLabel className={styles.secondaryIdentifier} id={`patient-banner-identifier-${value}`}>
+      {showIdentifierLabel && <span className={styles.label}>{type?.text}: </span>}
+      <span className={styles.value}>{value}</span>
+    </FormLabel>
+  );
+}
+
 export function PatientBannerPatientIdentifier({
   identifier,
   showIdentifierLabel,
 }: PatientBannerPatientIdentifierProps) {
   const { excludePatientIdentifierCodeTypes } = useConfig<StyleguideConfigObject>();
   const { primaryIdentifierCode } = usePrimaryIdentifierCode();
+
   const filteredIdentifiers =
     identifier?.filter((identifier) => {
       const code = identifier.type?.coding?.[0]?.code;
       return code && !excludePatientIdentifierCodeTypes?.uuids.includes(code);
     }) ?? [];
 
   return (
-    <div className={styles.identifiers}>
+    <>
       {filteredIdentifiers?.length
         ? filteredIdentifiers.map(({ value, type }, index) => (
-            <span key={value} className={styles.identifierTag}>
-              <div>{index > 0 && <span className={styles.separator}>&middot;</span>}</div>
-              {type?.coding?.[0]?.code === primaryIdentifierCode ? (
-                <div className={styles.primaryIdentifier}>
-                  {showIdentifierLabel && (
-                    <Tag type="gray" title={type?.text}>
-                      {type?.text}:
-                    </Tag>
-                  )}
-                  <span>{value}</span>
-                </div>
-              ) : (
-                <label htmlFor="identifier" className={styles.secondaryIdentifier}>
-                  {showIdentifierLabel && <span className={styles.label}>{type?.text}: </span>}
-                  <span id="identifier" className={styles.identifier}>
-                    {value}
-                  </span>
-                </label>
-              )}
-            </span>
+            <React.Fragment key={value}>
+              <span className={styles.identifierTag}>
+                {type?.coding?.[0]?.code === primaryIdentifierCode ? (
+                  <PrimaryIdentifier value={value} type={type} showIdentifierLabel={showIdentifierLabel} />
+                ) : (
+                  <SecondaryIdentifier value={value} type={type} showIdentifierLabel={showIdentifierLabel} />
+                )}
+              </span>
+              {index < filteredIdentifiers.length - 1 && <span className={styles.separator}>&middot;</span>}
+            </React.Fragment>
           ))
         : ''}
-    </div>
+    </>
   );
 }