ui-components/src/components/Checkbox/Checkbox.stories.tsx at eb14526f87b3982fa5c2605ba23d40eb7aa004c3 · openstax/ui-components · GitHub

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
import styled from "styled-components";
import { Checkbox } from "./Checkbox";

const CheckboxGroup = styled.div`
  text-transform: capitalize;
  & + & {
    margin-top: 3.2rem;
  }
  > * + * {
    margin-top: 0.5rem;
  }
`;

type CheckboxProps = React.ComponentProps<typeof Checkbox>;
const renderCheckboxes = (variant: CheckboxProps['variant'], size: CheckboxProps['size']) => <CheckboxGroup>
  <h2>Size {size}</h2>
  <Checkbox {...{size, variant}}>Checkbox label</Checkbox>
  <Checkbox {...{size, variant}} defaultChecked>Checkbox label</Checkbox>
  <Checkbox {...{size, variant}} defaultChecked bold>Checkbox label</Checkbox>
</CheckboxGroup>;

export const Primary = () => <>
  {renderCheckboxes('primary', 1.4)}
  {renderCheckboxes('primary', 1.6)}
  {renderCheckboxes('primary', 1.8)}
  {renderCheckboxes('primary', 2)}
</>;

export const Light = () => <>
  {renderCheckboxes('light', 1.4)}
  {renderCheckboxes('light', 1.6)}
  {renderCheckboxes('light', 1.8)}
  {renderCheckboxes('light', 2)}
</>

const renderDisabledCheckboxes = (variant: CheckboxProps['variant'], size: CheckboxProps['size']) => <CheckboxGroup>
  <h2>{variant} - Size {size}</h2>
  <Checkbox {...{size, variant}} disabled>Checkbox label</Checkbox>
  <Checkbox {...{size, variant}} disabled defaultChecked>Checkbox label</Checkbox>
  <Checkbox {...{size, variant}} disabled defaultChecked bold>Checkbox label</Checkbox>
</CheckboxGroup>;

export const Disabled = () => <>
  {renderDisabledCheckboxes('primary', 1.6)}
  {renderDisabledCheckboxes('primary', 2)}
  {renderDisabledCheckboxes('light', 1.6)}
  {renderDisabledCheckboxes('light', 2)}
</>

const VerticalCheckboxGroup = styled.div`
  text-transform: capitalize;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  & + & {
    margin-top: 3.2rem;
  }
`;

export const WithTooltip = () => <>
  <VerticalCheckboxGroup>
    <h2>Primary</h2>
    <Checkbox variant="primary" tooltipText="Tooltip text for checkbox goes here">Checkbox label</Checkbox>
    <Checkbox variant="primary" defaultChecked tooltipText="Tooltip text for checkbox goes here">Checked label with tooltip</Checkbox>
    <Checkbox variant="primary" disabled tooltipText="This option is unavailable">Disabled label with tooltip</Checkbox>
    <Checkbox variant="primary" disabled defaultChecked tooltipText="This option is unavailable">Disabled checked label with tooltip</Checkbox>
  </VerticalCheckboxGroup>
  <VerticalCheckboxGroup>
    <h2>Light</h2>
    <Checkbox variant="light" tooltipText="Tooltip text for checkbox goes here">Checkbox label</Checkbox>
    <Checkbox variant="light" defaultChecked tooltipText="Tooltip text for checkbox goes here">Checked label with tooltip</Checkbox>
    <Checkbox variant="light" disabled tooltipText="This option is unavailable">Disabled label with tooltip</Checkbox>
    <Checkbox variant="light" disabled defaultChecked tooltipText="This option is unavailable">Disabled checked label with tooltip</Checkbox>
  </VerticalCheckboxGroup>
</>;