fhir-react 0.3.6 → 0.3.9

package/src/components/ui/index.js

@@ -15,6 +15,8 @@ export const Header = ({
   additionalContent,
   rightAdditionalContent,
   children,
+  capitalize = false,
+  isNoIcon = false,
 }) => {
   const rightItemsClass = 'align-items-center flex-fill d-flex';
 
@@ -30,45 +32,54 @@ export const Header = ({
               isAccordionOpenable ? 'header__title-row' : ''
             } d-flex w-100 flex-column flex-sm-row`}
           >
-            <div className="d-flex">
-              <div
-                className={`fhir-ui__${resourceName}-Header__icon d-flex align-items-center flex-shrink-1 m-half me-2`}
-              >
-                <HeaderIcon headerIcon={icon} resourceName={resourceName} />
-              </div>
+            <div className="d-flex align-items-center">
+              {!isNoIcon && (
+                <div
+                  className={`fhir-ui__${resourceName}-Header__icon d-flex align-items-center flex-shrink-1 m-half me-2`}
+                >
+                  <HeaderIcon headerIcon={icon} resourceName={resourceName} />
+                </div>
+              )}
               <div
                 className={`fhir-ui__${resourceName}-Header__title flex-fill text-start`}
               >
-                <Title data-testid={titleTestID || 'title'}>
+                <Title
+                  data-testid={titleTestID || 'title'}
+                  capitalize={capitalize}
+                >
                   {title || ''}
                 </Title>
               </div>
             </div>
 
-            <div
-              className={`fhir-ui__${resourceName}-Header__badges ps-1 ps-sm-2 mt-3 mt-sm-0 badges-max-width-sm flex-wrap flex-sm-nowrap justify-content-between justify-content-sm-end ${rightItemsClass}`}
-            >
-              {prefixBadge && <div className="me-3">{prefixBadge}</div>}
-              <div className="d-flex">
-                {badges}
-                {additionalBadge && (
-                  <div className="ms-3">{additionalBadge}</div>
-                )}
+            {(prefixBadge || badges || additionalBadge) && (
+              <div
+                className={`fhir-ui__${resourceName}-Header__badges ps-sm-2 mt-3 mt-sm-0 badges-max-width-sm flex-wrap flex-sm-nowrap justify-content-between justify-content-sm-end ${rightItemsClass}`}
+              >
+                {prefixBadge && <div className="me-3">{prefixBadge}</div>}
+                <div className="d-flex align-items-center">
+                  {badges}
+                  {additionalBadge && (
+                    <div className="ms-3">{additionalBadge}</div>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
           </div>
-          <div
-            className={`fhir-ui__${resourceName}-Header__additional-content w-100 justify-content-start d-flex  ${
-              additionalContent ? ' pt-2' : ''
-            }`}
-          >
-            {additionalContent}
+          {(additionalContent || rightAdditionalContent) && (
             <div
-              className={`fhir-ui__${resourceName}-Header__rightAdditionalContent justify-content-end ${rightItemsClass}`}
+              className={`fhir-ui__${resourceName}-Header__additional-content w-100 justify-content-start d-flex ${
+                additionalContent ? ' pt-2' : ''
+              }`}
             >
-              {rightAdditionalContent}
+              {additionalContent}
+              <div
+                className={`fhir-ui__${resourceName}-Header__rightAdditionalContent justify-content-md-end mx-0 ${rightItemsClass}`}
+              >
+                {rightAdditionalContent}
+              </div>
             </div>
-          </div>
+          )}
         </div>
       )}
     </>
@@ -77,7 +88,9 @@ export const Header = ({
 
 export const Title = props => (
   <h4
-    className="fhir-ui__Title fw-bold fs-4 lh-base mb-0 w-90 title-width-sm"
+    className={`fhir-ui__Title fw-bold lh-base mb-0 text-break d-flex ${
+      props.capitalize ? 'text-capitalize' : ''
+    }`}
     data-testid={props['data-testid'] || 'title'}
   >
     {props.children}
@@ -99,7 +112,7 @@ export const Badge = props => {
 
 export const BadgeSecondary = props => (
   <small
-    className={`fhir-ui__BadgeSecondary px-2 py-1 rounded-1 fw-bold ${getBadgeColor(
+    className={`fhir-ui__BadgeSecondary px-2 py-1 rounded-1 fw-bold d-flex align-items-center ${getBadgeColor(
       props,
     )}`}
     data-testid={props['data-testid']}
@@ -128,7 +141,7 @@ export const ValueUnit = props => (
 export const Body = ({ tableData = [], reverseContent, children }) => (
   <div className="fhir-ui__Body">
     {reverseContent ? children : null}
-    <div className="row">
+    <div className="row gap-3">
       {tableData.map(
         (value, index) =>
           value.status && (
@@ -175,7 +188,9 @@ export const Data = props => (
 );
 
 export const Root = props => (
-  <div className={`fhir-resource__${props.name}`}>{props.children}</div>
+  <div className={`fhir-resource__${props.name} ${props.className}`}>
+    {props.children}
+  </div>
 );
 
 export const Table = props => (
@@ -199,10 +214,19 @@ export const TableHeader = props => {
   );
 };
 
-export const TableRow = props => <tr>{props.children}</tr>;
+export const TableRow = props => {
+  const { children, ...rest } = props;
+  return <tr {...rest}>{props.children}</tr>;
+};
 
 export const TableCell = props => (
-  <td className="align-text-top border-0" data-testid={props['data-testid']}>
+  <td
+    className={`${
+      props.isAlignTop ? '' : 'align-middle'
+    } border-0 ${props.className || ''}`}
+    data-testid={props['data-testid']}
+    style={props.style}
+  >
     {props.children}
   </td>
 );

package/src/fixtures/dstu2/resources/relatedPerson/example1.json

@@ -0,0 +1,79 @@
+{
+  "resourceType": "RelatedPerson",
+  "id": "benedicte",
+  "text": {
+    "status": "generated",
+    "div": "<div>\n      <table>\n        <tbody>\n          <tr>\n            <td>Name</td>\n            <td>Bénédicte du Marché</td>\n          </tr>\n          <tr>\n            <td>Address</td>\n            <td>43, Place du Marché Sainte Catherine, 75004 Paris, France</td>\n          </tr>\n          <tr>\n            <td>Contacts</td>\n            <td>Phone: +33 (237) 998327</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>"
+  },
+  "identifier": [
+    {
+      "use": "usual",
+      "type": {
+        "text": "INSEE"
+      },
+      "system": "urn:oid:1.2.250.1.61",
+      "value": "272117510400399"
+    }
+  ],
+  "patient": {
+    "reference": "Patient/example"
+  },
+  "relationship": {
+    "coding": [
+      {
+        "system": "http://hl7.org/fhir/patient-contact-relationship",
+        "code": "partner"
+      },
+      {
+        "system": "http://hl7.org/fhir/v3/RoleCode",
+        "code": "WIFE"
+      }
+    ]
+  },
+  "name": {
+    "family": [
+      "du",
+      "Marché"
+    ],
+    "_family": [
+      {
+        "extension": [
+          {
+            "fhir_comments": [
+              "  the \"du\" part is a family name prefix (VV in iso 21090)  "
+            ],
+            "url": "http://hl7.org/fhir/StructureDefinitioniso-21090#qualifier",
+            "valueCode": "VV"
+          }
+        ]
+      },
+      null
+    ],
+    "given": [
+      "Bénédicte"
+    ]
+  },
+  "telecom": [
+    {
+      "system": "phone",
+      "value": "+33 (237) 998327"
+    }
+  ],
+  "gender": "female",
+  "address": [
+    {
+      "line": [
+        "43, Place du Marché Sainte Catherine"
+      ],
+      "city": "Paris",
+      "postalCode": "75004",
+      "country": "FRA"
+    }
+  ],
+  "photo": [
+    {
+      "contentType": "image/jpeg",
+      "url": "Binary/f016"
+    }
+  ]
+}

package/src/fixtures/example-icons.jsx

@@ -1,6 +1,13 @@
 import React from 'react';
 
 export default {
+  AdverseEvent: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/AdverseEvent/adverse-event.svg')}
+      alt="adverse event"
+    />
+  ),
   Binary: (
     <img
       className="header-icon__image"
@@ -36,6 +43,13 @@ export default {
       alt="practitioner"
     />
   ),
+  PractitionerRole: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/PractitionerRole/practitioner-role.svg')}
+      alt="practitioner role"
+    />
+  ),
   AllergyIntolerance: (
     <img
       className="header-icon__image"
@@ -141,6 +155,13 @@ export default {
       alt="location marker"
     />
   ),
+  Medication: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Medication/medication.svg')}
+      alt="medication"
+    />
+  ),
   MedicationOrder: (
     <img
       className="header-icon__image"
@@ -148,6 +169,13 @@ export default {
       alt="medication order"
     />
   ),
+  MedicationDispense: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/MedicationDispense/medication-dispense.svg')}
+      alt="medication dispense"
+    />
+  ),
   MedicationRequest: (
     <img
       className="header-icon__image"
@@ -183,6 +211,13 @@ export default {
       alt="observation"
     />
   ),
+  Organization: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Organization/organization.svg')}
+      alt="organization"
+    />
+  ),
   Questionnaire: (
     <img
       className="header-icon__image"
@@ -218,4 +253,32 @@ export default {
       alt="patient"
     />
   ),
+  Coverage: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Coverage/coverage.svg')}
+      alt="coverage"
+    />
+  ),
+  RelatedPerson: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/RelatedPerson/related-person.svg')}
+      alt="related person"
+    />
+  ),
+  Generic: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/Generic/generic.svg')}
+      alt="generic"
+    />
+  ),
+  ReferralRequest: (
+    <img
+      className="header-icon__image"
+      src={require('../assets/containers/ReferralRequest/referral-request.svg')}
+      alt="referral request"
+    />
+  ),
 };

package/src/fixtures/r4/resources/relatedPerson/example1.json

@@ -0,0 +1,64 @@
+{
+  "resourceType": "RelatedPerson",
+  "id": "newborn-mom",
+  "text": {
+    "status": "generated",
+    "div": "<div xmlns=\"http://www.w3.org/1999/xhtml\"><p><b>Generated Narrative with Details</b></p><p><b>id</b>: newborn-mom</p><p><b>identifier</b>: Social Security number = 444222222</p><p><b>active</b>: true</p><p><b>patient</b>: <a>Patient/newborn</a></p><p><b>relationship</b>: Natural Mother <span>(Details : {http://terminology.hl7.org/CodeSystem/v3-RoleCode code 'NMTH' = 'natural mother', given as 'natural mother'})</span></p><p><b>name</b>: Eve Everywoman (OFFICIAL)</p><p><b>telecom</b>: ph: 555-555-2003(WORK)</p><p><b>gender</b>: female</p><p><b>birthDate</b>: 31/05/1973</p><p><b>address</b>: 2222 Home Street (HOME)</p></div>"
+  },
+  "identifier": [
+    {
+      "type": {
+        "coding": [
+          {
+            "system": "http://terminology.hl7.org/CodeSystem/v2-0203",
+            "code": "SS"
+          }
+        ]
+      },
+      "system": "http://hl7.org/fhir/sid/us-ssn",
+      "value": "444222222"
+    }
+  ],
+  "active": true,
+  "patient": {
+    "reference": "Patient/newborn"
+  },
+  "relationship": [
+    {
+      "coding": [
+        {
+          "system": "http://terminology.hl7.org/CodeSystem/v3-RoleCode",
+          "code": "NMTH",
+          "display": "natural mother"
+        }
+      ],
+      "text": "Natural Mother"
+    }
+  ],
+  "name": [
+    {
+      "use": "official",
+      "family": "Everywoman",
+      "given": [
+        "Eve"
+      ]
+    }
+  ],
+  "telecom": [
+    {
+      "system": "phone",
+      "value": "555-555-2003",
+      "use": "work"
+    }
+  ],
+  "gender": "female",
+  "birthDate": "1973-05-31",
+  "address": [
+    {
+      "use": "home",
+      "line": [
+        "2222 Home Street"
+      ]
+    }
+  ]
+}

package/src/fixtures/stu3/resources/relatedPerson/example1.json

@@ -0,0 +1,43 @@
+{
+  "resourceType": "RelatedPerson",
+  "id": "f002",
+  "text": {
+    "status": "generated",
+    "div": "<div xmlns=\"http://www.w3.org/1999/xhtml\">\n     Ariadne Bor-Jansma\n    </div>"
+  },
+  "patient": {
+    "reference": "Patient/f201"
+  },
+  "relationship": {
+    "coding": [
+      {
+        "system": "http://hl7.org/fhir/v3/RoleCode",
+        "code": "SIGOTHR"
+      }
+    ]
+  },
+  "name": [
+    {
+      "use": "usual",
+      "text": "Ariadne Bor-Jansma"
+    }
+  ],
+  "telecom": [
+    {
+      "system": "phone",
+      "value": "+31201234567",
+      "use": "home"
+    }
+  ],
+  "gender": "female",
+  "birthDate": "1963",
+  "photo": [
+    {
+      "contentType": "image/jpeg",
+      "data": "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"
+    }
+  ],
+  "period": {
+    "start": "1975"
+  }
+}

package/src/style.scss

@@ -40,6 +40,7 @@ $spacers: map-merge(
   (
     half: $space,
     6: 3.5rem,
+    20: 20px,
     40: 40px,
   )
 );
@@ -61,7 +62,7 @@ $body-color: #152536;
 
 $table-striped-bg: $gray-100;
 
-$secondary: #68717A;
+$secondary: #68717a;
 
 $light: #dedddd;
 
@@ -84,6 +85,7 @@ $enable-negative-margins: true;
 
 .dataTable__value-label {
   width: auto;
+
   @include media-breakpoint-up(sm) {
     width: 130px;
     min-width: 130px;
@@ -104,6 +106,17 @@ $enable-negative-margins: true;
 
 .fhir-ui__Badge {
   width: fit-content;
+  margin: 0 4px;
+  @include media-breakpoint-down(sm) {
+    margin: 4px 0;
+  }
+}
+
+.fhir-ui__Title {
+  font-size: 1.125rem;
+  @include media-breakpoint-down(sm) {
+    font-size: 1rem !important;
+  }
 }
 
 .header__title-row {