enhancement/issue 63 social tray component

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>
     `;
   }

src/components/footer/footer.module.css

@@ -23,24 +23,16 @@
   fill: var(--color-white);
 }
 
-.socialTray {
-  display: flex;
-  gap: var(--size-2);
-  list-style-type: none;
-  background-color: var(--color-secondary);
+.footer app-social-tray {
   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;
-}
+  padding: var(--size-2);
 
-.socialIcon {
-  display: flex;
-  align-items: center;
-}
+  & ul {
+    background-color: var(--color-secondary);
+  }
 
-.socialIcon svg {
-  fill: var(--color-gray);
+  & svg {
+    fill: var(--color-white);
+  }
 }

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;

src/components/header/header.js

@@ -1,10 +1,8 @@
 import { getContentByCollection } from "@greenwood/cli/src/data/client.js";
-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 mobileMenuIcon from "../../assets/tile.svg?type=raw";
 import greenwoodLogo from "../../assets/greenwood-logo-full.svg?type=raw";
 import styles from "./header.module.css";
+import "../social-tray/social-tray.js";
 
 export default class Header extends HTMLElement {
   async connectedCallback() {
@@ -38,25 +36,7 @@ export default class Header extends HTMLElement {
           </nav>
 
           <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>
-
-              <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>
           </nav>
 
           <button class="${styles.mobileMenuIcon}" popovertarget="mobile-menu" aria-label="Mobile Menu Icon Button">

src/components/header/header.module.css

@@ -71,30 +71,6 @@
   text-decoration: underline;
 }
 
-.socialTray {
-  display: flex;
-  gap: var(--size-3);
-  list-style-type: none;
-  background-color: var(--color-gray);
-  width: fit-content;
-  border: var(--border-size-1) solid #4d4d4d45;
-  border-radius: var(--radius-6);
-  padding: 0 var(--size-1);
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.socialIcon {
-  display: flex;
-  align-items: center;
-  line-height: 100%;
-}
-
-.socialIcon svg {
-  fill: var(--color-secondary);
-}
-
 .mobileMenuIcon {
   display: none;
   border: none;
@@ -155,10 +131,6 @@
     align-self: center;
   }
 
-  .socialTray {
-    padding: 0 var(--size-2);
-  }
-
   .logoLink svg.greenwood-logo-full {
     width: 70%;
   }

src/components/header/header.spec.js

@@ -3,20 +3,6 @@ import "./header.js";
 import pages from "../../stories/mocks/graph.json" with { type: "json" };
 
 const CURRENT_ROUTE = "/guides/";
-const ICONS = [
-  {
-    link: "https://github.com/ProjectEvergreen/greenwood",
-    title: "GitHub",
-  },
-  {
-    link: "/discord/",
-    title: "Discord",
-  },
-  {
-    link: "https://twitter.com/PrjEvergreen",
-    title: "Twitter",
-  },
-];
 
 window.fetch = function () {
   return new Promise((resolve) => {
@@ -77,19 +63,10 @@ describe("Components/Header", () => {
       expect(activeRoute.route).to.equal(CURRENT_ROUTE);
     });
 
-    it("should have the expected social link icons", () => {
-      const links = header.querySelectorAll("nav[aria-label='Social'] ul li a");
-      const icons = header.querySelectorAll("nav[aria-label='Social'] ul li a svg");
+    it("should have the social tray component", () => {
+      const tray = header.querySelectorAll("app-social-tray");
 
-      expect(links.length).to.equal(3);
-      expect(icons.length).to.equal(3);
-
-      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);
     });
   });
 

src/components/social-tray/social-tray.js

@@ -0,0 +1,32 @@
+import styles from "./social-tray.module.css";
+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";
+
+export default class SocialTray extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <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>
+    `;
+  }
+}
+
+customElements.define("app-social-tray", SocialTray);

src/components/social-tray/social-tray.module.css

@@ -0,0 +1,29 @@
+.socialTray {
+  display: flex;
+  gap: var(--size-3);
+  list-style-type: none;
+  background-color: var(--color-gray);
+  width: fit-content;
+  border: var(--border-size-1) solid #4d4d4d45;
+  border-radius: var(--radius-6);
+  padding: 0 var(--size-1);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.socialIcon {
+  display: flex;
+  align-items: center;
+  line-height: 100%;
+}
+
+.socialIcon svg {
+  fill: var(--color-secondary);
+}
+
+@media screen and (min-width: 768px) {
+  .socialTray {
+    padding: 0 var(--size-2);
+  }
+}

src/components/social-tray/social-tray.spec.js

@@ -0,0 +1,56 @@
+import { expect } from "@esm-bundle/chai";
+import "./social-tray.js";
+
+const ICONS = [
+  {
+    link: "https://github.com/ProjectEvergreen/greenwood",
+    title: "GitHub",
+  },
+  {
+    link: "/discord/",
+    title: "Discord",
+  },
+  {
+    link: "https://twitter.com/PrjEvergreen",
+    title: "Twitter",
+  },
+];
+
+describe("Components/Social Tray", () => {
+  let tray;
+
+  before(async () => {
+    tray = document.createElement("app-social-tray");
+
+    document.body.appendChild(tray);
+
+    await tray.updateComplete;
+  });
+
+  describe("Default Behavior", () => {
+    it("should not be null", () => {
+      expect(tray).not.equal(undefined);
+      expect(tray.querySelectorAll("ul").length).equal(1);
+    });
+
+    it("should have the expected social link icons", () => {
+      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);
+
+      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);
+      });
+    });
+  });
+
+  after(() => {
+    tray.remove();
+    tray = null;
+  });
+});

src/components/social-tray/social-tray.stories.js

@@ -0,0 +1,9 @@
+import "./social-tray.js";
+
+export default {
+  title: "Components/Social Tray",
+};
+
+const Template = () => "<app-social-tray></app-social-tray>";
+
+export const Primary = Template.bind({});