fhir-react 0.3.7 → 0.3.10

package/src/components/resources/MedicationRequest/MedicationRequest.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import MedicationRequest from './MedicationRequest';
 
@@ -87,7 +87,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
 
-    expect(getByTestId('title').textContent).toContain('Medication/med0316');
+    expect(getByTestId('title').textContent).toContain('prescribed medication');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Essential hypertension',
     );
@@ -118,7 +118,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
 
-    expect(getByTestId('title').textContent).toContain('Medication/med0316');
+    expect(getByTestId('title').textContent).toContain('prescribed medication');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Essential hypertension',
     );
@@ -160,7 +160,7 @@ describe('should render MedicationRequest component properly', () => {
     );
     expect(container).not.toBeNull();
 
-    expect(getByTestId('title').textContent).toContain('#med0304');
+    expect(getByTestId('title').textContent).toContain('Myleran 2mg tablet');
     expect(getByTestId('reasonCode').textContent).toContain(
       'Chronic myeloid Leukemia',
     );
@@ -171,4 +171,33 @@ describe('should render MedicationRequest component properly', () => {
     expect(getByTestId('created').textContent).toEqual('1/15/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example3 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationRequest {...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(
+      <MedicationRequest {...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/MedicationStatement/MedicationStatement.js

@@ -107,8 +107,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const MedicationStatement = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
+const MedicationStatement = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -200,6 +205,8 @@ const MedicationStatement = props => {
               })}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/MedicationStatement/MedicationStatement.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import MedicationStatement from './MedicationStatement';
 import fhirVersions from '../fhirResourceVersions';
@@ -14,59 +14,45 @@ import MedicationStatementIcon from '../../../assets/containers/MedicationStatem
 
 export default {
   title: 'MedicationStatement',
+  component: MedicationStatement,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <MedicationStatement
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/MedicationStatement/medication-statement.svg')}
-    />
-  );
+const Template = args => <MedicationStatement {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/MedicationStatement/medication-statement.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <MedicationStatement
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={MedicationStatementIcon}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: MedicationStatementIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <MedicationStatement
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <MedicationStatement
-      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 (
-    <MedicationStatement
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };

package/src/components/resources/MedicationStatement/MedicationStatement.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import MedicationStatement from './MedicationStatement';
 import fhirVersions from '../fhirResourceVersions';
 import example1MedicationStatement from '../../../fixtures/dstu2/resources/medicationStatement/example1.json';
@@ -168,4 +168,39 @@ describe('should render MedicationStatement component correctly', () => {
       '#med0309',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <MedicationStatement {...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(
+      <MedicationStatement {...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/Observation/Observation.js

@@ -18,7 +18,7 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 
-const Observation = ({ fhirResource, fhirIcons }) => {
+const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
@@ -114,6 +114,8 @@ const Observation = ({ fhirResource, fhirIcons }) => {
             />
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/Observation/Observation.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Observation from './Observation';
 
@@ -15,51 +15,57 @@ import example3ObservationExcessR4 from '../../../fixtures/r4/resources/observat
 import ObservationIcon from '../../../assets/containers/Observation/observation.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Observation' };
+export default {
+  title: 'Observation',
+  component: Observation,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Observation {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleObservationIssued);
-  return (
-    <Observation
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Observation/observation.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: exampleObservationIssued,
+  fhirIcons: require('../../../assets/containers/Observation/observation.svg'),
 };
 
-export const ExampleWithoutIssuedDSTU2 = () => {
-  const fhirResource = object('Resource', exampleObservation);
-  return (
-    <Observation fhirResource={fhirResource} fhirIcons={ObservationIcon} />
-  );
+export const ExampleWithoutIssuedDSTU2 = Template.bind({});
+ExampleWithoutIssuedDSTU2.args = {
+  fhirResource: exampleObservation,
+  fhirIcons: ObservationIcon,
 };
 
-export const ExampleWithIssuedSTU3 = () => {
-  const fhirResource = object('Resource', exampleObservationExcessSTU3);
-  return <Observation fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleWithIssuedSTU3 = Template.bind({});
+ExampleWithIssuedSTU3.args = {
+  fhirResource: exampleObservationExcessSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const ExampleWithoutIssuedSTU3 = () => {
-  const fhirResource = object('Resource', exampleObservationSTU3);
-  return <Observation fhirResource={fhirResource} fhirIcons={false} />;
+export const ExampleWithoutIssuedSTU3 = Template.bind({});
+ExampleWithoutIssuedSTU3.args = {
+  fhirResource: exampleObservationSTU3,
+  fhirIcons: false,
 };
 
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', example3ObservationExcessSTU3);
-  return <Observation fhirResource={fhirResource} fhirIcons={'random text'} />;
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirResource: example3ObservationExcessSTU3,
+  fhirIcons: 'random text',
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', example1ObservationExcessR4);
-  return <Observation fhirResource={fhirResource} />;
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: example1ObservationExcessR4,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', example2ObservationExcessR4);
-  return <Observation fhirResource={fhirResource} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: example2ObservationExcessR4,
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', example3ObservationExcessR4);
-  return <Observation fhirResource={fhirResource} />;
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirResource: example3ObservationExcessR4,
 };

package/src/components/resources/Observation/Observation.test.js

@@ -2,7 +2,7 @@
 // NOTE: jest-dom adds handy assertions to Jest and is recommended, but not required
 
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import Observation from './Observation';
 
 import exampleObservationIssued from '../../../fixtures/dstu2/resources/observation/example-issued.json';
@@ -148,4 +148,33 @@ describe('should render component correctly', () => {
     expect(getByTestId('valueQuantityUnit')).not.toBeNull();
     expect(getByTestId('valueQuantityUnit').textContent).toEqual('mmol/l');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: example1ObservationExcessR4 };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Observation {...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: example1ObservationExcessR4 };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Observation {...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/Observation/ObservationGraph.js

@@ -44,7 +44,7 @@ const observationValuePoint = (actualValue, unit, small) => {
     >
       {!small && (
         <span
-          className={`position-absolute top-0 translate-middle ps-2 ${
+          className={`position-absolute top-0 translate-middle ps-sm-2 ps-0 pe-4 pe-sm-0 ${
             small ? 'pb-4 fs-1' : 'pb-5 fs-4'
           } w-max-content`}
           data-testid="valuePoint"

package/src/components/resources/Organization/Organization.js

@@ -55,7 +55,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Organization = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Organization = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -79,7 +85,7 @@ const Organization = ({ fhirResource, fhirVersion, fhirIcons }) => {
     {
       label: 'Identifiers',
       testId: 'identifier',
-      data: identifier && <Identifier fhirData={identifier} noCursive />,
+      data: identifier && <Identifier fhirData={identifier} />,
       status: identifier,
     },
     {
@@ -127,6 +133,8 @@ const Organization = ({ fhirResource, fhirVersion, fhirIcons }) => {
           )
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/Organization/Organization.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Organization from './Organization';
 import fhirVersions from '../fhirResourceVersions';
@@ -19,69 +19,57 @@ import OrganizationIcon from '../../../assets/containers/Organization/organizati
 
 export default {
   title: 'Organization',
+  component: Organization,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Organization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={OrganizationIcon}
-    />
-  );
+const Template = args => <Organization {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Organization/organization.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Organization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: OrganizationIcon,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Organization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={false}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Organization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: false,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: 'random text',
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Organization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };

package/src/components/resources/Organization/Organization.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Organization from './Organization';
 import fhirVersions from '../fhirResourceVersions';
@@ -201,4 +201,39 @@ describe('should render Organization component properly', () => {
       'No additional data',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example3,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Organization {...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,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Organization {...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/Patient/Patient.js

@@ -46,6 +46,8 @@ function Patient(props) {
     renderName,
     patientSimple,
     fhirIcons,
+    onClick,
+    rawOnClick,
   } = props;
 
   const id = getId(fhirResource);
@@ -146,6 +148,8 @@ function Patient(props) {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );