fhir-react 0.3.9 → 0.3.10

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import ExplanationOfBenefit from './ExplanationOfBenefit';
 import fhirVersions from '../fhirResourceVersions';
@@ -17,83 +17,69 @@ import ExplanationOfBenefitIcon from '../../../assets/containers/ExplanationOfBe
 
 export default {
   title: 'ExplanationOfBenefit',
+  component: ExplanationOfBenefit,
+  argTypes: {
+    ...defaultArgTypes,
+    withCarinBBProfile: {
+      table: {
+        disable: true,
+      },
+    },
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1Dstu2);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg')}
-    />
-  );
+const Template = args => <ExplanationOfBenefit {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1Dstu2,
+  fhirIcons: require('../../../assets/containers/ExplanationOfBenefit/explanation-of-benefit.svg'),
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', example1Stu3);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={ExplanationOfBenefitIcon}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example1Stu3,
+  fhirIcons: ExplanationOfBenefitIcon,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2Stu3);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2Stu3,
+  fhirIcons: fhirIcons,
 };
-export const PersonPrimaryCoverageR4 = () => {
-  const fhirResource = object('Resource', example1R4);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={false}
-    />
-  );
+
+export const PersonPrimaryCoverageR4 = Template.bind({});
+PersonPrimaryCoverageR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example1R4,
+  fhirIcons: false,
 };
-export const EOBForClaimWithErrorsR4 = () => {
-  const fhirResource = object('Resource', example2R4);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      fhirIcons={'random text'}
-    />
-  );
+
+export const EOBForClaimWithErrorsR4 = Template.bind({});
+EOBForClaimWithErrorsR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: example2R4,
+  fhirIcons: 'random text',
 };
 
-export const ExampleWithoutFHIRVersionProperty = () => {
-  const fhirResource = object('Resource', example1Stu3);
-  return <ExplanationOfBenefit fhirResource={fhirResource} />;
+export const ExampleWithoutFHIRVersionProperty = Template.bind({});
+ExampleWithoutFHIRVersionProperty.args = {
+  fhirResource: example1Stu3,
 };
 
-export const EOBCarinBlueButtonExample = () => {
-  const fhirResource = object('Resource', exampleC4BB);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withCarinBBProfile
-    />
-  );
+export const EOBCarinBlueButtonExample = Template.bind({});
+EOBCarinBlueButtonExample.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleC4BB,
+  withCarinBBProfile: true,
 };
 
-export const EOBCarinBlueButtonExtendedDiagnosis = () => {
-  const fhirResource = object('Resource', exampleC4BBExtendedDiagnosis);
-  return (
-    <ExplanationOfBenefit
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-      withCarinBBProfile
-    />
-  );
+export const EOBCarinBlueButtonExtendedDiagnosis = Template.bind({});
+EOBCarinBlueButtonExtendedDiagnosis.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: exampleC4BBExtendedDiagnosis,
+  withCarinBBProfile: true,
 };

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

@@ -2,8 +2,6 @@ import React from 'react';
 
 import ExplanationOfBenefitGraph from './ExplanationOfBenefitGraph';
 
-export default { title: 'ExplanationOfBenefitGraph' };
-
 const CHART_DATA = [
   {
     id: 'a',
@@ -31,48 +29,86 @@ const CHART_DATA = [
   },
 ];
 
-export const DefaultExplanationOfBenefitGraph = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 10, bottom: 10 }}
-    />
-  );
+export default {
+  title: 'ExplanationOfBenefitGraph',
+  component: ExplanationOfBenefitGraph,
+  argTypes: {
+    data: {
+      table: {
+        disable: true,
+      },
+    },
+    margin: {
+      table: {
+        disable: true,
+      },
+    },
+    totalLabel: {
+      table: {
+        disable: true,
+      },
+    },
+    height: {
+      table: {
+        disable: true,
+      },
+    },
+    enableLinkLabels: {
+      table: {
+        disable: true,
+      },
+    },
+    enableValueLabels: {
+      table: {
+        disable: true,
+      },
+    },
+    pieChartProperties: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+const Template = args => <ExplanationOfBenefitGraph {...args} />;
+
+export const DefaultExplanationOfBenefitGraph = Template.bind({});
+DefaultExplanationOfBenefitGraph.args = {
+  data: CHART_DATA,
+  margin: { top: 10, bottom: 10 },
 };
 
-export const ExplanationOfBenefitGraphWithCustomCenteredMetric = () => {
-  return <ExplanationOfBenefitGraph data={CHART_DATA} totalLabel="Custom" />;
+export const ExplanationOfBenefitGraphWithCustomCenteredMetric = Template.bind(
+  {},
+);
+ExplanationOfBenefitGraphWithCustomCenteredMetric.args = {
+  data: CHART_DATA,
+  totalLabel: 'Custom',
 };
 
-export const ExplanationOfBenefitGraphWithHeightAndMargin = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 40, bottom: 40 }}
-      height={250}
-    />
-  );
+export const ExplanationOfBenefitGraphWithHeightAndMargin = Template.bind({});
+ExplanationOfBenefitGraphWithHeightAndMargin.args = {
+  data: CHART_DATA,
+  margin: { top: 40, bottom: 40 },
+  height: 250,
 };
 
