fhir-react 0.2.3 → 0.3.2

package/src/components/resources/Patient/Patient.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import _isEmpty from 'lodash/isEmpty';
 import md5 from 'md5';
 
 import HumanName from '../../datatypes/HumanName';
@@ -8,8 +9,8 @@ import Telecom from '../../datatypes/Telecom';
 import Address from '../../datatypes/Address';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
-import { Root, Header, Body, Value, MissingValue, Badge } from '../../ui';
-import './Patient.css';
+import Accordion from '../../containers/Accordion';
+import { Root, Header, MissingValue, Badge, Body } from '../../ui';
 
 export function PatientContact(props) {
   const { fhirData } = props;
@@ -20,7 +21,7 @@ export function PatientContact(props) {
     <div>
       <HumanName fhirData={name} />
       {relationship && (
-        <small className="fhir-resource__Patient__patientContact-relationship">{` (${relationship})`}</small>
+        <small className="text-bold">{` (${relationship})`}</small>
       )}
     </div>
   );
@@ -57,7 +58,8 @@ function Patient(props) {
     .filter(item => Boolean(_get(item, 'language.coding', null)))
     .map(item => item.language.coding);
   communicationLanguage = _get(communicationLanguage, '0', []);
-  const hasCommunicationLanguage = communicationLanguage.length > 0;
+  const hasCommunicationLanguage = !_isEmpty(communicationLanguage);
+  const hasPatientPhones = !_isEmpty(patientPhones);
   const active = _get(fhirResource, 'active', false);
   const activeStatus = active ? 'active' : 'inactive';
   const deceasedBoolean = _get(fhirResource, 'deceasedBoolean', false);
@@ -68,92 +70,80 @@ function Patient(props) {
     return <HumanName fhirData={patientName} primary={index === 0} />;
   };
 
+  const tableData = [
+    {
+      label: 'Patient contact',
+      testId: 'patientContact',
+      data: patientContact && <PatientContact fhirData={patientContact} />,
+      status: patientContact,
+    },
+    {
+      label: 'Deceased',
+      testId: 'deceasedInfo',
+      data: deceasedDate ? <Date fhirData={deceasedDate} /> : 'yes',
+      status: !patientSimple && isDeceased,
+    },
+    {
+      label: 'Address',
+      testId: 'patientAddress',
+      data: patientAddress && <Address fhirData={patientAddress} />,
+      status: !patientSimple && patientAddress,
+    },
+    {
+      label: 'Telephone',
+      testId: 'patientPhones',
+      data: !hasPatientPhones ? (
+        <MissingValue />
+      ) : (
+        patientPhones.map((telecom, index) => (
+          <Telecom key={index} fhirData={telecom} />
+        ))
+      ),
+      status: !patientSimple,
+    },
+    {
+      label: 'Communication - language',
+      testId: 'communicationLanguage',
+      data:
+        hasCommunicationLanguage &&
+        communicationLanguage.map((item, i) => (
+          <Coding key={`item-${i}`} fhirData={item} />
+        )),
+      status: !patientSimple && hasCommunicationLanguage,
+    },
+  ];
+
   return (
     <Root name="Patient">
-      <Header>
-        <div className="fhir-resource__Patient__patient-block">
-          <div>
-            <img
-              className="fhir-resource__Patient__patient-avatar"
-              src={avatarSrc}
-              alt=""
-            />
-          </div>
-          <div>
-            <div className="fhir-resource__Patient__patient-block">
-              <React.Fragment>
-                <span data-testid={`patientName`}>
-                  {renderName
-                    ? renderName({
-                        patientName,
-                        defaultName,
-                        fhirVersion,
-                        id,
-                      })
-                    : defaultName(patientName, 0)}
-                </span>
-                &nbsp;&nbsp;
-              </React.Fragment>
-            </div>
-            <div>
-              {active && (
-                <Badge data-testid="activeStatus">{activeStatus}</Badge>
-              )}
-              {patientBirthDate && (
-                <span className="fhir-resource__Patient__BirthDate-block">
-                  <strong>
-                    <span data-testid="patientGender">
-                      {patientGender || 'unknown'}
-                    </span>
-                    {', '}
-                    <span data-testid="patientBirthDate">
-                      {patientBirthDate}
-                    </span>
-                  </strong>
-                  <small> (DOB)</small>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={fhirResource.resourceType}
+            additionalContent={
+              patientBirthDate && (
+                <span className="text-gray-600">
+                  <span data-testid="patientGender" className="text-capitalize">
+                    {patientGender || 'unknown'}
+                  </span>
+                  {', '}
+                  <span data-testid="patientBirthDate">{patientBirthDate}</span>
                 </span>
-              )}
-            </div>
-            <div>
-              {patientContact && <PatientContact fhirData={patientContact} />}
-            </div>
-          </div>
-        </div>
-      </Header>
-      {!patientSimple && (
-        <Body>
-          {isDeceased && (
-            <Value label="Deceased" data-testid="deceasedInfo">
-              {deceasedDate ? <Date fhirData={deceasedDate} /> : 'yes'}
-            </Value>
-          )}
-          {patientAddress && (
-            <Value label="Address" data-testid="patientAddress">
-              <Address fhirData={patientAddress} />
-            </Value>
-          )}
-          {patientPhones && (
-            <Value label="TELEPHONE" data-testid="patientPhones">
-              {patientPhones.map((telecom, index) => (
-                <div key={index}>
-                  <Telecom fhirData={telecom} />
-                </div>
-              ))}
-              {patientPhones.length === 0 && <MissingValue />}
-            </Value>
-          )}
-          {hasCommunicationLanguage && (
-            <Value
-              label="Communication - language"
-              data-testid="communicationLanguage"
-            >
-              {communicationLanguage.map((item, i) => (
-                <Coding key={`item-${i}`} fhirData={item} />
-              ))}
-            </Value>
-          )}
-        </Body>
-      )}
+              )
+            }
+            icon={avatarSrc}
+            badges={
+              active && <Badge data-testid="activeStatus">{activeStatus}</Badge>
+            }
+            title={
+              renderName
+                ? renderName({ patientName, defaultName, fhirVersion, id })
+                : defaultName(patientName, 0)
+            }
+            titleTestID="patientName"
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 }

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

@@ -87,6 +87,6 @@ describe('should render component correctly', () => {
       fhirResource: example3PatientR4,
     };
     const { getByTestId } = render(<Patient {...defaultProps} />);
-    expect(getByTestId('deceasedInfo').textContent).toEqual('2015-02-14');
+    expect(getByTestId('deceasedInfo').textContent).toEqual('2/14/2015');
   });
 });

