Adds tiktok and instagram profiles to footer; updates tests (#195)

Glosseta · Nov 13, 2023 · 7817672 · 7817672 · vercel · Nov 13, 2023
1 parent ebfbb1a
commit 7817672
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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 => {
             </Link>
             <Link
               padding={2}
-              href={"https://github.com/GlossetaFoundation/glosseta"}
+              href={"https://www.instagram.com/glosseta_foundation"}
               display="flex"
-              title="github"
+              title="instagram"
               isExternal
             >
-              <FaGithub title="footer-github-icon" />
+              <FaInstagram title="footer-instagram-icon" />
               <span
                 className={styles.visuallyhidden}
-                title="footer-github-a11y-text"
+                title="footer-instagram-a11y-text"
               >
-                {t("footerGitHubA11yText")}
+                {t("footerInstagramA11yText")}
               </span>
               <ExternalLinkIcon mx="2px" />
             </Link>
             <Link
               padding={2}
-              href={"https://www.arweave.org/"}
+              href={"https://www.tiktok.com/@glossetadotcom"}
               display="flex"
-              title="arweave"
+              title="tiktok"
               isExternal
             >
-              <Image
-                borderRadius="full"
-                boxSize="18px"
-                src="/arweave_logo.png"
-                alt=""
-                title="footer-arweave-icon"
-              />
+              <FaTiktok title="footer-tiktok-icon" />
               <span
                 className={styles.visuallyhidden}
-                title="footer-arweave-a11y-text"
+                title="footer-tiktok-a11y-text"
               >
-                {t("footerArweaveA11yText")}
+                {t("footerTiktokA11yText")}
+              </span>
+              <ExternalLinkIcon mx="2px" />
+            </Link>
+            <Link
+              padding={2}
+              href={"https://github.com/glosseta/glosseta"}
+              display="flex"
+              title="github"
+              isExternal
+            >
+              <FaGithub title="footer-github-icon" />
+              <span
+                className={styles.visuallyhidden}
+                title="footer-github-a11y-text"
+              >
+                {t("footerGitHubA11yText")}
               </span>
               <ExternalLinkIcon mx="2px" />
             </Link>