@availity/mui-checkbox 0.1.57 → 0.2.0
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 +7 -0
- package/package.json +1 -2
- package/src/lib/Checkbox.stories.tsx +63 -120
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-checkbox@0.1.57...@availity/mui-checkbox@0.2.0) (2024-10-01)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* **mui-form-utils:** export FormGroup ([d874415](https://github.com/Availity/element/commit/d874415699f324430bdf593d48d4265a7ba92c8c))
|
|
11
|
+
|
|
5
12
|
## [0.1.57](https://github.com/Availity/element/compare/@availity/mui-checkbox@0.1.56...@availity/mui-checkbox@0.1.57) (2024-09-20)
|
|
6
13
|
|
|
7
14
|
### Dependency Updates
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-checkbox",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Availity MUI Checkbox Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@availity/mui-form-utils": "^0.12.7",
|
|
36
35
|
"@availity/mui-icon": "^0.10.1",
|
|
37
36
|
"@availity/mui-typography": "^0.2.0",
|
|
38
37
|
"@mui/material": "^5.15.15",
|
|
@@ -2,15 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
5
|
-
import { FormControlLabel } from '@availity/mui-form-utils';
|
|
6
5
|
import { Typography } from '@availity/mui-typography';
|
|
7
6
|
import Box from '@mui/material/Box';
|
|
8
|
-
import FormGroup from '@mui/material/FormGroup';
|
|
9
|
-
import FormControl from '@mui/material/FormControl';
|
|
10
|
-
import FormLabel from '@mui/material/FormLabel';
|
|
11
7
|
import Container from '@mui/material/Container';
|
|
8
|
+
import FormControlLabel from '@mui/material/FormControlLabel';
|
|
12
9
|
import { HeartEmptyIcon, HeartIcon } from '@availity/mui-icon';
|
|
13
|
-
import { PageHeader } from '@availity/mui-page-header';
|
|
14
10
|
import { Checkbox, CheckboxProps } from './Checkbox';
|
|
15
11
|
|
|
16
12
|
const meta: Meta<typeof Checkbox> = {
|
|
@@ -30,22 +26,19 @@ export default meta;
|
|
|
30
26
|
|
|
31
27
|
export const _Checkbox: StoryObj<typeof Checkbox> = {
|
|
32
28
|
render: (args: CheckboxProps) => (
|
|
33
|
-
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
<Checkbox {...args} />
|
|
47
|
-
</Container>
|
|
48
|
-
</>
|
|
29
|
+
<Container>
|
|
30
|
+
<Typography variant="h1" marginTop="1rem">
|
|
31
|
+
Examples
|
|
32
|
+
</Typography>
|
|
33
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
34
|
+
<Checkbox defaultChecked inputProps={{ 'aria-label': 'Default Checked example' }} />
|
|
35
|
+
<Checkbox inputProps={{ 'aria-label': 'Default Unchecked example' }} />
|
|
36
|
+
<Checkbox inputProps={{ 'aria-label': 'Disabled example' }} disabled />
|
|
37
|
+
<Checkbox inputProps={{ 'aria-label': 'Disabled Checked example' }} disabled checked />
|
|
38
|
+
<Typography variant="h1">Playground</Typography>
|
|
39
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
40
|
+
<Checkbox {...args} />
|
|
41
|
+
</Container>
|
|
49
42
|
),
|
|
50
43
|
args: {
|
|
51
44
|
color: 'primary',
|
|
@@ -57,46 +50,43 @@ export const _Checkbox: StoryObj<typeof Checkbox> = {
|
|
|
57
50
|
|
|
58
51
|
export const _CustomCheckbox: StoryObj<typeof Checkbox> = {
|
|
59
52
|
render: (args: CheckboxProps) => (
|
|
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
|
-
<Checkbox {...args} />
|
|
98
|
-
</Container>
|
|
99
|
-
</>
|
|
53
|
+
<Container>
|
|
54
|
+
<Typography variant="h1" marginTop="1rem">
|
|
55
|
+
Examples
|
|
56
|
+
</Typography>
|
|
57
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
58
|
+
<Checkbox
|
|
59
|
+
defaultChecked
|
|
60
|
+
inputProps={{ 'aria-label': 'Default Checked example' }}
|
|
61
|
+
color="error"
|
|
62
|
+
icon={<HeartEmptyIcon />}
|
|
63
|
+
checkedIcon={<HeartIcon />}
|
|
64
|
+
/>
|
|
65
|
+
<Checkbox
|
|
66
|
+
inputProps={{ 'aria-label': 'Default Unchecked example' }}
|
|
67
|
+
color="error"
|
|
68
|
+
icon={<HeartEmptyIcon />}
|
|
69
|
+
checkedIcon={<HeartIcon />}
|
|
70
|
+
/>
|
|
71
|
+
<Checkbox
|
|
72
|
+
disabled
|
|
73
|
+
inputProps={{ 'aria-label': 'Disabled example' }}
|
|
74
|
+
color="error"
|
|
75
|
+
icon={<HeartEmptyIcon />}
|
|
76
|
+
checkedIcon={<HeartIcon />}
|
|
77
|
+
/>
|
|
78
|
+
<Checkbox
|
|
79
|
+
disabled
|
|
80
|
+
checked
|
|
81
|
+
inputProps={{ 'aria-label': 'Disabled Checked example' }}
|
|
82
|
+
color="error"
|
|
83
|
+
icon={<HeartEmptyIcon />}
|
|
84
|
+
checkedIcon={<HeartIcon />}
|
|
85
|
+
/>
|
|
86
|
+
<Typography variant="h1">Playground</Typography>
|
|
87
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
88
|
+
<Checkbox {...args} />
|
|
89
|
+
</Container>
|
|
100
90
|
),
|
|
101
91
|
args: {
|
|
102
92
|
color: 'error',
|
|
@@ -110,21 +100,18 @@ export const _CustomCheckbox: StoryObj<typeof Checkbox> = {
|
|
|
110
100
|
|
|
111
101
|
export const _LabeledCheckbox: StoryObj<typeof Checkbox> = {
|
|
112
102
|
render: (args: CheckboxProps) => (
|
|
113
|
-
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<FormControlLabel control={<Checkbox {...args} />} label="Label" />
|
|
126
|
-
</Container>
|
|
127
|
-
</>
|
|
103
|
+
<Container>
|
|
104
|
+
<Typography variant="h1" marginTop="1rem">
|
|
105
|
+
Examples
|
|
106
|
+
</Typography>
|
|
107
|
+
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
108
|
+
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
109
|
+
<FormControlLabel required control={<Checkbox />} label="Required" />
|
|
110
|
+
<FormControlLabel control={<Checkbox disabled />} label="Disabled" />
|
|
111
|
+
<Typography variant="h1">Playground</Typography>
|
|
112
|
+
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
113
|
+
<FormControlLabel control={<Checkbox {...args} />} label="Label" />
|
|
114
|
+
</Container>
|
|
128
115
|
),
|
|
129
116
|
args: {},
|
|
130
117
|
};
|
|
@@ -178,47 +165,3 @@ export const _IndeterminateCheckbox: StoryObj<typeof Checkbox> = {
|
|
|
178
165
|
},
|
|
179
166
|
args: {},
|
|
180
167
|
};
|
|
181
|
-
|
|
182
|
-
export const _FormGroupCheckbox: StoryObj<typeof Checkbox> = {
|
|
183
|
-
render: (args: CheckboxProps) => (
|
|
184
|
-
<>
|
|
185
|
-
<PageHeader headerText="Form Group Checkboxes" breadcrumbs={{ active: 'This page' }} />
|
|
186
|
-
<Container>
|
|
187
|
-
<Typography variant="h2" marginTop="1rem">
|
|
188
|
-
Examples
|
|
189
|
-
</Typography>
|
|
190
|
-
<Typography variant="body1">Storybook controls do not apply to these</Typography>
|
|
191
|
-
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required>
|
|
192
|
-
<FormLabel component="legend">Vertical Checkboxes</FormLabel>
|
|
193
|
-
<FormGroup>
|
|
194
|
-
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
195
|
-
<FormControlLabel control={<Checkbox />} label="Label 2" />
|
|
196
|
-
<FormControlLabel disabled control={<Checkbox />} label="Label 3" />
|
|
197
|
-
</FormGroup>
|
|
198
|
-
</FormControl>
|
|
199
|
-
|
|
200
|
-
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required>
|
|
201
|
-
<FormLabel component="legend">Horizontal Checkboxes</FormLabel>
|
|
202
|
-
<FormGroup row>
|
|
203
|
-
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
|
|
204
|
-
<FormControlLabel control={<Checkbox />} label="Label 2" />
|
|
205
|
-
<FormControlLabel disabled control={<Checkbox />} label="Label 3" />
|
|
206
|
-
</FormGroup>
|
|
207
|
-
</FormControl>
|
|
208
|
-
|
|
209
|
-
<Typography variant="h2">Playground</Typography>
|
|
210
|
-
<Typography variant="body1">Storybook controls apply to this component</Typography>
|
|
211
|
-
|
|
212
|
-
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard" required={args.required}>
|
|
213
|
-
<FormLabel component="legend">Horizontal Checkbox</FormLabel>
|
|
214
|
-
<FormGroup row>
|
|
215
|
-
<FormControlLabel control={<Checkbox {...args} />} label="Label" />
|
|
216
|
-
</FormGroup>
|
|
217
|
-
</FormControl>
|
|
218
|
-
</Container>
|
|
219
|
-
</>
|
|
220
|
-
),
|
|
221
|
-
args: {
|
|
222
|
-
color: 'primary',
|
|
223
|
-
},
|
|
224
|
-
};
|