From f3712e159bd73ce417a37bbda8e876c52582c9cd Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Thu, 27 Jun 2024 17:29:02 +0300 Subject: [PATCH 1/4] Create a reusable Link showing social icons --- .../SocialMediaLinkIcon/LinkIcon.tsx | 22 +++++++ .../SocialMediaLinkIcon.tsx | 64 +++++++++++++++++++ .../components/SocialMediaLinkIcon/index.ts | 9 +++ 3 files changed, 95 insertions(+) create mode 100644 apps/roboshield/src/components/SocialMediaLinkIcon/LinkIcon.tsx create mode 100644 apps/roboshield/src/components/SocialMediaLinkIcon/SocialMediaLinkIcon.tsx create mode 100644 apps/roboshield/src/components/SocialMediaLinkIcon/index.ts diff --git a/apps/roboshield/src/components/SocialMediaLinkIcon/LinkIcon.tsx b/apps/roboshield/src/components/SocialMediaLinkIcon/LinkIcon.tsx new file mode 100644 index 000000000..e28a435a6 --- /dev/null +++ b/apps/roboshield/src/components/SocialMediaLinkIcon/LinkIcon.tsx @@ -0,0 +1,22 @@ +import { Link, RichTypography } from "@commons-ui/next"; +import { Grid, SvgIcon } from "@mui/material"; +import type { LinkProps, SvgIconProps } from "@mui/material"; +import React from "react"; + +interface LinkIconProps extends LinkProps { + IconProps: SvgIconProps; +} + +const LinkIcon = React.forwardRef(function LinkIcon( + { IconProps, ...props }: LinkIconProps, + ref: React.ForwardedRef, +) { + return ( + + + + ); +}); + +export type { LinkIconProps }; +export default LinkIcon; diff --git a/apps/roboshield/src/components/SocialMediaLinkIcon/SocialMediaLinkIcon.tsx b/apps/roboshield/src/components/SocialMediaLinkIcon/SocialMediaLinkIcon.tsx new file mode 100644 index 000000000..a0c0cfb48 --- /dev/null +++ b/apps/roboshield/src/components/SocialMediaLinkIcon/SocialMediaLinkIcon.tsx @@ -0,0 +1,64 @@ +import { Link, RichTypography } from "@commons-ui/next"; +import { Grid, SvgIcon } from "@mui/material"; +import React from "react"; + +import FacebookIcon from "@/roboshield/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg"; +import GitHubIcon from "@/roboshield/assets/icons/Type=github, Size=24, Color=CurrentColor.svg"; +import InstagramIcon from "@/roboshield/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg"; +import LinkedInIcon from "@/roboshield/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg"; +import SlackIcon from "@/roboshield/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg"; +import TwitterIcon from "@/roboshield/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg"; + +import LinkIcon from "./LinkIcon"; +import type { LinkIconProps } from "./LinkIcon"; + +const platformToIconMap = new Map(); +platformToIconMap.set("Facebook", FacebookIcon); +platformToIconMap.set("Twitter", TwitterIcon); +platformToIconMap.set("Instagram", InstagramIcon); +platformToIconMap.set("Linkedin", LinkedInIcon); +platformToIconMap.set("Github", GitHubIcon); +platformToIconMap.set("Slack", SlackIcon); + +type SocialMediaPlatform = + | "Facebook" + | "Github" + | "Instagram" + | "LinkedIn" + | "Slack" + | "Twitter"; + +interface SocialMediaLink { + platform: SocialMediaPlatform; + // TODO(koech): Confirm why we chose url instead of href in the CMS + url: string; +} + +interface SocialMediaLinkIconProps extends Omit { + platform: SocialMediaPlatform; + url: string; +} + +const SocialMediaLinkIcon = React.forwardRef(function SocialMediaLinkIcon( + { IconProps, url, platform, ...props }: SocialMediaLinkIconProps, + ref: React.ForwardedRef, +) { + const Icon = platformToIconMap.get(platform); + + if (!Icon) { + return null; + } + return ( + + ); +}); + +export type { SocialMediaLink, SocialMediaLinkIconProps, SocialMediaPlatform }; +export default SocialMediaLinkIcon; diff --git a/apps/roboshield/src/components/SocialMediaLinkIcon/index.ts b/apps/roboshield/src/components/SocialMediaLinkIcon/index.ts new file mode 100644 index 000000000..127dd1f95 --- /dev/null +++ b/apps/roboshield/src/components/SocialMediaLinkIcon/index.ts @@ -0,0 +1,9 @@ +import type { + SocialMediaLink, + SocialMediaLinkIconProps, + SocialMediaPlatform, +} from "./SocialMediaLinkIcon"; +import SocialMediaLinkIcon from "./SocialMediaLinkIcon"; + +export type { SocialMediaLink, SocialMediaLinkIconProps, SocialMediaPlatform }; +export default SocialMediaLinkIcon; From e6d3ccb0c1453779010d4431d300303860710cca Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Thu, 27 Jun 2024 17:29:46 +0300 Subject: [PATCH 2/4] Use it in stay in touch --- .../components/StayInTouch/StayInTouch.tsx | 45 ++++++------------- 1 file changed, 14 insertions(+), 31 deletions(-) diff --git a/apps/roboshield/src/components/StayInTouch/StayInTouch.tsx b/apps/roboshield/src/components/StayInTouch/StayInTouch.tsx index 7631ddb3f..b4bf60f44 100644 --- a/apps/roboshield/src/components/StayInTouch/StayInTouch.tsx +++ b/apps/roboshield/src/components/StayInTouch/StayInTouch.tsx @@ -2,23 +2,11 @@ import { Link, RichTypography } from "@commons-ui/next"; import { Grid, SvgIcon } from "@mui/material"; import React from "react"; -import FacebookIcon from "@/roboshield/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg"; -import GitHubIcon from "@/roboshield/assets/icons/Type=github, Size=24, Color=CurrentColor.svg"; -import InstagramIcon from "@/roboshield/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg"; -import LinkedInIcon from "@/roboshield/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg"; -import SlackIcon from "@/roboshield/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg"; -import TwitterIcon from "@/roboshield/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg"; - -const platformToIconMap = new Map(); -platformToIconMap.set("Facebook", FacebookIcon); -platformToIconMap.set("Twitter", TwitterIcon); -platformToIconMap.set("Instagram", InstagramIcon); -platformToIconMap.set("Linkedin", LinkedInIcon); -platformToIconMap.set("Github", GitHubIcon); -platformToIconMap.set("Slack", SlackIcon); +import SocialMediaLinkIcon from "@/roboshield/components/SocialMediaLinkIcon"; +import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon"; interface StayInTouchProps { - links: { url: string; platform: string }[]; + links: SocialMediaLink[]; sx: any; title: string; } @@ -60,11 +48,6 @@ const StayInTouch = React.forwardRef(function StayInTouch( justifyContent={{ xs: "center", md: "flex-start" }} > {links.map(({ url, platform }) => { - const Icon = platformToIconMap.get(platform); - - if (!(Icon || url)) { - return null; - } return ( - - - + /> ); })} From 9b23945acd7ebe33a5b8b478a231b49eee3551a2 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Thu, 27 Jun 2024 17:30:07 +0300 Subject: [PATCH 3/4] Use it in nabar nav list --- .../NavBarNavList/NavBarNavList.tsx | 45 +++++++------------ 1 file changed, 15 insertions(+), 30 deletions(-) diff --git a/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx b/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx index 604459296..07a03818a 100644 --- a/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx +++ b/apps/roboshield/src/components/NavBarNavList/NavBarNavList.tsx @@ -3,22 +3,12 @@ import { Link } from "@commons-ui/next"; import { LinkProps, SvgIcon } from "@mui/material"; import React, { ElementType, FC } from "react"; -import GitHubIcon from "@/roboshield/assets/icons/Type=github, Size=24, Color=CurrentColor.svg"; import NavListItem from "@/roboshield/components/NavListItem"; - -const platformToIconMap: { - [key: string]: ElementType; -} = { - Github: GitHubIcon, -}; +import SocialMediaLinkIcon from "@/roboshield/components/SocialMediaLinkIcon"; +import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon"; interface NavListItemProps extends LinkProps {} -interface SocialLinks { - platform: string; - url: string; -} - interface Menu { label: string; href: string; @@ -28,7 +18,7 @@ interface Props { NavListItemProps?: NavListItemProps; direction?: string; menus?: Menu[]; - socialLinks?: SocialLinks[]; + socialLinks?: SocialMediaLink[]; } const NavBarNavList: FC = React.forwardRef( @@ -53,7 +43,7 @@ const NavBarNavList: FC = React.forwardRef( {...NavListItemProps} href={item.href} sx={{ - typography: { md: "body1Bold" }, + typography: { md: "body3" }, "&:hover, &:active, &:focus, &:focus-within": { textDecoration: "none", color: { xs: "inherit", md: "primary.main" }, @@ -66,29 +56,24 @@ const NavBarNavList: FC = React.forwardRef( ))} {socialLinks?.map(({ platform, url }) => { - const Icon = platformToIconMap[platform]; - if (!Icon) { - return null; - } return ( - - - + /> ); })} From 835701857b036822dae2597665479873aea94f91 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Thu, 27 Jun 2024 17:31:12 +0300 Subject: [PATCH 4/4] Reuse types from social link icon component --- .../src/components/DesktopNavBar/DesktopNavBar.tsx | 8 ++------ apps/roboshield/src/components/Footer/Footer.tsx | 3 ++- .../src/components/MobileNavBar/MobileNavBar.tsx | 8 ++------ apps/roboshield/src/components/NavBar/NavBar.tsx | 8 ++------ apps/roboshield/src/components/Page/Page.tsx | 11 +++-------- 5 files changed, 11 insertions(+), 27 deletions(-) diff --git a/apps/roboshield/src/components/DesktopNavBar/DesktopNavBar.tsx b/apps/roboshield/src/components/DesktopNavBar/DesktopNavBar.tsx index 7d2235ebb..ae437d5bf 100644 --- a/apps/roboshield/src/components/DesktopNavBar/DesktopNavBar.tsx +++ b/apps/roboshield/src/components/DesktopNavBar/DesktopNavBar.tsx @@ -3,11 +3,7 @@ import React, { ForwardedRef } from "react"; import NavBarNavList from "@/roboshield/components/NavBarNavList"; import NextImageButton from "@/roboshield/components/NextImageButton"; - -interface SocialLinks { - platform: string; - url: string; -} +import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon"; interface Menu { label: string; @@ -16,7 +12,7 @@ interface Menu { interface Props extends Grid2Props { logo: any; menus: Menu[]; - socialLinks: SocialLinks[]; + socialLinks: SocialMediaLink[]; } const DesktopNavBar = React.forwardRef(function DesktopNavBar( props: Props, diff --git a/apps/roboshield/src/components/Footer/Footer.tsx b/apps/roboshield/src/components/Footer/Footer.tsx index b5ee76b4f..07bed8058 100644 --- a/apps/roboshield/src/components/Footer/Footer.tsx +++ b/apps/roboshield/src/components/Footer/Footer.tsx @@ -9,10 +9,11 @@ import RichText from "@/roboshield/components/RichText"; import type { Children } from "@/roboshield/components/RichText"; import FooterDescription from "./FooterDescription"; import { Partner } from "@/roboshield/lib/data/payload.types"; +import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon"; export interface FooterProps { connect: { - links: { url: string; platform: string }[]; + links: SocialMediaLink[]; title: string; }; description: Children; diff --git a/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx b/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx index f48c6291e..4d8f1b471 100644 --- a/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx +++ b/apps/roboshield/src/components/MobileNavBar/MobileNavBar.tsx @@ -15,11 +15,7 @@ import menuIcon from "@/roboshield/assets/icons/menu-icon.svg"; import CloseIcon from "@/roboshield/assets/icons/Type=x, Size=24, Color=CurrentColor.svg"; import NavBarNavList from "@/roboshield/components/NavBarNavList"; import NextImageButton from "@/roboshield/components/NextImageButton"; - -interface SocialLinks { - platform: string; - url: string; -} +import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon"; interface Menu { label: string; @@ -28,7 +24,7 @@ interface Menu { interface Props extends Grid2Props { logo: any; menus: Menu[]; - socialLinks: SocialLinks[]; + socialLinks: SocialMediaLink[]; } const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({ diff --git a/apps/roboshield/src/components/NavBar/NavBar.tsx b/apps/roboshield/src/components/NavBar/NavBar.tsx index 6c7755ea0..1844c8f9d 100644 --- a/apps/roboshield/src/components/NavBar/NavBar.tsx +++ b/apps/roboshield/src/components/NavBar/NavBar.tsx @@ -3,11 +3,7 @@ import React from "react"; import DesktopNavBar from "@/roboshield/components/DesktopNavBar"; import MobileNavBar from "@/roboshield/components/MobileNavBar"; - -interface SocialLinks { - platform: string; - url: string; -} +import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon"; interface Menu { label: string; @@ -16,7 +12,7 @@ interface Menu { interface Props { logo: any; menus: Menu[]; - socialLinks: SocialLinks[]; + socialLinks: SocialMediaLink[]; } function NavBar({ logo, menus, socialLinks }: Props) { return ( diff --git a/apps/roboshield/src/components/Page/Page.tsx b/apps/roboshield/src/components/Page/Page.tsx index f66091302..70ebfe716 100644 --- a/apps/roboshield/src/components/Page/Page.tsx +++ b/apps/roboshield/src/components/Page/Page.tsx @@ -1,14 +1,9 @@ import React from "react"; -import type { FooterProps } from "@/roboshield/components/Footer"; import Footer from "@/roboshield/components/Footer"; - +import type { FooterProps } from "@/roboshield/components/Footer"; import NavBar from "@/roboshield/components/NavBar"; - -interface SocialLinks { - platform: string; - url: string; -} +import type { SocialMediaLink } from "@/roboshield/components/SocialMediaLinkIcon"; interface Menu { label: string; @@ -23,7 +18,7 @@ interface Menu { interface Navbar { logo: any; menus: Menu[]; - socialLinks: SocialLinks[]; + socialLinks: SocialMediaLink[]; } interface Footer { logo: any;