All files / src/stories Checkbox.stories.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
 
import { action } from '@storybook/addon-actions';
import { Story } from '@storybook/react';
 
import Checkbox, { Props as CheckboxProps } from '../components/Checkbox';
 
export default {
  title: 'Checkbox',
  component: Checkbox,
};
 
const Template: Story<CheckboxProps> = (args) => {
  const [value, setValue] = React.useState(true);
  const toggleChange = (_value: boolean) => {
    action('onChange')(_value);
    setValue(_value);
  };
 
  return <Checkbox {...args} onChange={toggleChange} value={value} sx={{ width: '200px' }} />;
};
 
export const Default = Template.bind({});
export const TopAlignLongLabel = Template.bind({});
 
Default.args = {
  id: '1',
  name: 'Test',
  label: 'Test',
  disabled: false,
  indeterminate: false,
};
 
TopAlignLongLabel.args = {
  id: '2',
  name: 'Alignment Test',
  label: 'The Quick Brown Fox Jumped Over The Silly Lazy Goat',
  disabled: false,
  indeterminate: undefined,
};