feature/issue 27 footer component

patches/@greenwood+cli+0.30.0-alpha.2.patch

@@ -151,7 +151,7 @@ index 5d347bc..ea11358 100644
      }
    }
 diff --git a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js
-index 64c1ba0..6e14cd4 100644
+index 64c1ba0..c0c2189 100644
 --- a/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js
 +++ b/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js
 @@ -88,6 +88,7 @@ function bundleCss(body, url, compilation) {
@@ -162,6 +162,15 @@ index 64c1ba0..6e14cd4 100644
              optimizedCss += '(';
              break;
            default:
+@@ -96,7 +97,7 @@ function bundleCss(body, url, compilation) {
+         }
+       } else if (type === 'Function') {
+         /* ex: border-left: 3px solid var(--color-secondary); */
+-        if (this.declaration && item.prev && item.prev.data.type === 'Identifier') {
++        if (this.declaration && item.prev && (item.prev.data.type !== 'Operator' && item.prev.data.type !== 'Url')) {
+           optimizedCss += ' ';
+         }
+         optimizedCss += `${name}(`;
 @@ -197,6 +198,7 @@ function bundleCss(body, url, compilation) {
              case 'nth-last-child':
              case 'nth-last-of-type':

src/components/footer/footer.js

@@ -1,20 +1,35 @@
+import discordIcon from "../../assets/discord.svg?type=raw";
+import githubIcon from "../../assets/github.svg?type=raw";
+import greenwoodLogo from "../../assets/greenwood-logo.svg?type=raw";
+import twitterIcon from "../../assets/twitter-logo.svg?type=raw";
 import styles from "./footer.module.css";
-// TODO - nice to have - https://github.com/ProjectEvergreen/greenwood-getting-started/pull/85#discussion_r1549999231
-// const template = document.createElement('template');
-
-// template.innerHTML = `
-//   <footer>
-//     <h4>GreenwoodJS &copy;${new Date().getFullYear()}
-//   </footer>
-// `;
 
 export default class Footer extends HTMLElement {
   connectedCallback() {
-    const year = `${new Date().getFullYear()}`;
-
     this.innerHTML = `
       <footer class="${styles.footer}">
-        <h4>GreenwoodJS &copy;${year}</h4>
+        <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="https://discord.gg/bsy9jvWh" title="Discord">
+              ${discordIcon}
+            </a>
+          </li>
+
+          <li class="${styles.socialIcon}">
+            <a href="https://twitter.com/PrjEvergreen" title="Twitter">
+              ${twitterIcon}
+            </a>
+          </li>
+        </ul>
       </footer>
     `;
   }

src/components/footer/footer.module.css

@@ -1,6 +1,35 @@
 .footer {
-  text-align: center;
-  border-radius: var(--radius-4);
-  padding: var(--size-fluid-3);
-  box-shadow: var(--shadow-4);
+  background-color: var(--color-tertiary);
+  border-radius: var(--radius-5);
+  padding: 0 var(--size-fluid-3);
+  margin: var(--size-2) 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.logo {
+  padding-left: var(--size-fluid-1);
+  display: flex;
+  flex-direction: column;
+  flex-basis: 100%;
+  flex: 1;
+  justify-content: center;
+}
+
+.socialTray {
+  display: flex;
+  gap: var(--size-3);
+  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 svg {
+  fill: var(--color-gray);
 }

src/components/footer/footer.spec.js

@@ -1,6 +1,21 @@
 import { expect } from "@esm-bundle/chai";
 import "./footer.js";
 
+const ICONS = [
+  {
+    link: "https://github.com/ProjectEvergreen/greenwood",
+    title: "GitHub",
+  },
+  {
+    link: "https://discord.gg/bsy9jvWh",
+    title: "Discord",
+  },
+  {
+    link: "https://twitter.com/PrjEvergreen",
+    title: "Twitter",
+  },
+];
+
 describe("Components/Footer", () => {
   let footer;
 
@@ -17,13 +32,28 @@ describe("Components/Footer", () => {
       expect(footer.querySelectorAll("footer").length).equal(1);
     });
 
-    it("should have the expected footer text", () => {
-      const heading = document.querySelector("h4");
+    it("should have the Greenwood logo", () => {
+      const logo = footer.querySelectorAll("div svg");
 
-      expect(heading.textContent).to.equal(`GreenwoodJS ©${new Date().getFullYear()}`);
+      expect(logo.length).equal(1);
+      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);
+
+      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(() => {
     footer.remove();
     footer = null;

src/components/header/header.css

@@ -48,6 +48,10 @@ header {
   cursor: pointer;
 }
 
+.social-icon svg {
+  fill: var(--color-secondary);
+}
+
 .mobile-menu,
 .mobile-menu.active,
 .mobile-menu-items,