@availity/mui-accordion 0.1.0 → 0.1.2
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,15 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-accordion@0.1.1...@availity/mui-accordion@0.1.2) (2024-04-01)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Performance Improvements
|
|
9
|
+
|
|
10
|
+
* **mui-accordion:** move elemend deps to peerDeps and avoid mui deps in stories ([6190f8c](https://github.com/Availity/element/commit/6190f8c99260ae0179dc6bd226823926b3c0e695))
|
|
11
|
+
|
|
12
|
+
## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-accordion@0.1.0...@availity/mui-accordion@0.1.1) (2024-03-27)
|
|
13
|
+
|
|
5
14
|
## 0.1.0 (2024-03-15)
|
|
6
15
|
|
|
7
16
|
### Dependency Updates
|
package/README.md
CHANGED
|
@@ -34,7 +34,7 @@ yarn add @availity/element
|
|
|
34
34
|
|
|
35
35
|
#### NPM
|
|
36
36
|
|
|
37
|
-
_This package has a few peer dependencies. Add `@mui/material
|
|
37
|
+
_This package has a few peer dependencies. Add `@mui/material`, `@emotion/react`, & `@availity/mui-icon` to your project if not already installed._
|
|
38
38
|
|
|
39
39
|
```bash
|
|
40
40
|
npm install @availity/mui-accordion
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-accordion",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Availity MUI Accordion Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"publish": "yarn npm publish --tolerate-republish --access public",
|
|
32
32
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
33
33
|
},
|
|
34
|
-
"dependencies": {
|
|
35
|
-
"@availity/mui-icon": "0.8.0"
|
|
36
|
-
},
|
|
37
34
|
"devDependencies": {
|
|
35
|
+
"@availity/mui-button": "^0.6.4",
|
|
36
|
+
"@availity/mui-layout": "^0.1.4",
|
|
37
|
+
"@availity/mui-typography": "^0.1.6",
|
|
38
38
|
"@mui/material": "^5.11.9",
|
|
39
39
|
"react": "18.2.0",
|
|
40
40
|
"react-dom": "18.2.0",
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
"typescript": "^4.6.4"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
+
"@availity/mui-icon": "^0.8.0",
|
|
45
46
|
"@mui/material": "^5.11.9",
|
|
46
47
|
"react": ">=16.3.0"
|
|
47
48
|
},
|
|
@@ -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
|
|
5
|
+
import { Grid } from '@availity/mui-layout';
|
|
6
|
+
import { Button } from '@availity/mui-button';
|
|
7
|
+
import { Typography } from '@availity/mui-typography';
|
|
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
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
4
|
import { AccordionActions, AccordionActionsProps } from '..';
|
|
5
|
-
import Button from '@mui
|
|
5
|
+
import { Button } from '@availity/mui-button';
|
|
6
6
|
|
|
7
7
|
const meta: Meta<typeof AccordionActions> = {
|
|
8
8
|
title: 'Components/Accordion/AccordionActions',
|
|
@@ -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
|
};
|