fhir-react 0.2.4 → 0.3.0

package/src/assets/containers/ResourceCategory/resource-placeholder.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.9726 5.24759C15.9726 5.09345 15.9419 5.09345 15.8803 5.09345H9.23274C9.17119 5.09345 9.14041 5.06262 9.14041 5.00096V0.592486C9.14041 0.530829 9.10964 0.5 9.04809 0.5H6.95533C6.89378 0.5 6.863 0.530829 6.863 0.592486V11.8141C6.863 11.8757 6.89378 11.9066 6.95533 11.9066H9.04809C9.10964 11.9066 9.14041 11.8757 9.14041 11.8141V7.46724C9.14041 7.40559 9.17119 7.37476 9.23274 7.37476H13.6029C13.6645 7.37476 13.6952 7.40559 13.6952 7.46724V9.56358C13.6952 9.62524 13.6645 9.65607 13.6029 9.65607H11.5102C11.4486 9.65607 11.4178 9.6869 11.4178 9.74855V14.1262C11.4178 14.1879 11.387 14.2187 11.3255 14.2187H4.67792C4.61637 14.2187 4.5856 14.1879 4.5856 14.1262V5.18593C4.5856 5.12428 4.55482 5.09345 4.49327 5.09345L0 5.06262V7.34393H2.18508C2.24663 7.34393 2.27741 7.37476 2.27741 7.43642V16.4075C2.27741 16.4692 2.30819 16.5 2.36974 16.5H13.6029C13.6645 16.5 13.6952 16.4692 13.6952 16.4075V16.4383V12.0607C13.6952 11.9682 13.726 11.9374 13.7876 11.9374H15.8495C15.8495 11.9374 15.9111 11.9374 15.9726 11.8757C16.0342 11.8449 15.9726 5.24759 15.9726 5.24759Z" fill="#3D8BFD"/>
+</svg>

package/src/components/containers/Accordion/Accordion.js

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Chevron } from '../../ui';
+
+const CHEVRON_DOWN_COLOR = '#6f83a9';
+const CHEVRON_UP_COLOR = '#2a6fd7';
+
+const Accordion = props => {
+  const { headerContent, bodyContent } = props;
+  const [rotate, setRotate] = useState(false);
+  const handleAccordionClick = () => setRotate(!rotate);
+
+  const isAccordionOpenable = () => {
+    let childrenCondition = false;
+    let tableDataCondition = false;
+    if (bodyContent.props.children)
+      childrenCondition = bodyContent.props.children.length > 0;
+    if (bodyContent.props.tableData)
+      tableDataCondition =
+        bodyContent.props.tableData.filter(x => 'data' in x && x.data).length >
+        0;
+
+    return childrenCondition || tableDataCondition;
+  };
+
+  const getChevron = () =>
+    isAccordionOpenable() && (
+      <div
+        className={`fhir-ui__${
+          props.resourceName
+        }-Header__chevron chevron position-absolute ${
+          rotate ? ' header-rotate' : ''
+        }`}
+        style={{ top: '24px', right: '24px' }}
+      >
+        <Chevron strokeColor={rotate ? CHEVRON_UP_COLOR : CHEVRON_DOWN_COLOR} />
+      </div>
+    );
+
+  return (
+    <div className="fhir-container__Accordion accordion">
+      <div className="fhir-container__Accordion__body accordion-body">
+        <div className="fhir-container__Accordion__body-data accordion-item border-1 shadow-sm">
+          <div
+            className="fhir-container__Accordion__header accordion-header"
+            id="flush-headingOne"
+          >
+            <button
+              className={`fhir-container__Accordion__header-button w-100 p-0 border-0 rounded-1 collapsed text-dark bg-white shadow-none point ${
+                isAccordionOpenable() ? '' : 'pe-none'
+              }`}
+              type="button"
+              data-bs-target="#collapseTarget"
+              data-bs-toggle={isAccordionOpenable() ? 'collapse' : null}
+              aria-controls="collapseTarget"
+              aria-expanded="false"
+              onClick={handleAccordionClick}
+            >
+              <div className="fhir-container__Accordion__header-text d-flex w-100 justify-content-start position-relative">
+                {React.cloneElement(headerContent, {
+                  isAccordionOpenable: isAccordionOpenable(),
+                })}
+                {getChevron()}
+              </div>
+            </button>
+          </div>
+          <div
+            className="fhir-container__Accordion__data accordion-collapse collapse"
+            id="collapseTarget"
+          >
+            <div className="fhir-container__Accordion__data-text accordion-body ps-4 pt-3 pe-4 border-top">
+              {bodyContent}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

package/src/components/containers/Accordion/Accordion.stories.js

@@ -0,0 +1,76 @@
+import { BadgeSecondary, Body, MissingValue, Title, Value } from '../../ui';
+
+import Accordion from './Accordion';
+import Annotation from '../../datatypes/Annotation';
+import Date from '../../datatypes/Date';
+import Procedure from '../../resources/Procedure/Procedure';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
+import _get from 'lodash/get';
+import example1 from '../../../fixtures/dstu2/resources/procedure/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import { object } from '@storybook/addon-knobs';
+import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
+
+export default {
+  title: 'Accordion',
+};
+
+export const DefaultVisualization = () => {
+  const fhirResource = object('Resource', stu3Example1);
+  const title =
+    _get(fhirResource, 'code.coding[0].display') ||
+    _get(fhirResource, 'code.text');
+  const performedDateTime = _get(fhirResource, 'performedDateTime');
+  const performer = _get(fhirResource, 'performer', []);
+  const locationReference = _get(fhirResource, 'location[0]');
+  const reasonCode = _get(fhirResource, 'reasonCode', []);
+  const note = _get(fhirResource, 'note', []);
+
+  return (
+    <Accordion
+      headerContent={
+        <div className="">
+          <Title>{title}</Title>
+          <div className="pb-3" />
+          <BadgeSecondary data-testid="performedDateTime">
+            <Date fhirData={performedDateTime} />
+          </BadgeSecondary>
+        </div>
+      }
+      bodyContent={
+        <Body>
+          <Value label="Performed by">
+            {performer.map((item, i) => (
+              <div key={`item-${i}`}>
+                {_get(item, 'actor.display', <MissingValue />)}
+              </div>
+            ))}
+          </Value>
+          <Value label="Location" data-testid="location">
+            <Reference fhirData={locationReference} />
+          </Value>
+          <Value label="Reason" data-testid="hasReasonCode">
+            <Annotation fhirData={reasonCode} />
+          </Value>
+          <Value label="Notes" data-testid="hasNote">
+            <Annotation fhirData={note} />
+          </Value>
+        </Body>
+      }
+    />
+  );
+};
+
+export const ProcedureVisualization = () => {
+  const fhirResource = object('Resource', example1);
+
+  return (
+    <Accordion
+      headerContent={<div className=""></div>}
+      bodyContent={
+        <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />
+      }
+    />
+  );
+};

package/src/components/containers/Accordion/index.js

@@ -0,0 +1,3 @@
+import Accordion from './Accordion';
+
+export default Accordion;

package/src/components/containers/ResourceContainer/ResourceContainer.css

@@ -1,5 +1,4 @@
 .fhir-container__ResourceContainer__card {
-  background-color: #f8f9fa;
   border: 0;
   position: relative;
   display: flex;

package/src/components/containers/ResourceContainer/ResourceContainer.js

@@ -23,7 +23,7 @@ class ResourceContainer extends React.Component {
               className="fhir-container__ResourceContainer__json-button"
               onClick={() => this.setState({ jsonOpen: !this.state.jsonOpen })}
             >
-              JSON
+              RAW
             </button>
           </div>
           {this.props.children}

package/src/components/datatypes/AccountBalance/AccountBalance.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Value } from '../../ui';
+import { parseValueIntoMonetaryValueOfGivenCurrency } from '../../../utils';
+
+const AccountBalance = props => {
+  const { totalBenefit, totalCost } = props;
+
+  return (
+    <div className="fhir-datatype__AccountBalance container-fluid p-0 m-0 ">
+      <Value label="Total cost" data-testid="totalCost" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalCost.value,
+          totalCost.code,
+        )}
+      </Value>
+      <Value label="Coverd by benefit" data-testid="totalBenefit" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalBenefit.value * -1,
+          totalBenefit.code,
+        )}
+      </Value>
+      <div className="border-top my-1 row border-secondary" />
+      <Value label="Patient Owed" secondary>
+        {parseValueIntoMonetaryValueOfGivenCurrency(
+          totalCost.value - totalBenefit.value,
+          totalBenefit.code,
+        )}
+      </Value>
+    </div>
+  );
+};
+
+export default AccountBalance;

