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

Biblioteca ReactJS

import { storiesOf } from '@storybook/react'
import React from 'react'
import { Button, ButtonGroup } from 'src'
import { ModalClose } from 'icons'

const stories = storiesOf('Button Group', module)

const marginStyle = {
  padding: '0px',
  margin: '10px'
}

stories.add('Button Default', () => (
  <div style={marginStyle}>
    <ButtonGroup type='primary'>
      <Button >Semanal</Button>
      <Button >Mensal</Button>
      <Button >Anual</Button>
    </ButtonGroup>

    <ButtonGroup type='secondary'>
      <Button >Semanal</Button>
      <Button >Mensal</Button>
      <Button >Anual</Button>
    </ButtonGroup>

    <ButtonGroup type='danger'>
      <Button >Semanal</Button>
      <Button >Mensal</Button>
      <Button >Anual</Button>
    </ButtonGroup>

    <ButtonGroup type='default'>
      <Button >Semanal</Button>
      <Button >Mensal</Button>
      <Button >Anual</Button>
    </ButtonGroup>
  </div>
))

stories.add('ButtonGroup Vertical', () => (
  <div style={marginStyle}>
    <h3>NORMAL</h3>
    <div style={marginStyle}>
      <ButtonGroup orientation='vertical' width='300px'>
        <Button type='secondary' value='Diario' onClick={() => console.log('onClick Diario')} >Diario</Button>
        <Button >Semanal</Button>
        <Button type='danger' >Mensal</Button>
        <Button >Anual</Button>
      </ButtonGroup>
    </div>
    <h3>RADIO</h3>
    <div style={marginStyle}>
      <ButtonGroup orientation='vertical' width='300px' behavior='radio' value={3} clearableOnRadio >
        <Button type='secondary' onClick={() => console.log('onClick Diario')} >Diario</Button>
        <Button >Semanal</Button>
        <Button type='danger' >Mensal</Button>
        <Button >Anual</Button>
      </ButtonGroup>
    </div>
    <h3>CHECK com Ícones</h3>
    <div style={marginStyle}>
      <ButtonGroup orientation='vertical' type='default' width='40px' behavior='check' value={['teste', 3]} onChange={(val) => console.log('Novo valor:', val)}>
        <Button icon={<ModalClose activeColor='#2870B2' />} type='secondary' onClick={() => console.log('onClick Diario')} value='teste' ></Button>
        <Button icon={<ModalClose activeColor='#2870B2' />} ></Button>
        <Button icon={<ModalClose activeColor='#2870B2' />} type='danger' ></Button>
        <Button icon={<ModalClose activeColor='#2870B2' />} ></Button>
      </ButtonGroup>
    </div>
  </div>
))

stories.add('Button Group Diferents Buttons', () => (
  <div style={marginStyle}>
    <ButtonGroup>
      <Button type='primary' >Opção 1</Button>
      <Button type='secondary' >Opção 2</Button>
      <Button type='danger' >Opção 3</Button>
      <Button >Opção 4</Button>
    </ButtonGroup>
  </div>
))

stories.add('Button Group Diferents Sizes', () => (
  <div style={marginStyle}>
    <ButtonGroup width='100%'>
      <Button width='30%' type='primary' >Opção 1</Button>
      <Button width='10%' type='secondary' >Opção 2</Button>
      <Button width='40%' type='danger' >Opção 3</Button>
      <Button width='20%' >Opção 4</Button>
    </ButtonGroup>
  </div>
))