fhir-react 0.3.7 → 0.3.10

package/src/components/resources/Appointment/Appointment.js

@@ -144,7 +144,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Appointment = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const Appointment = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     description,
     status,
@@ -253,6 +259,8 @@ const Appointment = ({ fhirResource, fhirVersion, fhirIcons }) => {
             )}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/Appointment/Appointment.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 Appointment from './Appointment';
@@ -16,76 +16,65 @@ import example3AppointmentR4 from '../../../fixtures/r4/resources/appointment/ex
 import fhirIcons from '../../../fixtures/example-icons';
 import AppointmentIcon from '../../../assets/containers/Appointment/appointment.svg';
 
-export default { title: 'Appointment' };
+export default {
+  title: 'Appointment',
+  component: Appointment,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Appointment {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleAppointmentDSTU2);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/Appointment/appointment.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: exampleAppointmentDSTU2,
+  fhirVersion: fhirVersions.DSTU2,
+  fhirIcons: require('../../../assets/containers/Appointment/appointment.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', example2AppointmentDSTU2);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={AppointmentIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirResource: example2AppointmentDSTU2,
+  fhirVersion: fhirVersions.DSTU2,
+  fhirIcons: AppointmentIcon,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', example1AppointmentSTU3);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirResource: example1AppointmentSTU3,
+  fhirVersion: fhirVersions.STU3,
+  fhirIcons: fhirIcons,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2AppointmentSTU3);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={false}
-    />
-  );
+
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirResource: example2AppointmentSTU3,
+  fhirVersion: fhirVersions.STU3,
+  fhirIcons: false,
 };
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', example3AppointmentSTU3);
-  return (
-    <Appointment
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={'random text'}
-    />
-  );
+
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirResource: example3AppointmentSTU3,
+  fhirVersion: fhirVersions.STU3,
+  fhirIcons: 'random text',
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', example1AppointmentR4);
-  return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: example1AppointmentR4,
+  fhirVersion: fhirVersions.R4,
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', example2AppointmentR4);
-  return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: example2AppointmentR4,
+  fhirVersion: fhirVersions.R4,
 };
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', example3AppointmentR4);
-  return (
-    <Appointment fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirResource: example3AppointmentR4,
+  fhirVersion: fhirVersions.R4,
 };

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

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

@@ -6,7 +6,7 @@ import Accordion from '../../containers/Accordion/Accordion';
 import { Body, Header } from '../../ui';
 
 const Binary = props => {
-  const { fhirResource, fhirIcons } = props;
+  const { fhirResource, fhirIcons, rawOnClick } = props;
 
   const loadBinaryFile = () => {
     switch (fhirResource.contentType) {
@@ -37,6 +37,7 @@ const Binary = props => {
           />
         }
         bodyContent={<Body>{loadBinaryFile()}</Body>}
+        rawOnClick={rawOnClick}
       />
     </div>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Binary from './Binary';
 
@@ -13,34 +13,40 @@ import BinaryIcon from '../../../assets/containers/Binary/binary.svg';
 
 export default {
   title: 'Binary',
+  component: Binary,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const PdfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2ExamplePdf);
-  return (
-    <Binary
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Binary/binary.svg')}
-    />
-  );
+const Template = args => <Binary {...args} />;
+
+export const PdfDSTU2 = Template.bind({});
+PdfDSTU2.args = {
+  fhirResource: dstu2ExamplePdf,
+  fhirIcons: require('../../../assets/containers/Binary/binary.svg'),
 };
 
-export const JpegDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2ExampleJpeg);
-  return <Binary fhirResource={fhirResource} fhirIcons={BinaryIcon} />;
+export const JpegDSTU2 = Template.bind({});
+JpegDSTU2.args = {
+  fhirResource: dstu2ExampleJpeg,
+  fhirIcons: BinaryIcon,
 };
 
-export const PdfSTU3 = () => {
-  const fhirResource = object('Resource', stu3ExamplePdf);
-  return <Binary fhirResource={fhirResource} fhirIcons={false} />;
+export const PdfSTU3 = Template.bind({});
+PdfSTU3.args = {
+  fhirResource: stu3ExamplePdf,
+  fhirIcons: false,
 };
 
-export const JpegSTU3 = () => {
-  const fhirResource = object('Resource', stu3ExampleJpeg);
-  return <Binary fhirResource={fhirResource} fhirIcons={'random text'} />;
+export const JpegSTU3 = Template.bind({});
+JpegSTU3.args = {
+  fhirResource: stu3ExampleJpeg,
+  fhirIcons: 'random text',
 };
 
-export const JsonSTU3 = () => {
-  const fhirResource = object('Resource', stu3ExampleJson);
-  return <Binary fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const JsonSTU3 = Template.bind({});
+JsonSTU3.args = {
+  fhirResource: stu3ExampleJson,
+  fhirIcons: fhirIcons,
 };

package/src/components/resources/Bundle/Bundle.css

@@ -1,3 +1,10 @@
 .fhir-resource__Bundle__item {
   margin-top: 10px;
 }
+
+.fhir-resource__Bundle__rootPadding:first-of-type {
+  padding: 8px;
+  background: white;
+  border-radius: 0.2rem;
+  border: 1px solid #dee2e6;
+}

package/src/components/resources/Bundle/Bundle.js

@@ -4,12 +4,12 @@ import _get from 'lodash/get';
 
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-import { Root, Header, Title, Badge, Body, BadgeSecondary } from '../../ui';
+import { Root, Header, Badge, Body, BadgeSecondary } from '../../ui';
 import * as FhirResourceTypes from '../../supportedFhirResourceList';
 
 import './Bundle.css';
 
-export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
+export default function Bundle({ fhirResource, fhirVersion }) {
   const commonDTO = fhirResource => {
     const type = _get(fhirResource, 'type', null);
     const total = _get(fhirResource, 'total');
@@ -51,11 +51,14 @@ export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
     .filter(Boolean);
 
   return (
-    <Root name="Bundle">
-      <Header>
-        {type && <Title data-testid="title">{type}</Title>}
-        {total && <Badge data-testid="total">{total}</Badge>}
-      </Header>
+    <Root name="Bundle" className="fhir-resource__Bundle__rootPadding">
+      <Header
+        resourceName="Bundle"
+        title={type}
+        badges={!isNaN(total) && <Badge data-testid="total">{total}</Badge>}
+        capitalize
+        isNoIcon
+      />
       <Body>
         {resources.length > 0 &&
           resources.map((resource, index) => {
@@ -71,14 +74,15 @@ export default function Bundle({ fhirResource, fhirVersion, fhirIcons }) {
                 key={`${resource.id}-${index}`}
               >
                 {resourceType && (
-                  <BadgeSecondary data-testid="resourceType">
-                    {resourceType}
-                  </BadgeSecondary>
+                  <div className="mx-20">
+                    <BadgeSecondary data-testid="resourceType">
+                      {resourceType}
+                    </BadgeSecondary>
+                  </div>
                 )}
                 <FhirComponent
                   fhirResource={resource}
                   fhirVersion={fhirVersion}
-                  fhirIcons={fhirIcons}
                 />
               </div>
             );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Bundle from './Bundle';
 
@@ -17,145 +17,89 @@ import r4Example3 from '../../../fixtures/r4/resources/bundle/example3.json';
 import r4Example4 from '../../../fixtures/r4/resources/bundle/example4.json';
 import fhirVersions from '../fhirResourceVersions';
 
-import fhirIcons from '../../../fixtures/example-icons';
-
 export default {
   title: 'Bundle',
+  component: Bundle,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const Example1OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+const Template = args => <Bundle {...args} />;
+
+export const Example1OfDSTU2 = Template.bind({});
+Example1OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
 };
 
-export const Example3OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example3);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3OfDSTU2 = Template.bind({});
+Example3OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example3,
 };
 
-export const Example4OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example4);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example4OfDSTU2 = Template.bind({});
+Example4OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example4,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
 };
 
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example3);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example3,
 };
 
-export const Example4OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example4);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example4OfSTU3 = Template.bind({});
+Example4OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example4,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };
 
-export const Example4OfR4 = () => {
-  const fhirResource = object('Resource', r4Example4);
-  return (
-    <Bundle
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example4OfR4 = Template.bind({});
+Example4OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example4,
 };
 
-// export const ExampleWithoutFHIRVersionProperty = () => {
-//   const fhirResource = object('Resource', stu3Example2);
-//   return <Bundle fhirResource={fhirResource} />;
-// };
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: stu3Example2,
+};

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

@@ -8,8 +8,6 @@ import dstu2Example2 from '../../../fixtures/dstu2/resources/bundle/example3.jso
 import stu3Example1 from '../../../fixtures/stu3/resources/bundle/example1.json';
 import r4Example1 from '../../../fixtures/r4/resources/bundle/example1.json';
 
-import fhirIcons from '../../../fixtures/example-icons';
-
 describe('Bundle should render component correctly', () => {
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
@@ -31,7 +29,6 @@ describe('Bundle should render component correctly', () => {
     const defaultProps = {
       fhirVersion: fhirVersions.DSTU2,
       fhirResource: dstu2Example2,
-      fhirIcons: fhirIcons,
     };
     const { getByText, getAllByTestId } = render(<Bundle {...defaultProps} />);
     expect(getAllByTestId('title').map(title => title.textContent)).toEqual([

package/src/components/resources/CarePlan/CarePlan.js

@@ -162,7 +162,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const CarePlan = ({ fhirResource, fhirVersion, fhirIcons }) => {
+const CarePlan = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -304,6 +310,8 @@ const CarePlan = ({ fhirResource, fhirVersion, fhirIcons }) => {
             )}
           </Body>
         }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );