npm - fhir-react - Versions diffs - 0.3.7 → 0.3.10 - Mend

fhir-react 0.3.7 → 0.3.10

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

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

@@ -99,9 +99,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Goal = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
+const Goal = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -229,6 +233,8 @@ const Goal = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import Goal from './Goal';
 import fhirIcons from '../../../fixtures/example-icons';
@@ -13,64 +13,50 @@ import GoalIcon from '../../../assets/containers/Goal/goal.svg';
 export default {
   title: 'Goal',
+  component: Goal,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Goal
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Goal/goal.svg')}
-    />
-  );
+const Template = args => <Goal {...args} />;
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Goal/goal.svg'),
 };
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Goal
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={GoalIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: GoalIcon,
 };
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Goal
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Goal
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Goal
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return <Goal fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: stu3Example1,
 };

package/src/components/resources/Goal/Goal.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 Goal from './Goal';
 import fhirVersions from '../fhirResourceVersions';
@@ -187,4 +187,35 @@ describe('should render Goal component properly', () => {
     expect(queryByTestId('priority')).toBeNull();
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(<Goal {...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(<Goal {...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/Immunization/Immunization.js CHANGED Viewed

@@ -103,8 +103,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Immunization = props => {
-  const { fhirVersion, fhirResource, fhirIcons } = props;
+const Immunization = ({
+  fhirVersion,
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     title,
     status,
@@ -241,6 +246,8 @@ const Immunization = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import Immunization from './Immunization';
@@ -15,64 +15,51 @@ import ImmunizationIcon from '../../../assets/containers/Immunization/immunizati
 export default {
   title: 'Immunization',
+  component: Immunization,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/Immunization/immunization.svg')}
-    />
-  );
+const Template = args => <Immunization {...args} />;
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1,
+  fhirIcons: require('../../../assets/containers/Immunization/immunization.svg'),
 };
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', example2);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={ImmunizationIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example2,
+  fhirIcons: ImmunizationIcon,
 };
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example,
+  fhirIcons: fhirIcons,
 };
-export const Example1R4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={false}
-    />
-  );
+export const Example1R4 = Template.bind({});
+Example1R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };
-export const Example3R4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example3R4 = Template.bind({});
+Example3R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };

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

@@ -4,7 +4,7 @@ import dstu2Example from '../../../fixtures/dstu2/resources/immunization/example
 import fhirVersions from '../fhirResourceVersions';
 import r4Example1 from '../../../fixtures/r4/resources/immunization/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/immunization/example2.json';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import stu3Example from '../../../fixtures/stu3/resources/immunization/example1.json';
 import fhirIcons from '../../../fixtures/example-icons';
@@ -222,4 +222,39 @@ describe('should render Immunization component properly', () => {
     expect(queryByTestId('site')).toBeNull();
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Immunization {...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(
+      <Immunization {...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/List/DrugTierDefinitionExtension.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import { getExtension } from './utils';
-import { ValueSection, Value } from '../../ui';
+import { ValueSection, ValueSectionItem } from '../../ui';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Money from '../../datatypes/Money';
@@ -82,48 +82,92 @@ const DrugTierDefinitionExtension = props => {
     coinsuranceOption,
   } = dto(drugTierDefinitionExtension);
+  const drugData = [
+    {
+      label: 'Drug Tier ID',
+      testId: 'drugTierID',
+      data: drugTierID && <CodeableConcept fhirData={drugTierID} />,
+      status: drugTierID,
+    },
+    {
+      label: 'Mail order',
+      testId: 'mailOrder',
+      data: mailOrder ? 'yes' : 'no',
+      status: mailOrder,
+    },
+  ];
+  const costData = [
+    {
+      label: 'Pharmacy Type',
+      testId: 'pharmacyType',
+      data: pharmacyType && <CodeableConcept fhirData={pharmacyType} />,
+      status: pharmacyType,
+    },
+    {
+      label: 'Copay Amount',
+      testId: 'copayAmount',
+      data: copayAmount && <Money fhirData={copayAmount} />,
+      status: copayAmount,
+    },
+    {
+      label: 'Copay Option',
+      testId: 'copayOption',
+      data: copayOption && <CodeableConcept fhirData={copayOption} />,
+      status: copayOption,
+    },
+    {
+      label: 'Coinsurance Rate',
+      testId: 'coinsuranceRate',
+      data: coinsuranceRate,
+      status: coinsuranceRate === 0 || coinsuranceRate,
+    },
+    {
+      label: 'Coinsurance Option',
+      testId: 'coinsuranceOption',
+      data: coinsuranceOption && (
+        <CodeableConcept fhirData={coinsuranceOption} />
+      ),
+      status: coinsuranceOption,
+    },
+  ];
   return (
     hasExtensions && (
       <ValueSection
         label="Drug Tier Definition"
         data-testid="drugTierDefinition"
+        marginTop
       >
-        {drugTierID && (
-          <Value label="Drug Tier ID" data-testid="drugTierID">
-            <CodeableConcept fhirData={drugTierID} />
-          </Value>
-        )}
-        {mailOrder && (
-          <Value label="Mail order" data-testid="mailOrder">
-            {mailOrder ? 'yes' : 'no'}
-          </Value>
+        {drugData.map(
+          (item, index) =>
+            item.status && (
+              <ValueSectionItem
+                key={`drug-item-${index}`}
+                label={item.label}
+                data-testid={item.testId}
+              >
+                {item.data}
+              </ValueSectionItem>
+            ),
         )}
         {hasConstSharing && (
-          <ValueSection label="Cost sharing" data-testid="costSharing">
-            {pharmacyType && (
-              <Value label="Pharmacy Type" data-testid="pharmacyType">
-                <CodeableConcept fhirData={pharmacyType} />
-              </Value>
-            )}
-            {copayAmount && (
-              <Value label="Copay Amount" data-testid="copayAmount">
-                <Money fhirData={copayAmount} />
-              </Value>
-            )}
-            {copayOption && (
-              <Value label="Copay Option" data-testid="copayOption">
-                <CodeableConcept fhirData={copayOption} />
-              </Value>
-            )}
-            {(coinsuranceRate === 0 || coinsuranceRate) && (
-              <Value label="Coinsurance Rate" data-testid="coinsuranceRate">
-                {coinsuranceRate}
-              </Value>
-            )}
-            {coinsuranceOption && (
-              <Value label="Coinsurance Option" data-testid="coinsuranceOption">
-                <CodeableConcept fhirData={coinsuranceOption} />
-              </Value>
+          <ValueSection
+            label="Cost sharing"
+            data-testid="costSharing"
+            marginTop
+          >
+            {costData.map(
+              (item, index) =>
+                item.status && (
+                  <ValueSectionItem
+                    key={`cost-item-${index}`}
+                    label={item.label}
+                    data-testid={item.testId}
+                  >
+                    {item.data}
+                  </ValueSectionItem>
+                ),
             )}
           </ValueSection>
         )}

package/src/components/resources/List/Entries.js CHANGED Viewed

@@ -16,7 +16,7 @@ import Reference from '../../datatypes/Reference';
 const Entries = ({ fhirData: items = [] }) => {
   if (items.length === 0) return null;
   return (
-    <ValueSection label="Entries" data-testid="entries">
+    <ValueSection label="Entries" data-testid="entries" marginTop>
       <Table>
         <thead>
           <TableRow>
@@ -26,7 +26,7 @@ const Entries = ({ fhirData: items = [] }) => {
             <TableHeader>Status</TableHeader>
           </TableRow>
         </thead>
-        <tbody>
+        <tbody className="border-top-0">
           {items.map((item, idx) => (
             <Entry key={idx} item={item} />
           ))}
@@ -50,7 +50,7 @@ const Entry = props => {
           <Reference fhirData={entry} />
         </TableCell>
         <TableCell data-testid="items.date">
-          {date ? <Date fhirData={date} /> : <MissingValue />}
+          {date ? <Date fhirData={date} isBlack /> : <MissingValue />}
         </TableCell>
         <TableCell data-testid="items.isDeleted">
           {deleted === true ? 'yes' : 'no'}