+ <>
{filteredIdentifiers?.length
? filteredIdentifiers.map(({ value, type }, index) => (
-
- {index > 0 && ·}
- {type?.coding?.[0]?.code === primaryIdentifierCode ? (
-
- {showIdentifierLabel && (
-
- {type?.text}:
-
- )}
- {value}
-
- ) : (
-
- )}
-
+
+
+ {type?.coding?.[0]?.code === primaryIdentifierCode ? (
+
+ ) : (
+
+ )}
+
+ {index < filteredIdentifiers.length - 1 && ·}
+
))
: ''}
-
{name}
-
+
+ {gender && (
+
+
+ {gender}
+
+ )}
+
+
- {gender}
{patient.birthDate && (
<>
- ·
{age(patient.birthDate)}
·
- {formatDate(parseDate(patient.birthDate), { mode: 'wide', time: false })}
+ {formatDate(parseDate(patient.birthDate), { time: false })}
+ ·
)}
-
-
);
}
-
-const getGender = (gender: string): string => {
- switch (gender) {
- case 'male':
- return getCoreTranslation('male', 'Male');
- case 'female':
- return getCoreTranslation('female', 'Female');
- case 'other':
- return getCoreTranslation('other', 'Other');
- case 'unknown':
- return getCoreTranslation('unknown', 'Unknown');
- default:
- return gender;
- }
-};
diff --git a/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss b/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss
index 937f855bc..b51ffe4ab 100644
--- a/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss
+++ b/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.module.scss
@@ -1,10 +1,11 @@
@use '@carbon/colors';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
.container {
- border-top: 0.063rem solid $ui-03;
- border-bottom: 0.063rem solid $ui-03;
+ border-top: 1px solid $ui-03;
+ border-bottom: 1px solid $ui-03;
background-color: $ui-01;
}
@@ -18,12 +19,14 @@
.patientName {
@include type.type-style('heading-03');
- margin-right: 0.25rem;
+ color: colors.$gray-100;
+ font-weight: 600;
+ margin-right: layout.$spacing-02;
}
.patientAvatar {
- width: 5rem;
- height: 5rem;
+ width: 3.5rem;
+ height: 3.5rem;
margin: 1rem;
border-radius: 1px;
}
@@ -31,18 +34,25 @@
.patientAvatarButton {
cursor: pointer;
border: none;
- padding: 0px;
+ padding: 0;
background: none;
}
.patientInfo {
+ display: flex;
+ flex-direction: column;
+ padding: layout.$spacing-05 0 layout.$spacing-05 0;
width: 100%;
}
.demographics {
@include type.type-style('body-compact-02');
color: $text-02;
- margin-top: 0.25rem;
+ display: flex;
+ align-items: center;
+ column-gap: layout.$spacing-02;
+ margin-top: layout.$spacing-02;
+ flex-wrap: wrap;
}
.row {
@@ -50,11 +60,6 @@
flex-direction: row;
justify-content: space-between;
align-items: baseline;
- margin-top: 0.25rem;
-}
-
-.patientNameRow {
- margin-top: 0.875rem;
}
.flexRow {
@@ -63,11 +68,17 @@
align-items: center;
}
+.tagsSlot {
+ @extend .flexRow;
+ margin: 0 layout.$spacing-03;
+}
+
.identifiers {
@include type.type-style('body-compact-02');
color: colors.$gray-70;
display: flex;
flex-wrap: wrap;
+ align-items: center;
}
.identifierTag {
@@ -75,33 +86,46 @@
align-items: center;
}
-.separator {
- margin: 0 0.5rem;
-}
-
-.primaryIdentifier {
+.primaryIdentifier,
+.secondaryIdentifier {
+ @include type.type-style('body-compact-02');
display: flex;
align-items: center;
- gap: 0.25rem;
+ gap: layout.$spacing-02;
}
-.secondaryIdentifier {
- display: flex;
+.primaryIdentifier {
+ color: colors.$gray-100;
- .label {
- @include type.type-style('label-01');
- margin: 0.25rem 0.25rem 0.25rem 0rem;
- align-self: auto;
+ .value {
+ font-weight: bold;
}
+}
+.secondaryIdentifier {
.identifier {
@include type.type-style('body-compact-02');
align-self: baseline;
}
}
+.gender {
+ display: flex;
+ align-items: center;
+ color: colors.$gray-70;
+ gap: layout.$spacing-01;
+}
+
+.separator {
+ margin: layout.$spacing-01;
+}
+
+.tag {
+ font-size: inherit !important;
+}
+
.tooltipPadding {
- padding: 0.25rem;
+ padding: layout.$spacing-02;
}
.tooltipSmallText {
@@ -117,15 +141,15 @@
html[dir='rtl'] {
.demographics {
display: flex;
- gap: 0.25rem;
+ gap: layout.$spacing-02;
}
.tag {
- margin: 0.25rem 0rem 0.25rem 0.25rem;
+ margin: layout.$spacing-02 0 layout.$spacing-02 layout.$spacing-02;
}
.patientName {
margin-right: unset;
- margin-left: 0.25rem;
+ margin-left: layout.$spacing-02;
}
}
diff --git a/packages/framework/esm-styleguide/src/patient-photo/loader-icon.component.tsx b/packages/framework/esm-styleguide/src/patient-photo/loader-icon.component.tsx
new file mode 100644
index 000000000..d34a5919b
--- /dev/null
+++ b/packages/framework/esm-styleguide/src/patient-photo/loader-icon.component.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface LoaderIconProps {
+ height?: number;
+ width?: number;
+}
+
+const LoaderIcon: React.FC