@availity/mui-card 0.2.23 → 0.3.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 +13 -0
- package/dist/index.d.mts +18 -4
- package/dist/index.d.ts +18 -4
- package/dist/index.js +47 -13
- package/dist/index.mjs +47 -13
- package/package.json +11 -3
- package/src/lib/Card.stories.tsx +22 -6
- package/src/lib/Card.tsx +1 -1
- package/src/lib/CardActions.stories.tsx +7 -7
- package/src/lib/CardHeader.stories.tsx +56 -3
- package/src/lib/CardHeader.tsx +50 -13
- package/src/lib/CardHeaderLogo.stories.mdx +9 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
4
|
|
|
5
|
+
## [0.3.1](https://github.com/Availity/element/compare/@availity/mui-card@0.3.0...@availity/mui-card@0.3.1) (2025-02-05)
|
|
6
|
+
|
|
7
|
+
## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-card@0.2.23...@availity/mui-card@0.3.0) (2025-02-04)
|
|
8
|
+
|
|
9
|
+
### Dependency Updates
|
|
10
|
+
|
|
11
|
+
* `mui-button` updated to version `0.2.23`
|
|
12
|
+
* `mui-icon` updated to version `0.2.23`
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* configure package.json to allow esm to be used ([5a5393d](https://github.com/Availity/element/commit/5a5393de761f52608e714dd94a05106937dd95db))
|
|
17
|
+
|
|
5
18
|
## [0.2.23](https://github.com/Availity/element/compare/@availity/mui-card@0.2.22...@availity/mui-card@0.2.23) (2025-01-27)
|
|
6
19
|
|
|
7
20
|
### Dependency Updates
|
package/dist/index.d.mts
CHANGED
|
@@ -3,9 +3,10 @@ import { CardActionAreaProps as CardActionAreaProps$1 } from '@mui/material/Card
|
|
|
3
3
|
import { CardActionsProps as CardActionsProps$1 } from '@mui/material/CardActions';
|
|
4
4
|
import { CardContentProps as CardContentProps$1 } from '@mui/material/CardContent';
|
|
5
5
|
import { CardHeaderProps as CardHeaderProps$1 } from '@mui/material/CardHeader';
|
|
6
|
+
import { ChipProps } from '@mui/material/Chip';
|
|
6
7
|
import { CardMediaProps as CardMediaProps$1 } from '@mui/material/CardMedia';
|
|
7
8
|
|
|
8
|
-
interface CardProps extends Omit<CardProps$1, 'elevation' | '
|
|
9
|
+
interface CardProps extends Omit<CardProps$1, 'elevation' | 'raised' | 'square'> {
|
|
9
10
|
children?: React.ReactNode;
|
|
10
11
|
}
|
|
11
12
|
declare const Card: ({ children, ...rest }: CardProps) => JSX.Element;
|
|
@@ -25,10 +26,23 @@ interface CardContentProps extends CardContentProps$1 {
|
|
|
25
26
|
}
|
|
26
27
|
declare const CardContent: ({ children, ...rest }: CardContentProps) => JSX.Element;
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
type StatusChipProps = {
|
|
30
|
+
/** The color of the component.
|
|
31
|
+
* @default default */
|
|
32
|
+
color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
|
|
33
|
+
} & Omit<ChipProps, 'avatar' | 'children' | 'color' | 'variant' | 'skipFocusWhenDisabled' | 'disabled' | 'size' | 'icon' | 'clickable' | 'deleteIcon' | 'onDelete'>;
|
|
34
|
+
|
|
35
|
+
type CardStatusChipProps = StatusChipProps & {
|
|
36
|
+
/** Setting the position to `bottom` displays the StatusChip under the header and subheader. Setting the position to `right` displays the StatusChip next to the actions section. */
|
|
37
|
+
position: 'bottom' | 'right';
|
|
38
|
+
};
|
|
39
|
+
interface CardHeaderProps extends CardHeaderProps$1 {
|
|
40
|
+
/** These props will be forwarded to the StatusChip. */
|
|
41
|
+
statusChipProps?: CardStatusChipProps;
|
|
42
|
+
/** Section at the top-right of the card for displaying logos. */
|
|
43
|
+
logo?: React.ReactNode;
|
|
30
44
|
}
|
|
31
|
-
declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, ...rest }: CardHeaderProps) => JSX.Element;
|
|
45
|
+
declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, statusChipProps, action, subheader, title, logo, ...rest }: CardHeaderProps) => JSX.Element;
|
|
32
46
|
|
|
33
47
|
interface CardMediaProps extends CardMediaProps$1 {
|
|
34
48
|
children?: React.ReactNode;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,9 +3,10 @@ import { CardActionAreaProps as CardActionAreaProps$1 } from '@mui/material/Card
|
|
|
3
3
|
import { CardActionsProps as CardActionsProps$1 } from '@mui/material/CardActions';
|
|
4
4
|
import { CardContentProps as CardContentProps$1 } from '@mui/material/CardContent';
|
|
5
5
|
import { CardHeaderProps as CardHeaderProps$1 } from '@mui/material/CardHeader';
|
|
6
|
+
import { ChipProps } from '@mui/material/Chip';
|
|
6
7
|
import { CardMediaProps as CardMediaProps$1 } from '@mui/material/CardMedia';
|
|
7
8
|
|
|
8
|
-
interface CardProps extends Omit<CardProps$1, 'elevation' | '
|
|
9
|
+
interface CardProps extends Omit<CardProps$1, 'elevation' | 'raised' | 'square'> {
|
|
9
10
|
children?: React.ReactNode;
|
|
10
11
|
}
|
|
11
12
|
declare const Card: ({ children, ...rest }: CardProps) => JSX.Element;
|
|
@@ -25,10 +26,23 @@ interface CardContentProps extends CardContentProps$1 {
|
|
|
25
26
|
}
|
|
26
27
|
declare const CardContent: ({ children, ...rest }: CardContentProps) => JSX.Element;
|
|
27
28
|
|
|
28
|
-
|
|
29
|
-
|
|
29
|
+
type StatusChipProps = {
|
|
30
|
+
/** The color of the component.
|
|
31
|
+
* @default default */
|
|
32
|
+
color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
|
|
33
|
+
} & Omit<ChipProps, 'avatar' | 'children' | 'color' | 'variant' | 'skipFocusWhenDisabled' | 'disabled' | 'size' | 'icon' | 'clickable' | 'deleteIcon' | 'onDelete'>;
|
|
34
|
+
|
|
35
|
+
type CardStatusChipProps = StatusChipProps & {
|
|
36
|
+
/** Setting the position to `bottom` displays the StatusChip under the header and subheader. Setting the position to `right` displays the StatusChip next to the actions section. */
|
|
37
|
+
position: 'bottom' | 'right';
|
|
38
|
+
};
|
|
39
|
+
interface CardHeaderProps extends CardHeaderProps$1 {
|
|
40
|
+
/** These props will be forwarded to the StatusChip. */
|
|
41
|
+
statusChipProps?: CardStatusChipProps;
|
|
42
|
+
/** Section at the top-right of the card for displaying logos. */
|
|
43
|
+
logo?: React.ReactNode;
|
|
30
44
|
}
|
|
31
|
-
declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, ...rest }: CardHeaderProps) => JSX.Element;
|
|
45
|
+
declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, statusChipProps, action, subheader, title, logo, ...rest }: CardHeaderProps) => JSX.Element;
|
|
32
46
|
|
|
33
47
|
interface CardMediaProps extends CardMediaProps$1 {
|
|
34
48
|
children?: React.ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -101,37 +101,71 @@ var CardContent = (_a) => {
|
|
|
101
101
|
};
|
|
102
102
|
|
|
103
103
|
// src/lib/CardHeader.tsx
|
|
104
|
-
var import_styles = require("@mui/material/styles");
|
|
105
104
|
var import_CardHeader = __toESM(require("@mui/material/CardHeader"));
|
|
105
|
+
|
|
106
|
+
// ../chip/src/lib/Chip.tsx
|
|
107
|
+
var import_Chip = __toESM(require("@mui/material/Chip"));
|
|
106
108
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
109
|
+
|
|
110
|
+
// ../chip/src/lib/StatusChip.tsx
|
|
111
|
+
var import_Chip2 = __toESM(require("@mui/material/Chip"));
|
|
112
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
113
|
+
var StatusChip = (_a) => {
|
|
114
|
+
var _b = _a, { color = "default" } = _b, rest = __objRest(_b, ["color"]);
|
|
115
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Chip2.default, __spreadProps(__spreadValues({ color }, rest), { size: "small" }));
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
// src/lib/CardHeader.tsx
|
|
119
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
107
120
|
var CardHeader = (_a) => {
|
|
108
121
|
var _b = _a, {
|
|
109
122
|
titleTypographyProps,
|
|
110
|
-
subheaderTypographyProps
|
|
123
|
+
subheaderTypographyProps,
|
|
124
|
+
statusChipProps,
|
|
125
|
+
action,
|
|
126
|
+
subheader,
|
|
127
|
+
title,
|
|
128
|
+
logo
|
|
111
129
|
} = _b, rest = __objRest(_b, [
|
|
112
130
|
"titleTypographyProps",
|
|
113
|
-
"subheaderTypographyProps"
|
|
131
|
+
"subheaderTypographyProps",
|
|
132
|
+
"statusChipProps",
|
|
133
|
+
"action",
|
|
134
|
+
"subheader",
|
|
135
|
+
"title",
|
|
136
|
+
"logo"
|
|
114
137
|
]);
|
|
115
|
-
|
|
116
|
-
const theme = (0, import_styles.useTheme)();
|
|
117
|
-
const titleVariant = (_d = (_c = (_b2 = (_a2 = theme.components) == null ? void 0 : _a2.MuiCardHeader) == null ? void 0 : _b2.defaultProps) == null ? void 0 : _c.titleTypographyProps) == null ? void 0 : _d.variant;
|
|
118
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
138
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
119
139
|
import_CardHeader.default,
|
|
120
140
|
__spreadProps(__spreadValues({}, rest), {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
141
|
+
title: logo ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
142
|
+
logo,
|
|
143
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
|
|
144
|
+
title
|
|
145
|
+
] }) : title,
|
|
146
|
+
titleTypographyProps: __spreadProps(__spreadValues({}, titleTypographyProps), {
|
|
147
|
+
variant: "h5"
|
|
148
|
+
}),
|
|
149
|
+
subheaderTypographyProps: __spreadProps(__spreadValues({}, subheaderTypographyProps), { variant: "body2" }),
|
|
150
|
+
subheader: statusChipProps && statusChipProps.position === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
151
|
+
subheader,
|
|
152
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
|
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusChip, __spreadValues({}, statusChipProps))
|
|
154
|
+
] }) : subheader,
|
|
155
|
+
action: statusChipProps && statusChipProps.position === "right" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
|
|
156
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusChip, __spreadValues({}, statusChipProps)),
|
|
157
|
+
action
|
|
158
|
+
] }) : action
|
|
125
159
|
})
|
|
126
160
|
);
|
|
127
161
|
};
|
|
128
162
|
|
|
129
163
|
// src/lib/CardMedia.tsx
|
|
130
164
|
var import_CardMedia = __toESM(require("@mui/material/CardMedia"));
|
|
131
|
-
var
|
|
165
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
132
166
|
var CardMedia = (_a) => {
|
|
133
167
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
134
|
-
return /* @__PURE__ */ (0,
|
|
168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_CardMedia.default, __spreadProps(__spreadValues({}, rest), { children }));
|
|
135
169
|
};
|
|
136
170
|
// Annotate the CommonJS export names for ESM import in node:
|
|
137
171
|
0 && (module.exports = {
|
package/dist/index.mjs
CHANGED
|
@@ -65,37 +65,71 @@ var CardContent = (_a) => {
|
|
|
65
65
|
};
|
|
66
66
|
|
|
67
67
|
// src/lib/CardHeader.tsx
|
|
68
|
-
import { useTheme } from "@mui/material/styles";
|
|
69
68
|
import { default as MuiCardHeader } from "@mui/material/CardHeader";
|
|
69
|
+
|
|
70
|
+
// ../chip/src/lib/Chip.tsx
|
|
71
|
+
import { default as MuiChip } from "@mui/material/Chip";
|
|
70
72
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
73
|
+
|
|
74
|
+
// ../chip/src/lib/StatusChip.tsx
|
|
75
|
+
import { default as MuiChip2 } from "@mui/material/Chip";
|
|
76
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
77
|
+
var StatusChip = (_a) => {
|
|
78
|
+
var _b = _a, { color = "default" } = _b, rest = __objRest(_b, ["color"]);
|
|
79
|
+
return /* @__PURE__ */ jsx6(MuiChip2, __spreadProps(__spreadValues({ color }, rest), { size: "small" }));
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
// src/lib/CardHeader.tsx
|
|
83
|
+
import { Fragment, jsx as jsx7, jsxs } from "react/jsx-runtime";
|
|
71
84
|
var CardHeader = (_a) => {
|
|
72
85
|
var _b = _a, {
|
|
73
86
|
titleTypographyProps,
|
|
74
|
-
subheaderTypographyProps
|
|
87
|
+
subheaderTypographyProps,
|
|
88
|
+
statusChipProps,
|
|
89
|
+
action,
|
|
90
|
+
subheader,
|
|
91
|
+
title,
|
|
92
|
+
logo
|
|
75
93
|
} = _b, rest = __objRest(_b, [
|
|
76
94
|
"titleTypographyProps",
|
|
77
|
-
"subheaderTypographyProps"
|
|
95
|
+
"subheaderTypographyProps",
|
|
96
|
+
"statusChipProps",
|
|
97
|
+
"action",
|
|
98
|
+
"subheader",
|
|
99
|
+
"title",
|
|
100
|
+
"logo"
|
|
78
101
|
]);
|
|
79
|
-
|
|
80
|
-
const theme = useTheme();
|
|
81
|
-
const titleVariant = (_d = (_c = (_b2 = (_a2 = theme.components) == null ? void 0 : _a2.MuiCardHeader) == null ? void 0 : _b2.defaultProps) == null ? void 0 : _c.titleTypographyProps) == null ? void 0 : _d.variant;
|
|
82
|
-
return /* @__PURE__ */ jsx5(
|
|
102
|
+
return /* @__PURE__ */ jsx7(
|
|
83
103
|
MuiCardHeader,
|
|
84
104
|
__spreadProps(__spreadValues({}, rest), {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
105
|
+
title: logo ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
106
|
+
logo,
|
|
107
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
108
|
+
title
|
|
109
|
+
] }) : title,
|
|
110
|
+
titleTypographyProps: __spreadProps(__spreadValues({}, titleTypographyProps), {
|
|
111
|
+
variant: "h5"
|
|
112
|
+
}),
|
|
113
|
+
subheaderTypographyProps: __spreadProps(__spreadValues({}, subheaderTypographyProps), { variant: "body2" }),
|
|
114
|
+
subheader: statusChipProps && statusChipProps.position === "bottom" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
115
|
+
subheader,
|
|
116
|
+
/* @__PURE__ */ jsx7("br", {}),
|
|
117
|
+
/* @__PURE__ */ jsx7(StatusChip, __spreadValues({}, statusChipProps))
|
|
118
|
+
] }) : subheader,
|
|
119
|
+
action: statusChipProps && statusChipProps.position === "right" ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
120
|
+
/* @__PURE__ */ jsx7(StatusChip, __spreadValues({}, statusChipProps)),
|
|
121
|
+
action
|
|
122
|
+
] }) : action
|
|
89
123
|
})
|
|
90
124
|
);
|
|
91
125
|
};
|
|
92
126
|
|
|
93
127
|
// src/lib/CardMedia.tsx
|
|
94
128
|
import { default as MuiCardMedia } from "@mui/material/CardMedia";
|
|
95
|
-
import { jsx as
|
|
129
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
96
130
|
var CardMedia = (_a) => {
|
|
97
131
|
var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
|
|
98
|
-
return /* @__PURE__ */
|
|
132
|
+
return /* @__PURE__ */ jsx8(MuiCardMedia, __spreadProps(__spreadValues({}, rest), { children }));
|
|
99
133
|
};
|
|
100
134
|
export {
|
|
101
135
|
Card,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@availity/mui-card",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Availity MUI Card Component - part of the @availity/element design system",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -23,6 +23,14 @@
|
|
|
23
23
|
"main": "./dist/index.js",
|
|
24
24
|
"module": "./dist/index.mjs",
|
|
25
25
|
"types": "./dist/index.d.ts",
|
|
26
|
+
"exports": {
|
|
27
|
+
"./package.json": "./package.json",
|
|
28
|
+
".": {
|
|
29
|
+
"types": "./dist/index.d.ts",
|
|
30
|
+
"import": "./dist/index.mjs",
|
|
31
|
+
"require": "./dist/index.js"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
26
34
|
"scripts": {
|
|
27
35
|
"build": "tsup src/index.ts --format esm,cjs --dts",
|
|
28
36
|
"dev": "tsup src/index.ts --format esm,cjs --watch --dts",
|
|
@@ -32,8 +40,8 @@
|
|
|
32
40
|
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
33
41
|
},
|
|
34
42
|
"devDependencies": {
|
|
35
|
-
"@availity/mui-button": "^0.
|
|
36
|
-
"@availity/mui-icon": "^0.
|
|
43
|
+
"@availity/mui-button": "^0.7.0",
|
|
44
|
+
"@availity/mui-icon": "^0.14.0",
|
|
37
45
|
"@mui/material": "^5.15.15",
|
|
38
46
|
"react": "18.2.0",
|
|
39
47
|
"react-dom": "18.2.0",
|
package/src/lib/Card.stories.tsx
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
4
|
import { Button } from '@availity/mui-button';
|
|
5
|
+
import { FieldHelpIcon } from '@availity/mui-form-utils';
|
|
6
|
+
import { Grid } from '@availity/mui-layout';
|
|
5
7
|
import { Card, CardProps } from './Card';
|
|
6
8
|
import { CardHeader } from './CardHeader';
|
|
7
9
|
import { CardMedia } from './CardMedia';
|
|
@@ -12,6 +14,11 @@ const meta: Meta<typeof Card> = {
|
|
|
12
14
|
title: 'Components/Card/Card',
|
|
13
15
|
component: Card,
|
|
14
16
|
tags: ['autodocs'],
|
|
17
|
+
argTypes: {
|
|
18
|
+
variant: {
|
|
19
|
+
options: ['elevation', 'outlined'],
|
|
20
|
+
},
|
|
21
|
+
},
|
|
15
22
|
};
|
|
16
23
|
|
|
17
24
|
export default meta;
|
|
@@ -26,13 +33,22 @@ export const _Card: StoryObj<typeof Card> = {
|
|
|
26
33
|
aria-label="Orange rectangle with interlocking AV logo"
|
|
27
34
|
/>
|
|
28
35
|
<CardContent>This is the content of the Card.</CardContent>
|
|
29
|
-
<CardActions>
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
36
|
+
<CardActions sx={{ justifyContent: 'space-between' }}>
|
|
37
|
+
<FieldHelpIcon helpTopicId="1234" />
|
|
38
|
+
<Grid container spacing={1}>
|
|
39
|
+
<Grid>
|
|
40
|
+
<Button color="secondary">Cancel</Button>
|
|
41
|
+
</Grid>
|
|
42
|
+
<Grid>
|
|
43
|
+
<Button color="primary">Submit</Button>
|
|
44
|
+
</Grid>
|
|
45
|
+
</Grid>
|
|
34
46
|
</CardActions>
|
|
35
47
|
</Card>
|
|
36
48
|
),
|
|
37
|
-
args: {
|
|
49
|
+
args: {
|
|
50
|
+
sx: {
|
|
51
|
+
maxWidth: '375px',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
38
54
|
};
|
package/src/lib/Card.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as MuiCard, CardProps as MuiCardProps } from '@mui/material/Card';
|
|
2
2
|
|
|
3
|
-
export interface CardProps extends Omit<MuiCardProps, 'elevation' | '
|
|
3
|
+
export interface CardProps extends Omit<MuiCardProps, 'elevation' | 'raised' | 'square'> {
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
}
|
|
6
6
|
|
|
@@ -18,21 +18,21 @@ export const _CardActions: StoryObj<typeof CardActions> = {
|
|
|
18
18
|
render: (args: CardActionsProps) => (
|
|
19
19
|
<Card>
|
|
20
20
|
<CardActions {...args}>
|
|
21
|
-
<Button
|
|
22
|
-
|
|
23
|
-
</Button>
|
|
24
|
-
<Button size="small">Cancel</Button>
|
|
21
|
+
<Button color="secondary">Cancel</Button>
|
|
22
|
+
<Button color="primary">Submit</Button>
|
|
25
23
|
</CardActions>
|
|
26
24
|
</Card>
|
|
27
25
|
),
|
|
28
|
-
args: {
|
|
26
|
+
args: {
|
|
27
|
+
sx: { justifyContent: 'flex-end' },
|
|
28
|
+
},
|
|
29
29
|
};
|
|
30
30
|
export const _CardActionsIconButtons: StoryObj<typeof CardActions> = {
|
|
31
31
|
render: (args: CardActionsProps) => (
|
|
32
32
|
<Card>
|
|
33
33
|
<CardActions {...args}>
|
|
34
|
-
<IconButton color="primary" title="search">
|
|
35
|
-
<SearchIcon fontSize="
|
|
34
|
+
<IconButton color="primary" title="search" size="small">
|
|
35
|
+
<SearchIcon fontSize="xsmall" />
|
|
36
36
|
</IconButton>
|
|
37
37
|
</CardActions>
|
|
38
38
|
</Card>
|
|
@@ -5,6 +5,8 @@ import { Card } from './Card';
|
|
|
5
5
|
import { CardHeader, CardHeaderProps } from './CardHeader';
|
|
6
6
|
import { IconButton } from '@availity/mui-button';
|
|
7
7
|
import { MoreVerticalIcon } from '@availity/mui-icon';
|
|
8
|
+
import { Avatar } from '@availity/mui-avatar';
|
|
9
|
+
import { CardActionArea } from './CardActionArea';
|
|
8
10
|
|
|
9
11
|
const meta: Meta<typeof CardHeader> = {
|
|
10
12
|
title: 'Components/Card/CardHeader',
|
|
@@ -26,6 +28,33 @@ export const _CardHeader: StoryObj<typeof CardHeader> = {
|
|
|
26
28
|
},
|
|
27
29
|
};
|
|
28
30
|
|
|
31
|
+
export const _CardHeaderAvatar: StoryObj<typeof CardHeader> = {
|
|
32
|
+
render: (args: CardHeaderProps) => (
|
|
33
|
+
<Card>
|
|
34
|
+
<CardHeader {...args} />
|
|
35
|
+
</Card>
|
|
36
|
+
),
|
|
37
|
+
args: {
|
|
38
|
+
title: 'Card header',
|
|
39
|
+
subheader: 'Subheader',
|
|
40
|
+
avatar: <Avatar size="m" />,
|
|
41
|
+
},
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export const _CardHeaderAvatarClickable: StoryObj<typeof CardHeader> = {
|
|
45
|
+
render: (args: CardHeaderProps) => (
|
|
46
|
+
<Card>
|
|
47
|
+
<CardActionArea>
|
|
48
|
+
<CardHeader {...args} />
|
|
49
|
+
</CardActionArea>
|
|
50
|
+
</Card>
|
|
51
|
+
),
|
|
52
|
+
args: {
|
|
53
|
+
title: 'Card header',
|
|
54
|
+
subheader: 'Subheader',
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
|
|
29
58
|
export const _CardHeaderAction: StoryObj<typeof CardHeader> = {
|
|
30
59
|
render: (args: CardHeaderProps) => (
|
|
31
60
|
<Card>
|
|
@@ -34,10 +63,34 @@ export const _CardHeaderAction: StoryObj<typeof CardHeader> = {
|
|
|
34
63
|
),
|
|
35
64
|
args: {
|
|
36
65
|
title: 'Card header',
|
|
37
|
-
|
|
66
|
+
subheader: 'Subheader',
|
|
67
|
+
avatar: <Avatar size="m" />,
|
|
68
|
+
action: (
|
|
69
|
+
<IconButton title="More" size="medium">
|
|
70
|
+
<MoreVerticalIcon fontSize="xsmall" />
|
|
71
|
+
</IconButton>
|
|
72
|
+
),
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export const _CardHeaderStatusChip: StoryObj<typeof CardHeader> = {
|
|
77
|
+
render: (args: CardHeaderProps) => (
|
|
78
|
+
<Card>
|
|
79
|
+
<CardHeader {...args} />
|
|
80
|
+
</Card>
|
|
81
|
+
),
|
|
82
|
+
args: {
|
|
83
|
+
title: 'Card header',
|
|
84
|
+
subheader: 'Subheader',
|
|
85
|
+
statusChipProps: {
|
|
86
|
+
position: 'right',
|
|
87
|
+
label: 'Approved',
|
|
88
|
+
color: 'success',
|
|
89
|
+
},
|
|
90
|
+
avatar: <Avatar size="m" />,
|
|
38
91
|
action: (
|
|
39
|
-
<IconButton
|
|
40
|
-
<MoreVerticalIcon />
|
|
92
|
+
<IconButton title="More" size="medium">
|
|
93
|
+
<MoreVerticalIcon fontSize="xsmall" />
|
|
41
94
|
</IconButton>
|
|
42
95
|
),
|
|
43
96
|
},
|
package/src/lib/CardHeader.tsx
CHANGED
|
@@ -1,31 +1,68 @@
|
|
|
1
|
-
import { useTheme } from '@mui/material/styles';
|
|
2
1
|
import { default as MuiCardHeader, CardHeaderProps as MuiCardHeaderProps } from '@mui/material/CardHeader';
|
|
2
|
+
import { StatusChip, StatusChipProps } from '@availity/mui-chip';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
type CardStatusChipProps = StatusChipProps & {
|
|
5
|
+
/** Setting the position to `bottom` displays the StatusChip under the header and subheader. Setting the position to `right` displays the StatusChip next to the actions section. */
|
|
6
|
+
position: 'bottom' | 'right';
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export interface CardHeaderProps extends MuiCardHeaderProps {
|
|
10
|
+
/** These props will be forwarded to the StatusChip. */
|
|
11
|
+
statusChipProps?: CardStatusChipProps;
|
|
12
|
+
/** Section at the top-right of the card for displaying logos. */
|
|
13
|
+
logo?: React.ReactNode;
|
|
6
14
|
}
|
|
7
15
|
|
|
8
16
|
export const CardHeader = ({
|
|
9
17
|
titleTypographyProps,
|
|
10
18
|
subheaderTypographyProps,
|
|
19
|
+
statusChipProps,
|
|
20
|
+
action,
|
|
21
|
+
subheader,
|
|
22
|
+
title,
|
|
23
|
+
logo,
|
|
11
24
|
...rest
|
|
12
25
|
}: CardHeaderProps): JSX.Element => {
|
|
13
|
-
const theme = useTheme();
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* This is ugly, but it allows us to define a default variant while retaining the rest of the
|
|
17
|
-
* titleTypographyProps that the user passed.
|
|
18
|
-
*/
|
|
19
|
-
const titleVariant = theme.components?.MuiCardHeader?.defaultProps?.titleTypographyProps?.variant;
|
|
20
|
-
|
|
21
26
|
return (
|
|
22
27
|
<MuiCardHeader
|
|
23
28
|
{...rest}
|
|
29
|
+
title={
|
|
30
|
+
logo ? (
|
|
31
|
+
<>
|
|
32
|
+
{logo}
|
|
33
|
+
<br />
|
|
34
|
+
{title}
|
|
35
|
+
</>
|
|
36
|
+
) : (
|
|
37
|
+
title
|
|
38
|
+
)
|
|
39
|
+
}
|
|
24
40
|
titleTypographyProps={{
|
|
25
|
-
variant: titleVariant,
|
|
26
41
|
...titleTypographyProps,
|
|
42
|
+
variant: 'h5',
|
|
27
43
|
}}
|
|
28
|
-
subheaderTypographyProps={{ variant: '
|
|
44
|
+
subheaderTypographyProps={{ ...subheaderTypographyProps, variant: 'body2' }}
|
|
45
|
+
subheader={
|
|
46
|
+
statusChipProps && statusChipProps.position === 'bottom' ? (
|
|
47
|
+
<>
|
|
48
|
+
{subheader}
|
|
49
|
+
<br />
|
|
50
|
+
<StatusChip {...statusChipProps} />
|
|
51
|
+
</>
|
|
52
|
+
) : (
|
|
53
|
+
subheader
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
action={
|
|
57
|
+
statusChipProps && statusChipProps.position === 'right' ? (
|
|
58
|
+
<>
|
|
59
|
+
<StatusChip {...statusChipProps} />
|
|
60
|
+
{action}
|
|
61
|
+
</>
|
|
62
|
+
) : (
|
|
63
|
+
action
|
|
64
|
+
)
|
|
65
|
+
}
|
|
29
66
|
/>
|
|
30
67
|
);
|
|
31
68
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Markdown } from '@storybook/blocks';
|
|
2
|
+
import { Meta } from '@storybook/addon-docs';
|
|
3
|
+
|
|
4
|
+
<Meta title="Components/Card/CardHeader/CardHeaderWithLogo" />
|
|
5
|
+
|
|
6
|
+
<Markdown>
|
|
7
|
+
See the [Card Header With Logo](?path=/story/components-spaces-spacesimage--card-header-with-logo) story in
|
|
8
|
+
SpacesImage.
|
|
9
|
+
</Markdown>
|