fhir-react 0.3.2 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.2",
+  "version": "0.3.6",
   "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/assets/containers/MedicationRequest/medication-request.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.52175 9.0435C7.01904 9.0435 9.0435 7.01904 9.0435 4.52175C9.0435 2.02446 7.01904 0 4.52175 0C2.02446 0 0 2.02446 0 4.52175C0 7.01904 2.02446 9.0435 4.52175 9.0435Z" fill="#FD7E14"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6396 15.0832C11.0525 15.6702 10.2563 16.0001 9.42605 16.0001C8.5958 16.0001 7.79956 15.6702 7.21248 15.0832C6.62541 14.4961 6.29559 13.6998 6.29559 12.8696C6.29559 12.0394 6.62541 11.2431 7.21248 10.656L8.58067 9.28784L8.58071 9.28788L13.0078 13.715L11.6396 15.0832ZM10.656 7.21254L9.28778 8.58073L9.28782 8.58077L13.7149 13.0079L15.0831 11.6397C15.6702 11.0526 16 10.2564 16 9.42611C16 8.59587 15.6702 7.79962 15.0831 7.21254C14.496 6.62547 13.6998 6.29565 12.8695 6.29565C12.0393 6.29565 11.243 6.62547 10.656 7.21254ZM12.6279 8.21057C12.8683 8.16276 13.1175 8.18732 13.344 8.28116C13.5991 8.38687 13.8916 8.26576 13.9973 8.01065C14.103 7.75554 13.9819 7.46304 13.7268 7.35733C13.3176 7.18776 12.8672 7.14338 12.4328 7.22979C11.9984 7.3162 11.5993 7.52952 11.2861 7.84278C11.0909 8.03806 11.0909 8.35464 11.2862 8.54988C11.4815 8.74512 11.7981 8.74509 11.9933 8.5498C12.1666 8.37645 12.3875 8.25839 12.6279 8.21057Z" fill="#FEB272"/>
+<rect x="1" y="4" width="7" height="1" rx="0.5" fill="white"/>
+</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 => {
@@ -131,8 +123,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const AllergyIntolerance = props => {
-  const { fhirResource, fhirVersion } = props;
+const AllergyIntolerance = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -157,72 +148,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="AllergyIntolerance"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={title}
+            icon={fhirIcons}
+            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,7 +10,9 @@ 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';
+import AllergyIntoleranceIcon from '../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg';
 
 export default { title: 'AllergyIntolerance' };
 
@@ -20,6 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
     />
   );
 };
@@ -30,6 +33,7 @@ export const Example2ofDSTU2 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={AllergyIntoleranceIcon}
     />
   );
 };
@@ -40,6 +44,7 @@ export const ExampleDiagnosticReportSTU3 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -50,6 +55,7 @@ export const Example2DiagnosticReportSTU3 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -60,6 +66,7 @@ export const Example1R4 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };
@@ -70,6 +77,7 @@ export const Example2R4 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -80,11 +88,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/AllergyIntolerance/AllergyIntolerance.test.js

@@ -7,8 +7,79 @@ import exampleAllergyIntoleranceSTU3 from '../../../fixtures/stu3/resources/alle
 import exampleAllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergyIntolerance/example1.json';
 import example2AllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergyIntolerance/example3.json';
 import fhirVersions from '../fhirResourceVersions';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByAltText('allergy intolerance');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
+          alt="allergy intolerance"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByAltText('allergy intolerance');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByAltText('allergy intolerance');
+
+    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 = {
+      fhirResource: exampleAllergyIntoleranceDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<AllergyIntolerance {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleAllergyIntoleranceDSTU2,

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={