npm - fhir-react - Versions diffs - 0.3.5 → 0.3.8 - Mend

fhir-react 0.3.5 → 0.3.8

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

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

@@ -5,8 +5,9 @@ import _get from 'lodash/get';
 import Reference from '../../datatypes/Reference';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-import { Root, Header, Title, Body, Value, Badge } from '../../ui';
+import { Root, Header, Body, Badge } from '../../ui';
 import CodeableConcept from '../../datatypes/CodeableConcept/CodeableConcept';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const status = _get(fhirResource, 'active') === true ? 'active' : '';
@@ -42,8 +43,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const PractitionerRole = props => {
-  const { fhirResource, fhirVersion } = props;
+const PractitionerRole = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -58,34 +63,50 @@ const PractitionerRole = props => {
     organization,
     practitioner,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Practitioner',
+      testId: 'practitioner',
+      data: practitioner && <Reference fhirData={practitioner} />,
+      status: practitioner,
+    },
+    {
+      label: 'Organization',
+      testId: 'organization',
+      data: organization && <Reference fhirData={organization} />,
+      status: organization,
+    },
+    {
+      label: 'Specialties',
+      testId: 'specialties',
+      data: specialties.length > 0 && (
+        <CodeableConcept fhirData={specialties} isCursive />
+      ),
+      status: specialties.length > 0,
+    },
+    {
+      label: 'Roles',
+      testId: 'roles',
+      data: codes.length > 0 && <CodeableConcept fhirData={codes} isCursive />,
+      status: codes.length > 0,
+    },
+  ];
   return (
     <Root name="PractitionerRole">
-      <Header>
-        <Title>Practitioner roles and specialties</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-      </Header>
-      <Body>
-        {practitioner && (
-          <Value label="Practitioner" data-testid="practitioner">
-            <Reference fhirData={practitioner} />
-          </Value>
-        )}
-        {organization && (
-          <Value label="Organization" data-testid="organization">
-            <Reference fhirData={organization} />
-          </Value>
-        )}
-        {specialties.length > 0 && (
-          <Value label="Specialties" data-testid="specialties">
-            <CodeableConcept fhirData={specialties} />
-          </Value>
-        )}
-        {codes.length > 0 && (
-          <Value label="Roles" data-testid="roles">
-            <CodeableConcept fhirData={codes} />
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="PractitionerRole"
+            title="Practitioner roles and specialties"
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -12,6 +12,8 @@ import r4Example1 from '../../../fixtures/r4/resources/practitionerRole/example1
 import r4Example2 from '../../../fixtures/r4/resources/practitionerRole/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/practitionerRole/example3.json';
 import r4Example4 from '../../../fixtures/r4/resources/practitionerRole/example4.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import PractitionerRoleIcon from '../../../assets/containers/PractitionerRole/practitioner-role.svg';
 export default { title: 'PractitionerRole' };
@@ -21,6 +23,7 @@ export const ExampleOfSTU3 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/PractitionerRole/practitioner-role.svg')}
     />
   );
 };
@@ -31,6 +34,7 @@ export const Example2OfSTU3 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={PractitionerRoleIcon}
     />
   );
 };
