fhir-react 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fhir-react",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "React component library for displaying FHIR Resources ",
   "main": "build/index.js",
   "peerDependencies": {

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/components/resources/AllergyIntolerance/AllergyIntolerance.js

@@ -123,9 +123,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const AllergyIntolerance = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['AllergyIntolerance'];
+const AllergyIntolerance = ({ fhirResource, fhirVersion, fhirIcons }) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -219,10 +217,10 @@ const AllergyIntolerance = props => {
       <Accordion
         headerContent={
           <Header
-            resourceName="AllergyIntollerance"
+            resourceName="AllergyIntolerance"
             badges={status && <Badge data-testid="status">{status}</Badge>}
             title={title}
-            icon={headerIcon}
+            icon={fhirIcons}
             rightAdditionalContent={
               recordedDate && (
                 <BadgeSecondary data-testid="recordedDate">

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

@@ -12,6 +12,7 @@ import example2AllergyIntoleranceR4 from '../../../fixtures/r4/resources/allergy
 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' };
 
@@ -21,7 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/AllergyIntolerance/allergy-intolerance.svg')}
     />
   );
 };
@@ -32,7 +33,7 @@ export const Example2ofDSTU2 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={AllergyIntoleranceIcon}
     />
   );
 };
@@ -54,7 +55,7 @@ export const Example2DiagnosticReportSTU3 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -65,7 +66,7 @@ export const Example1R4 = () => {
     <AllergyIntolerance
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -7,7 +7,6 @@ import { Body, Header } from '../../ui';
 
 const Binary = props => {
   const { fhirResource, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['Binary'];
 
   const loadBinaryFile = () => {
     switch (fhirResource.contentType) {
@@ -34,7 +33,7 @@ const Binary = props => {
           <Header
             resourceName="Binary"
             title={`Binary file: ${fhirResource.contentType}`}
-            icon={headerIcon}
+            icon={fhirIcons}
           />
         }
         bodyContent={<Body>{loadBinaryFile()}</Body>}

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

@@ -9,6 +9,7 @@ import stu3ExamplePdf from '../../../fixtures/stu3/resources/binary/example-pdf.
 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';
+import BinaryIcon from '../../../assets/containers/Binary/binary.svg';
 
 export default {
   title: 'Binary',
@@ -16,22 +17,27 @@ export default {
 
 export const PdfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExamplePdf);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return (
+    <Binary
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Binary/binary.svg')}
+    />
+  );
 };
 
 export const JpegDSTU2 = () => {
   const fhirResource = object('Resource', dstu2ExampleJpeg);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={BinaryIcon} />;
 };
 
 export const PdfSTU3 = () => {
   const fhirResource = object('Resource', stu3ExamplePdf);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const JpegSTU3 = () => {
   const fhirResource = object('Resource', stu3ExampleJpeg);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <Binary fhirResource={fhirResource} fhirIcons={'random text'} />;
 };
 
 export const JsonSTU3 = () => {

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

@@ -5,8 +5,75 @@ import Binary from './Binary';
 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';
 
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Binary/binary.svg')}
+          alt="binary"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3ExamplePdf,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('binary');
+
+    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: stu3ExamplePdf,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Binary {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('PDF binary file', () => {
     const { container } = render(<Binary fhirResource={stu3ExamplePdf} />);
     expect(container).not.toBe(null);

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

@@ -10,38 +10,64 @@ import weightLossCarePlanR4 from '../../../fixtures/r4/resources/carePlan/weight
 import pregnancyCarePlanR4 from '../../../fixtures/r4/resources/carePlan/pregnancyPlan.json';
 import heartOperationCarePlanR4 from '../../../fixtures/r4/resources/carePlan/heartOperationPlan.json';
 import fhirVersions from '../fhirResourceVersions';
+import CarePlanIcon from '../../../assets/containers/CarePlan/care-plan.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default { title: 'CarePlan' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleCarePlanDSTU2);
   return (
-    <CarePlan fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/CarePlan/care-plan.svg')}
+    />
   );
 };
 
 export const ExampleCarePlanSTU3 = () => {
   const fhirResource = object('Resource', exampleCarePlanSTU3);
   return (
-    <CarePlan fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={CarePlanIcon}
+    />
   );
 };
 
 export const Example2CarePlanSTU3 = () => {
   const fhirResource = object('Resource', example2CarePlanSTU3);
   return (
-    <CarePlan fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />
+    <CarePlan
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const WeightLossCarePlanR4 = () => {
   const fhirResource = object('Resource', weightLossCarePlanR4);
-  return <CarePlan fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <CarePlan
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
+  );
 };
 
 export const PregnancyCarePlanR4 = () => {
   const fhirResource = object('Resource', pregnancyCarePlanR4);
-  return <CarePlan fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <CarePlan
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
+  );
 };
 
 export const HeartOperatioCarePlanR4 = () => {

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

@@ -7,8 +7,80 @@ import examplecarePlanDSTU2 from '../../../fixtures/dstu2/resources/carePlan/exa
 import exampleCarePlanSTU3 from '../../../fixtures/stu3/resources/carePlan/example1.json';
 import example1CarePlanR4 from '../../../fixtures/r4/resources/carePlan/weightLossPlan.json';
 import example2CarePlanR4 from '../../../fixtures/r4/resources/carePlan/pregnancyPlan.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 = {
+      fhirResource: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByAltText('care plan');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/CarePlan/care-plan.svg')}
+          alt="care plan"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByAltText('care plan');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByAltText('care plan');
+
+    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: examplecarePlanDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<CarePlan {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: examplecarePlanDSTU2,

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

@@ -10,6 +10,8 @@ import stu3Example2 from '../../../fixtures/stu3/resources/device/example2.json'
 import r4Example1 from '../../../fixtures/r4/resources/device/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/device/example2.json';
 import fhirVersions from '../fhirResourceVersions';
+import DeviceIcon from '../../../assets/containers/Device/device.svg';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'Device',
@@ -18,29 +20,55 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
   return (
-    <Device fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/Device/device.svg')}
+    />
   );
 };
 
 export const ExampleOfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
   return (
-    <Device fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={DeviceIcon}
+    />
   );
 };
 
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
+    />
+  );
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Device
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
+    />
+  );
 };
 
 export const Example2OfR4 = () => {

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

@@ -6,8 +6,80 @@ import fhirVersions from '../fhirResourceVersions';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/device/example.json';
 import stu3Example2 from '../../../fixtures/stu3/resources/device/example2.json';
 import r4Example2 from '../../../fixtures/r4/resources/device/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Device component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<Device {...defaultProps} />);
+    const headerIcon = getByAltText('device');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Device {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Device/device.svg')}
+          alt="device"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Device {...defaultProps} />);
+    const headerIcon = getByAltText('device');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Device {...defaultProps} />);
+    const headerIcon = getByAltText('device');
+
+    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: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Device {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,

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

@@ -10,6 +10,7 @@ import exampleDiagnosticReportR4 from '../../../fixtures/r4/resources/diagnostic
 import example2DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example2.json';
 import example3DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example3.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import DiagnosticReportIcon from '../../../assets/containers/DiagnosticReport/diagnostic-report.svg';
 
 export default { title: 'DiagnosticReport' };
 
@@ -19,7 +20,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/DiagnosticReport/diagnostic-report.svg')}
     />
   );
 };
@@ -30,7 +31,7 @@ export const ExampleDiagnosticReportSTU3 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={DiagnosticReportIcon}
     />
   );
 };
@@ -52,7 +53,7 @@ export const Example2DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -63,7 +64,7 @@ export const Example3DiagnosticReportR4 = () => {
     <DiagnosticReport
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };