@availity/mui-checkbox 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/package.json +1 -1
- package/src/lib/Checkbox.stories.tsx +98 -77
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.1.4](https://github.com/Availity/element/compare/@availity/mui-checkbox@0.1.3...@availity/mui-checkbox@0.1.4) (2023-11-08)
|
|
6
|
+
|
|
5
7
|
## [0.1.3](https://github.com/Availity/element/compare/@availity/mui-checkbox@0.1.2...@availity/mui-checkbox@0.1.3) (2023-11-07)
|
|
6
8
|
|
|
7
9
|
## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-checkbox@0.1.1...@availity/mui-checkbox@0.1.2) (2023-10-17)
|
package/package.json
CHANGED
|
@@ -4,8 +4,9 @@ import { useState } from 'react';
|
|
|
4
4
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
5
5
|
import { FormControlLabel } from '@availity/mui-form-utils';
|
|
6
6
|
import { Typography } from '@availity/mui-typography';
|
|
7
|
-
import { Box, FormGroup, FormControl, FormLabel } from '@mui/material';
|
|
7
|
+
import { Box, FormGroup, FormControl, FormLabel, Container } from '@mui/material';
|
|
8
8
|
import { HeartEmptyIcon, HeartIcon } from '@availity/mui-icon';
|
|
9
|
+
import { PageHeader } from '@availity/mui-page-header';
|
|
9
10
|
import { Checkbox, CheckboxProps } from './Checkbox';
|
|
10
11
|
|
|
11
12
|
const meta: Meta<typeof Checkbox> = {
|
|
@@ -26,15 +27,20 @@ export default meta;
|
|
|
26
27
|
export const _Checkbox: StoryObj<typeof Checkbox> = {
|
|
27
28
|
render: (args: CheckboxProps) => (
|
|
28
29
|
<>
|
|
29
|
-
<
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
30
|
+
<PageHeader headerText="Checkboxes" breadcrumbs={{ active: 'This page' }} />
|
|
31
|
+
<Container>
|
|
32
|
+
<Typography variant="h2" marginTop="1rem">
|
|
33
|
+
Examples
|
|
34
|
+
</Typography>
|
|
35
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
36
|
+
<Checkbox defaultChecked inputProps={{ 'aria-label': 'Default Checked example' }} />
|
|
37
|
+
<Checkbox inputProps={{ 'aria-label': 'Default Unchecked example' }} />
|
|
38
|
+
<Checkbox inputProps={{ 'aria-label': 'Disabled example' }} disabled />
|
|
39
|
+
<Checkbox inputProps={{ 'aria-label': 'Disabled Checked example' }} disabled checked />
|
|
40
|
+
<Typography variant="h2">Playground</Typography>
|
|
41
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
42
|
+
<Checkbox {...args} />
|
|
43
|
+
</Container>
|
|
38
44
|
</>
|
|
39
45
|
),
|
|
40
46
|
args: {
|
|
@@ -48,39 +54,44 @@ export const _Checkbox: StoryObj<typeof Checkbox> = {
|
|
|
48
54
|
export const _CustomCheckbox: StoryObj<typeof Checkbox> = {
|
|
49
55
|
render: (args: CheckboxProps) => (
|
|
50
56
|
<>
|
|
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
|
-
|
|
57
|
+
<PageHeader headerText="Custom Checkboxes" breadcrumbs={{ active: 'This page' }} />
|
|
58
|
+
<Container>
|
|
59
|
+
<Typography variant="h2" marginTop="1rem">
|
|
60
|
+
Examples
|
|
61
|
+
</Typography>
|
|
62
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
63
|
+
<Checkbox
|
|
64
|
+
defaultChecked
|
|
65
|
+
inputProps={{ 'aria-label': 'Default Checked example' }}
|
|
66
|
+
color="error"
|
|
67
|
+
icon={<HeartEmptyIcon />}
|
|
68
|
+
checkedIcon={<HeartIcon />}
|
|
69
|
+
/>
|
|
70
|
+
<Checkbox
|
|
71
|
+
inputProps={{ 'aria-label': 'Default Unchecked example' }}
|
|
72
|
+
color="error"
|
|
73
|
+
icon={<HeartEmptyIcon />}
|
|
74
|
+
checkedIcon={<HeartIcon />}
|
|
75
|
+
/>
|
|
76
|
+
<Checkbox
|
|
77
|
+
disabled
|
|
78
|
+
inputProps={{ 'aria-label': 'Disabled example' }}
|
|
79
|
+
color="error"
|
|
80
|
+
icon={<HeartEmptyIcon />}
|
|
81
|
+
checkedIcon={<HeartIcon />}
|
|
82
|
+
/>
|
|
83
|
+
<Checkbox
|
|
84
|
+
disabled
|
|
85
|
+
checked
|
|
86
|
+
inputProps={{ 'aria-label': 'Disabled Checked example' }}
|
|
87
|
+
color="error"
|
|
88
|
+
icon={<HeartEmptyIcon />}
|
|
89
|
+
checkedIcon={<HeartIcon />}
|
|
90
|
+
/>
|
|
91
|
+
<Typography variant="h2">Playground</Typography>
|
|
92
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
93
|
+
<Checkbox {...args} />
|
|
94
|
+
</Container>
|
|
84
95
|
</>
|
|
85
96
|
),
|
|
86
97
|
args: {
|
|
@@ -96,14 +107,19 @@ export const _CustomCheckbox: StoryObj<typeof Checkbox> = {
|
|
|
96
107
|
export const _LabeledCheckbox: StoryObj<typeof Checkbox> = {
|
|
97
108
|
render: (args: CheckboxProps) => (
|
|
98
109
|
<>
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
110
|
+
<PageHeader headerText="Labeled Checkboxes" breadcrumbs={{ active: 'This page' }} />
|
|
111
|
+
<Container>
|
|
112
|
+
<Typography variant="h2" marginTop="1rem">
|
|
113
|
+
Examples
|
|
114
|
+
</Typography>
|
|
115
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
116
|
+
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
117
|
+
<FormControlLabel required control={<Checkbox />} label="Required" />
|
|
118
|
+
<FormControlLabel control={<Checkbox disabled />} label="Disabled" />
|
|
119
|
+
<Typography variant="h2">Playground</Typography>
|
|
120
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
121
|
+
<FormControlLabel control={<Checkbox {...args} />} label="Label" />
|
|
122
|
+
</Container>
|
|
107
123
|
</>
|
|
108
124
|
),
|
|
109
125
|
args: {},
|
|
@@ -162,35 +178,40 @@ export const _IndeterminateCheckbox: StoryObj<typeof Checkbox> = {
|
|
|
162
178
|
export const _FormGroupCheckbox: StoryObj<typeof Checkbox> = {
|
|
163
179
|
render: (args: CheckboxProps) => (
|
|
164
180
|
<>
|
|
165
|
-
<
|
|
166
|
-
<
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
181
|
+
<PageHeader headerText="Form Group Checkboxes" breadcrumbs={{ active: 'This page' }} />
|
|
182
|
+
<Container>
|
|
183
|
+
<Typography variant="h2" marginTop="1rem">
|
|
184
|
+
Examples
|
|
185
|
+
</Typography>
|
|
186
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
187
|
+
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required>
|
|
188
|
+
<FormLabel component="legend">Vertical Checkboxes</FormLabel>
|
|
189
|
+
<FormGroup>
|
|
190
|
+
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
191
|
+
<FormControlLabel control={<Checkbox />} label="Label 2" />
|
|
192
|
+
<FormControlLabel disabled control={<Checkbox />} label="Label 3" />
|
|
193
|
+
</FormGroup>
|
|
194
|
+
</FormControl>
|
|
175
195
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
196
|
+
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required>
|
|
197
|
+
<FormLabel component="legend">Horizontal Checkboxes</FormLabel>
|
|
198
|
+
<FormGroup row>
|
|
199
|
+
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
200
|
+
<FormControlLabel control={<Checkbox />} label="Label 2" />
|
|
201
|
+
<FormControlLabel disabled control={<Checkbox />} label="Label 3" />
|
|
202
|
+
</FormGroup>
|
|
203
|
+
</FormControl>
|
|
184
204
|
|
|
185
|
-
|
|
186
|
-
|
|
205
|
+
<Typography variant="h2">Playground</Typography>
|
|
206
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
187
207
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
208
|
+
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required={args.required}>
|
|
209
|
+
<FormLabel component="legend">Horizontal Checkbox</FormLabel>
|
|
210
|
+
<FormGroup row>
|
|
211
|
+
<FormControlLabel control={<Checkbox {...args} />} label="Label" />
|
|
212
|
+
</FormGroup>
|
|
213
|
+
</FormControl>
|
|
214
|
+
</Container>
|
|
194
215
|
</>
|
|
195
216
|
),
|
|
196
217
|
args: {
|