@availity/mui-accordion 0.3.0 → 1.0.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 +37 -0
- package/dist/index.js +5 -5
- package/dist/index.mjs +2 -2
- package/{introduction.stories.mdx → introduction.mdx} +3 -0
- package/package.json +9 -9
- package/src/lib/Accordion.stories.tsx +29 -20
- package/src/lib/Accordion.tsx +15 -20
- package/src/lib/AccordionSummary.stories.tsx +32 -14
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,43 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [1.0.0](https://github.com/Availity/element/compare/@availity/mui-accordion@1.0.0-alpha.0...@availity/mui-accordion@1.0.0) (2025-02-25)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `mui-icon` updated to version `0.3.0`
|
|
10
|
+
* `mui-button` updated to version `0.3.0`
|
|
11
|
+
* `mui-chip` updated to version `0.3.0`
|
|
12
|
+
* `mui-layout` updated to version `0.3.0`
|
|
13
|
+
* `mui-typography` updated to version `0.3.0`
|
|
14
|
+
|
|
15
|
+
### ⚠ BREAKING CHANGES
|
|
16
|
+
|
|
17
|
+
* upgrade to @mui/material v6
|
|
18
|
+
|
|
19
|
+
### Miscellaneous Chores
|
|
20
|
+
|
|
21
|
+
* element v1 release ([a6e3567](https://github.com/Availity/element/commit/a6e35671185b9f13d25c7a39c4488ecb8774633e))
|
|
22
|
+
|
|
23
|
+
## [1.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/mui-accordion@0.3.0...@availity/mui-accordion@1.0.0-alpha.0) (2025-02-24)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### ⚠ BREAKING CHANGES
|
|
27
|
+
|
|
28
|
+
* upgraded to @mui/material v6
|
|
29
|
+
* **element:** upgraded to @mui/material v6
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
|
|
33
|
+
* **element:** upgrade to @mui/material v6 ([cb958bb](https://github.com/Availity/element/commit/cb958bba99a4f1ee6dab323f0ff54b69e6fd3493))
|
|
34
|
+
* upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
|
|
35
|
+
* upgrade to MUI v6 ([7febd6f](https://github.com/Availity/element/commit/7febd6fd4fd58e87e1c97a832cea3b4595a35d58))
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
### Bug Fixes
|
|
39
|
+
|
|
40
|
+
* **mui-accordion:** cleanup Accordion styling to account for new h3 layer ([031f86e](https://github.com/Availity/element/commit/031f86e7821716cdf93c375f5118dbe02431ad44))
|
|
41
|
+
|
|
5
42
|
## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-accordion@0.2.10...@availity/mui-accordion@0.3.0) (2025-02-04)
|
|
6
43
|
|
|
7
44
|
### Dependency Updates
|
package/dist/index.js
CHANGED
|
@@ -57,14 +57,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
57
57
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
58
58
|
|
|
59
59
|
// src/index.ts
|
|
60
|
-
var
|
|
61
|
-
__export(
|
|
60
|
+
var index_exports = {};
|
|
61
|
+
__export(index_exports, {
|
|
62
62
|
Accordion: () => Accordion,
|
|
63
63
|
AccordionActions: () => AccordionActions,
|
|
64
64
|
AccordionDetails: () => AccordionDetails,
|
|
65
65
|
AccordionSummary: () => AccordionSummary
|
|
66
66
|
});
|
|
67
|
-
module.exports = __toCommonJS(
|
|
67
|
+
module.exports = __toCommonJS(index_exports);
|
|
68
68
|
|
|
69
69
|
// src/lib/Accordion.tsx
|
|
70
70
|
var import_Accordion = __toESM(require("@mui/material/Accordion"));
|
|
@@ -77,7 +77,7 @@ var FilledAccordion = (0, import_styles.styled)(import_Accordion.default, {
|
|
|
77
77
|
overridesResolver: (props, styles) => styles.avFilled
|
|
78
78
|
})(({ theme }) => ({
|
|
79
79
|
borderColor: theme.palette.grey[100],
|
|
80
|
-
"> .MuiAccordionSummary-root": {
|
|
80
|
+
"> .MuiAccordion-heading .MuiAccordionSummary-root": {
|
|
81
81
|
backgroundColor: theme.palette.grey[100]
|
|
82
82
|
}
|
|
83
83
|
}));
|
|
@@ -87,7 +87,7 @@ var OutlinedAccordion = (0, import_styles.styled)(import_Accordion.default, {
|
|
|
87
87
|
overridesResolver: (props, styles) => styles.avOutlined
|
|
88
88
|
})(({ theme }) => ({
|
|
89
89
|
borderColor: theme.palette.divider,
|
|
90
|
-
"> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
|
|
90
|
+
"> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
|
|
91
91
|
backgroundColor: theme.palette.background.paper
|
|
92
92
|
},
|
|
93
93
|
"> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type": {
|
package/dist/index.mjs
CHANGED
|
@@ -41,7 +41,7 @@ var FilledAccordion = styled(MuiAccordion, {
|
|
|
41
41
|
overridesResolver: (props, styles) => styles.avFilled
|
|
42
42
|
})(({ theme }) => ({
|
|
43
43
|
borderColor: theme.palette.grey[100],
|
|
44
|
-
"> .MuiAccordionSummary-root": {
|
|
44
|
+
"> .MuiAccordion-heading .MuiAccordionSummary-root": {
|
|
45
45
|
backgroundColor: theme.palette.grey[100]
|
|
46
46
|
}
|
|
47
47
|
}));
|
|
@@ -51,7 +51,7 @@ var OutlinedAccordion = styled(MuiAccordion, {
|
|
|
51
51
|
overridesResolver: (props, styles) => styles.avOutlined
|
|
52
52
|
})(({ theme }) => ({
|
|
53
53
|
borderColor: theme.palette.divider,
|
|
54
|
-
"> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
|
|
54
|
+
"> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
|
|
55
55
|
backgroundColor: theme.palette.background.paper
|
|
56
56
|
},
|
|
57
57
|
"> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type": {
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { Markdown } from '@storybook/blocks';
|
|
2
2
|
import { Meta } from '@storybook/addon-docs';
|
|
3
3
|
import ReadMe from './README.md?raw';
|
|
4
|
+
import CHANGELOG from './CHANGELOG.md?raw';
|
|
4
5
|
|
|
5
6
|
<Meta title="Components/Accordion/Introduction" />
|
|
6
7
|
|
|
7
8
|
<Markdown>{ReadMe}</Markdown>
|
|
9
|
+
|
|
10
|
+
<Markdown>{CHANGELOG}</Markdown>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-accordion",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Availity MUI Accordion Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -40,19 +40,19 @@
|
|
|
40
40
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@availity/mui-button": "^0.
|
|
44
|
-
"@availity/mui-chip": "^0.
|
|
45
|
-
"@availity/mui-layout": "^0.
|
|
46
|
-
"@availity/mui-typography": "^0.
|
|
47
|
-
"@mui/material": "^
|
|
43
|
+
"@availity/mui-button": "^1.0.0",
|
|
44
|
+
"@availity/mui-chip": "^1.0.0",
|
|
45
|
+
"@availity/mui-layout": "^1.0.0",
|
|
46
|
+
"@availity/mui-typography": "^1.0.0",
|
|
47
|
+
"@mui/material": "^6.4.5",
|
|
48
48
|
"react": "18.2.0",
|
|
49
49
|
"react-dom": "18.2.0",
|
|
50
|
-
"tsup": "^8.
|
|
50
|
+
"tsup": "^8.3.6",
|
|
51
51
|
"typescript": "^5.4.5"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@availity/mui-icon": "^0.
|
|
55
|
-
"@mui/material": "^
|
|
54
|
+
"@availity/mui-icon": "^1.0.0",
|
|
55
|
+
"@mui/material": "^6.4.5",
|
|
56
56
|
"react": ">=16.3.0"
|
|
57
57
|
},
|
|
58
58
|
"publishConfig": {
|
|
@@ -41,7 +41,7 @@ export const _Accordion: StoryObj<typeof Accordion> = {
|
|
|
41
41
|
export const _Variants: StoryObj<typeof Accordion> = {
|
|
42
42
|
render: (args: AccordionProps) => (
|
|
43
43
|
<Grid container spacing={1}>
|
|
44
|
-
<Grid
|
|
44
|
+
<Grid size={{ xs: 12 }}>
|
|
45
45
|
<Accordion {...args}>
|
|
46
46
|
<AccordionSummary aria-controls="filled-summary-content" id="filled-summary-header" secondary="Secondary">
|
|
47
47
|
Filled
|
|
@@ -49,7 +49,7 @@ export const _Variants: StoryObj<typeof Accordion> = {
|
|
|
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
|
-
<Box
|
|
52
|
+
<Box sx={{ mt: 2 }}>
|
|
53
53
|
<Accordion>
|
|
54
54
|
<AccordionSummary aria-controls="filled-nested-content" id="filled-nested-header">
|
|
55
55
|
Filled Nested Accordion
|
|
@@ -63,15 +63,15 @@ export const _Variants: StoryObj<typeof Accordion> = {
|
|
|
63
63
|
</AccordionDetails>
|
|
64
64
|
</Accordion>
|
|
65
65
|
</Grid>
|
|
66
|
-
<Grid
|
|
66
|
+
<Grid size={{ xs: 12 }}>
|
|
67
67
|
<Accordion {...args} variant="outlined">
|
|
68
|
-
<AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header"
|
|
68
|
+
<AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header" secondary="Secondary">
|
|
69
69
|
Outlined
|
|
70
70
|
</AccordionSummary>
|
|
71
71
|
<AccordionDetails>
|
|
72
72
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
73
73
|
leo lobortis eget.
|
|
74
|
-
<Box
|
|
74
|
+
<Box sx={{ mt: 2 }}>
|
|
75
75
|
<Accordion variant="outlined">
|
|
76
76
|
<AccordionSummary aria-controls="outlined-nested-content" id="outlined-nested-header">
|
|
77
77
|
Outlined Nested Accordion
|
|
@@ -95,7 +95,7 @@ export const _Variants: StoryObj<typeof Accordion> = {
|
|
|
95
95
|
*
|
|
96
96
|
* The `Accordion` will also need to be wrapped to add any top/bottom margins -
|
|
97
97
|
* this is due to Material's default gutter behavior when expanded along with how they overwrite the behavior when disabling the gutters.
|
|
98
|
-
*/
|
|
98
|
+
*/
|
|
99
99
|
export const _Spacing: StoryObj<typeof Accordion> = {
|
|
100
100
|
render: () => (
|
|
101
101
|
<div>
|
|
@@ -135,11 +135,11 @@ export const _Spacing: StoryObj<typeof Accordion> = {
|
|
|
135
135
|
</AccordionActions>
|
|
136
136
|
</Accordion>
|
|
137
137
|
</div>
|
|
138
|
-
<Grid container spacing={1}
|
|
138
|
+
<Grid container spacing={1} sx={{ mt: 2 }}>
|
|
139
139
|
<Typography variant="h5" component="h2">
|
|
140
140
|
Separated in a Grid
|
|
141
141
|
</Typography>
|
|
142
|
-
<Grid
|
|
142
|
+
<Grid size={{ xs: 12 }}>
|
|
143
143
|
<Accordion>
|
|
144
144
|
<AccordionSummary aria-controls="panel1-content" id="panel1-header">
|
|
145
145
|
Accordion 4
|
|
@@ -150,7 +150,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
|
|
|
150
150
|
</AccordionDetails>
|
|
151
151
|
</Accordion>
|
|
152
152
|
</Grid>
|
|
153
|
-
<Grid
|
|
153
|
+
<Grid size={{ xs: 12 }}>
|
|
154
154
|
<Accordion>
|
|
155
155
|
<AccordionSummary aria-controls="panel2-content" id="panel2-header">
|
|
156
156
|
Accordion 5
|
|
@@ -161,7 +161,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
|
|
|
161
161
|
</AccordionDetails>
|
|
162
162
|
</Accordion>
|
|
163
163
|
</Grid>
|
|
164
|
-
<Grid
|
|
164
|
+
<Grid size={{ xs: 12 }}>
|
|
165
165
|
<Accordion>
|
|
166
166
|
<AccordionSummary aria-controls="panel3-content" id="panel3-header">
|
|
167
167
|
Accordion 6 with Actions
|
|
@@ -184,7 +184,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
|
|
|
184
184
|
export const _States: StoryObj<typeof Accordion> = {
|
|
185
185
|
render: (args: AccordionProps) => (
|
|
186
186
|
<Grid container spacing={1}>
|
|
187
|
-
<Grid
|
|
187
|
+
<Grid size={{ xs: 12 }}>
|
|
188
188
|
<Accordion {...args} defaultExpanded>
|
|
189
189
|
<AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
|
|
190
190
|
Filled Expanded
|
|
@@ -202,7 +202,7 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
202
202
|
</AccordionDetails>
|
|
203
203
|
</Accordion>
|
|
204
204
|
</Grid>
|
|
205
|
-
<Grid
|
|
205
|
+
<Grid size={{ xs: 12 }}>
|
|
206
206
|
<Accordion {...args} variant="outlined" defaultExpanded>
|
|
207
207
|
<AccordionSummary aria-controls="outlinedexpanded-content" id="outlinedexpanded-header">
|
|
208
208
|
Outlined Expanded
|
|
@@ -220,7 +220,7 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
220
220
|
</AccordionDetails>
|
|
221
221
|
</Accordion>
|
|
222
222
|
</Grid>
|
|
223
|
-
<Grid
|
|
223
|
+
<Grid size={{ xs: 12 }}>
|
|
224
224
|
<Accordion {...args}>
|
|
225
225
|
<AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
|
|
226
226
|
Focused
|
|
@@ -231,7 +231,7 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
231
231
|
</AccordionDetails>
|
|
232
232
|
</Accordion>
|
|
233
233
|
</Grid>
|
|
234
|
-
<Grid
|
|
234
|
+
<Grid size={{ xs: 12 }}>
|
|
235
235
|
<Accordion {...args} disabled>
|
|
236
236
|
<AccordionSummary aria-controls="disabled-content" id="disabled-header">
|
|
237
237
|
Disabled
|
|
@@ -249,20 +249,29 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
249
249
|
export const _Status: StoryObj<typeof Accordion> = {
|
|
250
250
|
render: (args: AccordionProps) => (
|
|
251
251
|
<Accordion {...args}>
|
|
252
|
-
<AccordionSummary
|
|
252
|
+
<AccordionSummary
|
|
253
|
+
aria-controls="status-summary-content"
|
|
254
|
+
id="status-summary-header"
|
|
255
|
+
secondary={
|
|
256
|
+
<>
|
|
257
|
+
Secondary
|
|
258
|
+
<StatusChip color="success" label="Approved" sx={{ marginLeft: 2 }} />
|
|
259
|
+
</>
|
|
260
|
+
}
|
|
261
|
+
>
|
|
253
262
|
Accordion with Status
|
|
254
263
|
</AccordionSummary>
|
|
255
264
|
<AccordionDetails>
|
|
256
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
257
|
-
|
|
258
|
-
<Box
|
|
265
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
266
|
+
lobortis eget.
|
|
267
|
+
<Box sx={{ mt: 2 }}>
|
|
259
268
|
<Accordion>
|
|
260
269
|
<AccordionSummary aria-controls="status-nested-content" id="status-nested-header">
|
|
261
270
|
Nested Accordion
|
|
262
271
|
</AccordionSummary>
|
|
263
272
|
<AccordionDetails>
|
|
264
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
265
|
-
|
|
273
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
274
|
+
leo lobortis eget.
|
|
266
275
|
</AccordionDetails>
|
|
267
276
|
</Accordion>
|
|
268
277
|
</Box>
|
package/src/lib/Accordion.tsx
CHANGED
|
@@ -10,14 +10,7 @@ export type AccordionProps = {
|
|
|
10
10
|
* @default false
|
|
11
11
|
*/
|
|
12
12
|
disableNestedStyling?: boolean;
|
|
13
|
-
} & Omit<
|
|
14
|
-
MuiAccordionProps,
|
|
15
|
-
'component'
|
|
16
|
-
| 'elevation'
|
|
17
|
-
| 'TransitionComponent'
|
|
18
|
-
| 'TransitionProps'
|
|
19
|
-
| 'variant'
|
|
20
|
-
>;
|
|
13
|
+
} & Omit<MuiAccordionProps, 'component' | 'elevation' | 'TransitionComponent' | 'TransitionProps' | 'variant'>;
|
|
21
14
|
|
|
22
15
|
const FilledAccordion = styled(MuiAccordion, {
|
|
23
16
|
name: 'MuiAccordion',
|
|
@@ -25,9 +18,9 @@ const FilledAccordion = styled(MuiAccordion, {
|
|
|
25
18
|
overridesResolver: (props, styles) => styles.avFilled,
|
|
26
19
|
})(({ theme }) => ({
|
|
27
20
|
borderColor: theme.palette.grey[100],
|
|
28
|
-
'> .MuiAccordionSummary-root': {
|
|
21
|
+
'> .MuiAccordion-heading .MuiAccordionSummary-root': {
|
|
29
22
|
backgroundColor: theme.palette.grey[100],
|
|
30
|
-
}
|
|
23
|
+
},
|
|
31
24
|
}));
|
|
32
25
|
|
|
33
26
|
const OutlinedAccordion = styled(MuiAccordion, {
|
|
@@ -36,21 +29,23 @@ const OutlinedAccordion = styled(MuiAccordion, {
|
|
|
36
29
|
overridesResolver: (props, styles) => styles.avOutlined,
|
|
37
30
|
})(({ theme }) => ({
|
|
38
31
|
borderColor: theme.palette.divider,
|
|
39
|
-
'> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': {
|
|
32
|
+
'> .MuiAccordion-heading .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': {
|
|
40
33
|
backgroundColor: theme.palette.background.paper,
|
|
41
34
|
},
|
|
42
|
-
'> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type':
|
|
43
|
-
|
|
44
|
-
|
|
35
|
+
'> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type':
|
|
36
|
+
{
|
|
37
|
+
borderTop: `1px solid ${theme.palette.divider}`,
|
|
38
|
+
},
|
|
45
39
|
}));
|
|
46
40
|
|
|
47
41
|
export const Accordion = forwardRef<HTMLDivElement, AccordionProps>((allProps, ref) => {
|
|
48
|
-
const { variant =
|
|
42
|
+
const { variant = 'filled', disableNestedStyling = false, className, ...props } = allProps;
|
|
49
43
|
|
|
50
|
-
const classnames = `${variant ===
|
|
44
|
+
const classnames = `${variant === 'filled' ? 'MuiAccordion-avFilled' : 'MuiAccordion-avOutlined'}${disableNestedStyling ? ' Av-disableNested' : ''} ${className || ''}`;
|
|
51
45
|
|
|
52
|
-
return variant ===
|
|
53
|
-
<FilledAccordion className={classnames} {...props} ref={ref}/>
|
|
54
|
-
|
|
55
|
-
<OutlinedAccordion className={classnames} {...props} ref={ref}/>
|
|
46
|
+
return variant === 'filled' ? (
|
|
47
|
+
<FilledAccordion className={classnames} {...props} ref={ref} />
|
|
48
|
+
) : (
|
|
49
|
+
<OutlinedAccordion className={classnames} {...props} ref={ref} />
|
|
50
|
+
);
|
|
56
51
|
});
|
|
@@ -10,29 +10,38 @@ const meta: Meta<typeof AccordionSummary> = {
|
|
|
10
10
|
component: AccordionSummary,
|
|
11
11
|
tags: ['autodocs'],
|
|
12
12
|
args: {
|
|
13
|
-
primary:
|
|
14
|
-
secondary:
|
|
15
|
-
}
|
|
13
|
+
primary: 'Primary',
|
|
14
|
+
secondary: 'Secondary',
|
|
15
|
+
},
|
|
16
16
|
};
|
|
17
17
|
|
|
18
18
|
export default meta;
|
|
19
19
|
|
|
20
20
|
export const _AccordionSummary: StoryObj<typeof AccordionSummary> = {
|
|
21
|
-
render: (args: AccordionSummaryProps) => <AccordionSummary {...args}/>,
|
|
21
|
+
render: (args: AccordionSummaryProps) => <AccordionSummary {...args} />,
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
export const _Status: StoryObj<typeof AccordionSummary> = {
|
|
25
25
|
render: (args: AccordionSummaryProps) => (
|
|
26
26
|
<Grid container spacing={1}>
|
|
27
|
-
<Grid
|
|
27
|
+
<Grid size={{ xs: 12 }}>
|
|
28
28
|
<Accordion {...args}>
|
|
29
|
-
<AccordionSummary
|
|
29
|
+
<AccordionSummary
|
|
30
|
+
aria-controls="filled-summary-content"
|
|
31
|
+
id="filled-summary-header"
|
|
32
|
+
secondary={
|
|
33
|
+
<>
|
|
34
|
+
Secondary
|
|
35
|
+
<StatusChip color="success" label="Approved" sx={{ marginLeft: 2 }} />
|
|
36
|
+
</>
|
|
37
|
+
}
|
|
38
|
+
>
|
|
30
39
|
Filled Summary
|
|
31
40
|
</AccordionSummary>
|
|
32
41
|
<AccordionDetails>
|
|
33
42
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
34
43
|
leo lobortis eget.
|
|
35
|
-
<Box
|
|
44
|
+
<Box sx={{ mt: 2 }}>
|
|
36
45
|
<Accordion>
|
|
37
46
|
<AccordionSummary aria-controls="defaultexpanded-nested-content" id="defaultexpanded-nested-header">
|
|
38
47
|
Filled Nested Accordion
|
|
@@ -46,15 +55,24 @@ export const _Status: StoryObj<typeof AccordionSummary> = {
|
|
|
46
55
|
</AccordionDetails>
|
|
47
56
|
</Accordion>
|
|
48
57
|
</Grid>
|
|
49
|
-
<Grid
|
|
58
|
+
<Grid size={{ xs: 12 }}>
|
|
50
59
|
<Accordion {...args} variant="outlined">
|
|
51
|
-
<AccordionSummary
|
|
60
|
+
<AccordionSummary
|
|
61
|
+
aria-controls="outlined-summary-content"
|
|
62
|
+
id="outlined-summary-header"
|
|
63
|
+
secondary={
|
|
64
|
+
<>
|
|
65
|
+
Secondary
|
|
66
|
+
<StatusChip color="success" label="Approved" sx={{ marginLeft: 2 }} />
|
|
67
|
+
</>
|
|
68
|
+
}
|
|
69
|
+
>
|
|
52
70
|
Outlined Summary
|
|
53
71
|
</AccordionSummary>
|
|
54
72
|
<AccordionDetails>
|
|
55
73
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
56
74
|
leo lobortis eget.
|
|
57
|
-
<Box
|
|
75
|
+
<Box sx={{ mt: 2 }}>
|
|
58
76
|
<Accordion>
|
|
59
77
|
<AccordionSummary aria-controls="outlinedexpanded-nested-content" id="outlinedexpanded-nested-header">
|
|
60
78
|
Outlined Nested Accordion
|
|
@@ -75,7 +93,7 @@ export const _Status: StoryObj<typeof AccordionSummary> = {
|
|
|
75
93
|
export const _States: StoryObj<typeof Accordion> = {
|
|
76
94
|
render: (args: AccordionProps) => (
|
|
77
95
|
<Grid container spacing={1}>
|
|
78
|
-
<Grid
|
|
96
|
+
<Grid size={{ xs: 12 }}>
|
|
79
97
|
<Accordion {...args} defaultExpanded>
|
|
80
98
|
<AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
|
|
81
99
|
Filled Expanded
|
|
@@ -93,7 +111,7 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
93
111
|
</AccordionDetails>
|
|
94
112
|
</Accordion>
|
|
95
113
|
</Grid>
|
|
96
|
-
<Grid
|
|
114
|
+
<Grid size={{ xs: 12 }}>
|
|
97
115
|
<Accordion {...args} variant="outlined" defaultExpanded>
|
|
98
116
|
<AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header">
|
|
99
117
|
Outlined Expanded
|
|
@@ -104,7 +122,7 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
104
122
|
</AccordionDetails>
|
|
105
123
|
</Accordion>
|
|
106
124
|
</Grid>
|
|
107
|
-
<Grid
|
|
125
|
+
<Grid size={{ xs: 12 }}>
|
|
108
126
|
<Accordion {...args}>
|
|
109
127
|
<AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
|
|
110
128
|
Focused
|
|
@@ -115,7 +133,7 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
115
133
|
</AccordionDetails>
|
|
116
134
|
</Accordion>
|
|
117
135
|
</Grid>
|
|
118
|
-
<Grid
|
|
136
|
+
<Grid size={{ xs: 12 }}>
|
|
119
137
|
<Accordion {...args} disabled>
|
|
120
138
|
<AccordionSummary aria-controls="disabled-content" id="disabled-header">
|
|
121
139
|
Disabled
|