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

fhir-react 0.3.6 → 0.3.9

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 (160) hide show

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

@@ -2,11 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import fhirVersions from '../fhirResourceVersions';
-import { Root, Header, Title, Body, Value } from '../../ui';
+import {
+  Root,
+  Header,
+  Body,
+  ValueSection,
+  ValueSectionItem,
+  Value,
+} from '../../ui';
 import Reference from '../../datatypes/Reference';
 import Date from '../../datatypes/Date';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import CodeableConcept, { hasValue } from '../../datatypes/CodeableConcept';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const subject = _get(fhirResource, 'subject');
@@ -63,8 +71,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const AdverseEvent = props => {
-  const { fhirResource, fhirVersion } = props;
+const AdverseEvent = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -86,47 +99,80 @@ const AdverseEvent = props => {
     hasEvent,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Event',
+      testId: 'event',
+      data: hasEventType && <CodeableConcept fhirData={eventType} />,
+      status: hasEventType,
+    },
+    {
+      label: 'Event',
+      testId: 'event',
+      data: hasEvent && <CodeableConcept fhirData={event} />,
+      status: hasEvent,
+    },
+    {
+      label: 'Seriousness',
+      testId: 'hasSeriousness',
+      data: hasSeriousness && (
+        <CodeableConcept fhirData={seriousness} isCursive />
+      ),
+      status: hasSeriousness,
+    },
+    {
+      label: 'Actuality',
+      testId: 'actuality',
+      data: actuality,
+      status: actuality,
+    },
+  ];
   return (
     <Root name="AdverseEvent">
-      <Header>
-        {subject && (
-          <Title>
-            <Reference fhirData={subject} />
-          </Title>
-        )}
-      </Header>
-      <Body>
-        {date && (
-          <Value label="Date" data-testid="date">
-            <Date fhirData={date} />
-          </Value>
-        )}
-        {hasEventType && (
-          <Value label="Type" data-testid="type">
-            <CodeableConcept fhirData={eventType} />
-          </Value>
-        )}
-        {hasEvent && (
-          <Value label="Event" data-testid="event">
-            <CodeableConcept fhirData={event} />
-          </Value>
-        )}
-        {description && (
-          <Value label="Description" data-testid="description">
-            {description}
-          </Value>
-        )}
-        {hasSeriousness && (
-          <Value label="Seriousness" data-testid="hasSeriousness">
-            <CodeableConcept fhirData={seriousness} />
-          </Value>
-        )}
-        {actuality && (
-          <Value label="Actuality" data-testid="actuality">
-            {actuality}
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName={'AdverseEvent'}
+            title={subject && <Reference fhirData={subject} />}
+            icon={fhirIcons}
+            additionalContent={
+              date && (
+                <Value label="Date" data-testid="date">
+                  <Date fhirData={date} isBlack />
+                </Value>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {description && (
+              <ValueSection
+                label="Comment"
+                data-testid="description"
+                marginBottom
+              >
+                <span className="text-secondary">{description}</span>
+              </ValueSection>
+            )}
+            {tableData.map(
+              (item, index) =>
+                item.status && (
+                  <ValueSectionItem
+                    key={`adverse-event-item-${index}`}
+                    label={item.label}
+                    data-testid={item.testId}
+                  >
+                    {item.data}
+                  </ValueSectionItem>
+                ),
+            )}
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -7,6 +7,8 @@ import fhirVersions from '../fhirResourceVersions';
 import stu3Example1 from '../../../fixtures/stu3/resources/adverseEvent/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/adverseEvent/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'AdverseEvent',
 };
@@ -14,13 +16,21 @@ export default {
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
   return (
-    <AdverseEvent fhirResource={fhirResource} fhirVersion={fhirVersions.STU3} />
+    <AdverseEvent
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
+    />
   );
 };
 export const Example1ofR4 = () => {
   const fhirResource = object('Resource', r4Example1);
   return (
-    <AdverseEvent fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
+    <AdverseEvent
+      fhirResource={fhirResource}
+      fhirVersion={fhirVersions.R4}
+      fhirIcons={false}
+    />
   );
 };

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

@@ -1,12 +1,84 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import AdverseEvent from './AdverseEvent';
 import fhirVersions from '../fhirResourceVersions';
 import stu3Example1 from '../../../fixtures/stu3/resources/adverseEvent/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/adverseEvent/example1.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+    };
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: false,
+    };
+    const { getByTestId } = render(<AdverseEvent {...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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/AdverseEvent/adverse-event.svg')}
+          alt="adverse event"
+        />
+      ),
+    };
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: fhirIcons,
+    };
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('adverse event');
+    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.STU3,
+      fhirResource: stu3Example1,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<AdverseEvent {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with STU3 source data', () => {
     const defaultProps = {
       fhirResource: stu3Example1,
@@ -18,7 +90,7 @@ describe('should render component correctly', () => {
     expect(getByTestId('date').textContent).toEqual('1/29/2017');
-    expect(getByTestId('type').textContent).toContain('304386008');
+    expect(getByTestId('event').textContent).toContain('304386008');
     expect(getByTestId('description').textContent).toContain(
       'This was a mild rash',
@@ -44,4 +116,39 @@ describe('should render component correctly', () => {
     expect(getByTestId('actuality').textContent).toEqual('actual');
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <AdverseEvent {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <AdverseEvent {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

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

@@ -123,7 +123,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const AllergyIntolerance = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const AllergyIntolerance = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -231,6 +237,8 @@ const AllergyIntolerance = ({ fhirResource, fhirVersion, fhirIcons }) => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import AllergyIntolerance from './AllergyIntolerance';
 import exampleAllergyIntoleranceDSTU2 from '../../../fixtures/dstu2/resources/allergyIntolerance/example1.json';
@@ -201,4 +201,39 @@ describe('should render component correctly', () => {
     expect(queryByTestId('asserter')).toBeNull();
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2AllergyIntoleranceR4,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <AllergyIntolerance {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2AllergyIntoleranceR4,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <AllergyIntolerance {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

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

@@ -144,7 +144,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Appointment = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Appointment = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     description,
     status,
@@ -253,6 +259,8 @@ const Appointment = ({ fhirResource, fhirVersion, fhirIcons }) => {
             )}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Appointment from './Appointment';
 import fhirVersions from '../fhirResourceVersions';
@@ -231,4 +231,39 @@ describe('should render component correctly', () => {
     expect(getByTestId('reason').textContent).toContain('Clinical Review');
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example3AppointmentR4,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Appointment {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example3AppointmentR4,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Appointment {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

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

@@ -6,7 +6,7 @@ import Accordion from '../../containers/Accordion/Accordion';
 import { Body, Header } from '../../ui';
 const Binary = props => {
-  const { fhirResource, fhirIcons } = props;
+  const { fhirResource, fhirIcons, rawOnClick } = props;
   const loadBinaryFile = () => {
     switch (fhirResource.contentType) {
@@ -37,6 +37,7 @@ const Binary = props => {
           />
         }
         bodyContent={<Body>{loadBinaryFile()}</Body>}
+        rawOnClick={rawOnClick}
       />
     </div>
   );

package/src/components/resources/Bundle/Bundle.css CHANGED Viewed

@@ -1,3 +1,10 @@
 .fhir-resource__Bundle__item {
   margin-top: 10px;
 }
+.fhir-resource__Bundle__rootPadding:first-of-type {
+  padding: 8px;
+  background: white;
+  border-radius: 0.2rem;
+  border: 1px solid #dee2e6;
+}

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

@@ -4,12 +4,12 @@ import _get from 'lodash/get';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-import { Root, Header, Title, Badge, Body, BadgeSecondary } from '../../ui';
+import { Root, Header, Badge, Body, BadgeSecondary } from '../../ui';
 import * as FhirResourceTypes from '../../supportedFhirResourceList';
 import './Bundle.css';
-export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
+export default function Bundle({ fhirResource, fhirVersion }) {
   const commonDTO = fhirResource => {
     const type = _get(fhirResource, 'type', null);
     const total = _get(fhirResource, 'total');
@@ -51,11 +51,14 @@ export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
     .filter(Boolean);
   return (
-    <Root name="Bundle">
-      <Header>
-        {type && <Title data-testid="title">{type}</Title>}
-        {total && <Badge data-testid="total">{total}</Badge>}
-      </Header>
+    <Root name="Bundle" className="fhir-resource__Bundle__rootPadding">
+      <Header
+        resourceName="Bundle"
+        title={type}
+        badges={!isNaN(total) && <Badge data-testid="total">{total}</Badge>}
+        capitalize
+        isNoIcon
+      />
       <Body>
         {resources.length > 0 &&
           resources.map((resource, index) => {
@@ -71,14 +74,15 @@ export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
                 key={`${resource.id}-${index}`}
               >
                 {resourceType && (
-                  <BadgeSecondary data-testid="resourceType">
-                    {resourceType}
-                  </BadgeSecondary>
+                  <div className="mx-20">
+                    <BadgeSecondary data-testid="resourceType">
+                      {resourceType}
+                    </BadgeSecondary>
+                  </div>
                 )}
                 <FhirComponent
                   fhirResource={resource}
                   fhirVersion={fhirVersion}
-                  fhirIcons={fhirIcons}
                 />
               </div>
             );