npm - fhir-react - Versions diffs - 0.3.2 → 0.3.6 - Mend

fhir-react 0.3.2 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/src/components/resources/Goal/Goal.js CHANGED Viewed

@@ -3,20 +3,13 @@ import PropTypes from 'prop-types';
 import Reference from '../../datatypes/Reference';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
+import Accordion from '../../containers/Accordion/Accordion';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-} from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 const commonDTO = fhirResource => {
   const title = _get(fhirResource, 'note[0].text', 'Goal');
@@ -107,7 +100,8 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 const Goal = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -135,83 +129,107 @@ const Goal = props => {
     statusDate,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Subject',
+      testId: 'statusDate',
+      data: statusDate && <Date fhirData={statusDate} />,
+      status: statusDate,
+    },
+    {
+      label: 'Description',
+      testId: 'description',
+      data: description,
+      status: description,
+    },
+    {
+      label: 'Category',
+      testId: 'category',
+      data:
+        hasCategory &&
+        category.map((item, i) => {
+          const coding = _get(item, 'coding', []);
+          if (!Array.isArray(coding)) {
+            return null;
+          }
+          return coding.map((codingItem, j) => (
+            <Coding key={`coding-item-${j}`} fhirData={codingItem} />
+          ));
+        }),
+      status: hasCategory,
+    },
+    {
+      label: 'Universal Device Identifier',
+      testId: 'udi',
+      data: udi,
+      status: hasUdi,
+    },
+    {
+      label: 'Addresses',
+      testId: 'addresses',
+      data:
+        hasAddresses &&
+        addresses.map((address, i) => (
+          <Reference key={`address-item-${i}`} fhirData={address} />
+        )),
+      status: hasAddresses,
+    },
+    {
+      label: 'Priority',
+      testId: 'priority',
+      data: priority && <Coding fhirData={priority} />,
+      status: priority,
+    },
+    {
+      label: 'Author',
+      testId: 'author',
+      data: author && <Reference fhirData={author} />,
+      status: author,
+    },
+    {
+      label: 'Outcome',
+      testId: 'outcomeReference',
+      data:
+        outcomeReference &&
+        outcomeReference.map((item, i) => (
+          <Reference key={`outcome-reference-item-${i}`} fhirData={item} />
+        )),
+      status: outcomeReference,
+    },
+    {
+      label: 'Achievement Status',
+      testId: 'achievementStatus',
+      data: achievementStatus && <Coding fhirData={achievementStatus} />,
+      status: achievementStatus,
+    },
+  ];
   return (
     <Root name="Goal">
-      <Header>
-        <Title data-testid="title">{title}</Title>
-        {hasStatus && <Badge data-testid="status">{status}</Badge>}
-        {startDate && (
-          <BadgeSecondary data-testid="statusSecondary">
-            starting on {startDate}
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {statusDate && (
-          <Value label="Status Date" data-testid="statusDate">
-            <Date fhirData={statusDate} />
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {hasCategory && (
-          <Value label="Category" data-testid="category">
-            {category.map((item, i) => {
-              const coding = _get(item, 'coding', []);
-              if (!Array.isArray(coding)) {
-                return null;
-              }
-              return coding.map((codingItem, j) => (
-                <div key={`item-${j}`}>
-                  <Coding fhirData={codingItem} />
-                </div>
-              ));
-            })}
-          </Value>
-        )}
-        {hasUdi && <Value label="Universal Device Identifier"> {udi}</Value>}
-        {hasAddresses && (
-          <Value label="Addresses" data-testid="addresses">
-            {addresses.map((address, i) => {
-              return (
-                <div key={`item-${i}`}>
-                  <Reference fhirData={address} />
-                </div>
-              );
-            })}
-          </Value>
-        )}
-        {priority && (
-          <Value label="Priority" data-testid="priority">
-            <Coding fhirData={priority} />
-          </Value>
-        )}
-        {author && (
-          <Value label="Author" data-testid="author">
-            <Reference fhirData={author} />
-          </Value>
-        )}
-        {outcomeReference && (
-          <Value label="Outcome" data-testid="outcomeReference">
-            {outcomeReference.map((item, i) => (
-              <Reference key={`item-${i}`} fhirData={item} />
-            ))}
-          </Value>
-        )}
-        {achievementStatus && (
-          <Value label="Achievement Status" data-testid="achievementStatus">
-            <Coding fhirData={achievementStatus} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Goal"
+            additionalContent={
+              startDate && (
+                <Value label="Started" data-testid="headerStartDate">
+                  <Date fhirData={startDate} isBlack />
+                </Value>
+              )
+            }
+            badges={hasStatus && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+            title={title}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

package/src/components/resources/Goal/Goal.stories.js CHANGED Viewed

@@ -2,13 +2,14 @@ import React from 'react';
 import { object } from '@storybook/addon-knobs';
 import Goal from './Goal';
+import fhirIcons from '../../../fixtures/example-icons';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/goal/example1.json';
 import dstu2Example2 from '../../../fixtures/dstu2/resources/goal/example2.json';
 import stu3Example1 from '../../../fixtures/stu3/resources/goal/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/goal/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/goal/example2.json';
 import fhirVersions from '../fhirResourceVersions';
+import GoalIcon from '../../../assets/containers/Goal/goal.svg';
 export default {
   title: 'Goal',
@@ -16,30 +17,60 @@ export default {
 export const DefaultVisualizationDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example1);
-  return <Goal fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/Goal/goal.svg')}
+    />
+  );
 };
 export const Example2OfDSTU2 = () => {
   const fhirResource = object('Resource', dstu2Example2);
-  return <Goal fhirVersion={fhirVersions.DSTU2} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.DSTU2}
+      fhirResource={fhirResource}
+      fhirIcons={GoalIcon}
+    />
+  );
 };
 export const ExampleOfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Goal fhirVersion={fhirVersions.STU3} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.STU3}
+      fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
+    />
+  );
 };
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', r4Example1);
-  return <Goal fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={false}
+    />
+  );
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', r4Example2);
-  return <Goal fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+  return (
+    <Goal
+      fhirVersion={fhirVersions.R4}
+      fhirResource={fhirResource}
+      fhirIcons={'random text'}
+    />
+  );
 };
 export const ExampleWithoutFhirVersionProperty = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <Goal fhirResource={fhirResource} />;
