Merge pull request #882 from CodeForAfrica/chore/ui_reuse_social_medi…

…a_links @/commons-ui/core Social Media Links
CodeForAfrica · Sep 10, 2024 · b10d351 · b10d351
2 parents 86d05e6 + c87379d
commit b10d351
Show file tree

Hide file tree

Showing 60 changed files with 600 additions and 831 deletions.
diff --git a/apps/civicsignalblog/next-env.d.ts b/apps/civicsignalblog/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/apps/civicsignalblog/src/components/Footer/Footer.js b/apps/civicsignalblog/src/components/Footer/Footer.js
@@ -1,4 +1,5 @@
-import { Section } from "@commons-ui/core";
+import { Section, StayInTouch } from "@commons-ui/core";
+import { Link } from "@commons-ui/next";
 import { Box, Grid } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import PropTypes from "prop-types";
@@ -8,7 +9,6 @@ import FooterDescription from "./FooterDescription";
 
 import FooterLinks from "@/civicsignalblog/components/FooterLinks";
 import NewsletterSubscription from "@/civicsignalblog/components/NewsletterSubscription";
-import StayInTouch from "@/civicsignalblog/components/StayInTouch";
 
 const FooterRoot = styled(Box)(
   ({ theme: { breakpoints, palette, typography } }) => ({
@@ -67,7 +67,12 @@ const Footer = React.forwardRef(function Footer(props, ref) {
                   />
                 </Grid>
                 <Grid item>
-                  <StayInTouch {...connect} sx={{ mt: "52px" }} />
+                  <StayInTouch
+                    {...connect}
+                    LinkProps={{ component: Link }}
+                    TitleProps={{ variant: "footerCap" }}
+                    sx={{ mt: "52px" }}
+                  />
                 </Grid>
               </Grid>
               <Grid item xs={12} md="auto">

diff --git a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js
@@ -1,26 +1,10 @@
-import { NavList } from "@commons-ui/core";
+import { NavList, SocialMediaIconLink } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
-import { SvgIcon } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import FacebookIcon from "@/civicsignalblog/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg";
-import GitHubIcon from "@/civicsignalblog/assets/icons/Type=github, Size=24, Color=CurrentColor.svg";
-import InstagramIcon from "@/civicsignalblog/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg";
-import LinkedInIcon from "@/civicsignalblog/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg";
-import SlackIcon from "@/civicsignalblog/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg";
-import TwitterIcon from "@/civicsignalblog/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg";
 import NavListItem from "@/civicsignalblog/components/NavListItem";
 
-const platformToIconMap = {
-  Facebook: FacebookIcon,
-  Twitter: TwitterIcon,
-  Instagram: InstagramIcon,
-  Linkedin: LinkedInIcon,
-  Github: GitHubIcon,
-  Slack: SlackIcon,
-};
-
 const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
   const { NavListItemProps, direction, menus, socialLinks, ...other } = props;
 
@@ -58,29 +42,19 @@ const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
         </NavListItem>
       ))}
       {socialLinks?.map(({ platform, url }) => {
-        const Icon = platformToIconMap[platform];
-        if (!Icon) {
-          return null;
-        }
         return (
           <NavListItem key={platform}>
-            <Link
+            <SocialMediaIconLink
+              component={Link}
               href={url}
-              variant="h3"
+              platform={platform}
+              IconProps={{
+                mt: direction === "column" ? 0 : 1,
+              }}
               sx={{
-                color: { xs: "inherit" },
                 typography: { md: "h5" },
               }}
-            >
-              <SvgIcon
-                component={Icon}
-                fontSize="inherit"
-                sx={{
-                  fill: { xs: "none" },
-                  mt: direction === "column" ? 0 : 1,
-                }}
-              />
-            </Link>
+            />
           </NavListItem>
         );
       })}
@@ -99,10 +73,4 @@ NavBarNavList.propTypes = {
   ),
 };
 
-NavBarNavList.defaultProps = {
-  NavListItemProps: undefined,
-  direction: undefined,
-  menus: undefined,
-};
-
 export default NavBarNavList;
diff --git a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -59,34 +59,40 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
       class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineAlways css-1k38rmt-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-ucmc6q-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
       >
-        <div
+        <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1yelrcy-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
-          viewbox="0 0 24 24"
-        />
+          viewBox="0 0 24 24"
+        >
+           
+          <div />
+        </svg>
       </a>
     </li>
     <li
       class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineAlways css-1k38rmt-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-ucmc6q-MuiTypography-root-MuiLink-root-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"
       >
-        <div
+        <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1yelrcy-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dz6c5u-MuiSvgIcon-root"
           focusable="false"
-          viewbox="0 0 24 24"
-        />
+          viewBox="0 0 24 24"
+        >
+           
+          <div />
+        </svg>
       </a>
     </li>
   </ul>

diff --git a/apps/civicsignalblog/src/components/StayInTouch/StayInTouch.js b/apps/civicsignalblog/src/components/StayInTouch/StayInTouch.js
diff --git a/apps/civicsignalblog/src/components/StayInTouch/StayInTouch.snap.js b/apps/civicsignalblog/src/components/StayInTouch/StayInTouch.snap.js
diff --git a/apps/civicsignalblog/src/components/StayInTouch/StayInTouch.test.js b/apps/civicsignalblog/src/components/StayInTouch/StayInTouch.test.js
diff --git a/apps/codeforafrica/next-env.d.ts b/apps/codeforafrica/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/apps/codeforafrica/src/components/Footer/Footer.js b/apps/codeforafrica/src/components/Footer/Footer.js
@@ -1,4 +1,5 @@
-import { Section } from "@commons-ui/core";
+import { Section, StayInTouch } from "@commons-ui/core";
+import { Link } from "@commons-ui/next";
 import { Box, Grid } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import PropTypes from "prop-types";
@@ -8,7 +9,6 @@ import FooterDescription from "./FooterDescription";
 
 import FooterLinks from "@/codeforafrica/components/FooterLinks";
 import NewsletterSubscription from "@/codeforafrica/components/NewsletterSubscription";
-import StayInTouch from "@/codeforafrica/components/StayInTouch";
 
 const FooterRoot = styled(Box)(
   ({ theme: { breakpoints, palette, typography } }) => ({
@@ -67,7 +67,12 @@ const Footer = React.forwardRef(function Footer(props, ref) {
                   />
                 </Grid>
                 <Grid item>
-                  <StayInTouch {...connect} sx={{ mt: "52px" }} />
+                  <StayInTouch
+                    {...connect}
+                    LinkProps={{ component: Link }}
+                    TitleProps={{ variant: "footerCap" }}
+                    sx={{ mt: "52px" }}
+                  />
                 </Grid>
               </Grid>
               <Grid item xs={12} md="auto">