How to use the @storybook/addon-info.withInfo function in @storybook/addon-info

addParameters({
  options: {
    brandName: 'ChaosKit',
    brandUrl: 'https://www.github.com/gremlin/chaoskit',
    hierarchySeparator: /\/|\./,
    hierarchyRootSeparator: /\|/,
  },
});

//
// Decorators
//

addDecorator(
  withInfo({
    header: false,
  }),
);
addDecorator(withKnobs);
addDecorator(withA11y);
addDecorator(story =&gt; <div>{story()}</div>);
addDecorator(centered);

//
// Load stories
//

const req = require.context('../src/components/', true, /\.stories\.js$/);

function loadStories() {
  req.keys().forEach(filename =&gt; req(filename));

import React from 'react';
import { configure, addDecorator, addParameters } from '@storybook/react';
import addons from '@storybook/addons';
import { withInfo } from '@storybook/addon-info';
import { configureActions } from '@storybook/addon-actions';
// import { checkA11y } from 'storybook-addon-a11y';
import {
  CARBON_CURRENT_THEME,
  CARBON_TYPE_TOKEN,
} from './addon-carbon-theme/shared';
import Container from './Container';

const customPropertyPrefix = 'cds';

addDecorator(
  withInfo({
    styles: {
      children: {
        width: '100%',
      },
    },
    maxPropStringLength: 200, // Displays the first 200 characters in the default prop string
  })
);

addParameters({
  options: {
    theme: {
      brandTitle: 'carbon components react',
      brandUrl:
        'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
    },

storiesOf('React|Info/ForwardRef', module)
  .addParameters({ framework: 'react' })
  .addDecorator(withInfo)
  .add('Displays forwarded ref components correctly', () => (
    
  ))
  .add('Uses forwardRef displayName if available', () => (
    
  ));

storiesOf('React|Info/deprecated', module)
  .addParameters({ framework: 'react' })
  .add(
    'Displays Markdown in description',
    withInfo(markdownDescription)(() => )
  );

storiesOf('React|Info/Story Source', module)
  .addParameters({ framework: 'react' })
  .addDecorator(withInfo)
  .add('One prop', () => )
  .add('Many props', () => )
  .add('Children', () => (
    <div>
      <p>Here is my nice button:</p>
      
    </div>
  ))
  .add('Array prop', () =&gt; {
    const propDefs = [
      {

const stories = storiesOf(
  `${storybookPackageName(name)}/${STORYBOOK_CATEGORY.FORMS_AND_CONTROLS}/Expand Collapse`,
  module
);
stories.addDecorator(withKnobs);
stories.addDecorator(
  defaultTemplate({
    title: 'Expand Collapse',
    documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_FORMS}expand-collapse-section/`
  })
);

stories.add(
  'ExpandCollapse',
  withInfo('This is the ExpandCollapse component.')(() => (
    <div style="{{">
      
        <p>Well done! The component takes 100% width by default and aligns the link to the left or center.</p>
        <p>And other text comes here.</p>
      
    </div>
  ))
);

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';

const iconListItemStyle = {
  float: 'left', width: '10rem', height: '5rem', padding: '1.5rem', textAlign: 'center',
};

storiesOf('Icon', module)
  .add('Controlled with knobs', withInfo('Icon controlled with knobs')(() => {
    const categoryOptions = {
      '': '(none)',
      standard: 'standard',
      custom: 'custom',
      action: 'action',
      doctype: 'doctype',
      utility: 'utility',
    };
    const category = select('category', categoryOptions, 'standard');
    const sizeOptions = {
      '': '(none)',
      'x-small': 'x-small',
      small: 'small',
      medium: 'medium',
      large: 'large',
    };

storiesOf('SurahTitle', module)
  .addDecorator(story => (
    <div style="{{">
      <style>
        {`
          body{ margin: 0px; }
          .quran__ChapterOne path {
            fill: green;
          }
          .quran__ChapterOne{ background: orange;}
        `}
      </style>
      {story()}
    </div>
  ))
  .add('default', withInfo('default')(() =&gt; ))
  .add(
    'color props',
    withInfo('color props')(() =&gt; ),
  )
  .add(
    'style props',
    withInfo('style props')(() =&gt; (
      
    )),
  )
  .add(
    'style fill via css (classname)',

import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {withInfo} from '@storybook/addon-info';

import LoadingError from 'app/components/loadingError';

storiesOf('UI|Loaders/LoadingError', module)
  .add(
    'default',
    withInfo('Loading error with default message')(() => (
      
    ))
  )
  .add(
    'custom message',
    withInfo('Loading error with custom message')(() => (
      
    ))
  );

.add('Controlled with knobs', withInfo('Select controlled with knobs')(() => (
    <select disabled="{" value="{" required="{" label="{">
      <option value="1" label="Option One">
      </option><option value="2" label="Option Two">
      </option><option value="3" label="Option Three">
    </option></select>
  )))
  .add('Default', withInfo('Default Select control')(() =&gt; (
    <select label="Select Label">
      <option value="1" label="Option One">
      </option><option value="2" label="Option Two">
      </option><option value="3" label="Option Three">
    </option></select>
  )))
  .add('Required', withInfo('Select control with required attribute')(() =&gt; (

import React from 'react';
import {storiesOf} from '@storybook/react';
import {withInfo} from '@storybook/addon-info';

import Tooltip from 'app/components/tooltip';
import Tag from 'app/views/settings/components/tag';

storiesOf('UI|Tags', module)
  .add(
    'default',
    withInfo('A basic tag-like thing. If you pass no type, it will be gray')(() => (
      Development
    ))
  )
  .add(
    'warning',
    withInfo(
      'A warning tag-like thing. Use this to signal that something is maybe not so great'
    )(() => Development)
  )
  .add(
    'success',
    withInfo('A happy tag-like thing. Use this to signal something good')(() => (
      Development
    ))
  )
  .add(

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Tabs, { Tab } from './index';

import { withInfo } from '@storybook/addon-info';

storiesOf('Tabs', module)
  .add('default', withInfo('default')(() => (
    
      Some info 1
      Some info 2
      Some info 3
    
  )))
  .add('with onClick handler', withInfo('with onClick handler')(() => (
    
      Some info 1
      Some info 2
      Some info 3
    
  )))
  .add('selected props', withInfo('selected props')(() => (
    
      Some info 1