chore: cleanup

components/LanguageSwitcher/LanguageSwitcherContent/index.tsx

@@ -11,13 +11,13 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { useTrapFocus } from "@/hooks/useTrapFocus"
 
-import styles from "./languageSwitcher.module.css"
+import styles from "./languageSwitcherContent.module.css"
 
-import { LanguageSwitcherProps } from "@/types/components/header/languageSwitcher"
+import type { LanguageSwitcherProps } from "@/types/components/languageSwitcher/languageSwitcher"
 
 export default function LanguageSwitcherContent({
   urls,
-  variant,
+  type,
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
@@ -26,8 +26,8 @@ export default function LanguageSwitcherContent({
   const urlKeys = Object.keys(urls) as Lang[]
 
   return (
-    <div className={styles.content} ref={languageSwitcherRef}>
-      {variant === "mobileHeader" ? (
+    <div className={styles.languageSwitcherContent} ref={languageSwitcherRef}>
+      {type === "mobileHeader" ? (
         <div className={styles.backWrapper}>
           <button
             type="button"

components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css

@@ -1,52 +1,3 @@
-@keyframes slide-in {
-  from {
-    right: -100vw;
-  }
-
-  to {
-    right: 0;
-  }
-}
-
-.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;
-  padding: 0;
-  cursor: pointer;
-  display: grid;
-  grid-template-columns: repeat(2, max-content) 1fr;
-  gap: var(--Spacing-x1);
-  align-items: center;
-  width: 100%;
-}
-
-.chevron {
-  justify-self: end;
-  transition: transform 0.2s;
-}
-
-.chevron.isExpanded {
-  transform: rotate(180deg);
-}
-
-.dropdown {
-  position: fixed;
-  top: var(--main-menu-mobile-height);
-  right: -100vw;
-  bottom: 0;
-  width: 100%;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  transition: right 0.3s;
-}
-
-.dropdown.isExpanded {
-  display: block;
-  right: 0;
-}
-
 .backWrapper {
   background-color: var(--Base-Surface-Secondary-light-Normal);
   padding: var(--Spacing-x2);
@@ -106,10 +57,6 @@
 }
 
 @media screen and (min-width: 768px) {
-  .languageSwitcher {
-    position: relative;
-  }
-
   .backWrapper,
   .backButton {
     display: none;
@@ -123,37 +70,6 @@
     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;
   }

components/LanguageSwitcher/LanguageSwitcherContent/variants.ts

@@ -1,17 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./languageSwitcher.module.css"
-
-export const languageSwitcherContentVariants = cva(styles.languageSwitcher, {
-  variants: {
-    variant: {
-      mobileHeader: styles.mobileHeader,
-      mobileFooter: styles.mobileFooter,
-      desktopHeader: styles.desktopHeader,
-      desktopFooter: styles.desktopFooter,
-    },
-  },
-  defaultVariants: {
-    variant: "desktopHeader",
-  },
-})