Release-0.3.5 (#319)

* Add unique id for each type of Accordion resource (#302) * Patientapp 94 add a flexible icon to the encounter (#300) * Refactor the header icon to accept the url icon * Refactor encounter resource name * Refactor an encounter component to use a header icon * Refactor a condition component to use an icon from url * Refactor an immunization component to use an icon from url * Refactor a procedure component to use an icon from url * Refactor a resourceCategory component to use an icon from url * Refactor ways to add a header img * Refactor the encounter to display the header icon from different ways * Refactor the condition to display the header icon from different ways * Refactor the immunization to display the header icon from different ways * Refactor the procedure to display the header icon from different ways * Refactor use a default header icon * Refactor test for a default header icon * Refactor the size of a header icon * Refactor handling a header icon from the url or the import * Patientapp 95 add a flexible icon to the appointment component (#304) * Refactor the header icon to accept the url icon * Refactor encounter resource name * Refactor an encounter component to use a header icon * Refactor a condition component to use an icon from url * Refactor an immunization component to use an icon from url * Refactor a procedure component to use an icon from url * Refactor a resourceCategory component to use an icon from url * Refactor ways to add a header img * Refactor the encounter to display the header icon from different ways * Refactor the condition to display the header icon from different ways * Refactor the immunization to display the header icon from different ways * Refactor the procedure to display the header icon from different ways * Refactor use a default header icon * Refactor test for a default header icon * Refactor the appointment to display the header icon from different ways * Change version in package.json * Change version in package-lock.json * Refactor a header icon sizes * Add new tests to the appointment component * Patientapp 96 add a flexible icon to the explanation of benefit component (#305) * Add a function convertCamelCaseToSentence * Add a function convertCamelCaseToSentence to the header icon component * Refactor the ExplanationOfBenefit to display the header icon from different ways * Refactor the Observation to display the header icon from different ways (#307) * [PATIENTAPP-57] Add FHIR Resource: Medication Order/Medication Request (#306) * update styles for component Medication Order and Medication Request * add icon to storybook * update header word break * [PATIENTAPP-59] Add FHIR Resource: Allergy/Intolerance (#303) * update styles for Allergy intolerance component * [PATIENTAPP-58] Add FHIR Resource: Medication Statement (#310) Add FHIR Resource: MedicationStatement component * [PATIENTAPP-56] Add FHIR Resource: Family Member History (#312) * update styles for component FamilyMemberHistory * fix lint * [Patientapp-54] add fhir resource care plan (#314) * Fixed bug with a long text at a data table value label * Refactor the care plan resource * Refactor tests at the care plan resource * add DiagnosticReport component (#313) * [PATIENTAPP-51] Add FHIR Resource: Document Reference (#317) * addd DocumentReference component * fix lint * Refactor the device resource (#316) * [PATIENTAPP-53] Add FHIR Resource: Goal (#315) * update styles for Goal component * update tests * [PATIENTAPP-50] Add FHIR Resource: Binary (#318) * update styles for Binary component * update Accordion condition * add Binary icon * [PATIENTAPP-100] Review FHIR components 0.3.5 (#320) Update MedicationStatement tests, update FamilyMemberHistory & DiagnosticReport components * Refactor a format date to use a UTC time zone (#321) * Refactor a version in the package.json Co-authored-by: Michał Maksajda <[email protected]> Co-authored-by: Jacek Sańko <[email protected]> Co-authored-by: jaceksanko <[email protected]>
1uphealth · Feb 1, 2022 · 3ac2079 · 3ac2079
1 parent 057b515
commit 3ac2079
Show file tree

Hide file tree

Showing 42 changed files with 1,420 additions and 1,570 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

diff --git a/src/assets/containers/Binary/binary.svg b/src/assets/containers/Binary/binary.svg
diff --git a/src/components/containers/Accordion/Accordion.js b/src/components/containers/Accordion/Accordion.js
@@ -14,16 +14,17 @@ const Accordion = props => {
   );
 
   const isAccordionOpenable = () => {
-    let childrenCondition = false;
-    let tableDataCondition = false;
-    if (bodyContent.props.children)
-      childrenCondition = bodyContent.props.children.length > 0;
-    if (bodyContent.props.tableData)
-      tableDataCondition =
-        bodyContent.props.tableData.filter(x => 'data' in x && x.data).length >
-        0;
+    const tableDataCondition =
+      bodyContent.props.tableData &&
+      bodyContent.props.tableData.filter(x => 'data' in x && x.data).length > 0;
+    const childrenCondition =
+      bodyContent.props.children &&
+      (bodyContent.props.children.length > 0 || bodyContent.props.children);
+    if (tableDataCondition || childrenCondition) {
+      return true;
+    }
 
-    return childrenCondition || tableDataCondition;
+    return false;
   };
 
   const getChevron = () =>

diff --git a/src/components/datatypes/Annotation/Annotation.js b/src/components/datatypes/Annotation/Annotation.js
@@ -7,13 +7,13 @@ const Annotation = props => {
     return null;
   }
   return (
-    <ul className="fhir-datatype__Annotation">
+    <div className="fhir-datatype__Annotation">
       {fhirData.map((item, i) => (
-        <li className="fhir-datatype__Annotation__item" key={`item-${i}`}>
+        <p className="fhir-datatype__Annotation__item" key={`item-${i}`}>
           {item.text}
-        </li>
+        </p>
       ))}
-    </ul>
+    </div>
   );
 };
 

diff --git a/src/components/datatypes/CodeableConcept/CodeableConcept.css b/src/components/datatypes/CodeableConcept/CodeableConcept.css
@@ -1,4 +1,7 @@
+.fhir-datatype__CodeableConcept {
+  flex: 1;
+}
+
 .fhir-datatype__CodeableConcept-item-label {
-  font-size: 80%;
   font-weight: 400;
 }
diff --git a/src/components/datatypes/Coding/Coding.css b/src/components/datatypes/Coding/Coding.css
@@ -1,4 +1,3 @@
 .fhir-datatype__Coding__code {
-  font-style: italic;
   cursor: help;
 }
diff --git a/src/components/datatypes/Reference/Reference.css b/src/components/datatypes/Reference/Reference.css
@@ -0,0 +1,3 @@
+.fhir-datatype__Reference {
+  word-break: break-all;
+}
diff --git a/src/components/datatypes/Reference/Reference.js b/src/components/datatypes/Reference/Reference.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import _get from 'lodash/get';
 
+import './Reference.css';
+
 const Reference = props => {
   const { fhirData } = props;
   const display = _get(fhirData, 'display');

diff --git a/src/components/resources/AllergyIntolerance/AllergyIntolerance.css b/src/components/resources/AllergyIntolerance/AllergyIntolerance.css
diff --git a/src/components/resources/AllergyIntolerance/AllergyIntolerance.js b/src/components/resources/AllergyIntolerance/AllergyIntolerance.js
@@ -3,23 +3,15 @@ import PropTypes from 'prop-types';
 
 import _get from 'lodash/get';
 
+import Accordion from '../../containers/Accordion';
 import Reference from '../../datatypes/Reference';
 import Coding from '../../datatypes/Coding';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
 import Date from '../../datatypes/Date';
 import Annotation from '../../datatypes/Annotation';
-import './AllergyIntolerance.css';
-
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-} from '../../ui';
+
+import { Root, Header, Badge, BadgeSecondary, Body } from '../../ui';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 
 const commonDTO = fhirResource => {
@@ -132,7 +124,8 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 
 const AllergyIntolerance = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
+  const headerIcon = fhirIcons && fhirIcons['AllergyIntolerance'];
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -157,72 +150,90 @@ const AllergyIntolerance = props => {
     patient,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Substance',
+      testId: 'substance',
+      data:
+        hasSubstanceCoding &&
+        substanceCoding.map((item, i) => (
+          <Coding key={`item-${i}`} fhirData={item} />
+        )),
+      status: hasSubstanceCoding,
+    },
+    {
+      label: 'Type',
+      testId: 'type',
+      data: type,
+      status: type,
+    },
+    {
+      label: 'Category',
+      testId: 'category',
+      data: category,
+      status: category,
+    },
+    {
+      label: 'Patient',
+      testId: 'patient',
+      data: <Reference fhirData={patient} />,
+      status: patient,
+    },
+    {
+      label: 'Asserted by',
+      testId: 'asserter',
+      data: asserter && <Reference fhirData={asserter} />,
+      status: asserter,
+    },
+    {
+      label: 'Manifestation',
+      testId: 'manifestation',
+      data: reaction.map((reaction, i) => {
+        const manifestations = _get(reaction, 'manifestation', []);
+        const severity = _get(reaction, 'severity');
+        return manifestations.map((manifestation, j) => {
+          return (
+            <div key={`item-${i}${j}`} className="d-flex">
+              <CodeableConcept fhirData={manifestation} />
+              {severity && (
+                <span className="ms-4">
+                  <BadgeSecondary>{severity}</BadgeSecondary>
+                </span>
+              )}
+            </div>
+          );
+        });
+      }),
+      status: hasReaction,
+    },
+    {
+      label: 'Notes',
+      testId: 'hasNote',
+      data: hasNote && <Annotation fhirData={note} />,
+      status: hasNote,
+    },
+  ];
+
   return (
     <Root name="AllergyIntolerance">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {recordedDate && (
-          <BadgeSecondary data-testid="recordedDate">
-            recorded on <Date fhirData={recordedDate} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {hasSubstanceCoding && (
-          <Value label="Substance" data-testid="substance">
-            {substanceCoding.map((item, i) => (
-              <div key={`item-${i}`}>
-                <Coding fhirData={item} />
-              </div>
-            ))}
-          </Value>
-        )}
-        {type && (
-          <Value label="Type" data-testid="type">
-            {type}
-          </Value>
-        )}
-        {category && (
-          <Value label="Category" data-testid="category">
-            {category}
-          </Value>
-        )}
-        {patient && (
-          <Value label="Patient" data-testid="patient">
-            <Reference fhirData={patient} />
-          </Value>
-        )}
-        {asserter && (
-          <Value label="Asserted by" data-testid="asserter">
-            <Reference fhirData={asserter} />
-          </Value>
-        )}
-        {hasReaction && (
-          <Value label="Manifestation" data-testid="manifestation">
-            {reaction.map((reaction, i) => {
-              const manifestations = _get(reaction, 'manifestation', []);
-              const severity = _get(reaction, 'severity');
-              return manifestations.map((manifestation, j) => {
-                return (
-                  <div
-                    key={`item-${i}${j}`}
-                    className="fhir-resource__AllergyIntolerance__grouping"
-                  >
-                    <CodeableConcept fhirData={manifestation} />
-                    {severity && <BadgeSecondary>{severity}</BadgeSecondary>}
-                  </div>
-                );
-              });
-            })}
-          </Value>
-        )}
-        {hasNote && (
-          <Value label="Notes" data-testid="hasNote">
-            <Annotation fhirData={note} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="AllergyIntollerance"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={title}
+            icon={headerIcon}
+            rightAdditionalContent={
+              recordedDate && (
+                <BadgeSecondary data-testid="recordedDate">
+                  recorded on <Date fhirData={recordedDate} />
+                </BadgeSecondary>
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

diff --git a/src/components/resources/AllergyIntolerance/AllergyIntolerance.stories.js b/src/components/resources/AllergyIntolerance/AllergyIntolerance.stories.js
@@ -10,6 +10,7 @@ import example2AllergyIntoleranceSTU3 from '../../../fixtures/stu3/resources/all
 import example1AllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergyIntolerance/example1.json';
 import example2AllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergyIntolerance/example2.json';
 import example3AllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergyIntolerance/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 import fhirVersions from '../fhirResourceVersions';
 
 export default { title: 'AllergyIntolerance' };
@@ -20,6 +21,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -30,6 +32,7 @@ export const Example2ofDSTU2 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -40,6 +43,7 @@ export const ExampleDiagnosticReportSTU3 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -50,6 +54,7 @@ export const Example2DiagnosticReportSTU3 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -60,6 +65,7 @@ export const Example1R4 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -70,6 +76,7 @@ export const Example2R4 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -80,11 +87,14 @@ export const Example3R4 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
 
 export const ExampleWithoutFhirVersionProperty = () => {
   const fhirResource = object('Resource', example2AllergyIntoleranceSTU3);
-  return <AllergyIntolerance fhirResource={fhirResource} />;
+  return (
+    <AllergyIntolerance fhirResource={fhirResource} fhirIcons={fhirIcons} />
+  );
 };