feat(SW-184): language switcher mobile/desktop functionality

components/LanguageSwitcher/index.tsx

@@ -1,28 +1,54 @@
 "use client"
 
 import Link from "next/link"
+import { useIntl } from "react-intl"
 
 import { Lang, languages } from "@/constants/languages"
 import useDropdownStore from "@/stores/main-menu"
 
-import { CheckIcon, ChevronDownIcon, GlobeIcon } from "@/components/Icons"
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  GlobeIcon,
+} from "@/components/Icons"
+import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
+import { useTrapFocus } from "@/hooks/useTrapFocus"
+
+import Subtitle from "../TempDesignSystem/Text/Subtitle"
 
 import styles from "./languageSwitcher.module.css"
 
 import { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
 
-export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
+export default function LanguageSwitcher({
+  urls,
+  location = "header",
+}: LanguageSwitcherProps) {
+  const intl = useIntl()
+  const languageSwitcherRef = useTrapFocus()
   const currentLanguage = useLang()
   const { toggleLanguageSwitcher, isLanguageSwitcherOpen } = useDropdownStore()
 
   const urlKeys = Object.keys(urls) as Lang[]
 
+  useHandleKeyUp((event: KeyboardEvent) => {
+    if (event.key === "Escape" && isLanguageSwitcherOpen) {
+      toggleLanguageSwitcher()
+    }
+  })
+
   return (
-    <div className={styles.languageSwitcher}>
+    <div className={styles.languageSwitcher} ref={languageSwitcherRef}>
       <button
         type="button"
         className={styles.button}
+        aria-label={intl.formatMessage({
+          id: isLanguageSwitcherOpen
+            ? "Close language menu"
+            : "Open language menu",
+        })}
         onClick={toggleLanguageSwitcher}
       >
         <GlobeIcon width={20} height={20} color="burgundy" />
@@ -38,26 +64,42 @@ export default function LanguageSwitcher({ urls }: LanguageSwitcherProps) {
       <div
         className={`${styles.dropdown} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
       >
-        <ul className={styles.list}>
-          {urlKeys.map((key) => {
-            const url = urls[key]?.url
-            const isActive = currentLanguage === key
-            if (url) {
-              return (
-                <li key={key}>
-                  <Link
-                    className={`${styles.link} ${isActive ? styles.active : ""}`}
-                    color="burgundy"
-                    href={url}
-                  >
-                    {languages[key]}
-                    {isActive ? <CheckIcon color="burgundy" /> : null}
-                  </Link>
-                </li>
-              )
-            }
-          })}
-        </ul>
+        <div className={styles.backWrapper}>
+          <button
+            type="button"
+            className={styles.backButton}
+            onClick={toggleLanguageSwitcher}
+          >
+            <ChevronLeftIcon color="red" />
+            <Subtitle type="one">Main Menu</Subtitle>
+          </button>
+        </div>
+
+        <div className={styles.languageWrapper}>
+          <Subtitle className={styles.subtitle} type="two">
+            {intl.formatMessage({ id: "Select your language" })}
+          </Subtitle>
+          <ul className={styles.list}>
+            {urlKeys.map((key) => {
+              const url = urls[key]?.url
+              const isActive = currentLanguage === key
+              if (url) {
+                return (
+                  <li key={key}>
+                    <Link
+                      className={`${styles.link} ${isActive ? styles.active : ""}`}
+                      color="burgundy"
+                      href={url}
+                    >
+                      {languages[key]}
+                      {isActive ? <CheckIcon color="burgundy" /> : null}
+                    </Link>
+                  </li>
+                )
+              }
+            })}
+          </ul>
+        </div>
       </div>
     </div>
   )