Remove unused Styles from Card

CodeForAfrica · Dec 5, 2024 · ebd38f6 · ebd38f6
1 parent 4af25ca
commit ebd38f6
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 186 deletions.
diff --git a/apps/climatemappedafrica/src/components/Card/ActionArea.js b/apps/climatemappedafrica/src/components/Card/ActionArea.js
@@ -1,20 +1,17 @@
 import { Link } from "@commons-ui/next";
 import { CardActionArea } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
 import PropTypes from "prop-types";
 import React from "react";
 
-const useStyles = makeStyles(() => ({
-  root: {},
-  focusHighlight: {
-    background: "transparent",
-  },
-  focusVisible: {},
-}));
-
-function ActionArea({ href, children, onClick, ...props }) {
-  const classes = useStyles(props);
-
+function ActionArea({
+  href,
+  children,
+  onClick,
+  ActionAreaRootProps,
+  FocusHighlightProps,
+  FocusVisibleProps,
+  ...props
+}) {
   if (!(href || onClick)) {
     return children;
   }
@@ -26,10 +23,17 @@ function ActionArea({ href, children, onClick, ...props }) {
       {...props}
       href={href}
       onClick={onClick}
-      classes={{
-        root: classes.root,
-        focusHighlight: classes.focusHighlight,
-        focusVisible: classes.focusVisible,
+      sx={{
+        "& .MuiCardActionArea-root": {
+          ...ActionAreaRootProps,
+        },
+        "& ..MuiCardActionArea-focusHighlight": {
+          background: "transparent",
+          ...FocusHighlightProps,
+        },
+        "& .Mui-focusVisible": {
+          ...FocusVisibleProps,
+        },
       }}
     >
       {children}

diff --git a/apps/climatemappedafrica/src/components/Card/Card.js b/apps/climatemappedafrica/src/components/Card/Card.js
@@ -1,18 +1,15 @@
 import { Link } from "@commons-ui/next";
-import { Card as MuiCard } from "@mui/material";
+import { Card as MuiCard, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
 import CardActionArea from "./ActionArea";
 import CardContent from "./Content";
 import CardMedia from "./Media";
-import useStyles from "./useStyles";
 
 function Card({
   alt,
   chart,
-  children,
-  className,
   ctaText,
   description,
   descriptionProps,
@@ -28,10 +25,9 @@ function Card({
   titleProps,
   variant,
   sx,
-  ...props
 }) {
   const squareMedia = mediaProps?.square;
-  const classes = useStyles({ ...props, squareMedia });
+  const theme = useTheme();
   const actionAreaProps = { href, onClick };
   const contentProps = {
     description,
@@ -46,34 +42,27 @@ function Card({
     <MuiCard
       elevation={0}
       square
-      sx={(theme) => ({
+      sx={({ typography }) => ({
         backgroundColor: "inherit",
         boxShadow: "none",
         borderRadius: 0,
         padding: {
-          xs: squareMedia ? `0 ${theme.typography.pxToRem(36)}` : 0,
+          xs: squareMedia ? `0 ${typography.pxToRem(36)}` : 0,
           md: 0,
         },
         minWidth: {
-          xs: theme.typography.pxToRem(350),
+          xs: typography.pxToRem(350),
           md: "unset",
         },
         width: {
           xs: "100%",
-          md: theme.typography.pxToRem(squareMedia ? 278 : 296),
-          lg: theme.typography.pxToRem(squareMedia ? 278 : 376),
+          md: typography.pxToRem(squareMedia ? 278 : 296),
+          lg: typography.pxToRem(squareMedia ? 278 : 376),
         },
         ...sx,
       })}
     >
-      <CardActionArea
-        {...actionAreaProps}
-        classes={{
-          root: classes.actionArea,
-          focusHighlight: classes.actionAreaFocusHighlight,
-          focusVisible: classes.actionAreaFocusVisible,
-        }}
-      >
+      <CardActionArea {...actionAreaProps}>
         <CardMedia
           {...mediaProps}
           alt={alt}
@@ -83,16 +72,46 @@ function Card({
           imageProps={imageProps}
           media={media}
           variant={variant}
-          classes={{ root: classes.media, image: classes.mediaImage }}
         />
         <CardContent
           {...contentProps}
-          classes={{
-            root: classes.content,
-            description: classes.contentDescription,
-            link: classes.contentLink,
-            title: classes.contentTitle,
+          TitleProps={{
+            sx: {
+              marginTop: theme.typography.pxToRem(squareMedia ? 20 : 40),
+              overflow: "hidden",
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              textOverflow: "ellipsis",
+            },
           }}
+          DescriptionProps={{
+            sx: {
+              overflow: "hidden",
+              display: "-webkit-box",
+              WebkitLineClamp: 3,
+              WebkitBoxOrient: "vertical",
+              textOverflow: "ellipsis",
+            },
+          }}
+          sx={({ typography }) => ({
+            backgroundColor: "inherit",
+            boxShadow: "none",
+            borderRadius: 0,
+            padding: {
+              xs: squareMedia ? `0 ${typography.pxToRem(36)}` : 0,
+              md: 0,
+            },
+            minWidth: {
+              xs: typography.pxToRem(350),
+              md: "unset",
+            },
+            width: {
+              xs: "100%",
+              md: typography.pxToRem(squareMedia ? 278 : 296),
+              lg: typography.pxToRem(squareMedia ? 278 : 376),
+            },
+          })}
         />
       </CardActionArea>
       {href && ctaText && (
@@ -101,9 +120,9 @@ function Card({
           underline="always"
           variant="subtitle2"
           {...linkProps}
-          sx={(theme) => ({
+          sx={({ typography }) => ({
             display: "inline-flex",
-            marginTop: theme.typography.pxToRem(20),
+            marginTop: typography.pxToRem(20),
             fontWeight: "bold",
           })}
         >

diff --git a/apps/climatemappedafrica/src/components/Card/Content.js b/apps/climatemappedafrica/src/components/Card/Content.js
@@ -1,65 +1,53 @@
-import { RichTypography } from "@commons-ui/legacy";
 import { RichText } from "@commons-ui/payload";
-import { CardContent } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import clsx from "clsx";
+import { CardContent, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-const useStyles = makeStyles(({ typography }) => ({
-  root: {
-    padding: 0,
-    "&:last-child": {
-      padding: 0,
-    },
-  },
-  title: {},
-  description: {
-    marginTop: typography.pxToRem(20),
-  },
-  link: {
-    display: "inline-flex",
-    marginTop: typography.pxToRem(20),
-    fontWeight: "bold",
-  },
-}));
-
 function Content({
-  className,
   description,
-  descriptionProps,
+  DescriptionProps,
   title,
-  titleProps,
+  TitleProps,
   href,
-  ctaText,
-  linkProps,
-  ...props
+  sx,
 }) {
-  const classes = useStyles(props);
   if (!(title || description || href)) {
     return null;
   }
 
   return (
-    <CardContent className={clsx(classes.root, className)}>
-      <RichTypography variant="h5" {...titleProps} className={classes.title}>
+    <CardContent
+      sx={{
+        padding: 0,
+        "&:last-child": {
+          padding: 0,
+        },
+        ...sx,
+      }}
+    >
+      <Typography
+        variant="h5"
+        {...TitleProps}
+        sx={{
+          ...TitleProps?.sx,
+        }}
+      >
         {title}
-      </RichTypography>
+      </Typography>
       {/* Support for rich text while keeping backwards compatibility */}
       {Array.isArray(description) ? (
-        <RichText
-          {...descriptionProps}
-          className={classes.description}
-          elements={description}
-        />
+        <RichText {...DescriptionProps} elements={description} />
       ) : (
-        <RichTypography
+        <Typography
           variant="subtitle2"
-          {...descriptionProps}
-          className={classes.description}
+          {...DescriptionProps}
+          sx={({ typography }) => ({
+            marginTop: typography.pxToRem(20),
+            ...DescriptionProps?.sx,
+          })}
         >
           {description}
-        </RichTypography>
+        </Typography>
       )}
     </CardContent>
   );