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>
   )

components/LanguageSwitcher/languageSwitcher.module.css

@@ -1,5 +1,11 @@
-.languageSwitcher {
-  position: relative;
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
 }
 
 .button {
@@ -27,33 +33,50 @@
 }
 
 .dropdown {
-  position: absolute;
-  top: 2.25rem;
-  right: 0;
+  position: fixed;
+  top: var(--main-menu-mobile-height);
+  right: -100vw;
+  bottom: 0;
+  width: 100%;
   background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
-  border-radius: var(--Corner-radius-Large);
-  box-shadow: 0px 0px 14px 6px #0000001a;
-  display: none;
-  min-width: 12.5rem;
-  z-index: 1;
-}
-
-/* Triangle above 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;
+  transition: right 0.3s;
 }
 
 .dropdown.isExpanded {
   display: block;
+  right: 0;
+}
+
+.backWrapper {
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  padding: var(--Spacing-x2);
+}
+
+.backButton {
+  background-color: transparent;
+  border: none;
+  color: var(--Base-Text-High-contrast);
+  font-family: var(--typography-Subtitle-1-fontFamily);
+  font-weight: var(--typography-Subtitle-1-fontWeight);
+  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+}
+
+.languageWrapper {
+  display: grid;
+  gap: var(--Spacing-x3);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.subtitle {
+  font-family: var(--typography-Subtitle-2-fontFamily);
+  font-size: var(--typography-Subtitle-2-Mobile-fontSize);
+  font-weight: var(--typography-Subtitle-2-fontWeight);
+  color: var(--Base-Text-High-contrast, #4d001b);
 }
 
 .list {
@@ -73,22 +96,64 @@
   justify-content: space-between;
   align-items: center;
   text-decoration: none;
-}
-
-.link:hover {
-  background-color: var(--Base-Surface-Primary-light-Hover-alt);
   border-radius: var(--Corner-radius-Medium);
 }
 
 .link.active,
 .link:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
   font-weight: 600;
 }
 
 @media screen and (min-width: 768px) {
+  .languageSwitcher {
+    position: relative;
+  }
+
+  .backWrapper {
+    display: none;
+  }
+
+  .languageWrapper {
+    padding: var(--Spacing-x2) var(--Spacing-x3);
+  }
+
+  .subtitle {
+    display: none;
+  }
+
+  .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;
+    bottom: auto;
+  }
+
+  /* Triangle above 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;
+  }
+
   .button {
     grid-template-columns: repeat(3, max-content);
     font-size: var(--typography-Body-Bold-fontSize);
     font-family: var(--typography-Body-Bold-fontFamily);
   }
+
+  .link.active:not(:hover) {
+    background-color: transparent;
+  }
 }