Remove Old Commons-ui QuickLinks

CodeForAfrica · Dec 14, 2024 · f785b91 · f785b91
1 parent 576ac69
commit f785b91
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 149 deletions.
diff --git a/apps/climatemappedafrica/package.json b/apps/climatemappedafrica/package.json
@@ -35,7 +35,6 @@
   "dependencies": {
     "@apollo/client": "catalog:",
     "@commons-ui/core": "workspace:*",
-    "@commons-ui/legacy": "catalog:",
     "@commons-ui/next": "workspace:*",
     "@commons-ui/payload": "workspace:*",
     "@emotion/react": "catalog:",

diff --git a/apps/climatemappedafrica/src/components/Footer/index.js b/apps/climatemappedafrica/src/components/Footer/index.js
@@ -1,12 +1,9 @@
-import { Copyright } from "@commons-ui/core";
-import { QuickLinks } from "@commons-ui/legacy";
+import { Copyright, QuickLinks } from "@commons-ui/core";
 import { Link, StayInTouch } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
 import { Box, Grid, useTheme } from "@mui/material";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
 import Section from "@/climatemappedafrica/components/Section";
 
@@ -19,7 +16,6 @@ function Footer(props) {
     links,
     variant,
   } = props;
-  const classes = useStyles(props);
   const theme = useTheme();
 
   return (
@@ -136,11 +132,46 @@ function Footer(props) {
                   <QuickLinks
                     linkComponent={Link}
                     {...links}
-                    classes={{
-                      root: classes.quickLinkRoot,
-                      list: classes.quickList,
-                      link: classes.quickLink,
-                      title: classes.quickLinksTitle,
+                    sx={{
+                      textAlign: {
+                        xs: "center",
+                        lg: "inherit",
+                      },
+                      padding: {
+                        xs: `${theme.typography.pxToRem(32)} 0 `,
+                        lg: 0,
+                      },
+                    }}
+                    TitleProps={{
+                      variant: "caption",
+                      sx: {
+                        color: theme.palette.text.secondary,
+                        fontSize: theme.typography.subtitle2.fontSize,
+                        fontWeight: "bold",
+                      },
+                    }}
+                    LinksProps={{
+                      variant: "caption",
+                      sx: {
+                        listStyle: "none",
+                        color: theme.palette.text.secondary,
+                        padding: 0,
+                        letterspacing: theme.typography.pxToRem(0.7),
+                        "& > li": {
+                          marginTop: theme.typography.pxToRem(16),
+                        },
+                      },
+                    }}
+                    LinkProps={{
+                      variant: "caption",
+                      sx: {
+                        fontSize: theme.typography.subtitle1.fontSize,
+                        color: theme.palette.text.secondary,
+                        fontWeight: "normal",
+                        "&:hover": {
+                          color: theme.palette.primary.light,
+                        },
+                      },
                     }}
                   />
                 )}

diff --git a/apps/climatemappedafrica/src/components/Footer/useStyles.js b/apps/climatemappedafrica/src/components/Footer/useStyles.js
diff --git a/packages/commons-ui-core/src/QuickLinks/QuickLinks.js b/packages/commons-ui-core/src/QuickLinks/QuickLinks.js
@@ -0,0 +1,66 @@
+import { Box, Link, Typography } from "@mui/material";
+import React from "react";
+
+const QuickLinks = React.forwardRef(function QuickLinks(props, ref) {
+  const { linkComponent, links, LinksProps, LinkProps, title, TitleProps, sx } =
+    props;
+  const LinkComponent = linkComponent || Link;
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        paddingBottom: {
+          xs: "unset",
+          md: "0.5rem",
+        },
+        ...sx,
+      }}
+      ref={ref}
+    >
+      <Typography
+        {...TitleProps}
+        sx={{
+          lineHeight: "inherit",
+          ...TitleProps?.sx,
+        }}
+      >
+        {title}
+      </Typography>
+      <Typography
+        {...LinksProps}
+        sx={{
+          listStyle: "none",
+          padding: 0,
+          paddingTop: "1rem",
+          "& > li": {
+            marginTop: {
+              xs: "2.3125rem",
+              md: "1.5rem",
+            },
+          },
+          ...LinksProps?.sx,
+        }}
+        component="ul"
+      >
+        {links.map(({ label, ...others }) => (
+          <li key={label}>
+            <LinkComponent
+              {...others}
+              underline="none"
+              {...LinkProps}
+              sx={{
+                textDecoration: "none",
+                ...LinkProps?.sx,
+              }}
+            >
+              {label}
+            </LinkComponent>
+          </li>
+        ))}
+      </Typography>
+    </Box>
+  );
+});
+
+export default QuickLinks;
diff --git a/packages/commons-ui-core/src/QuickLinks/index.js b/packages/commons-ui-core/src/QuickLinks/index.js
@@ -0,0 +1,3 @@
+import QuickLinks from "./QuickLinks";
+
+export default QuickLinks;
diff --git a/packages/commons-ui-core/src/index.js b/packages/commons-ui-core/src/index.js
@@ -10,3 +10,4 @@ export { default as RichTypography } from "./RichTypography";
 export { default as Section } from "./Section";
 export { default as SocialMediaIconLink } from "./SocialMediaIconLink";
 export { default as StayInTouch } from "./StayInTouch";
+export { default as QuickLinks } from "./QuickLinks";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import QuickLinks from "./QuickLinks";

		export default QuickLinks;