fhir-react 0.2.3 → 0.3.2

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

@@ -17,6 +17,8 @@ import r4Example3 from '../../../fixtures/r4/resources/bundle/example3.json';
 import r4Example4 from '../../../fixtures/r4/resources/bundle/example4.json';
 import fhirVersions from '../fhirResourceVersions';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 export default {
   title: 'Bundle',
 };
@@ -24,69 +26,133 @@ export default {
 export const Example1OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
   return (
-    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
   return (
-    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example3OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example3);
   return (
-    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example4OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example4);
   return (
-    <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example1OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 export const Example3OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example3);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 export const Example4OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example4);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', r4Example3);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 export const Example4OfR4 = () => {
   const fhirResource = object('Resource', r4Example4);
-  return <Bundle fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+  return (
+    <Bundle
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 
 // export const ExampleWithoutFHIRVersionProperty = () => {

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

@@ -8,6 +8,8 @@ import dstu2Example2 from '../../../fixtures/dstu2/resources/bundle/example3.jso
 import stu3Example1 from '../../../fixtures/stu3/resources/bundle/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/bundle/example1.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('Bundle should render component correctly', () => {
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
@@ -29,6 +31,7 @@ describe('Bundle should render component correctly', () => {
     const defaultProps = {
       fhirVersion: fhirVersions.DSTU2,
       fhirResource: dstu2Example2,
+      fhirIcons: fhirIcons,
     };
     const { getByText, getAllByTestId } = render(<Bundle {...defaultProps} />);
     expect(getAllByTestId('title').map(title => title.textContent)).toEqual([

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

@@ -42,7 +42,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('subject').textContent).toContain('Peter James');
     expect(getByTestId('subject').textContent).toContain('Patient/example');
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
-    expect(getByTestId('periodEnd').textContent).toEqual('2017-06-01');
+    expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
       'Management of Type 2 Diabetes',
     );
@@ -67,7 +67,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('subject').textContent).toContain('Peter James');
     expect(getByTestId('subject').textContent).toContain('Patient/example');
     expect(getByTestId('author').textContent).toContain('Dr Adam Careful');
-    expect(getByTestId('periodEnd').textContent).toEqual('2017-06-01');
+    expect(getByTestId('periodEnd').textContent).toEqual('6/1/2017');
     expect(getByTestId('basedOn').textContent).toEqual(
       'Management of Type 2 Diabetes',
     );
@@ -89,7 +89,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('goals').textContent).toEqual('#goal');
     expect(getByTestId('subject').textContent).toContain('Eve Everywoman');
     expect(getByTestId('subject').textContent).toContain('Patient/1');
-    expect(getByTestId('periodStart').textContent).toEqual('2013-01-01');
-    expect(getByTestId('periodEnd').textContent).toEqual('2013-10-01');
+    expect(getByTestId('periodStart').textContent).toEqual('1/1/2013');
+    expect(getByTestId('periodEnd').textContent).toEqual('10/1/2013');
   });
 });

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

@@ -1,23 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import _get from 'lodash/get';
-import fhirVersions from '../fhirResourceVersions';
-import DateType from '../../datatypes/Date';
-import CodableConcept from '../../datatypes/CodeableConcept';
-import Reference from '../../datatypes/Reference';
-import CareTeamParticipants from './CareTeamParticipants';
-
 import {
-  Root,
-  Header,
-  Title,
   Badge,
   Body,
-  Value,
+  Header,
   MissingValue,
+  Root,
+  Title,
+  Value,
 } from '../../ui';
 
