fhir-react 0.3.1 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.1",
+  "version": "0.3.5",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {
@@ -17,7 +17,8 @@
     "md5": "^2.2.1",
     "pretty-bytes": "^5.3.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1"
+    "react": "^17.0.1",
+    "svg-url-loader": "^7.1.1"
   },
   "scripts": {
     "test": "NODE_ENV=test jest",

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/assets/containers/Patient/patient.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12C0 8.27247 0 6.4087 0.608964 4.93853C1.42092 2.97831 2.97831 1.42092 4.93853 0.608964C6.4087 0 8.27247 0 12 0C15.7275 0 17.5913 0 19.0615 0.608964C21.0217 1.42092 22.5791 2.97831 23.391 4.93853C24 6.4087 24 8.27247 24 12C24 15.7275 24 17.5913 23.391 19.0615C22.5791 21.0217 21.0217 22.5791 19.0615 23.391C17.5913 24 15.7275 24 12 24C8.27247 24 6.4087 24 4.93853 23.391C2.97831 22.5791 1.42092 21.0217 0.608964 19.0615C0 17.5913 0 15.7275 0 12Z" fill="#F8F9FA"/>
+<path d="M12 11C13.933 11 15.5 9.433 15.5 7.5C15.5 5.567 13.933 4 12 4C10.067 4 8.5 5.567 8.5 7.5C8.5 9.433 10.067 11 12 11Z" stroke="#3D8BFD" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.5 5C10.0015 5.63268 10.6029 6.13588 11.268 6.47953C11.9332 6.82317 12.6485 7.00019 13.3712 7C14.1033 7.00035 14.8277 6.81885 15.5 6.46662" stroke="#3D8BFD" stroke-linejoin="round"/>
+<path d="M4 20C4 18.1435 4.84285 16.363 6.34315 15.0503C7.84344 13.7375 9.87827 13 12 13C14.1217 13 16.1566 13.7375 17.6569 15.0503C19.1571 16.363 20 18.1435 20 20" stroke="#3D8BFD" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/containers/Accordion/Accordion.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Chevron } from '../../ui';
+import uniqueId from 'lodash/uniqueId';
 
 const CHEVRON_DOWN_COLOR = '#6f83a9';
 const CHEVRON_UP_COLOR = '#2a6fd7';
@@ -8,18 +9,22 @@ const Accordion = props => {
   const { headerContent, bodyContent } = props;
   const [rotate, setRotate] = useState(false);
   const handleAccordionClick = () => setRotate(!rotate);
+  const accordionId = uniqueId(
+    `accordion-type-${headerContent.props.resourceName || 'default'}-`,
+  );
 
   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 = () =>
@@ -49,9 +54,9 @@ const Accordion = props => {
                 isAccordionOpenable() ? '' : 'pe-none'
               }`}
               type="button"
-              data-bs-target="#collapseTarget"
+              data-bs-target={`#${accordionId}`}
               data-bs-toggle={isAccordionOpenable() ? 'collapse' : null}
-              aria-controls="collapseTarget"
+              aria-controls={accordionId}
               aria-expanded="false"
               onClick={handleAccordionClick}
             >
@@ -65,7 +70,7 @@ const Accordion = props => {
           </div>
           <div
             className="fhir-container__Accordion__data accordion-collapse collapse"
-            id="collapseTarget"
+            id={accordionId}
           >
             <div className="fhir-container__Accordion__data-text accordion-body ps-4 pt-3 pe-4 border-top">
               {bodyContent}

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/HeaderIcon/HeaderIcon.js

@@ -1,31 +1,76 @@
 import React from 'react';
-import { isUrl } from '../../../utils/isUrl';
+import { useState, useEffect, useRef } from 'react';
+import { convertCamelCaseToSentence } from '../../../utils/convertCamelCaseToSentence';
 
-const HeaderIcon = ({ headerIcon }) => {
-  const PlaceholderImage = () => {
-    return <div className="header-icon__placeholder rounded-1" />;
+const PlaceholderImage = () => {
+  return (
+    <div
+      className="header-icon__placeholder rounded-1"
+      data-testid="placeholder"
+    />
+  );
+};
+
+const defaultIconOrPlaceholder = (headerIcon, resourceName) => {
+  let imageSrc;
+  const svgFileName =
+    resourceName && convertCamelCaseToSentence(resourceName).replace(/ /g, '-');
+  try {
+    imageSrc = require(`../../../assets/containers/${resourceName}/${svgFileName}.svg`);
+  } catch (err) {
+    imageSrc = null;
+  }
+  return imageSrc && headerIcon !== false ? (
+    <img
+      className="header-icon__image"
+      src={imageSrc}
+      alt={convertCamelCaseToSentence(resourceName)}
+    />
+  ) : (
+    <PlaceholderImage />
+  );
+};
+
+const useImageError = () => {
+  const [error, setError] = useState(false);
+  const ref = useRef();
+
+  const onError = () => {
+    setError(true);
   };
 
-  const Image = () => {
-    if (
-      React.isValidElement(headerIcon) &&
-      typeof headerIcon.type === 'string'
-    ) {
-      return headerIcon;
+  useEffect(() => {
+    if (ref.current && ref.current.error) {
+      onError();
     }
-    if (isUrl(headerIcon)) {
-      return (
-        <img
-          className="header-icon__image"
-          src={headerIcon}
-          alt="header icon"
-        />
-      );
-    }
-    return <PlaceholderImage />;
-  };
+  });
+
+  return [ref, error, onError];
+};
+
+const HeaderIcon = ({ headerIcon, resourceName }) => {
+  const [ref, error, onError] = useImageError();
+  if (!headerIcon) {
+    return defaultIconOrPlaceholder(headerIcon, resourceName);
+  }
+  if (headerIcon[resourceName]) {
+    return headerIcon[resourceName];
+  }
+  if (React.isValidElement(headerIcon) && typeof headerIcon.type === 'string') {
+    return headerIcon;
+  }
 
-  return <Image />;
+  return !error ? (
+    <img
+      ref={ref}
+      onError={onError}
+      className="header-icon__image"
+      src={headerIcon}
+      alt="header icon"
+    />
+  ) : (
+    defaultIconOrPlaceholder(headerIcon, resourceName)
+  );
 };
 
 export default HeaderIcon;

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/Appointment/Appointment.js

@@ -144,8 +144,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Appointment = props => {
-  const { fhirResource, fhirVersion } = props;
+const Appointment = ({ fhirResource, fhirVersion, fhirIcons }) => {
   const {
     description,
     status,
@@ -208,7 +207,7 @@ const Appointment = props => {
       <Accordion
         headerContent={
           <Header
-            resourceName={fhirResource.resourceName}
+            resourceName="Appointment"
             additionalContent={
               start && (
                 <Value label="Start date" data-testid="headerStartDate">
@@ -218,6 +217,7 @@ const Appointment = props => {
             }
             badges={status && <Badge data-testid="status">{status}</Badge>}
             title={description}
+            icon={fhirIcons}
           />
         }
         bodyContent={

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

@@ -13,38 +13,61 @@ import example1AppointmentR4 from '../../../fixtures/r4/resources/appointment/ex
 import example2AppointmentR4 from '../../../fixtures/r4/resources/appointment/example2.json';
 import example3AppointmentR4 from '../../../fixtures/r4/resources/appointment/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import AppointmentIcon from '../../../assets/containers/Appointment/appointment.svg';
+
 export default { title: 'Appointment' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleAppointmentDSTU2);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/Appointment/appointment.svg')}
+    />
   );
 };
 
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', example2AppointmentDSTU2);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={AppointmentIcon}
+    />
   );
 };
 
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', example1AppointmentSTU3);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', example2AppointmentSTU3);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
+    />
   );
 };
 export const Example3OfSTU3 = () => {
   const fhirResource = object('Resource', example3AppointmentSTU3);
   return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Appointment
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={'random text'}
+    />
   );
 };