Skip to content

Commit

Permalink
Merge pull request #882 from CodeForAfrica/chore/ui_reuse_social_medi…
Browse files Browse the repository at this point in the history
…a_links

@/commons-ui/core Social Media Links
  • Loading branch information
kilemensi authored Sep 10, 2024
2 parents 86d05e6 + c87379d commit b10d351
Show file tree
Hide file tree
Showing 60 changed files with 600 additions and 831 deletions.
2 changes: 1 addition & 1 deletion apps/civicsignalblog/next-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
11 changes: 8 additions & 3 deletions apps/civicsignalblog/src/components/Footer/Footer.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 } }) => ({
Expand Down Expand Up @@ -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">
Expand Down
48 changes: 8 additions & 40 deletions apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js
Original file line number Diff line number Diff line change
@@ -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;

Expand Down Expand Up @@ -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>
);
})}
Expand All @@ -99,10 +73,4 @@ NavBarNavList.propTypes = {
),
};

NavBarNavList.defaultProps = {
NavListItemProps: undefined,
direction: undefined,
menus: undefined,
};

export default NavBarNavList;
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
112 changes: 0 additions & 112 deletions apps/civicsignalblog/src/components/StayInTouch/StayInTouch.js

This file was deleted.

This file was deleted.

This file was deleted.

2 changes: 1 addition & 1 deletion apps/codeforafrica/next-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
11 changes: 8 additions & 3 deletions apps/codeforafrica/src/components/Footer/Footer.js
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 } }) => ({
Expand Down Expand Up @@ -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">
Expand Down
Loading

0 comments on commit b10d351

Please sign in to comment.