fhir-react 0.3.8 → 0.3.11

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import PractitionerRole from './PractitionerRole';
 import fhirVersions from '../fhirResourceVersions';
@@ -15,79 +15,59 @@ import r4Example4 from '../../../fixtures/r4/resources/practitionerRole/example4
 import fhirIcons from '../../../fixtures/example-icons';
 import PractitionerRoleIcon from '../../../assets/containers/PractitionerRole/practitioner-role.svg';
 
-export default { title: 'PractitionerRole' };
+export default {
+  title: 'Practitioner/PractitionerRole',
+  component: PractitionerRole,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <PractitionerRole {...args} />;
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/PractitionerRole/practitioner-role.svg')}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: require('../../../assets/containers/PractitionerRole/practitioner-role.svg'),
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={PractitionerRoleIcon}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: PractitionerRoleIcon,
 };
 
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example3);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };
 
-export const Example4OfR4 = () => {
-  const fhirResource = object('Resource', r4Example4);
-  return (
-    <PractitionerRole
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example4OfR4 = Template.bind({});
+Example4OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example4,
 };

package/src/components/resources/Procedure/Procedure.js

@@ -14,7 +14,7 @@ import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
 import { Value } from '../../ui';
 
-const Procedure = ({ fhirResource, fhirIcons, onClick }) => {
+const Procedure = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -125,6 +125,7 @@ const Procedure = ({ fhirResource, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Procedure from './Procedure';
 
@@ -14,39 +14,47 @@ import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
 import fhirIcons from '../../../fixtures/example-icons';
 import ProcedureIcon from '../../../assets/containers/Procedure/procedure.svg';
 
-export default { title: 'Procedure' };
+export default {
+  title: 'Procedure',
+  component: Procedure,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Procedure {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1);
-  return (
-    <Procedure
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Procedure/procedure.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: example1,
+  fhirIcons: require('../../../assets/containers/Procedure/procedure.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return <Procedure fhirResource={fhirResource} fhirIcons={ProcedureIcon} />;
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirResource: stu3Example1,
+  fhirIcons: ProcedureIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirResource: stu3Example2,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return <Procedure fhirResource={fhirResource} fhirIcons={false} />;
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return <Procedure fhirResource={fhirResource} fhirIcons={'random text'} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };
 
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return <Procedure fhirResource={fhirResource} />;
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirResource: r4Example3,
 };

package/src/components/resources/Questionnaire/Questionnaire.js

@@ -75,7 +75,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Questionnaire = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Questionnaire = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
 
   try {
@@ -114,6 +120,7 @@ const Questionnaire = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Questionnaire from './Questionnaire';
 import fhirVersions from '../fhirResourceVersions';
@@ -18,80 +18,65 @@ import r4Example3 from '../../../fixtures/r4/resources/questionnaire/example3.js
 import fhirIcons from '../../../fixtures/example-icons';
 import QuestionnaireIcon from '../../../assets/containers/Questionnaire/questionnaire.svg';
 
-export default { title: 'Questionnaire' };
+export default {
+  title: 'Questionnaire',
+  component: Questionnaire,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Questionnaire {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/Questionnaire/questionnaire.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Questionnaire/questionnaire.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={QuestionnaireIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: QuestionnaireIcon,
 };
 
-export const Example3OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example3);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3OfDSTU2 = Template.bind({});
+Example3OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={false}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: false,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: 'random text',
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Questionnaire fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Questionnaire 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 (
-    <Questionnaire fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js

@@ -76,6 +76,7 @@ const QuestionnaireResponse = ({
   fhirVersion,
   fhirIcons,
   onClick,
+  rawOnClick,
 }) => {
   let fhirResourceData = {};
 
@@ -139,6 +140,7 @@ const QuestionnaireResponse = ({
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import QuestionnaireResponse from './QuestionnaireResponse';
 import fhirVersions from '../fhirResourceVersions';
@@ -17,79 +17,59 @@ import r4Example2 from '../../../fixtures/r4/resources/questionnaireResponse/exa
 import fhirIcons from '../../../fixtures/example-icons';
 import QuestionnaireResponseIcon from '../../../assets/containers/QuestionnaireResponse/questionnaire-response.svg';
 
-export default { title: 'QuestionnaireResponse' };
+export default {
+  title: 'QuestionnaireResponse',
+  component: QuestionnaireResponse,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <QuestionnaireResponse {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/QuestionnaireResponse/questionnaire-response.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/QuestionnaireResponse/questionnaire-response.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={QuestionnaireResponseIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: QuestionnaireResponseIcon,
 };
 
-export const Example3OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example3);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3OfDSTU2 = Template.bind({});
+Example3OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: false,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons="random text"
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: 'random text',
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };

package/src/components/resources/ReferralRequest/ReferralRequest.js

@@ -70,7 +70,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const ReferralRequest = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const ReferralRequest = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -150,6 +156,7 @@ const ReferralRequest = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import ReferralRequest from './ReferralRequest';
 
@@ -9,29 +9,29 @@ import fhirVersions from '../fhirResourceVersions';
 
 export default {
   title: 'ReferralRequest',
+  component: ReferralRequest,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <ReferralRequest
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-    />
-  );
+const Template = args => <ReferralRequest {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/ReferralRequest/referral-request.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <ReferralRequest
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: false,
 };
 
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return <ReferralRequest fhirResource={fhirResource} />;
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: stu3Example1,
 };

package/src/components/resources/RelatedPerson/RelatedPerson.js

@@ -67,7 +67,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const RelatedPerson = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const RelatedPerson = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -139,6 +145,7 @@ const RelatedPerson = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );