fhir-react 0.3.7 → 0.3.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Device from './Device';
 
@@ -15,68 +15,56 @@ import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
   title: 'Device',
+  component: Device,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Device
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/Device/device.svg')}
-    />
-  );
+const Template = args => <Device {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Device/device.svg'),
 };
 
-export const ExampleOfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Device
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={DeviceIcon}
-    />
-  );
+export const ExampleOfDSTU2 = Template.bind({});
+ExampleOfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: DeviceIcon,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Device
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: fhirIcons,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Device
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={false}
-    />
-  );
+
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: false,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Device
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: 'random text',
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return <Device fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };
 
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return <Device fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: stu3Example2,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Device from './Device';
 import fhirVersions from '../fhirResourceVersions';
@@ -137,4 +137,39 @@ describe('should render Device component properly', () => {
 
     expect(getByTestId('uniqueId').textContent).toEqual('-');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Device {...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 fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example2,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Device {...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/DiagnosticReport/DiagnosticReport.js

@@ -93,8 +93,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const DiagnosticReport = props => {
-  const { fhirResource, fhirVersion, fhirIcons } = props;
+const DiagnosticReport = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -165,6 +170,8 @@ const DiagnosticReport = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import DiagnosticReport from './DiagnosticReport';
 import fhirVersions from '../fhirResourceVersions';
@@ -12,64 +12,52 @@ import example3DiagnosticReportR4 from '../../../fixtures/r4/resources/diagnosti
 import fhirIcons from '../../../fixtures/example-icons';
 import DiagnosticReportIcon from '../../../assets/containers/DiagnosticReport/diagnostic-report.svg';
 
-export default { title: 'DiagnosticReport' };
+export default {
+  title: 'DiagnosticReport',
+  component: DiagnosticReport,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <DiagnosticReport {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleDiagnosticReportDSTU2);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/DiagnosticReport/diagnostic-report.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleDiagnosticReportDSTU2,
+  fhirIcons: require('../../../assets/containers/DiagnosticReport/diagnostic-report.svg'),
 };
 
-export const ExampleDiagnosticReportSTU3 = () => {
-  const fhirResource = object('Resource', exampleDiagnosticReportSTU3);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={DiagnosticReportIcon}
-    />
-  );
+export const ExampleDiagnosticReportSTU3 = Template.bind({});
+ExampleDiagnosticReportSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleDiagnosticReportSTU3,
+  fhirIcons: DiagnosticReportIcon,
 };
 
-export const ExampleDiagnosticReportR4 = () => {
-  const fhirResource = object('Resource', exampleDiagnosticReportR4);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleDiagnosticReportR4 = Template.bind({});
+ExampleDiagnosticReportR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleDiagnosticReportR4,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2DiagnosticReportR4 = () => {
-  const fhirResource = object('Resource', example2DiagnosticReportR4);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example2DiagnosticReportR4 = Template.bind({});
+Example2DiagnosticReportR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2DiagnosticReportR4,
+  fhirIcons: false,
 };
 
-export const Example3DiagnosticReportR4 = () => {
-  const fhirResource = object('Resource', example3DiagnosticReportR4);
-  return (
-    <DiagnosticReport
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example3DiagnosticReportR4 = Template.bind({});
+Example3DiagnosticReportR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3DiagnosticReportR4,
+  fhirIcons: 'random text',
 };
 
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', exampleDiagnosticReportSTU3);
-  return <DiagnosticReport fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: exampleDiagnosticReportSTU3,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import DiagnosticReport from './DiagnosticReport';
 import fhirVersions from '../fhirResourceVersions';
 
@@ -152,4 +152,39 @@ describe('should render component correctly', () => {
 
     expect(getByTestId('performer').textContent).toContain('Todd Ashby');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: example2DiagnosticReportR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <DiagnosticReport {...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: example2DiagnosticReportR4,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <DiagnosticReport {...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/DocumentReference/DocumentReference.js

@@ -216,8 +216,13 @@ const Content = props => {
   );
 };
 
-const DocumentReference = props => {
-  const { fhirVersion, fhirResource, fhirIcons } = props;
+const DocumentReference = ({
+  fhirVersion,
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -337,6 +342,8 @@ const DocumentReference = props => {
             {hasContent && <Content content={content} />}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import fhirVersions from '../fhirResourceVersions';
 import DocumentReference from './DocumentReference';
@@ -10,37 +10,33 @@ import example1DocumentReferenceR4 from '../../../fixtures/r4/resources/document
 import fhirIcons from '../../../fixtures/example-icons';
 import DocumentReferenceIcon from '../../../assets/containers/DocumentReference/document-reference.svg';
 
-export default { title: 'Document Reference' };
+export default {
+  title: 'DocumentReference',
+  component: DocumentReference,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <DocumentReference {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleDocumentReference);
-  return (
-    <DocumentReference
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/DocumentReference/document-reference.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleDocumentReference,
+  fhirIcons: require('../../../assets/containers/DocumentReference/document-reference.svg'),
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', exampleDocumentReferenceSTU3);
-  return (
-    <DocumentReference
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={DocumentReferenceIcon}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleDocumentReferenceSTU3,
+  fhirIcons: DocumentReferenceIcon,
 };
 
-export const ExampleR4 = () => {
-  const fhirResource = object('Resource', example1DocumentReferenceR4);
-  return (
-    <DocumentReference
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleR4 = Template.bind({});
+ExampleR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1DocumentReferenceR4,
+  fhirIcons: fhirIcons,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { nbspRegex } from '../../../testUtils';
 import fhirVersions from '../fhirResourceVersions';
@@ -268,4 +268,45 @@ describe('should render the DocumentReference component properly', () => {
     const urls = getAllByTestId('content.url').map(node => node.textContent);
     expect(urls).toEqual(['Binary/07a6483f-732b-461e-86b6-edb665c45510']);
   });
+
+  it('should fire custom onClick function', () => {
+    const resource = JSON.parse(JSON.stringify(r4Example1));
+    resource.content[0].attachment.url =
+      'http://example.org/xds/mhd/Binary/07a6483f-732b-461e-86b6-edb665c45510';
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <DocumentReference
+        fhirResource={resource}
+        fhirVersion={fhirVersions.R4}
+        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 resource = JSON.parse(JSON.stringify(r4Example1));
+    resource.content[0].attachment.url =
+      'http://example.org/xds/mhd/Binary/07a6483f-732b-461e-86b6-edb665c45510';
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <DocumentReference
+        fhirResource={resource}
+        fhirVersion={fhirVersions.R4}
+        onClick={onClick}
+      />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

package/src/components/resources/Encounter/Encounter.js

@@ -160,7 +160,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Encounter = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Encounter = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -229,6 +235,8 @@ const Encounter = ({ fhirResource, fhirVersion, fhirIcons }) => {
             )}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Encounter from './Encounter';
 
@@ -16,78 +16,62 @@ import EncounterIcon from '../../../assets/containers/Encounter/encounter.svg';
 
 export default {
   title: 'Encounter',
+  component: Encounter,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Encounter/encounter.svg')}
-    />
-  );
+const Template = args => <Encounter {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1,
+  fhirIcons: require('../../../assets/containers/Encounter/encounter.svg'),
 };
 
-export const ExampleWithoutParticipantsDSTU2 = () => {
-  const fhirResource = object('Resource', example2);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={EncounterIcon}
-    />
-  );
+export const ExampleWithoutParticipantsDSTU2 = Template.bind({});
+ExampleWithoutParticipantsDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example2,
+  fhirIcons: EncounterIcon,
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', example_STU3);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example_STU3,
+  fhirIcons: fhirIcons,
 };
 
-export const ExampleWithoutParticipantSTU3 = () => {
-  const fhirResource = object('Resource', example2_STU3);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const ExampleWithoutParticipantSTU3 = Template.bind({});
+ExampleWithoutParticipantSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2_STU3,
+  fhirIcons: false,
 };
 
-export const ExampleWithoutParticipantR4 = () => {
-  const fhirResource = object('Resource', example1_R4);
-  return (
-    <Encounter
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const ExampleWithoutParticipantR4 = Template.bind({});
+ExampleWithoutParticipantR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1_R4,
+  fhirIcons: 'random text',
 };
 
-export const Example2ofR4 = () => {
-  const fhirResource = object('Resource', example2_R4);
-  return (
-    <Encounter fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
-  );
+export const Example2ofR4 = Template.bind({});
+Example2ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2_R4,
 };
 
-export const Example3ofR4 = () => {
-  const fhirResource = object('Resource', example3_R4);
-  return (
-    <Encounter fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
-  );
+export const Example3ofR4 = Template.bind({});
+Example3ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3_R4,
 };
 
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example2_STU3);
-  return <Encounter fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: example2_STU3,
 };