package/src/components/datatypes/AccountBalance/index.js

@@ -0,0 +1,3 @@
+import MoneyCalculator from './MoneyCalculator';
+
+export default MoneyCalculator;

package/src/components/datatypes/Annotation/Annotation.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import PropTypes from 'prop-types';
+import React from 'react';
 
 const Annotation = props => {
   const { fhirData } = props;

package/src/components/datatypes/Date/Date.js

@@ -1,12 +1,22 @@
 import React from 'react';
+import { formatDate } from '../../../utils/formatDate';
 
-const Date = props => {
-  const { fhirData } = props;
+const Date = ({ fhirData, isBlack, testId, className = '' }) => {
   if (!fhirData) {
     return null;
   }
-  const dateValue = String(fhirData).slice(0, 10);
-  return <span className="fhir-datatype__Date">{dateValue}</span>;
+  const locale = 'en-US';
+  const dateValue = formatDate(String(fhirData).slice(0, 10), locale);
+  return (
+    <span
+      data-testid={testId || 'providedDate'}
+      className={`${[className, 'fhir-datatype__Date', 'font-source'].join(
+        ' ',
+      )}${isBlack ? '' : ' text-secondary'}`}
+    >
+      {dateValue}
+    </span>
+  );
 };
 
 export default Date;

package/src/components/datatypes/DatePeriod/DatePeriod.js

@@ -0,0 +1,38 @@
+import Date from '../Date';
+import React from 'react';
+
+const DatePeriod = props => {
+  const {
+    periodBeginLabel,
+    periodBeginDate,
+    periodBeginTestId,
+    periodEndLabel,
+    periodEndDate,
+    periodEndTestId,
+  } = props;
+
+  const SingleDateSpan = props => (
+    <span className="fhir-datetype__DatePeriod__begin-date text-black-50 me-2 font-source fw-normal lh-lg">
+      {props.label}
+    </span>
+  );
+
+  return (
+    <div className="d-flex flex-column flex-sm-row align-items-start align-items-sm-start">
+      {periodBeginDate && (
+        <div className="d-flex flex-wrap">
+          <SingleDateSpan label={periodBeginLabel} />
+          <Date testId={periodBeginTestId} isBlack fhirData={periodBeginDate} />
+        </div>
+      )}
+      {periodEndDate && (
+        <div className="ms-sm-4 d-flex flex-wrap">
+          <SingleDateSpan label={periodEndLabel} />
+          <Date testId={periodEndTestId} isBlack fhirData={periodEndDate} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DatePeriod;

package/src/components/datatypes/DatePeriod/index.js

@@ -0,0 +1,3 @@
+import DatePeriod from './DatePeriod';
+
+export default DatePeriod;

package/src/components/datatypes/HeaderIcon/HeaderIcon.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { isUrl } from '../../../utils/isUrl';
+
+const HeaderIcon = ({ headerIcon }) => {
+  const PlaceholderImage = () => {
+    return <div className="header-icon__placeholder rounded-1" />;
+  };
+
+  const Image = () => {
+    if (
+      React.isValidElement(headerIcon) &&
+      typeof headerIcon.type === 'string'
+    ) {
+      return headerIcon;
+    }
+    if (isUrl(headerIcon)) {
+      return (
+        <img
+          className="header-icon__image"
+          src={headerIcon}
+          alt="header icon"
+        />
+      );
+    }
+    return <PlaceholderImage />;
+  };
+
+  return <Image />;
+};
+
+export default HeaderIcon;

package/src/components/datatypes/HeaderIcon/index.js

@@ -0,0 +1,3 @@
+import HeaderIcon from './HeaderIcon';
+
+export default HeaderIcon;

package/src/components/datatypes/HumanName/HumanName.js

@@ -1,11 +1,9 @@
 import React from 'react';
-import _get from 'lodash/get';
 import _flatten from 'lodash/flatten';
-
-import './HumanName.css';
+import _get from 'lodash/get';
 
 function HumanName(props) {
-  const { fhirData, primary } = props;
+  const { fhirData, isTitle } = props;
   const givenName = _get(fhirData, 'given', []).join(', ');
   const familyName = _flatten(Array(_get(fhirData, 'family', ''))).join(', ');
   const suffix = _get(fhirData, 'suffix', []).join(' ');
@@ -15,24 +13,11 @@ function HumanName(props) {
     ? textName
     : `${givenName} ${familyName} ${suffix}`.trim();
 
-  const headerElement = primary ? (
-    <span className="fhir-datatype__HumanName__Header--primary">{header}</span>
-  ) : (
-    <span className="fhir-datatype__HumanName__Header--default">{header}</span>
-  );
-  const rootClassName = primary
-    ? ''
-    : 'fhir-datatype__HumanName__not-primary-block';
-
   return (
-    <div className={`fhir-datatype__HumanName ${rootClassName}`}>
-      {headerElement}
-      {use && (
-        <small className="fhir-datatype__HumanName__use-block">
-          {` (${use})`}
-        </small>
-      )}
-    </div>
+    <>
+      {header}
+      {!isTitle && use && <span>{` (${use})`}</span>}
+    </>
   );
 }
 

package/src/components/datatypes/Reference/Reference.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import _get from 'lodash/get';
-import './Reference.css';
 
 const Reference = props => {
   const { fhirData } = props;
@@ -8,13 +7,11 @@ const Reference = props => {
   const reference = _get(fhirData, 'reference', '');
   return (
     <div
-      className="fhir-datatype__Reference"
+      className="fhir-datatype__Reference d-inline-block"
       data-testid={props['data-testid']}
     >
-      {display && (
-        <span className="fhir-datatype__Reference__title">{display}</span>
-      )}
-      <span className="fhir-datatype__Reference__details">{reference}</span>
+      {display && <span className="mr-2 pe-1">{display}</span>}
+      <span>{reference}</span>
     </div>
   );
 };

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

@@ -16,7 +16,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('title').textContent).toContain('Patient');
 
-    expect(getByTestId('date').textContent).toEqual('2017-01-29');
+    expect(getByTestId('date').textContent).toEqual('1/29/2017');
 
     expect(getByTestId('type').textContent).toContain('304386008');
 
@@ -36,7 +36,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('title').textContent).toContain('Patient');
 
-    expect(getByTestId('date').textContent).toEqual('2017-01-29');
+    expect(getByTestId('date').textContent).toEqual('1/29/2017');
 
     expect(getByTestId('hasSeriousness').textContent).toContain('Non-serious');
 

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

@@ -22,7 +22,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('unconfirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('2010-03-01');
+    expect(getByTestId('recordedDate').textContent).toContain('3/1/2010');
 
     expect(getByTestId('substance').textContent).toContain('PENICILLIN');
 
@@ -46,7 +46,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('2014-10-09');
+    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
 
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -78,7 +78,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('Confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('2014-10-09');
+    expect(getByTestId('recordedDate').textContent).toContain('10/9/2014');
 
     expect(getByTestId('substance').textContent).toContain(
       'allergenic extract',
@@ -114,7 +114,7 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('status').textContent).toContain('Confirmed');
 
-    expect(getByTestId('recordedDate').textContent).toContain('2015-08-06');
+    expect(getByTestId('recordedDate').textContent).toContain('8/6/2015');
 
     expect(getByTestId('patient').textContent).toEqual('Patient/mom');
 

package/src/components/resources/Appointment/Appointment.js

@@ -6,9 +6,7 @@ import fhirVersions from '../fhirResourceVersions';
 import {
   Root,
   Header,
-  Title,
   Badge,
-  BadgeSecondary,
   Body,
   Value,
   ValueSection,
@@ -23,6 +21,7 @@ import Coding from '../../datatypes/Coding';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import { isNotEmptyArray } from '../../../utils';
+import Accordion from '../../containers/Accordion';
 
 const prepareParticipantData = data => {
   let participantPatient = [];
@@ -163,71 +162,98 @@ const Appointment = props => {
     serviceCategory,
   } = resourceDTO(fhirVersion, fhirResource);
 
+  const tableData = [
+    {
+      label: 'Type',
+      testId: 'type',
+      data:
+        isNotEmptyArray(typeCoding) &&
+        typeCoding.map((item, i) => (
+          <Coding key={`item-${i}`} fhirData={item} />
+        )),
+      status: isNotEmptyArray(typeCoding),
+    },
+    {
+      label: 'Duration [min]',
+      testId: 'minutesDuration',
+      data: minutesDuration,
+      status: minutesDuration,
+    },
+    {
+      label: 'Reason',
+      testId: 'reason',
+      data: isNotEmptyArray(reason) && <CodeableConcept fhirData={reason} />,
+      status: isNotEmptyArray(reason),
+    },
+    {
+      label: 'Cancelation Reason',
+      testId: 'cancelationReason',
+      data: isNotEmptyArray(cancelationReason) && (
+        <CodeableConcept fhirData={cancelationReason} />
+      ),
+      status: isNotEmptyArray(cancelationReason),
+    },
+    {
+      label: 'Service Category',
+      testId: 'serviceCategory',
+      data: isNotEmptyArray(serviceCategory) && (
+        <CodeableConcept fhirData={serviceCategory} />
+      ),
+      status: isNotEmptyArray(serviceCategory),
+    },
+  ];
+
   return (
     <Root name="Appointment">
-      <Header>
-        {description && <Title>{description}</Title>}
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {start && (
-          <BadgeSecondary data-testid="startDate">
-            on <Date fhirData={start} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {isNotEmptyArray(typeCoding) && (
-          <Value label="Type" data-testid="type">
-            {typeCoding.map((item, i) => (
-              <Coding key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {minutesDuration && (
-          <Value label="Duration [min]" data-testid="minutesDuration">
-            {minutesDuration}
-          </Value>
-        )}
-        {isNotEmptyArray(reason) && (
-          <Value label="Reason" data-testid="reason">
-            <CodeableConcept fhirData={reason} />
-          </Value>
-        )}
-        {isNotEmptyArray(cancelationReason) && (
-          <Value label="Cancelation Reason" data-testid="cancelationReason">
-            <CodeableConcept fhirData={cancelationReason} />
-          </Value>
-        )}
-        {isNotEmptyArray(serviceCategory) && (
-          <Value label="Service Category" data-testid="serviceCategory">
-            <CodeableConcept fhirData={serviceCategory} />
-          </Value>
-        )}
-        {isNotEmptyArray(participant) && (
-          <ValueSection label="Participant" data-testid="participant">
-            <Table>
-              <thead>
-                <TableRow>
-                  <TableHeader>Patient</TableHeader>
-                  <TableHeader>Practitioner</TableHeader>
-                  <TableHeader>Other</TableHeader>
-                </TableRow>
-              </thead>
-              <tbody>
-                <TableRow>
-                  <TableCell>{participantPatient}</TableCell>
-                  <TableCell>{participantPractitioner}</TableCell>
-                  <TableCell>{participantLocation}</TableCell>
-                </TableRow>
-              </tbody>
-            </Table>
-          </ValueSection>
-        )}
-        {comment && (
-          <Value label="Comment" data-testid="comment">
-            {comment}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={fhirResource.resourceName}
+            additionalContent={
+              start && (
+                <Value label="Start date" data-testid="headerStartDate">
+                  <Date fhirData={start} isBlack />
+                </Value>
+              )
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            title={description}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {isNotEmptyArray(participant) && (
+              <ValueSection
+                label="Participant"
+                data-testid="participant"
+                marginTop
+              >
+                <Table>
+                  <thead>
+                    <TableRow>
+                      <TableHeader>Patient</TableHeader>
+                      <TableHeader>Practitioner</TableHeader>
+                      <TableHeader>Other</TableHeader>
+                    </TableRow>
+                  </thead>
+                  <tbody className="border-top-0">
+                    <TableRow>
+                      <TableCell>{participantPatient}</TableCell>
+                      <TableCell>{participantPractitioner}</TableCell>
+                      <TableCell>{participantLocation}</TableCell>
+                    </TableRow>
+                  </tbody>
+                </Table>
+              </ValueSection>
+            )}
+            {comment && (
+              <ValueSection label="Comment" data-testid="comment" marginTop>
+                <span className="text-secondary">{comment}</span>
+              </ValueSection>
+            )}
+          </Body>
+        }
+      />
     </Root>
   );
 };