fhir-react 0.2.4 → 0.3.3

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

@@ -1,23 +1,23 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import Condition from './Condition';
-import fhirVersions from '../fhirResourceVersions';
-
+import React from 'react';
+import example1ConditionSeverityR4 from '../../../fixtures/r4/resources/condition/example1.json';
+import example2ConditionSeverityR4 from '../../../fixtures/r4/resources/condition/example2.json';
+import example3ConditionSeverityR4 from '../../../fixtures/r4/resources/condition/example3.json';
 import exampleCondition from '../../../fixtures/dstu2/resources/condition/example.json';
-import exampleConditionSeverity from '../../../fixtures/dstu2/resources/condition/example-severity.json';
-
 import exampleConditionSTU3 from '../../../fixtures/stu3/resources/condition/example.json';
+import exampleConditionSeverity from '../../../fixtures/dstu2/resources/condition/example-severity.json';
 import exampleConditionSeveritySTU3 from '../../../fixtures/stu3/resources/condition/example-severity.json';
+import fhirVersions from '../fhirResourceVersions';
+import { render } from '@testing-library/react';
 
-import example1ConditionSeverityR4 from '../../../fixtures/r4/resources/condition/example1.json';
-import example2ConditionSeverityR4 from '../../../fixtures/r4/resources/condition/example2.json';
-import example3ConditionSeverityR4 from '../../../fixtures/r4/resources/condition/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render component correctly', () => {
   it('DSTU2 - without severity field', () => {
     const defaultProps = {
       fhirResource: exampleCondition,
       fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId, queryAllByTestId } = render(
       <Condition {...defaultProps} />,
@@ -31,12 +31,13 @@ describe('should render component correctly', () => {
     const defaultProps = {
       fhirResource: exampleConditionSeverity,
       fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Condition {...defaultProps} />);
 
     expect(getByTestId('clinicalStatus').textContent).toEqual('active');
     expect(getByTestId('severity').textContent).toEqual('Medium severity');
-    expect(getByTestId('onsetDate').textContent).toEqual('2015-08-24');
+    expect(getByTestId('onsetDate').textContent).toEqual('8/24/2015');
     expect(getByTestId('asserter').textContent).toEqual(
       'MOORE, NICKPractitioner/f8fedcd9e6e565a21f457909',
     );
@@ -46,6 +47,7 @@ describe('should render component correctly', () => {
     const defaultProps = {
       fhirResource: exampleConditionSTU3,
       fhirVersion: fhirVersions.STU3,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId, queryAllByTestId } = render(
       <Condition {...defaultProps} />,
@@ -59,6 +61,7 @@ describe('should render component correctly', () => {
     const defaultProps = {
       fhirResource: exampleConditionSeveritySTU3,
       fhirVersion: fhirVersions.STU3,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Condition {...defaultProps} />);
 
@@ -66,7 +69,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('severity').textContent).toEqual(
       'Moderate to severe severity',
     );
-    expect(getByTestId('onsetDate').textContent).toEqual('2013-03-08');
+    expect(getByTestId('onsetDate').textContent).toEqual('3/8/2013');
     expect(getByTestId('asserter').textContent).toEqual('Practitioner/f201');
   });
 
@@ -74,6 +77,7 @@ describe('should render component correctly', () => {
     const defaultProps = {
       fhirResource: example1ConditionSeverityR4,
       fhirVersion: fhirVersions.R4,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId, queryAllByTestId } = render(
       <Condition {...defaultProps} />,
@@ -81,7 +85,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('clinicalStatus').textContent).toEqual('active');
     expect(getByTestId('severity').textContent).toEqual('Severe severity');
-    expect(getByTestId('onsetDate').textContent).toEqual('2012-05-24');
+    expect(getByTestId('onsetDate').textContent).toEqual('5/24/2012');
     expect(queryAllByTestId('asserter').length).toEqual(0);
     expect(queryAllByTestId('dateRecorded').length).toEqual(0);
   });
@@ -90,6 +94,7 @@ describe('should render component correctly', () => {
     const defaultProps = {
       fhirResource: example2ConditionSeverityR4,
       fhirVersion: fhirVersions.R4,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId, queryAllByTestId } = render(
       <Condition {...defaultProps} />,
@@ -106,13 +111,14 @@ describe('should render component correctly', () => {
     const defaultProps = {
       fhirResource: example3ConditionSeverityR4,
       fhirVersion: fhirVersions.R4,
+      fhirIcons: fhirIcons,
     };
     const { getByTestId } = render(<Condition {...defaultProps} />);
 
     expect(getByTestId('clinicalStatus').textContent).toEqual('resolved');
     expect(getByTestId('severity').textContent).toEqual('Mild severity');
-    expect(getByTestId('onsetDate').textContent).toEqual('2013-04-02');
+    expect(getByTestId('onsetDate').textContent).toEqual('4/2/2013');
     expect(getByTestId('asserter').textContent).toEqual('Practitioner/f201');
-    expect(getByTestId('dateRecorded').textContent).toEqual('2013-04-04');
+    expect(getByTestId('dateRecorded').textContent).toEqual('4/4/2013');
   });
 });

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

@@ -19,12 +19,10 @@ describe('should render component correctly', () => {
     expect(getByTestId('title').textContent).toContain(
       'blood count (hemogram)',
     );
-    expect(getByTestId('effectiveDateTime').textContent).toContain(
-      '2013-04-02',
-    );
+    expect(getByTestId('effectiveDateTime').textContent).toContain('4/2/2013');
 
     expect(getByTestId('categoryCoding').textContent).toContain('Haematology');
-    expect(getByTestId('issued').textContent).toContain('2013-05-15');
+    expect(getByTestId('issued').textContent).toContain('5/15/2013');
     expect(getByTestId('performer').textContent).toContain(
       'University Medical ',
     );
@@ -40,7 +38,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('title').textContent).toContain(
       'blood count (hemogram)',
     );
-    expect(getByTestId('issued').textContent).toContain('2013-05-15');
+    expect(getByTestId('issued').textContent).toContain('5/15/2013');
     expect(getByTestId('categoryCoding').textContent).toContain(
       'Haematology test',
     );
@@ -60,7 +58,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('title').textContent).toContain(
       'blood count (hemogram)',
     );
-    expect(getByTestId('issued').textContent).toContain('2013-05-15');
+    expect(getByTestId('issued').textContent).toContain('5/15/2013');
     expect(getByTestId('categoryCoding').textContent).toContain(
       'Haematology test',
     );
@@ -78,7 +76,7 @@ describe('should render component correctly', () => {
     const { getByTestId } = render(<DiagnosticReport {...defaultProps} />);
 
     expect(getByTestId('title').textContent).toContain('Culture, MRSA');
-    expect(getByTestId('issued').textContent).toContain('2009-08-10');
+    expect(getByTestId('issued').textContent).toContain('8/10/2009');
     expect(getByTestId('categoryCoding').textContent).toContain('(MB)');
 
     expect(getByTestId('performer').textContent).toContain('Todd Ashby');

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

@@ -244,7 +244,7 @@ const DocumentReference = props => {
   return (
     <Root name="DocumentReference">
       <Header>
-        <Title data-testid="description">{description}</Title>
+        <Title data-testid="title">{description}</Title>
         {status && <Badge data-testid="status">{status}</Badge>}
         {docStatus && (
           <BadgeSecondary data-testid="docStatus">{docStatus}</BadgeSecondary>

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

@@ -21,7 +21,7 @@ describe('should render the DocumentReference component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Physical');
     expect(getByTestId('status').textContent).toEqual('current');
     expect(getByTestId('docStatus').textContent).toEqual('preliminary');
-    expect(getByTestId('createdAt').textContent).toEqual('2005-12-24');
+    expect(getByTestId('createdAt').textContent).toEqual('12/24/2005');
     expect(getByTestId('type').textContent.split(nbspRegex)).toEqual([
       'Outpatient Note',
       '(34108-1)',
@@ -70,7 +70,7 @@ describe('should render the DocumentReference component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Physical');
     expect(getByTestId('status').textContent).toEqual('current');
     expect(getByTestId('docStatus').textContent).toEqual('preliminary');
-    expect(getByTestId('createdAt').textContent).toEqual('2005-12-24');
+    expect(getByTestId('createdAt').textContent).toEqual('12/24/2005');
     expect(getByTestId('type').textContent.split(nbspRegex)).toEqual([
       'Outpatient Note',
       '(34108-1)',
@@ -119,7 +119,7 @@ describe('should render the DocumentReference component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Physical');
     expect(getByTestId('status').textContent).toEqual('current');
     expect(queryByTestId('docStatus')).toBeNull();
-    expect(getByTestId('createdAt').textContent).toEqual('2005-12-24');
+    expect(getByTestId('createdAt').textContent).toEqual('12/24/2005');
     expect(getByTestId('type').textContent.split(nbspRegex)).toEqual([
       'Outpatient Note',
       '(34108-1)',

package/src/components/resources/Encounter/Encounter.js

@@ -8,16 +8,9 @@ import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
 import DateType from '../../datatypes/Date';
 import CodableConcept from '../../datatypes/CodeableConcept';
+import Accordion from '../../containers/Accordion';
 
-import {
-  Root,
-  Header,
-  Title,
-  Body,
-  Value,
-  MissingValue,
-  Badge,
-} from '../../ui';
+import { Root, Header, Body, Value, MissingValue, Badge } from '../../ui';
 
 const commonDTO = fhirResource => {
   const resourceStatus = _get(fhirResource, 'status');
@@ -69,11 +62,15 @@ const dstu2DTO = fhirResource => {
 
 const stu3DTO = fhirResource => {
   let periodEnd = _get(fhirResource, 'period.end');
-  periodEnd = periodEnd ? <DateType fhirData={periodEnd} /> : <MissingValue />;
+  periodEnd = periodEnd ? (
+    <DateType fhirData={periodEnd} isBlack />
+  ) : (
+    <MissingValue />
+  );
 
   let periodStart = _get(fhirResource, 'period.start');
   periodStart = periodStart ? (
-    <DateType fhirData={periodStart} />
+    <DateType fhirData={periodStart} isBlack />
   ) : (
     <MissingValue />
   );
@@ -82,7 +79,7 @@ const stu3DTO = fhirResource => {
   const participant = _get(fhirResource, 'participant', []).map(item => {
     let periodStart = _get(item, 'period.start');
     if (periodStart) {
-      periodStart = <DateType fhirData={periodStart} />;
+      periodStart = <DateType fhirData={periodStart} isBlack />;
     }
     const reference = _get(item, 'individual', {});
     return {
@@ -103,11 +100,15 @@ const stu3DTO = fhirResource => {
 
 const r4DTO = fhirResource => {
   let periodEnd = _get(fhirResource, 'period.end');
-  periodEnd = periodEnd ? <DateType fhirData={periodEnd} /> : <MissingValue />;
+  periodEnd = periodEnd ? (
+    <DateType fhirData={periodEnd} isBlack />
+  ) : (
+    <MissingValue />
+  );
 
   let periodStart = _get(fhirResource, 'period.start');
   periodStart = periodStart ? (
-    <DateType fhirData={periodStart} />
+    <DateType fhirData={periodStart} isBlack />
   ) : (
     <MissingValue />
   );
@@ -115,7 +116,7 @@ const r4DTO = fhirResource => {
   const participant = _get(fhirResource, 'participant', []).map(item => {
     let periodStart = _get(item, 'period.start');
     if (periodStart) {
-      periodStart = <DateType fhirData={periodStart} />;
+      periodStart = <DateType fhirData={periodStart} isBlack />;
     }
     const reference = _get(item, 'individual', {});
     return {
@@ -176,31 +177,60 @@ const Encounter = props => {
     encounterType,
     resourceClass,
     resourceStatus,
+    resourceName,
     participant,
   } = fhirResourceData;
+
+  const tableData = [
+    {
+      label: 'End date',
+      testId: 'endDate',
+      data: periodEnd,
+      status: periodEnd,
+    },
+    {
+      label: 'Type',
+      testId: 'encounterType',
+      data: encounterType && <CodableConcept fhirData={encounterType} />,
+      status: encounterType,
+    },
+    {
+      label: 'Class',
+      testId: 'resourceClass',
+      data: resourceClass,
+      status: resourceClass,
+    },
+  ];
+
   return (
     <Root name="encounter">
-      <Header>
-        <Title data-testid="title">{locationDisplay}</Title>
-        {resourceStatus && <Badge>{resourceStatus}</Badge>}
-      </Header>
-      <Body>
-        {periodStart && <Value label="Start date">{periodStart}</Value>}
-        {periodEnd && <Value label="End date">{periodEnd}</Value>}
-        {encounterType && (
-          <Value label="Type" data-testid="encounterType">
-            <CodableConcept fhirData={encounterType} />
-          </Value>
-        )}
-        {resourceClass && (
-          <Value label="Class" data-testid="resourceClass">
-            {resourceClass}
-          </Value>
-        )}
-        {hasParticipant && (
-          <EncounterParticipants allParticipant={participant} />
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={resourceName}
+            additionalContent={
+              periodStart && (
+                <Value label="Start date" data-testid="headerStartDate">
+                  {periodStart}
+                </Value>
+              )
+            }
+            badges={
+              resourceStatus && (
+                <Badge data-testid="status">{resourceStatus}</Badge>
+              )
+            }
+            title={locationDisplay}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {hasParticipant && (
+              <EncounterParticipants allParticipant={participant} />
+            )}
+          </Body>
+        }
+      />
     </Root>
   );
 };

package/src/components/resources/Encounter/EncounterParticipants.js

@@ -9,7 +9,7 @@ const EncounterParticipants = props => {
     />
   ));
   return (
-    <ValueSection label="Participants">
+    <ValueSection label="Participants" marginTop>
       <Table>
         <thead>
           <TableRow>
@@ -18,7 +18,7 @@ const EncounterParticipants = props => {
             <TableHeader>Date</TableHeader>
           </TableRow>
         </thead>
-        <tbody>{allParticipant}</tbody>
+        <tbody className="border-top-0">{allParticipant}</tbody>
       </Table>
     </ValueSection>
   );

package/src/components/resources/ExplanationOfBenefit/CareTeam.js

@@ -13,7 +13,7 @@ import CodeableConcept from '../../datatypes/CodeableConcept';
 
 const CareTeam = ({ fhirData: careTeam = [] }) => {
   return (
-    <ValueSection label="Team members" data-testid="teamMembers">
+    <ValueSection label="Team members" data-testid="teamMembers" marginTop>
       <Table>
         <thead>
           <TableRow>
@@ -23,7 +23,7 @@ const CareTeam = ({ fhirData: careTeam = [] }) => {
             <TableHeader>Qualification</TableHeader>
           </TableRow>
         </thead>
-        <tbody>
+        <tbody className="border-top-0">
           {careTeam.map((member, idx) => (
             <TeamMember
               key={idx}

package/src/components/resources/ExplanationOfBenefit/Diagnosis.js

@@ -18,31 +18,41 @@ const Diagnosis = ({ fhirData }) => {
     return (
       <div key={`total-${index}`}>
         <ValueSection
+          dirColumn
           label={`Diagnosis ${sequence}${id ? ` (id: ${id})` : ''}`}
           data-testid="diagnosis"
+          marginTop
         >
           {reference && (
-            <Value label="Diagnosis" data-testid="reference">
+            <Value dirColumn label="Diagnosis" data-testid="reference">
               <Reference fhirData={reference} />
             </Value>
           )}
           {codeableConcept && (
-            <Value label="Diagnosis" data-testid="codeableConcept">
+            <Value dirColumn label="Diagnosis" data-testid="codeableConcept">
               <CodeableConcept fhirData={codeableConcept} />
             </Value>
           )}
           {type && (
-            <Value label="Type" data-testid="diagnosisType">
+            <Value dirColumn label="Type" data-testid="diagnosisType">
               <CodeableConcept fhirData={type} />
             </Value>
           )}
           {onAdmission && (
-            <Value label="On admission" data-testid="diagnosisOnAdmission">
+            <Value
+              dirColumn
+              label="On admission"
+              data-testid="diagnosisOnAdmission"
+            >
               <CodeableConcept fhirData={onAdmission} />
             </Value>
           )}
           {packageCode && (
-            <Value label="Package code" data-testid="diagnosisPackageCode">
+            <Value
+              dirColumn
+              label="Package code"
+              data-testid="diagnosisPackageCode"
+            >
               <CodeableConcept fhirData={packageCode} />
             </Value>
           )}