fhir-react 0.2.4 → 0.3.3

package/src/components/resources/Immunization/Immunization.js

@@ -1,23 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Badge, Body, Header, Root } from '../../ui';
 
-import Reference from '../../datatypes/Reference';
+import Accordion from '../../containers/Accordion';
+import Annotation from '../../datatypes/Annotation';
 import Coding from '../../datatypes/Coding';
+import Date from '../../datatypes/Date';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
-import Date from '../../datatypes/Date';
-import Annotation from '../../datatypes/Annotation';
 import fhirVersions from '../fhirResourceVersions';
-
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-} from '../../ui';
+import { Value } from '../../ui';
 
 const commonDTO = fhirResource => {
   const title =
@@ -111,13 +104,11 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 
 const Immunization = props => {
-  const { fhirVersion, fhirResource } = props;
-
+  const { fhirVersion, fhirResource, fhirIcons } = props;
   const {
     title,
     status,
     providedDate,
-    reported,
     manufacturerText,
     hasLotNumber,
     lotNumber,
@@ -134,84 +125,124 @@ const Immunization = props => {
     note,
   } = resourceDTO(fhirVersion, fhirResource);
 
+  const headerIcon = fhirIcons && fhirIcons[_get(fhirResource, 'resourceType')];
+  const tableData = [
+    {
+      label: 'Manufacturer Text',
+      testId: '',
+      data: manufacturerText,
+      status: manufacturerText,
+    },
+    {
+      label: 'Manufacturer Text',
+      testId: 'lotNumber',
+      data: (
+        <>
+          {lotNumber}
+          {lotNumberExpirationDate && (
+            <span>
+              {' '}
+              expires on{' '}
+              <Date
+                testId="lotNumberExpirationDate"
+                fhirData={lotNumberExpirationDate}
+                isBlack
+              />
+            </span>
+          )}
+        </>
+      ),
+      status: hasLotNumber,
+    },
+    {
+      label: 'Dosage',
+      testId: 'doseQuantity',
+      data:
+        doseQuantity &&
+        [
+          _get(doseQuantity, 'value'),
+          _get(doseQuantity, 'unit') || _get(doseQuantity, 'code'),
+        ].join(' '),
+      status: hasDoseQuantity,
+    },
+    {
+      label: 'Patient',
+      testId: 'patient',
+      data: patient && <Reference fhirData={patient} />,
+      status: patient,
+    },
+    {
+      label: 'Requester',
+      testId: 'requester',
+      data: requester && <Reference fhirData={requester} />,
+      status: requester,
+    },
+    {
+      label: 'Performer',
+      testId: 'performer',
+      data: performer && <Reference fhirData={performer} />,
+      status: performer,
+    },
+    {
+      label: 'Note',
+      testId: 'note',
+      data: note && <Annotation fhirData={note} />,
+      status: note,
+    },
+    {
+      label: 'Route',
+      testId: 'route',
+      data: hasRoute && route && (
+        <>
+          {route.map((coding, i) => {
+            return (
+              <div key={`item-${i}`}>
+                <Coding fhirData={coding} />
+              </div>
+            );
+          })}
+        </>
+      ),
+      status: hasRoute,
+    },
+    {
+      label: 'Site',
+      testId: 'site',
+      data: hasSite && site && (
+        <>
+          {site.map((coding, i) => {
+            return (
+              <div key={`item-${i}`}>
+                <Coding fhirData={coding} />
+              </div>
+            );
+          })}
+        </>
+      ),
+      status: hasSite,
+    },
+  ];
+
   return (
     <Root name="Immunization">
-      <Header>
-        <Title data-testid="title">{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {providedDate && (
-          <BadgeSecondary data-testid="providedDate">
-            provided on <Date fhirData={providedDate} />
-            {reported || ''}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {manufacturerText && (
-          <Value label="Manufacturer Text">{manufacturerText}</Value>
-        )}
-        {hasLotNumber && (
-          <Value label="Lot number" data-testid="lotNumber">
-            {lotNumber}
-            {lotNumberExpirationDate && (
-              <span data-testid="lotNumberExpirationDate">
-                {' '}
-                expires on {lotNumberExpirationDate}
-              </span>
-            )}
-          </Value>
-        )}
-        {hasDoseQuantity && (
-          <Value label="Dosage" data-testid="doseQuantity">
-            <div>
-              {_get(doseQuantity, 'value')} &nbsp;
-              {_get(doseQuantity, 'unit') || _get(doseQuantity, 'code')}
-            </div>
-          </Value>
-        )}
-        {patient && (
-          <Value label="Patient" data-testid="patient">
-            <Reference fhirData={patient} />
-          </Value>
-        )}
-        {requester && (
-          <Value label="Requester" data-testid="requester">
-            <Reference fhirData={requester} />
-          </Value>
-        )}
-        {performer && (
-          <Value label="Performer" data-testid="performer">
-            <Reference fhirData={performer} />
-          </Value>
-        )}
-        {note && (
-          <Value label="Note" data-testid="note">
-            <Annotation fhirData={note} />
-          </Value>
-        )}
-        {hasRoute && (
-          <Value label="Route" data-testid="route">
-            {route.map((coding, i) => {
-              return (
-                <div key={`item-${i}`}>
-                  <Coding fhirData={coding} />
-                </div>
-              );
-            })}
-          </Value>
-        )}
-        {hasSite && (
-          <Value label="Site" data-testid="site">
-            {site.map((coding, i) => {
-              return (
-                <div key={`item-${i}`}>
-                  <Coding fhirData={coding} />
-                </div>
-              );
-            })}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Immunization"
+            additionalContent={
+              providedDate && (
+                <Value label="Start date" data-testid="headerStartDate">
+                  <Date fhirData={providedDate} isBlack />
+                </Value>
+              )
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={headerIcon}
+            title={title}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -10,6 +10,7 @@ import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.
 import r4Example1 from '../../../fixtures/r4/resources/immunization/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/immunization/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/immunization/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'Immunization',
@@ -21,6 +22,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Immunization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -31,6 +33,7 @@ export const Example2OfDSTU2 = () => {
     <Immunization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -38,25 +41,41 @@ export const Example2OfDSTU2 = () => {
 export const ExampleSTU3 = () => {
   const fhirResource = object('Resource', stu3Example);
   return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Immunization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example1R4 = () => {
   const fhirResource = object('Resource', r4Example1);
   return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Immunization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example2R4 = () => {
   const fhirResource = object('Resource', r4Example2);
   return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Immunization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example3R4 = () => {
   const fhirResource = object('Resource', r4Example3);
   return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Immunization
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };

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

@@ -1,18 +1,20 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import fhirVersions from '../fhirResourceVersions';
 import Immunization from './Immunization';
+import React from 'react';
 import dstu2Example from '../../../fixtures/dstu2/resources/immunization/example1.json';
-import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.json';
+import fhirVersions from '../fhirResourceVersions';
 import r4Example1 from '../../../fixtures/r4/resources/immunization/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/immunization/example2.json';
+import { render } from '@testing-library/react';
+import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.json';
+
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render Immunization component properly', () => {
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example,
       fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
     };
 
     const { container, getByTestId } = render(
@@ -23,11 +25,11 @@ describe('should render Immunization component properly', () => {
 
     expect(getByTestId('title').textContent).toContain('Fluvax');
 
-    expect(getByTestId('providedDate').textContent).toContain('on 2013-01-10');
+    expect(getByTestId('providedDate').textContent).toContain('1/10/2013');
 
     expect(getByTestId('lotNumber').textContent).toContain('AAJN11K');
     expect(getByTestId('lotNumberExpirationDate').textContent).toContain(
-      '2015-02-15',
+      '2/15/2015',
     );
 
     expect(getByTestId('doseQuantity').textContent).toContain('5');
@@ -53,6 +55,7 @@ describe('should render Immunization component properly', () => {
     const defaultProps = {
       fhirResource: stu3Example,
       fhirVersion: fhirVersions.STU3,
+      fhirIcons: fhirIcons,
     };
 
     const { container, getByTestId } = render(
@@ -63,11 +66,11 @@ describe('should render Immunization component properly', () => {
 
     expect(getByTestId('title').textContent).toContain('Fluvax');
 
-    expect(getByTestId('providedDate').textContent).toContain('on 2013-01-10');
+    expect(getByTestId('providedDate').textContent).toContain('1/10/2013');
 
     expect(getByTestId('lotNumber').textContent).toContain('AAJN11K');
     expect(getByTestId('lotNumberExpirationDate').textContent).toContain(
-      '2015-02-15',
+      '2/15/2015',
     );
 
     expect(getByTestId('doseQuantity').textContent).toContain('5');
@@ -87,6 +90,7 @@ describe('should render Immunization component properly', () => {
     const defaultProps = {
       fhirResource: r4Example1,
       fhirVersion: fhirVersions.R4,
+      fhirIcons: fhirIcons,
     };
 
     const { container, getByTestId } = render(
@@ -97,11 +101,11 @@ describe('should render Immunization component properly', () => {
 
     expect(getByTestId('title').textContent).toContain('Fluvax');
 
-    expect(getByTestId('providedDate').textContent).toContain('on 2013-01-10');
+    expect(getByTestId('providedDate').textContent).toContain('1/10/2013');
 
     expect(getByTestId('lotNumber').textContent).toContain('AAJN11K');
     expect(getByTestId('lotNumberExpirationDate').textContent).toContain(
-      '2015-02-15',
+      '2/15/2015',
     );
 
     expect(getByTestId('doseQuantity').textContent).toContain('5');
@@ -121,6 +125,7 @@ describe('should render Immunization component properly', () => {
     const defaultProps = {
       fhirResource: r4Example2,
       fhirVersion: fhirVersions.R4,
+      fhirIcons: fhirIcons,
     };
 
     const { container, getByTestId, queryByTestId } = render(
@@ -131,7 +136,7 @@ describe('should render Immunization component properly', () => {
 
     expect(getByTestId('title').textContent).toContain('DTP');
 
-    expect(getByTestId('providedDate').textContent).toContain('on 2013-01-10');
+    expect(getByTestId('providedDate').textContent).toContain('1/10/2013');
 
     expect(getByTestId('patient').textContent).toEqual('Patient/example');
 

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

@@ -25,7 +25,7 @@ describe('should render List component properly', () => {
     expect(getByTestId('identifier').textContent).toContain('23974652');
     expect(getByTestId('mode').textContent).toContain('changes');
     expect(getByTestId('subject').textContent).toContain('Patient/example');
-    expect(getByTestId('date').textContent).toContain('2012-11-25');
+    expect(getByTestId('date').textContent).toContain('11/25/2012');
     expect(queryByTestId('code')).toBeNull();
     expect(getByTestId('source').textContent).toContain('Patient/example');
     expect(getByTestId('entries')).not.toBeNull();
@@ -45,7 +45,7 @@ describe('should render List component properly', () => {
 
     expect(getByTestId('identifier').textContent).toContain('test');
     expect(getByTestId('mode').textContent).toContain('snapshot');
-    expect(getByTestId('date').textContent).toContain('2015-06-12');
+    expect(getByTestId('date').textContent).toContain('6/12/20');
     expect(getByTestId('entries')).not.toBeNull();
     expect(queryByTestId('usdfExtensions')).toBeNull();
   });
@@ -64,7 +64,7 @@ describe('should render List component properly', () => {
 
     expect(getByTestId('identifier').textContent).toContain('test');
     expect(getByTestId('mode').textContent).toContain('snapshot');
-    expect(getByTestId('date').textContent).toContain('2015-06-12');
+    expect(getByTestId('date').textContent).toContain('6/12/2015');
     expect(getByTestId('entries')).not.toBeNull();
 
     expect(queryByTestId('usdfExtensions')).not.toBeNull();

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

@@ -30,9 +30,9 @@ describe('should render MedicationAdministration component properly', () => {
       'Practitioner/example',
     );
 
-    expect(getByTestId('periodTimeStart').textContent).toEqual('2015-01-15');
+    expect(getByTestId('periodTimeStart').textContent).toEqual('1/15/2015');
 
-    expect(getByTestId('periodTimeEnd').textContent).toEqual('2015-01-15');
+    expect(getByTestId('periodTimeEnd').textContent).toEqual('1/15/2015');
 
     expect(getByTestId('dosageRoute').textContent).toContain(
       'Intravenous route',
@@ -58,7 +58,7 @@ describe('should render MedicationAdministration component properly', () => {
 
     expect(getByTestId('practitioner').textContent).toContain('Patrick Pump');
 
-    expect(getByTestId('periodTimeStart').textContent).toEqual('2015-01-15');
+    expect(getByTestId('periodTimeStart').textContent).toEqual('1/15/2015');
 
     expect(getByTestId('periodTimeEnd').textContent).toEqual('-');
 
@@ -83,8 +83,8 @@ describe('should render MedicationAdministration component properly', () => {
     expect(getByTestId('status').textContent).toContain('on-hold');
     expect(getByTestId('patient').textContent).toContain('Donald Duck');
     expect(queryByTestId('practitioner')).toBeNull();
-    expect(getByTestId('periodTimeStart').textContent).toEqual('2015-01-15');
-    expect(getByTestId('periodTimeEnd').textContent).toEqual('2015-01-15');
+    expect(getByTestId('periodTimeStart').textContent).toEqual('1/15/2015');
+    expect(getByTestId('periodTimeEnd').textContent).toEqual('1/15/2015');
     expect(getByTestId('dosageRoute').textContent).toContain('-');
     expect(getByTestId('dosageQuantity').textContent).toEqual('-');
   });
@@ -103,8 +103,8 @@ describe('should render MedicationAdministration component properly', () => {
     expect(getByTestId('status').textContent).toContain('completed');
     expect(getByTestId('patient').textContent).toContain('Donald Duck');
     expect(getByTestId('practitioner').textContent).toContain('Patrick Pump');
-    expect(getByTestId('periodTimeStart').textContent).toEqual('2015-01-15');
-    expect(getByTestId('periodTimeEnd').textContent).toEqual('2015-01-15');
+    expect(getByTestId('periodTimeStart').textContent).toEqual('1/15/2015');
+    expect(getByTestId('periodTimeEnd').textContent).toEqual('1/15/2015');
     expect(getByTestId('dosageRoute').textContent).toContain('Oral Route');
     expect(getByTestId('dosageQuantity').textContent).toEqual('2 TAB');
   });

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

@@ -21,7 +21,7 @@ describe('should render Device component properly', () => {
 
     expect(getByTestId('title').textContent).toEqual('prescribed medication');
     expect(getByTestId('typeCoding').textContent).toContain('Part Fill');
-    expect(getByTestId('whenPrepared').textContent).toContain('2015-03-01');
+    expect(getByTestId('whenPrepared').textContent).toContain('3/1/2015');
     expect(getByTestId('hasDosageInstruction').textContent).toContain(
       'or after food',
     );
@@ -60,7 +60,7 @@ describe('should render Device component properly', () => {
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toContain('Novolog 100u/ml');
-    expect(getByTestId('whenPrepared').textContent).toEqual('2015-01-15');
+    expect(getByTestId('whenPrepared').textContent).toEqual('1/15/2015');
     expect(
       within(getByTestId('hasDosageInstruction'))
         .queryAllByTestId('dosageTiming')

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

@@ -28,7 +28,7 @@ describe('should render MedicationRequest component properly', () => {
       'Take one tablet',
     );
     expect(getByTestId('requester').textContent).toContain('Patrick Pump');
-    expect(getByTestId('created').textContent).toEqual('2015-03-01');
+    expect(getByTestId('created').textContent).toEqual('3/1/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
   it('should render with STU3 source data in which medicationReference key does not exist', () => {
@@ -59,7 +59,7 @@ describe('should render MedicationRequest component properly', () => {
       'Take one tablet',
     );
     expect(getByTestId('requester').textContent).toContain('Patrick Pump');
-    expect(getByTestId('created').textContent).toEqual('2015-03-01');
+    expect(getByTestId('created').textContent).toEqual('3/1/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
 
@@ -79,7 +79,7 @@ describe('should render MedicationRequest component properly', () => {
       'Take 4 tablets daily',
     );
     expect(getByTestId('requester').textContent).toContain('Patrick Pump');
-    expect(getByTestId('created').textContent).toEqual('2015-01-15');
+    expect(getByTestId('created').textContent).toEqual('1/15/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
 
@@ -101,7 +101,7 @@ describe('should render MedicationRequest component properly', () => {
       '6 mg PO daily for remission',
     );
     expect(getByTestId('requester').textContent).toContain('Patrick Pump');
-    expect(getByTestId('created').textContent).toEqual('2015-01-15');
+    expect(getByTestId('created').textContent).toEqual('1/15/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
 });