@hbsis.uikit/react/src/components/button/button.story.js

Biblioteca ReactJS

import React, { Fragment } from 'react'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { withReadme, withDocs } from 'storybook-readme'
import { Button } from './index'
import docs from './button.docs.md'
import readme from './button.readme.md'
import styled from 'styled-components'
import { Forward, Backward } from 'icons'
const WrapperButton = styled.div`
  width: 130px;
  &:not(:first-child) {
    padding-left: 10px;
  }
`

const PreviewComponent = styled.div`
  display: flex;
  justify-content: space-between;
  padding: 25px 5px 25px 5px;
  max-width: 752px;
`

const withDocsTemplate = withDocs({
  PreviewComponent: ({ children }) => (
    <PreviewComponent>
      {children}
    </PreviewComponent>
  )
})

const stories = storiesOf('Button', module)
  .addDecorator(withReadme(readme))
  .addDecorator(withDocsTemplate(docs))

stories.add('Default', () => (
  <Fragment>
    <WrapperButton>
      <Button
        type='primary'
        onClick={action('Button Clicked - Button type: Primary')}>
        Primary
      </Button>
    </WrapperButton>
    <WrapperButton>
      <Button
        type='secondary'
        onClick={action('Button Clicked - Button type: Secondary')}>
        Secondary
      </Button>
    </WrapperButton>
    <WrapperButton>
      <Button
        type='danger'
        onClick={action('Button Clicked - Button type: Danger')}>
        Danger
      </Button>
    </WrapperButton>
    <WrapperButton>
      <Button
        onClick={action('Button Clicked - Button type: Default')}>
        Default
      </Button>
    </WrapperButton>
    <WrapperButton>
      <Button disabled>
        Disabled
      </Button>
    </WrapperButton>
  </Fragment>
))

stories.add('Button Icon', () => (
  <Fragment>
    <WrapperButton>
      <Button
        type='primary'
        icon={<Forward />}
        onClick={action('Button Clicked - Button type: Primary')}>
        Primary
      </Button>
    </WrapperButton>
  </Fragment>
))

stories.add('Button Badge', () => (
  <Fragment>
    <WrapperButton>
      <Button badge={14} badgeType='danger' type='primary' onClick={action('Button Clicked - Button type: Primary')} >
        Danger
      </Button>
    </WrapperButton>
    <WrapperButton>
      <Button badge={2} badgeType='primary' type='secondary' onClick={action('Button Clicked - Button type: Primary')} >
        Primary
      </Button>
    </WrapperButton>
    <WrapperButton>
      <Button badge={5} badgeType='default' type='danger' onClick={action('Button Clicked - Button type: Primary')} >
        Default
      </Button>
    </WrapperButton>
  </Fragment>
))