#290 Fix deprecated notation of @storybook/addon-info

.storybook/config.js

@@ -2,7 +2,7 @@ import '@babel/polyfill';
 import svg4everybody from 'svg4everybody';
 import { configure, setAddon, addDecorator } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
-import infoAddon, { setDefaults } from '@storybook/addon-info';
+import { withInfo } from '@storybook/addon-info';
 import wrapContent from './wrapContent';
 import infoAddonDefaults from './infoAddonDefaults';
 
@@ -19,8 +19,7 @@ if (typeof location !== 'undefined') {
   }
 }
 
-setDefaults(infoAddonDefaults);
-setAddon(infoAddon);
+addDecorator(withInfo(infoAddonDefaults));
 addDecorator(withKnobs);
 addDecorator(wrapContent({ assetRoot }));
 

stories/BadgeStories.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { Badge } from '../src/scripts';
 
 storiesOf('Badge', module).add(
   'Default',
-  withInfo('Default badge')(() => (
-    <Badge onClick={action('click')}>Badge Label</Badge>
-  ))
+  () => <Badge onClick={action('click')}>Badge Label</Badge>,
+  { info: 'Default badge' }
 );

stories/BreadCrumbsStories.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { BreadCrumbs, Crumb } from '../src/scripts';
 
 storiesOf('BreadCrumbs', module).add(
   'Default',
-  withInfo('Default BreadCrumbs')(() => (
+  () => (
     <BreadCrumbs>
       <Crumb onClick={action('crumb1#click')}>Parent Entity</Crumb>
       <Crumb onClick={action('crumb2#click')}>Parent Record Name</Crumb>
     </BreadCrumbs>
-  ))
+  ),
+  { info: 'Default BreadCrumbs' }
 );

stories/ButtonGroupStories.js

@@ -1,15 +1,14 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { ButtonGroup, Button, DropdownButton, MenuItem } from '../src/scripts';
 
 const darkBgStyle = { backgroundColor: '#16325c', padding: 4 };
 
 const stories = storiesOf('ButtonGroup', module)
   .add(
     'Default',
-    withInfo('Default grouped buttons')(() => (
+    () => (
       <ButtonGroup>
         <Button type='neutral' onClick={action('click')}>
           Refresh
@@ -26,11 +25,12 @@ const stories = storiesOf('ButtonGroup', module)
           Download
         </Button>
       </ButtonGroup>
-    ))
+    ),
+    { info: 'Default grouped buttons' }
   )
   .add(
     'Default disalbed',
-    withInfo('Grouped buttons with disabled button')(() => (
+    () => (
       <ButtonGroup>
         <Button type='neutral' onClick={action('click')}>
           Refresh
@@ -48,11 +48,12 @@ const stories = storiesOf('ButtonGroup', module)
           Download
         </Button>
       </ButtonGroup>
-    ))
+    ),
+    { info: 'Grouped buttons with disabled button' }
   )
   .add(
     'More',
-    withInfo('Grouped buttons with dropdown button in right')(() => (
+    () => (
       <ButtonGroup>
         <Button type='neutral' onClick={action('click')}>
           Refresh
@@ -78,11 +79,12 @@ const stories = storiesOf('ButtonGroup', module)
           <MenuItem>Menu Item Three</MenuItem>
         </DropdownButton>
       </ButtonGroup>
-    ))
+    ),
+    { info: 'Grouped buttons with dropdown button in right' }
   )
   .add(
     'Inverse',
-    withInfo('Grouped buttons with inversed color')(() => (
+    () => (
       <div style={darkBgStyle}>
         <ButtonGroup>
           <Button type='inverse' onClick={action('click')}>
@@ -110,7 +112,8 @@ const stories = storiesOf('ButtonGroup', module)
           </DropdownButton>
         </ButtonGroup>
       </div>
-    ))
+    ),
+    { info: 'Grouped buttons with inversed color' }
   );
 
 export default stories;

stories/ButtonStories.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text, boolean, select } from '@storybook/addon-knobs';
 import { Button } from '../src/scripts';
 
@@ -11,7 +10,7 @@ const lightBgStyle = { backgroundColor: '#cccccc', padding: 4 };
 const stories = storiesOf('Button', module)
   .add(
     'Controlled with knobs',
-    withInfo('Button controlled with knobs')(() => {
+    () => {
       const typeOptions = {
         '': '(none)',
         neutral: 'neutral',
@@ -73,69 +72,74 @@ const stories = storiesOf('Button', module)
           />
         </div>
       );
-    })
-  )
-  .add(
-    'Reset',
-    withInfo('Button with no type property assigned')(() => (
-      <Button onClick={action('clicked')}>Reset</Button>
-    ))
+    },
+    { info: 'Button controlled with knobs' }
   )
