@availity/mui-accordion 0.1.0 → 0.1.1
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
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.1](https://github.com/Availity/element/compare/@availity/mui-accordion@0.1.0...@availity/mui-accordion@0.1.1) (2024-03-27)
|
|
6
|
+
|
|
5
7
|
## 0.1.0 (2024-03-15)
|
|
6
8
|
|
|
7
9
|
### Dependency Updates
|
package/package.json
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
4
|
import { Accordion, AccordionActions, AccordionDetails, AccordionSummary, AccordionProps } from '..';
|
|
5
|
+
import Grid from '@mui/material/Unstable_Grid2';
|
|
5
6
|
import Button from '@mui/material/Button';
|
|
7
|
+
import { Typography } from '@mui/material';
|
|
6
8
|
|
|
7
9
|
const meta: Meta<typeof Accordion> = {
|
|
8
10
|
title: 'Components/Accordion/Accordion',
|
|
@@ -32,79 +34,133 @@ export const _Accordion: StoryObj<typeof Accordion> = {
|
|
|
32
34
|
|
|
33
35
|
export const _States: StoryObj<typeof Accordion> = {
|
|
34
36
|
render: (args: AccordionProps) => (
|
|
37
|
+
<Grid container spacing={1}>
|
|
38
|
+
<Grid xs={12}>
|
|
39
|
+
<Accordion {...args} defaultExpanded>
|
|
40
|
+
<AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
|
|
41
|
+
Default Expanded
|
|
42
|
+
</AccordionSummary>
|
|
43
|
+
<AccordionDetails>
|
|
44
|
+
<Accordion>
|
|
45
|
+
<AccordionSummary aria-controls="defaultexpanded-nested-content" id="defaultexpanded-nested-header">
|
|
46
|
+
Nested Accordion
|
|
47
|
+
</AccordionSummary>
|
|
48
|
+
<AccordionDetails>
|
|
49
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
50
|
+
blandit leo lobortis eget.
|
|
51
|
+
</AccordionDetails>
|
|
52
|
+
</Accordion>
|
|
53
|
+
</AccordionDetails>
|
|
54
|
+
</Accordion>
|
|
55
|
+
</Grid>
|
|
56
|
+
<Grid xs={12}>
|
|
57
|
+
<Accordion {...args}>
|
|
58
|
+
<AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
|
|
59
|
+
Focused
|
|
60
|
+
</AccordionSummary>
|
|
61
|
+
<AccordionDetails>
|
|
62
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
63
|
+
leo lobortis eget.
|
|
64
|
+
</AccordionDetails>
|
|
65
|
+
</Accordion>
|
|
66
|
+
</Grid>
|
|
67
|
+
<Grid xs={12}>
|
|
68
|
+
<Accordion {...args} disabled>
|
|
69
|
+
<AccordionSummary aria-controls="disabled-content" id="disabled-header">
|
|
70
|
+
Disabled
|
|
71
|
+
</AccordionSummary>
|
|
72
|
+
<AccordionDetails>
|
|
73
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
74
|
+
leo lobortis eget.
|
|
75
|
+
</AccordionDetails>
|
|
76
|
+
</Accordion>
|
|
77
|
+
</Grid>
|
|
78
|
+
</Grid>
|
|
79
|
+
),
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
/** By default, Material will style sibling `Accordion` components into a linked accordion group (similar to button group styling). A common way to avoid this is separating the `Accordion` within a `Grid`. */
|
|
83
|
+
export const _AccordionGroup: StoryObj<typeof Accordion> = {
|
|
84
|
+
render: () => (
|
|
35
85
|
<div>
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
<
|
|
86
|
+
<Typography variant="h5" component="h2">
|
|
87
|
+
Grouped
|
|
88
|
+
</Typography>
|
|
89
|
+
<div>
|
|
90
|
+
<Accordion>
|
|
91
|
+
<AccordionSummary aria-controls="grouped-panel1-content" id="grouped-panel1-header">
|
|
92
|
+
Accordion 1
|
|
93
|
+
</AccordionSummary>
|
|
94
|
+
<AccordionDetails>
|
|
95
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
96
|
+
leo lobortis eget.
|
|
97
|
+
</AccordionDetails>
|
|
98
|
+
</Accordion>
|
|
99
|
+
<Accordion>
|
|
100
|
+
<AccordionSummary aria-controls="grouped-panel2-content" id="grouped-panel2-header">
|
|
101
|
+
Accordion 2
|
|
102
|
+
</AccordionSummary>
|
|
103
|
+
<AccordionDetails>
|
|
104
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
105
|
+
leo lobortis eget.
|
|
106
|
+
</AccordionDetails>
|
|
107
|
+
</Accordion>
|
|
108
|
+
<Accordion>
|
|
109
|
+
<AccordionSummary aria-controls="grouped-panel3-content" id="grouped-panel3-header">
|
|
110
|
+
Accordion Actions
|
|
111
|
+
</AccordionSummary>
|
|
112
|
+
<AccordionDetails>
|
|
113
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
114
|
+
leo lobortis eget.
|
|
115
|
+
</AccordionDetails>
|
|
116
|
+
<AccordionActions>
|
|
117
|
+
<Button>Cancel</Button>
|
|
118
|
+
<Button>Agree</Button>
|
|
119
|
+
</AccordionActions>
|
|
120
|
+
</Accordion>
|
|
121
|
+
</div>
|
|
122
|
+
<Grid container spacing={1} mt={2}>
|
|
123
|
+
<Typography variant="h5" component="h2">
|
|
124
|
+
Separated in a Grid
|
|
125
|
+
</Typography>
|
|
126
|
+
<Grid xs={12}>
|
|
41
127
|
<Accordion>
|
|
42
|
-
<AccordionSummary aria-controls="
|
|
43
|
-
|
|
128
|
+
<AccordionSummary aria-controls="panel1-content" id="panel1-header">
|
|
129
|
+
Accordion 1
|
|
44
130
|
</AccordionSummary>
|
|
45
131
|
<AccordionDetails>
|
|
46
132
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
47
133
|
leo lobortis eget.
|
|
48
134
|
</AccordionDetails>
|
|
49
135
|
</Accordion>
|
|
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
|
-
<AccordionSummary aria-controls="panel1-content" id="panel1-header">
|
|
79
|
-
Accordion 1
|
|
80
|
-
</AccordionSummary>
|
|
81
|
-
<AccordionDetails>
|
|
82
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
83
|
-
lobortis eget.
|
|
84
|
-
</AccordionDetails>
|
|
85
|
-
</Accordion>
|
|
86
|
-
<Accordion>
|
|
87
|
-
<AccordionSummary aria-controls="panel2-content" id="panel2-header">
|
|
88
|
-
Accordion 2
|
|
89
|
-
</AccordionSummary>
|
|
90
|
-
<AccordionDetails>
|
|
91
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
92
|
-
lobortis eget.
|
|
93
|
-
</AccordionDetails>
|
|
94
|
-
</Accordion>
|
|
95
|
-
<Accordion>
|
|
96
|
-
<AccordionSummary aria-controls="panel3-content" id="panel3-header">
|
|
97
|
-
Accordion Actions
|
|
98
|
-
</AccordionSummary>
|
|
99
|
-
<AccordionDetails>
|
|
100
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
101
|
-
lobortis eget.
|
|
102
|
-
</AccordionDetails>
|
|
103
|
-
<AccordionActions>
|
|
104
|
-
<Button>Cancel</Button>
|
|
105
|
-
<Button>Agree</Button>
|
|
106
|
-
</AccordionActions>
|
|
107
|
-
</Accordion>
|
|
136
|
+
</Grid>
|
|
137
|
+
<Grid xs={12}>
|
|
138
|
+
<Accordion>
|
|
139
|
+
<AccordionSummary aria-controls="panel2-content" id="panel2-header">
|
|
140
|
+
Accordion 2
|
|
141
|
+
</AccordionSummary>
|
|
142
|
+
<AccordionDetails>
|
|
143
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
144
|
+
leo lobortis eget.
|
|
145
|
+
</AccordionDetails>
|
|
146
|
+
</Accordion>
|
|
147
|
+
</Grid>
|
|
148
|
+
<Grid xs={12}>
|
|
149
|
+
<Accordion>
|
|
150
|
+
<AccordionSummary aria-controls="panel3-content" id="panel3-header">
|
|
151
|
+
Accordion Actions
|
|
152
|
+
</AccordionSummary>
|
|
153
|
+
<AccordionDetails>
|
|
154
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
155
|
+
leo lobortis eget.
|
|
156
|
+
</AccordionDetails>
|
|
157
|
+
<AccordionActions>
|
|
158
|
+
<Button>Cancel</Button>
|
|
159
|
+
<Button>Agree</Button>
|
|
160
|
+
</AccordionActions>
|
|
161
|
+
</Accordion>
|
|
162
|
+
</Grid>
|
|
163
|
+
</Grid>
|
|
108
164
|
</div>
|
|
109
165
|
),
|
|
110
166
|
};
|
|
@@ -12,9 +12,5 @@ const meta: Meta<typeof AccordionSummary> = {
|
|
|
12
12
|
export default meta;
|
|
13
13
|
|
|
14
14
|
export const _AccordionSummary: StoryObj<typeof AccordionSummary> = {
|
|
15
|
-
render: (args: AccordionSummaryProps) =>
|
|
16
|
-
<AccordionSummary aria-controls="panel1-content" id="panel1-header" {...args}>
|
|
17
|
-
Accordion 1
|
|
18
|
-
</AccordionSummary>
|
|
19
|
-
),
|
|
15
|
+
render: (args: AccordionSummaryProps) => <AccordionSummary {...args}>Accordion 1</AccordionSummary>,
|
|
20
16
|
};
|