Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useState } from 'react'; import _ from 'lodash'; import { Meta, Story } from '@storybook/react'; import ButtonGroup, { IButtonGroupProps } from './ButtonGroup'; export default { title: 'Controls/ButtonGroup', component: ButtonGroup, subcomponents: { 'ButtonGroup.Button': ButtonGroup.Button }, args: ButtonGroup.defaultProps, parameters: { docs: { inlineStories: false, description: { component: ButtonGroup.peek.description, }, }, }, } as Meta; export const Basic: Story<IButtonGroupProps> = (args) => { const buttonStyle = { width: '100px' }; return ( <ButtonGroup {...args}> <ButtonGroup.Button style={buttonStyle}>Smol</ButtonGroup.Button> <ButtonGroup.Button style={buttonStyle}>Lonnnnnnnng</ButtonGroup.Button> <ButtonGroup.Button style={buttonStyle}>Medium</ButtonGroup.Button> </ButtonGroup> ); }; export const Stateful: Story<IButtonGroupProps> = (args) => { const [selectedIndices, setSelectedIndices] = useState<number[]>([]); const handleSelect = (selectedIndex: number, { event, props }) => { const currentIndices = selectedIndices; // If the item does not exist in the original array add it, if it exists remove it. setSelectedIndices(_.xor(currentIndices, [selectedIndex])); }; return ( <ButtonGroup {...args} selectedIndices={selectedIndices} onSelect={handleSelect} > <ButtonGroup.Button>Zero</ButtonGroup.Button> <ButtonGroup.Button>One</ButtonGroup.Button> <ButtonGroup.Button>Two</ButtonGroup.Button> <ButtonGroup.Button>Three</ButtonGroup.Button> </ButtonGroup> ); }; export const Stateless: Story<IButtonGroupProps> = (args) => { return ( <ButtonGroup {...args} selectedIndices={[7, 8]}> <ButtonGroup.Button>Zero</ButtonGroup.Button> <ButtonGroup.Button>One</ButtonGroup.Button> <ButtonGroup.Button>Two</ButtonGroup.Button> <ButtonGroup.Button>Three</ButtonGroup.Button> <ButtonGroup.Button>Four</ButtonGroup.Button> <ButtonGroup.Button isDisabled={true}>Five</ButtonGroup.Button> <ButtonGroup.Button>Six</ButtonGroup.Button> <ButtonGroup.Button>Seven</ButtonGroup.Button> <ButtonGroup.Button>Eight</ButtonGroup.Button> <ButtonGroup.Button>Nine</ButtonGroup.Button> </ButtonGroup> ); }; export const Disabled: Story<IButtonGroupProps> = (args) => { const buttonStyle = { width: '100px' }; return ( <ButtonGroup {...args}> <ButtonGroup.Button style={buttonStyle}>Zero</ButtonGroup.Button> <ButtonGroup.Button isDisabled={true} style={buttonStyle}> One </ButtonGroup.Button> <ButtonGroup.Button style={buttonStyle}>Two</ButtonGroup.Button> <ButtonGroup.Button style={buttonStyle}>Three</ButtonGroup.Button> </ButtonGroup> ); }; export const OnClick: Story<IButtonGroupProps> = (args) => { const handleClick = (label) => { alert(label); }; return ( <ButtonGroup {...args}> <ButtonGroup.Button onClick={() => handleClick('Zero')}> Zero </ButtonGroup.Button> <ButtonGroup.Button onClick={() => handleClick('One')}> One </ButtonGroup.Button> </ButtonGroup> ); }; |