import React from 'react' ; import { Story , Meta } from '@storybook/react' ; import { Button , IButtonProps } from './Button' ; import { MinusTransparent , PlusTransparent } from '../icons' ; import { ICON_ALIGNMENT } from './Button' ; const Template = ( args ) => ( < Button { ... args } > { args . children } < /Button>); export default { title : 'Components/Buttons/Button' , component : Button , argTypes : { icon : { control : { type : 'select' , options : [ ] } } , align : { control : { type : 'select' , options : [ 'LEFT' , 'RIGHT' ] } } } } as Meta ; export const LeftPlusButton = Template . bind ( { } ) ; LeftPlusButton . args = { id : 'myButton' , onClick : ( ) => alert ( 'Hello' ) , icon : ( ) => < PlusTransparent />, align : ICON_ALIGNMENT . LEFT } ; export const RightMinusButton = Template . bind ( { } ) ; RightMinusButton . args = { icon : ( ) => < MinusTransparent />, align : ICON_ALIGNMENT . RIGHT } ; export const ButtonWithoutIcon = Template . bind ( { } ) ; ButtonWithoutIcon . args = { id : 'myButton' , onClick : ( ) => alert ( 'Hello' ) , children : 'Click here' } ;