+  return <Goal fhirResource={fhirResource} fhirIcons={fhirIcons} />;
 };

package/src/components/resources/Goal/Goal.test.js CHANGED Viewed

@@ -7,8 +7,77 @@ import dstu2Example1 from '../../../fixtures/dstu2/resources/goal/example1.json'
 import stu3Example1 from '../../../fixtures/stu3/resources/goal/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/goal/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/goal/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('should render Goal component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+    };
+    const { getByAltText } = render(<Goal {...defaultProps} />);
+    const headerIcon = getByAltText('goal');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: false,
+    };
+    const { getByTestId } = render(<Goal {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+    expect(headerIcon).toBeTruthy();
+  });
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: (
+        <img src={require('../assets/containers/Goal/goal.svg')} alt="goal" />
+      ),
+    };
+    const { getByAltText } = render(<Goal {...defaultProps} />);
+    const headerIcon = getByAltText('goal');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirResource: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: fhirIcons,
+    };
+    const { getByAltText } = render(<Goal {...defaultProps} />);
+    const headerIcon = getByAltText('goal');
+    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: dstu2Example1,
+      fhirVersion: fhirVersions.DSTU2,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<Goal {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -100,9 +169,7 @@ describe('should render Goal component properly', () => {
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('statusSecondary').textContent).toEqual(
-      'starting on 2015-04-05',
-    );
+    expect(getByTestId('headerStartDate').textContent).toEqual('4/5/2015');
     expect(getByTestId('subject').textContent).toContain(
       'Peter James Chalmers',

package/src/components/resources/Immunization/Immunization.js CHANGED Viewed

@@ -125,7 +125,6 @@ const Immunization = props => {
     note,
   } = resourceDTO(fhirVersion, fhirResource);
-  const headerIcon = fhirIcons && fhirIcons[_get(fhirResource, 'resourceType')];
   const tableData = [
     {
       label: 'Manufacturer Text',
@@ -237,7 +236,7 @@ const Immunization = props => {
               )
             }
             badges={status && <Badge data-testid="status">{status}</Badge>}
-            icon={headerIcon}
+            icon={fhirIcons}
             title={title}
           />
         }

package/src/components/resources/Immunization/Immunization.stories.js CHANGED Viewed

@@ -11,6 +11,7 @@ import r4Example1 from '../../../fixtures/r4/resources/immunization/example1.jso
 import r4Example2 from '../../../fixtures/r4/resources/immunization/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/immunization/example3.json';
 import fhirIcons from '../../../fixtures/example-icons';
+import ImmunizationIcon from '../../../assets/containers/Immunization/immunization.svg';
 export default {
   title: 'Immunization',
@@ -22,7 +23,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Immunization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
+      fhirIcons={require('../../../assets/containers/Immunization/immunization.svg')}
     />
   );
 };
@@ -33,7 +34,7 @@ export const Example2OfDSTU2 = () => {
     <Immunization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
+      fhirIcons={ImmunizationIcon}
     />
   );
 };
@@ -55,7 +56,7 @@ export const Example1R4 = () => {
     <Immunization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
+      fhirIcons={false}
     />
   );
 };
