@availity/mui-card 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.3.2](https://github.com/Availity/element/compare/@availity/mui-card@0.3.1...@availity/mui-card@0.3.2) (2025-02-18)
+
+### Dependency Updates
+
+* `mui-form-utils` updated to version `0.3.1`
+## [0.3.1](https://github.com/Availity/element/compare/@availity/mui-card@0.3.0...@availity/mui-card@0.3.1) (2025-02-05)
+
 ## [0.3.0](https://github.com/Availity/element/compare/@availity/mui-card@0.2.23...@availity/mui-card@0.3.0) (2025-02-04)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -3,9 +3,10 @@ import { CardActionAreaProps as CardActionAreaProps$1 } from '@mui/material/Card
 import { CardActionsProps as CardActionsProps$1 } from '@mui/material/CardActions';
 import { CardContentProps as CardContentProps$1 } from '@mui/material/CardContent';
 import { CardHeaderProps as CardHeaderProps$1 } from '@mui/material/CardHeader';
+import { ChipProps } from '@mui/material/Chip';
 import { CardMediaProps as CardMediaProps$1 } from '@mui/material/CardMedia';
 
-interface CardProps extends Omit<CardProps$1, 'elevation' | 'variant' | 'raised' | 'square'> {
+interface CardProps extends Omit<CardProps$1, 'elevation' | 'raised' | 'square'> {
     children?: React.ReactNode;
 }
 declare const Card: ({ children, ...rest }: CardProps) => JSX.Element;
@@ -25,10 +26,23 @@ interface CardContentProps extends CardContentProps$1 {
 }
 declare const CardContent: ({ children, ...rest }: CardContentProps) => JSX.Element;
 
-interface CardHeaderProps extends Omit<CardHeaderProps$1, 'avatar'> {
-    children?: React.ReactNode;
+type StatusChipProps = {
+    /** The color of the component.
+     * @default default */
+    color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+} & Omit<ChipProps, 'avatar' | 'children' | 'color' | 'variant' | 'skipFocusWhenDisabled' | 'disabled' | 'size' | 'icon' | 'clickable' | 'deleteIcon' | 'onDelete'>;
+
+type CardStatusChipProps = StatusChipProps & {
+    /** 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. */
+    position: 'bottom' | 'right';
+};
+interface CardHeaderProps extends CardHeaderProps$1 {
+    /** These props will be forwarded to the StatusChip.  */
+    statusChipProps?: CardStatusChipProps;
+    /** Section at the top-right of the card for displaying logos. */
+    logo?: React.ReactNode;
 }
-declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, ...rest }: CardHeaderProps) => JSX.Element;
+declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, statusChipProps, action, subheader, title, logo, ...rest }: CardHeaderProps) => JSX.Element;
 
 interface CardMediaProps extends CardMediaProps$1 {
     children?: React.ReactNode;

package/dist/index.d.ts

@@ -3,9 +3,10 @@ import { CardActionAreaProps as CardActionAreaProps$1 } from '@mui/material/Card
 import { CardActionsProps as CardActionsProps$1 } from '@mui/material/CardActions';
 import { CardContentProps as CardContentProps$1 } from '@mui/material/CardContent';
 import { CardHeaderProps as CardHeaderProps$1 } from '@mui/material/CardHeader';
+import { ChipProps } from '@mui/material/Chip';
 import { CardMediaProps as CardMediaProps$1 } from '@mui/material/CardMedia';
 
-interface CardProps extends Omit<CardProps$1, 'elevation' | 'variant' | 'raised' | 'square'> {
+interface CardProps extends Omit<CardProps$1, 'elevation' | 'raised' | 'square'> {
     children?: React.ReactNode;
 }
 declare const Card: ({ children, ...rest }: CardProps) => JSX.Element;
@@ -25,10 +26,23 @@ interface CardContentProps extends CardContentProps$1 {
 }
 declare const CardContent: ({ children, ...rest }: CardContentProps) => JSX.Element;
 
-interface CardHeaderProps extends Omit<CardHeaderProps$1, 'avatar'> {
-    children?: React.ReactNode;
+type StatusChipProps = {
+    /** The color of the component.
+     * @default default */
+    color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+} & Omit<ChipProps, 'avatar' | 'children' | 'color' | 'variant' | 'skipFocusWhenDisabled' | 'disabled' | 'size' | 'icon' | 'clickable' | 'deleteIcon' | 'onDelete'>;
+
+type CardStatusChipProps = StatusChipProps & {
+    /** 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. */
+    position: 'bottom' | 'right';
+};
+interface CardHeaderProps extends CardHeaderProps$1 {
+    /** These props will be forwarded to the StatusChip.  */
+    statusChipProps?: CardStatusChipProps;
+    /** Section at the top-right of the card for displaying logos. */
+    logo?: React.ReactNode;
 }
-declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, ...rest }: CardHeaderProps) => JSX.Element;
+declare const CardHeader: ({ titleTypographyProps, subheaderTypographyProps, statusChipProps, action, subheader, title, logo, ...rest }: CardHeaderProps) => JSX.Element;
 
 interface CardMediaProps extends CardMediaProps$1 {
     children?: React.ReactNode;

package/dist/index.js

@@ -101,37 +101,71 @@ var CardContent = (_a) => {
 };
 
 // src/lib/CardHeader.tsx
-var import_styles = require("@mui/material/styles");
 var import_CardHeader = __toESM(require("@mui/material/CardHeader"));
+
+// ../chip/src/lib/Chip.tsx
+var import_Chip = __toESM(require("@mui/material/Chip"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// ../chip/src/lib/StatusChip.tsx
+var import_Chip2 = __toESM(require("@mui/material/Chip"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var StatusChip = (_a) => {
+  var _b = _a, { color = "default" } = _b, rest = __objRest(_b, ["color"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_Chip2.default, __spreadProps(__spreadValues({ color }, rest), { size: "small" }));
+};
+
+// src/lib/CardHeader.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var CardHeader = (_a) => {
   var _b = _a, {
     titleTypographyProps,
-    subheaderTypographyProps
+    subheaderTypographyProps,
+    statusChipProps,
+    action,
+    subheader,
+    title,
+    logo
   } = _b, rest = __objRest(_b, [
     "titleTypographyProps",
-    "subheaderTypographyProps"
+    "subheaderTypographyProps",
+    "statusChipProps",
+    "action",
+    "subheader",
+    "title",
+    "logo"
   ]);
-  var _a2, _b2, _c, _d;
-  const theme = (0, import_styles.useTheme)();
-  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;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_CardHeader.default,
     __spreadProps(__spreadValues({}, rest), {
-      titleTypographyProps: __spreadValues({
-        variant: titleVariant
-      }, titleTypographyProps),
-      subheaderTypographyProps: __spreadValues({ variant: "subtitle2" }, subheaderTypographyProps)
+      title: logo ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        logo,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
+        title
+      ] }) : title,
+      titleTypographyProps: __spreadProps(__spreadValues({}, titleTypographyProps), {
+        variant: "h5"
+      }),
+      subheaderTypographyProps: __spreadProps(__spreadValues({}, subheaderTypographyProps), { variant: "body2" }),
+      subheader: statusChipProps && statusChipProps.position === "bottom" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        subheader,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusChip, __spreadValues({}, statusChipProps))
+      ] }) : subheader,
+      action: statusChipProps && statusChipProps.position === "right" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StatusChip, __spreadValues({}, statusChipProps)),
+        action
+      ] }) : action
     })
   );
 };
 
 // src/lib/CardMedia.tsx
 var import_CardMedia = __toESM(require("@mui/material/CardMedia"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var CardMedia = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardMedia.default, __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_CardMedia.default, __spreadProps(__spreadValues({}, rest), { children }));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -65,37 +65,71 @@ var CardContent = (_a) => {
 };
 
 // src/lib/CardHeader.tsx
-import { useTheme } from "@mui/material/styles";
 import { default as MuiCardHeader } from "@mui/material/CardHeader";
+
+// ../chip/src/lib/Chip.tsx
+import { default as MuiChip } from "@mui/material/Chip";
 import { jsx as jsx5 } from "react/jsx-runtime";
+
+// ../chip/src/lib/StatusChip.tsx
+import { default as MuiChip2 } from "@mui/material/Chip";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var StatusChip = (_a) => {
+  var _b = _a, { color = "default" } = _b, rest = __objRest(_b, ["color"]);
+  return /* @__PURE__ */ jsx6(MuiChip2, __spreadProps(__spreadValues({ color }, rest), { size: "small" }));
+};
+
+// src/lib/CardHeader.tsx
+import { Fragment, jsx as jsx7, jsxs } from "react/jsx-runtime";
 var CardHeader = (_a) => {
   var _b = _a, {
     titleTypographyProps,
-    subheaderTypographyProps
+    subheaderTypographyProps,
+    statusChipProps,
+    action,
+    subheader,
+    title,
+    logo
   } = _b, rest = __objRest(_b, [
     "titleTypographyProps",
-    "subheaderTypographyProps"
+    "subheaderTypographyProps",
+    "statusChipProps",
+    "action",
+    "subheader",
+    "title",
+    "logo"
   ]);
-  var _a2, _b2, _c, _d;
-  const theme = useTheme();
-  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;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     MuiCardHeader,
     __spreadProps(__spreadValues({}, rest), {
-      titleTypographyProps: __spreadValues({
-        variant: titleVariant
-      }, titleTypographyProps),
-      subheaderTypographyProps: __spreadValues({ variant: "subtitle2" }, subheaderTypographyProps)
+      title: logo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        logo,
+        /* @__PURE__ */ jsx7("br", {}),
+        title
+      ] }) : title,
+      titleTypographyProps: __spreadProps(__spreadValues({}, titleTypographyProps), {
+        variant: "h5"
+      }),
+      subheaderTypographyProps: __spreadProps(__spreadValues({}, subheaderTypographyProps), { variant: "body2" }),
+      subheader: statusChipProps && statusChipProps.position === "bottom" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        subheader,
+        /* @__PURE__ */ jsx7("br", {}),
+        /* @__PURE__ */ jsx7(StatusChip, __spreadValues({}, statusChipProps))
+      ] }) : subheader,
+      action: statusChipProps && statusChipProps.position === "right" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx7(StatusChip, __spreadValues({}, statusChipProps)),
+        action
+      ] }) : action
     })
   );
 };
 
 // src/lib/CardMedia.tsx
 import { default as MuiCardMedia } from "@mui/material/CardMedia";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var CardMedia = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx6(MuiCardMedia, __spreadProps(__spreadValues({}, rest), { children }));
+  return /* @__PURE__ */ jsx8(MuiCardMedia, __spreadProps(__spreadValues({}, rest), { children }));
 };
 export {
   Card,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-card",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Availity MUI Card Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/Card.stories.tsx

@@ -2,6 +2,8 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '@availity/mui-button';
+import { FieldHelpIcon } from '@availity/mui-form-utils';
+import { Grid } from '@availity/mui-layout';
 import { Card, CardProps } from './Card';
 import { CardHeader } from './CardHeader';
 import { CardMedia } from './CardMedia';
@@ -12,6 +14,11 @@ const meta: Meta<typeof Card> = {
   title: 'Components/Card/Card',
   component: Card,
   tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      options: ['elevation', 'outlined'],
+    },
+  },
 };
 
 export default meta;
@@ -26,13 +33,22 @@ export const _Card: StoryObj<typeof Card> = {
         aria-label="Orange rectangle with interlocking AV logo"
       />
       <CardContent>This is the content of the Card.</CardContent>
-      <CardActions>
-        <Button size="small" color="primary">
-          Submit
-        </Button>
-        <Button size="small">Cancel</Button>
+      <CardActions sx={{ justifyContent: 'space-between' }}>
+        <FieldHelpIcon helpTopicId="1234" />
+        <Grid container spacing={1}>
+          <Grid>
+            <Button color="secondary">Cancel</Button>
+          </Grid>
+          <Grid>
+            <Button color="primary">Submit</Button>
+          </Grid>
+        </Grid>
       </CardActions>
     </Card>
   ),
