fhir-react 0.3.5 → 0.3.6

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

@@ -7,8 +7,79 @@ import exampleDiagnosticReportDSTU2 from '../../../fixtures/dstu2/resources/diag
 import exampleDiagnosticReportSTU3 from '../../../fixtures/stu3/resources/diagnosticReport/example1.json';
 import exampleDiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example1.json';
 import example2DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosticReport/example2.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: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/DiagnosticReport/diagnostic-report.svg')}
+          alt="diagnostic report"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('diagnostic report');
+
+    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: exampleDiagnosticReportDSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<DiagnosticReport {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: exampleDiagnosticReportDSTU2,

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

@@ -8,6 +8,7 @@ import exampleDocumentReference from '../../../fixtures/dstu2/resources/document
 import exampleDocumentReferenceSTU3 from '../../../fixtures/stu3/resources/documentReference/example1.json';
 import example1DocumentReferenceR4 from '../../../fixtures/r4/resources/documentReference/example1.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import DocumentReferenceIcon from '../../../assets/containers/DocumentReference/document-reference.svg';
 
 export default { title: 'Document Reference' };
 
@@ -17,7 +18,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/DocumentReference/document-reference.svg')}
     />
   );
 };
@@ -28,7 +29,7 @@ export const ExampleSTU3 = () => {
     <DocumentReference
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
+      fhirIcons={DocumentReferenceIcon}
     />
   );
 };

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

@@ -8,8 +8,79 @@ import DocumentReference from './DocumentReference';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/documentReference/example1.json';
 import stu3Example1 from '../../../fixtures/stu3/resources/documentReference/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/documentReference/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render the DocumentReference component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    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(<DocumentReference {...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/DocumentReference/document-reference.svg')}
+          alt="document reference"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    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(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('document reference');
+
+    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(<DocumentReference {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const { getByTestId } = render(
       <DocumentReference

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

@@ -9,6 +9,7 @@ import example1DSTU2 from '../../../fixtures/dstu2/resources/familyMemberHistory
 import example1STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example1.json';
 import example2STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example2.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import FamilyMemberHistoryIcon from '../../../assets/containers/FamilyMemberHistory/family-member-history.svg';
 
 export default {
   title: 'FamilyMemberHistory',
@@ -20,7 +21,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/FamilyMemberHistory/family-member-history.svg')}
     />
   );
 };
@@ -31,7 +32,7 @@ export const Example1OfSTU3 = () => {
     <FamilyMemberHistory
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={FamilyMemberHistoryIcon}
     />
   );
 };

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

@@ -5,8 +5,80 @@ import fhirVersions from '../fhirResourceVersions';
 
 import example1DSTU2 from '../../../fixtures/dstu2/resources/familyMemberHistory/example1.json';
 import example1STU3 from '../../../fixtures/stu3/resources/familyMemberHistory/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render FamilyMemberHistory component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/FamilyMemberHistory/family-member-history.svg')}
+          alt="family member history"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('family member history');
+
+    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: example1DSTU2,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<FamilyMemberHistory {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('DSTU2', () => {
     const defaultProps = {
       fhirResource: example1DSTU2,

package/src/components/resources/Goal/Goal.js

@@ -101,7 +101,6 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 
 const Goal = props => {
   const { fhirResource, fhirVersion, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['Goal'];
 
   let fhirResourceData = {};
   try {
@@ -225,7 +224,7 @@ const Goal = props => {
               )
             }
             badges={hasStatus && <Badge data-testid="status">{status}</Badge>}
-            icon={headerIcon}
+            icon={fhirIcons}
             title={title}
           />
         }

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

@@ -9,6 +9,7 @@ import stu3Example1 from '../../../fixtures/stu3/resources/goal/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/goal/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/goal/example2.json';
 import fhirVersions from '../fhirResourceVersions';
+import GoalIcon from '../../../assets/containers/Goal/goal.svg';
 
 export default {
   title: 'Goal',
@@ -20,7 +21,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Goal
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/Goal/goal.svg')}
     />
   );
 };
@@ -31,7 +32,7 @@ export const Example2OfDSTU2 = () => {
     <Goal
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={GoalIcon}
     />
   );
 };
@@ -53,7 +54,7 @@ export const Example1OfR4 = () => {
     <Goal
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -64,7 +65,7 @@ export const Example2OfR4 = () => {
     <Goal
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -7,8 +7,77 @@ import dstu2Example1 from '../../../fixtures/dstu2/resources/goal/example1.json'
 import stu3Example1 from '../../../fixtures/stu3/resources/goal/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/goal/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/goal/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Goal component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+
+    const { getByAltText } = render(<Goal {...defaultProps} />);
+    const headerIcon = getByAltText('goal');
+
+    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(<Goal {...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/Goal/goal.svg')} alt="goal" />
+      ),
+    };
+
+    const { getByAltText } = render(<Goal {...defaultProps} />);
+    const headerIcon = getByAltText('goal');
+
+    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(<Goal {...defaultProps} />);
+    const headerIcon = getByAltText('goal');
+
+    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(<Goal {...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/Medication/Medication.test.js

@@ -10,7 +10,7 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medication/example2.j
 import r4Example1 from '../../../fixtures/r4/resources/medication/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medication/example2.json';
 
-describe('should render Medication component properly', () => {
+describe('should render MedicationOrder component properly', () => {
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,

package/src/components/resources/MedicationKnowledge/MedicationKnowledge.js

@@ -142,7 +142,7 @@ const MedicationKnowledge = props => {
     <Root name="MedicationKnowledge">
       <Header>
         <Title>
-          {id ? `Medication knowledge ID: ${id}` : 'Medication knowledge'}{' '}
+          {id ? `Medication knowledge ID: ${id}` : 'MedicationOrder knowledge'}{' '}
           {status && <Badge data-testid="status">{status}</Badge>}
         </Title>
       </Header>

package/src/components/resources/MedicationOrder/MedicationOrder.js

@@ -10,7 +10,7 @@ import { Root, Header, Body } from '../../ui';
 
 const MedicationOrder = props => {
   const { fhirResource, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['Medication'];
+
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -56,7 +56,7 @@ const MedicationOrder = props => {
       <Accordion
         headerContent={
           <Header
-            icon={headerIcon}
+            icon={fhirIcons}
             resourceName="MedicationOrder"
             title={
               medicationReference && (

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

@@ -4,7 +4,6 @@ import { object } from '@storybook/addon-knobs';
 import MedicationOrder from './MedicationOrder';
 
 import dstu2Example from '../../../fixtures/dstu2/resources/medicationOrder/example.json';
-import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'MedicationOrder',
@@ -12,5 +11,5 @@ export default {
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example);
-  return <MedicationOrder fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+  return <MedicationOrder fhirResource={fhirResource} />;
 };

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

@@ -4,8 +4,75 @@ import { render } from '@testing-library/react';
 import MedicationOrder from './MedicationOrder';
 
 import example from '../../../fixtures/dstu2/resources/medicationOrder/example.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationOrder component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationOrder/medication-order.svg')}
+          alt="medication order"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    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: example,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: example,

package/src/components/resources/MedicationRequest/MedicationRequest.js

@@ -9,9 +9,7 @@ import Date from '../../datatypes/Date';
 
 import { Root, Header, Body } from '../../ui';
 
-const MedicationRequest = props => {
-  const { fhirResource, fhirIcons } = props;
-  const headerIcon = fhirIcons && fhirIcons['Medication'];
+const MedicationRequest = ({ fhirResource, fhirIcons }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -77,7 +75,7 @@ const MedicationRequest = props => {
       <Accordion
         headerContent={
           <Header
-            icon={headerIcon}
+            icon={fhirIcons}
             resourceName="MedicationRequest"
             title={
               medicationReference ? (

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

@@ -9,6 +9,7 @@ import R4Example1 from '../../../fixtures/r4/resources/medicationRequest/example
 import R4Example2 from '../../../fixtures/r4/resources/medicationRequest/example2.json';
 import R4Example3 from '../../../fixtures/r4/resources/medicationRequest/example3.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import MedicationRequestIcon from '../../../assets/containers/MedicationRequest/medication-request.svg';
 
 export default {
   title: 'MedicationRequest',
@@ -17,14 +18,20 @@ export default {
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
   return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+    <MedicationRequest
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationRequest/medication-request.svg')}
+    />
   );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
   return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+    <MedicationRequest
+      fhirResource={fhirResource}
+      fhirIcons={MedicationRequestIcon}
+    />
   );
 };
 
@@ -37,14 +44,12 @@ export const Example1OfR4 = () => {
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', R4Example2);
-  return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
-  );
+  return <MedicationRequest fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', R4Example3);
   return (
-    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={'random text'} />
   );
 };