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/MedicationDispense/MedicationDispense.js CHANGED Viewed

@@ -9,37 +9,14 @@ import fhirVersions from '../fhirResourceVersions';
 import {
   Root,
   Header,
-  Title,
   Body,
-  Value,
   ValueSection,
   Table,
   TableHeader,
-  TableCell,
   TableRow,
-  MissingValue,
 } from '../../ui';
-import CodeableConcept from '../../datatypes/CodeableConcept/CodeableConcept';
-const DosageInstruction = props => {
-  const empty = <MissingValue />;
-  const {
-    timing = empty,
-    route = empty,
-    doseQuantity = empty,
-    additionalInstructions = empty,
-  } = props.item;
-  return (
-    <TableRow>
-      <TableCell data-testid="dosageTiming">{timing}</TableCell>
-      <TableCell data-testid="dosageRoute">{route}</TableCell>
-      <TableCell data-testid="dosageQuantity">{doseQuantity}</TableCell>
-      <TableCell data-testid="dosageAdditionalInstructions">
-        <CodeableConcept fhirData={additionalInstructions} />
-      </TableCell>
-    </TableRow>
-  );
-};
+import Accordion from '../../containers/Accordion';
+import DosageInstruction from './DosageInstruction';
 const commonDTO = fhirResource => {
   const typeCoding = _get(fhirResource, 'type.coding.0');
@@ -182,8 +159,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const MedicationDispense = props => {
-  const { fhirResource, fhirVersion } = props;
+const MedicationDispense = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -201,49 +182,68 @@ const MedicationDispense = props => {
     whenPrepared,
   } = fhirResourceData;
+  const tableData = [
+    {
+      label: 'Medication',
+      testId: 'medicationCoding',
+      data: medicationCoding && <Coding fhirData={medicationCoding} />,
+      status: medicationCoding,
+    },
+    {
+      label: 'Prepared',
+      testId: 'whenPrepared',
+      data: whenPrepared && <Date fhirData={whenPrepared} isBlack />,
+      status: whenPrepared,
+    },
+    {
+      label: 'Type',
+      testId: 'typeCoding',
+      data: typeCoding && <Coding fhirData={typeCoding} />,
+      status: typeCoding,
+    },
+  ];
   return (
     <Root name="MedicationDispense">
-      {medicationTitle && (
-        <Header>
-          <Title>{medicationTitle}</Title>
-        </Header>
-      )}
-      <Body>
-        {medicationCoding && (
-          <Value label="Medication" data-testid="medicationCoding">
-            <Coding fhirData={medicationCoding} />
-          </Value>
-        )}
-        {whenPrepared && (
-          <Value label="Prepared" data-testid="whenPrepared">
-            <Date fhirData={whenPrepared} />
-          </Value>
-        )}
-        {typeCoding && (
-          <Value label="Type" data-testid="typeCoding">
-            <Coding fhirData={typeCoding} />
-          </Value>
-        )}
-        {hasDosageInstruction && (
-          <ValueSection label="Dosage instruction">
-            <Table>
-              <thead>
-                <TableRow>
-                  <TableHeader>Timing</TableHeader>
-                  <TableHeader>Route</TableHeader>
-                  <TableHeader>Dose quantity</TableHeader>
-                  <TableHeader>Additional instructions</TableHeader>
-                </TableRow>
-              </thead>
-              <tbody data-testid="hasDosageInstruction">
-                {dosageInstructionData.map((item, i) => (
-                  <DosageInstruction key={`item-${i}`} item={item} />
-                ))}
-              </tbody>
-            </Table>
-          </ValueSection>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="MedicationDispense"
+            title={medicationTitle}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {hasDosageInstruction && (
+              <ValueSection
+                label="Dosage instruction"
+                marginTop={medicationCoding || whenPrepared || typeCoding}
+              >
+                <Table>
+                  <thead>
+                    <TableRow>
+                      <TableHeader>Timing</TableHeader>
+                      <TableHeader>Route</TableHeader>
+                      <TableHeader>Dose quantity</TableHeader>
+                      <TableHeader>Additional instructions</TableHeader>
+                    </TableRow>
+                  </thead>
+                  <tbody
+                    data-testid="hasDosageInstruction"
+                    className="border-top-0"
+                  >
+                    {dosageInstructionData.map((item, i) => (
+                      <DosageInstruction key={`item-${i}`} item={item} />
+                    ))}
+                  </tbody>
+                </Table>
+              </ValueSection>
+            )}
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -10,6 +10,8 @@ import stu3Example1 from '../../../fixtures/stu3/resources/medicationDispense/ex
 import stu3Example2 from '../../../fixtures/stu3/resources/medicationDispense/example2.json';
 import R4Example1 from '../../../fixtures/r4/resources/medicationDispense/example1.json';
 import R4Example2 from '../../../fixtures/r4/resources/medicationDispense/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import MedicationDispenseIcon from '../../../assets/containers/MedicationDispense/medication-dispense.svg';
 export default {
   title: 'MedicationDispense',
@@ -21,6 +23,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <MedicationDispense
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/MedicationDispense/medication-dispense.svg')}
     />
   );
 };
@@ -31,6 +34,7 @@ export const Example2OfDSTU2 = () => {
     <MedicationDispense
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={MedicationDispenseIcon}
     />
   );
 };
@@ -41,6 +45,7 @@ export const Example1OfSTU3 = () => {
     <MedicationDispense
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -51,6 +56,7 @@ export const Example2OfSTU3 = () => {
     <MedicationDispense
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
     />
   );
 };
@@ -61,6 +67,7 @@ export const Example1OfR4 = () => {
     <MedicationDispense
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.R4}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -1,13 +1,85 @@
 import React from 'react';
-import { render, within } from '@testing-library/react';
+import { fireEvent, render, within } from '@testing-library/react';
 import MedicationDispense from './MedicationDispense';
 import fhirVersions from '../fhirResourceVersions';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/medicationDispense/example1.json';
 import stu3Example1 from '../../../fixtures/stu3/resources/medicationDispense/example1.json';
 import R4Example2 from '../../../fixtures/r4/resources/medicationDispense/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 describe('should render Device component properly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+    const { getByAltText } = render(<MedicationDispense {...defaultProps} />);
+    const headerIcon = getByAltText('medication dispense');
+    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: dstu2Example1,
+      fhirIcons: false,
+    };
+    const { getByTestId } = render(<MedicationDispense {...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: dstu2Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/MedicationDispense/medication-dispense.svg')}
+          alt="medication dispense"
+        />
+      ),
+    };
+    const { getByAltText } = render(<MedicationDispense {...defaultProps} />);
+    const headerIcon = getByAltText('medication dispense');
+    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: dstu2Example1,
+      fhirIcons: fhirIcons,
+    };
+    const { getByAltText } = render(<MedicationDispense {...defaultProps} />);
+    const headerIcon = getByAltText('medication dispense');
+    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: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+    const { getByAltText } = render(<MedicationDispense {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
   it('should render with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -84,4 +156,39 @@ describe('should render Device component properly', () => {
         ),
     ).toEqual(['Ordered(ordered)', 'Ordered(ordered)', 'Ordered(ordered)']);
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: R4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationDispense {...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: R4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <MedicationDispense {...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/MedicationKnowledge/MedicationKnowledge.js CHANGED Viewed

@@ -8,14 +8,14 @@ import { getExtension, isBoolean } from './utils';
 import {
   Root,
   Header,
-  Title,
-  Value,
   Body,
   Badge,
   ValueSection,
+  ValueSectionItem,
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const id = _get(fhirResource, 'id');
@@ -103,8 +103,13 @@ const resourceDTO = (fhirVersion, fhirResource, withDaVinciPDex) => {
   }
 };
-const MedicationKnowledge = props => {
-  const { fhirResource, fhirVersion, withDaVinciPDex = false } = props;
+const MedicationKnowledge = ({
+  fhirResource,
+  fhirVersion,
+  withDaVinciPDex = false,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource, withDaVinciPDex);
@@ -138,72 +143,116 @@ const MedicationKnowledge = props => {
       : amountDisplay;
   }
+  const tableData = [
+    {
+      label: 'Code',
+      testId: 'code',
+      data: code && <CodeableConcept fhirData={code} isCursive />,
+      status: code,
+    },
+    {
+      label: 'Manufacturer',
+      testId: 'manufacturer',
+      data: manufacturer && <Reference fhirData={manufacturer} />,
+      status: manufacturer,
+    },
+    {
+      label: 'Amount',
+      testId: 'amount',
+      data: amountDisplay,
+      status: amountDisplay,
+    },
+    {
+      label: 'Synonym',
+      testId: 'synonym',
+      data: synonym,
+      status: synonym,
+    },
+  ];
+  const usdfExtensionsData = [
+    {
+      label: 'Prior Authorization',
+      testId: 'usdfPriorAuthorization',
+      data:
+        isBoolean(usdfPriorAuthorization) && usdfPriorAuthorization === true
+          ? 'yes'
+          : 'no',
+      status: isBoolean(usdfPriorAuthorization),
+    },
+    {
+      label: 'Step Therapy Limit',
+      testId: 'usdfStepTherapyLimit',
+      data:
+        isBoolean(usdfStepTherapyLimit) && usdfStepTherapyLimit === true
+          ? 'yes'
+          : 'no',
+      status: isBoolean(usdfStepTherapyLimit),
+    },
+    {
+      label: 'Quantity Limit',
+      testId: 'usdfQuantityLimit',
+      data:
+        isBoolean(usdfQuantityLimit) && usdfQuantityLimit === true
+          ? 'yes'
+          : 'no',
+      status: isBoolean(usdfQuantityLimit),
+    },
+    {
+      label: 'Plan ID',
+      testId: 'usdfPlanID',
+      data: usdfPlanID,
+      status: usdfPlanID,
+    },
+    {
+      label: 'Drug Tier ID',
+      testId: 'usdfDrugTierID',
+      data: usdfDrugTierID && <CodeableConcept fhirData={usdfDrugTierID} />,
+      status: usdfDrugTierID,
+    },
+  ];
   return (
     <Root name="MedicationKnowledge">
-      <Header>
-        <Title>
-          {id ? `Medication knowledge ID: ${id}` : 'Medication knowledge'}{' '}
-          {status && <Badge data-testid="status">{status}</Badge>}
-        </Title>
-      </Header>
-      <Body>
-        {code && (
-          <Value label="Code" data-testid="code">
-            <CodeableConcept fhirData={code} />
-          </Value>
-        )}
-        {manufacturer && (
-          <Value label="Manufacturer" data-testid="manufacturer">
-            <Reference fhirData={manufacturer} />
-          </Value>
-        )}
-        {amountDisplay && (
-          <Value label="Amount" data-testid="amount">
-            {amountDisplay}
-          </Value>
-        )}
-        {synonym && (
-          <Value label="Synonym" data-testid="synonym">
-            {synonym}
-          </Value>
-        )}
-        {hasExtensions && (
-          <ValueSection label="USDF extensions" data-testid="usdfExtensions">
-            {isBoolean(usdfPriorAuthorization) && (
-              <Value
-                label="Prior Authorization"
-                data-testid="usdfPriorAuthorization"
-              >
-                {usdfPriorAuthorization === true ? 'yes' : 'no'}
-              </Value>
-            )}
-            {isBoolean(usdfStepTherapyLimit) && (
-              <Value
-                label="Step Therapy Limit"
-                data-testid="usdfStepTherapyLimit"
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="MedicationKnowledge"
+            title={
+              id
+                ? `Medication knowledge ID: ${id} `
+                : 'MedicationOrder knowledge '
+            }
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {hasExtensions && (
+              <ValueSection
+                label="USDF extensions"
+                data-testid="usdfExtensions"
+                marginTop
               >
-                {usdfStepTherapyLimit === true ? 'yes' : 'no'}
-              </Value>
-            )}
-            {isBoolean(usdfQuantityLimit) && (
-              <Value label="Quantity Limit" data-testid="usdfQuantityLimit">
-                {usdfQuantityLimit === true ? 'yes' : 'no'}
-              </Value>
-            )}
-            {usdfPlanID && (
-              <Value label="Plan ID" data-testid="usdfPlanID">
-                {usdfPlanID}
-              </Value>
-            )}
-            {usdfDrugTierID && (
-              <Value label="Drug Tier ID" data-testid="usdfDrugTierID">
-                <CodeableConcept fhirData={usdfDrugTierID} />
-              </Value>
+                {usdfExtensionsData.map(
+                  (item, index) =>
+                    item.status && (
+                      <ValueSectionItem
+                        key={`usdf-extension-item-${index}`}
+                        label={item.label}
+                        data-testid={item.testId}
+                      >
+                        {item.data}
+                      </ValueSectionItem>
+                    ),
+                )}
+              </ValueSection>
             )}
-          </ValueSection>
-        )}
-      </Body>
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -8,6 +8,8 @@ import example1R4 from '../../../fixtures/r4/resources/medicationKnowledge/examp
 import example2R4 from '../../../fixtures/r4/resources/medicationKnowledge/example2.json';
 import example3R4 from '../../../fixtures/r4/resources/medicationKnowledge/example3.json';
 import example4R4 from '../../../fixtures/r4/resources/medicationKnowledge/example4.json';
+import fhirIcons from '../../../fixtures/example-icons';
+import MedicationKnowledgeIcon from '../../../assets/containers/MedicationKnowledge/medication-knowledge.svg';
 export default {
   title: 'MedicationKnowledge',
@@ -19,6 +21,7 @@ export const DefaultVisualizationR4 = () => {
     <MedicationKnowledge
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/MedicationKnowledge/medication-knowledge.svg')}
     />
   );
 };
@@ -28,6 +31,7 @@ export const ExampleR4WithoutDaVinciPDex = () => {
     <MedicationKnowledge
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={MedicationKnowledgeIcon}
     />
   );
 };
@@ -38,6 +42,7 @@ export const ExampleR4WithDaVinciPDex = () => {
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
       withDaVinciPDex
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -58,6 +63,7 @@ export const Example3R4WithDaVinciPDex = () => {
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
       withDaVinciPDex
+      fhirIcons={false}
     />
   );
 };