diff --git a/.storybook/config.js b/.storybook/config.js
index cdd47d7a1..e19b1087c 100644
--- a/.storybook/config.js
+++ b/.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 }));
 
diff --git a/stories/BadgeStories.js b/stories/BadgeStories.js
index 731081dce..e5aad6bd6 100644
--- a/stories/BadgeStories.js
+++ b/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' }
 );
diff --git a/stories/BreadCrumbsStories.js b/stories/BreadCrumbsStories.js
index c6fd94179..adb69f11b 100644
--- a/stories/BreadCrumbsStories.js
+++ b/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' }
 );
diff --git a/stories/ButtonGroupStories.js b/stories/ButtonGroupStories.js
index 234380610..03494cee0 100644
--- a/stories/ButtonGroupStories.js
+++ b/stories/ButtonGroupStories.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 { ButtonGroup, Button, DropdownButton, MenuItem } from '../src/scripts';
 
 const darkBgStyle = { backgroundColor: '#16325c', padding: 4 };
@@ -9,7 +8,7 @@ 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;
diff --git a/stories/ButtonStories.js b/stories/ButtonStories.js
index 188a30452..b33a764c0 100644
--- a/stories/ButtonStories.js
+++ b/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,57 +72,61 @@ 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
@@ -131,11 +134,12 @@ const stories = storiesOf('Button', module)
       >
         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,41 +188,45 @@ 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'
@@ -223,11 +234,12 @@ const stories = storiesOf('Button', module)
           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'
@@ -235,11 +247,12 @@ const stories = storiesOf('Button', module)
           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;
diff --git a/stories/CheckboxStories.js b/stories/CheckboxStories.js
index e4b65c81e..2ca9cafd4 100644
--- a/stories/CheckboxStories.js
+++ b/stories/CheckboxStories.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text, boolean } from '@storybook/addon-knobs';
 import { CheckboxGroup, Checkbox } from '../src/scripts';
 
 storiesOf('Checkbox', module)
   .add(
     'Controlled with knobs',
-    withInfo('Checkbox controlled with knobs')(() => (
+    () => (
       <CheckboxGroup
         label={text('label', 'Checkbox Group Label')}
         error={text('error')}
@@ -28,29 +27,33 @@ storiesOf('Checkbox', module)
           checked={boolean('checked #2', false)}
         />
       </CheckboxGroup>
-    ))
+    ),
+    { info: 'Checkbox controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Checkbox Textarea control')(() => (
+    () => (
       <CheckboxGroup label='Radio Group Label'>
         <Checkbox label='Checkbox Label One' value='1' checked />
         <Checkbox label='Checkbox Label Two' value='2' checked={false} />
       </CheckboxGroup>
-    ))
+    ),
+    { info: 'Checkbox Textarea control' }
   )
   .add(
     'Required',
-    withInfo('Checkbox control with required attribute')(() => (
+    () => (
       <CheckboxGroup label='Checkbox Group Label' required>
         <Checkbox label='Checkbox Label One' value='1' checked />
         <Checkbox label='Checkbox Label Two' value='2' />
       </CheckboxGroup>
-    ))
+    ),
+
+    { info: 'Checkbox control with required attribute' }
   )
   .add(
     'Error',
-    withInfo('Checkbox control with error message')(() => (
+    () => (
       <CheckboxGroup
         label='Checkbox Group Label'
         required
@@ -59,14 +62,16 @@ storiesOf('Checkbox', module)
         <Checkbox label='Checkbox Label One' value='1' checked />
         <Checkbox label='Checkbox Label Two' value='2' />
       </CheckboxGroup>
-    ))
+    ),
+    { info: 'Checkbox control with error message' }
   )
   .add(
     'Disabled',
-    withInfo('Checkbox control with disabled status')(() => (
+    () => (
       <CheckboxGroup label='Checkbox Group Label'>
         <Checkbox label='Checkbox Label One' value='1' disabled />
         <Checkbox label='Checkbox Label Two' value='2' disabled />
       </CheckboxGroup>
-    ))
+    ),
+    { info: 'Checkbox control with disabled status' }
   );
diff --git a/stories/DateInputStories.js b/stories/DateInputStories.js
index 943d4c84a..6b5344b3d 100644
--- a/stories/DateInputStories.js
+++ b/stories/DateInputStories.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text, boolean } from '@storybook/addon-knobs';
 import { DateInput } from '../src/scripts';
 
 storiesOf('DateInput', module)
   .add(
     'Controlled with knobs',
-    withInfo('DateInput controlled with knobs')(() => (
+    () => (
       <DateInput
         label={text('label', 'Date Input Label')}
         error={text('error')}
@@ -22,11 +21,12 @@ storiesOf('DateInput', module)
         onValueChange={action('valueChange')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'DateInput controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default date input control')(() => (
+    () => (
       <DateInput
         label='Date Input Label'
         value='2016-04-13'
@@ -34,11 +34,12 @@ storiesOf('DateInput', module)
         onValueChange={action('valueChange')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Default date input control' }
   )
   .add(
     'Required',
-    withInfo('Date input control with required attribute')(() => (
+    () => (
       <DateInput
         label='Date Input Label'
         value='2016-04-13'
@@ -47,11 +48,12 @@ storiesOf('DateInput', module)
         onValueChange={action('valueChange')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Date input control with required attribute' }
   )
   .add(
     'Error',
-    withInfo('Date input control with error message')(() => (
+    () => (
       <DateInput
         label='Date Input Label'
         value='2016-04-13'
@@ -61,11 +63,12 @@ storiesOf('DateInput', module)
         onValueChange={action('valueChange')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Date input control with error message' }
   )
   .add(
     'Disabled',
-    withInfo('Date input control with disabled status')(() => (
+    () => (
       <DateInput
         label='Date Input Label'
         value='2016-04-13'
@@ -74,26 +77,27 @@ storiesOf('DateInput', module)
         onValueChange={action('valueChange')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Date input control with disabled status' }
   )
   .add(
     'With date format',
-    withInfo('Date input control with date format specified (YYYY.MM.DD)')(
-      () => (
-        <DateInput
-          label='Date Input Label'
-          value='2016-04-13'
-          dateFormat='YYYY.MM.DD'
-          onBlur={action('blur')}
-          onValueChange={action('valueChange')}
-          onComplete={action('complete')}
-        />
-      )
-    )
+
+    () => (
+      <DateInput
+        label='Date Input Label'
+        value='2016-04-13'
+        dateFormat='YYYY.MM.DD'
+        onBlur={action('blur')}
+        onValueChange={action('valueChange')}
+        onComplete={action('complete')}
+      />
+    ),
+    { info: 'Date input control with date format specified (YYYY.MM.DD)' }
   )
   .add(
     'With min/max date',
-    withInfo('Date input control with minimum date boundary')(() => (
+    () => (
       <DateInput
         label='Date Input Label'
         value='2016-04-13'
@@ -103,11 +107,12 @@ storiesOf('DateInput', module)
         onValueChange={action('valueChange')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Date input control with minimum date boundary' }
   )
   .add(
     'Include time data',
-    withInfo('Date input control with time information')(() => (
+    () => (
       <DateInput
         label='Date Input Label'
         value='2016-04-13T23:42:56+0900'
@@ -117,5 +122,6 @@ storiesOf('DateInput', module)
         onValueChange={action('valueChange')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Date input control with time information' }
   );
diff --git a/stories/DatepickerStories.js b/stories/DatepickerStories.js
index 48110526b..dc4ba24e9 100644
--- a/stories/DatepickerStories.js
+++ b/stories/DatepickerStories.js
@@ -2,7 +2,6 @@ import React from 'react';
 import moment from 'moment';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text } from '@storybook/addon-knobs';
 import { Datepicker, Button } from '../src/scripts';
 
@@ -28,7 +27,7 @@ const datepickerWrapperStyle = {
 storiesOf('Datepicker', module)
   .add(
     'Controlled with knobs',
-    withInfo('DateInput controlled with knobs')(() => (
+    () => (
       <div style={datepickerWrapperStyle}>
         <Datepicker
           selectedDate={text('selectedDate')}
@@ -39,11 +38,12 @@ storiesOf('Datepicker', module)
           onBlur={action('blur')}
         />
       </div>
-    ))
+    ),
+    { info: 'DateInput controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default date input control')(() => (
+    () => (
       <div style={datepickerWrapperStyle}>
         <Datepicker
           selectedDate='2016-04-13'
@@ -52,11 +52,12 @@ storiesOf('Datepicker', module)
           onBlur={action('blur')}
         />
       </div>
-    ))
+    ),
+    { info: 'Default date input control' }
   )
   .add(
     'Extension Rendering',
-    withInfo('Specify extension component in datepicker content')(() => (
+    () => (
       <div style={datepickerWrapperStyle}>
         <Datepicker
           selectedDate='2016-04-13'
@@ -66,5 +67,6 @@ storiesOf('Datepicker', module)
           onBlur={action('blur')}
         />
       </div>
-    ))
+    ),
+    { info: 'Specify extension component in datepicker content' }
   );
diff --git a/stories/DropdownButtonStories.js b/stories/DropdownButtonStories.js
index 329d813d1..2b9419e95 100644
--- a/stories/DropdownButtonStories.js
+++ b/stories/DropdownButtonStories.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 { DropdownButton, MenuItem } from '../src/scripts';
 
@@ -11,7 +10,7 @@ const lightBgStyle = { backgroundColor: '#cccccc', padding: 4 };
 const stories = storiesOf('DropdownButton', module)
   .add(
     'Controlled with knobs',
-    withInfo('Dropdown button controlled with knobs')(() => {
+    () => {
       const typeOptions = {
         '': '(none)',
         neutral: 'neutral',
@@ -120,11 +119,12 @@ const stories = storiesOf('DropdownButton', module)
           </DropdownButton>
         </div>
       );
-    })
+    },
+    { info: 'Dropdown button controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Dropdown button with menu items')(() => (
+    () => (
       <DropdownButton
         label='Dropdown Button'
         onMenuItemClick={action('menuItemClick')}
@@ -134,11 +134,12 @@ const stories = storiesOf('DropdownButton', module)
         <MenuItem>Menu Item Three</MenuItem>
         <MenuItem divider='top'>Menu Item Four</MenuItem>
       </DropdownButton>
-    ))
+    ),
+    { info: 'Dropdown button with menu items' }
   )
   .add(
     'Neutral',
-    withInfo('Neutral dropdown button')(() => (
+    () => (
       <DropdownButton
         type='neutral'
         label='Dropdown Button'
@@ -149,11 +150,12 @@ const stories = storiesOf('DropdownButton', module)
         <MenuItem>Menu Item Three</MenuItem>
         <MenuItem divider='top'>Menu Item Four</MenuItem>
       </DropdownButton>
-    ))
+    ),
+    { info: 'Neutral dropdown button' }
   )
   .add(
     'Icon Bare',
-    withInfo('Icon bare dropdown button')(() => (
+    () => (
       <DropdownButton
         type='icon-bare'
         icon='settings'
@@ -164,11 +166,12 @@ const stories = storiesOf('DropdownButton', module)
         <MenuItem>Menu Item Three</MenuItem>
         <MenuItem divider='top'>Menu Item Four</MenuItem>
       </DropdownButton>
-    ))
+    ),
+    { info: 'Icon bare dropdown button' }
   )
   .add(
     'Icon More',
-    withInfo('Icon and more dropdown button')(() => (
+    () => (
       <DropdownButton
         type='icon-more'
         icon='settings'
@@ -179,11 +182,12 @@ const stories = storiesOf('DropdownButton', module)
         <MenuItem>Menu Item Three</MenuItem>
         <MenuItem divider='top'>Menu Item Four</MenuItem>
       </DropdownButton>
-    ))
+    ),
+    { info: 'Icon and more dropdown button' }
   )
   .add(
     'Left icon',
-    withInfo('Dropdown button with icon in left side of menu items')(() => (
+    () => (
       <DropdownButton
         type='icon-border'
         icon='down'
@@ -193,11 +197,12 @@ const stories = storiesOf('DropdownButton', module)
         <MenuItem icon='none'>Menu Item Two</MenuItem>
         <MenuItem icon='none'>Menu Item Three</MenuItem>
       </DropdownButton>
-    ))
+    ),
+    { info: 'Dropdown button with icon in left side of menu items' }
   )
   .add(
     'Right icon',
-    withInfo('Dropdown button with icon in right side of menu items')(() => (
+    () => (
       <DropdownButton
         type='icon-border'
         icon='down'
@@ -207,33 +212,34 @@ const stories = storiesOf('DropdownButton', module)
         <MenuItem iconRight='kanban'>Menu Item Two</MenuItem>
         <MenuItem iconRight='side_list'>Menu Item Three</MenuItem>
       </DropdownButton>
-    ))
+    ),
+    { info: 'Dropdown button with icon in right side of menu items' }
   )
   .add(
     'Left/Right icon',
-    withInfo('Dropdown button with icon in left/right side of menu items')(
-      () => (
-        <DropdownButton
-          type='icon-border'
-          icon='down'
-          onMenuItemClick={action('menuItemClick')}
-        >
-          <MenuItem icon='check' iconRight='table'>
-            Menu Item One
-          </MenuItem>
-          <MenuItem icon='none' iconRight='kanban'>
-            Menu Item Two
-          </MenuItem>
-          <MenuItem icon='none' iconRight='side_list'>
-            Menu Item Three
-          </MenuItem>
-        </DropdownButton>
-      )
-    )
+
+    () => (
+      <DropdownButton
+        type='icon-border'
+        icon='down'
+        onMenuItemClick={action('menuItemClick')}
+      >
+        <MenuItem icon='check' iconRight='table'>
+          Menu Item One
+        </MenuItem>
+        <MenuItem icon='none' iconRight='kanban'>
+          Menu Item Two
+        </MenuItem>
+        <MenuItem icon='none' iconRight='side_list'>
+          Menu Item Three
+        </MenuItem>
+      </DropdownButton>
+    ),
+    { info: 'Dropdown button with icon in left/right side of menu items' }
   )
   .add(
     'Right aligned menu',
-    withInfo('Dropdown')(() => (
+    () => (
       <div style={{ paddingLeft: 200 }}>
         <DropdownButton
           type='icon-border'
@@ -247,11 +253,12 @@ const stories = storiesOf('DropdownButton', module)
           <MenuItem divider='top'>Menu Item Four</MenuItem>
         </DropdownButton>
       </div>
-    ))
+    ),
+    { info: 'Dropdown' }
   )
   .add(
     'Hover Popup',
-    withInfo('Dropdown is rendered in hover event')(() => (
+    () => (
       <DropdownButton
         type='neutral'
         label='Dropdown Button'
@@ -263,11 +270,12 @@ const stories = storiesOf('DropdownButton', module)
         <MenuItem>Menu Item Three</MenuItem>
         <MenuItem divider='top'>Menu Item Four</MenuItem>
       </DropdownButton>
-    ))
+    ),
+    { info: 'Dropdown is rendered in hover event' }
   )
   .add(
     'Nubbin in top',
-    withInfo('Nubbin in top of the menu dropdown')(() => (
+    () => (
       <div style={{ paddingLeft: 100 }}>
         <DropdownButton
           type='icon-container'
@@ -281,6 +289,7 @@ const stories = storiesOf('DropdownButton', module)
           <MenuItem divider='top'>Menu Item Four</MenuItem>
         </DropdownButton>
       </div>
-    ))
+    ),
+    { info: 'Nubbin in top of the menu dropdown' }
   );
 export default stories;
diff --git a/stories/FormStories.js b/stories/FormStories.js
index d62f61664..3d8d122a0 100644
--- a/stories/FormStories.js
+++ b/stories/FormStories.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 {
   Form,
   FieldSet,
@@ -31,7 +30,7 @@ const LOOKUP_DATA = [
 storiesOf('Form', module)
   .add(
     'Horizontal Form',
-    withInfo('Horizontal Form')(() => (
+    () => (
       <Form type='horizontal' onSubmit={action('submit')}>
         <Input label='Text Input' />
         <Textarea label='Textarea Input' />
@@ -54,11 +53,12 @@ storiesOf('Form', module)
         <DateInput label='Date Input Label' />
         <Lookup label='Lookup Label' data={LOOKUP_DATA} />
       </Form>
-    ))
+    ),
+    { info: 'Horizontal Form' }
   )
   .add(
     'Stacked Form',
-    withInfo('Stacked Form')(() => (
+    () => (
       <Form type='stacked' onSubmit={action('submit')}>
         <Input label='Text Input' />
         <Textarea label='Textarea Input' />
@@ -81,21 +81,23 @@ storiesOf('Form', module)
         <DateInput label='Date Input Label' />
         <Lookup label='Lookup Label' data={LOOKUP_DATA} />
       </Form>
-    ))
+    ),
+    { info: 'Stacked Form' }
   )
   .add(
     'Inline Form',
-    withInfo('Inline Form')(() => (
+    () => (
       <Form type='inline' onSubmit={action('submit')}>
         <Input label='Name' />
         <Input label='Email' />
         <Button type='brand'>Submit</Button>
       </Form>
-    ))
+    ),
+    { info: 'Inline Form' }
   )
   .add(
     'Compound Form',
-    withInfo('Stacked Form')(() => (
+    () => (
       <Form type='compound' onSubmit={action('submit')}>
         <FieldSet label='Name'>
           <Row>
@@ -168,5 +170,6 @@ storiesOf('Form', module)
           </Row>
         </FieldSet>
       </Form>
-    ))
+    ),
+    { info: 'Stacked Form' }
   );
diff --git a/stories/GridStories.js b/stories/GridStories.js
index aa50732ce..6f325ea54 100644
--- a/stories/GridStories.js
+++ b/stories/GridStories.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { PropTypes } from 'prop-types';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { Grid, Row, Col } from '../src/scripts';
 
 const Box = ({ children }) => {
@@ -21,7 +20,7 @@ Box.propTypes = {
 storiesOf('Grid', module)
   .add(
     'Weighted',
-    withInfo('columns with weighted width')(() => (
+    () => (
       <Grid>
         <Row cols={4}>
           <Col cols={1}>
@@ -35,11 +34,12 @@ storiesOf('Grid', module)
           </Col>
         </Row>
       </Grid>
-    ))
+    ),
+    { info: 'columns with weighted width' }
   )
   .add(
     'Equally Weighted',
-    withInfo('columns with equally weighted')(() => (
+    () => (
       <Grid>
         <Row>
           <Col>
@@ -53,11 +53,12 @@ storiesOf('Grid', module)
           </Col>
         </Row>
       </Grid>
-    ))
+    ),
+    { info: 'columns with equally weighted' }
   )
   .add(
     'Weighted, no-flex',
-    withInfo('columns with weighted, flex is disabled')(() => (
+    () => (
       <Grid>
         <Row>
           <Col cols={1} noFlex>
@@ -77,5 +78,6 @@ storiesOf('Grid', module)
           </Col>
         </Row>
       </Grid>
-    ))
+    ),
+    { info: 'columns with weighted, flex is disabled' }
   );
diff --git a/stories/IconStories.js b/stories/IconStories.js
index 18636ce1c..bd7d09e9f 100644
--- a/stories/IconStories.js
+++ b/stories/IconStories.js
@@ -2,7 +2,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text, select } from '@storybook/addon-knobs';
 import { Icon } from '../src/scripts';
 
@@ -17,7 +16,7 @@ const iconListItemStyle = {
 storiesOf('Icon', module)
   .add(
     'Controlled with knobs',
-    withInfo('Icon controlled with knobs')(() => {
+    () => {
       const categoryOptions = {
         '': '(none)',
         standard: 'standard',
@@ -54,11 +53,12 @@ storiesOf('Icon', module)
           container={container}
         />
       );
-    })
+    },
+    { info: 'Icon controlled with knobs' }
   )
   .add(
     'Sizes',
-    withInfo('Icon with different size (x-small, small, medium, large)')(() => (
+    () => (
       <div>
         <Icon
           icon='standard:case'
@@ -84,11 +84,12 @@ storiesOf('Icon', module)
           onClick={action('large:click')}
         />
       </div>
-    ))
+    ),
+    { info: 'Icon with different size (x-small, small, medium, large)' }
   )
   .add(
     'Standard Icons',
-    withInfo('Icons in standard category')(() => (
+    () => (
       <ul className='slds-clearfix'>
         {Icon.ICONS.STANDARD_ICONS.map((icon, i) => (
           <li
@@ -107,11 +108,12 @@ storiesOf('Icon', module)
           </li>
         ))}
       </ul>
-    ))
+    ),
+    { info: 'Icons in standard category' }
   )
   .add(
     'Custom Icons',
-    withInfo('Icons in custom category')(() => (
+    () => (
       <ul className='slds-clearfix'>
         {Icon.ICONS.CUSTOM_ICONS.map((icon, i) => (
           <li
@@ -130,11 +132,12 @@ storiesOf('Icon', module)
           </li>
         ))}
       </ul>
-    ))
+    ),
+    { info: 'Icons in custom category' }
   )
   .add(
     'Action Icons',
-    withInfo('Icons in action category')(() => (
+    () => (
       <ul className='slds-clearfix'>
         {Icon.ICONS.ACTION_ICONS.map((icon, i) => (
           <li
@@ -155,11 +158,12 @@ storiesOf('Icon', module)
           </li>
         ))}
       </ul>
-    ))
+    ),
+    { info: 'Icons in action category' }
   )
   .add(
     'Doctype Icons',
-    withInfo('Icons in doctype category')(() => (
+    () => (
       <ul className='slds-clearfix'>
         {Icon.ICONS.DOCTYPE_ICONS.map((icon, i) => (
           <li
@@ -178,11 +182,12 @@ storiesOf('Icon', module)
           </li>
         ))}
       </ul>
-    ))
+    ),
+    { info: 'Icons in doctype category' }
   )
   .add(
     'Utility Icons',
-    withInfo('Icons in utility category')(() => (
+    () => (
       <ul className='slds-clearfix'>
         {Icon.ICONS.UTILITY_ICONS.map((icon, i) => (
           <li
@@ -201,5 +206,6 @@ storiesOf('Icon', module)
           </li>
         ))}
       </ul>
-    ))
+    ),
+    { info: 'Icons in utility category' }
   );
diff --git a/stories/InputStories.js b/stories/InputStories.js
index f86a7ff89..c4f874089 100644
--- a/stories/InputStories.js
+++ b/stories/InputStories.js
@@ -1,14 +1,13 @@
 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 { Input } from '../src/scripts';
 
 storiesOf('Input', module)
   .add(
     'Controlled with knobs',
-    withInfo('Input controlled with knobs')(() => {
+    () => {
       const iconOptions = {
         '': '(none)',
         search: 'search',
@@ -32,65 +31,68 @@ storiesOf('Input', module)
           onBlur={action('blur')}
         />
       );
-    })
+    },
+    { info: 'Input controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default Input control')(() => (
-      <Input label='Input Label' placeholder='Placeholder Text' />
-    ))
+    () => <Input label='Input Label' placeholder='Placeholder Text' />,
+    { info: 'Default Input control' }
   )
   .add(
     'With icon to the left',
-    withInfo('Input control with icon to the left')(() => (
+    () => (
       <Input
         label='Input Label'
         placeholder='Placeholder Text'
         iconLeft='search'
       />
-    ))
+    ),
+    { info: 'Input control with icon to the left' }
   )
   .add(
     'With icon to the right',
-    withInfo('Input control with icon to the right')(() => (
+    () => (
       <Input
         label='Input Label'
         placeholder='Placeholder Text'
         iconRight='search'
       />
-    ))
+    ),
+    { info: 'Input control with icon to the right' }
   )
   .add(
     'With icon to the left & right',
-    withInfo('Input control with icon to the left and right')(() => (
+    () => (
       <Input
         label='Input Label'
         placeholder='Placeholder Text'
         iconLeft='search'
         iconRight='clear'
       />
-    ))
+    ),
+    { info: 'Input control with icon to the left and right' }
   )
   .add(
     'Required',
-    withInfo('Input control with required attribute')(() => (
-      <Input label='Input Label' placeholder='Placeholder Text' required />
-    ))
+    () => <Input label='Input Label' placeholder='Placeholder Text' required />,
+    { info: 'Input control with required attribute' }
   )
   .add(
     'Error',
-    withInfo('Input control with error message')(() => (
+    () => (
       <Input
         label='Input Label'
         placeholder='Placeholder Text'
         required
         error='This field is required'
       />
-    ))
+    ),
+    { info: 'Input control with error message' }
   )
   .add(
     'Error with icon',
-    withInfo('Input control with error message and icon')(() => (
+    () => (
       <Input
         label='Input Label'
         placeholder='Placeholder Text'
@@ -98,42 +100,43 @@ storiesOf('Input', module)
         error='This field is required'
         iconLeft='warning'
       />
-    ))
+    ),
+    { info: 'Input control with error message and icon' }
   )
   .add(
     'Disabled',
-    withInfo('Input control with disabled status')(() => (
-      <Input label='Input Label' placeholder='Placeholder Text' disabled />
-    ))
+    () => <Input label='Input Label' placeholder='Placeholder Text' disabled />,
+    { info: 'Input control with disabled status' }
   )
   .add(
     'Read only',
-    withInfo('Input control with readOnly status')(() => (
-      <Input label='Input Label' value='Read Only' readOnly />
-    ))
+    () => <Input label='Input Label' value='Read Only' readOnly />,
+    { info: 'Input control with readOnly status' }
   )
   .add(
     'Read only (HTML)',
-    withInfo(
-      'Input control with readOnly status (passsed to HTML <input> element)'
-    )(() => <Input label='Input Label' value='Read Only' htmlReadOnly />)
+    () => <Input label='Input Label' value='Read Only' htmlReadOnly />,
+
+    {
+      info:
+        'Input control with readOnly status (passsed to HTML <input> element)',
+    }
   )
   .add(
     'With fixed text',
-    withInfo('Input control with fixed text to the left and right')(() => (
+    () => (
       <Input
         label='Input Label'
         placeholder='Placeholder Text'
         addonLeft='$'
         addonRight='%'
       />
-    ))
+    ),
+    { info: 'Input control with fixed text to the left and right' }
   )
   .add(
     'Read only with fixed text',
-    withInfo(
-      'Input control with fixed text to the left and right and readOnly status'
-    )(() => (
+    () => (
       <Input
         label='Input Label'
         value='Read Only'
@@ -141,5 +144,9 @@ storiesOf('Input', module)
         addonRight='%'
         readOnly
       />
-    ))
+    ),
+    {
+      info:
+        'Input control with fixed text to the left and right and readOnly status',
+    }
   );
diff --git a/stories/LookupStories.js b/stories/LookupStories.js
index 87c584548..92c3d47aa 100644
--- a/stories/LookupStories.js
+++ b/stories/LookupStories.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { PropTypes } from 'prop-types';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text, boolean, object } from '@storybook/addon-knobs';
 import { Button, Lookup } from '../src/scripts';
 import COMPANIES from './data/COMPANIES';
@@ -21,7 +20,6 @@ const COMPANY_DATA = COMPANIES.map((label, i) => ({
   meta: '(888)000-0000 / 1234 XXX Ave, BBB City, CA, 90210 USA',
   scope: 'Account',
 }));
-
 const OPP_DATA = COMPANIES.map((label, i) => ({
   icon: 'standard:opportunity',
   label: `${label} - ${OPPORTUNITIES[i % OPPORTUNITIES.length]}`,
@@ -169,7 +167,7 @@ class LookupControlled extends React.Component {
 storiesOf('Lookup', module)
   .add(
     'Controlled with knobs',
-    withInfo('Lookup controlled with knobs')(() => (
+    () => (
       <Lookup
         label={text('label', 'Lookup Label')}
         error={text('error')}
@@ -185,11 +183,12 @@ storiesOf('Lookup', module)
         onBlur={action('blur')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Lookup controlled with knobs' }
   )
   .add(
     'With search text',
-    withInfo('Lookup component with search input text')(() => (
+    () => (
       <Lookup
         label='Lookup Label'
         searchText='A'
@@ -199,28 +198,28 @@ storiesOf('Lookup', module)
         onBlur={action('blur')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Lookup component with search input text' }
   )
   .add(
     'With search icon in left',
-    withInfo('Lookup component with search text and search icon in left side')(
-      () => (
-        <Lookup
-          label='Lookup Label'
-          searchText='A'
-          iconAlign='left'
-          onSearchTextChange={action('searchTextChange')}
-          onLookupRequest={action('lookupRequest')}
-          onSelect={action('select')}
-          onBlur={action('blur')}
-          onComplete={action('complete')}
-        />
-      )
-    )
+    () => (
+      <Lookup
+        label='Lookup Label'
+        searchText='A'
+        iconAlign='left'
+        onSearchTextChange={action('searchTextChange')}
+        onLookupRequest={action('lookupRequest')}
+        onSelect={action('select')}
+        onBlur={action('blur')}
+        onComplete={action('complete')}
+      />
+    ),
+    { info: 'Lookup component with search text and search icon in left side' }
   )
   .add(
     'With selection',
-    withInfo('Lookup component with item selected')(() => (
+    () => (
       <Lookup
         label='Lookup Label'
         selected={COMPANY_DATA[0]}
@@ -230,11 +229,12 @@ storiesOf('Lookup', module)
         onBlur={action('blur')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Lookup component with item selected' }
   )
   .add(
     'In Loading',
-    withInfo('Lookup component in loading candidates')(() => (
+    () => (
       <Lookup
         label='Lookup Label'
         searchText='A'
@@ -246,11 +246,12 @@ storiesOf('Lookup', module)
         onBlur={action('blur')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Lookup component in loading candidates' }
   )
   .add(
     'Active',
-    withInfo('Lookup component with candidates in dropdown')(() => (
+    () => (
       <div style={{ height: 350 }}>
         <Lookup
           label='Lookup Label'
@@ -265,13 +266,12 @@ storiesOf('Lookup', module)
           onComplete={action('complete')}
         />
       </div>
-    ))
+    ),
+    { info: 'Lookup component with candidates in dropdown' }
   )
   .add(
     'With list header/footer',
-    withInfo(
-      'Lookup component with header/footer component in the candidate list'
-    )(() => (
+    () => (
       <div style={{ height: 420 }}>
         <Lookup
           label='Lookup Label'
@@ -296,13 +296,15 @@ storiesOf('Lookup', module)
           onComplete={action('complete')}
         />
       </div>
-    ))
+    ),
+    {
+      info:
+        'Lookup component with header/footer component in the candidate list',
+    }
   )
   .add(
     'Multi Scope',
-    withInfo(
-      'Lookup component which allows multiples scopes to select as lookup datasource'
-    )(() => (
+    () => (
       <Lookup
         label='Lookup (multiple scope)'
         opened={false}
@@ -317,13 +319,15 @@ storiesOf('Lookup', module)
         onBlur={action('blur')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    {
+      info:
+        'Lookup component which allows multiples scopes to select as lookup datasource',
+    }
   )
   .add(
     'Multi Scope - Disabled',
-    withInfo(
-      'Lookup component which allows multiples scopes selection, but in disabled status'
-    )(() => (
+    () => (
       <Lookup
         label='Lookup (multiple scope, disabled)'
         opened={false}
@@ -338,11 +342,15 @@ storiesOf('Lookup', module)
         onBlur={action('blur')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    {
+      info:
+        'Lookup component which allows multiples scopes selection, but in disabled status',
+    }
   )
   .add(
     'Controlled',
-    withInfo('Lookup component whose state is controlled from outside')(() => (
+    () => (
       <LookupControlled
         label='Lookup (Controlled)'
         onSearchTextChange={action('searchTextChange')}
@@ -350,32 +358,32 @@ storiesOf('Lookup', module)
         onSelect={action('select')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    { info: 'Lookup component whose state is controlled from outside' }
   )
   .add(
     'Uncontrolled',
-    withInfo('Lookup component whose state is managed inside of the component')(
-      () => (
-        <Lookup
-          label='Lookup (Uncontrolled)'
-          defaultSearchText='A'
-          data={COMPANY_DATA}
-          lookupFilter={(entry, searchText) =>
-            entry.label.toUpperCase().indexOf(searchText.toUpperCase()) === 0
-          }
-          onSearchTextChange={action('searchTextChange')}
-          onLookupRequest={action('lookupRequest')}
-          onSelect={action('select')}
-          onComplete={action('complete')}
-        />
-      )
-    )
+
+    () => (
+      <Lookup
+        label='Lookup (Uncontrolled)'
+        defaultSearchText='A'
+        data={COMPANY_DATA}
+        lookupFilter={(entry, searchText) =>
+          entry.label.toUpperCase().indexOf(searchText.toUpperCase()) === 0
+        }
+        onSearchTextChange={action('searchTextChange')}
+        onLookupRequest={action('lookupRequest')}
+        onSelect={action('select')}
+        onComplete={action('complete')}
+      />
+    ),
+
+    { info: 'Lookup component whose state is managed inside of the component' }
   )
   .add(
     'Controlled with Multi Scope',
-    withInfo(
-      'Lookup component whose state is controlled from outside, search scope is selectable from multiple scope'
-    )(() => (
+    () => (
       <LookupControlled
         label='Lookup (Controlled, Multi Scope)'
         scopes={LOOKUP_SCOPES}
@@ -386,13 +394,15 @@ storiesOf('Lookup', module)
         onSelect={action('select')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    {
+      info:
+        'Lookup component whose state is controlled from outside, search scope is selectable from multiple scope',
+    }
   )
   .add(
     'Uncontrolled with Multi Scope',
-    withInfo(
-      'Lookup component whose state is managed inside of the component, search scope is selectable from multiple scope'
-    )(() => (
+    () => (
       <Lookup
         label='Lookup (Uncontrolled, Multi Scope)'
         scopes={LOOKUP_SCOPES}
@@ -410,5 +420,9 @@ storiesOf('Lookup', module)
         onSelect={action('select')}
         onComplete={action('complete')}
       />
-    ))
+    ),
+    {
+      info:
+        'Lookup component whose state is managed inside of the component, search scope is selectable from multiple scope',
+    }
   );
diff --git a/stories/MediaObjectStories.js b/stories/MediaObjectStories.js
index e83ad566a..502a12f25 100644
--- a/stories/MediaObjectStories.js
+++ b/stories/MediaObjectStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { MediaObject, util } from '../src/scripts';
 
 const image1 = (
@@ -25,25 +24,28 @@ Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
 storiesOf('MediaObject', module)
   .add(
     'Figure',
-    withInfo('Media Object with figure in left')(() => (
+    () => (
       <MediaObject figureLeft={image1}>
         <p>{mediaText}</p>
       </MediaObject>
-    ))
+    ),
+    { info: 'Media Object with figure in left' }
   )
   .add(
     'Figure - Reverse',
-    withInfo('Media Object with figure in right')(() => (
+    () => (
       <MediaObject figureRight={image2}>
         <p>{mediaText}</p>
       </MediaObject>
-    ))
+    ),
+    { info: 'Media Object with figure in right' }
   )
   .add(
     'Figure - Both Side',
-    withInfo('Media Object with figure in left and right')(() => (
+    () => (
       <MediaObject figureLeft={image1} figureRight={image2}>
         <p>{mediaText}</p>
       </MediaObject>
-    ))
+    ),
+    { info: 'Media Object with figure in left and right' }
   );
diff --git a/stories/ModalStories.js b/stories/ModalStories.js
index ac2ef0d33..dc033f528 100644
--- a/stories/ModalStories.js
+++ b/stories/ModalStories.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, select, boolean } from '@storybook/addon-knobs';
 import {
   Modal,
@@ -27,10 +26,7 @@ const LOOKUP_DATA = [
 storiesOf('Modal', module)
   .add(
     'Controlled with knobs',
-    withInfo({
-      text: 'Modal controlled with knobs',
-      inline: false,
-    })(() => (
+    () => (
       <Modal
         opened={boolean('opened', true)}
         size={select('size', { '': '(none)', large: 'large' })}
@@ -73,14 +69,17 @@ storiesOf('Modal', module)
           []
         )}
       </Modal>
-    ))
+    ),
+    {
+      info: {
+        text: 'Modal controlled with knobs',
+        inline: false,
+      },
+    }
   )
   .add(
     'Default',
-    withInfo({
-      text: 'Default size modal dialog',
-      inline: false,
-    })(() => (
+    () => (
       <Modal opened onHide={action('hide')}>
         <Header title='Default Modal' closeButton />
         <Content className='slds-p-around--small'>
@@ -106,14 +105,17 @@ storiesOf('Modal', module)
           <Button type='brand' label='Done' />
         </Footer>
       </Modal>
-    ))
+    ),
+    {
+      info: {
+        text: 'Default size modal dialog',
+        inline: false,
+      },
+    }
   )
   .add(
     'Large',
-    withInfo({
-      text: 'Large size modal dialog',
-      inline: false,
-    })(() => (
+    () => (
       <Modal opened size='large' onHide={action('hide')}>
         <Header title='Large Size Modal' closeButton />
         <Content className='slds-p-around--small'>
@@ -139,14 +141,17 @@ storiesOf('Modal', module)
           <Button type='brand' label='Done' />
         </Footer>
       </Modal>
-    ))
+    ),
+    {
+      info: {
+        text: 'Large size modal dialog',
+        inline: false,
+      },
+    }
   )
   .add(
     'Form elements',
-    withInfo({
-      text: 'Modal with form elements in the content',
-      inline: false,
-    })(() => (
+    () => (
       <Modal opened onHide={action('hide')}>
         <Header title='Modal Form' closeButton />
         <Content className='slds-p-around--small'>
@@ -189,5 +194,11 @@ storiesOf('Modal', module)
           <Button type='brand' label='Done' />
         </Footer>
       </Modal>
-    ))
+    ),
+    {
+      info: {
+        text: 'Modal with form elements in the content',
+        inline: false,
+      },
+    }
   );
diff --git a/stories/NotificationStories.js b/stories/NotificationStories.js
index 59a4bdbe0..6536e5565 100644
--- a/stories/NotificationStories.js
+++ b/stories/NotificationStories.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { select, text, boolean } from '@storybook/addon-knobs';
 import { Notification, Alert, Toast } from '../src/scripts';
 
 storiesOf('Notification', module)
   .add(
     'Controlled with knobs',
-    withInfo('Notification controlled with knobs')(() => {
+    () => {
       const typeOptions = {
         alert: 'alert',
         toast: 'toast',
@@ -46,71 +45,77 @@ storiesOf('Notification', module)
           {notificationText}
         </Notification>
       );
-    })
+    },
+
+    { info: 'Notification controlled with knobs' }
   )
   .add(
     'Alert - Default',
-    withInfo('Default Alert')(() => (
-      <Alert>This is default alert without close.</Alert>
-    ))
+    () => <Alert>This is default alert without close.</Alert>,
+    { info: 'Default Alert' }
   )
   .add(
     'Alert - Info',
-    withInfo('Alert with info message and close button')(() => (
+    () => (
       <Alert icon='info' level='info' onClose={action('close')}>
         This is <strong>info</strong> alert with icon and close button.
       </Alert>
-    ))
+    ),
+    { info: 'Alert with info message and close button' }
   )
   .add(
     'Alert - Success',
-    withInfo('Alert with success message and close button')(() => (
+    () => (
       <Alert icon='custom:custom19' level='success' onClose={action('close')}>
         This is <strong>success</strong> alert with icon and close button.
       </Alert>
-    ))
+    ),
+    { info: 'Alert with success message and close button' }
   )
   .add(
     'Alert - Warning',
-    withInfo('Alert with warning message and close button')(() => (
+    () => (
       <Alert icon='warning' level='warning' onClose={action('close')}>
         This is <strong>warning</strong> alert with icon and close button.
       </Alert>
-    ))
+    ),
+    { info: 'Alert with warning message and close button' }
   )
   .add(
     'Alert - Error',
-    withInfo('Alert with error message and close button')(() => (
+    () => (
       <Alert icon='ban' level='error' onClose={action('close')}>
         This is <strong>error</strong> alert with icon and close button.
       </Alert>
-    ))
+    ),
+    { info: 'Alert with error message and close button' }
   )
   .add(
     'Toast - Default',
-    withInfo('Default Toast')(() => (
-      <Toast>This is default toast without close.</Toast>
-    ))
+    () => <Toast>This is default toast without close.</Toast>,
+    { info: 'Default Toast' }
   )
   .add(
     'Toast - Info',
-    withInfo('Toast with info message and close button')(() => (
+    () => (
       <Toast icon='info' level='success' onClose={action('close')}>
         This is <strong>success</strong> toast with icon and close button.
       </Toast>
-    ))
+    ),
+    { info: 'Toast with info message and close button' }
   )
   .add(
     'Toast - Success',
-    withInfo('Toast with success message and close button')(() => (
+    () => (
       <Toast icon='notification' level='success' onClose={action('close')}>
         This is <strong>success</strong> toast with icon and close button.
       </Toast>
-    ))
+    ),
+    { info: 'Toast with success message and close button' }
   )
   .add(
     'Toast - Warning',
-    withInfo('Toast with warning message and close button')(() => (
+    () => (
       <Toast
         icon='warning'
         level='warning'
@@ -119,11 +124,12 @@ storiesOf('Notification', module)
       >
         This is <strong>warning</strong> toast with icon and close button.
       </Toast>
-    ))
+    ),
+    { info: 'Toast with warning message and close button' }
   )
   .add(
     'Toast - Error',
-    withInfo('Toast with error message and close button')(() => (
+    () => (
       <Toast
         icon='warning'
         level='error'
@@ -132,5 +138,6 @@ storiesOf('Notification', module)
       >
         This is <strong>error</strong> toast with icon and close button.
       </Toast>
-    ))
+    ),
+    { info: 'Toast with error message and close button' }
   );
diff --git a/stories/PageHeaderStories.js b/stories/PageHeaderStories.js
index 95606bb67..3bf271649 100644
--- a/stories/PageHeaderStories.js
+++ b/stories/PageHeaderStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import {
   PageHeader,
   PageHeaderHeading,
@@ -22,7 +21,7 @@ import {
 storiesOf('PageHeader', module)
   .add(
     'Base',
-    withInfo('Default Page Header')(() => (
+    () => (
       <PageHeader>
         <PageHeaderHeading
           title='Rohde Corp - 80,000 Widgets'
@@ -30,11 +29,12 @@ storiesOf('PageHeader', module)
           figure={<Icon category='standard' icon='opportunity' />}
         />
       </PageHeader>
-    ))
+    ),
+    { info: 'Default Page Header' }
   )
   .add(
     'Record Home',
-    withInfo('Page Header of Record Home')(() => (
+    () => (
       <PageHeader>
         <PageHeaderHeading
           legend='RECORD TYPE'
@@ -94,11 +94,12 @@ storiesOf('PageHeader', module)
           </PageHeaderDetailItem>
         </PageHeaderDetail>
       </PageHeader>
-    ))
+    ),
+    { info: 'Page Header of Record Home' }
   )
   .add(
     'Object Home',
-    withInfo('Page Header of Object Home')(() => (
+    () => (
       <PageHeader>
         <PageHeaderHeading
           legend='LEADS'
@@ -161,11 +162,12 @@ storiesOf('PageHeader', module)
           ]}
         />
       </PageHeader>
-    ))
+    ),
+    { info: 'Page Header of Object Home' }
   )
   .add(
     'Related List',
-    withInfo('Page Header of Related List')(() => (
+    () => (
       <PageHeader>
         <PageHeaderHeading
           breadCrumbs={[
@@ -209,5 +211,6 @@ storiesOf('PageHeader', module)
           ]}
         />
       </PageHeader>
-    ))
+    ),
+    { info: 'Page Header of Related List' }
   );
diff --git a/stories/PicklistStories.js b/stories/PicklistStories.js
index 4ad9b8c3d..d6d8e59ad 100644
--- a/stories/PicklistStories.js
+++ b/stories/PicklistStories.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text, boolean } from '@storybook/addon-knobs';
 import { Picklist, PicklistItem } from '../src/scripts';
 
 storiesOf('Picklist', module)
   .add(
     'Controlled with knobs',
-    withInfo('Picklist controlled with knobs')(() => (
+    () => (
       <Picklist
         label={text('label', 'Picklist Label')}
         error={text('error')}
@@ -39,11 +38,12 @@ storiesOf('Picklist', module)
           disabled={boolean('disabled #3')}
         />
       </Picklist>
-    ))
+    ),
+    { info: 'Picklist controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default Picklist control')(() => (
+    () => (
       <Picklist
         label='Picklist Label'
         selectedText='Select item from here'
@@ -55,11 +55,12 @@ storiesOf('Picklist', module)
         <PicklistItem label='Picklist Item Two' value='2' key='2' />
         <PicklistItem label='Picklist Item Three' value='3' key='3' />
       </Picklist>
-    ))
+    ),
+    { info: 'Default Picklist control' }
   )
   .add(
     'Required',
-    withInfo('Picklist control with required attribute')(() => (
+    () => (
       <Picklist
         label='Picklist Label'
         required
@@ -71,11 +72,12 @@ storiesOf('Picklist', module)
         <PicklistItem label='Picklist Item Two' value='2' key='2' />
         <PicklistItem label='Picklist Item Three' value='3' key='3' />
       </Picklist>
-    ))
+    ),
+    { info: 'Picklist control with required attribute' }
   )
   .add(
     'Error',
-    withInfo('Picklist control with error message')(() => (
+    () => (
       <Picklist
         label='Picklist Label'
         required
@@ -88,11 +90,12 @@ storiesOf('Picklist', module)
         <PicklistItem label='Picklist Item Two' value='2' key='2' />
         <PicklistItem label='Picklist Item Three' value='3' key='3' />
       </Picklist>
-    ))
+    ),
+    { info: 'Picklist control with error message' }
   )
   .add(
     'Disabled',
-    withInfo('Picklist with disabled items')(() => (
+    () => (
       <Picklist
         label='Picklist Label'
         onChange={action('change')}
@@ -103,11 +106,12 @@ storiesOf('Picklist', module)
         <PicklistItem label='Picklist Item Two' value='2' key='2' disabled />
         <PicklistItem label='Picklist Item Three' value='3' key='3' disabled />
       </Picklist>
-    ))
+    ),
+    { info: 'Picklist with disabled items' }
   )
   .add(
     'Single item selected',
-    withInfo('Picklist with a single item value is specified')(() => (
+    () => (
       <Picklist
         label='Picklist Label'
         value='1'
@@ -119,11 +123,12 @@ storiesOf('Picklist', module)
         <PicklistItem label='Picklist Item Two' value='2' key='2' />
         <PicklistItem label='Picklist Item Three' value='3' key='3' />
       </Picklist>
-    ))
+    ),
+    { info: 'Picklist with a single item value is specified' }
   )
   .add(
     'Multiple items selected',
-    withInfo('Picklist with multiple item values are specified')(() => (
+    () => (
       <Picklist
         label='Picklist Label'
         value={['1', '3']}
@@ -137,11 +142,12 @@ storiesOf('Picklist', module)
         <PicklistItem label='Picklist Item Two' value='2' key='2' />
         <PicklistItem label='Picklist Item Three' value='3' key='3' />
       </Picklist>
-    ))
+    ),
+    { info: 'Picklist with multiple item values are specified' }
   )
   .add(
     'Dropdown Scroll',
-    withInfo('Picklist control with many items')(() => (
+    () => (
       <div tabIndex='-1'>
         <Picklist
           label='Picklist Label'
@@ -163,5 +169,6 @@ storiesOf('Picklist', module)
           ))}
         </Picklist>
       </div>
-    ))
+    ),
+    { info: 'Picklist control with many items' }
   );
diff --git a/stories/PopoverStories.js b/stories/PopoverStories.js
index dd71dd1a7..f59cd3a79 100644
--- a/stories/PopoverStories.js
+++ b/stories/PopoverStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { select, boolean } from '@storybook/addon-knobs';
 import { Popover } from '../src/scripts';
 
@@ -12,7 +11,7 @@ ea corrupti odit minima?
 storiesOf('Popover', module)
   .add(
     'Controlled with knobs',
-    withInfo('Popover controlled with knobs')(() => {
+    () => {
       const positionOptions = {
         '': '(none)',
         left: 'left',
@@ -49,149 +48,168 @@ storiesOf('Popover', module)
           <p>{popoverText}</p>
         </Popover>
       );
-    })
+    },
+    { info: 'Popover controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default Popover')(() => (
+    () => (
       <Popover hidden={false} position='left'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Default Popover' }
   )
   .add(
     'Theme - Info',
-    withInfo('Popover with info theme')(() => (
+    () => (
       <Popover hidden={false} theme='info' position='left'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with info theme' }
   )
   .add(
     'Theme - Error',
-    withInfo('Popover with error theme')(() => (
+    () => (
       <Popover hidden={false} theme='error' position='left'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with error theme' }
   )
   .add(
     'Theme - Warning',
-    withInfo('Popover with warning theme')(() => (
+    () => (
       <Popover hidden={false} theme='warning' position='left'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with warning theme' }
   )
   .add(
     'Theme - Success',
-    withInfo('Popover with success theme')(() => (
+    () => (
       <Popover hidden={false} theme='success' position='left'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with success theme' }
   )
   .add(
     'Position - Left',
-    withInfo('Popover with nubbin in left position')(() => (
+    () => (
       <Popover hidden={false} position='left'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in left position' }
   )
   .add(
     'Position - Left (top)',
-    withInfo('Popover with nubbin in left-top position')(() => (
+    () => (
       <Popover hidden={false} position='left-top'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in left-top position' }
   )
   .add(
     'Position - Left (bottom)',
-    withInfo('Popover with nubbin in left-bottom position')(() => (
+    () => (
       <Popover hidden={false} position='left-bottom'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in left-bottom position' }
   )
   .add(
     'Position - Top',
-    withInfo('Popover with nubbin in top position')(() => (
+    () => (
       <Popover hidden={false} position='top'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in top position' }
   )
   .add(
     'Position - Top (left)',
-    withInfo('Popover with nubbin in top-left position')(() => (
+    () => (
       <Popover hidden={false} position='top-left'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in top-left position' }
   )
   .add(
     'Position - Top (right)',
-    withInfo('Popover with nubbin in top-right position')(() => (
+    () => (
       <Popover hidden={false} position='top-right'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in top-right position' }
   )
   .add(
     'Position - Right',
-    withInfo('Popover with nubbin in right position')(() => (
+    () => (
       <Popover hidden={false} position='right'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in right position' }
   )
   .add(
     'Position - Right (top)',
-    withInfo('Popover with nubbin in right-top position')(() => (
+    () => (
       <Popover hidden={false} position='right-top'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in right-top position' }
   )
   .add(
     'Position - Right (bottom)',
-    withInfo('Popover with nubbin in right-bottom position')(() => (
+    () => (
       <Popover hidden={false} position='right-bottom'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in right-bottom position' }
   )
   .add(
     'Position - Bottom',
-    withInfo('Popover with nubbin in bottom position')(() => (
+    () => (
       <Popover hidden={false} position='bottom'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in bottom position' }
   )
   .add(
     'Position - Bottom (left)',
-    withInfo('Popover with nubbin in bottom-left position')(() => (
+    () => (
       <Popover hidden={false} position='bottom-left'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in bottom-left position' }
   )
   .add(
     'Position - Bottom (right)',
-    withInfo('Popover with nubbin in bottom-right position')(() => (
+    () => (
       <Popover hidden={false} position='bottom-right'>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with nubbin in bottom-right position' }
   )
   .add(
     'Tooltip',
-    withInfo('Popover with tooltip styling')(() => (
+    () => (
       <Popover hidden={false} position='bottom-left' tooltip>
         <p>{popoverText}</p>
       </Popover>
-    ))
+    ),
+    { info: 'Popover with tooltip styling' }
   );
diff --git a/stories/RadioStories.js b/stories/RadioStories.js
index cc7cd5388..ac6eed05a 100644
--- a/stories/RadioStories.js
+++ b/stories/RadioStories.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withInfo } from '@storybook/addon-info';
 import { text, boolean } from '@storybook/addon-knobs';
 import { RadioGroup, Radio } from '../src/scripts';
 
 storiesOf('Radio', module)
   .add(
     'Controlled with knobs',
-    withInfo('Radio Group controlled with knobs')(() => (
+    () => (
       <RadioGroup
         label={text('label', 'Radio Group Label')}
         error={text('error')}
@@ -28,29 +27,32 @@ storiesOf('Radio', module)
           checked={text('value') === '2'}
         />
       </RadioGroup>
-    ))
+    ),
+    { info: 'Radio Group controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default Radio Group control')(() => (
+    () => (
       <RadioGroup label='Radio Group Label'>
         <Radio label='Radio Label One' value='1' checked />
         <Radio label='Radio Label Two' value='2' />
       </RadioGroup>
-    ))
+    ),
+    { info: 'Default Radio Group control' }
   )
   .add(
     'Required',
-    withInfo('Radio Group control with required attribute')(() => (
+    () => (
       <RadioGroup label='Radio Group Label' required>
         <Radio label='Radio Label One' value='1' checked />
         <Radio label='Radio Label Two' value='2' />
       </RadioGroup>
-    ))
+    ),
+    { info: 'Radio Group control with required attribute' }
   )
   .add(
     'Error',
-    withInfo('Radio Group control with error message')(() => (
+    () => (
       <RadioGroup
         label='Radio Group Label'
         required
@@ -59,14 +61,16 @@ storiesOf('Radio', module)
         <Radio label='Radio Label One' value='1' checked />
         <Radio label='Radio Label Two' value='2' />
       </RadioGroup>
-    ))
+    ),
+    { info: 'Radio Group control with error message' }
   )
   .add(
     'Disabled',
-    withInfo('Radio Group control with disabled status')(() => (
+    () => (
       <RadioGroup label='Radio Group Label'>
         <Radio label='Radio Label One' value='1' disabled />
         <Radio label='Radio Label Two' value='2' disabled />
       </RadioGroup>
-    ))
+    ),
+    { info: 'Radio Group control with disabled status' }
   );
diff --git a/stories/SelectStories.js b/stories/SelectStories.js
index d4888c203..c027af4c9 100644
--- a/stories/SelectStories.js
+++ b/stories/SelectStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import { Select, Option } from '../src/scripts';
@@ -8,7 +7,7 @@ import { Select, Option } from '../src/scripts';
 storiesOf('Select', module)
   .add(
     'Controlled with knobs',
-    withInfo('Select controlled with knobs')(() => (
+    () => (
       <Select
         label={text('label', 'Select Label')}
         error={text('error')}
@@ -22,11 +21,12 @@ storiesOf('Select', module)
         <Option label='Option Two' value='2' />
         <Option label='Option Three' value='3' />
       </Select>
-    ))
+    ),
+    { info: 'Select controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default Select control')(() => (
+    () => (
       <Select
         label='Select Label'
         onChange={action('change')}
@@ -36,11 +36,12 @@ storiesOf('Select', module)
         <Option label='Option Two' value='2' />
         <Option label='Option Three' value='3' />
       </Select>
-    ))
+    ),
+    { info: 'Default Select control' }
   )
   .add(
     'Required',
-    withInfo('Select control with required attribute')(() => (
+    () => (
       <Select
         label='Select Label'
         required
@@ -51,11 +52,12 @@ storiesOf('Select', module)
         <Option label='Option Two' value='2' />
         <Option label='Option Three' value='3' />
       </Select>
-    ))
+    ),
+    { info: 'Select control with required attribute' }
   )
   .add(
     'Error',
-    withInfo('Select control with error message')(() => (
+    () => (
       <Select
         label='Select Label'
         required
@@ -67,11 +69,12 @@ storiesOf('Select', module)
         <Option label='Option Two' value='2' />
         <Option label='Option Three' value='3' />
       </Select>
-    ))
+    ),
+    { info: 'Select control with error message' }
   )
   .add(
     'Disabled',
-    withInfo('Select control with disabled status')(() => (
+    () => (
       <Select
         label='Select Label'
         disabled
@@ -82,5 +85,6 @@ storiesOf('Select', module)
         <Option label='Option Two' value='2' />
         <Option label='Option Three' value='3' />
       </Select>
-    ))
+    ),
+    { info: 'Select control with disabled status' }
   );
diff --git a/stories/SpinnerStories.js b/stories/SpinnerStories.js
index debb3c9bb..ffde9c735 100644
--- a/stories/SpinnerStories.js
+++ b/stories/SpinnerStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { select } from '@storybook/addon-knobs';
 import { Spinner } from '../src/scripts';
 
@@ -17,7 +16,7 @@ const inverseContainerStyle = Object.assign({}, containerStyle, {
 storiesOf('Spinner', module)
   .add(
     'Controlled with knobs',
-    withInfo('Spinner with knobs')(() => {
+    () => {
       const sizeOptions = {
         '': '(none)',
         small: 'small',
@@ -38,59 +37,57 @@ storiesOf('Spinner', module)
           <Spinner size={size} type={type} />
         </div>
       );
-    })
+    },
+    { info: 'Spinner with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default spinner with different sizes (small, medium, large)')(
-      () => (
-        <div>
-          <div style={containerStyle}>
-            <Spinner size='small' />
-          </div>
-          <div style={containerStyle}>
-            <Spinner size='medium' />
-          </div>
-          <div style={containerStyle}>
-            <Spinner size='large' />
-          </div>
+    () => (
+      <div>
+        <div style={containerStyle}>
+          <Spinner size='small' />
         </div>
-      )
-    )
+        <div style={containerStyle}>
+          <Spinner size='medium' />
+        </div>
+        <div style={containerStyle}>
+          <Spinner size='large' />
+        </div>
+      </div>
+    ),
+    { info: 'Default spinner with different sizes (small, medium, large)' }
   )
   .add(
     'Brand',
-    withInfo('Brand spinner with different sizes (small, medium, large)')(
-      () => (
-        <div>
-          <div style={containerStyle}>
-            <Spinner type='brand' size='small' />
-          </div>
-          <div style={containerStyle}>
-            <Spinner type='brand' size='medium' />
-          </div>
-          <div style={containerStyle}>
-            <Spinner type='brand' size='large' />
-          </div>
+    () => (
+      <div>
+        <div style={containerStyle}>
+          <Spinner type='brand' size='small' />
+        </div>
+        <div style={containerStyle}>
+          <Spinner type='brand' size='medium' />
         </div>
-      )
-    )
+        <div style={containerStyle}>
+          <Spinner type='brand' size='large' />
+        </div>
+      </div>
+    ),
+    { info: 'Brand spinner with different sizes (small, medium, large)' }
   )
   .add(
     'Inverse',
-    withInfo('Inverse spinner with different sizes (small, medium, large)')(
-      () => (
-        <div>
-          <div style={inverseContainerStyle}>
-            <Spinner type='inverse' size='small' />
-          </div>
-          <div style={inverseContainerStyle}>
-            <Spinner type='inverse' size='medium' />
-          </div>
-          <div style={inverseContainerStyle}>
-            <Spinner type='inverse' size='large' />
-          </div>
+    () => (
+      <div>
+        <div style={inverseContainerStyle}>
+          <Spinner type='inverse' size='small' />
+        </div>
+        <div style={inverseContainerStyle}>
+          <Spinner type='inverse' size='medium' />
+        </div>
+        <div style={inverseContainerStyle}>
+          <Spinner type='inverse' size='large' />
         </div>
-      )
-    )
+      </div>
+    ),
+    { info: 'Inverse spinner with different sizes (small, medium, large)' }
   );
diff --git a/stories/TableStories.js b/stories/TableStories.js
index 1740e2ac3..9c4648291 100644
--- a/stories/TableStories.js
+++ b/stories/TableStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { boolean } from '@storybook/addon-knobs';
 import {
   Table,
@@ -34,7 +33,7 @@ const records = new Array(6)
 storiesOf('Table', module)
   .add(
     'Controlled with knobs',
-    withInfo('Table controlled with knobs')(() => {
+    () => {
       const bordered = boolean('bordered');
       const sortable = boolean('sortable');
       const striped = boolean('striped');
@@ -83,11 +82,12 @@ storiesOf('Table', module)
           </TableBody>
         </Table>
       );
-    })
+    },
+    { info: 'Table controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default Table component')(() => (
+    () => (
       <Table bordered>
         <TableHeader>
           <TableRow>
@@ -106,11 +106,12 @@ storiesOf('Table', module)
           ))}
         </TableBody>
       </Table>
-    ))
+    ),
+    { info: 'Default Table component' }
   )
   .add(
     'With Striped Row',
-    withInfo('Table component with striped row')(() => (
+    () => (
       <Table bordered striped>
         <TableHeader>
           <TableRow>
@@ -129,11 +130,12 @@ storiesOf('Table', module)
           ))}
         </TableBody>
       </Table>
-    ))
+    ),
+    { info: 'Table component with striped row' }
   )
   .add(
     'With No Row Hover',
-    withInfo('Table component with row hovering highlight is disabled')(() => (
+    () => (
       <Table bordered noRowHover>
         <TableHeader>
           <TableRow>
@@ -152,11 +154,12 @@ storiesOf('Table', module)
           ))}
         </TableBody>
       </Table>
-    ))
+    ),
+    { info: 'Table component with row hovering highlight is disabled' }
   )
   .add(
     'With Vertical Borders',
-    withInfo('Table component with vertical borders enabled')(() => (
+    () => (
       <Table bordered verticalBorders>
         <TableHeader>
           <TableRow>
@@ -175,11 +178,12 @@ storiesOf('Table', module)
           ))}
         </TableBody>
       </Table>
-    ))
+    ),
+    { info: 'Table component with vertical borders enabled' }
   )
   .add(
     'With Fixed Layout',
-    withInfo('Table component with fixed layout')(() => (
+    () => (
       <Table bordered fixedLayout>
         <TableHeader>
           <TableRow>
@@ -198,13 +202,12 @@ storiesOf('Table', module)
           ))}
         </TableBody>
       </Table>
-    ))
+    ),
+    { info: 'Table component with fixed layout' }
   )
   .add(
     'With Sort Enabled',
-    withInfo(
-      'Table component with sort feature enabled ("Account Name" column is disabled)'
-    )(() => (
+    () => (
       <Table bordered sortable>
         <TableHeader>
           <TableRow>
@@ -225,5 +228,9 @@ storiesOf('Table', module)
           ))}
         </TableBody>
       </Table>
-    ))
+    ),
+    {
+      info:
+        'Table component with sort feature enabled ("Account Name" column is disabled)',
+    }
   );
diff --git a/stories/TabsStories.js b/stories/TabsStories.js
index 76b249ffd..793858c37 100644
--- a/stories/TabsStories.js
+++ b/stories/TabsStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';
 import { text } from '@storybook/addon-knobs';
 import { Tabs, Tab, Icon, MenuItem } from '../src/scripts';
@@ -41,7 +40,7 @@ function CustomTabItemContent(props) {
 storiesOf('Tabs', module)
   .add(
     'Controlled with knobs',
-    withInfo('Tabs controlled with knobs')(() => (
+    () => (
       <Tabs
         type={text('type', 'default')}
         activeKey={text('activeKey')}
@@ -57,11 +56,12 @@ storiesOf('Tabs', module)
           This is in tab #3
         </Tab>
       </Tabs>
-    ))
+    ),
+    { info: 'Tabs controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default Tabs')(() => (
+    () => (
       <Tabs type='default' defaultActiveKey='1' onSelect={action('select')}>
         <Tab eventKey='1' title='Tab 1'>
           This is in tab #1
@@ -73,11 +73,12 @@ storiesOf('Tabs', module)
           This is in tab #3
         </Tab>
       </Tabs>
-    ))
+    ),
+    { info: 'Default Tabs' }
   )
   .add(
     'Scoped',
-    withInfo('Scoped Tabs')(() => (
+    () => (
       <Tabs type='scoped' defaultActiveKey='1' onSelect={action('select')}>
         <Tab eventKey='1' title='Tab 1'>
           This is in tab #1
@@ -89,11 +90,12 @@ storiesOf('Tabs', module)
           This is in tab #3
         </Tab>
       </Tabs>
-    ))
+    ),
+    { info: 'Scoped Tabs' }
   )
   .add(
     'With Dropdown (Default)',
-    withInfo('Default tabs with dropdown menu')(() => (
+    () => (
       <Tabs type='default' defaultActiveKey='1' onSelect={action('select')}>
         <Tab eventKey='1' title='Tab 1' menuItems={createMenu()}>
           This is in tab #1
@@ -105,11 +107,12 @@ storiesOf('Tabs', module)
           This is in tab #3
         </Tab>
       </Tabs>
-    ))
+    ),
+    { info: 'Default tabs with dropdown menu' }
   )
   .add(
     'With Dropdown (Scoped)',
-    withInfo('Scoped tabs with dropdown menu')(() => (
+    () => (
       <Tabs type='scoped' defaultActiveKey='1' onSelect={action('select')}>
         <Tab eventKey='1' title='Tab 1' menuItems={createMenu()}>
           This is in tab #1
@@ -121,11 +124,12 @@ storiesOf('Tabs', module)
           This is in tab #3
         </Tab>
       </Tabs>
-    ))
+    ),
+    { info: 'Scoped tabs with dropdown menu' }
   )
   .add(
     'Custom Tab Item',
-    withInfo('Tab with custom tab item content')(() => (
+    () => (
       <Tabs type='default' defaultActiveKey='1' onSelect={action('select')}>
         <Tab
           eventKey='1'
@@ -152,5 +156,6 @@ storiesOf('Tabs', module)
           This is in tab #3
         </Tab>
       </Tabs>
-    ))
+    ),
+    { info: 'Tab with custom tab item content' }
   );
diff --git a/stories/TextareaStories.js b/stories/TextareaStories.js
index da59ca9b0..e6f11b8f2 100644
--- a/stories/TextareaStories.js
+++ b/stories/TextareaStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import { Textarea } from '../src/scripts';
@@ -8,7 +7,7 @@ import { Textarea } from '../src/scripts';
 storiesOf('Textarea', module)
   .add(
     'Controlled with knobs',
-    withInfo('Textarea controlled with knobs')(() => (
+    () => (
       <Textarea
         label={text('label', 'Textarea Label')}
         error={text('error')}
@@ -20,54 +19,58 @@ storiesOf('Textarea', module)
         onChange={action('change')}
         onBlur={action('blur')}
       />
-    ))
+    ),
+    { info: 'Textarea controlled with knobs' }
   )
   .add(
     'Default',
-    withInfo('Default Textarea control')(() => (
-      <Textarea label='Textarea Label' placeholder='Placeholder Text' />
-    ))
+    () => <Textarea label='Textarea Label' placeholder='Placeholder Text' />,
+    { info: 'Default Textarea control' }
   )
   .add(
     'Required',
-    withInfo('Textarea control with required attribute')(() => (
+    () => (
       <Textarea
         label='Textarea Label'
         placeholder='Placeholder Text'
         required
       />
-    ))
+    ),
+    { info: 'Textarea control with required attribute' }
   )
   .add(
     'Error',
-    withInfo('Textarea control with error message')(() => (
+    () => (
       <Textarea
         label='Textarea Label'
         placeholder='Placeholder Text'
         required
         error='This field is required'
       />
-    ))
+    ),
+    { info: 'Textarea control with error message' }
   )
   .add(
     'Disabled',
-    withInfo('Textarea control with disabled status')(() => (
+    () => (
       <Textarea
         label='Textarea Label'
         placeholder='Placeholder Text'
         disabled
       />
-    ))
+    ),
+    { info: 'Textarea control with disabled status' }
   )
   .add(
     'Read only',
-    withInfo('Textarea control with readOnly status')(() => (
-      <Textarea label='Textarea Label' value='Read Only' readOnly />
-    ))
+    () => <Textarea label='Textarea Label' value='Read Only' readOnly />,
+    { info: 'Textarea control with readOnly status' }
   )
   .add(
     'Read only (HTML)',
-    withInfo(
-      'Textarea control with readOnly status (passsed to HTML <textarea> element)'
-    )(() => <Textarea label='Textarea Label' value='Read Only' htmlReadOnly />)
+    () => <Textarea label='Textarea Label' value='Read Only' htmlReadOnly />,
+    {
+      info:
+        'Textarea control with readOnly status (passsed to HTML <textarea> element)',
+    }
   );
diff --git a/stories/ToggleStories.js b/stories/ToggleStories.js
index 8f9944d86..8d800d7a2 100644
--- a/stories/ToggleStories.js
+++ b/stories/ToggleStories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import { Toggle } from '../src/scripts';
@@ -8,7 +7,7 @@ import { Toggle } from '../src/scripts';
 storiesOf('Toggle', module)
   .add(
     'Controlled with knobs',
-    withInfo('Toggle controlled with knobs')(() => (
+    () => (
       <Toggle
         label={text('label', 'Toggle Label')}
         required={boolean('required')}
@@ -17,21 +16,15 @@ storiesOf('Toggle', module)
         disabled={boolean('disabled')}
         onChange={action('change')}
       />
-    ))
+    ),
+    { info: 'Toggle controlled with knobs' }
   )
-  .add(
-    'Default',
-    withInfo('Toggle control')(() => <Toggle onChange={action('change')} />)
-  )
-  .add(
-    'Checked',
-    withInfo('Toggle control with checked status')(() => (
-      <Toggle checked onChange={action('change')} />
-    ))
-  )
-  .add(
-    'Disabled',
-    withInfo('Toggle control with disabled status')(() => (
-      <Toggle disabled onChange={action('change')} />
-    ))
-  );
+  .add('Default', () => <Toggle onChange={action('change')} />, {
+    info: 'Toggle control',
+  })
+  .add('Checked', () => <Toggle checked onChange={action('change')} />, {
+    info: 'Toggle control with checked status',
+  })
+  .add('Disabled', () => <Toggle disabled onChange={action('change')} />, {
+    info: 'Toggle control with disabled status',
+  });
diff --git a/stories/TreeStories.js b/stories/TreeStories.js
index 7905a1144..ca3e3adee 100644
--- a/stories/TreeStories.js
+++ b/stories/TreeStories.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import { Tree, TreeNode } from '../src/scripts';
 
 storiesOf('Tree', module).add(
   'Controlled with knobs',
-  withInfo('Tree / TreeNode controlled with knobs')(() => (
+  () => (
     <Tree
       label={text('label tree', 'Tree Example #1')}
       onNodeClick={action('nodeClick')}
@@ -67,5 +66,6 @@ storiesOf('Tree', module).add(
         leaf={boolean('leaf item #2', true)}
       />
     </Tree>
-  ))
+  ),
+  { info: 'Tree / TreeNode controlled with knobs' }
 );