-export const ExplanationOfBenefitGraphWithLabels = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 20, bottom: 20 }}
-      enableLinkLabels
-      enableValueLabels
-    />
-  );
+export const ExplanationOfBenefitGraphWithLabels = Template.bind({});
+ExplanationOfBenefitGraphWithLabels.args = {
+  data: CHART_DATA,
+  margin: { top: 20, bottom: 20 },
+  enableLinkLabels: true,
+  enableValueLabels: true,
 };
 
-export const ExplanationOfBenefitGraphWithPieChartProperties = () => {
-  return (
-    <ExplanationOfBenefitGraph
-      data={CHART_DATA}
-      margin={{ top: 20, bottom: 20 }}
-      enableLinkLabels
-      enableValueLabels
-      pieChartProperties={{ startAngle: 90, cornerRadius: 15, borderWidth: 4 }}
-    />
-  );
+export const ExplanationOfBenefitGraphWithPieChartProperties = Template.bind(
+  {},
+);
+ExplanationOfBenefitGraphWithPieChartProperties.args = {
+  data: CHART_DATA,
+  margin: { top: 20, bottom: 20 },
+  enableLinkLabels: true,
+  enableValueLabels: true,
+  pieChartProperties: { startAngle: 90, cornerRadius: 15, borderWidth: 4 },
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import FamilyMemberHistory from './FamilyMemberHistory';
 import fhirVersions from '../fhirResourceVersions';
@@ -13,37 +13,31 @@ import FamilyMemberHistoryIcon from '../../../assets/containers/FamilyMemberHist
 
 export default {
   title: 'FamilyMemberHistory',
+  component: FamilyMemberHistory,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1DSTU2);
-  return (
-    <FamilyMemberHistory
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/FamilyMemberHistory/family-member-history.svg')}
-    />
-  );
+const Template = args => <FamilyMemberHistory {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1DSTU2,
+  fhirIcons: require('../../../assets/containers/FamilyMemberHistory/family-member-history.svg'),
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', example1STU3);
-  return (
-    <FamilyMemberHistory
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={FamilyMemberHistoryIcon}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example1STU3,
+  fhirIcons: FamilyMemberHistoryIcon,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', example2STU3);
-  return (
-    <FamilyMemberHistory
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: example2STU3,
+  fhirIcons: fhirIcons,
 };

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

@@ -1,19 +1,28 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Generic from './Generic';
 import fhirIcons from '../../../fixtures/example-icons';
 
-export default { title: 'Generic' };
+export default {
+  title: 'Generic',
+  component: Generic,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+
+const Template = args => <Generic {...args} />;
 
-export const DefaultVisualization = () => {
-  const exampleResource = {
-    resourceType: 'UnknownResource',
-    id: '12345',
-    code: {
-      text: 'Resource code text',
-    },
-  };
-  const fhirResource = object('Resource', exampleResource);
-  return <Generic fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+const exampleResource = {
+  resourceType: 'UnknownResource',
+  id: '12345',
+  code: {
+    text: 'Resource code text',
+  },
+};
+export const DefaultVisualization = Template.bind({});
+DefaultVisualization.args = {
+  fhirResource: exampleResource,
+  fhirIcons: fhirIcons,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Goal from './Goal';
 import fhirIcons from '../../../fixtures/example-icons';
@@ -13,64 +13,50 @@ import GoalIcon from '../../../assets/containers/Goal/goal.svg';
 
 export default {
   title: 'Goal',
+  component: Goal,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Goal
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Goal/goal.svg')}
-    />
-  );
+const Template = args => <Goal {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Goal/goal.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Goal
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-      fhirIcons={GoalIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: GoalIcon,
 };
 
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Goal
-      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 (
-    <Goal
-      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 (
-    <Goal
-      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 ExampleWithoutFhirVersionProperty = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return <Goal fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const ExampleWithoutFhirVersionProperty = Template.bind({});
+ExampleWithoutFhirVersionProperty.args = {
+  fhirResource: stu3Example1,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import Immunization from './Immunization';
 
@@ -15,64 +15,51 @@ import ImmunizationIcon from '../../../assets/containers/Immunization/immunizati
 
 export default {
   title: 'Immunization',
+  component: Immunization,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={require('../../../assets/containers/Immunization/immunization.svg')}
-    />
-  );
+const Template = args => <Immunization {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example1,
+  fhirIcons: require('../../../assets/containers/Immunization/immunization.svg'),
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', example2);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-      fhirIcons={ImmunizationIcon}
-    />
-  );
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: example2,
+  fhirIcons: ImmunizationIcon,
 };
 
-export const ExampleSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-      fhirIcons={fhirIcons}
-    />
-  );
+export const ExampleSTU3 = Template.bind({});
+ExampleSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1R4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={false}
-    />
-  );
+export const Example1R4 = Template.bind({});
+Example1R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
-export const Example2R4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Immunization
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.R4}
-      fhirIcons={'random text'}
-    />
-  );
+
+export const Example2R4 = Template.bind({});
+Example2R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };
-export const Example3R4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Immunization fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+
+export const Example3R4 = Template.bind({});
+Example3R4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };