fhir-react 0.3.4 → 0.3.7

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

@@ -9,8 +9,80 @@ import stu3Example1 from '../../../fixtures/stu3/resources/medication/example1.j
 import stu3Example2 from '../../../fixtures/stu3/resources/medication/example2.json';
 import r4Example1 from '../../../fixtures/r4/resources/medication/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medication/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Medication component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Medication {...defaultProps} />);
+    const headerIcon = getByAltText('medication');
+
+    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: dstu2Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Medication {...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: dstu2Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Medication/medication.svg')}
+          alt="medication"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Medication {...defaultProps} />);
+    const headerIcon = getByAltText('medication');
+
+    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: dstu2Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Medication {...defaultProps} />);
+    const headerIcon = getByAltText('medication');
+
+    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: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Medication {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -41,7 +113,9 @@ describe('should render Medication component properly', () => {
       fhirVersion: fhirVersions.STU3,
     };
 
-    const { container, getByTestId } = render(<Medication {...defaultProps} />);
+    const { container, getByTestId, getByAltText } = render(
+      <Medication {...defaultProps} />,
+    );
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toContain(
@@ -56,8 +130,8 @@ describe('should render Medication component properly', () => {
     );
     expect(getByTestId('package-container').textContent).toContain('Vial');
 
-    expect(getByTestId('product-images').textContent).toContain(
-      'Vancomycin Image',
+    expect(getByAltText('Vancomycin Image').src).toContain(
+      'https://www.drugs.com/images/pills/fio/AKN07410.JPG',
     );
   });
 

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

@@ -1,14 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import Accordion from '../../containers/Accordion/Accordion';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Coding from '../../datatypes/Coding';
 
-import { Root, Header, Title, Body, Value } from '../../ui';
+import { Root, Header, Body } from '../../ui';
 
 const MedicationOrder = props => {
-  const { fhirResource } = props;
+  const { fhirResource, fhirIcons } = props;
+
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -22,34 +24,49 @@ const MedicationOrder = props => {
   const dosageInstruction = _get(fhirResource, 'dosageInstruction');
   const hasDosageInstruction =
     Array.isArray(dosageInstruction) && dosageInstruction.length > 0;
+
+  const tableData = [
+    {
+      label: 'Medication',
+      testId: 'medication',
+      data: showMedicationCodeableConcept && (
+        <Coding fhirData={medicationCodeableConcept} />
+      ),
+      status: showMedicationCodeableConcept,
+    },
+    {
+      label: 'Reason',
+      testId: 'reasonCode',
+      data: reasonCode && <CodeableConcept fhirData={reasonCode} />,
+      status: reasonCode,
+    },
+    {
+      label: 'Dosage',
+      testId: 'hasDosageInstruction',
+      data:
+        hasDosageInstruction &&
+        dosageInstruction.map((item, i) => (
+          <p key={`dosage-instruction-item-${i}`}>{item.text}</p>
+        )),
+      status: hasDosageInstruction,
+    },
+  ];
   return (
     <Root name="MedicationOrder">
-      <Header>
-        <Title>
-          {medicationReference && <Reference fhirData={medicationReference} />}
-        </Title>
-      </Header>
-      <Body>
-        {showMedicationCodeableConcept && (
-          <Value label="Medication" data-testid="medication">
-            <Coding fhirData={medicationCodeableConcept} />
-          </Value>
-        )}
-        {reasonCode && (
-          <Value label="Reason" data-testid="reasonCode">
-            <CodeableConcept fhirData={reasonCode} />
-          </Value>
-        )}
-        {hasDosageInstruction && (
-          <Value label="Dosage" data-testid="hasDosageInstruction">
-            <ul>
-              {dosageInstruction.map((item, i) => (
-                <li key={`item-${i}`}>{item.text}</li>
-              ))}
-            </ul>
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="MedicationOrder"
+            title={
+              medicationReference && (
+                <Reference fhirData={medicationReference} />
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import Accordion from '../../containers/Accordion/Accordion';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
 
-import { Root, Header, Title, Body, Value } from '../../ui';
+import { Root, Header, Body } from '../../ui';
 
-const MedicationRequest = props => {
-  const { fhirResource } = props;
+const MedicationRequest = ({ fhirResource, fhirIcons }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -25,49 +25,69 @@ const MedicationRequest = props => {
     _get(fhirResource, 'requester.agent') || _get(fhirResource, 'requester');
   const created = _get(fhirResource, 'authoredOn');
   const intent = _get(fhirResource, 'intent');
+  const tableData = [
+    {
+      label: 'Medication',
+      testId: 'medication',
+      data: showMedicationCodeableConcept && (
+        <Coding fhirData={medicationCodeableConcept} />
+      ),
+      status: showMedicationCodeableConcept,
+    },
+    {
+      label: 'Requester',
+      testId: 'requester',
+      data: requester && <Reference fhirData={requester} />,
+      status: requester,
+    },
+    {
+      label: 'Created',
+      testId: 'created',
+      data: created && <Date fhirData={created} />,
+      status: created,
+    },
+    {
+      label: 'Type of request',
+      testId: 'intent',
+      data: intent,
+      status: intent,
+    },
+    {
+      label: 'Reason',
+      testId: 'reasonCode',
+      data: reasonCode && <CodeableConcept fhirData={reasonCode} />,
+      status: reasonCode,
+    },
+    {
+      label: 'Dosage',
+      testId: 'hasDosageInstruction',
+      data:
+        hasDosageInstruction &&
+        dosageInstruction.map((item, i) => (
+          <p key={`dosage-instruction-item-${i}`}>{item.text}</p>
+        )),
+      status: hasDosageInstruction,
+    },
+  ];
+
   return (
     <Root name="MedicationRequest">
-      <Header>
-        <Title>
-          {medicationReference && <Reference fhirData={medicationReference} />}
-        </Title>
-      </Header>
-      <Body>
-        {showMedicationCodeableConcept && (
-          <Value label="Medication" data-testid="medication">
-            <Coding fhirData={medicationCodeableConcept} />
-          </Value>
-        )}
-        {requester && (
-          <Value label="Requester" data-testid="requester">
-            <Reference fhirData={requester} />
-          </Value>
-        )}
-        {created && (
-          <Value label="Created" data-testid="created">
-            <Date fhirData={created} />
-          </Value>
-        )}
-        {intent && (
-          <Value label="Type of request" data-testid="intent">
-            {intent}
-          </Value>
-        )}
-        {reasonCode && (
-          <Value label="Reason" data-testid="reasonCode">
-            <CodeableConcept fhirData={reasonCode} />
-          </Value>
-        )}
-        {hasDosageInstruction && (
-          <Value label="Dosage" data-testid="hasDosageInstruction">
-            <ul>
-              {dosageInstruction.map((item, i) => (
-                <li key={`item-${i}`}>{item.text}</li>
-              ))}
-            </ul>
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="MedicationRequest"
+            title={
+              medicationReference ? (
+                <Reference fhirData={medicationReference} />
+              ) : (
+                'Medication request'
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -8,6 +8,8 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationRequest/exa
 import R4Example1 from '../../../fixtures/r4/resources/medicationRequest/example1.json';
 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',
@@ -15,25 +17,39 @@ export default {
 
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationRequest/medication-request.svg')}
+    />
+  );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest
+      fhirResource={fhirResource}
+      fhirIcons={MedicationRequestIcon}
+    />
+  );
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', R4Example1);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+  );
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', R4Example2);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return <MedicationRequest fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', R4Example3);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={'random text'} />
+  );
 };

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

@@ -8,8 +8,75 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationRequest/exa
 import r4Example1 from '../../../fixtures/r4/resources/medicationRequest/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medicationRequest/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/medicationRequest/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationRequest component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationOrder/medication-request.svg')}
+          alt="medication request"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    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: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,

package/src/components/resources/MedicationStatement/MedicationDetails.js

@@ -0,0 +1,52 @@
+import { ValueSection, ValueSectionItem } from '../../ui';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
+import _get from 'lodash/get';
+
+const MedicationDetails = props => {
+  const {
+    medication,
+    expiration,
+    ingredient,
+    medicationReference,
+    hasReasonCode,
+    reasonCode,
+  } = props;
+  return (
+    <ValueSection label={medication} marginBottom>
+      <ValueSectionItem label="Expiration date" data-testid="expirationDate">
+        {expiration}
+      </ValueSectionItem>
+      {ingredient && (
+        <ValueSectionItem label="Ingredient" data-testid="ingredient">
+          {ingredient.map((item, i) => (
+            <div key={`item-${i}`} data-testid="ingredient-item">
+              {_get(item, 'itemCodeableConcept.coding.0.display', '')}
+            </div>
+          ))}
+        </ValueSectionItem>
+      )}
+      {medicationReference && (
+        <ValueSectionItem
+          label="Medication reference"
+          data-testid="medicationReference"
+        >
+          {<Reference fhirData={medicationReference} />}
+        </ValueSectionItem>
+      )}
+      {hasReasonCode && (
+        <ValueSectionItem label="Reasons" data-testid="hasReasonCode">
+          {reasonCode.map((item, i) => {
+            const display = _get(item, 'coding.0.display');
+            if (display) {
+              return <div key={`item-${i}`}>{display}</div>;
+            }
+            return null;
+          })}
+        </ValueSectionItem>
+      )}
+    </ValueSection>
+  );
+};
+
+export default MedicationDetails;

package/src/components/resources/MedicationStatement/MedicationDosage.js

@@ -0,0 +1,46 @@
+import { ValueSection, ValueSectionItem } from '../../ui';
+import React from 'react';
+import _get from 'lodash/get';
+
+const MedicationDosage = props => {
+  const { dosage, hasNote, note, itemNumber } = props;
+
+  const instructions = _get(dosage, 'text');
+  const additionalInstructionText = _get(
+    dosage,
+    'additionalInstruction[0].text',
+  );
+  const route =
+    _get(dosage, 'route.coding[0].display') ||
+    `${_get(dosage, 'route.text', '')} ${_get(dosage, 'text', '')}`;
+  const hasRoute = route.trim() !== '';
+
+  return (
+    <ValueSection label="Dosage" key={itemNumber}>
+      <ValueSectionItem label="Instructions" data-testid="dosageInstruction">
+        {instructions}
+      </ValueSectionItem>
+      {additionalInstructionText && (
+        <ValueSectionItem
+          label="Additional instruction"
+          data-testid="additionalInstruction"
+        >
+          {additionalInstructionText}
+        </ValueSectionItem>
+      )}
+      {hasRoute && (
+        <ValueSectionItem label="Route" data-testid="route">
+          {route}
+        </ValueSectionItem>
+      )}
+      {hasNote && (
+        <ValueSectionItem label="Notes" data-testid="hasNote">
+          {note.map((item, i) => (
+            <div key={`note-${i}`}>{item.text}</div>
+          ))}
+        </ValueSectionItem>
+      )}
+    </ValueSection>
+  );
+};
+export default MedicationDosage;