feat(SW-378): Added close button to footer language switcher and made it slide up from below

2024-09-13 09:37:00 +02:00
parent 428fb3df3f
commit ca4521e4a1
13 changed files with 223 additions and 56 deletions
@@ -0,0 +1,63 @@
+import { useIntl } from "react-intl"
+
+import useDropdownStore from "@/stores/main-menu"
+
+import { ChevronLeftIcon } from "@/components/Icons"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./languageSwitcherContainer.module.css"
+
+import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
+import {
+  type LanguageSwitcherContainerProps,
+  LanguageSwitcherTypesEnum,
+} from "@/types/components/languageSwitcher/languageSwitcher"
+
+export default function LanguageSwitcherContainer({
+  children,
+  type,
+}: LanguageSwitcherContainerProps) {
+  const { toggleDropdown } = useDropdownStore()
+  const intl = useIntl()
+  const isFooter = type === LanguageSwitcherTypesEnum.Footer
+  const isMobileHeader = type === LanguageSwitcherTypesEnum.MobileHeader
+  const position = isFooter
+    ? DropdownTypeEnum.FooterLanguageSwitcher
+    : DropdownTypeEnum.HamburgerMenu
+
+  return (
+    <div>
+      {isMobileHeader ? (
+        <div className={styles.backWrapper}>
+          <button
+            type="button"
+            className={styles.backButton}
+            onClick={() => toggleDropdown(position)}
+          >
+            <ChevronLeftIcon color="red" />
+            <Subtitle type="one">
+              {intl.formatMessage({
+                id: "Main menu",
+              })}
+            </Subtitle>
+          </button>
+        </div>
+      ) : null}
+      {isFooter ? (
+        <div className={styles.closeWrapper}>
+          <button
+            type="button"
+            className={styles.closeButton}
+            aria-label={intl.formatMessage({
+              id: "Close menu",
+            })}
+            onClick={() => toggleDropdown(position)}
+          >
+            <span className={styles.bar}></span>
+          </button>
+        </div>
+      ) : null}
+      {children}
+    </div>
+  )
+}
@@ -0,0 +1,74 @@
+.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);
+}
+
+.closeWrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--Spacing-x2);
+  border-bottom: 1px solid var(--Base-Border-Subtle);
+}
+
+.closeButton {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  justify-self: flex-start;
+  padding: 11px 8px 16px;
+  user-select: none;
+}
+
+.bar,
+.bar::after,
+.bar::before {
+  background: var(--Base-Text-High-contrast);
+  border-radius: 2.3px;
+  display: inline-block;
+  height: 3px;
+  position: relative;
+  transition: all 0.3s;
+  width: 32px;
+}
+
+.bar::after,
+.bar::before {
+  content: "";
+  left: 0;
+  position: absolute;
+  top: 0;
+  transform-origin: 50% 50%;
+  width: 32px;
+}
+
+.bar {
+  background: transparent;
+}
+
+.bar::after {
+  transform: rotate(-45deg);
+}
+
+.bar::before {
+  transform: rotate(45deg);
+}
+
+@media screen and (min-width: 768px) {
+  .closeWrapper {
+    display: none;
+  }
+}