fhir-react 0.3.4 → 0.3.5

package/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": {

package/src/assets/containers/Binary/binary.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 20H15C15.5523 20 16 19.5523 16 19V8.72076C16 8.29033 15.7246 7.90819 15.3162 7.77208L13.5208 7.17359C13.1964 7.06547 12.9498 6.79914 12.8669 6.46744L12.4394 4.75746C12.3281 4.3123 11.9281 4 11.4692 4H5C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20Z" fill="#0D6EFD" stroke="#0D6EFD"/>
+<mask id="path-2-outside-1_2206_5395" maskUnits="userSpaceOnUse" x="11" y="3" width="6" height="6" fill="black">
+<rect fill="white" x="11" y="3" width="6" height="6"/>
+<path d="M12 4V7.18534C12 7.4014 12.0858 7.60861 12.2386 7.76139C12.3914 7.91417 12.5986 8 12.8147 8H16"/>
+</mask>
+<path d="M12 4V7.18534C12 7.4014 12.0858 7.60861 12.2386 7.76139C12.3914 7.91417 12.5986 8 12.8147 8H16" fill="#6EA8FE"/>
+<path d="M12 4V7.18534C12 7.4014 12.0858 7.60861 12.2386 7.76139C12.3914 7.91417 12.5986 8 12.8147 8H16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" mask="url(#path-2-outside-1_2206_5395)"/>
+</svg>

package/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 = () =>

package/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>
   );
 };
 

package/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;
 }

package/src/components/datatypes/Coding/Coding.css

@@ -1,4 +1,3 @@
 .fhir-datatype__Coding__code {
-  font-style: italic;
   cursor: help;
 }

package/src/components/datatypes/Reference/Reference.css

@@ -0,0 +1,3 @@
+.fhir-datatype__Reference {
+  word-break: break-all;
+}

package/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');

package/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>
   );
 };

package/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} />
+  );
 };

package/src/components/resources/Binary/Binary.js

@@ -2,32 +2,43 @@ import React from 'react';
 import Img from '../../datatypes/Img';
 import Pdf from '../../datatypes/Pdf';
 import BinaryText from '../../datatypes/BinaryText';
+import Accordion from '../../containers/Accordion/Accordion';
+import { Body, Header } from '../../ui';
 
 const Binary = props => {
-  const { fhirResource } = props;
+  const { fhirResource, fhirIcons } = props;
+  const headerIcon = fhirIcons && fhirIcons['Binary'];
+
+  const loadBinaryFile = () => {
+    switch (fhirResource.contentType) {
+      case 'application/pdf':
+        if (props.children && typeof props.children === 'function') {
+          return props.children(fhirResource.content, fhirResource.contentType);
+        }
+        return <Pdf fhirResource={fhirResource} />;
+      case 'image/jpeg':
+        return <Img fhirResource={fhirResource} />;
+      case 'application/xml':
+        return <BinaryText fhirResource={fhirResource} />;
+      case 'application/json':
+        return <BinaryText fhirResource={fhirResource} />;
+      default:
+        return null;
+    }
+  };
 
   return (
     <div>
-      {(() => {
-        switch (fhirResource.contentType) {
-          case 'application/pdf':
-            if (props.children && typeof props.children === 'function') {
-              return props.children(
-                fhirResource.content,
-                fhirResource.contentType,
-              );
-            }
-            return <Pdf fhirResource={fhirResource} />;
-          case 'image/jpeg':
-            return <Img fhirResource={fhirResource} />;
-          case 'application/xml':
-            return <BinaryText fhirResource={fhirResource} />;
-          case 'application/json':
-            return <BinaryText fhirResource={fhirResource} />;
-          default:
-            return null;
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Binary"
+            title={`Binary file: ${fhirResource.contentType}`}
+            icon={headerIcon}
+          />
         }
-      })()}
+        bodyContent={<Body>{loadBinaryFile()}</Body>}
+      />
     </div>
   );
 };

package/src/components/resources/Binary/Binary.stories.js

@@ -8,6 +8,7 @@ import dstu2ExampleJpeg from '../../../fixtures/dstu2/resources/binary/example-j
 import stu3ExamplePdf from '../../../fixtures/stu3/resources/binary/example-pdf.json';
 import stu3ExampleJpeg from '../../../fixtures/stu3/resources/binary/example-jpeg.json';
 import stu3ExampleJson from '../../../fixtures/stu3/resources/binary/example-json.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'Binary',
@@ -15,25 +16,25 @@ export default {
 
 export const PdfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExamplePdf);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const JpegDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExampleJpeg);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const PdfSTU3 = () => {
   const fhirResource = object('Resource', stu3ExamplePdf);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const JpegSTU3 = () => {
   const fhirResource = object('Resource', stu3ExampleJpeg);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const JsonSTU3 = () => {
   const fhirResource = object('Resource', stu3ExampleJson);
-  return <Binary fhirResource={fhirResource} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };