OPHJOD-334: Refactor footer to use forwardRef

lib/components/Footer/Footer.tsx

@@ -1,3 +1,5 @@
+import { forwardRef } from 'react';
+
 export interface FooterProps {
   /** Navigation items */
   items?: {
@@ -16,17 +18,21 @@ export interface FooterProps {
 /**
  * This component is a footer that displays navigation items, logos, and a copyright.
  */
-export const Footer = ({ items, variant = 'light', logos, copyright }: FooterProps) => {
+export const Footer = forwardRef<HTMLDivElement, FooterProps>(function Footer(
+  { items, logos, copyright, variant = 'light' }: FooterProps,
+  ref,
+) {
   return (
     <footer
-      className={`py-9 text-button-md sm:px-6 ${variant === 'light' ? 'bg-white text-black' : 'bg-black text-white'}`}
+      ref={ref}
+      className={`py-9 text-button-md sm:px-6 print:hidden ${variant === 'light' ? 'bg-white text-black' : 'bg-black text-white'}`}
     >
       <div className="mx-auto flex flex-col gap-9 sm:max-w-[1090px]">
         {items && (
           <ul className="px-5 sm:px-4">
             {items?.map((item, index) => (
               <li key={index} className="px-2 py-[6px]">
-                <item.component className="outline-none hover:underline focus:underline" />
+                <item.component className="hover:underline" />
               </li>
             ))}
           </ul>
@@ -49,4 +55,4 @@ export const Footer = ({ items, variant = 'light', logos, copyright }: FooterPro
       </div>
     </footer>
   );
-};
+});

lib/components/Footer/__snapshots__/Footer.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Footer > renders copyright 1`] = `
 <footer
-  class="py-9 text-button-md sm:px-6 bg-white text-black"
+  class="py-9 text-button-md sm:px-6 print:hidden bg-white text-black"
 >
   <div
     class="mx-auto flex flex-col gap-9 sm:max-w-[1090px]"
@@ -18,7 +18,7 @@ exports[`Footer > renders copyright 1`] = `
 
 exports[`Footer > renders footer with dark variant 1`] = `
 <footer
-  class="py-9 text-button-md sm:px-6 bg-black text-white"
+  class="py-9 text-button-md sm:px-6 print:hidden bg-black text-white"
 >
   <div
     class="mx-auto flex flex-col gap-9 sm:max-w-[1090px]"
@@ -69,7 +69,7 @@ exports[`Footer > renders footer with dark variant 1`] = `
 
 exports[`Footer > renders footer with light variant 1`] = `
 <footer
-  class="py-9 text-button-md sm:px-6 bg-white text-black"
+  class="py-9 text-button-md sm:px-6 print:hidden bg-white text-black"
 >
   <div
     class="mx-auto flex flex-col gap-9 sm:max-w-[1090px]"
@@ -120,7 +120,7 @@ exports[`Footer > renders footer with light variant 1`] = `
 
 exports[`Footer > renders items 1`] = `
 <footer
-  class="py-9 text-button-md sm:px-6 bg-white text-black"
+  class="py-9 text-button-md sm:px-6 print:hidden bg-white text-black"
 >
   <div
     class="mx-auto flex flex-col gap-9 sm:max-w-[1090px]"
@@ -156,7 +156,7 @@ exports[`Footer > renders items 1`] = `
 
 exports[`Footer > renders logos 1`] = `
 <footer
-  class="py-9 text-button-md sm:px-6 bg-white text-black"
+  class="py-9 text-button-md sm:px-6 print:hidden bg-white text-black"
 >
   <div
     class="mx-auto flex flex-col gap-9 sm:max-w-[1090px]"

lib/components/Note/Note.tsx

@@ -1,4 +1,4 @@
-import useMediaQueries from '../../hooks/useMediaQueries';
+import { useMediaQueries } from '../../hooks/useMediaQueries';
 
 export interface NoteProps {
   /** Title shown on the note */

lib/hooks/useMediaQueries/index.ts

@@ -14,12 +14,10 @@ const useMediaQuery = (query: string) => {
   return match;
 };
 
-const useMediaQueries = () => {
+export const useMediaQueries = () => {
   const { sm, lg } = __SCREENS__;
   return {
     sm: useMediaQuery(`(min-width: ${sm})`),
     lg: useMediaQuery(`(min-width: ${lg})`),
   };
 };
-
-export default useMediaQueries;

lib/main.ts

@@ -1,5 +1,7 @@
 import './index.css';
 
+export { useMediaQueries } from './hooks/useMediaQueries';
+
 export { Button } from './components/Button/Button';
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu';
 export { Expander } from './components/Expander/Expander';