@@ -41,6 +45,7 @@ export const Example3OfSTU3 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -61,6 +66,7 @@ export const Example2OfR4 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -71,6 +77,7 @@ export const Example3OfR4 = () => {
     <PractitionerRole
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -1,13 +1,85 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import PractitionerRole from './PractitionerRole';
 import fhirVersions from '../fhirResourceVersions';
 import stu3Example1 from '../../../fixtures/stu3/resources/practitionerRole/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/practitionerRole/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/practitionerRole/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('PractitionerRole 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(<PractitionerRole {...defaultProps} />);
+    const headerIcon = getByAltText('practitioner role');
+    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(<PractitionerRole {...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/PractitionerRole/practitioner-role.svg')}
+          alt="practitioner role"
+        />
+      ),
+    };
+    const { getByAltText } = render(<PractitionerRole {...defaultProps} />);
+    const headerIcon = getByAltText('practitioner role');
+    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(<PractitionerRole {...defaultProps} />);
+    const headerIcon = getByAltText('practitioner role');
+    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(<PractitionerRole {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render component correctly with STU3 source data', () => {
     const defaultProps = {
       fhirVersion: fhirVersions.STU3,
@@ -100,4 +172,39 @@ describe('PractitionerRole should render component correctly', () => {
     );
     jest.restoreAllMocks();
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: stu3Example1,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <PractitionerRole {...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 = {
+      fhirVersion: fhirVersions.R4,
+      fhirResource: stu3Example1,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <PractitionerRole {...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/Procedure/Procedure.js CHANGED Viewed

@@ -14,8 +14,7 @@ import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
 import { Value } from '../../ui';
-const Procedure = props => {
-  const { fhirResource, fhirIcons } = props;
+const Procedure = ({ fhirResource, fhirIcons, onClick }) => {
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -125,6 +124,7 @@ const Procedure = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
       />
     </Root>
   );

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

@@ -3,7 +3,7 @@ import React from 'react';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/procedure/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
 import fhirIcons from '../../../fixtures/example-icons';
 import fhirVersions from '../fhirResourceVersions';
@@ -168,4 +168,33 @@ describe('Procedure should render component correctly', () => {
       'Eerste neo-adjuvante',
     );
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example3 };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Procedure {...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: r4Example3 };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Procedure {...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/Questionnaire/Group.js ADDED Viewed

@@ -0,0 +1,53 @@
+import _get from 'lodash/get';
+import { MissingValue } from '../../ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Questions from './Questions';
+import { getQuestionText } from './getQuestionText';
+const Group = ({ data, prepareItems, isChild = false }) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+  return data.map(prepareItems).map((item, i) => {
+    const text = getQuestionText(item);
+    let nestedItems = _get(item, 'item', []);
+    nestedItems = nestedItems.map(prepareItems);
+    const isGroup = _get(item, 'isGroup');
+    return (
+      <ul
+        key={`questionnaire-item-${i}`}
+        className="fhir-resource__Questionnaire-list"
+      >
+        <li
+          className={
+            isChild
+              ? 'fhir-resource__Questionnaire-list-title-question'
+              : 'fhir-resource__Questionnaire-list-title'
+          }
+          data-testid={`linkId-${item.linkId}`}
+        >
+          {text ? text : <MissingValue />}
+        </li>
+        {!isGroup && (
+          <li>
+            <Questions questions={nestedItems} prepareItems={prepareItems} />
+          </li>
+        )}
+        {isGroup && (
+          <li>
+            <Group data={nestedItems} prepareItems={prepareItems} isChild />
+          </li>
+        )}
+      </ul>
+    );
+  });
+};
+Group.propTypes = {
+  data: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+export default Group;

package/src/components/resources/Questionnaire/Items.js ADDED Viewed

@@ -0,0 +1,45 @@
+import fhirVersions from '../fhirResourceVersions';
+import _get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+const Items = ({ fhirVersion, data }) => {
+  if (fhirVersion === fhirVersions.DSTU2) {
+    const prepareItems = item => ({
+      ...item,
+      item: _get(item, 'question') || _get(item, 'group') || [],
+      isGroup: !!_get(item, 'group'),
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+  if (fhirVersion === fhirVersions.STU3) {
+    const prepareItems = item => ({
+      ...item,
+      isGroup: _get(item, 'type') === 'group',
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+  if (fhirVersion === fhirVersions.R4) {
+    const prepareItems = item => ({
+      ...item,
+      isGroup: _get(item, 'type') === 'group',
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+  return null;
+};
+Items.propTypes = {
+  data: PropTypes.array,
+  fhirVersion: PropTypes.oneOf([
+    fhirVersions.DSTU2,
+    fhirVersions.STU3,
+    fhirVersions.R4,
+  ]).isRequired,
+};
+export default Items;

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

@@ -1,21 +1,41 @@
 .fhir-resource__Questionnaire-list {
   list-style: none;
-  border: 1px solid #f0f0f0;
   padding: 2px;
   margin: 2px;
 }
 .fhir-resource__Questionnaire-list-title {
-  background-color: #f6f6f6;
-  padding: 2px 2px 4px 2px;
+  padding: 2px 2px 8px 2px;
+  font-weight: bold;
+}
+.fhir-resource__Questionnaire-list-title-question {
+  background: #f8f9fa;
+  align-items: center;
+  margin-bottom: 56px;
+  padding-left: 16px;
+  border-radius: 4px;
+  color: #adb5bd;
 }
 .fhir-resource__Questionnaire-questions-list {
   list-style: none;
+  padding-left: 0;
+  display: block;
+  color: #adb5bd;
 }
 .fhir-resource__Questionnaire-questions-list li {
-  border-bottom: 1px solid #f5f5f5;
+  display: block;
+  margin-bottom: 56px;
+}
+.fhir-resource__Questionnaire-questions-list-element {
+  background: #f8f9fa;
+  border-radius: 4px;
+  width: 100%;
+  padding-left: 16px;
+  margin-bottom: 56px;
 }
 .fhir-resource__Questionnaire-questions-list li:last-child {
@@ -24,7 +44,6 @@
 .fhir-resource__Questionnaire-questions-list-item-details {
   font-size: 80%;
-  color: #606060;
 }
 .fhir-resource__Questionnaire-questions-list-item-details-el {