Merge pull request #1010 from CodeForAfrica/ft/remove-useStyle-from-c…

…omponents Remove useStyles from Components
CodeForAfrica · Dec 13, 2024 · 41f5cdc · 41f5cdc
2 parents 7301d1e + 3b2b153
commit 41f5cdc
Show file tree

Hide file tree

Showing 19 changed files with 364 additions and 658 deletions.
diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
@@ -7,12 +7,6 @@ import Card from "@/climatemappedafrica/components/Card";
 import Carousel from "@/climatemappedafrica/components/Carousel";
 import Section from "@/climatemappedafrica/components/Section";
 
-// NOTE(kilemensi) useStyles uses import/definition order to determine how
-//                 classes are ordered.
-//                 see: https://material-ui.com/styles/advanced/#makestyles-withstyles-styled
-// eslint-disable-next-line import/order
-import useStyles from "./useStyles";
-
 const responsive = {
   desktop: {
     items: 4,
@@ -24,9 +18,8 @@ const responsive = {
   },
 };
 
-function AboutTeam({ title, members: membersProp, ...props }) {
+function AboutTeam({ title, members: membersProp }) {
   const membersCount = membersProp?.length ?? 0;
-  const classes = useStyles({ ...props, membersCount });
   const theme = useTheme();
   const isMdUp = useMediaQuery(theme.breakpoints.up("md"));
   const ref = useRef();
@@ -54,7 +47,6 @@ function AboutTeam({ title, members: membersProp, ...props }) {
         {title && (
           <Typography
             variant="h4"
-            className={classes.title}
             sx={{
               textAlign: "center",
               paddingBottom: { xs: 5, md: 10 },
@@ -66,7 +58,23 @@ function AboutTeam({ title, members: membersProp, ...props }) {
         <Carousel
           afterChange={scrollToTeam}
           responsive={responsive}
-          classes={{ dotList: classes.dotList }}
+          DotListProps={{
+            sx: {
+              display: {
+                xs: membersCount > 2 ? "flex" : "none",
+                md: membersCount > 4 ? "flex" : "none",
+              },
+              "& button": {
+                borderColor: "#000",
+                height: theme.typography.pxToRem(16),
+                marginRight: theme.typography.pxToRem(12),
+                width: theme.typography.pxToRem(16),
+              },
+              "& .react-multi-carousel-dot--active button": {
+                borderColor: "#000",
+              },
+            },
+          }}
         >
           {membersProp.map((member) => (
             <Card

diff --git a/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js b/apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js
@@ -6,21 +6,25 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-1termwk"
   >
     <div
-      class="makeStyles-root-7 makeStyles-root-5 makeStyles-root-3 makeStyles-fixed-4 MuiBox-root css-0"
+      class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-0"
     >
       <h4
         class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"
       >
         About Team
       </h4>
       <div
-        class="react-multi-carousel-list  makeStyles-root-8"
-        dir="ltr"
+        class="MuiBox-root css-4jcry9"
       >
-        <ul
-          class="react-multi-carousel-track "
-          style="transition: none; overflow: unset; transform: translate3d(0px,0,0);"
-        />
+        <div
+          class="react-multi-carousel-list  "
+          dir="ltr"
+        >
+          <ul
+            class="react-multi-carousel-track "
+            style="transition: none; overflow: unset; transform: translate3d(0px,0,0);"
+          />
+        </div>
       </div>
     </div>
   </div>

diff --git a/apps/climatemappedafrica/src/components/AboutTeam/useStyles.js b/apps/climatemappedafrica/src/components/AboutTeam/useStyles.js
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
@@ -6,13 +6,10 @@ 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,8 @@ function Card({
   titleProps,
   variant,
   sx,
-  ...props
 }) {
   const squareMedia = mediaProps?.square;
-  const classes = useStyles({ ...props, squareMedia });
   const actionAreaProps = { href, onClick };
   const contentProps = {
     description,
@@ -46,34 +41,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 +71,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: ({ typography }) => ({
+              marginTop: 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 +119,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>
   );