Style MUI Card system according to Comet DXP design (#2890)

vivid-planet · Jan 8, 2025 · ee59753 · ee59753
1 parent f9bd7ad
commit ee59753
Show file tree

Hide file tree

Showing 5 changed files with 154 additions and 0 deletions.
diff --git a/.changeset/large-apples-learn.md b/.changeset/large-apples-learn.md
@@ -0,0 +1,5 @@
+---
+"@comet/admin-theme": minor
+---
+
+Add styling of `Card` and `CardHeader` to align with Comet DXP design
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiCard.ts b/packages/admin/admin-theme/src/componentsTheme/MuiCard.ts
@@ -0,0 +1,19 @@
+import { paperClasses } from "@mui/material";
+
+import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
+import { GetMuiComponentTheme } from "./getComponentsTheme";
+
+export const getMuiCard: GetMuiComponentTheme<"MuiCard"> = (component, { spacing }) => ({
+    ...component,
+    defaultProps: {
+        square: false,
+        ...component?.defaultProps,
+    },
+    styleOverrides: mergeOverrideStyles<"MuiCard">(component?.styleOverrides, {
+        root: {
+            [`&.${paperClasses.rounded}`]: {
+                borderRadius: "4px",
+            },
+        },
+    }),
+});
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiCardHeader.ts b/packages/admin/admin-theme/src/componentsTheme/MuiCardHeader.ts
@@ -0,0 +1,29 @@
+import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
+import { GetMuiComponentTheme } from "./getComponentsTheme";
+
+export const getMuiCardHeader: GetMuiComponentTheme<"MuiCardHeader"> = (component, { spacing, palette }) => ({
+    ...component,
+    styleOverrides: mergeOverrideStyles<"MuiCardHeader">(component?.styleOverrides, {
+        root: {
+            backgroundColor: palette.grey["A200"],
+            color: "#fff",
+            paddingBottom: "20px",
+            paddingTop: "20px",
+        },
+        action: {
+            lineHeight: 0,
+            marginBottom: 0,
+            marginTop: 0,
+            alignSelf: "center",
+
+            "& > .MuiButton-root": {
+                marginTop: "-10px",
+                marginBottom: "-10px",
+            },
+            "& > .MuiIconButton-root": {
+                marginTop: "-10px",
+                marginBottom: "-10px",
+            },
+        },
+    }),
+});
diff --git a/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts b/packages/admin/admin-theme/src/componentsTheme/getComponentsTheme.ts
@@ -13,7 +13,9 @@ import { getMuiAutocomplete } from "./MuiAutocomplete";
 import { getMuiBadge } from "./MuiBadge";
 import { getMuiButton } from "./MuiButton";
 import { getMuiButtonGroup } from "./MuiButtonGroup";
+import { getMuiCard } from "./MuiCard";
 import { getMuiCardContent } from "./MuiCardContent";
+import { getMuiCardHeader } from "./MuiCardHeader";
 import { getMuiCheckbox } from "./MuiCheckbox";
 import { getMuiChip } from "./MuiChip";
 import { getMuiDataGrid } from "./MuiDataGrid";
@@ -74,7 +76,9 @@ export const getComponentsTheme = (components: Components, themeData: ThemeData)
     MuiBadge: getMuiBadge(components.MuiBadge, themeData),
     MuiButton: getMuiButton(components.MuiButton, themeData),
     MuiButtonGroup: getMuiButtonGroup(components.MuiButtonGroup, themeData),
+    MuiCard: getMuiCard(components.MuiCard, themeData),
     MuiCardContent: getMuiCardContent(components.MuiCardContent, themeData),
+    MuiCardHeader: getMuiCardHeader(components.MuiCardHeader, themeData),
     MuiCheckbox: getMuiCheckbox(components.MuiCheckbox, themeData),
     MuiChip: getMuiChip(components.MuiChip, themeData),
     MuiDataGrid: getMuiDataGrid(components.MuiDataGrid, themeData),

diff --git a/storybook/src/admin/mui/Card.stories.tsx b/storybook/src/admin/mui/Card.stories.tsx
@@ -0,0 +1,97 @@
+import { ArrowRight, Reload } from "@comet/admin-icons";
+import { Button, Card, CardContent, CardHeader, Grid, IconButton, Typography } from "@mui/material";
+import * as React from "react";
+
+export default {
+    title: "@comet/admin/mui",
+};
+
+export const _Card = () => {
+    return (
+        <Grid container spacing={10}>
+            <Grid item xs={5}>
+                <Card>
+                    <CardHeader title={<Typography>Card Header</Typography>} />
+                    <CardContent>
+                        CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                    </CardContent>
+                </Card>
+            </Grid>
+            <Grid item xs={5}>
+                <Card>
+                    <CardHeader title={<Typography>Card Header with Avatar (Icon)</Typography>} avatar={<Reload />} />
+                    <CardContent>
+                        CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                    </CardContent>
+                </Card>
+            </Grid>
+            <Grid item xs={5}>
+                <Card>
+                    <CardHeader
+                        title={<Typography>Card Header with Action (Button)</Typography>}
+                        action={
+                            <Button variant="text" color="inherit" endIcon={<ArrowRight />}>
+                                Show All
+                            </Button>
+                        }
+                    />
+                    <CardContent>
+                        CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+                    </CardContent>
+                </Card>
+            </Grid>
+            <Grid item xs={5}>
+                <Card>
+                    <CardHeader
+                        title={<Typography>Card Header with Avatar (Icon) and Action (Button)</Typography>}
+                        avatar={<Reload />}
+                        action={
+                            <Button variant="text" color="inherit" endIcon={<ArrowRight />}>
+                                Show All
+                            </Button>
+                        }
+                    />
+                    <CardContent>
+                        CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.{" "}
+                    </CardContent>
+                </Card>
+            </Grid>
+            <Grid item xs={5}>
+                <Card>
+                    <CardHeader
+                        title={<Typography>Card Header with IconButton</Typography>}
+                        avatar={<Reload />}
+                        action={
+                            <IconButton color="inherit" size="large">
+                                <ArrowRight />
+                            </IconButton>
+                        }
+                    />
+                    <CardContent>
+                        CardContent: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+                        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+                        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+                        justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.{" "}
+                    </CardContent>
+                </Card>
+            </Grid>
+        </Grid>
+    );
+};