@availity/mui-accordion 0.1.9 → 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 +17 -0
- package/dist/index.d.mts +38 -2
- package/dist/index.d.ts +38 -2
- package/dist/index.js +88 -2
- package/dist/index.mjs +88 -2
- package/package.json +2 -1
- package/src/lib/Accordion.stories.tsx +133 -27
- package/src/lib/Accordion.tsx +52 -4
- package/src/lib/AccordionSummary.stories.tsx +117 -2
- package/src/lib/AccordionSummary.tsx +52 -5
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,23 @@
|
|
|
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
|
+
|
|
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)
|
|
13
|
+
|
|
14
|
+
### Dependency Updates
|
|
15
|
+
|
|
16
|
+
* `mui-chip` updated to version `0.1.9`
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* **mui-accordion:** add outlined variant ([1fe88a8](https://github.com/Availity/element/commit/1fe88a8b05a88b453c5d56a18c0fdefa4f368c79))
|
|
21
|
+
|
|
5
22
|
## [0.1.9](https://github.com/Availity/element/compare/@availity/mui-accordion@0.1.8...@availity/mui-accordion@0.1.9) (2024-08-08)
|
|
6
23
|
|
|
7
24
|
### Dependency Updates
|
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
import { AccordionProps as AccordionProps$1 } from '@mui/material/Accordion';
|
|
3
4
|
import { AccordionActionsProps as AccordionActionsProps$1 } from '@mui/material/AccordionActions';
|
|
4
5
|
import { AccordionDetailsProps as AccordionDetailsProps$1 } from '@mui/material/AccordionDetails';
|
|
5
6
|
import { AccordionSummaryProps as AccordionSummaryProps$1 } from '@mui/material/AccordionSummary';
|
|
7
|
+
import { TypographyProps as TypographyProps$1 } from '@mui/material/Typography';
|
|
6
8
|
|
|
7
|
-
type AccordionProps =
|
|
9
|
+
type AccordionProps = {
|
|
10
|
+
/** @default "filled" */
|
|
11
|
+
variant?: 'filled' | 'outlined';
|
|
12
|
+
/**
|
|
13
|
+
* Disable nested styling for child `Accordions`
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
disableNestedStyling?: boolean;
|
|
17
|
+
} & Omit<AccordionProps$1, 'component' | 'elevation' | 'TransitionComponent' | 'TransitionProps' | 'variant'>;
|
|
8
18
|
declare const Accordion: react.ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
9
19
|
|
|
10
20
|
type AccordionActionsProps = AccordionActionsProps$1;
|
|
@@ -13,7 +23,33 @@ declare const AccordionActions: react.ForwardRefExoticComponent<Omit<AccordionAc
|
|
|
13
23
|
type AccordionDetailsProps = AccordionDetailsProps$1;
|
|
14
24
|
declare const AccordionDetails: react.ForwardRefExoticComponent<Omit<AccordionDetailsProps$1, "ref"> & react.RefAttributes<unknown>>;
|
|
15
25
|
|
|
16
|
-
|
|
26
|
+
declare module '@mui/material/styles' {
|
|
27
|
+
interface TypographyVariants {
|
|
28
|
+
agreement: React.CSSProperties;
|
|
29
|
+
}
|
|
30
|
+
interface TypographyVariantsOptions {
|
|
31
|
+
agreement?: React.CSSProperties;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
declare module '@mui/material/Typography' {
|
|
35
|
+
interface TypographyPropsVariantOverrides {
|
|
36
|
+
agreement: true;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
interface TypographyProps extends TypographyProps$1 {
|
|
40
|
+
children?: React.ReactNode;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
type AccordionSummaryProps = {
|
|
44
|
+
/** The main content element. Aliased by the `children` prop. */
|
|
45
|
+
primary?: ReactNode;
|
|
46
|
+
/** These props will be forwarded to the primary typography component. Update `component` to reflect the correct heading level for accessibility.*/
|
|
47
|
+
primaryProps?: Omit<TypographyProps, 'className'>;
|
|
48
|
+
/** The secondary content element. */
|
|
49
|
+
secondary?: ReactNode;
|
|
50
|
+
/** These props will be forwarded to the secondary typography component. */
|
|
51
|
+
secondaryProps?: Omit<TypographyProps, 'className'>;
|
|
52
|
+
} & Omit<AccordionSummaryProps$1, 'centerRipple' | 'component' | 'disableRipple' | 'disableTouchRipple' | 'expandIcon' | 'focusRipple' | 'focusVisibleClassname' | 'onFocusVisible' | 'TouchRippleProps' | 'touchRippleRef'>;
|
|
17
53
|
declare const AccordionSummary: react.ForwardRefExoticComponent<Omit<AccordionSummaryProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
18
54
|
|
|
19
55
|
export { Accordion, AccordionActions, type AccordionActionsProps, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
2
3
|
import { AccordionProps as AccordionProps$1 } from '@mui/material/Accordion';
|
|
3
4
|
import { AccordionActionsProps as AccordionActionsProps$1 } from '@mui/material/AccordionActions';
|
|
4
5
|
import { AccordionDetailsProps as AccordionDetailsProps$1 } from '@mui/material/AccordionDetails';
|
|
5
6
|
import { AccordionSummaryProps as AccordionSummaryProps$1 } from '@mui/material/AccordionSummary';
|
|
7
|
+
import { TypographyProps as TypographyProps$1 } from '@mui/material/Typography';
|
|
6
8
|
|
|
7
|
-
type AccordionProps =
|
|
9
|
+
type AccordionProps = {
|
|
10
|
+
/** @default "filled" */
|
|
11
|
+
variant?: 'filled' | 'outlined';
|
|
12
|
+
/**
|
|
13
|
+
* Disable nested styling for child `Accordions`
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
disableNestedStyling?: boolean;
|
|
17
|
+
} & Omit<AccordionProps$1, 'component' | 'elevation' | 'TransitionComponent' | 'TransitionProps' | 'variant'>;
|
|
8
18
|
declare const Accordion: react.ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
9
19
|
|
|
10
20
|
type AccordionActionsProps = AccordionActionsProps$1;
|
|
@@ -13,7 +23,33 @@ declare const AccordionActions: react.ForwardRefExoticComponent<Omit<AccordionAc
|
|
|
13
23
|
type AccordionDetailsProps = AccordionDetailsProps$1;
|
|
14
24
|
declare const AccordionDetails: react.ForwardRefExoticComponent<Omit<AccordionDetailsProps$1, "ref"> & react.RefAttributes<unknown>>;
|
|
15
25
|
|
|
16
|
-
|
|
26
|
+
declare module '@mui/material/styles' {
|
|
27
|
+
interface TypographyVariants {
|
|
28
|
+
agreement: React.CSSProperties;
|
|
29
|
+
}
|
|
30
|
+
interface TypographyVariantsOptions {
|
|
31
|
+
agreement?: React.CSSProperties;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
declare module '@mui/material/Typography' {
|
|
35
|
+
interface TypographyPropsVariantOverrides {
|
|
36
|
+
agreement: true;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
interface TypographyProps extends TypographyProps$1 {
|
|
40
|
+
children?: React.ReactNode;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
type AccordionSummaryProps = {
|
|
44
|
+
/** The main content element. Aliased by the `children` prop. */
|
|
45
|
+
primary?: ReactNode;
|
|
46
|
+
/** These props will be forwarded to the primary typography component. Update `component` to reflect the correct heading level for accessibility.*/
|
|
47
|
+
primaryProps?: Omit<TypographyProps, 'className'>;
|
|
48
|
+
/** The secondary content element. */
|
|
49
|
+
secondary?: ReactNode;
|
|
50
|
+
/** These props will be forwarded to the secondary typography component. */
|
|
51
|
+
secondaryProps?: Omit<TypographyProps, 'className'>;
|
|
52
|
+
} & Omit<AccordionSummaryProps$1, 'centerRipple' | 'component' | 'disableRipple' | 'disableTouchRipple' | 'expandIcon' | 'focusRipple' | 'focusVisibleClassname' | 'onFocusVisible' | 'TouchRippleProps' | 'touchRippleRef'>;
|
|
17
53
|
declare const AccordionSummary: react.ForwardRefExoticComponent<Omit<AccordionSummaryProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
18
54
|
|
|
19
55
|
export { Accordion, AccordionActions, type AccordionActionsProps, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps };
|
package/dist/index.js
CHANGED
|
@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
return a;
|
|
23
23
|
};
|
|
24
24
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
25
37
|
var __export = (target, all) => {
|
|
26
38
|
for (var name in all)
|
|
27
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -56,9 +68,37 @@ module.exports = __toCommonJS(src_exports);
|
|
|
56
68
|
|
|
57
69
|
// src/lib/Accordion.tsx
|
|
58
70
|
var import_Accordion = __toESM(require("@mui/material/Accordion"));
|
|
71
|
+
var import_styles = require("@mui/material/styles");
|
|
59
72
|
var import_react = require("react");
|
|
60
73
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
61
|
-
var
|
|
74
|
+
var FilledAccordion = (0, import_styles.styled)(import_Accordion.default, {
|
|
75
|
+
name: "MuiAccordion",
|
|
76
|
+
slot: "AvFilled",
|
|
77
|
+
overridesResolver: (props, styles) => styles.avFilled
|
|
78
|
+
})(({ theme }) => ({
|
|
79
|
+
borderColor: theme.palette.grey[100],
|
|
80
|
+
"> .MuiAccordionSummary-root": {
|
|
81
|
+
backgroundColor: theme.palette.grey[100]
|
|
82
|
+
}
|
|
83
|
+
}));
|
|
84
|
+
var OutlinedAccordion = (0, import_styles.styled)(import_Accordion.default, {
|
|
85
|
+
name: "MuiAccordion",
|
|
86
|
+
slot: "AvOutlined",
|
|
87
|
+
overridesResolver: (props, styles) => styles.avOutlined
|
|
88
|
+
})(({ theme }) => ({
|
|
89
|
+
borderColor: theme.palette.divider,
|
|
90
|
+
"> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
|
|
91
|
+
backgroundColor: theme.palette.background.paper
|
|
92
|
+
},
|
|
93
|
+
"> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type": {
|
|
94
|
+
borderTop: `1px solid ${theme.palette.divider}`
|
|
95
|
+
}
|
|
96
|
+
}));
|
|
97
|
+
var Accordion = (0, import_react.forwardRef)((allProps, ref) => {
|
|
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 ? " Av-disableNested" : ""} ${className || ""}`;
|
|
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
|
+
});
|
|
62
102
|
|
|
63
103
|
// src/lib/AccordionActions.tsx
|
|
64
104
|
var import_AccordionActions = __toESM(require("@mui/material/AccordionActions"));
|
|
@@ -75,9 +115,55 @@ var AccordionDetails = (0, import_react3.forwardRef)((props, ref) => /* @__PURE_
|
|
|
75
115
|
// src/lib/AccordionSummary.tsx
|
|
76
116
|
var import_AccordionSummary = __toESM(require("@mui/material/AccordionSummary"));
|
|
77
117
|
var import_mui_icon = require("@availity/mui-icon");
|
|
118
|
+
|
|
119
|
+
// ../typography/src/lib/Typography.tsx
|
|
78
120
|
var import_react4 = require("react");
|
|
121
|
+
var import_Typography = __toESM(require("@mui/material/Typography"));
|
|
79
122
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
80
|
-
var
|
|
123
|
+
var Typography = (0, import_react4.forwardRef)(
|
|
124
|
+
(_a, ref) => {
|
|
125
|
+
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
126
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Typography.default, __spreadProps(__spreadValues({}, rest), { ref, children }));
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
|
|
130
|
+
// src/lib/AccordionSummary.tsx
|
|
131
|
+
var import_react5 = require("react");
|
|
132
|
+
var import_styles2 = require("@mui/material/styles");
|
|
133
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
134
|
+
var PrimaryContent = (0, import_styles2.styled)(Typography, {
|
|
135
|
+
name: "MuiAccordionSummary",
|
|
136
|
+
slot: "AvPrimaryContent",
|
|
137
|
+
overridesResolver: (props, styles) => styles.avPrimaryContent
|
|
138
|
+
})(({ theme }) => ({
|
|
139
|
+
marginRight: "auto",
|
|
140
|
+
paddingRight: theme.spacing(1),
|
|
141
|
+
lineHeight: "1.5rem"
|
|
142
|
+
}));
|
|
143
|
+
var SecondaryContent = (0, import_styles2.styled)(Typography, {
|
|
144
|
+
name: "MuiAccordionSummary",
|
|
145
|
+
slot: "AvSecondaryContent",
|
|
146
|
+
overridesResolver: (props, styles) => styles.avSecondaryContent
|
|
147
|
+
})({});
|
|
148
|
+
var AccordionSummary = (0, import_react5.forwardRef)((allProps, ref) => {
|
|
149
|
+
const _a = allProps, { children, primary: primaryProp, primaryProps, secondary: secondaryProp, secondaryProps } = _a, props = __objRest(_a, ["children", "primary", "primaryProps", "secondary", "secondaryProps"]);
|
|
150
|
+
const combinedPrimaryProps = __spreadValues({
|
|
151
|
+
className: "MuiAccordionSummary-avPrimaryContent",
|
|
152
|
+
variant: "h6",
|
|
153
|
+
component: "div"
|
|
154
|
+
}, primaryProps);
|
|
155
|
+
const combinedSecondaryProps = __spreadValues({
|
|
156
|
+
className: "MuiAccordionSummary-avSecondaryContent",
|
|
157
|
+
variant: "body1",
|
|
158
|
+
component: "div"
|
|
159
|
+
}, secondaryProps);
|
|
160
|
+
const Primary = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PrimaryContent, __spreadProps(__spreadValues({}, combinedPrimaryProps), { children: primaryProp || children }));
|
|
161
|
+
const Secondary = secondaryProp ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SecondaryContent, __spreadProps(__spreadValues({}, combinedSecondaryProps), { children: secondaryProp })) : null;
|
|
162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_AccordionSummary.default, __spreadProps(__spreadValues({}, props), { expandIcon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_mui_icon.TriangleExpandIcon, {}), ref, children: [
|
|
163
|
+
Primary,
|
|
164
|
+
Secondary
|
|
165
|
+
] }));
|
|
166
|
+
});
|
|
81
167
|
// Annotate the CommonJS export names for ESM import in node:
|
|
82
168
|
0 && (module.exports = {
|
|
83
169
|
Accordion,
|
package/dist/index.mjs
CHANGED
|
@@ -17,12 +17,52 @@ var __spreadValues = (a, b) => {
|
|
|
17
17
|
return a;
|
|
18
18
|
};
|
|
19
19
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
20
32
|
|
|
21
33
|
// src/lib/Accordion.tsx
|
|
22
34
|
import MuiAccordion from "@mui/material/Accordion";
|
|
35
|
+
import { styled } from "@mui/material/styles";
|
|
23
36
|
import { forwardRef } from "react";
|
|
24
37
|
import { jsx } from "react/jsx-runtime";
|
|
25
|
-
var
|
|
38
|
+
var FilledAccordion = styled(MuiAccordion, {
|
|
39
|
+
name: "MuiAccordion",
|
|
40
|
+
slot: "AvFilled",
|
|
41
|
+
overridesResolver: (props, styles) => styles.avFilled
|
|
42
|
+
})(({ theme }) => ({
|
|
43
|
+
borderColor: theme.palette.grey[100],
|
|
44
|
+
"> .MuiAccordionSummary-root": {
|
|
45
|
+
backgroundColor: theme.palette.grey[100]
|
|
46
|
+
}
|
|
47
|
+
}));
|
|
48
|
+
var OutlinedAccordion = styled(MuiAccordion, {
|
|
49
|
+
name: "MuiAccordion",
|
|
50
|
+
slot: "AvOutlined",
|
|
51
|
+
overridesResolver: (props, styles) => styles.avOutlined
|
|
52
|
+
})(({ theme }) => ({
|
|
53
|
+
borderColor: theme.palette.divider,
|
|
54
|
+
"> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)": {
|
|
55
|
+
backgroundColor: theme.palette.background.paper
|
|
56
|
+
},
|
|
57
|
+
"> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type": {
|
|
58
|
+
borderTop: `1px solid ${theme.palette.divider}`
|
|
59
|
+
}
|
|
60
|
+
}));
|
|
61
|
+
var Accordion = forwardRef((allProps, ref) => {
|
|
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 ? " Av-disableNested" : ""} ${className || ""}`;
|
|
64
|
+
return variant === "filled" ? /* @__PURE__ */ jsx(FilledAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref })) : /* @__PURE__ */ jsx(OutlinedAccordion, __spreadProps(__spreadValues({ className: classnames }, props), { ref }));
|
|
65
|
+
});
|
|
26
66
|
|
|
27
67
|
// src/lib/AccordionActions.tsx
|
|
28
68
|
import MuiAccordionActions from "@mui/material/AccordionActions";
|
|
@@ -39,9 +79,55 @@ var AccordionDetails = forwardRef3((props, ref) => /* @__PURE__ */ jsx3(MuiAccor
|
|
|
39
79
|
// src/lib/AccordionSummary.tsx
|
|
40
80
|
import MuiAccordionSummary from "@mui/material/AccordionSummary";
|
|
41
81
|
import { TriangleExpandIcon } from "@availity/mui-icon";
|
|
82
|
+
|
|
83
|
+
// ../typography/src/lib/Typography.tsx
|
|
42
84
|
import { forwardRef as forwardRef4 } from "react";
|
|
85
|
+
import { default as MuiTypography } from "@mui/material/Typography";
|
|
43
86
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
44
|
-
var
|
|
87
|
+
var Typography = forwardRef4(
|
|
88
|
+
(_a, ref) => {
|
|
89
|
+
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
90
|
+
return /* @__PURE__ */ jsx4(MuiTypography, __spreadProps(__spreadValues({}, rest), { ref, children }));
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
// src/lib/AccordionSummary.tsx
|
|
95
|
+
import { forwardRef as forwardRef5 } from "react";
|
|
96
|
+
import { styled as styled2 } from "@mui/material/styles";
|
|
97
|
+
import { jsx as jsx5, jsxs } from "react/jsx-runtime";
|
|
98
|
+
var PrimaryContent = styled2(Typography, {
|
|
99
|
+
name: "MuiAccordionSummary",
|
|
100
|
+
slot: "AvPrimaryContent",
|
|
101
|
+
overridesResolver: (props, styles) => styles.avPrimaryContent
|
|
102
|
+
})(({ theme }) => ({
|
|
103
|
+
marginRight: "auto",
|
|
104
|
+
paddingRight: theme.spacing(1),
|
|
105
|
+
lineHeight: "1.5rem"
|
|
106
|
+
}));
|
|
107
|
+
var SecondaryContent = styled2(Typography, {
|
|
108
|
+
name: "MuiAccordionSummary",
|
|
109
|
+
slot: "AvSecondaryContent",
|
|
110
|
+
overridesResolver: (props, styles) => styles.avSecondaryContent
|
|
111
|
+
})({});
|
|
112
|
+
var AccordionSummary = forwardRef5((allProps, ref) => {
|
|
113
|
+
const _a = allProps, { children, primary: primaryProp, primaryProps, secondary: secondaryProp, secondaryProps } = _a, props = __objRest(_a, ["children", "primary", "primaryProps", "secondary", "secondaryProps"]);
|
|
114
|
+
const combinedPrimaryProps = __spreadValues({
|
|
115
|
+
className: "MuiAccordionSummary-avPrimaryContent",
|
|
116
|
+
variant: "h6",
|
|
117
|
+
component: "div"
|
|
118
|
+
}, primaryProps);
|
|
119
|
+
const combinedSecondaryProps = __spreadValues({
|
|
120
|
+
className: "MuiAccordionSummary-avSecondaryContent",
|
|
121
|
+
variant: "body1",
|
|
122
|
+
component: "div"
|
|
123
|
+
}, secondaryProps);
|
|
124
|
+
const Primary = /* @__PURE__ */ jsx5(PrimaryContent, __spreadProps(__spreadValues({}, combinedPrimaryProps), { children: primaryProp || children }));
|
|
125
|
+
const Secondary = secondaryProp ? /* @__PURE__ */ jsx5(SecondaryContent, __spreadProps(__spreadValues({}, combinedSecondaryProps), { children: secondaryProp })) : null;
|
|
126
|
+
return /* @__PURE__ */ jsxs(MuiAccordionSummary, __spreadProps(__spreadValues({}, props), { expandIcon: /* @__PURE__ */ jsx5(TriangleExpandIcon, {}), ref, children: [
|
|
127
|
+
Primary,
|
|
128
|
+
Secondary
|
|
129
|
+
] }));
|
|
130
|
+
});
|
|
45
131
|
export {
|
|
46
132
|
Accordion,
|
|
47
133
|
AccordionActions,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-accordion",
|
|
3
|
-
"version": "0.1
|
|
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,14 +2,20 @@
|
|
|
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
|
+
import { StatusChip } from '@availity/mui-chip';
|
|
7
8
|
import { Typography } from '@availity/mui-typography';
|
|
8
9
|
|
|
9
10
|
const meta: Meta<typeof Accordion> = {
|
|
10
11
|
title: 'Components/Accordion/Accordion',
|
|
11
12
|
component: Accordion,
|
|
12
13
|
tags: ['autodocs'],
|
|
14
|
+
argTypes: {
|
|
15
|
+
variant: {
|
|
16
|
+
options: ['filled', 'outlined'],
|
|
17
|
+
},
|
|
18
|
+
},
|
|
13
19
|
};
|
|
14
20
|
|
|
15
21
|
export default meta;
|
|
@@ -32,46 +38,50 @@ export const _Accordion: StoryObj<typeof Accordion> = {
|
|
|
32
38
|
),
|
|
33
39
|
};
|
|
34
40
|
|
|
35
|
-
export const
|
|
41
|
+
export const _Variants: StoryObj<typeof Accordion> = {
|
|
36
42
|
render: (args: AccordionProps) => (
|
|
37
43
|
<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
44
|
<Grid xs={12}>
|
|
57
45
|
<Accordion {...args}>
|
|
58
|
-
<AccordionSummary aria-controls="
|
|
59
|
-
|
|
46
|
+
<AccordionSummary aria-controls="filled-summary-content" id="filled-summary-header" secondary="Secondary">
|
|
47
|
+
Filled
|
|
60
48
|
</AccordionSummary>
|
|
61
49
|
<AccordionDetails>
|
|
62
50
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
63
51
|
leo lobortis eget.
|
|
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>
|
|
64
63
|
</AccordionDetails>
|
|
65
64
|
</Accordion>
|
|
66
65
|
</Grid>
|
|
67
66
|
<Grid xs={12}>
|
|
68
|
-
<Accordion {...args}
|
|
69
|
-
<AccordionSummary aria-controls="
|
|
70
|
-
|
|
67
|
+
<Accordion {...args} variant="outlined">
|
|
68
|
+
<AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header" secondary="Secondary">
|
|
69
|
+
Outlined
|
|
71
70
|
</AccordionSummary>
|
|
72
71
|
<AccordionDetails>
|
|
73
72
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
74
73
|
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>
|
|
75
85
|
</AccordionDetails>
|
|
76
86
|
</Accordion>
|
|
77
87
|
</Grid>
|
|
@@ -79,8 +89,14 @@ export const _States: StoryObj<typeof Accordion> = {
|
|
|
79
89
|
),
|
|
80
90
|
};
|
|
81
91
|
|
|
82
|
-
/**
|
|
83
|
-
|
|
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> = {
|
|
84
100
|
render: () => (
|
|
85
101
|
<div>
|
|
86
102
|
<Typography variant="h5" component="h2">
|
|
@@ -164,3 +180,93 @@ export const _AccordionGroup: StoryObj<typeof Accordion> = {
|
|
|
164
180
|
</div>
|
|
165
181
|
),
|
|
166
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
|
@@ -1,8 +1,56 @@
|
|
|
1
1
|
import MuiAccordion, { AccordionProps as MuiAccordionProps } from '@mui/material/Accordion';
|
|
2
|
+
import { styled } from '@mui/material/styles';
|
|
2
3
|
import { forwardRef } from 'react';
|
|
3
4
|
|
|
4
|
-
export type AccordionProps =
|
|
5
|
+
export type AccordionProps = {
|
|
6
|
+
/** @default "filled" */
|
|
7
|
+
variant?: 'filled' | 'outlined';
|
|
8
|
+
/**
|
|
9
|
+
* Disable nested styling for child `Accordions`
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
disableNestedStyling?: boolean;
|
|
13
|
+
} & Omit<
|
|
14
|
+
MuiAccordionProps,
|
|
15
|
+
'component'
|
|
16
|
+
| 'elevation'
|
|
17
|
+
| 'TransitionComponent'
|
|
18
|
+
| 'TransitionProps'
|
|
19
|
+
| 'variant'
|
|
20
|
+
>;
|
|
5
21
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
22
|
+
const FilledAccordion = styled(MuiAccordion, {
|
|
23
|
+
name: 'MuiAccordion',
|
|
24
|
+
slot: 'AvFilled',
|
|
25
|
+
overridesResolver: (props, styles) => styles.avFilled,
|
|
26
|
+
})(({ theme }) => ({
|
|
27
|
+
borderColor: theme.palette.grey[100],
|
|
28
|
+
'> .MuiAccordionSummary-root': {
|
|
29
|
+
backgroundColor: theme.palette.grey[100],
|
|
30
|
+
}
|
|
31
|
+
}));
|
|
32
|
+
|
|
33
|
+
const OutlinedAccordion = styled(MuiAccordion, {
|
|
34
|
+
name: 'MuiAccordion',
|
|
35
|
+
slot: 'AvOutlined',
|
|
36
|
+
overridesResolver: (props, styles) => styles.avOutlined,
|
|
37
|
+
})(({ theme }) => ({
|
|
38
|
+
borderColor: theme.palette.divider,
|
|
39
|
+
'> .MuiAccordionSummary-root:not(.Mui-focusVisible, :hover, :active)': {
|
|
40
|
+
backgroundColor: theme.palette.background.paper,
|
|
41
|
+
},
|
|
42
|
+
'> .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiAccordion-region > .MuiAccordionDetails-root:first-of-type': {
|
|
43
|
+
borderTop: `1px solid ${theme.palette.divider}`,
|
|
44
|
+
}
|
|
45
|
+
}));
|
|
46
|
+
|
|
47
|
+
export const Accordion = forwardRef<HTMLDivElement, AccordionProps>((allProps, ref) => {
|
|
48
|
+
const { variant = "filled", disableNestedStyling = false, className, ...props } = allProps;
|
|
49
|
+
|
|
50
|
+
const classnames = `${variant === "filled" ? "MuiAccordion-avFilled" : "MuiAccordion-avOutlined"}${disableNestedStyling ? " Av-disableNested" : ""} ${className || ''}`
|
|
51
|
+
|
|
52
|
+
return variant === "filled" ?
|
|
53
|
+
<FilledAccordion className={classnames} {...props} ref={ref}/>
|
|
54
|
+
:
|
|
55
|
+
<OutlinedAccordion className={classnames} {...props} ref={ref}/>
|
|
56
|
+
});
|
|
@@ -1,16 +1,131 @@
|
|
|
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 { AccordionSummary, AccordionSummaryProps } from '..';
|
|
4
|
+
import { Accordion, AccordionDetails, AccordionSummary, AccordionProps, AccordionSummaryProps } from '..';
|
|
5
|
+
import { Box, Grid } from '@availity/mui-layout';
|
|
6
|
+
import { StatusChip } from '@availity/mui-chip';
|
|
5
7
|
|
|
6
8
|
const meta: Meta<typeof AccordionSummary> = {
|
|
7
9
|
title: 'Components/Accordion/AccordionSummary',
|
|
8
10
|
component: AccordionSummary,
|
|
9
11
|
tags: ['autodocs'],
|
|
12
|
+
args: {
|
|
13
|
+
primary: "Primary",
|
|
14
|
+
secondary: "Secondary"
|
|
15
|
+
}
|
|
10
16
|
};
|
|
11
17
|
|
|
12
18
|
export default meta;
|
|
13
19
|
|
|
14
20
|
export const _AccordionSummary: StoryObj<typeof AccordionSummary> = {
|
|
15
|
-
render: (args: AccordionSummaryProps) => <AccordionSummary {...args}
|
|
21
|
+
render: (args: AccordionSummaryProps) => <AccordionSummary {...args}/>,
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export const _Status: StoryObj<typeof AccordionSummary> = {
|
|
25
|
+
render: (args: AccordionSummaryProps) => (
|
|
26
|
+
<Grid container spacing={1}>
|
|
27
|
+
<Grid xs={12}>
|
|
28
|
+
<Accordion {...args}>
|
|
29
|
+
<AccordionSummary aria-controls="filled-summary-content" id="filled-summary-header" secondary={<>Secondary<StatusChip color="success" label="Approved" sx={{marginLeft: 2}}/></>}>
|
|
30
|
+
Filled Summary
|
|
31
|
+
</AccordionSummary>
|
|
32
|
+
<AccordionDetails>
|
|
33
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
34
|
+
leo lobortis eget.
|
|
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>
|
|
46
|
+
</AccordionDetails>
|
|
47
|
+
</Accordion>
|
|
48
|
+
</Grid>
|
|
49
|
+
<Grid xs={12}>
|
|
50
|
+
<Accordion {...args} variant="outlined">
|
|
51
|
+
<AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header" secondary={<>Secondary<StatusChip color="success" label="Approved" sx={{marginLeft: 2}}/></>}>
|
|
52
|
+
Outlined Summary
|
|
53
|
+
</AccordionSummary>
|
|
54
|
+
<AccordionDetails>
|
|
55
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
56
|
+
leo lobortis eget.
|
|
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>
|
|
68
|
+
</AccordionDetails>
|
|
69
|
+
</Accordion>
|
|
70
|
+
</Grid>
|
|
71
|
+
</Grid>
|
|
72
|
+
),
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
export const _States: StoryObj<typeof Accordion> = {
|
|
76
|
+
render: (args: AccordionProps) => (
|
|
77
|
+
<Grid container spacing={1}>
|
|
78
|
+
<Grid xs={12}>
|
|
79
|
+
<Accordion {...args} defaultExpanded>
|
|
80
|
+
<AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
|
|
81
|
+
Filled Expanded
|
|
82
|
+
</AccordionSummary>
|
|
83
|
+
<AccordionDetails>
|
|
84
|
+
<Accordion>
|
|
85
|
+
<AccordionSummary aria-controls="defaultexpanded-nested-content" id="defaultexpanded-nested-header">
|
|
86
|
+
Nested Accordion
|
|
87
|
+
</AccordionSummary>
|
|
88
|
+
<AccordionDetails>
|
|
89
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
|
|
90
|
+
blandit leo lobortis eget.
|
|
91
|
+
</AccordionDetails>
|
|
92
|
+
</Accordion>
|
|
93
|
+
</AccordionDetails>
|
|
94
|
+
</Accordion>
|
|
95
|
+
</Grid>
|
|
96
|
+
<Grid xs={12}>
|
|
97
|
+
<Accordion {...args} variant="outlined" defaultExpanded>
|
|
98
|
+
<AccordionSummary aria-controls="outlined-summary-content" id="outlined-summary-header">
|
|
99
|
+
Outlined Expanded
|
|
100
|
+
</AccordionSummary>
|
|
101
|
+
<AccordionDetails>
|
|
102
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
103
|
+
leo lobortis eget.
|
|
104
|
+
</AccordionDetails>
|
|
105
|
+
</Accordion>
|
|
106
|
+
</Grid>
|
|
107
|
+
<Grid xs={12}>
|
|
108
|
+
<Accordion {...args}>
|
|
109
|
+
<AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
|
|
110
|
+
Focused
|
|
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
|
+
</Accordion>
|
|
117
|
+
</Grid>
|
|
118
|
+
<Grid xs={12}>
|
|
119
|
+
<Accordion {...args} disabled>
|
|
120
|
+
<AccordionSummary aria-controls="disabled-content" id="disabled-header">
|
|
121
|
+
Disabled
|
|
122
|
+
</AccordionSummary>
|
|
123
|
+
<AccordionDetails>
|
|
124
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
125
|
+
leo lobortis eget.
|
|
126
|
+
</AccordionDetails>
|
|
127
|
+
</Accordion>
|
|
128
|
+
</Grid>
|
|
129
|
+
</Grid>
|
|
130
|
+
),
|
|
16
131
|
};
|
|
@@ -1,8 +1,35 @@
|
|
|
1
1
|
import MuiAccordionSummary, { AccordionSummaryProps as MuiAccordionSummaryProps } from '@mui/material/AccordionSummary';
|
|
2
2
|
import { TriangleExpandIcon } from '@availity/mui-icon';
|
|
3
|
-
import {
|
|
3
|
+
import { Typography, TypographyProps } from '@availity/mui-typography';
|
|
4
|
+
import { forwardRef, ReactNode } from 'react';
|
|
5
|
+
import { styled } from '@mui/material/styles';
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
const PrimaryContent = styled(Typography, {
|
|
8
|
+
name: 'MuiAccordionSummary',
|
|
9
|
+
slot: 'AvPrimaryContent',
|
|
10
|
+
overridesResolver: (props, styles) => styles.avPrimaryContent,
|
|
11
|
+
})(({ theme }) => ({
|
|
12
|
+
marginRight: "auto",
|
|
13
|
+
paddingRight: theme.spacing(1),
|
|
14
|
+
lineHeight: "1.5rem"
|
|
15
|
+
}));
|
|
16
|
+
|
|
17
|
+
const SecondaryContent = styled(Typography, {
|
|
18
|
+
name: 'MuiAccordionSummary',
|
|
19
|
+
slot: 'AvSecondaryContent',
|
|
20
|
+
overridesResolver: (props, styles) => styles.avSecondaryContent,
|
|
21
|
+
})({});
|
|
22
|
+
|
|
23
|
+
export type AccordionSummaryProps = {
|
|
24
|
+
/** The main content element. Aliased by the `children` prop. */
|
|
25
|
+
primary?: ReactNode;
|
|
26
|
+
/** These props will be forwarded to the primary typography component. Update `component` to reflect the correct heading level for accessibility.*/
|
|
27
|
+
primaryProps?: Omit<TypographyProps, 'className'>;
|
|
28
|
+
/** The secondary content element. */
|
|
29
|
+
secondary?: ReactNode;
|
|
30
|
+
/** These props will be forwarded to the secondary typography component. */
|
|
31
|
+
secondaryProps?: Omit<TypographyProps, 'className'>;
|
|
32
|
+
} & Omit<
|
|
6
33
|
MuiAccordionSummaryProps,
|
|
7
34
|
| 'centerRipple'
|
|
8
35
|
| 'component'
|
|
@@ -16,6 +43,26 @@ export type AccordionSummaryProps = Omit<
|
|
|
16
43
|
| 'touchRippleRef'
|
|
17
44
|
>;
|
|
18
45
|
|
|
19
|
-
export const AccordionSummary = forwardRef<HTMLDivElement, AccordionSummaryProps>((
|
|
20
|
-
|
|
21
|
-
|
|
46
|
+
export const AccordionSummary = forwardRef<HTMLDivElement, AccordionSummaryProps>((allProps, ref) => {
|
|
47
|
+
const { children, primary: primaryProp, primaryProps, secondary: secondaryProp, secondaryProps, ...props } = allProps;
|
|
48
|
+
|
|
49
|
+
const combinedPrimaryProps: TypographyProps = {
|
|
50
|
+
className: "MuiAccordionSummary-avPrimaryContent",
|
|
51
|
+
variant: "h6",
|
|
52
|
+
component: "div",
|
|
53
|
+
...primaryProps
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
const combinedSecondaryProps: TypographyProps = {
|
|
57
|
+
className: "MuiAccordionSummary-avSecondaryContent",
|
|
58
|
+
variant: "body1",
|
|
59
|
+
component: "div",
|
|
60
|
+
...secondaryProps
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
const Primary = <PrimaryContent {...combinedPrimaryProps}>{primaryProp || children}</PrimaryContent>;
|
|
64
|
+
|
|
65
|
+
const Secondary = secondaryProp ? <SecondaryContent {...combinedSecondaryProps}>{secondaryProp}</SecondaryContent> : null;
|
|
66
|
+
|
|
67
|
+
return <MuiAccordionSummary {...props} expandIcon={<TriangleExpandIcon />} ref={ref}>{Primary}{Secondary}</MuiAccordionSummary>
|
|
68
|
+
});
|