-  args: {},
+  args: {
+    sx: {
+      maxWidth: '375px',
+    },
+  },
 };

package/src/lib/Card.tsx

@@ -1,6 +1,6 @@
 import { default as MuiCard, CardProps as MuiCardProps } from '@mui/material/Card';
 
-export interface CardProps extends Omit<MuiCardProps, 'elevation' | 'variant' | 'raised' | 'square'> {
+export interface CardProps extends Omit<MuiCardProps, 'elevation' | 'raised' | 'square'> {
   children?: React.ReactNode;
 }
 

package/src/lib/CardActions.stories.tsx

@@ -18,21 +18,21 @@ export const _CardActions: StoryObj<typeof CardActions> = {
   render: (args: CardActionsProps) => (
     <Card>
       <CardActions {...args}>
-        <Button size="small" color="primary">
-          Submit
-        </Button>
-        <Button size="small">Cancel</Button>
+        <Button color="secondary">Cancel</Button>
+        <Button color="primary">Submit</Button>
       </CardActions>
     </Card>
   ),
-  args: {},
+  args: {
+    sx: { justifyContent: 'flex-end' },
+  },
 };
 export const _CardActionsIconButtons: StoryObj<typeof CardActions> = {
   render: (args: CardActionsProps) => (
     <Card>
       <CardActions {...args}>
-        <IconButton color="primary" title="search">
-          <SearchIcon fontSize="small" />
+        <IconButton color="primary" title="search" size="small">
+          <SearchIcon fontSize="xsmall" />
         </IconButton>
       </CardActions>
     </Card>

package/src/lib/CardHeader.stories.tsx

@@ -5,6 +5,8 @@ import { Card } from './Card';
 import { CardHeader, CardHeaderProps } from './CardHeader';
 import { IconButton } from '@availity/mui-button';
 import { MoreVerticalIcon } from '@availity/mui-icon';
+import { Avatar } from '@availity/mui-avatar';
+import { CardActionArea } from './CardActionArea';
 
 const meta: Meta<typeof CardHeader> = {
   title: 'Components/Card/CardHeader',
@@ -26,6 +28,33 @@ export const _CardHeader: StoryObj<typeof CardHeader> = {
   },
 };
 
+export const _CardHeaderAvatar: StoryObj<typeof CardHeader> = {
+  render: (args: CardHeaderProps) => (
+    <Card>
+      <CardHeader {...args} />
+    </Card>
+  ),
+  args: {
+    title: 'Card header',
+    subheader: 'Subheader',
+    avatar: <Avatar size="m" />,
+  },
+};
+
+export const _CardHeaderAvatarClickable: StoryObj<typeof CardHeader> = {
+  render: (args: CardHeaderProps) => (
+    <Card>
+      <CardActionArea>
+        <CardHeader {...args} />
+      </CardActionArea>
+    </Card>
+  ),
+  args: {
+    title: 'Card header',
+    subheader: 'Subheader',
+  },
+};
+
 export const _CardHeaderAction: StoryObj<typeof CardHeader> = {
   render: (args: CardHeaderProps) => (
     <Card>
@@ -34,10 +63,34 @@ export const _CardHeaderAction: StoryObj<typeof CardHeader> = {
   ),
   args: {
     title: 'Card header',
-    // subheader: 'Subheader',
+    subheader: 'Subheader',
+    avatar: <Avatar size="m" />,
+    action: (
+      <IconButton title="More" size="medium">
+        <MoreVerticalIcon fontSize="xsmall" />
+      </IconButton>
+    ),
+  },
+};
+
+export const _CardHeaderStatusChip: StoryObj<typeof CardHeader> = {
+  render: (args: CardHeaderProps) => (
+    <Card>
+      <CardHeader {...args} />
+    </Card>
+  ),
+  args: {
+    title: 'Card header',
+    subheader: 'Subheader',
+    statusChipProps: {
+      position: 'right',
+      label: 'Approved',
+      color: 'success',
+    },
+    avatar: <Avatar size="m" />,
     action: (
-      <IconButton color="primary" title="More" size="medium">
-        <MoreVerticalIcon />
+      <IconButton title="More" size="medium">
+        <MoreVerticalIcon fontSize="xsmall" />
       </IconButton>
     ),
   },

package/src/lib/CardHeader.tsx

@@ -1,31 +1,68 @@
-import { useTheme } from '@mui/material/styles';
 import { default as MuiCardHeader, CardHeaderProps as MuiCardHeaderProps } from '@mui/material/CardHeader';
+import { StatusChip, StatusChipProps } from '@availity/mui-chip';
 
-export interface CardHeaderProps extends Omit<MuiCardHeaderProps, 'avatar'> {
-  children?: React.ReactNode;
+type CardStatusChipProps = StatusChipProps & {
+  /** 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. */
+  position: 'bottom' | 'right';
+};
+
+export interface CardHeaderProps extends MuiCardHeaderProps {
+  /** These props will be forwarded to the StatusChip.  */
+  statusChipProps?: CardStatusChipProps;
+  /** Section at the top-right of the card for displaying logos. */
+  logo?: React.ReactNode;
 }
 
 export const CardHeader = ({
   titleTypographyProps,
   subheaderTypographyProps,
+  statusChipProps,
+  action,
+  subheader,
+  title,
+  logo,
   ...rest
 }: CardHeaderProps): JSX.Element => {
-  const theme = useTheme();
-
-  /**
-   * This is ugly, but it allows us to define a default variant while retaining the rest of the
-   * titleTypographyProps that the user passed.
-   */
-  const titleVariant = theme.components?.MuiCardHeader?.defaultProps?.titleTypographyProps?.variant;
-
   return (
     <MuiCardHeader
       {...rest}
+      title={
+        logo ? (
+          <>
+            {logo}
+            <br />
+            {title}
+          </>
+        ) : (
+          title
+        )
+      }
       titleTypographyProps={{
-        variant: titleVariant,
         ...titleTypographyProps,
+        variant: 'h5',
       }}
-      subheaderTypographyProps={{ variant: 'subtitle2', ...subheaderTypographyProps }}
+      subheaderTypographyProps={{ ...subheaderTypographyProps, variant: 'body2' }}
+      subheader={
+        statusChipProps && statusChipProps.position === 'bottom' ? (
+          <>
+            {subheader}
+            <br />
+            <StatusChip {...statusChipProps} />
+          </>
+        ) : (
+          subheader
+        )
+      }
+      action={
+        statusChipProps && statusChipProps.position === 'right' ? (
+          <>
+            <StatusChip {...statusChipProps} />
+            {action}
+          </>
+        ) : (
+          action
+        )
+      }
     />
   );
 };

package/src/lib/CardHeaderLogo.stories.mdx

@@ -0,0 +1,9 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/Card/CardHeader/CardHeaderWithLogo" />
+
+<Markdown>
+  See the [Card Header With Logo](?path=/story/components-spaces-spacesimage--card-header-with-logo) story in
+  SpacesImage.
+</Markdown>