@@ -65,17 +66,13 @@ export const Example2R4 = () => {
     <Immunization
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
+      fhirIcons={'random text'}
     />
   );
 };
 export const Example3R4 = () => {
   const fhirResource = object('Resource', r4Example3);
   return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
+    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
   );
 };

package/src/components/resources/Immunization/Immunization.test.js CHANGED Viewed

@@ -6,10 +6,80 @@ import r4Example1 from '../../../fixtures/r4/resources/immunization/example1.jso
 import r4Example2 from '../../../fixtures/r4/resources/immunization/example2.json';
 import { render } from '@testing-library/react';
 import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.json';
 import fhirIcons from '../../../fixtures/example-icons';
 describe('should render Immunization component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example,
+    };
+    const { getByAltText } = render(<Immunization {...defaultProps} />);
+    const headerIcon = getByAltText('immunization');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example,
+      fhirIcons: false,
+    };
+    const { getByTestId } = render(<Immunization {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+    expect(headerIcon).toBeTruthy();
+  });
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Immunization/immunization.svg')}
+          alt="immunization"
+        />
+      ),
+    };
+    const { getByAltText } = render(<Immunization {...defaultProps} />);
+    const headerIcon = getByAltText('immunization');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example,
+      fhirIcons: fhirIcons,
+    };
+    const { getByAltText } = render(<Immunization {...defaultProps} />);
+    const headerIcon = getByAltText('immunization');
+    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 = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<Immunization {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example,

package/src/components/resources/Medication/Medication.test.js CHANGED Viewed

@@ -10,7 +10,7 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medication/example2.j
 import r4Example1 from '../../../fixtures/r4/resources/medication/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medication/example2.json';
-describe('should render Medication component properly', () => {
+describe('should render MedicationOrder component properly', () => {
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,

package/src/components/resources/MedicationKnowledge/MedicationKnowledge.js CHANGED Viewed

@@ -142,7 +142,7 @@ const MedicationKnowledge = props => {
     <Root name="MedicationKnowledge">
       <Header>
         <Title>
-          {id ? `Medication knowledge ID: ${id}` : 'Medication knowledge'}{' '}
+          {id ? `Medication knowledge ID: ${id}` : 'MedicationOrder knowledge'}{' '}
           {status && <Badge data-testid="status">{status}</Badge>}
         </Title>
       </Header>

package/src/components/resources/MedicationOrder/MedicationOrder.js CHANGED Viewed

@@ -1,14 +1,16 @@
 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 { Root, Header, Title, Body, Value } from '../../ui';
+import { Root, Header, Body } from '../../ui';
 const MedicationOrder = props => {
-  const { fhirResource } = props;
+  const { fhirResource, fhirIcons } = props;
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -22,34 +24,49 @@ const MedicationOrder = props => {
   const dosageInstruction = _get(fhirResource, 'dosageInstruction');
   const hasDosageInstruction =
     Array.isArray(dosageInstruction) && dosageInstruction.length > 0;
+  const tableData = [
+    {
+      label: 'Medication',
+      testId: 'medication',
+      data: showMedicationCodeableConcept && (
+        <Coding fhirData={medicationCodeableConcept} />
+      ),
+      status: showMedicationCodeableConcept,
+    },
+    {
+      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="MedicationOrder">
-      <Header>
-        <Title>
-          {medicationReference && <Reference fhirData={medicationReference} />}
-        </Title>
-      </Header>
-      <Body>
-        {showMedicationCodeableConcept && (
-          <Value label="Medication" data-testid="medication">
-            <Coding fhirData={medicationCodeableConcept} />
-          </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="MedicationOrder"
+            title={
+              medicationReference && (
+                <Reference fhirData={medicationReference} />
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };