feat(SW-187): Fixed LanguageSwitcher for footer

components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -24,6 +24,7 @@ export default function LanguageSwitcherContent({
   const { toggleLanguageSwitcher } = useDropdownStore()
   const languageSwitcherRef = useTrapFocus()
   const urlKeys = Object.keys(urls) as Lang[]
+  const position = type === "footer" ? "footer" : "header"
 
   return (
     <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
@@ -32,7 +33,7 @@ export default function LanguageSwitcherContent({
           <button
             type="button"
             className={styles.backButton}
-            onClick={toggleLanguageSwitcher}
+            onClick={() => toggleLanguageSwitcher(position)}
           >
             <ChevronLeftIcon color="red" />
             <Subtitle type="one">Main Menu</Subtitle>

components/LanguageSwitcher/index.tsx

@@ -10,6 +10,7 @@ import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
+import { languageSwitcherVariants } from "./variants"
 
 import styles from "./languageSwitcher.module.css"
 
@@ -21,16 +22,29 @@ export default function LanguageSwitcher({
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
-  const { toggleLanguageSwitcher, isLanguageSwitcherOpen } = useDropdownStore()
+  const {
+    toggleLanguageSwitcher,
+    isHeaderLanguageSwitcherOpen,
+    isFooterLanguageSwitcherOpen,
+  } = useDropdownStore()
+
+  const position = type === "footer" ? "footer" : "header"
+  const color = type === "footer" ? "pale" : "burgundy"
+  const isLanguageSwitcherOpen =
+    type === "footer"
+      ? isFooterLanguageSwitcherOpen
+      : isHeaderLanguageSwitcherOpen
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isLanguageSwitcherOpen) {
-      toggleLanguageSwitcher()
+      toggleLanguageSwitcher(position)
     }
   })
 
+  const classNames = languageSwitcherVariants({ color, position })
+
   return (
-    <div className={styles.languageSwitcher}>
+    <div className={classNames}>
       <button
         type="button"
         className={styles.button}
@@ -39,15 +53,15 @@ export default function LanguageSwitcher({
             ? "Close language menu"
             : "Open language menu",
         })}
-        onClick={toggleLanguageSwitcher}
+        onClick={() => toggleLanguageSwitcher(position)}
       >
-        <GlobeIcon width={20} height={20} color="burgundy" />
+        <GlobeIcon width={20} height={20} color={color} />
         <span>{languages[currentLanguage]}</span>
         <ChevronDownIcon
           className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
           width={20}
           height={20}
-          color="burgundy"
+          color={color}
         />
       </button>
 

components/LanguageSwitcher/languageSwitcher.module.css

@@ -1,6 +1,5 @@
 .button {
   background-color: transparent;
-  color: var(--Base-Text-High-contrast);
   font-family: var(--typography-Caption-Regular-fontFamily);
   font-size: var(--typography-Caption-Regular-fontSize);
   border-width: 0;
@@ -13,6 +12,14 @@
   width: 100%;
 }
 
+.burgundy .button {
+  color: var(--Base-Text-High-contrast);
+}
+
+.pale .button {
+  color: var(--Primary-Dark-On-Surface-Text);
+}
+
 .chevron {
   justify-self: end;
   transition: transform 0.3s;
@@ -45,29 +52,43 @@
 
   .dropdown {
     position: absolute;
-    top: 2.25rem;
     background-color: var(--Base-Surface-Primary-light-Normal);
     border-radius: var(--Corner-radius-Large);
     box-shadow: 0px 0px 14px 6px #0000001a;
     display: none;
     min-width: 12.5rem;
     z-index: 1;
+  }
+  .top .dropdown {
+    top: 2.25rem;
     bottom: auto;
   }
 
-  /* Triangle above dropdown */
+  .top .dropdown::before {
+    top: -1.25rem;
+    transform: rotate(180deg);
+  }
+
+  /* Triangle dropdown */
   .dropdown::before {
     content: "";
     position: absolute;
-    top: -1.25rem;
     right: 2.4rem;
-    transform: rotate(180deg);
     border-width: 0.75rem;
     border-style: solid;
     border-color: var(--Base-Surface-Primary-light-Normal) transparent
       transparent transparent;
   }
 
+  .bottom .dropdown {
+    top: auto;
+    bottom: 2.25rem;
+  }
+
+  .bottom .dropdown::before {
+    top: 100%;
+  }
+
   .button {
     grid-template-columns: repeat(3, max-content);
     font-size: var(--typography-Body-Bold-fontSize);

components/LanguageSwitcher/variants.ts

@@ -0,0 +1,20 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./languageSwitcher.module.css"
+
+export const languageSwitcherVariants = cva(styles.languageSwitcher, {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    position: {
+      header: styles.top,
+      footer: styles.bottom,
+    },
+    defaultVariants: {
+      color: "burgundy",
+      position: "top",
+    },
+  },
+})