
import React from 'react'
import Playground from 'component-playground'
import {Button} from '../../../'

const defaultButton =
`<button type='button'>
  Default
</button>`

const buttonComponent =
`<Button onClick={(event) => {console.log(event)}}>
  Button
</Button>`

const buttonDisabled =
`<Button onClick={() => {}} disabled>
  Disabled
</Button>`

const buttonRaised =
`<Button onClick={(event) => {console.log(event)} raised>
  Raised
</Button>`

export default class ButtonRoute extends React.Component {

  render () {
    return (
      <div>
        <section>
          <h2>Default button</h2>
          <Playground
            codeText={defaultButton}
            scope={{React, Button}}
          />
        </section>
        <section>
          <h2>Button Component</h2>
          <Playground
            docClass={Button}
            propDescriptionMap={{
              type: 'submit || reset || button'
            }}
            codeText={buttonComponent}
            scope={{React, Button}}
          />
        </section>
        <section>
          <h2>Disabled Button</h2>
          <Playground
            codeText={buttonDisabled}
            scope={{React, Button}}
          />
        </section>
        <section>
          <h2>Raised Button</h2>
          <Playground
            codeText={buttonRaised}
            scope={{React, Button}}
          />
        </section>
      </div>
    )
  }

}


import React from 'react'
import Playground from 'component-playground'
import {Button} from '../../../'

const defaultButton =
`<button type='button'>
  Default
</button>`

const buttonComponent =
`<Button onClick={e => console.log(e)}>
  Button
</Button>`

const buttonDisabled =
`<Button onClick={e => console.log(e)} disabled>
  Disabled
</Button>`

const buttonRaised =
`<Button onClick={e => console.log(e)} raised>
  Raised
</Button>`

export default class ButtonRoute extends React.Component {

  render () {
    return (
      <div>
        <section>
          <h2>Default button</h2>
          <Playground
            codeText={defaultButton}
            scope={{React, Button}}
          />
        </section>
        <section>
          <h2>Button Component</h2>
          <Playground
            docClass={Button}
            propDescriptionMap={{
              type: 'submit || reset || button'
            }}
            codeText={buttonComponent}
            scope={{React, Button}}
          />
        </section>
        <section>
          <h2>Disabled Button</h2>
          <Playground
            codeText={buttonDisabled}
            scope={{React, Button}}
          />
        </section>
        <section>
          <h2>Raised Button</h2>
          <Playground
            codeText={buttonRaised}
            scope={{React, Button}}
          />
        </section>
      </div>
    )
  }

}

fix button example missing curly braces and make example shorter