@availity/mui-accordion 0.2.0 → 0.2.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 +7 -0
- package/dist/index.js +2 -2
- package/dist/index.mjs +2 -2
- package/package.json +2 -1
- package/src/lib/Accordion.stories.tsx +122 -110
- package/src/lib/Accordion.tsx +2 -2
- package/src/lib/AccordionSummary.stories.tsx +25 -21
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.1](https://github.com/Availity/element/compare/@availity/mui-accordion@0.2.0...@availity/mui-accordion@0.2.1) (2024-09-17)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **mui-accordion:** style fixes ([555e678](https://github.com/Availity/element/commit/555e67827bbca0630f1ebb8c2f1df9f45ebd0c58))
|
|
11
|
+
|
|
5
12
|
## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-accordion@0.1.9...@availity/mui-accordion@0.2.0) (2024-09-06)
|
|
6
13
|
|
|
7
14
|
### Dependency Updates
|
package/dist/index.js
CHANGED
|
@@ -90,13 +90,13 @@ var OutlinedAccordion = (0, import_styles.styled)(import_Accordion.default, {
|
|
|
90
90
|
"> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
|
|
91
91
|
backgroundColor: theme.palette.background.paper
|
|
92
92
|
},
|
|
93
|
-
".MuiAccordionDetails-root:first-of-type": {
|
|
93
|
+
"> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type": {
|
|
94
94
|
borderTop: `1px solid ${theme.palette.divider}`
|
|
95
95
|
}
|
|
96
96
|
}));
|
|
97
97
|
var Accordion = (0, import_react.forwardRef)((allProps, ref) => {
|
|
98
98
|
const _a = allProps, { variant = "filled", disableNestedStyling = false, className } = _a, props = __objRest(_a, ["variant", "disableNestedStyling", "className"]);
|
|
99
|
-
const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling
|
|
99
|
+
const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ""}`;
|
|
100
100
|
return variant === "filled" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilledAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref })) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OutlinedAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref }));
|
|
101
101
|
});
|
|
102
102
|
|
package/dist/index.mjs
CHANGED
|
@@ -54,13 +54,13 @@ var OutlinedAccordion = styled(MuiAccordion, {
|
|
|
54
54
|
"> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
|
|
55
55
|
backgroundColor: theme.palette.background.paper
|
|
56
56
|
},
|
|
57
|
-
".MuiAccordionDetails-root:first-of-type": {
|
|
57
|
+
"> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type": {
|
|
58
58
|
borderTop: `1px solid ${theme.palette.divider}`
|
|
59
59
|
}
|
|
60
60
|
}));
|
|
61
61
|
var Accordion = forwardRef((allProps, ref) => {
|
|
62
62
|
const _a = allProps, { variant = "filled", disableNestedStyling = false, className } = _a, props = __objRest(_a, ["variant", "disableNestedStyling", "className"]);
|
|
63
|
-
const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling
|
|
63
|
+
const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ""}`;
|
|
64
64
|
return variant === "filled" ? /* @__PURE__ */ jsx(FilledAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref })) : /* @__PURE__ */ jsx(OutlinedAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref }));
|
|
65
65
|
});
|
|
66
66
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-accordion",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Availity MUI Accordion Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"@availity/mui-button": "^0.6.10",
|
|
36
|
+
"@availity/mui-chip": "^0.2.19",
|
|
36
37
|
"@availity/mui-layout": "^0.1.6",
|
|
37
38
|
"@availity/mui-typography": "^0.2.0",
|
|
38
39
|
"@mui/material": "^5.15.15",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
4
|
import { Accordion, AccordionActions, AccordionDetails, AccordionSummary, AccordionProps } from '..';
|
|
5
|
-
import { Grid } from '@availity/mui-layout';
|
|
5
|
+
import { Box, Grid } from '@availity/mui-layout';
|
|
6
6
|
import { Button } from '@availity/mui-button';
|
|
7
7
|
import { StatusChip } from '@availity/mui-chip';
|
|
8
8
|
import { Typography } from '@availity/mui-typography';
|
|
@@ -38,7 +38,7 @@ export const _Accordion: StoryObj<typeof Accordion> = {
|
|
|
38
38
|
),
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
-
export const _Variants: StoryObj<typeof
|
|
41
|
+
export const _Variants: StoryObj<typeof Accordion> = {
|
|
42
42
|
render: (args: AccordionProps) => (
|
|
43
43
|
<Grid container spacing={1}>
|
|
44
44
|
<Grid xs={12}>
|
|
@@ -49,15 +49,17 @@ export const _Variants: StoryObj<typeof AccordionSummary> = {
|
|
|
49
49
|
<AccordionDetails>
|
|
50
50
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
51
51
|
leo lobortis eget.
|
|
52
|
-
<
|
|
53
|
-
<
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
52
|
+
<Box mt={2}>
|
|
53
|
+
<Accordion>
|
|
54
|
+
<AccordionSummary aria-controls="filled-nested-content" id="filled-nested-header">
|
|
55
|
+
Nested Accordion
|
|
56
|
+
</AccordionSummary>
|
|
57
|
+
<AccordionDetails>
|
|
58
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
59
|
+
blandit leo lobortis eget.
|
|
60
|
+
</AccordionDetails>
|
|
61
|
+
</Accordion>
|
|
62
|
+
</Box>
|
|
61
63
|
</AccordionDetails>
|
|
62
64
|
</Accordion>
|
|
63
65
|
</Grid>
|
|
@@ -69,103 +71,17 @@ export const _Variants: StoryObj<typeof AccordionSummary> = {
|
|
|
69
71
|
<AccordionDetails>
|
|
70
72
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
71
73
|
leo lobortis eget.
|
|
72
|
-
<
|
|
73
|
-
<
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
</Grid>
|
|
84
|
-
</Grid>
|
|
85
|
-
),
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
export const _Status: StoryObj<typeof AccordionSummary> = {
|
|
89
|
-
render: (args: AccordionProps) => (
|
|
90
|
-
<Accordion {...args}>
|
|
91
|
-
<AccordionSummary aria-controls="status-summary-content" id="status-summary-header" secondary={<>Secondary<StatusChip color="success" label="Approved" sx={{marginLeft: 2}}/></>}>
|
|
92
|
-
Accordion with Status
|
|
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
|
-
<Accordion>
|
|
98
|
-
<AccordionSummary aria-controls="status-nested-content" id="status-nested-header">
|
|
99
|
-
Nested Accordion
|
|
100
|
-
</AccordionSummary>
|
|
101
|
-
<AccordionDetails>
|
|
102
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
103
|
-
blandit leo lobortis eget.
|
|
104
|
-
</AccordionDetails>
|
|
105
|
-
</Accordion>
|
|
106
|
-
</AccordionDetails>
|
|
107
|
-
</Accordion>
|
|
108
|
-
),
|
|
109
|
-
};
|
|
110
|
-
|
|
111
|
-
export const _States: StoryObj<typeof Accordion> = {
|
|
112
|
-
render: (args: AccordionProps) => (
|
|
113
|
-
<Grid container spacing={1}>
|
|
114
|
-
<Grid xs={12}>
|
|
115
|
-
<Accordion {...args} defaultExpanded>
|
|
116
|
-
<AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
|
|
117
|
-
Filled Expanded
|
|
118
|
-
</AccordionSummary>
|
|
119
|
-
<AccordionDetails>
|
|
120
|
-
<Accordion>
|
|
121
|
-
<AccordionSummary aria-controls="defaultexpanded-nested-content" id="defaultexpanded-nested-header">
|
|
122
|
-
Nested Accordion
|
|
123
|
-
</AccordionSummary>
|
|
124
|
-
<AccordionDetails>
|
|
125
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
126
|
-
blandit leo lobortis eget.
|
|
127
|
-
</AccordionDetails>
|
|
128
|
-
</Accordion>
|
|
129
|
-
</AccordionDetails>
|
|
130
|
-
</Accordion>
|
|
131
|
-
</Grid>
|
|
132
|
-
<Grid xs={12}>
|
|
133
|
-
<Accordion {...args} variant="outlined" defaultExpanded>
|
|
134
|
-
<AccordionSummary aria-controls="outlinedexpanded-content" id="outlinedexpanded-header">
|
|
135
|
-
Outlined Expanded
|
|
136
|
-
</AccordionSummary>
|
|
137
|
-
<AccordionDetails>
|
|
138
|
-
<Accordion>
|
|
139
|
-
<AccordionSummary aria-controls="outlinedexpanded-nested-content" id="outlinedexpanded-nested-header">
|
|
140
|
-
Nested Accordion
|
|
141
|
-
</AccordionSummary>
|
|
142
|
-
<AccordionDetails>
|
|
143
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
144
|
-
blandit leo lobortis eget.
|
|
145
|
-
</AccordionDetails>
|
|
146
|
-
</Accordion>
|
|
147
|
-
</AccordionDetails>
|
|
148
|
-
</Accordion>
|
|
149
|
-
</Grid>
|
|
150
|
-
<Grid xs={12}>
|
|
151
|
-
<Accordion {...args}>
|
|
152
|
-
<AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
|
|
153
|
-
Focused
|
|
154
|
-
</AccordionSummary>
|
|
155
|
-
<AccordionDetails>
|
|
156
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
157
|
-
leo lobortis eget.
|
|
158
|
-
</AccordionDetails>
|
|
159
|
-
</Accordion>
|
|
160
|
-
</Grid>
|
|
161
|
-
<Grid xs={12}>
|
|
162
|
-
<Accordion {...args} disabled>
|
|
163
|
-
<AccordionSummary aria-controls="disabled-content" id="disabled-header">
|
|
164
|
-
Disabled
|
|
165
|
-
</AccordionSummary>
|
|
166
|
-
<AccordionDetails>
|
|
167
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
168
|
-
leo lobortis eget.
|
|
74
|
+
<Box mt={2}>
|
|
75
|
+
<Accordion variant="outlined">
|
|
76
|
+
<AccordionSummary aria-controls="outlined-nested-content" id="outlined-nested-header">
|
|
77
|
+
Nested Accordion
|
|
78
|
+
</AccordionSummary>
|
|
79
|
+
<AccordionDetails>
|
|
80
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
81
|
+
blandit leo lobortis eget.
|
|
82
|
+
</AccordionDetails>
|
|
83
|
+
</Accordion>
|
|
84
|
+
</Box>
|
|
169
85
|
</AccordionDetails>
|
|
170
86
|
</Accordion>
|
|
171
87
|
</Grid>
|
|
@@ -173,8 +89,14 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
173
89
|
),
|
|
174
90
|
};
|
|
175
91
|
|
|
176
|
-
/**
|
|
177
|
-
|
|
92
|
+
/**
|
|
93
|
+
* By default, Material will style sibling `Accordion` components into a linked accordion group (similar to button group styling).
|
|
94
|
+
* A common way to avoid this is separating the `Accordion` within a `Grid`.
|
|
95
|
+
*
|
|
96
|
+
* The `Accordion` will also need to be wrapped to add any top/bottom margins -
|
|
97
|
+
* this is due to Material's default gutter behavior when expanded along with how they overwrite the behavior when disabling the gutters.
|
|
98
|
+
*/
|
|
99
|
+
export const _Spacing: StoryObj<typeof Accordion> = {
|
|
178
100
|
render: () => (
|
|
179
101
|
<div>
|
|
180
102
|
<Typography variant="h5" component="h2">
|
|
@@ -258,3 +180,93 @@ export const _AccordionGroup: StoryObj<typeof Accordion> = {
|
|
|
258
180
|
</div>
|
|
259
181
|
),
|
|
260
182
|
};
|
|
183
|
+
|
|
184
|
+
export const _States: StoryObj<typeof Accordion> = {
|
|
185
|
+
render: (args: AccordionProps) => (
|
|
186
|
+
<Grid container spacing={1}>
|
|
187
|
+
<Grid xs={12}>
|
|
188
|
+
<Accordion {...args} defaultExpanded>
|
|
189
|
+
<AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
|
|
190
|
+
Filled Expanded
|
|
191
|
+
</AccordionSummary>
|
|
192
|
+
<AccordionDetails>
|
|
193
|
+
<Accordion>
|
|
194
|
+
<AccordionSummary aria-controls="defaultexpanded-nested-content" id="defaultexpanded-nested-header">
|
|
195
|
+
Nested Accordion
|
|
196
|
+
</AccordionSummary>
|
|
197
|
+
<AccordionDetails>
|
|
198
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
199
|
+
blandit leo lobortis eget.
|
|
200
|
+
</AccordionDetails>
|
|
201
|
+
</Accordion>
|
|
202
|
+
</AccordionDetails>
|
|
203
|
+
</Accordion>
|
|
204
|
+
</Grid>
|
|
205
|
+
<Grid xs={12}>
|
|
206
|
+
<Accordion {...args} variant="outlined" defaultExpanded>
|
|
207
|
+
<AccordionSummary aria-controls="outlinedexpanded-content" id="outlinedexpanded-header">
|
|
208
|
+
Outlined Expanded
|
|
209
|
+
</AccordionSummary>
|
|
210
|
+
<AccordionDetails>
|
|
211
|
+
<Accordion>
|
|
212
|
+
<AccordionSummary aria-controls="outlinedexpanded-nested-content" id="outlinedexpanded-nested-header">
|
|
213
|
+
Nested Accordion
|
|
214
|
+
</AccordionSummary>
|
|
215
|
+
<AccordionDetails>
|
|
216
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
217
|
+
blandit leo lobortis eget.
|
|
218
|
+
</AccordionDetails>
|
|
219
|
+
</Accordion>
|
|
220
|
+
</AccordionDetails>
|
|
221
|
+
</Accordion>
|
|
222
|
+
</Grid>
|
|
223
|
+
<Grid xs={12}>
|
|
224
|
+
<Accordion {...args}>
|
|
225
|
+
<AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
|
|
226
|
+
Focused
|
|
227
|
+
</AccordionSummary>
|
|
228
|
+
<AccordionDetails>
|
|
229
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
230
|
+
leo lobortis eget.
|
|
231
|
+
</AccordionDetails>
|
|
232
|
+
</Accordion>
|
|
233
|
+
</Grid>
|
|
234
|
+
<Grid xs={12}>
|
|
235
|
+
<Accordion {...args} disabled>
|
|
236
|
+
<AccordionSummary aria-controls="disabled-content" id="disabled-header">
|
|
237
|
+
Disabled
|
|
238
|
+
</AccordionSummary>
|
|
239
|
+
<AccordionDetails>
|
|
240
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
241
|
+
leo lobortis eget.
|
|
242
|
+
</AccordionDetails>
|
|
243
|
+
</Accordion>
|
|
244
|
+
</Grid>
|
|
245
|
+
</Grid>
|
|
246
|
+
),
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
export const _Status: StoryObj<typeof Accordion> = {
|
|
250
|
+
render: (args: AccordionProps) => (
|
|
251
|
+
<Accordion {...args}>
|
|
252
|
+
<AccordionSummary aria-controls="status-summary-content" id="status-summary-header" secondary={<>Secondary<StatusChip color="success" label="Approved" sx={{marginLeft: 2}}/></>}>
|
|
253
|
+
Accordion with Status
|
|
254
|
+
</AccordionSummary>
|
|
255
|
+
<AccordionDetails>
|
|
256
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
257
|
+
leo lobortis eget.
|
|
258
|
+
<Box mt={2}>
|
|
259
|
+
<Accordion>
|
|
260
|
+
<AccordionSummary aria-controls="status-nested-content" id="status-nested-header">
|
|
261
|
+
Nested Accordion
|
|
262
|
+
</AccordionSummary>
|
|
263
|
+
<AccordionDetails>
|
|
264
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
265
|
+
blandit leo lobortis eget.
|
|
266
|
+
</AccordionDetails>
|
|
267
|
+
</Accordion>
|
|
268
|
+
</Box>
|
|
269
|
+
</AccordionDetails>
|
|
270
|
+
</Accordion>
|
|
271
|
+
),
|
|
272
|
+
};
|
package/src/lib/Accordion.tsx
CHANGED
|
@@ -39,7 +39,7 @@ const OutlinedAccordion = styled(MuiAccordion, {
|
|
|
39
39
|
'> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': {
|
|
40
40
|
backgroundColor: theme.palette.background.paper,
|
|
41
41
|
},
|
|
42
|
-
'.MuiAccordionDetails-root:first-of-type': {
|
|
42
|
+
'> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type': {
|
|
43
43
|
borderTop: `1px solid ${theme.palette.divider}`,
|
|
44
44
|
}
|
|
45
45
|
}));
|
|
@@ -47,7 +47,7 @@ const OutlinedAccordion = styled(MuiAccordion, {
|
|
|
47
47
|
export const Accordion = forwardRef<HTMLDivElement, AccordionProps>((allProps, ref) => {
|
|
48
48
|
const { variant = "filled", disableNestedStyling = false, className, ...props } = allProps;
|
|
49
49
|
|
|
50
|
-
const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling
|
|
50
|
+
const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ''}`
|
|
51
51
|
|
|
52
52
|
return variant === "filled" ?
|
|
53
53
|
<FilledAccordion className={classnames} {...props} ref={ref}/>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// Each exported component in the package should have its own stories file
|
|
2
2
|
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
-
import { Accordion,
|
|
5
|
-
import { Grid } from '@availity/mui-layout';
|
|
4
|
+
import { Accordion, AccordionDetails, AccordionSummary, AccordionProps, AccordionSummaryProps } from '..';
|
|
5
|
+
import { Box, Grid } from '@availity/mui-layout';
|
|
6
6
|
import { StatusChip } from '@availity/mui-chip';
|
|
7
7
|
|
|
8
8
|
const meta: Meta<typeof AccordionSummary> = {
|
|
@@ -22,7 +22,7 @@ export const _AccordionSummary: StoryObj<typeof AccordionSummary> = {
|
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
export const _Status: StoryObj<typeof AccordionSummary> = {
|
|
25
|
-
render: (args:
|
|
25
|
+
render: (args: AccordionSummaryProps) => (
|
|
26
26
|
<Grid container spacing={1}>
|
|
27
27
|
<Grid xs={12}>
|
|
28
28
|
<Accordion {...args}>
|
|
@@ -32,15 +32,17 @@ export const _Status: StoryObj<typeof AccordionSummary> = {
|
|
|
32
32
|
<AccordionDetails>
|
|
33
33
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
34
34
|
leo lobortis eget.
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
35
|
+
<Box mt={2}>
|
|
36
|
+
<Accordion>
|
|
37
|
+
<AccordionSummary aria-controls="defaultexpanded-nested-content" id="defaultexpanded-nested-header">
|
|
38
|
+
Nested Accordion
|
|
39
|
+
</AccordionSummary>
|
|
40
|
+
<AccordionDetails>
|
|
41
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
42
|
+
blandit leo lobortis eget.
|
|
43
|
+
</AccordionDetails>
|
|
44
|
+
</Accordion>
|
|
45
|
+
</Box>
|
|
44
46
|
</AccordionDetails>
|
|
45
47
|
</Accordion>
|
|
46
48
|
</Grid>
|
|
@@ -52,15 +54,17 @@ export const _Status: StoryObj<typeof AccordionSummary> = {
|
|
|
52
54
|
<AccordionDetails>
|
|
53
55
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
54
56
|
leo lobortis eget.
|
|
55
|
-
<
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
57
|
+
<Box mt={2}>
|
|
58
|
+
<Accordion>
|
|
59
|
+
<AccordionSummary aria-controls="outlinedexpanded-nested-content" id="outlinedexpanded-nested-header">
|
|
60
|
+
Nested Accordion
|
|
61
|
+
</AccordionSummary>
|
|
62
|
+
<AccordionDetails>
|
|
63
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
64
|
+
blandit leo lobortis eget.
|
|
65
|
+
</AccordionDetails>
|
|
66
|
+
</Accordion>
|
|
67
|
+
</Box>
|
|
64
68
|
</AccordionDetails>
|
|
65
69
|
</Accordion>
|
|
66
70
|
</Grid>
|