// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`update-addon-info transforms correctly using "update-addon-info.input.js" data 1`] = `
"/* eslint-disable */
import React from 'react'
import Button from './Button'

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

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

storiesOf(
  'Button'
).add('simple usage', withInfo(
  'This is the basic usage with the button with providing a label to show the text.'
)(() => (
  <div>
    <Button label=\\"The Button\\" onClick={action('onClick')} />
    <br />
    <p>
      Click the \\"?\\" mark at top-right to view the info.
    </p>
  </div>
)))

storiesOf('Button').add('simple usage (inline info)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
    \`,

  inline: true
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))

storiesOf('Button').add('simple usage (disable source)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
    \`,

  source: false,
  inline: true
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))

storiesOf('Button').add('simple usage (no header)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
    \`,

  header: false,
  inline: true
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))

storiesOf('Button').add('simple usage (no prop tables)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
    \`,

  propTables: false,
  inline: true
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))

storiesOf('Button').add('simple usage (custom propTables)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
      Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
      So, we need to give relevant React component classes manually using \\\\\`propTypes\\\\\` option as shown below:
      ~~~js
      storiesOf('Button')
        .addWithInfo(
          'simple usage (custom propTables)',
          <info>,
          <storyFn>,
          { inline: true, propTables: [Button]}
        );
      ~~~
    \`,

  inline: true,
  propTables: [Button]
})(() => (
  <div>
    <Button label=\\"The Button\\" onClick={action('onClick')} />
    <br />
  </div>
)))

storiesOf('Button').add('simple usage (JSX description)', withInfo(<div>
  <h2>This is a JSX info section</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
    Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
    nulla.
  </p>
  <p>
    <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
      This is a link
    </a>
  </p>
  <p>
    <img src=\\"https://storybook.js.org/images/placeholders/350x150.png\\" />
  </p>
</div>)(() => (
  <div>
    <Button label=\\"The Button\\" onClick={action('onClick')} />
    <br />
    <p>
      Click the \\"?\\" mark at top-right to view the info.
    </p>
  </div>
)))

storiesOf('Button').add('simple usage (inline JSX description)', withInfo({
  text: <div>
    <h2>This is a JSX info section</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Sed ornare massa rutrum metus commodo, a mattis velit dignissim.
      Fusce vestibulum turpis sed massa egestas pharetra. Sed at libero
      nulla.
    </p>
    <p>
      <a href=\\"https://github.com/storybookjs/react-storybook-addon-info\\">
        This is a link
      </a>
    </p>
    <p>
      <img src=\\"https://storybook.js.org/images/placeholders/350x150.png\\" />
    </p>
  </div>,

  inline: true
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))

storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
    \`,

  inline: true,
  maxPropsIntoLine: 1
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))

storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
    \`,

  inline: true,
  maxPropObjectKeys: 5
})(
  () => <Button label=\\"The Button\\" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />
))

storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
    \`,

  inline: true,
  maxPropArrayLength: 8
})(
  () => <Button label=\\"The Button\\" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
))

storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
  text: \`
      This is the basic usage with the button with providing a label to show the text.
    \`,

  inline: true,
  maxPropStringLength: 5
})(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />))

storiesOf('Button').add('with custom styles', withInfo({
  text: \`
      This is an example of how to customize the styles of the info components.
      For the full styles available, see \\\\\`./src/components/Story.js\\\\\`
    \`,

  inline: true,

  styles: stylesheet => {
    stylesheet.infoPage = {
      backgroundColor: '#ccc'
    }
    return stylesheet
  }
})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />))

storiesOf('shared/ProgressBar', module)
  .addDecorator(withKnobs)
  .add('default style', withInfo('default style')(() => (
    <ProgressBar progress={number('progress', 25)}
      delay={number('delay', 500)}
    />
  )));"
`;
