Refactor Footer component to be a web component

Author: webstackdev

src/components/Footer/client/__tests__/index.spec.ts

@@ -1,23 +1,16 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { Footer } from '@components/Footer/client'
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, beforeEach, afterEach, type Mock } from 'vitest'
+import { FooterElement } from '@components/Footer/client'
 
 // Mock the selectors module
-vi.mock('@components/Footer/selectors')
+vi.mock('@components/Footer/client/selectors', () => ({
+  getHireMeAnchorElement: vi.fn(),
+}))
 
 import { getHireMeAnchorElement } from '@components/Footer/client/selectors'
 
-// No MockDate needed, using fake timers for Date
-
-describe('Footer', () => {
-  const mockAnchor = {
-    innerHTML: '',
-    style: {
-      display: '',
-    },
-  }
-
+describe('FooterElement', () => {
   beforeEach(() => {
-    ;(getHireMeAnchorElement as any).mockReturnValue(mockAnchor)
     vi.useFakeTimers()
     vi.setSystemTime(new Date('2024-10-17'))
   })
@@ -27,30 +20,18 @@ describe('Footer', () => {
     vi.clearAllMocks()
   })
 
-  it('should update hire me anchor with current date on init', () => {
+  it('updates the hire me anchor with availability copy when connected', () => {
     const anchor = {
-      ...mockAnchor,
-      innerHTML: 'Old text',
-      style: { ...mockAnchor.style, display: 'none' },
-    }
-
-    ;(getHireMeAnchorElement as any).mockReturnValue(anchor)
+      innerHTML: '',
+      style: { display: 'none' },
+    } as unknown as HTMLAnchorElement
+    ;(getHireMeAnchorElement as Mock).mockReturnValue(anchor)
 
-    Footer.init()
+    const element = new FooterElement()
+    element.connectedCallback()
 
+    expect(getHireMeAnchorElement).toHaveBeenCalledWith(element)
     expect(anchor.innerHTML).toBe('Available September, 2024. Hire Me Now')
     expect(anchor.style.display).toBe('inline-block')
   })
-
-  it('should handle pause', () => {
-    expect(() => Footer.pause()).not.toThrow()
-  })
-
-  it('should handle resume', () => {
-    expect(() => Footer.resume()).not.toThrow()
-  })
-
-  it('should handle reset', () => {
-    expect(() => Footer.reset()).not.toThrow()
-  })
 })

src/components/Footer/client/index.ts

@@ -1,47 +1,61 @@
 /**
- * Script for the Footer component
+ * Footer web component
+ * Updates the "Hire Me" CTA text once connected
  */
+import { LitElement } from 'lit'
 import { getHireMeAnchorElement } from '@components/Footer/client/selectors'
 import { addScriptBreadcrumb } from '@components/scripts/errors'
 import { handleScriptError } from '@components/scripts/errors/handler'
 
-class Footer {
-  static scriptName = 'Footer'
+class FooterElement extends LitElement {
+  private hireMeAnchor: HTMLAnchorElement | null = null
 
-  private static getMonthName(date: Date): string {
-    const monthDate = new Date(date)
-    monthDate.setMonth(monthDate.getMonth() - 1)
-    return monthDate.toLocaleString('en-US', { month: 'long' })
+  override createRenderRoot() {
+    return this
   }
 
-  static init(): void {
-    const context = { scriptName: Footer.scriptName, operation: 'init' }
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.initialize()
+  }
+
+  private initialize(): void {
+    const context = { scriptName: 'FooterElement', operation: 'initialize' }
     addScriptBreadcrumb(context)
 
     try {
-      const anchor = getHireMeAnchorElement()
-      const date = new Date()
-      const month = Footer.getMonthName(date)
-      const year = date.getFullYear()
-      anchor.innerHTML = `Available ${month}, ${year}. Hire Me Now`
-      anchor.style.display = 'inline-block'
+      if (!this.hireMeAnchor) {
+        this.hireMeAnchor = getHireMeAnchorElement(this)
+      }
+
+      this.updateHireMeCopy()
     } catch (error) {
-      // Footer date is optional enhancement
       handleScriptError(error, context)
     }
   }
 
-  static pause(): void {
-    // No pause functionality needed for Footer
-  }
+  private updateHireMeCopy(): void {
+    if (!this.hireMeAnchor) {
+      return
+    }
+
+    const date = new Date()
+    const month = FooterElement.getMonthName(date)
+    const year = date.getFullYear()
 
-  static resume(): void {
-    // No resume functionality needed for Footer
+    this.hireMeAnchor.innerHTML = `Available ${month}, ${year}. Hire Me Now`
+    this.hireMeAnchor.style.display = 'inline-block'
   }
 
-  static reset(): void {
-    // No reset functionality needed for Footer
+  private static getMonthName(date: Date): string {
+    const monthDate = new Date(date)
+    monthDate.setMonth(monthDate.getMonth() - 1)
+    return monthDate.toLocaleString('en-US', { month: 'long' })
   }
 }
 
-export { Footer }
+if (!customElements.get('site-footer')) {
+  customElements.define('site-footer', FooterElement)
+}
+
+export { FooterElement }

src/components/Footer/client/selectors.ts

@@ -12,11 +12,11 @@ export const SELECTORS = {
 /**
  * Getter for the header <span> HTML element that wraps the menu
  */
-export const getHireMeAnchorElement = (): HTMLAnchorElement => {
-  const anchor = document.querySelector(SELECTORS.hireMeAnchor)
+export const getHireMeAnchorElement = (scope: ParentNode = document): HTMLAnchorElement => {
+  const anchor = scope.querySelector(SELECTORS.hireMeAnchor)
   if (!isAnchorElement(anchor)) {
     throw new ClientScriptError({
-      message: `Footer anchor for "Hire Me" element, selector: ${SELECTORS.hireMeAnchor}`
+      message: `Footer anchor for "Hire Me" element, selector: ${SELECTORS.hireMeAnchor}`,
     })
   }
   return anchor

src/components/Footer/footer.css

@@ -0,0 +1,65 @@
+@keyframes arrowBounce {
+  100% {
+    transform: translate(1.5em);
+  }
+}
+
+@media (width >= 640px) {
+  .footerGrid {
+    display: grid;
+    gap: 0.5rem 1rem;
+    grid-template-areas:
+      "contact social"
+      "contact channels"
+      "bottom-row bottom-row"
+      "copyright copyright";
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .footerContact {
+    grid-area: contact;
+  }
+
+  .footerSocial {
+    grid-area: social;
+  }
+
+  .footerBottomRow {
+    grid-area: bottom-row;
+  }
+
+  .footerCopyright {
+    grid-area: copyright;
+  }
+}
+
+@media (width >= 1024px) {
+  .footerGrid {
+    grid-template:
+      "hire-me social bottom-row" 2rem
+      "contact social bottom-row" auto
+      "copyright copyright copyright" auto
+      / 2fr 1fr 1fr;
+  }
+
+  .footerHireMe {
+    align-self: end;
+    grid-area: hire-me;
+    margin-top: 2rem;
+  }
+
+  .footerHireMeAnchor {
+    margin-top: 0.5rem;
+  }
+}
+
+.footerHireMeAnchor:hover::after,
+.footerHireMeAnchor:focus::after {
+  animation: arrowBounce 1s alternate;
+}
+
+.footerFeedIcon:hover :global(.icon),
+.footerFeedIcon:focus :global(.icon) {
+  height: 3em;
+  width: 3em;
+}