fhir-react 0.3.8 → 0.3.11

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Claim from './Claim';
 import fhirVersions from '../fhirResourceVersions';
@@ -15,65 +15,52 @@ import ClaimIcon from '../../../assets/containers/Claim/claim.svg';
 import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
-  title: 'Claim',
+  title: 'ExplanationOfBenefit/Claim',
+  component: Claim,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const ExampleOfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Claim/claim.svg')}
-    />
-  );
+const Template = args => <Claim {...args} />;
+
+export const ExampleOfDSTU2 = Template.bind({});
+ExampleOfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Claim/claim.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={ClaimIcon}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: ClaimIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: fhirIcons,
 };
 
-export const Example3OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example3);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+export const Example3OfSTU3 = Template.bind({});
+Example3OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example3,
+  fhirIcons: false,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Claim
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      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 <Claim fhirVersion={fhirVersions.R4} fhirResource={fhirResource} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };

package/src/components/resources/ClaimResponse/ClaimResponse.js

@@ -285,7 +285,13 @@ const hasPaymentInfo = payment => {
   return Object.values(payment).filter(item => item).length > 0;
 };
 
-const ClaimResponse = ({ fhirVersion, fhirResource, fhirIcons, onClick }) => {
+const ClaimResponse = ({
+  fhirVersion,
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -449,6 +455,7 @@ const ClaimResponse = ({ fhirVersion, fhirResource, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/ClaimResponse/ClaimResponse.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 ClaimResponse from './ClaimResponse';
@@ -13,63 +13,53 @@ import example3ClaimResponseR4 from '../../../fixtures/r4/resources/claimRespons
 import fhirIcons from '../../../fixtures/example-icons';
 import ClaimResponseIcon from '../../../assets/containers/ClaimResponse/claim-response.svg';
 
-export default { title: 'Claim Response' };
+export default {
+  title: 'ExplanationOfBenefit/ClaimResponse',
+  component: ClaimResponse,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <ClaimResponse {...args} />;
 
-export const ExampleDSTU2 = () => {
-  const fhirResource = object('Resource', exampleClaimResponseDSTU2);
-  return (
-    <ClaimResponse
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/ClaimResponse/claim-response.svg')}
-    />
-  );
+export const ExampleDSTU2 = Template.bind({});
+ExampleDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleClaimResponseDSTU2,
+  fhirIcons: require('../../../assets/containers/ClaimResponse/claim-response.svg'),
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', exampleClaimResponseSTU3);
-  return (
-    <ClaimResponse
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={ClaimResponseIcon}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleClaimResponseSTU3,
+  fhirIcons: ClaimResponseIcon,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2ClaimResponseSTU3);
-  return (
-    <ClaimResponse
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2ClaimResponseSTU3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', example1ClaimResponseR4);
-  return (
-    <ClaimResponse
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={false}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1ClaimResponseR4,
+  fhirIcons: false,
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', example2ClaimResponseR4);
-  return (
-    <ClaimResponse
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={'random text'}
-    />
-  );
+
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2ClaimResponseR4,
+  fhirIcons: 'random text',
 };
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', example3ClaimResponseR4);
-  return (
-    <ClaimResponse fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3ClaimResponseR4,
 };

package/src/components/resources/Condition/Condition.js

@@ -87,7 +87,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Condition = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Condition = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   const {
     codeText,
     severityText,
@@ -157,6 +163,7 @@ const Condition = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/Condition/Condition.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 Condition from './Condition';
@@ -18,80 +18,65 @@ import example3ConditionR4 from '../../../fixtures/r4/resources/condition/exampl
 import fhirIcons from '../../../fixtures/example-icons';
 import ConditionIcon from '../../../assets/containers/Condition/condition.svg';
 
-export default { title: 'Condition' };
+export default {
+  title: 'Condition',
+  component: Condition,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Condition {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleConditionSeverity);
-  return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/Condition/condition.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleConditionSeverity,
+  fhirIcons: require('../../../assets/containers/Condition/condition.svg'),
 };
 
-export const ExampleWithoutSeverityDSTU2 = () => {
-  const fhirResource = object('Resource', exampleCondition);
-  return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={ConditionIcon}
-    />
-  );
+export const ExampleWithoutSeverityDSTU2 = Template.bind({});
+ExampleWithoutSeverityDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleCondition,
+  fhirIcons: ConditionIcon,
 };
 
-export const Example3OfDSTU2 = () => {
-  const fhirResource = object('Resource', example3Condition);
-  return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example3OfDSTU2 = Template.bind({});
+Example3OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example3Condition,
+  fhirIcons: fhirIcons,
 };
 
-export const ExampleWithoutSeveritySTU3 = () => {
-  const fhirResource = object('Resource', exampleConditionSTU3);
-  return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={false}
-    />
-  );
+export const ExampleWithoutSeveritySTU3 = Template.bind({});
+ExampleWithoutSeveritySTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleConditionSTU3,
+  fhirIcons: false,
 };
 
-export const ExampleWithSeveritySTU3 = () => {
-  const fhirResource = object('Resource', exampleConditionSeveritySTU3);
-  return (
-    <Condition
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={'random text'}
-    />
-  );
+export const ExampleWithSeveritySTU3 = Template.bind({});
+ExampleWithSeveritySTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleConditionSeveritySTU3,
+  fhirIcons: 'random text',
 };
 
-export const Example1ofR4 = () => {
-  const fhirResource = object('Resource', example1ConditionR4);
-  return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1ofR4 = Template.bind({});
+Example1ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1ConditionR4,
 };
 
-export const Example2ofR4 = () => {
-  const fhirResource = object('Resource', example2ConditionR4);
-  return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example2ofR4 = Template.bind({});
+Example2ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2ConditionR4,
 };
 
-export const Example3ofR4 = () => {
-  const fhirResource = object('Resource', example3ConditionR4);
-  return (
-    <Condition fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example3ofR4 = Template.bind({});
+Example3ofR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example3ConditionR4,
 };

package/src/components/resources/Coverage/Coverage.js

@@ -114,7 +114,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Coverage = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Coverage = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -233,6 +239,7 @@ const Coverage = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
         }
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Coverage from './Coverage';
 import fhirVersions from '../fhirResourceVersions';
@@ -12,64 +12,52 @@ import example2CoverageR4 from '../../../fixtures/r4/resources/coverage/example2
 import fhirIcons from '../../../fixtures/example-icons';
 import CoverageIcon from '../../../assets/containers/Coverage/coverage.svg';
 
-export default { title: 'Coverage' };
+export default {
+  title: 'Coverage',
+  component: Coverage,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Coverage {...args} />;
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', exampleCoverageDstu2);
-  return (
-    <Coverage
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Coverage/coverage.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: exampleCoverageDstu2,
+  fhirIcons: require('../../../assets/containers/Coverage/coverage.svg'),
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', exampleCoverageStu3);
-  return (
-    <Coverage
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={CoverageIcon}
-    />
-  );
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: exampleCoverageStu3,
+  fhirIcons: CoverageIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2CoverageStu3);
-  return (
-    <Coverage
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2CoverageStu3,
+  fhirIcons: fhirIcons,
 };
 
-export const ExampleOfR4 = () => {
-  const fhirResource = object('Resource', exampleCoverageR4);
-  return (
-    <Coverage
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={false}
-    />
-  );
+export const ExampleOfR4 = Template.bind({});
+ExampleOfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleCoverageR4,
+  fhirIcons: false,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', example2CoverageR4);
-  return (
-    <Coverage
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={'random text'}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2CoverageR4,
+  fhirIcons: 'random text',
 };
 
-export const ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', exampleCoverageStu3);
-  return <Coverage fhirResource={fhirResource} />;
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: exampleCoverageStu3,
 };

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

@@ -102,7 +102,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Device = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
+const Device = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -179,6 +185,7 @@ const Device = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
           </Body>
         }
         onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

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,
 };