fhir-react 0.3.0 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.0",
+  "version": "0.3.4",
   "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/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,6 +9,9 @@ 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;
@@ -49,9 +53,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 +69,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/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/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'}
+    />
   );
 };
 

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

@@ -11,8 +11,80 @@ import example3AppointmentSTU3 from '../../../fixtures/stu3/resources/appointmen
 import example1AppointmentR4 from '../../../fixtures/r4/resources/appointment/example1.json';
 import example2AppointmentR4 from '../../../fixtures/r4/resources/appointment/example2.json';
 import example3AppointmentR4 from '../../../fixtures/r4/resources/appointment/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleAppointmentDSTU2,
+    };
+
+    const { getByAltText } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByAltText('appointment');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleAppointmentDSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleAppointmentDSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Appointment/appointment.svg')}
+          alt="appointment"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByAltText('appointment');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleAppointmentDSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByAltText('appointment');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleAppointmentDSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Appointment {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleAppointmentDSTU2,

package/src/components/resources/Condition/Condition.js

@@ -101,7 +101,6 @@ function Condition(props) {
     dateRecorded,
   } = resourceDTO(fhirVersion, fhirResource);
 
-  const headerIcon = fhirIcons[_get(fhirResource, 'resourceType')];
   const tableData = [
     {
       label: 'Asserted by',
@@ -145,7 +144,7 @@ function Condition(props) {
                 )}
               </>
             }
-            icon={headerIcon}
+            icon={fhirIcons}
             title={codeText}
             rightAdditionalContent={
               severityText && (

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

@@ -16,6 +16,8 @@ import example2ConditionR4 from '../../../fixtures/r4/resources/condition/exampl
 import example3ConditionR4 from '../../../fixtures/r4/resources/condition/example3.json';
 
 import fhirIcons from '../../../fixtures/example-icons';
+import ConditionIcon from '../../../assets/containers/Condition/condition.svg';
+
 export default { title: 'Condition' };
 
 export const DefaultVisualizationDSTU2 = () => {
@@ -24,7 +26,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Condition
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/Condition/condition.svg')}
     />
   );
 };
@@ -35,7 +37,7 @@ export const ExampleWithoutSeverityDSTU2 = () => {
     <Condition
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
+      fhirIcons={ConditionIcon}
     />
   );
 };
@@ -57,7 +59,7 @@ export const ExampleWithoutSeveritySTU3 = () => {
     <Condition
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -68,7 +70,7 @@ export const ExampleWithSeveritySTU3 = () => {
     <Condition
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };
@@ -76,32 +78,20 @@ export const ExampleWithSeveritySTU3 = () => {
 export const Example1ofR4 = () => {
   const fhirResource = object('Resource', example1ConditionR4);
   return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
+    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
   );
 };
 
 export const Example2ofR4 = () => {
   const fhirResource = object('Resource', example2ConditionR4);
   return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
+    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
   );
 };
 
 export const Example3ofR4 = () => {
   const fhirResource = object('Resource', example3ConditionR4);
   return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
+    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
   );
 };

package/src/components/resources/Condition/Condition.test.js

@@ -9,10 +9,80 @@ import exampleConditionSeverity from '../../../fixtures/dstu2/resources/conditio
 import exampleConditionSeveritySTU3 from '../../../fixtures/stu3/resources/condition/example-severity.json';
 import fhirVersions from '../fhirResourceVersions';
 import { render } from '@testing-library/react';
-
 import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleCondition,
+    };
+
+    const { getByAltText } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByAltText('condition');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleCondition,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleCondition,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Condition/condition.svg')}
+          alt="condition"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByAltText('condition');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleCondition,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByAltText('condition');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: exampleCondition,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Condition {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('DSTU2 - without severity field', () => {
     const defaultProps = {
       fhirResource: exampleCondition,

package/src/components/resources/Encounter/Encounter.js

@@ -160,8 +160,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Encounter = props => {
-  const { fhirResource, fhirVersion } = props;
+const Encounter = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -177,7 +176,6 @@ const Encounter = props => {
     encounterType,
     resourceClass,
     resourceStatus,
-    resourceName,
     participant,
   } = fhirResourceData;
 
@@ -207,7 +205,7 @@ const Encounter = props => {
       <Accordion
         headerContent={
           <Header
-            resourceName={resourceName}
+            resourceName={'Encounter'}
             additionalContent={
               periodStart && (
                 <Value label="Start date" data-testid="headerStartDate">
@@ -221,6 +219,7 @@ const Encounter = props => {
               )
             }
             title={locationDisplay}
+            icon={fhirIcons}
           />
         }
         bodyContent={

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

@@ -11,6 +11,8 @@ import example1_R4 from '../../../fixtures/r4/resources/encounter/example1.json'
 import example2_R4 from '../../../fixtures/r4/resources/encounter/example2.json';
 import example3_R4 from '../../../fixtures/r4/resources/encounter/example3.json';
 import fhirVersions from '../fhirResourceVersions';
+import fhirIcons from '../../../fixtures/example-icons';
+import EncounterIcon from '../../../assets/containers/Encounter/encounter.svg';
 
 export default {
   title: 'Encounter',
@@ -19,35 +21,55 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', example1);
   return (
-    <Encounter fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Encounter/encounter.svg')}
+    />
   );
 };
 
 export const ExampleWithoutParticipantsDSTU2 = () => {
   const fhirResource = object('Resource', example2);
   return (
-    <Encounter fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={EncounterIcon}
+    />
   );
 };
 
 export const ExampleSTU3 = () => {
   const fhirResource = object('Resource', example_STU3);
   return (
-    <Encounter fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const ExampleWithoutParticipantSTU3 = () => {
   const fhirResource = object('Resource', example2_STU3);
   return (
-    <Encounter fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
   );
 };
 
 export const ExampleWithoutParticipantR4 = () => {
   const fhirResource = object('Resource', example1_R4);
   return (
-    <Encounter fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
+    <Encounter
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
   );
 };