+import CareTeamParticipants from './CareTeamParticipants';
+import CodableConcept from '../../datatypes/CodeableConcept';
+import DateType from '../../datatypes/Date';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
+import _get from 'lodash/get';
+import fhirVersions from '../fhirResourceVersions';
+
 const commonDTO = fhirResource => {
   // Default value for title - "Care team"
   const name = _get(fhirResource, 'name', 'Care team');

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

@@ -24,7 +24,7 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('periodStart')).toBeNull();
-    expect(getByTestId('periodEnd').textContent).toEqual('2013-01-01');
+    expect(getByTestId('periodEnd').textContent).toEqual('1/1/2013');
     expect(getByTestId('category').textContent.trim()).toEqual('(encounter)');
     expect(getByTestId('subject').textContent).toContain(
       'Peter James Chalmers',
@@ -53,7 +53,7 @@ describe('should render the CareTeam component properly', () => {
     const periodEnds = getAllByTestId('participant.periodEnd').map(
       n => n.textContent,
     );
-    expect(periodEnds).toEqual(['-', '2013-01-01']);
+    expect(periodEnds).toEqual(['-', '1/1/2013']);
   });
 
   it('should render participants with STU3 source data when structure source data of Participants Role is coding array', () => {
@@ -83,7 +83,7 @@ describe('should render the CareTeam component properly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('periodStart')).toBeNull();
-    expect(getByTestId('periodEnd').textContent).toEqual('2013-01-01');
+    expect(getByTestId('periodEnd').textContent).toEqual('1/1/2013');
     expect(getByTestId('encounter').textContent).toEqual('Encounter/example');
     expect(getByTestId('category').textContent).toContain(
       'Encounter-focused care team',
@@ -115,6 +115,6 @@ describe('should render the CareTeam component properly', () => {
     const periodEnds = getAllByTestId('participant.periodEnd').map(
       n => n.textContent,
     );
-    expect(periodEnds).toEqual(['-', '2013-01-01']);
+    expect(periodEnds).toEqual(['-', '1/1/2013']);
   });
 });

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

@@ -23,7 +23,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('complete');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');
@@ -45,7 +45,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('complete');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');
@@ -112,7 +112,7 @@ describe('should render the Claim component properly', () => {
     };
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
-    expect(getByTestId('accident.date').textContent).toEqual('2014-07-09');
+    expect(getByTestId('accident.date').textContent).toEqual('7/9/2014');
     expect(getByTestId('accident.type').textContent).toContain(
       'Sporting Accident',
     );
@@ -151,7 +151,7 @@ describe('should render the Claim component properly', () => {
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
     expect(getByTestId('employmentImpacted').textContent).toEqual(
-      '2014-08-16 - 2014-08-16',
+      '8/16/2014 - 8/16/2014',
     );
   });
 
@@ -163,7 +163,7 @@ describe('should render the Claim component properly', () => {
     const { getByTestId } = render(<Claim {...defaultProps} />);
 
     expect(getByTestId('hospitalization').textContent).toEqual(
-      '2014-08-15 - 2014-08-16',
+      '8/15/2014 - 8/16/2014',
     );
   });
 
@@ -251,7 +251,7 @@ describe('should render the Claim component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim #100150');
     expect(getByTestId('use').textContent).toEqual('claim');
     expect(getByTestId('type').textContent).toContain('oral');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('priority').textContent).toContain('normal');
     expect(getByTestId('insurer').textContent).toEqual('Organization/2');
     expect(getByTestId('payee.type').textContent).toContain('provider');

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

@@ -23,7 +23,7 @@ describe('should render the ClaimResponse component properly', () => {
 
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('outcome').textContent).toEqual('complete');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -40,7 +40,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('2014-08-31');
+    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');
@@ -76,7 +76,7 @@ describe('should render the ClaimResponse component properly', () => {
 
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('outcome').textContent).toEqual('complete');
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -93,7 +93,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('2014-08-31');
+    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');
@@ -169,7 +169,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(getByTestId('title').textContent).toEqual('Claim response #R3500');
     expect(getByTestId('status').textContent).toEqual('active');
     expect(queryByTestId('outcome')).toBeNull();
-    expect(getByTestId('created').textContent).toEqual('2014-08-16');
+    expect(getByTestId('created').textContent).toEqual('8/16/2014');
     expect(getByTestId('disposition').textContent).toEqual(
       'Claim settled as per contract.',
     );
@@ -189,7 +189,7 @@ describe('should render the ClaimResponse component properly', () => {
     expect(
       getByTestId('payment.amount').textContent.replace(nbspRegex, ' '),
     ).toEqual('100.47 USD');
-    expect(getByTestId('payment.date').textContent).toEqual('2014-08-31');
+    expect(getByTestId('payment.date').textContent).toEqual('8/31/2014');
     expect(
       getByTestId('payment.ref').textContent.replace(nbspRegex, ' '),
     ).toEqual('Identifier: 201408-2-1569478');

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

@@ -1,21 +1,14 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import { Badge, Body, Header, Root } from '../../ui';
 
+import Accordion from '../../containers/Accordion';
+import CodeableConcept from '../../datatypes/CodeableConcept';
+import DatePeriod from '../../datatypes/DatePeriod/DatePeriod';
+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 fhirVersions from '../fhirResourceVersions';
-import CodeableConcept from '../../datatypes/CodeableConcept';
-
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-} from '../../ui';
 
 const commonDTO = fhirResource => {
   const codeText =
@@ -94,7 +87,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 function Condition(props) {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
 
   const {
     codeText,
@@ -108,41 +101,65 @@ function Condition(props) {
     dateRecorded,
   } = resourceDTO(fhirVersion, fhirResource);
 
+  const headerIcon = fhirIcons && fhirIcons[_get(fhirResource, 'resourceType')];
+
+  const tableData = [
+    {
+      label: 'Asserted by',
+      testId: 'asserter',
+      data: asserter && <Reference fhirData={asserter} />,
+      status: hasAsserter,
+    },
+    {
+      label: 'Anatomical locations',
+      testId: 'bodySite',
+      data: bodySite && <CodeableConcept fhirData={bodySite} />,
+      status: hasBodySite,
+    },
+  ];
+
   return (
     <Root name="condition">
-      <Header>
-        <Title>{codeText || ''}</Title>
-        {clinicalStatus && (
-          <Badge data-testid="clinicalStatus">{clinicalStatus}</Badge>
-        )}
-        {severityText && (
-          <BadgeSecondary data-testid="severity">
-            {severityText} severity
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {onsetDateTime && (
-          <Value label="Onset Date" data-testid="onsetDate">
-            {onsetDateTime}
-          </Value>
-        )}
-        {dateRecorded && (
-          <Value label="Date recorded" data-testid="dateRecorded">
-            {dateRecorded}
-          </Value>
-        )}
-        {hasAsserter && (
-          <Value label="Asserted by" data-testid="asserter">
-            <Reference fhirData={asserter} />
-          </Value>
-        )}
-        {hasBodySite && (
-          <Value label="Anatomical locations" data-testid="bodySite">
-            <CodeableConcept fhirData={bodySite} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Condition"
+            additionalContent={
+              <DatePeriod
+                periodBeginLabel="Onset Date"
+                periodBeginDate={onsetDateTime}
+                periodBeginTestId="onsetDate"
+                periodEndLabel="Date recorded"
+                periodEndDate={dateRecorded}
+                periodEndTestId="dateRecorded"
+              />
+            }
+            badges={
+              <>
+                {clinicalStatus && (
+                  <Badge
+                    bootstrapAlertType="alert-success"
+                    data-testid="clinicalStatus"
+                  >
+                    {clinicalStatus}
+                  </Badge>
+                )}
+              </>
+            }
+            icon={headerIcon}
+            title={codeText}
+            rightAdditionalContent={
+              severityText && (
+                <>
+                  <div className="ps-2" />
+                  <Badge data-testid="severity">{severityText} severity</Badge>
+                </>
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 }

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

@@ -15,60 +15,93 @@ import example1ConditionR4 from '../../../fixtures/r4/resources/condition/exampl
 import example2ConditionR4 from '../../../fixtures/r4/resources/condition/example2.json';
 import example3ConditionR4 from '../../../fixtures/r4/resources/condition/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
 export default { title: 'Condition' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', exampleConditionSeverity);
   return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Condition
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const ExampleWithoutSeverityDSTU2 = () => {
   const fhirResource = object('Resource', exampleCondition);
   return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Condition
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example3OfDSTU2 = () => {
   const fhirResource = object('Resource', example3Condition);
   return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.DSTU2} />
+    <Condition
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const ExampleWithoutSeveritySTU3 = () => {
   const fhirResource = object('Resource', exampleConditionSTU3);
   return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Condition
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const ExampleWithSeveritySTU3 = () => {
   const fhirResource = object('Resource', exampleConditionSeveritySTU3);
   return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <Condition
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example1ofR4 = () => {
   const fhirResource = object('Resource', example1ConditionR4);
   return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Condition
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example2ofR4 = () => {
   const fhirResource = object('Resource', example2ConditionR4);
   return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Condition
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 
 export const Example3ofR4 = () => {
   const fhirResource = object('Resource', example3ConditionR4);
   return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <Condition
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={fhirIcons}
+    />
   );
 };