+  .add('Reset', () => <Button onClick={action('clicked')}>Reset</Button>, {
+    info: 'Button with no type property assigned',
+  })
   .add(
     'Neutral',
-    withInfo('Neutral type button')(() => (
+    () => (
       <Button type='neutral' onClick={action('neutral clicked')}>
         Neutral
       </Button>
-    ))
+    ),
+    { info: 'Neutral type button' }
   )
   .add(
     'Neutral disabled',
-    withInfo('Neutral type button but disabled')(() => (
+    () => (
       <Button type='neutral' disabled onClick={action('should not be clicked')}>
         Disabled Neutral
       </Button>
-    ))
+    ),
+
+    { info: 'Neutral type button but disabled' }
   )
   .add(
     'Brand',
-    withInfo('Brand type button')(() => (
+    () => (
       <Button type='brand' onClick={action('brand clicked')}>
         Brand
       </Button>
-    ))
+    ),
+    { info: 'Brand type button' }
   )
   .add(
     'Brand disabled',
-    withInfo('Brand type button but disabled')(() => (
+    () => (
       <Button type='brand' disabled onClick={action('should not be clicked')}>
         Disabled Brand
       </Button>
-    ))
+    ),
+    { info: 'Brand type button but disabled' }
   )
   .add(
     'Destructive',
-    withInfo('Destructive type button')(() => (
+    () => (
       <Button type='destructive' onClick={action('destructive clicked')}>
         Destructive
       </Button>
-    ))
+    ),
+    { info: 'Destructive type button' }
   )
   .add(
     'Destructive disabled',
-    withInfo('Destructive type button but disabled')(() => (
+    () => (
       <Button
         type='destructive'
         disabled
         onClick={action('should not be clicked')}
       >
         Disabled Destructive
       </Button>
-    ))
+    ),
+    { info: 'Destructive type button but disabled' }
   )
   .add(
     'Neutral with left icon',
-    withInfo('Neutral type button with download icon in left side')(() => (
+    () => (
       <Button
         type='neutral'
         icon='download'
@@ -144,11 +148,12 @@ const stories = storiesOf('Button', module)
       >
         Button Neutral
       </Button>
-    ))
+    ),
+    { info: 'Neutral type button with download icon in left side' }
   )
   .add(
     'Neutral with right icon',
-    withInfo('Neutral type button with down icon in right side')(() => (
+    () => (
       <Button
         type='neutral'
         icon='down'
@@ -157,21 +162,23 @@ const stories = storiesOf('Button', module)
       >
         Button Neutral
       </Button>
-    ))
+    ),
+    { info: 'Neutral type button with down icon in right side' }
   )
   .add(
     'Inverse',
-    withInfo('Inverse type button in dark background')(() => (
+    () => (
       <div style={darkBgStyle}>
         <Button type='inverse' onClick={action('inverse button clicked')}>
           Inverse
         </Button>
       </div>
-    ))
+    ),
+    { info: 'Inverse type button in dark background' }
   )
   .add(
     'Inverse Disabled',
-    withInfo('Inverse type button in dark background but disabled')(() => (
+    () => (
       <div style={darkBgStyle}>
         <Button
           type='inverse'
@@ -181,65 +188,71 @@ const stories = storiesOf('Button', module)
           Disabled Inverse
         </Button>
       </div>
-    ))
+    ),
+    { info: 'Inverse type button in dark background but disabled' }
   )
   .add(
     'Button Icon',
-    withInfo('Default button with icon')(() => (
+    () => (
       <Button
         type='icon'
         icon='settings'
         onClick={action('button icon clicked')}
       />
-    ))
+    ),
+    { info: 'Default button with icon' }
   )
   .add(
     'Button Icon Container',
-    withInfo('Button with icon in container')(() => (
+    () => (
       <Button
         type='icon-container'
         icon='settings'
         onClick={action('button icon container button clicked')}
       />
-    ))
+    ),
+    { info: 'Button with icon in container' }
   )
   .add(
     'Button Icon Border',
-    withInfo('Button with icon of bordered')(() => (
+    () => (
       <Button
         type='icon-border'
         icon='settings'
         onClick={action('button icon border clicked')}
       />
-    ))
+    ),
+    { info: 'Button with icon of bordered' }
   )
   .add(
     'Button Icon Border and Filled',
-    withInfo('Button with icon of bordered and filled with white')(() => (
+    () => (
       <div style={lightBgStyle}>
         <Button
           type='icon-border-filled'
           icon='settings'
           onClick={action('button icon border and filled button clicked')}
         />
       </div>
-    ))
+    ),
+    { info: 'Button with icon of bordered and filled with white' }
   )
   .add(
     'Button Icon Inverse',
-    withInfo('Button with icon in dark background')(() => (
+    () => (
       <div style={darkBgStyle}>
         <Button
           type='icon-inverse'
           icon='close'
           onClick={action('button icon inverse button clicked')}
         />
       </div>
-    ))
+    ),
+    { info: 'Button with icon in dark background' }
   )
   .add(
     'Button Icon Inverse in dark background',
-    withInfo('Button with icon in dark background')(() => (
+    () => (
       <div style={darkBgStyle}>
         <Button
           type='icon-inverse'
@@ -248,6 +261,7 @@ const stories = storiesOf('Button', module)
           onClick={action('should not be clicked')}
         />
       </div>
-    ))
+    ),
+    { info: 'Button with icon in dark background' }
   );
 export default stories;