fhir-react 0.3.8 → 0.3.11

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

@@ -112,6 +112,7 @@ const MedicationStatement = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -205,6 +206,7 @@ const MedicationStatement = ({
           </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/Observation/Observation.js

@@ -18,7 +18,7 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
 
-const Observation = ({ fhirResource, fhirIcons, onClick }) => {
+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', '');
@@ -115,6 +115,7 @@ const Observation = ({ fhirResource, fhirIcons, onClick }) => {
           </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/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, onClick }) => {
+const Organization = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -128,6 +134,7 @@ const Organization = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         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/Patient/Patient.js

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Patient from './Patient';
 
@@ -15,44 +15,52 @@ import example3PatientR4 from '../../../fixtures/r4/resources/patient/example3.j
 import PatientIcon from '../../../assets/containers/Patient/patient.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Patient' };
+export default {
+  title: 'Patient',
+  component: Patient,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Patient {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', examplePatient);
-  return (
-    <Patient
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Patient/patient.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: examplePatient,
+  fhirIcons: require('../../../assets/containers/Patient/patient.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', example2PatientDSTU2);
-  return <Patient fhirResource={fhirResource} fhirIcons={PatientIcon} />;
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirResource: example2PatientDSTU2,
+  fhirIcons: PatientIcon,
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', examplePatientSTU3);
-  return <Patient fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirResource: examplePatientSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example2STU3 = () => {
-  const fhirResource = object('Resource', example2PatientSTU3);
-  return <Patient fhirResource={fhirResource} fhirIcons={false} />;
+export const Example2STU3 = Template.bind({});
+Example2STU3.args = {
+  fhirResource: example2PatientSTU3,
+  fhirIcons: false,
 };
 
-export const Example1R4 = () => {
-  const fhirResource = object('Resource', example1PatientR4);
-  return <Patient fhirResource={fhirResource} fhirIcons={'random text'} />;
+export const Example1R4 = Template.bind({});
+Example1R4.args = {
+  fhirResource: example1PatientR4,
+  fhirIcons: 'random text',
 };
 
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', example2PatientR4);
-  return <Patient fhirResource={fhirResource} />;
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirResource: example2PatientR4,
 };
 
-export const Example3R4 = () => {
-  const fhirResource = object('Resource', example3PatientR4);
-  return <Patient fhirResource={fhirResource} />;
+export const Example3R4 = Template.bind({});
+Example3R4.args = {
+  fhirResource: example3PatientR4,
 };

package/src/components/resources/Practitioner/Practitioner.js

@@ -82,7 +82,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Practitioner = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Practitioner = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -161,6 +167,7 @@ const Practitioner = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Practitioner from './Practitioner';
 import fhirVersions from '../fhirResourceVersions';
@@ -14,66 +14,53 @@ import r4Example3 from '../../../fixtures/r4/resources/practitioner/example3.jso
 import PractitionerIcon from '../../../assets/containers/Practitioner/practitioner.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Practitioner' };
+export default {
+  title: 'Practitioner',
+  component: Practitioner,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Practitioner {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Practitioner
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Practitioner/practitioner.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Practitioner/practitioner.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Practitioner
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={PractitionerIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: PractitionerIcon,
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Practitioner
-      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 (
-    <Practitioner
-      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 (
-    <Practitioner
-      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 Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Practitioner fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };

package/src/components/resources/PractitionerRole/PractitionerRole.js

@@ -48,6 +48,7 @@ const PractitionerRole = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
   try {
@@ -106,6 +107,7 @@ const PractitionerRole = ({
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );