fix(BOOK-325): Added refetch options to user.name query and refactored header

Approved-by: Linus Flood Approved-by: Matilda Landström
2025-11-13 06:33:47 +00:00
parent 3a45e6cfe3
commit c4b564998c
27 changed files with 395 additions and 347 deletions
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -1,15 +1,19 @@
 "use client"

+import { cx } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
 import FocusLock from "react-focus-lock"

+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useDropdownStore from "@/stores/main-menu"

 import Card from "@/components/TempDesignSystem/Card"

+import { MenuLink } from "../../MenuLink"
+
 import styles from "./megaMenu.module.css"

 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
@@ -35,14 +39,13 @@ export default function MegaMenu({

  return (
    <FocusLock disabled={!isOpen} returnFocus={true}>
-      <nav className={`${styles.megaMenu} ${isOpen ? styles.active : ""}`}>
+      <nav className={cx(styles.megaMenu, { [styles.active]: isOpen })}>
        {isMobile ? (
          <div className={styles.backWrapper}>
-            <Typography variant="Title/Subtitle/lg" className={styles.text}>
-              <button
-                type="button"
+            <Typography variant="Title/Subtitle/lg">
+              <ButtonRAC
                className={styles.backButton}
-                onClick={() => toggleMegaMenu(false)}
+                onPress={() => toggleMegaMenu(false)}
              >
                <MaterialIcon
                  icon="arrow_back_ios"
@@ -50,22 +53,27 @@ export default function MegaMenu({
                  color="CurrentColor"
                />
                <span>{title}</span>
-              </button>
+              </ButtonRAC>
            </Typography>
          </div>
        ) : null}
        <div className={styles.megaMenuContent}>
-          <div className={styles.seeAllLink}>
+          <div className={styles.seeAllLinkWrapper}>
            {seeAllLink?.url ? (
-              <Link
+              <ButtonLink
                href={seeAllLink.url}
-                variant="icon"
-                weight="bold"
+                variant="Text"
+                typography="Body/Paragraph/mdBold"
                onClick={handleNavigate}
+                wrapping={false}
              >
                {seeAllLink.title}
-                <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-              </Link>
+                <MaterialIcon
+                  icon="arrow_forward"
+                  color="CurrentColor"
+                  size={24}
+                />
+              </ButtonLink>
            ) : null}
          </div>
          <ul className={styles.submenus}>
@@ -77,20 +85,10 @@ export default function MegaMenu({
                <ul className={styles.submenu}>
                  {item.links.map(({ title, url }) =>
                    url ? (
-                      <li key={title} className={styles.submenuItem}>
-                        <Link
-                          href={url}
-                          variant="menu"
-                          className={styles.link}
-                          onClick={handleNavigate}
-                        >
+                      <li key={title}>
+                        <MenuLink href={url} onClick={handleNavigate}>
                          {title}
-                          <MaterialIcon
-                            icon="arrow_forward"
-                            color="Icon/Interactive/Default"
-                            className={styles.arrow}
-                          />
-                        </Link>
+                        </MenuLink>
                      </li>
                    ) : null
                  )}
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
@@ -1,64 +1,47 @@
-.megaMenu:not(.active) {
-  display: none;
+.megaMenu {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &:not(.active) {
+    display: none;
+  }
 }

 .megaMenuContent {
  display: grid;
 }

-.seeAllLink {
+.seeAllLinkWrapper {
  display: flex;
  padding: var(--Space-x2) var(--Space-x3);
-  align-items: center;
-  gap: var(--Space-x1);
-  background-color: var(--Base-Surface-Secondary-light-Normal);
+  background-color: var(--Surface-Primary-OnSurface-Default);
 }

 .submenus {
-  list-style: none;
  display: grid;
-}
-
-.submenuTitle {
-  padding-left: var(--Space-x1);
-  color: var(--Text-Tertiary);
-  text-transform: uppercase;
-}
-
-.submenu {
  list-style: none;
 }

-.submenuItem {
-  display: flex;
-}
-
 .submenusItem {
  display: grid;
  gap: var(--Space-x1);
  align-content: start;
 }

-.linkIcon {
-  display: none;
+.submenuTitle {
+  padding-left: var(--Space-x1);
+  color: var(--Text-Tertiary);
 }

-.link:not(:hover) .arrow {
-  opacity: 0;
-}
-
-.arrow {
-  flex-shrink: 0;
+.submenu {
+  list-style: none;
 }

 .backWrapper {
  padding: var(--Space-x2);
 }

-.text {
-  color: var(--Text-Interactive-Default);
-}
-
 .backButton {
  background-color: transparent;
  border: none;
@@ -68,39 +51,40 @@
  align-items: center;
  gap: var(--Space-x1);
  width: 100%;
+  color: var(--Text-Interactive-Default);
 }

@media screen and (max-width: 767px) {
-  .megaMenu {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
  .megaMenuContent {
    flex-grow: 1;
    grid-template-rows: max-content 1fr;
    gap: var(--Space-x2);
    align-items: start;
-  }
-  .megaMenuContent:has(.cardWrapper) {
-    grid-template-rows: max-content 1fr max-content;
+
+    &:has(.cardWrapper) {
+      grid-template-rows: max-content 1fr max-content;
+    }
  }

  .submenus {
    padding: var(--Space-x2);
  }

-  .submenusItem:first-child {
-    padding-bottom: var(--Space-x2);
-    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-  }
-  .submenusItem:last-child {
-    padding-top: var(--Space-x3);
+  .submenusItem {
+    &:first-child {
+      padding-bottom: var(--Space-x2);
+      border-bottom: 1px solid var(--Border-Divider-Subtle);
+    }
+
+    &:last-child {
+      padding-top: var(--Space-x3);
+    }
  }

  .cardWrapper {
-    background-color: var(--Base-Surface-Secondary-light-Normal);
+    background-color: var(--Background-Primary);
    padding: var(--Space-x4) var(--Space-x2);
+    height: 320px;
  }
 }

@@ -112,17 +96,17 @@
      "submenus";
    width: 600px;
    max-width: calc(100vw - var(--Space-x4));
+
+    &:has(.cardWrapper) {
+      width: 900px;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-areas:
+        "seeAllLink seeAllLink card"
+        "submenus submenus card";
+    }
  }

-  .megaMenuContent:has(.cardWrapper) {
-    width: 900px;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-areas:
-      "seeAllLink seeAllLink card"
-      "submenus submenus card";
-  }
-
-  .seeAllLink {
+  .seeAllLinkWrapper {
    grid-area: seeAllLink;
  }

@@ -132,12 +116,15 @@
    padding: var(--Space-x2) var(--Space-x3);
  }

-  .submenusItem:first-child {
-    padding-right: var(--Space-x5);
-    border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-  }
-  .submenusItem:last-child {
-    padding-left: var(--Space-x5);
+  .submenusItem {
+    &:first-child {
+      padding-right: var(--Space-x5);
+      border-right: 1px solid var(--Border-Divider-Subtle);
+    }
+
+    &:last-child {
+      padding-left: var(--Space-x5);
+    }
  }

  .cardWrapper {
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
@@ -1,9 +1,11 @@
 "use client"

+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
 import { useRef } from "react"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import useDropdownStore from "@/stores/main-menu"

@@ -46,29 +48,40 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
    return (
      <>
        <MainMenuButton
-          onClick={() => toggleMegaMenu(megaMenuTitle)}
-          className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
+          onPress={() => toggleMegaMenu(megaMenuTitle)}
+          className={styles.navigationMenuItem}
        >
-          {title}
          {isMobile ? (
-            <MaterialIcon
-              icon="arrow_forward_ios"
-              size={20}
-              className={`${styles.chevron}`}
-              color="CurrentColor"
-            />
+            <>
+              <Typography variant="Title/Subtitle/lg">
+                <span>{title}</span>
+              </Typography>
+              <MaterialIcon
+                icon="arrow_forward_ios"
+                size={20}
+                className={styles.chevron}
+                color="CurrentColor"
+              />
+            </>
          ) : (
-            <MaterialIcon
-              icon="keyboard_arrow_down"
-              size={20}
-              className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
-              color="CurrentColor"
-            />
+            <>
+              <span>{title}</span>
+              <MaterialIcon
+                icon="keyboard_arrow_down"
+                size={20}
+                className={cx(styles.chevron, {
+                  [styles.isExpanded]: isMegaMenuOpen,
+                })}
+                color="CurrentColor"
+              />
+            </>
          )}
        </MainMenuButton>
        <div
          ref={megaMenuRef}
-          className={`${styles.dropdown} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
+          className={cx(styles.dropdown, {
+            [styles.isExpanded]: isMegaMenuOpen,
+          })}
        >
          <MegaMenu
            isMobile={isMobile}
@@ -83,15 +96,17 @@ export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
    )
  } else if (link?.url) {
    return (
-      <Link
-        className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
-        variant="navigation"
-        weight="bold"
-        onClick={handleNavigate}
-        href={link.url}
+      <Typography
+        variant={isMobile ? "Title/Subtitle/lg" : "Body/Paragraph/mdBold"}
      >
-        {title}
-      </Link>
+        <NextLink
+          className={cx(styles.navigationMenuItem, styles.link)}
+          onClick={handleNavigate}
+          href={link.url}
+        >
+          {title}
+        </NextLink>
+      </Typography>
    )
  }

--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
@@ -1,29 +1,28 @@
 .navigationMenuItem {
-  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
-}
-
-.navigationMenuItem.mobile {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--Space-x2) 0;
-  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
+  color: var(--Text-Interactive-Default);
 }

 .chevron {
  transition: transform 0.3s;
-}

-.chevron.isExpanded {
-  transform: rotate(180deg);
+  &.isExpanded {
+    transform: rotate(180deg);
+  }
 }

 .dropdown {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
  z-index: var(--menu-overlay-z-index);
  overflow: hidden;
 }

@media screen and (max-width: 767px) {
+  .navigationMenuItem {
+    display: flex;
+    justify-content: space-between;
+    padding: var(--Space-x2) 0;
+  }
+
  .dropdown {
    position: fixed;
    width: 100%;
@@ -34,13 +33,18 @@
    bottom: 0;
    transition: right 0.3s;
    overflow-y: auto;
-  }
-  .dropdown.isExpanded {
-    right: 0;
+
+    &.isExpanded {
+      right: 0;
+    }
  }
 }

@media screen and (min-width: 768px) {
+  .navigationMenuItem.link {
+    padding: var(--Space-x05) 0;
+  }
+
  .dropdown {
    display: none;
    position: absolute;
@@ -51,8 +55,9 @@
    transform: translateX(-50%);
    border-radius: var(--Corner-radius-lg);
    box-shadow: var(--popup-box-shadow);
-  }
-  .dropdown.isExpanded {
-    display: grid;
+
+    &.isExpanded {
+      display: grid;
+    }
  }
 }
--- a/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
+++ b/apps/scandic-web/components/Header/MainMenu/NavigationMenu/NavigationMenuList/index.tsx
@@ -14,7 +14,10 @@ export default function NavigationMenuList({
 }: NavigationMenuListProps) {
  return (
    <ul
-      className={`${styles.navigationMenu} ${isMobile ? styles.mobile : styles.desktop}`}
+      className={cx(
+        styles.navigationMenu,
+        isMobile ? styles.mobile : styles.desktop
+      )}
    >
      {items.map((item) => (
        <li key={item.title} className={styles.item}>