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

Approved-by: Linus Flood
Approved-by: Matilda Landström

apps/scandic-web/components/Header/HeaderLink/headerLink.module.css

@@ -3,16 +3,8 @@
   align-items: center;
   gap: var(--Space-x1);
   color: var(--Text-Interactive-Secondary);
-}
 
-.headerLink:hover {
+  &:hover {
-  color: var(--Text-Interactive-Default);
+    color: var(--Text-Interactive-Default);
-}
+  }
-
-.headerLink .icon * {
-  fill: var(--Icon-Interactive-Default);
-}
-
-.headerLink:hover .icon * {
-  fill: var(--Icon-Interactive-Secondary);
 }

apps/scandic-web/components/Header/HeaderLink/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import Link from "next/link"
+import NextLink from "next/link"
 
 import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -14,11 +14,11 @@ export default function HeaderLink({
   href,
   iconName,
   iconSize = 20,
-  onClick = () => undefined,
+  onClick,
 }: HeaderLinkProps) {
   return (
     <Typography variant="Body/Supporting text (caption)/smRegular">
-      <Link href={href} className={styles.headerLink} onClick={onClick}>
+      <NextLink href={href} className={styles.headerLink} onClick={onClick}>
         {iconName ? (
           <IconByIconName
             iconName={iconName}
@@ -28,7 +28,7 @@ export default function HeaderLink({
           />
         ) : null}
         {children}
-      </Link>
+      </NextLink>
     </Typography>
   )
 }

apps/scandic-web/components/Header/MainMenu/MainMenuButton/index.tsx

@@ -1,16 +1,30 @@
+import { cx } from "class-variance-authority"
+import { Button as ButtonRAC } from "react-aria-components"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import styles from "./menuButton.module.css"
 
-import type { MainMenuButtonProps } from "@/types/components/header/mainMenuButton"
+import type { ComponentProps } from "react"
+
+interface MainMenuButtonProps extends ComponentProps<typeof ButtonRAC> {
+  isLoading?: boolean
+}
 
 export default function MainMenuButton({
-  className = "",
+  className,
+  isLoading,
   ...props
 }: MainMenuButtonProps) {
   return (
-    <button
+    <Typography variant="Body/Paragraph/mdBold">
-      type="button"
+      <ButtonRAC
-      className={`${styles.menuButton} ${className}`}
+        type="button"
-      {...props}
+        className={cx(styles.menuButton, className, {
-    />
+          [styles.loading]: isLoading,
+        })}
+        {...props}
+      />
+    </Typography>
   )
 }

apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css

@@ -1,14 +1,21 @@
 .menuButton {
   display: flex;
-  gap: var(--Space-x05);
   align-items: center;
+  justify-content: center;
+  gap: var(--Space-x05);
+  cursor: pointer;
   width: 100%;
   background-color: transparent;
-  color: var(--Base-Text-High-contrast);
+  color: var(--Text-Interactive-Default);
   border-width: 0;
   padding: var(--Space-x05) 0;
-  cursor: pointer;
+
-  font-family: var(--typography-Body-Bold-fontFamily);
+  &:focus-visible {
-  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
+    outline: 2px auto -webkit-focus-ring-color;
-  font-size: var(--typography-Body-Bold-fontSize);
+    outline-offset: 1px;
+  }
+
+  &.loading {
+    cursor: progress;
+  }
 }

apps/scandic-web/components/Header/MainMenu/MenuLink/index.tsx

@@ -0,0 +1,28 @@
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./menuLink.module.css"
+
+import type { ComponentProps } from "react"
+
+export function MenuLink({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof NextLink>) {
+  return (
+    <Typography variant="Body/Paragraph/mdRegular">
+      <NextLink className={cx(styles.menuLink, className)} {...props}>
+        {children}
+        <MaterialIcon
+          icon="arrow_forward"
+          color="CurrentColor"
+          className={styles.arrowIcon}
+        />
+      </NextLink>
+    </Typography>
+  )
+}

apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css

@@ -0,0 +1,27 @@
+.menuLink {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--Space-x1);
+  gap: var(--Space-x15);
+  border-radius: var(--Corner-radius-md);
+  color: var(--Text-Interactive-Default);
+
+  &:hover {
+    background-color: var(--Surface-Primary-Hover);
+  }
+
+  &:focus-visible {
+    outline: 2px auto -webkit-focus-ring-color;
+    outline-offset: 1px;
+  }
+
+  &:not(:hover) .arrowIcon {
+    opacity: 0;
+  }
+}
+
+.arrowIcon {
+  flex-shrink: 0;
+}

apps/scandic-web/components/Header/MainMenu/MobileMenu/index.tsx

@@ -1,7 +1,8 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import { useEffect } from "react"
-import { Dialog, Modal } from "react-aria-components"
+import { Button as ButtonRAC, Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
@@ -75,16 +76,21 @@ export default function MobileMenu({
 
   const findMyBookingUrl = findMyBookingRoutes[lang]
 
+  function handleLinkClick() {
+    toggleDropdown(DropdownTypeEnum.HamburgerMenu)
+  }
+
   return (
     <>
-      <button
+      <ButtonRAC
-        type="button"
+        className={cx(styles.hamburger, {
-        className={`${styles.hamburger} ${isHamburgerExtended ? styles.isExpanded : ""}`}
+          [styles.isExpanded]: isHamburgerExtended,
+        })}
         aria-label={isHamburgerExtended ? closeMsg : openMsg}
-        onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
+        onPress={handleLinkClick}
       >
         <span className={styles.bar} />
-      </button>
+      </ButtonRAC>
       <Modal className={styles.modal} isOpen={isHamburgerMenuOpen}>
         <Dialog
           className={styles.dialog}
@@ -98,17 +104,23 @@ export default function MobileMenu({
             <HeaderLink
               href={findMyBookingUrl}
               iconName={IconName.Search}
-              onClick={() => toggleDropdown(DropdownTypeEnum.HamburgerMenu)}
+              onClick={handleLinkClick}
             >
               {intl.formatMessage({
                 id: "booking.findBooking",
                 defaultMessage: "Find booking",
               })}
             </HeaderLink>
-            <TopLink isLoggedIn={isLoggedIn} topLink={topLink} iconSize={20} />
+            <TopLink
+              isLoggedIn={isLoggedIn}
+              topLink={topLink}
+              iconSize={20}
+              onClick={handleLinkClick}
+            />
             <HeaderLink
               href={customerService[lang]}
               iconName={IconName.Service}
+              onClick={handleLinkClick}
             >
               {intl.formatMessage({
                 id: "common.customerService",

apps/scandic-web/components/Header/MainMenu/MobileMenu/mobileMenu.module.css

@@ -1,13 +1,3 @@
-@keyframes slide-in {
-  from {
-    right: -100vw;
-  }
-
-  to {
-    right: 0;
-  }
-}
-
 .hamburger {
   background-color: transparent;
   border: none;
@@ -20,7 +10,7 @@
 .bar,
 .bar::after,
 .bar::before {
-  background: var(--Base-Text-High-contrast);
+  background: var(--Icon-Interactive-Default);
   border-radius: 2.3px;
   display: block;
   height: 3px;
@@ -70,7 +60,7 @@
   right: auto;
   bottom: 0;
   width: 100%;
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
   transition: right 0.3s;
   z-index: var(--menu-overlay-z-index);
 }
@@ -90,7 +80,7 @@
 }
 
 .footer {
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
   padding: var(--Space-x4) var(--Space-x2);
   display: grid;
   gap: var(--Space-x2);
@@ -102,3 +92,13 @@
     display: none;
   }
 }
+
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
+}

apps/scandic-web/components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -1,10 +1,10 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
 import { Avatar } from "@scandic-hotels/design-system/Avatar"
-import Body from "@scandic-hotels/design-system/Body"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 
@@ -56,24 +56,24 @@ export default function MyPagesMenu({
   return (
     <div className={styles.myPagesMenu} ref={myPagesMenuRef}>
       <MainMenuButton
-        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
+        onPress={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
       >
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        <Body textTransform="bold" color="baseTextHighContrast" asChild>
+        <span data-hj-suppress>
-          <span data-hj-suppress>
+          {intl.formatMessage(
-            {intl.formatMessage(
+            {
-              {
+              id: "myPages.hiFirstName",
-                id: "myPages.hiFirstName",
+              defaultMessage: "Hi {firstName}!",
-                defaultMessage: "Hi {firstName}!",
+            },
-              },
+            { firstName: user.firstName }
-              { firstName: user.firstName }
+          )}
-            )}
+        </span>
-          </span>
-        </Body>
         <MaterialIcon
           icon="keyboard_arrow_down"
           size={20}
-          className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
+          className={cx(styles.chevron, {
+            [styles.isExpanded]: isMyPagesMenuOpen,
+          })}
           color="CurrentColor"
         />
       </MainMenuButton>
@@ -96,7 +96,7 @@ export default function MyPagesMenu({
 export function MyPagesMenuSkeleton() {
   return (
     <div className={styles.myPagesMenu}>
-      <MainMenuButton>
+      <MainMenuButton isLoading>
         <Avatar />
         <SkeletonShimmer width="10ch" />
         <MaterialIcon

apps/scandic-web/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -1,30 +1,26 @@
-.myPagesMenu {
+.chevron {
-  display: none;
+  transition: transform 0.3s;
-}
 
-@media screen and (min-width: 768px) {
+  &.isExpanded {
-  .myPagesMenu {
-    display: block;
-  }
-
-  .chevron {
-    transition: transform 0.3s;
-  }
-
-  .chevron.isExpanded {
     transform: rotate(180deg);
   }
+}
 
-  .dropdown {
+.dropdown {
-    position: absolute;
+  position: absolute;
-    top: calc(
+  top: calc(
-      3.5rem - 2px
+    3.5rem - 2px
-    ); /* 3.5rem is the height of the main menu + bottom padding. */
+  ); /* 3.5rem is the height of the main menu + bottom padding. */
-    right: 0;
+  right: 0;
-    background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
-    border-radius: var(--Corner-radius-lg);
+  border-radius: var(--Corner-radius-lg);
-    box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
-    min-width: 20rem;
+  min-width: 20rem;
-    z-index: var(--menu-overlay-z-index);
+  z-index: var(--menu-overlay-z-index);
+}
+
+@media screen and (max-width: 767px) {
+  .myPagesMenu {
+    display: none;
   }
 }

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -1,18 +1,18 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import FocusLock from "react-focus-lock"
 import { useIntl } from "react-intl"
 
 import { logout } from "@scandic-hotels/common/constants/routes/handleAuth"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
-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 { trpc } from "@scandic-hotels/trpc/client"
 
 import useLang from "@/hooks/useLang"
 
+import { MenuLink } from "../MenuLink"
+
 import styles from "./myPagesMenuContent.module.css"
 
 import type { MyPagesLinkKey } from "@scandic-hotels/trpc/routers/navigation/mypages/MyPagesLink"
@@ -34,10 +34,7 @@ export default function MyPagesMenuContent({
   const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
 
   const membershipPoints = membership?.currentPoints
-  const introClassName =
+  const showMembershipInfo = membershipLevel && membershipPoints !== undefined
-    membershipLevel && membershipPoints
-      ? `${styles.intro}`
-      : `${styles.intro} ${styles.noMembership}`
 
   if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
     return null
@@ -46,7 +43,11 @@ export default function MyPagesMenuContent({
   return (
     <FocusLock returnFocus={true}>
       <nav className={styles.myPagesMenuContent}>
-        <div className={introClassName}>
+        <div
+          className={cx(styles.intro, {
+            [styles.noMembership]: !showMembershipInfo,
+          })}
+        >
           <Typography variant="Title/Subtitle/md" className={styles.userName}>
             <p data-hj-suppress>
               {intl.formatMessage(
@@ -58,32 +59,32 @@ export default function MyPagesMenuContent({
               )}
             </p>
           </Typography>
-          {membershipLevel && membershipPoints ? (
+          {showMembershipInfo ? (
-            <Caption className={styles.friendTypeWrapper}>
+            <div className={styles.friendTypeWrapper}>
-              <span className={styles.friendType}>{membershipLevel.name}</span>
+              <Typography variant="Title/Overline/sm">
-              <span>
+                <span className={styles.friendType}>
-                {intl.formatMessage(
+                  {membershipLevel.name}
-                  {
+                </span>
-                    id: "common.pointsAmountPoints",
+              </Typography>
-                    defaultMessage: "{pointsAmount, number} points",
+              <Typography variant="Body/Paragraph/mdRegular">
-                  },
+                <span>
-                  { pointsAmount: membershipPoints }
+                  {intl.formatMessage(
-                )}
+                    {
-              </span>
+                      id: "common.pointsAmountPoints",
-            </Caption>
+                      defaultMessage: "{pointsAmount, number} points",
+                    },
+                    { pointsAmount: membershipPoints }
+                  )}
+                </span>
+              </Typography>
+            </div>
           ) : null}
+          <Divider className={styles.divider} />
         </div>
 
-        <ul className={styles.groups}>
+        <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-          <li>
+        <Divider className={styles.divider} />
-            <Divider className={styles.divider} />
+        <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-
-            <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-
-            <Divider className={styles.divider} />
-            <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
-          </li>
-        </ul>
       </nav>
     </FocusLock>
   )
@@ -100,22 +101,11 @@ function PrimaryLinks({
 
   return (
     <ul className={styles.menuItems}>
-      {primaryLinks.map((link, i) => (
+      {primaryLinks.map(({ text, href }) => (
-        <li key={link.href + i}>
+        <li key={`${text}-${href}`}>
-          <Link
+          <MenuLink href={href} onClick={toggleOpenStateFn}>
-            href={link.href}
+            {text}
-            onClick={toggleOpenStateFn}
+          </MenuLink>
-            variant="menu"
-            weight="bold"
-            className={styles.link}
-          >
-            {link.text}
-            <MaterialIcon
-              icon="arrow_forward"
-              className={styles.arrow}
-              color="CurrentColor"
-            />
-          </Link>
         </li>
       ))}
     </ul>
@@ -135,35 +125,20 @@ function SecondaryLinks({
 
   return (
     <ul className={styles.menuItems}>
-      {secondaryLinks.map((link, i) => (
+      {secondaryLinks.map(({ text, href }) => (
-        <li key={link.href + i}>
+        <li key={`${text}-${href}`}>
-          <Link
+          <MenuLink href={href} onClick={toggleOpenStateFn}>
-            href={link.href}
+            {text}
-            onClick={toggleOpenStateFn}
+          </MenuLink>
-            variant="menu"
-            className={styles.link}
-          >
-            {link.text}
-            <MaterialIcon
-              icon="arrow_forward"
-              className={styles.arrow}
-              color="Icon/Interactive/Default"
-            />
-          </Link>
         </li>
       ))}
       <li>
-        <Link
+        <MenuLink href={logout[lang]} prefetch={false}>
-          href={logout[lang]}
-          prefetch={false}
-          variant="menu"
-          className={styles.link}
-        >
           {intl.formatMessage({
             id: "common.logOut",
             defaultMessage: "Log out",
           })}
-        </Link>
+        </MenuLink>
       </li>
     </ul>
   )

apps/scandic-web/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css

@@ -6,44 +6,29 @@
   padding: 0 var(--Space-x1);
 }
 
-.myPagesMenuContent .friendTypeWrapper {
+.friendTypeWrapper {
-  color: var(--UI-Text-Medium-contrast);
+  color: var(--Text-Secondary);
 }
 
 .divider {
   margin: var(--Space-x2) 0;
 }
 
-.friendType {
-  font-family: var(--typography-Title-5-fontFamily);
-  letter-spacing: var(--typography-Title-5-letterSpacing);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  text-transform: uppercase;
-}
-
 .friendType::after {
   content: " · ";
   display: inline;
   padding: 0 var(--Space-x05);
 }
 
-.groups,
 .menuItems {
   list-style: none;
 }
 
-.link:not(:hover) .arrow {
-  opacity: 0;
-}
-
-.arrow {
-  flex-shrink: 0;
-}
-
 @media screen and (min-width: 768px) {
   .myPagesMenuContent {
     padding: var(--Space-x2) var(--Space-x4);
   }
+
   .intro.noMembership,
   .userName {
     display: none;

apps/scandic-web/components/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -28,7 +28,13 @@ export default function MyPagesMenuWrapper() {
   const { data: session } = useSession()
   const isUserLoggedIn = isValidSession(session)
 
-  const { data: user, isLoading: isLoadingUser } = trpc.user.name.useQuery()
+  const { data: user, isLoading: isLoadingUser } = trpc.user.name.useQuery(
+    undefined,
+    {
+      refetchOnWindowFocus: true,
+      refetchInterval: 300_000,
+    }
+  )
   const { data: membership, isLoading: isLoadingMembership } =
     trpc.user.safeMembershipLevel.useQuery()
 

apps/scandic-web/components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -51,8 +51,7 @@ export default function MyPagesMobileMenu({
   return (
     <div className={styles.myPagesMobileMenu}>
       <MainMenuButton
-        className={styles.button}
+        onPress={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
-        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)}
         aria-label={intl.formatMessage({
           id: "header.openMyPagesMenu",
           defaultMessage: "Open my pages menu",
@@ -85,7 +84,7 @@ export default function MyPagesMobileMenu({
 export function MyPagesMobileMenuSkeleton() {
   return (
     <div className={styles.myPagesMobileMenu}>
-      <MainMenuButton className={styles.button}>
+      <MainMenuButton isLoading>
         <Avatar />
       </MainMenuButton>
     </div>

apps/scandic-web/components/Header/MainMenu/MyPagesMobileMenu/myPagesMobileMenu.module.css

@@ -1,13 +1,3 @@
-@keyframes slide-in {
-  from {
-    right: -100vw;
-  }
-
-  to {
-    right: 0;
-  }
-}
-
 .modal {
   position: fixed;
   top: calc(var(--main-menu-mobile-height) + var(--alert-and-banner-height));
@@ -16,13 +6,14 @@
   width: 100%;
   background-color: var(--Base-Surface-Primary-light-Normal);
   z-index: var(--menu-overlay-z-index);
-}
 
-.modal[data-entering] {
+  &[data-entering] {
-  animation: slide-in 0.3s;
+    animation: slide-in 0.3s;
-}
+  }
-.modal[data-exiting] {
+
-  animation: slide-in 0.3s reverse;
+  &[data-exiting] {
+    animation: slide-in 0.3s reverse;
+  }
 }
 
 .dialog {
@@ -36,3 +27,13 @@
     display: none;
   }
 }
+
+@keyframes slide-in {
+  from {
+    right: -100vw;
+  }
+
+  to {
+    right: 0;
+  }
+}

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}>
+            <Typography variant="Title/Subtitle/lg">
-              <button
+              <ButtonRAC
-                type="button"
                 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"
+                variant="Text"
-                weight="bold"
+                typography="Body/Paragraph/mdBold"
                 onClick={handleNavigate}
+                wrapping={false}
               >
                 {seeAllLink.title}
-                <MaterialIcon icon="arrow_forward" color="CurrentColor" />
+                <MaterialIcon
-              </Link>
+                  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}>
+                      <li key={title}>
-                        <Link
+                        <MenuLink href={url} onClick={handleNavigate}>
-                          href={url}
-                          variant="menu"
-                          className={styles.link}
-                          onClick={handleNavigate}
-                        >
                           {title}
-                          <MaterialIcon
+                        </MenuLink>
-                            icon="arrow_forward"
-                            color="Icon/Interactive/Default"
-                            className={styles.arrow}
-                          />
-                        </Link>
                       </li>
                     ) : null
                   )}

apps/scandic-web/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css

@@ -1,64 +1,47 @@
-.megaMenu:not(.active) {
+.megaMenu {
-  display: none;
+  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;
+  background-color: var(--Surface-Primary-OnSurface-Default);
-  gap: var(--Space-x1);
-  background-color: var(--Base-Surface-Secondary-light-Normal);
 }
 
 .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 {
+.submenuTitle {
-  display: none;
+  padding-left: var(--Space-x1);
+  color: var(--Text-Tertiary);
 }
 
-.link:not(:hover) .arrow {
+.submenu {
-  opacity: 0;
+  list-style: none;
-}
-
-.arrow {
-  flex-shrink: 0;
 }
 
 .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) {
+    &:has(.cardWrapper) {
-    grid-template-rows: max-content 1fr max-content;
+      grid-template-rows: max-content 1fr max-content;
+    }
   }
 
   .submenus {
     padding: var(--Space-x2);
   }
 
-  .submenusItem:first-child {
+  .submenusItem {
-    padding-bottom: var(--Space-x2);
+    &:first-child {
-    border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+      padding-bottom: var(--Space-x2);
-  }
+      border-bottom: 1px solid var(--Border-Divider-Subtle);
-  .submenusItem:last-child {
+    }
-    padding-top: var(--Space-x3);
+
+    &: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) {
+  .seeAllLinkWrapper {
-    width: 900px;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-areas:
-      "seeAllLink seeAllLink card"
-      "submenus submenus card";
-  }
-
-  .seeAllLink {
     grid-area: seeAllLink;
   }
 
@@ -132,12 +116,15 @@
     padding: var(--Space-x2) var(--Space-x3);
   }
 
-  .submenusItem:first-child {
+  .submenusItem {
-    padding-right: var(--Space-x5);
+    &:first-child {
-    border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+      padding-right: var(--Space-x5);
-  }
+      border-right: 1px solid var(--Border-Divider-Subtle);
-  .submenusItem:last-child {
+    }
-    padding-left: var(--Space-x5);
+
+    &:last-child {
+      padding-left: var(--Space-x5);
+    }
   }
 
   .cardWrapper {

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)}
+          onPress={() => toggleMegaMenu(megaMenuTitle)}
-          className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
+          className={styles.navigationMenuItem}
         >
-          {title}
           {isMobile ? (
-            <MaterialIcon
+            <>
-              icon="arrow_forward_ios"
+              <Typography variant="Title/Subtitle/lg">
-              size={20}
+                <span>{title}</span>
-              className={`${styles.chevron}`}
+              </Typography>
-              color="CurrentColor"
+              <MaterialIcon
-            />
+                icon="arrow_forward_ios"
+                size={20}
+                className={styles.chevron}
+                color="CurrentColor"
+              />
+            </>
           ) : (
-            <MaterialIcon
+            <>
-              icon="keyboard_arrow_down"
+              <span>{title}</span>
-              size={20}
+              <MaterialIcon
-              className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
+                icon="keyboard_arrow_down"
-              color="CurrentColor"
+                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
+      <Typography
-        className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : ""}`}
+        variant={isMobile ? "Title/Subtitle/lg" : "Body/Paragraph/mdBold"}
-        variant="navigation"
-        weight="bold"
-        onClick={handleNavigate}
-        href={link.url}
       >
-        {title}
+        <NextLink
-      </Link>
+          className={cx(styles.navigationMenuItem, styles.link)}
+          onClick={handleNavigate}
+          href={link.url}
+        >
+          {title}
+        </NextLink>
+      </Typography>
     )
   }
 

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); */
+  color: var(--Text-Interactive-Default);
-}
-
-.navigationMenuItem.mobile {
-  display: flex;
-  justify-content: space-between;
-  padding: var(--Space-x2) 0;
-  font-size: var(--typography-Subtitle-1-Mobile-fontSize);
 }
 
 .chevron {
   transition: transform 0.3s;
-}
 
-.chevron.isExpanded {
+  &.isExpanded {
-  transform: rotate(180deg);
+    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 {
+    &.isExpanded {
-    right: 0;
+      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 {
+    &.isExpanded {
-    display: grid;
+      display: grid;
+    }
   }
 }

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

apps/scandic-web/components/Header/MainMenu/mainMenu.module.css

@@ -1,7 +1,7 @@
 .mainMenu {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+  background-color: var(--Surface-Primary-Default);
   padding: var(--Space-x2) 0;
-  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  border-bottom: 1px solid var(--Border-Divider-Subtle);
 }
 
 .nav {

apps/scandic-web/components/Header/TopLink/index.tsx

@@ -4,12 +4,24 @@ import HeaderLink from "../HeaderLink"
 
 import styles from "./topLink.module.css"
 
-import type { TopLinkProps } from "@/types/components/header/topLink"
+import type { Header } from "@scandic-hotels/trpc/types/header"
+import type { ComponentProps } from "react"
+
+export interface TopLinkProps
+  extends Omit<
+    ComponentProps<typeof HeaderLink>,
+    "href" | "iconName" | "children"
+  > {
+  isLoggedIn: boolean
+  topLink: Header["header"]["topLink"]
+  iconSize?: number
+}
 
 export default function TopLink({
   isLoggedIn,
   topLink,
   iconSize = 16,
+  ...props
 }: TopLinkProps) {
   const linkData = isLoggedIn ? topLink.logged_in : topLink.logged_out
 
@@ -22,6 +34,7 @@ export default function TopLink({
       href={linkData.url}
       iconName={linkData.icon || IconName.Gift}
       iconSize={iconSize}
+      {...props}
     >
       <span className={styles.topLink}>{linkData.title}</span>
     </HeaderLink>

apps/scandic-web/components/Header/TopMenu/topMenu.module.css

@@ -1,6 +1,6 @@
 .topMenu {
   display: none;
-  background-color: var(--Base-Surface-Subtle-Normal);
+  background-color: var(--Surface-Secondary-Default);
   padding: var(--Space-x2) 0;
 }
 

apps/scandic-web/components/Header/header.module.css

@@ -1,4 +0,0 @@
-.header {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  color: var(--Base-Text-High-contrast);
-}

apps/scandic-web/components/Header/index.tsx

@@ -5,13 +5,11 @@ import { getHeader } from "@/lib/trpc/memoizedRequests"
 import MainMenu from "./MainMenu"
 import TopMenu, { TopMenuSkeleton } from "./TopMenu"
 
-import styles from "./header.module.css"
-
 export default async function Header() {
   void getHeader()
 
   return (
-    <header className={styles.header}>
+    <header>
       <Suspense fallback={<TopMenuSkeleton />}>
         <TopMenu />
       </Suspense>

apps/scandic-web/types/components/header/mainMenuButton.ts

@@ -1,2 +0,0 @@
-export interface MainMenuButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}

apps/scandic-web/types/components/header/topLink.ts

@@ -1,7 +0,0 @@
-import type { Header } from "@scandic-hotels/trpc/types/header"
-
-export interface TopLinkProps {
-  isLoggedIn: boolean
-  topLink: Header["header"]["topLink"]
-  iconSize?: number
-}