integrate social tray into the footer

ProjectEvergreen · Jan 25, 2025 · b81da9d · b81da9d
1 parent e00198d
commit b81da9d
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 94 deletions.
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
@@ -1,8 +1,6 @@
-import discordIcon from "../../assets/discord.svg?type=raw";
-import githubIcon from "../../assets/github.svg?type=raw";
-import twitterIcon from "../../assets/twitter-logo.svg?type=raw";
 import styles from "./footer.module.css";
 import greenwoodLogo from "../../assets/greenwood-logo-full.svg?type=raw";
+import "../social-tray/social-tray.js";
 
 export default class Footer extends HTMLElement {
   connectedCallback() {
@@ -11,25 +9,8 @@ export default class Footer extends HTMLElement {
         <div class="${styles.logo}">
           ${greenwoodLogo}
         </div>
-        <ul class="${styles.socialTray}">
-          <li class="${styles.socialIcon}">
-            <a href="https://github.com/ProjectEvergreen/greenwood" title="GitHub">
-              ${githubIcon}
-            </a>
-          </li>
 
-          <li class="${styles.socialIcon}">
-            <a href="/discord/" title="Discord">
-              ${discordIcon}
-            </a>
-          </li>
-
-          <li class="${styles.socialIcon}">
-            <a href="https://twitter.com/PrjEvergreen" title="Twitter">
-              ${twitterIcon}
-            </a>
-          </li>
-        </ul>
+        <app-social-tray></app-social-tray>
       </footer>
     `;
   }

diff --git a/src/components/footer/footer.module.css b/src/components/footer/footer.module.css
@@ -22,25 +22,3 @@
 .logo svg g.letters {
   fill: var(--color-white);
 }
-
-.socialTray {
-  display: flex;
-  gap: var(--size-2);
-  list-style-type: none;
-  background-color: var(--color-secondary);
-  border: var(--border-size-1) solid var(--color-black);
-  border-radius: var(--radius-6);
-  padding: var(--size-2) var(--size-3);
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.socialIcon {
-  display: flex;
-  align-items: center;
-}
-
-.socialIcon svg {
-  fill: var(--color-gray);
-}
diff --git a/src/components/footer/footer.spec.js b/src/components/footer/footer.spec.js
@@ -1,21 +1,6 @@
 import { expect } from "@esm-bundle/chai";
 import "./footer.js";
 
-const ICONS = [
-  {
-    link: "https://github.com/ProjectEvergreen/greenwood",
-    title: "GitHub",
-  },
-  {
-    link: "/discord/",
-    title: "Discord",
-  },
-  {
-    link: "https://twitter.com/PrjEvergreen",
-    title: "Twitter",
-  },
-];
-
 describe("Components/Footer", () => {
   let footer;
 
@@ -39,21 +24,13 @@ describe("Components/Footer", () => {
       expect(logo[0]).not.equal(undefined);
     });
 
-    it("should have the expected social link icons", () => {
-      const links = footer.querySelectorAll("ul li a");
-      const icons = footer.querySelectorAll("ul li a svg");
-
-      expect(links.length).to.equal(3);
-      expect(icons.length).to.equal(3);
+    it("should have the social tray component", () => {
+      const tray = footer.querySelectorAll("app-social-tray");
 
-      Array.from(links).forEach((link) => {
-        const iconItem = ICONS.find((icon) => icon.title === link.getAttribute("title"));
-
-        expect(iconItem).to.not.equal(undefined);
-        expect(link.getAttribute("href")).to.equal(iconItem.link);
-      });
+      expect(tray.length).to.equal(1);
     });
   });
+
   after(() => {
     footer.remove();
     footer = null;

diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -35,7 +35,9 @@ export default class Header extends HTMLElement {
             </ul>
           </nav>
 
-          <app-social-tray></app-social-tray>
+          <nav role="navigation" aria-label="Social">
+            <app-social-tray></app-social-tray>
+          </nav>
 
           <button class="${styles.mobileMenuIcon}" popovertarget="mobile-menu" aria-label="Mobile Menu Icon Button">
             ${mobileMenuIcon}

diff --git a/src/components/social-tray/social-tray.js b/src/components/social-tray/social-tray.js
@@ -6,28 +6,25 @@ import twitterIcon from "../../assets/twitter-logo.svg?type=raw";
 export default class SocialTray extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-    
-      <nav role="navigation" aria-label="Social">
-        <ul class="${styles.socialTray}">
-          <li class="${styles.socialIcon}">
-            <a href="https://github.com/ProjectEvergreen/greenwood" title="GitHub">
-              ${githubIcon}
-            </a>
-          </li>
+      <ul class="${styles.socialTray}">
+        <li class="${styles.socialIcon}">
+          <a href="https://github.com/ProjectEvergreen/greenwood" title="GitHub">
+            ${githubIcon}
+          </a>
+        </li>
 
-          <li class="${styles.socialIcon}">
-            <a href="/discord/" title="Discord">
-              ${discordIcon}
-            </a>
-          </li>
+        <li class="${styles.socialIcon}">
+          <a href="/discord/" title="Discord">
+            ${discordIcon}
+          </a>
+        </li>
 
-          <li class="${styles.socialIcon}">
-            <a href="https://twitter.com/PrjEvergreen" title="Twitter">
-              ${twitterIcon}
-            </a>
-          </li>
-        </ul>
-      </nav>
+        <li class="${styles.socialIcon}">
+          <a href="https://twitter.com/PrjEvergreen" title="Twitter">
+            ${twitterIcon}
+          </a>
+        </li>
+      </ul>
     `;
   }
 }

diff --git a/src/components/social-tray/social-tray.spec.js b/src/components/social-tray/social-tray.spec.js
@@ -30,12 +30,12 @@ describe("Components/Social Tray", () => {
   describe("Default Behavior", () => {
     it("should not be null", () => {
       expect(tray).not.equal(undefined);
-      expect(tray.querySelectorAll("nav").length).equal(1);
+      expect(tray.querySelectorAll("ul").length).equal(1);
     });
 
     it("should have the expected social link icons", () => {
-      const links = tray.querySelectorAll("nav[aria-label='Social'] ul li a");
-      const icons = tray.querySelectorAll("nav[aria-label='Social'] ul li a svg");
+      const links = tray.querySelectorAll("ul li a");
+      const icons = tray.querySelectorAll("ul li a svg");
 
       expect(links.length).to.equal(3);
       expect(icons.length).to.equal(3);