diff --git a/_tests_/components/footer/footer.test.jsx b/_tests_/components/footer/footer.test.jsx index 17068d4..89f28ce 100644 --- a/_tests_/components/footer/footer.test.jsx +++ b/_tests_/components/footer/footer.test.jsx @@ -12,30 +12,38 @@ describe("Footer", () => { const github = screen.getByTitle("github"); const githubA11yText = screen.getByTitle("footer-github-a11y-text"); - const githubIcon = screen.getByTitle('footer-github-icon'); - const copyright = screen.getByTitle('copyright-text'); + const githubIcon = screen.getByTitle("footer-github-icon"); + const copyright = screen.getByTitle("copyright-text"); - const arweave = screen.getByTitle("arweave"); - const arweaveA11yText = screen.getByTitle("footer-arweave-a11y-text"); - const arweaveIcon = screen.getByTitle('footer-arweave-icon'); + const tiktok = screen.getByTitle("tiktok"); + const tiktokA11yText = screen.getByTitle("footer-tiktok-a11y-text"); + const tiktokIcon = screen.getByTitle("footer-tiktok-icon"); + + const instagram = screen.getByTitle("instagram"); + const instagramA11yText = screen.getByTitle("footer-instagram-a11y-text"); + const instagramIcon = screen.getByTitle("footer-instagram-icon"); const twitter = screen.getByTitle("twitter"); const twitterA11yText = screen.getByTitle("footer-twitter-a11y-text"); - const twitterIcon = screen.getByTitle('footer-twitter-icon'); + const twitterIcon = screen.getByTitle("footer-twitter-icon"); expect(github).toBeInTheDocument(); - expect(githubA11yText).toHaveTextContent('footerGitHubA11yText'); + expect(githubA11yText).toHaveTextContent("footerGitHubA11yText"); expect(githubIcon).toBeInTheDocument(); - expect(arweave).toBeInTheDocument(); - expect(arweaveA11yText).toHaveTextContent('footerArweaveA11yText'); - expect(arweaveIcon).toBeInTheDocument(); + expect(tiktok).toBeInTheDocument(); + expect(tiktokA11yText).toHaveTextContent("footerTiktokA11yText"); + expect(tiktokIcon).toBeInTheDocument(); + + expect(instagram).toBeInTheDocument(); + expect(instagramA11yText).toHaveTextContent("footerInstagramA11yText"); + expect(instagramIcon).toBeInTheDocument(); expect(twitter).toBeInTheDocument(); - expect(twitterA11yText).toHaveTextContent('footerTwitterA11yText'); + expect(twitterA11yText).toHaveTextContent("footerTwitterA11yText"); expect(twitterIcon).toBeInTheDocument(); expect(copyright).toBeInTheDocument(); - expect(copyright).toHaveTextContent('copyright'); + expect(copyright).toHaveTextContent("copyright"); }); }); diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 6d90594..2525e46 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -60,7 +60,8 @@ "footerTwitterA11yText" : "Opens the Glosseta Twitter page in a new window", "footerGitHubA11yText" : "Opens the GitHub project repo in a new window", - "footerArweaveA11yText" : "Opens Arweave.org in a new window", + "footerInstagramA11yText" : "Opens the Glosseta Instagram page in a new window", + "footerITiktokA11yText" : "Opens the Glosseta TikTok page in a new window", "wordOfTheDay" : "Word of the day", "copyright" : "© Glosseta Foundation, 2023" diff --git a/src/components/footer/footer.tsx b/src/components/footer/footer.tsx index e0b451f..f31e05f 100644 --- a/src/components/footer/footer.tsx +++ b/src/components/footer/footer.tsx @@ -1,5 +1,5 @@ import { HStack, Link, Image, chakra, VStack, Text } from "@chakra-ui/react"; -import { FaGithub, FaTwitter } from "react-icons/fa"; +import { FaGithub, FaTwitter, FaInstagram, FaTiktok, FaLinkedin } from "react-icons/fa"; import styles from "../../../styles/Home.module.css"; import { ExternalLinkIcon } from "@chakra-ui/icons"; import { useTranslation } from "next-i18next"; @@ -30,39 +30,49 @@ const Footer = (): JSX.Element => { - + - {t("footerGitHubA11yText")} + {t("footerInstagramA11yText")} - + - {t("footerArweaveA11yText")} + {t("footerTiktokA11yText")} + + + + + + + {t("footerGitHubA11yText")}