From a3642d2b8b88ce6681bd1ca55814d0f0dd4b4870 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Tue, 10 Sep 2024 13:38:05 +0300 Subject: [PATCH 1/3] Move social media link components to core IconLink, SocialMediaIconLink, and StayInTouch --- .../src/SocialMediaIconLink/IconLink.js | 21 ++++++ .../SocialMediaIconLink.js | 73 +++++++++++++++++++ .../SocialMediaIconLink.snap.js | 20 +++++ .../SocialMediaIconLink.test.js | 21 ++++++ .../src/SocialMediaIconLink/index.js | 5 ++ .../src/StayInTouch/StayInTouch.js | 61 ++++++++++++++++ .../src/StayInTouch/StayInTouch.snap.js | 18 +++++ .../src/StayInTouch/StayInTouch.test.js | 26 +++++++ .../commons-ui-core/src/StayInTouch/index.js | 3 + ...=facebook, Size=24, Color=CurrentColor.svg | 3 + ...pe=github, Size=24, Color=CurrentColor.svg | 10 +++ ...instagram, Size=24, Color=CurrentColor.svg | 5 ++ ...=linkedin, Size=24, Color=CurrentColor.svg | 5 ++ ...ype=slack, Size=24, Color=CurrentColor.svg | 10 +++ ...e=twitter, Size=24, Color=CurrentColor.svg | 3 + packages/commons-ui-core/src/index.js | 7 +- 16 files changed, 289 insertions(+), 2 deletions(-) create mode 100644 packages/commons-ui-core/src/SocialMediaIconLink/IconLink.js create mode 100644 packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.js create mode 100644 packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js create mode 100644 packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.test.js create mode 100644 packages/commons-ui-core/src/SocialMediaIconLink/index.js create mode 100644 packages/commons-ui-core/src/StayInTouch/StayInTouch.js create mode 100644 packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js create mode 100644 packages/commons-ui-core/src/StayInTouch/StayInTouch.test.js create mode 100644 packages/commons-ui-core/src/StayInTouch/index.js create mode 100644 packages/commons-ui-core/src/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg create mode 100644 packages/commons-ui-core/src/assets/icons/Type=github, Size=24, Color=CurrentColor.svg create mode 100644 packages/commons-ui-core/src/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg create mode 100644 packages/commons-ui-core/src/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg create mode 100644 packages/commons-ui-core/src/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg create mode 100644 packages/commons-ui-core/src/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/IconLink.js b/packages/commons-ui-core/src/SocialMediaIconLink/IconLink.js new file mode 100644 index 000000000..28bb59dc3 --- /dev/null +++ b/packages/commons-ui-core/src/SocialMediaIconLink/IconLink.js @@ -0,0 +1,21 @@ +import { Link, SvgIcon } from "@mui/material"; +import PropTypes from "prop-types"; +import React from "react"; + +const IconLink = React.forwardRef(function LinkIcon( + { IconProps, children, ...props }, + ref, +) { + return ( + + {children} + + ); +}); + +IconLink.propTypes = { + IconProps: PropTypes.shape({}), + children: PropTypes.node, +}; + +export default IconLink; diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.js b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.js new file mode 100644 index 000000000..785ce5396 --- /dev/null +++ b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.js @@ -0,0 +1,73 @@ +import PropTypes from "prop-types"; +import React from "react"; + +import IconLink from "./IconLink"; + +import FacebookIcon from "@/commons-ui/core/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg"; +import GitHubIcon from "@/commons-ui/core/assets/icons/Type=github, Size=24, Color=CurrentColor.svg"; +import InstagramIcon from "@/commons-ui/core/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg"; +import LinkedInIcon from "@/commons-ui/core/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg"; +import SlackIcon from "@/commons-ui/core/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg"; +import TwitterIcon from "@/commons-ui/core/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg"; + +const platformToIconMap = { + Facebook: FacebookIcon, + Twitter: TwitterIcon, + Instagram: InstagramIcon, + Linkedin: LinkedInIcon, + Github: GitHubIcon, + Slack: SlackIcon, +}; + +const SocialMediaIconLink = React.forwardRef(function SocialMediaIconLink( + { IconProps, chidlren: childrenProp, href, platform, ...props }, + ref, +) { + if (!href?.length) { + return null; + } + + let children = childrenProp; + if (!children) { + const Icon = platform && platformToIconMap[platform]; + if (Icon) { + children = ; + } + } + + if (!children) { + return null; + } + return ( + + {children} + + ); +}); + +SocialMediaIconLink.propTypes = { + IconProps: PropTypes.shape({}), + children: PropTypes.node, + href: PropTypes.string.isRequired, + platform: PropTypes.string, +}; + +export default SocialMediaIconLink; diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js new file mode 100644 index 000000000..904aa895d --- /dev/null +++ b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.snap.js @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = ` +
+ +
+ + +
+`; diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.test.js b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.test.js new file mode 100644 index 000000000..57f61950a --- /dev/null +++ b/packages/commons-ui-core/src/SocialMediaIconLink/SocialMediaIconLink.test.js @@ -0,0 +1,21 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import SocialMediaIconLink from "./SocialMediaIconLink"; + +import { createTheme } from "@/commons-ui/core/styles"; + +// eslint-disable-next-line testing-library/render-result-naming-convention +const render = createRender({ theme: createTheme() }); + +const defaultProps = { + platform: "Github", + href: "https://github.com/CodeForAfrica", +}; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/commons-ui-core/src/SocialMediaIconLink/index.js b/packages/commons-ui-core/src/SocialMediaIconLink/index.js new file mode 100644 index 000000000..735f36dd4 --- /dev/null +++ b/packages/commons-ui-core/src/SocialMediaIconLink/index.js @@ -0,0 +1,5 @@ +import IconLink from "./IconLink"; +import SocialMediaIconLink from "./SocialMediaIconLink"; + +export { IconLink }; +export default SocialMediaIconLink; diff --git a/packages/commons-ui-core/src/StayInTouch/StayInTouch.js b/packages/commons-ui-core/src/StayInTouch/StayInTouch.js new file mode 100644 index 000000000..67fd017d4 --- /dev/null +++ b/packages/commons-ui-core/src/StayInTouch/StayInTouch.js @@ -0,0 +1,61 @@ +import { Stack } from "@mui/material"; +import PropTypes from "prop-types"; +import React from "react"; + +import RichTypography from "@/commons-ui/core/RichTypography"; +import SocialMediaIconLink from "@/commons-ui/core/SocialMediaIconLink"; + +const StayInTouch = React.forwardRef(function StayInTouch( + { LinkProps, TitleProps, links, sx, title }, + ref, +) { + if (!links?.length) { + return null; + } + return ( + + + {title} + + + {links.map(({ url, ...others }) => { + return ( + + ); + })} + + + ); +}); + +StayInTouch.propTypes = { + LinkProps: PropTypes.shape({}), + TitleProps: PropTypes.shape({}), + links: PropTypes.arrayOf( + PropTypes.shape({ + url: PropTypes.string.isRequired, + }), + ), + title: PropTypes.string, +}; + +export default StayInTouch; diff --git a/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js b/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js new file mode 100644 index 000000000..a7bbddd04 --- /dev/null +++ b/packages/commons-ui-core/src/StayInTouch/StayInTouch.snap.js @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders unchanged 1`] = ` +
+
+
+ Stay in Touch: +
+
+
+
+`; diff --git a/packages/commons-ui-core/src/StayInTouch/StayInTouch.test.js b/packages/commons-ui-core/src/StayInTouch/StayInTouch.test.js new file mode 100644 index 000000000..85621b916 --- /dev/null +++ b/packages/commons-ui-core/src/StayInTouch/StayInTouch.test.js @@ -0,0 +1,26 @@ +import { createRender } from "@commons-ui/testing-library"; +import React from "react"; + +import StayInTouch from "./StayInTouch"; + +import { createTheme } from "@/commons-ui/core/styles"; + +// eslint-disable-next-line testing-library/render-result-naming-convention +const render = createRender({ theme: createTheme() }); + +const defaultProps = { + title: "Stay in Touch:", + links: [ + { + platform: "github", + url: "https://github.com/CodeForAfrica", + }, + ], +}; + +describe("", () => { + it("renders unchanged", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/commons-ui-core/src/StayInTouch/index.js b/packages/commons-ui-core/src/StayInTouch/index.js new file mode 100644 index 000000000..735aa50e7 --- /dev/null +++ b/packages/commons-ui-core/src/StayInTouch/index.js @@ -0,0 +1,3 @@ +import StayInTouch from "./StayInTouch"; + +export default StayInTouch; diff --git a/packages/commons-ui-core/src/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg b/packages/commons-ui-core/src/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..3914b3321 --- /dev/null +++ b/packages/commons-ui-core/src/assets/icons/Type=facebook, Size=24, Color=CurrentColor.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/commons-ui-core/src/assets/icons/Type=github, Size=24, Color=CurrentColor.svg b/packages/commons-ui-core/src/assets/icons/Type=github, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..33fc4f5fb --- /dev/null +++ b/packages/commons-ui-core/src/assets/icons/Type=github, Size=24, Color=CurrentColor.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/commons-ui-core/src/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg b/packages/commons-ui-core/src/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..2680211cd --- /dev/null +++ b/packages/commons-ui-core/src/assets/icons/Type=instagram, Size=24, Color=CurrentColor.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/packages/commons-ui-core/src/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg b/packages/commons-ui-core/src/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..18e5c230d --- /dev/null +++ b/packages/commons-ui-core/src/assets/icons/Type=linkedin, Size=24, Color=CurrentColor.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/commons-ui-core/src/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg b/packages/commons-ui-core/src/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..2f69259e7 --- /dev/null +++ b/packages/commons-ui-core/src/assets/icons/Type=slack, Size=24, Color=CurrentColor.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/packages/commons-ui-core/src/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg b/packages/commons-ui-core/src/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg new file mode 100644 index 000000000..c56259497 --- /dev/null +++ b/packages/commons-ui-core/src/assets/icons/Type=twitter, Size=24, Color=CurrentColor.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/commons-ui-core/src/index.js b/packages/commons-ui-core/src/index.js index 8d7730db8..867d144b3 100644 --- a/packages/commons-ui-core/src/index.js +++ b/packages/commons-ui-core/src/index.js @@ -1,7 +1,10 @@ +export * from "./SocialMediaIconLink"; export * from "./styles"; export { default as ImageButton } from "./ImageButton"; export { default as NavBar } from "./NavBar"; -export { default as Section } from "./Section"; -export { default as RichTypography } from "./RichTypography"; export { default as NavList } from "./NavList"; +export { default as RichTypography } from "./RichTypography"; +export { default as Section } from "./Section"; +export { default as SocialMediaIconLink } from "./SocialMediaIconLink"; +export { default as StayInTouch } from "./StayInTouch"; From ebc97eb16ba36d167f59a129010ccfc3c0bfa270 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Tue, 10 Sep 2024 13:38:58 +0300 Subject: [PATCH 2/3] Fix Jest config --- packages/commons-ui-next/jest.config.js | 1 + .../commons-ui-next/src/RichTypography/RichTypography.snap.js | 2 +- .../commons-ui-next/src/RichTypography/RichTypography.test.js | 2 +- packages/hurumap-core/jest.config.js | 1 + packages/hurumap-next/jest.config.js | 3 ++- 5 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/commons-ui-next/jest.config.js b/packages/commons-ui-next/jest.config.js index 3eeb5ad22..728281b87 100644 --- a/packages/commons-ui-next/jest.config.js +++ b/packages/commons-ui-next/jest.config.js @@ -7,6 +7,7 @@ module.exports = { moduleNameMapper: { ...moduleNameMapper, // Handle module aliases + "^@/commons-ui/core/(.*)$": "/../commons-ui-core/src/$1", "^@/commons-ui/next/(.*)$": "/src/$1", }, }; diff --git a/packages/commons-ui-next/src/RichTypography/RichTypography.snap.js b/packages/commons-ui-next/src/RichTypography/RichTypography.snap.js index e90a6aee5..eda6b32dd 100644 --- a/packages/commons-ui-next/src/RichTypography/RichTypography.snap.js +++ b/packages/commons-ui-next/src/RichTypography/RichTypography.snap.js @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`RichTypography renders unchanged 1`] = `
`; +exports[` renders unchanged 1`] = `
`; diff --git a/packages/commons-ui-next/src/RichTypography/RichTypography.test.js b/packages/commons-ui-next/src/RichTypography/RichTypography.test.js index 4501213ae..0b6ccd8cb 100644 --- a/packages/commons-ui-next/src/RichTypography/RichTypography.test.js +++ b/packages/commons-ui-next/src/RichTypography/RichTypography.test.js @@ -3,7 +3,7 @@ import React from "react"; import RichTypography from "./RichTypography"; -describe("RichTypography", () => { +describe("", () => { it("renders unchanged", () => { const { container } = render(); expect(container).toMatchSnapshot(); diff --git a/packages/hurumap-core/jest.config.js b/packages/hurumap-core/jest.config.js index f1977643b..5aaea872c 100644 --- a/packages/hurumap-core/jest.config.js +++ b/packages/hurumap-core/jest.config.js @@ -7,6 +7,7 @@ module.exports = { moduleNameMapper: { ...moduleNameMapper, // Handle module aliases + "^@/commons-ui/core/(.*)$": "/../commons-ui-core/src/$1", "^@/hurumap/core/(.*)$": "/src/$1", }, }; diff --git a/packages/hurumap-next/jest.config.js b/packages/hurumap-next/jest.config.js index 4cf1a889d..4c6ad8722 100644 --- a/packages/hurumap-next/jest.config.js +++ b/packages/hurumap-next/jest.config.js @@ -7,7 +7,8 @@ module.exports = { moduleNameMapper: { ...moduleNameMapper, // Handle module aliases - "^@/hurumap/next/(.*)$": "/src/$1", + "^@/commons-ui/core/(.*)$": "/../commons-ui-core/src/$1", "^@/commons-ui/next/(.*)$": "/../commons-ui-next/src/$1", + "^@/hurumap/next/(.*)$": "/src/$1", }, }; From c87379d010ae419e73108d3e2697db7b113a9562 Mon Sep 17 00:00:00 2001 From: Clemence Kyara Date: Tue, 10 Sep 2024 13:39:44 +0300 Subject: [PATCH 3/3] Use social media links from @commons-ui/core --- apps/civicsignalblog/next-env.d.ts | 2 +- .../src/components/Footer/Footer.js | 11 +- .../components/NavBarNavList/NavBarNavList.js | 48 +----- .../NavBarNavList/NavBarNavList.snap.js | 26 +-- .../src/components/StayInTouch/StayInTouch.js | 112 ------------- .../StayInTouch/StayInTouch.snap.js | 3 - .../StayInTouch/StayInTouch.test.js | 18 --- .../src/components/StayInTouch/index.js | 3 - apps/codeforafrica/next-env.d.ts | 2 +- .../src/components/Footer/Footer.js | 11 +- .../components/NavBarNavList/NavBarNavList.js | 48 +----- .../NavBarNavList/NavBarNavList.snap.js | 26 +-- .../src/components/StayInTouch/StayInTouch.js | 112 ------------- .../StayInTouch/StayInTouch.snap.js | 3 - .../StayInTouch/StayInTouch.test.js | 18 --- .../src/components/StayInTouch/index.js | 3 - apps/roboshield/next-env.d.ts | 2 +- .../DesktopNavBar/DesktopNavBar.tsx | 16 +- .../src/components/Footer/Footer.tsx | 20 ++- .../components/Footer/FooterDescription.tsx | 7 +- .../components/MobileNavBar/MobileNavBar.tsx | 9 +- .../src/components/NavBar/NavBar.tsx | 15 +- .../roboshield/src/components/NavBar/index.ts | 2 + .../NavBarNavList/NavBarNavList.tsx | 127 ++++++++------- .../src/components/NavBarNavList/index.ts | 2 + .../components/NavListItem/NavListItem.tsx | 16 +- apps/roboshield/src/components/Page/Page.tsx | 27 +--- .../SocialMediaLinkIcon/LinkIcon.tsx | 22 --- .../SocialMediaLinkIcon.tsx | 64 -------- .../components/SocialMediaLinkIcon/index.ts | 9 -- .../components/StayInTouch/StayInTouch.tsx | 84 ---------- .../src/components/StayInTouch/index.ts | 3 - apps/vpnmanager/next-env.d.ts | 2 +- .../DesktopNavBar/DesktopNavBar.tsx | 28 ++-- .../components/MobileNavBar/MobileNavBar.tsx | 45 ++---- .../src/components/NavBar/NavBar.tsx | 23 ++- .../vpnmanager/src/components/NavBar/index.ts | 2 + .../NavBarNavList/NavBarNavList.tsx | 149 +++++++++--------- .../src/components/NavBarNavList/index.ts | 2 + .../components/NavListItem/NavListItem.tsx | 16 +- apps/vpnmanager/src/components/Page/Page.tsx | 29 +--- 41 files changed, 323 insertions(+), 844 deletions(-) delete mode 100644 apps/civicsignalblog/src/components/StayInTouch/StayInTouch.js delete mode 100644 apps/civicsignalblog/src/components/StayInTouch/StayInTouch.snap.js delete mode 100644 apps/civicsignalblog/src/components/StayInTouch/StayInTouch.test.js delete mode 100644 apps/civicsignalblog/src/components/StayInTouch/index.js delete mode 100644 apps/codeforafrica/src/components/StayInTouch/StayInTouch.js delete mode 100644 apps/codeforafrica/src/components/StayInTouch/StayInTouch.snap.js delete mode 100644 apps/codeforafrica/src/components/StayInTouch/StayInTouch.test.js delete mode 100644 apps/codeforafrica/src/components/StayInTouch/index.js delete mode 100644 apps/roboshield/src/components/SocialMediaLinkIcon/LinkIcon.tsx delete mode 100644 apps/roboshield/src/components/SocialMediaLinkIcon/SocialMediaLinkIcon.tsx delete mode 100644 apps/roboshield/src/components/SocialMediaLinkIcon/index.ts delete mode 100644 apps/roboshield/src/components/StayInTouch/StayInTouch.tsx delete mode 100644 apps/roboshield/src/components/StayInTouch/index.ts diff --git a/apps/civicsignalblog/next-env.d.ts b/apps/civicsignalblog/next-env.d.ts index 4f11a03dc..a4a7b3f5c 100644 --- a/apps/civicsignalblog/next-env.d.ts +++ b/apps/civicsignalblog/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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 index 7dc766fc8..a2180c818 100644 --- 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) { /> - + diff --git a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.js index 0ba12f54f..6f7199b1f 100644 --- 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) { ))} {socialLinks?.map(({ platform, url }) => { - const Icon = platformToIconMap[platform]; - if (!Icon) { - return null; - } return ( - - - + /> ); })} @@ -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 index 55722440a..10a551452 100644 --- a/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js +++ b/apps/civicsignalblog/src/components/NavBarNavList/NavBarNavList.snap.js @@ -59,34 +59,40 @@ exports[` renders unchanged 1`] = ` class="css-o9b79t" > -