fhir-react 0.3.2 → 0.3.6

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

@@ -4,8 +4,75 @@ import { render } from '@testing-library/react';
 import MedicationOrder from './MedicationOrder';
 
 import example from '../../../fixtures/dstu2/resources/medicationOrder/example.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationOrder component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: example,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationOrder/medication-order.svg')}
+          alt="medication order"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('medication order');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirResource: example,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationOrder {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: example,

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

@@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import Accordion from '../../containers/Accordion/Accordion';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
 
-import { Root, Header, Title, Body, Value } from '../../ui';
+import { Root, Header, Body } from '../../ui';
 
-const MedicationRequest = props => {
-  const { fhirResource } = props;
+const MedicationRequest = ({ fhirResource, fhirIcons }) => {
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -25,49 +25,69 @@ const MedicationRequest = props => {
     _get(fhirResource, 'requester.agent') || _get(fhirResource, 'requester');
   const created = _get(fhirResource, 'authoredOn');
   const intent = _get(fhirResource, 'intent');
+  const tableData = [
+    {
+      label: 'Medication',
+      testId: 'medication',
+      data: showMedicationCodeableConcept && (
+        <Coding fhirData={medicationCodeableConcept} />
+      ),
+      status: showMedicationCodeableConcept,
+    },
+    {
+      label: 'Requester',
+      testId: 'requester',
+      data: requester && <Reference fhirData={requester} />,
+      status: requester,
+    },
+    {
+      label: 'Created',
+      testId: 'created',
+      data: created && <Date fhirData={created} />,
+      status: created,
+    },
+    {
+      label: 'Type of request',
+      testId: 'intent',
+      data: intent,
+      status: intent,
+    },
+    {
+      label: 'Reason',
+      testId: 'reasonCode',
+      data: reasonCode && <CodeableConcept fhirData={reasonCode} />,
+      status: reasonCode,
+    },
+    {
+      label: 'Dosage',
+      testId: 'hasDosageInstruction',
+      data:
+        hasDosageInstruction &&
+        dosageInstruction.map((item, i) => (
+          <p key={`dosage-instruction-item-${i}`}>{item.text}</p>
+        )),
+      status: hasDosageInstruction,
+    },
+  ];
+
   return (
     <Root name="MedicationRequest">
-      <Header>
-        <Title>
-          {medicationReference && <Reference fhirData={medicationReference} />}
-        </Title>
-      </Header>
-      <Body>
-        {showMedicationCodeableConcept && (
-          <Value label="Medication" data-testid="medication">
-            <Coding fhirData={medicationCodeableConcept} />
-          </Value>
-        )}
-        {requester && (
-          <Value label="Requester" data-testid="requester">
-            <Reference fhirData={requester} />
-          </Value>
-        )}
-        {created && (
-          <Value label="Created" data-testid="created">
-            <Date fhirData={created} />
-          </Value>
-        )}
-        {intent && (
-          <Value label="Type of request" data-testid="intent">
-            {intent}
-          </Value>
-        )}
-        {reasonCode && (
-          <Value label="Reason" data-testid="reasonCode">
-            <CodeableConcept fhirData={reasonCode} />
-          </Value>
-        )}
-        {hasDosageInstruction && (
-          <Value label="Dosage" data-testid="hasDosageInstruction">
-            <ul>
-              {dosageInstruction.map((item, i) => (
-                <li key={`item-${i}`}>{item.text}</li>
-              ))}
-            </ul>
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="MedicationRequest"
+            title={
+              medicationReference ? (
+                <Reference fhirData={medicationReference} />
+              ) : (
+                'Medication request'
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

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

@@ -8,6 +8,8 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationRequest/exa
 import R4Example1 from '../../../fixtures/r4/resources/medicationRequest/example1.json';
 import R4Example2 from '../../../fixtures/r4/resources/medicationRequest/example2.json';
 import R4Example3 from '../../../fixtures/r4/resources/medicationRequest/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import MedicationRequestIcon from '../../../assets/containers/MedicationRequest/medication-request.svg';
 
 export default {
   title: 'MedicationRequest',
@@ -15,25 +17,39 @@ export default {
 
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationRequest/medication-request.svg')}
+    />
+  );
 };
 
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest
+      fhirResource={fhirResource}
+      fhirIcons={MedicationRequestIcon}
+    />
+  );
 };
 
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', R4Example1);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+  );
 };
 
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', R4Example2);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return <MedicationRequest fhirResource={fhirResource} fhirIcons={false} />;
 };
 
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', R4Example3);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={'random text'} />
+  );
 };

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

@@ -8,8 +8,75 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationRequest/exa
 import r4Example1 from '../../../fixtures/r4/resources/medicationRequest/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medicationRequest/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/medicationRequest/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 
 describe('should render MedicationRequest component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationOrder/medication-request.svg')}
+          alt="medication request"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('medication request');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirResource: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<MedicationRequest {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,

package/src/components/resources/MedicationStatement/MedicationDetails.js

@@ -0,0 +1,52 @@
+import { ValueSection, ValueSectionItem } from '../../ui';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
+import _get from 'lodash/get';
+
+const MedicationDetails = props => {
+  const {
+    medication,
+    expiration,
+    ingredient,
+    medicationReference,
+    hasReasonCode,
+    reasonCode,
+  } = props;
+  return (
+    <ValueSection label={medication} marginBottom>
+      <ValueSectionItem label="Expiration date" data-testid="expirationDate">
+        {expiration}
+      </ValueSectionItem>
+      {ingredient && (
+        <ValueSectionItem label="Ingredient" data-testid="ingredient">
+          {ingredient.map((item, i) => (
+            <div key={`item-${i}`} data-testid="ingredient-item">
+              {_get(item, 'itemCodeableConcept.coding.0.display', '')}
+            </div>
+          ))}
+        </ValueSectionItem>
+      )}
+      {medicationReference && (
+        <ValueSectionItem
+          label="Medication reference"
+          data-testid="medicationReference"
+        >
+          {<Reference fhirData={medicationReference} />}
+        </ValueSectionItem>
+      )}
+      {hasReasonCode && (
+        <ValueSectionItem label="Reasons" data-testid="hasReasonCode">
+          {reasonCode.map((item, i) => {
+            const display = _get(item, 'coding.0.display');
+            if (display) {
+              return <div key={`item-${i}`}>{display}</div>;
+            }
+            return null;
+          })}
+        </ValueSectionItem>
+      )}
+    </ValueSection>
+  );
+};
+
+export default MedicationDetails;

package/src/components/resources/MedicationStatement/MedicationDosage.js

@@ -0,0 +1,46 @@
+import { ValueSection, ValueSectionItem } from '../../ui';
+import React from 'react';
+import _get from 'lodash/get';
+
+const MedicationDosage = props => {
+  const { dosage, hasNote, note, itemNumber } = props;
+
+  const instructions = _get(dosage, 'text');
+  const additionalInstructionText = _get(
+    dosage,
+    'additionalInstruction[0].text',
+  );
+  const route =
+    _get(dosage, 'route.coding[0].display') ||
+    `${_get(dosage, 'route.text', '')} ${_get(dosage, 'text', '')}`;
+  const hasRoute = route.trim() !== '';
+
+  return (
+    <ValueSection label="Dosage" key={itemNumber}>
+      <ValueSectionItem label="Instructions" data-testid="dosageInstruction">
+        {instructions}
+      </ValueSectionItem>
+      {additionalInstructionText && (
+        <ValueSectionItem
+          label="Additional instruction"
+          data-testid="additionalInstruction"
+        >
+          {additionalInstructionText}
+        </ValueSectionItem>
+      )}
+      {hasRoute && (
+        <ValueSectionItem label="Route" data-testid="route">
+          {route}
+        </ValueSectionItem>
+      )}
+      {hasNote && (
+        <ValueSectionItem label="Notes" data-testid="hasNote">
+          {note.map((item, i) => (
+            <div key={`note-${i}`}>{item.text}</div>
+          ))}
+        </ValueSectionItem>
+      )}
+    </ValueSection>
+  );
+};
+export default MedicationDosage;

package/src/components/resources/MedicationStatement/MedicationStatement.js

@@ -3,42 +3,13 @@ import PropTypes from 'prop-types';
 
 import _get from 'lodash/get';
 import _has from 'lodash/has';
-import Date from '../../datatypes/Date';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import Annotation from '../../datatypes/Annotation';
-import Reference from '../../datatypes/Reference';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-  ValueSection,
-} from '../../ui';
-
-const MedicationDetails = props => {
-  const { medication, expiration, ingredient } = props;
-  return (
-    <div>
-      <h5>{medication} </h5>
-      <Value label="Expiration date">{expiration}</Value>
-      {ingredient && (
-        <Value label="Ingredient">
-          <ul>
-            {ingredient.map((item, i) => (
-              <li key={`item-${i}`}>
-                {_get(item, 'itemCodeableConcept.coding.0.display', '')}
-              </li>
-            ))}
-          </ul>
-        </Value>
-      )}
-    </div>
-  );
-};
+import Accordion from '../../containers/Accordion';
+import DatePeriod from '../../datatypes/DatePeriod/DatePeriod';
+import MedicationDetails from './MedicationDetails';
+import { Root, Header, Badge, Body } from '../../ui';
+import MedicationDosage from './MedicationDosage';
 
 const DEFAULT_TITLE = 'Medication Statement';
 
@@ -137,7 +108,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 
 const MedicationStatement = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -165,94 +136,71 @@ const MedicationStatement = props => {
 
   return (
     <Root name="MedicationStatement">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="hasStatus">{status}</Badge>}
-        {hasEffectivePeriod && (
-          <BadgeSecondary data-testid="hasEffectivePeriod">
-            from <Date fhirData={statusDesc.from} /> {'to '}
-            <Date fhirData={statusDesc.to} />
-            <span>{reported}</span>
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {hasMedications && (
-          <Value label="Medications">
-            {contained.map((medication, i) => {
-              const hasMedicationDetails = _has(
-                medication,
-                'code.coding[0].display',
-              );
-              if (hasMedicationDetails) {
-                return (
-                  <MedicationDetails
-                    key={`item-${i}`}
-                    medication={_get(medication, 'code.coding[0].display')}
-                    expiration={_get(
-                      medication,
-                      'package.batch[0].expirationDate',
-                    )}
-                    ingredient={_get(medication, 'ingredient', [])}
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="MedicationStatement"
+            badges={status && <Badge data-testid="hasStatus">{status}</Badge>}
+            title={title}
+            additionalContent={
+              hasEffectivePeriod && (
+                <>
+                  <DatePeriod
+                    periodBeginLabel="Start date"
+                    periodBeginDate={statusDesc.from}
+                    periodBeginTestId="startDate"
+                    periodEndLabel="End date"
+                    periodEndDate={statusDesc.to}
+                    periodEndTestId="endDate"
                   />
+                  <span>{reported}</span>
+                </>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {hasMedications &&
+              contained.map((medication, i) => {
+                const hasMedicationDetails = _has(
+                  medication,
+                  'code.coding[0].display',
                 );
-              }
-              return null;
-            })}
-          </Value>
-        )}
-        {medicationReference && (
-          <Value label="Medication Reference" data-testid="medicationReference">
-            <Reference fhirData={medicationReference} />
-          </Value>
-        )}
-        {hasReasonCode && (
-          <Value label="Reason" data-testid="hasReasonCode">
-            <ul>
-              {reasonCode.map((item, i) => {
-                const display = _get(item, 'coding.0.display');
-                if (display) {
-                  return <li key={`item-${i}`}>{display}</li>;
+                if (hasMedicationDetails) {
+                  return (
+                    <MedicationDetails
+                      key={`item-${i}`}
+                      itemNumber={`item-${i}`}
+                      medication={_get(medication, 'code.coding[0].display')}
+                      expiration={_get(
+                        medication,
+                        'package.batch[0].expirationDate',
+                      )}
+                      ingredient={_get(medication, 'ingredient', [])}
+                      medicationReference={medicationReference}
+                      hasReasonCode={hasReasonCode}
+                      reasonCode={reasonCode}
+                    />
+                  );
                 }
                 return null;
               })}
-            </ul>
-          </Value>
-        )}
-        {hasDosage && (
-          <ValueSection label="Dosage" data-testid="dosage">
-            {fhirResource.dosage.map((dosage, i) => {
-              const text = _get(dosage, 'text');
-              const additionalInstructionText = _get(
-                dosage,
-                'additionalInstruction[0].text',
-              );
-              const route =
-                _get(dosage, 'route.coding[0].display') ||
-                `${_get(dosage, 'route.text', '')} ${_get(dosage, 'text', '')}`;
-              const hasRoute = route.trim() !== '';
-              return (
-                <div key={`dosage-${i}`}>
-                  <Value label="Instructions" data-testid="dosageInstruction">
-                    {text}
-                  </Value>
-                  {additionalInstructionText && (
-                    <Value label="Additional Instruction">
-                      {additionalInstructionText}
-                    </Value>
-                  )}
-                  {hasRoute && <Value label="Route">{route}</Value>}
-                </div>
-              );
-            })}
-          </ValueSection>
-        )}
-        {hasNote && (
-          <Value label="Notes" data-testid="hasNote">
-            <Annotation fhirData={note} />
-          </Value>
-        )}
-      </Body>
+            {hasDosage &&
+              fhirResource.dosage.map((dosage, i) => {
+                return (
+                  <MedicationDosage
+                    key={`dosage-${i}`}
+                    dosage={dosage}
+                    hasNote={hasNote}
+                    note={note}
+                  />
+                );
+              })}
+          </Body>
+        }
+      />
     </Root>
   );
 };