package/src/components/resources/Practitioner/Practitioner.js

@@ -1,19 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import md5 from 'md5';
-import _get from 'lodash/get';
-import _has from 'lodash/has';
+import './Practitioner.css';
 
-import HumanName from '../../datatypes/HumanName';
-import PatientContact from './PatientContact';
-import fhirVersions from '../fhirResourceVersions';
-import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import { Badge, Body, Header, Root } from '../../ui';
+
+import Accordion from '../../containers/Accordion/Accordion';
 import Address from '../../datatypes/Address';
-import Telecom from '../../datatypes/Telecom';
 import Date from '../../datatypes/Date';
-import { Root, Header, Title, Body, Value, Badge } from '../../ui';
-import './Practitioner.css';
+import HumanName from '../../datatypes/HumanName';
 import Identifier from '../../datatypes/Identifier';
+import PatientContact from './PatientContact';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Telecom from '../../datatypes/Telecom';
+import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
+import _get from 'lodash/get';
+import _has from 'lodash/has';
+import fhirVersions from '../fhirResourceVersions';
+import md5 from 'md5';
 
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id', '');
@@ -26,6 +28,7 @@ const commonDTO = fhirResource => {
     name: _get(fhirResource, 'contact[0].name'),
     relationship: _get(fhirResource, 'contact[0].relationship[0].text'),
   };
