Adding story for ToggleButton (#12311)
parent
72a3db7c0c
commit
b27b591df1
@ -0,0 +1,32 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import { action } from '@storybook/addon-actions'; |
||||||
|
import { boolean, text } from '@storybook/addon-knobs'; |
||||||
|
|
||||||
|
import ToggleButton from './toggle-button.component'; |
||||||
|
|
||||||
|
export default { |
||||||
|
title: 'ToggleButton', |
||||||
|
component: ToggleButton, |
||||||
|
id: __filename, |
||||||
|
}; |
||||||
|
|
||||||
|
export const DefaultStory = () => { |
||||||
|
const [checked, setChecked] = useState(false); |
||||||
|
const handleOnToggle = (e) => { |
||||||
|
action('onToggle')(e); |
||||||
|
setChecked(!checked); |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<ToggleButton |
||||||
|
offLabel={text('offLabel', 'off')} |
||||||
|
onLabel={text('onLabel', 'on')} |
||||||
|
disabled={boolean('disabled', false)} |
||||||
|
value={checked} |
||||||
|
onToggle={handleOnToggle} |
||||||
|
/> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
DefaultStory.story = { |
||||||
|
name: 'Default', |
||||||
|
}; |
Loading…
Reference in new issue