+
   return {
     id,
     identifier,
@@ -101,56 +104,73 @@ const Practitioner = props => {
     address,
     birthDate,
   } = fhirResourceData;
+
+  const use = _get(name, 'use');
+  const tableData = [
+    {
+      label: 'Identifiers',
+      testId: 'identifier',
+      data: identifier && <Identifier fhirData={identifier} />,
+      status: identifier,
+    },
+    {
+      label: 'Gender',
+      testId: 'gender',
+      data: gender,
+      status: !!gender,
+    },
+    {
+      label: 'Birth date',
+      testId: 'birthDate',
+      data: birthDate && <Date fhirData={birthDate} isBlack />,
+      status: birthDate,
+    },
+    {
+      label: 'Contact',
+      testId: 'contact',
+      data: isContactData && (
+        <PatientContact
+          name={contactData.name}
+          relationship={contactData.relationship}
+        />
+      ),
+      status: isContactData,
+    },
+    {
+      label: 'Address',
+      testId: 'address',
+      data: address && <Address fhirData={address} />,
+      status: address,
+    },
+    {
+      label: 'Telephone',
+      testId: 'telecom',
+      data: telecom && <Telecom fhirData={telecom} />,
+      status: telecom,
+    },
+  ];
+
   return (
     <Root name="Practitioner">
-      <Header>
-        <img
-          className="fhir-resource__Practitioner__practitioner-avatar"
-          src={`http://www.gravatar.com/avatar/${md5(
-            id,
-          )}?s=30&r=any&default=identicon&forcedefault=1`}
-          alt=""
-        />
-        <Title>
-          <HumanName fhirData={name} primary={true} />
-        </Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {identifier && (
-          <Value label="Identifiers" data-testid="identifier">
-            <Identifier fhirData={identifier} />
-          </Value>
-        )}
-        {gender && (
-          <Value label="Gender" data-testid="gender">
-            {gender}
-          </Value>
-        )}
-        {birthDate && (
-          <Value label="Birth date" data-testid="birthDate">
-            <Date fhirData={birthDate} />
-          </Value>
-        )}
-        {isContactData && (
-          <Value label="Contact" data-testid="contact">
-            <PatientContact
-              name={contactData.name}
-              relationship={contactData.relationship}
-            />
-          </Value>
-        )}
-        {address && (
-          <Value label="Address" data-testid="address">
-            <Address fhirData={address} />
-          </Value>
-        )}
-        {telecom && (
-          <Value label="Telephone" data-testid="telecom">
-            <Telecom fhirData={telecom} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            additionalContent={<p className="mb-0">{`(${use})`}</p>}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={
+              <img
+                className="header-icon__practitioner-avatar rounded-1"
+                src={`http://www.gravatar.com/avatar/${md5(
+                  id,
+                )}?s=30&r=any&default=identicon&forcedefault=1`}
+                alt=""
+              />
+            }
+            title={<HumanName fhirData={name} isTitle />}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -17,7 +17,7 @@ describe('Practitioner should render component correctly', () => {
     const { getByTestId } = render(<Practitioner {...defaultProps} />);
 
     expect(String(getByTestId('title').textContent).trim()).toEqual(
-      'Physician Family Medicine (usual)',
+      'Physician Family Medicine',
     );
     expect(getByTestId('gender').textContent).toEqual('male');
   });
@@ -30,7 +30,7 @@ describe('Practitioner should render component correctly', () => {
     const { getByTestId } = render(<Practitioner {...defaultProps} />);
 
     expect(String(getByTestId('title').textContent).trim()).toEqual(
-      'Sameer Sharma M.D. (official)',
+      'Sameer Sharma M.D.',
     );
     expect(getByTestId('gender').textContent).toEqual('male');
     expect(getByTestId('address').textContent).toContain('5815 S Calumet');
@@ -64,12 +64,12 @@ describe('Practitioner should render component correctly', () => {
     const { getByTestId } = render(<Practitioner {...defaultProps} />);
 
     expect(String(getByTestId('title').textContent).trim()).toEqual(
-      'Pieter Voigt MD (official)',
+      'Pieter Voigt MD',
     );
     expect(getByTestId('gender').textContent).toEqual('male');
     expect(getByTestId('address').textContent).toContain('Galapagosweg 91');
     expect(getByTestId('telecom').textContent).toContain('phone0205569336');
-    expect(getByTestId('birthDate').textContent).toContain('1979-04-29');
+    expect(getByTestId('birthDate').textContent).toContain('4/29/1979');
   });
 
   it('component without fhirVersion props', () => {

package/src/components/resources/Procedure/Procedure.js

@@ -1,27 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _get from 'lodash/get';
-import _has from 'lodash/has';
+import { Badge, Body, Header, MissingValue, Root } from '../../ui';
 
+import Accordion from '../../containers/Accordion/Accordion';
 import Annotation from '../../datatypes/Annotation';
+import CodeableConcept from '../../datatypes/CodeableConcept';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
+import DatePeriod from '../../datatypes/DatePeriod/DatePeriod';
+import PropTypes from 'prop-types';
+import React from 'react';
 import Reference from '../../datatypes/Reference';
-import CodeableConcept from '../../datatypes/CodeableConcept';
-import {
-  Root,
-  Header,
-  Title,
-  Body,
-  Value,
-  Badge,
-  BadgeSecondary,
-  MissingValue,
-} from '../../ui';
+import _get from 'lodash/get';
+import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
+import { Value } from '../../ui';
 
 const Procedure = props => {
-  const { fhirResource } = props;
+  const { fhirResource, fhirIcons } = props;
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -42,79 +36,97 @@ const Procedure = props => {
   const hasNote = _has(fhirResource, 'note');
   const note = _get(fhirResource, 'note', []);
   const outcome = _get(fhirResource, 'outcome');
+
+  const headerIcon = fhirIcons && fhirIcons[_get(fhirResource, 'resourceType')];
+  const tableData = [
+    {
+      label: 'Identification',
+      testId: 'hasCoding',
+      data: coding && (
+        <>
+          {coding.map((coding, i) => (
+            <Coding key={`item-${i}`} fhirData={coding} />
+          ))}
+        </>
+      ),
+      status: hasCoding,
+    },
+    {
+      label: 'Category',
+      testId: 'category',
+      data: category && <Coding fhirData={category} />,
+      status: category,
+    },
+    {
+      label: 'Performed by',
+      testId: 'dateRecorded',
+      data: performer && (
+        <>
+          {performer.map((item, i) => (
+            <div key={`item-${i}`}>
+              {_get(item, 'actor.display', <MissingValue />)}
+            </div>
+          ))}
+        </>
+      ),
+      status: hasPerformerData,
+    },
+    {
+      label: 'Reason procedure performed',
+      testId: 'hasReasonCode',
+      data: reasonCode && <Annotation fhirData={reasonCode} />,
+      status: hasReasonCode,
+    },
+    {
+      label: 'Location',
+      testId: 'location',
+      data: locationReference && <Reference fhirData={locationReference} />,
+      status: locationReference,
+    },
+    {
+      label: 'Additional information about the procedure',
+      testId: 'hasNote',
+      data: note && <Annotation fhirData={note} />,
+      status: hasNote,
+    },
+    {
+      label: 'The result of procedure',
+      testId: '',
+      data: outcome && <CodeableConcept fhirData={outcome} />,
+      status: isNotEmptyArray(outcome),
+    },
+  ];
+
   return (
     <Root name="Procedure">
-      <Header>
-        {display && <Title>{display}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {hasPerformedDateTime && (
-          <BadgeSecondary data-testid="performedDateTime">
-            on <Date fhirData={performedDateTime} />
-          </BadgeSecondary>
-        )}
-        {hasPerformedPeriod && (
-          <BadgeSecondary>
-            {'performed '}
-            {performedPeriodStart ? (
-              <Date fhirData={performedPeriodStart} />
-            ) : (
-              <MissingValue />
-            )}
-            {' to '}
-            {performedPeriodEnd ? (
-              <Date fhirData={performedPeriodEnd} />
-            ) : (
-              <MissingValue />
-            )}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {hasCoding && (
-          <Value label="Identification" data-testid="hasCoding">
-            {coding.map((coding, i) => (
-              <Coding key={`item-${i}`} fhirData={coding} />
-            ))}
-          </Value>
-        )}
-        {category && (
-          <Value label="Category" data-testid="category">
-            <Coding fhirData={category} />
-          </Value>
-        )}
-        {hasPerformerData && (
-          <Value label="Performed the procedure">
-            {performer.map((item, i) => (
-              <div key={`item-${i}`}>
-                {_get(item, 'actor.display', <MissingValue />)}
-              </div>
-            ))}
-          </Value>
-        )}
-        {hasReasonCode && (
-          <Value label="Reason procedure performed" data-testid="hasReasonCode">
-            <Annotation fhirData={reasonCode} />
-          </Value>
-        )}
-        {locationReference && (
-          <Value label="Location" data-testid="location">
-            <Reference fhirData={locationReference} />
-          </Value>
-        )}
-        {hasNote && (
-          <Value
-            label="Additional information about the procedure"
-            data-testid="hasNote"
-          >
-            <Annotation fhirData={note} />
-          </Value>
-        )}
-        {isNotEmptyArray(outcome) && (
-          <Value label="The result of procedure">
-            <CodeableConcept fhirData={outcome} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Procedure"
+            additionalContent={
+              <>
+                {hasPerformedDateTime && (
+                  <Value label="Start date" data-testid="headerStartDate">
+                    <Date fhirData={performedDateTime} isBlack />
+                  </Value>
+                )}
+                {hasPerformedPeriod && (
+                  <DatePeriod
+                    periodBeginLabel="performed"
+                    periodBeginDate={performedPeriodStart}
+                    periodEndLabel="to"
+                    periodEndDate={performedPeriodEnd}
+                  />
+                )}
+              </>
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={headerIcon}
+            title={display}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -11,34 +11,36 @@ import r4Example1 from '../../../fixtures/r4/resources/procedure/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 export default { title: 'Procedure' };
 
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', r4Example3);
-  return <Procedure fhirResource={fhirResource} />;
+  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };