feat(SW-272) added mega menu

components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css

@@ -26,21 +26,4 @@
     min-width: 20rem;
     z-index: var(--menu-overlay-z-index);
   }
-
-  /* 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;
-  }
-
-  .dropdown.isExpanded {
-    display: block;
-  }
 }

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx

@@ -1,9 +1,16 @@
 "use client"
 
-import { useState } from "react"
+import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownIcon, ChevronRightIcon } from "@/components/Icons"
+import {
+  ArrowRightIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from "@/components/Icons"
+import Card from "@/components/TempDesignSystem/Card"
 import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 
 import MainMenuButton from "../../MainMenuButton"
 
@@ -12,28 +19,93 @@ import styles from "./navigationMenuItem.module.css"
 import type { NavigationMenuItemProps } from "@/types/components/header/navigationMenuItem"
 
 export default function MenuItem({ item, isMobile }: NavigationMenuItemProps) {
-  const { submenu, title, link } = item
+  const { openMegaMenu, toggleMegaMenu } = useDropdownStore()
-  const [isExpanded, setIsExpanded] = useState(false) // TODO: Use store to manage this state when adding the menu itself.
+  const { submenu, title, link, seeAllLink, card } = item
+  const isMegaMenuOpen = openMegaMenu === title
 
-  function handleButtonClick() {
+  useHandleKeyUp((event: KeyboardEvent) => {
-    setIsExpanded((prev) => !prev)
+    if (event.key === "Escape" && isMegaMenuOpen) {
+      toggleMegaMenu(false)
+    }
+  })
+
+  function handleLinkClick() {
+    toggleMegaMenu(false)
   }
 
   return submenu.length ? (
-    <MainMenuButton
+    <span className={styles.menuWrapper}>
-      onClick={handleButtonClick}
+      <MainMenuButton
-      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
+        onClick={() => toggleMegaMenu(title)}
-    >
+        className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
-      {title}
+      >
-      {isMobile ? (
+        {title}
-        <ChevronRightIcon className={`${styles.chevron}`} color="red" />
+        {isMobile ? (
-      ) : (
+          <ChevronRightIcon className={`${styles.chevron}`} color="red" />
-        <ChevronDownIcon
+        ) : (
-          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+          <ChevronDownIcon
-          color="red"
+            className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
-        />
+            color="red"
-      )}
+          />
-    </MainMenuButton>
+        )}
+      </MainMenuButton>
+      {isMegaMenuOpen ? (
+        <nav className={styles.megaMenu}>
+          <div className={styles.seeAllLink}>
+            {seeAllLink?.link ? (
+              <Link
+                href={seeAllLink?.link?.url}
+                color="burgundy"
+                variant="icon"
+                onClick={handleLinkClick}
+              >
+                {seeAllLink.title}
+                <ArrowRightIcon color="burgundy" />
+              </Link>
+            ) : null}
+          </div>
+          <ul className={styles.submenus}>
+            {submenu.map((item) => (
+              <li key={item.title} className={styles.submenusItem}>
+                <Caption textTransform="uppercase" asChild>
+                  <span>{item.title}</span>
+                </Caption>
+                <ul className={styles.submenu}>
+                  {item.links.map((link) =>
+                    link?.link ? (
+                      <li key={link.title} className={styles.submenuItem}>
+                        <Link
+                          href={link.link?.url}
+                          color="burgundy"
+                          className={styles.link}
+                          onClick={handleLinkClick}
+                        >
+                          {link.title}
+                        </Link>
+                      </li>
+                    ) : null
+                  )}
+                </ul>
+              </li>
+            ))}
+          </ul>
+          {card ? (
+            <Card
+              className={styles.card}
+              backgroundImage={card.backgroundImage}
+              bodyText={card.body_text}
+              heading={card.heading}
+              primaryButton={card.primaryButton}
+              secondaryButton={card.secondaryButton}
+              scriptedTopTitle={card.scripted_top_title}
+              onPrimaryButtonClick={handleLinkClick}
+              onSecondaryButtonClick={handleLinkClick}
+              theme="image"
+            />
+          ) : null}
+        </nav>
+      ) : null}
+    </span>
   ) : (
     <Link
       className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}

components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css

@@ -12,3 +12,108 @@
 .chevron.isExpanded {
   transform: rotate(180deg);
 }
+
+.menuWrapper {
+  position: relative;
+}
+
+.megaMenu {
+  position: absolute;
+  top: var(--Spacing-x5);
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Large);
+  box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+  z-index: var(--menu-overlay-z-index);
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "seeAllLink"
+    "submenus";
+  width: 600px;
+  overflow: hidden;
+}
+
+.megaMenu:has(.card) {
+  width: 900px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas:
+    "seeAllLink seeAllLink card"
+    "submenus submenus card";
+}
+
+.seeAllLink {
+  grid-area: seeAllLink;
+  display: flex;
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+  align-items: center;
+  gap: var(--Spacing-x1);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+}
+
+.submenus {
+  grid-area: submenus;
+  list-style: none;
+  display: grid;
+  gap: var(--Spacing-x5);
+  grid-template-columns: repeat(2, 1fr);
+  padding: var(--Spacing-x2) var(--Spacing-x4);
+}
+
+.submenusItem {
+  display: grid;
+  gap: var(--Spacing-x1);
+  align-content: start;
+}
+.submenusItem:first-child {
+  border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.submenu {
+  list-style: none;
+}
+
+.submenuItem {
+  display: flex;
+}
+
+.link {
+  padding: var(--Spacing-x1) 0;
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  width: 100%;
+}
+
+.megaMenu .card {
+  grid-area: card;
+  border-radius: 0;
+}
+
+.backgroundImage {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.backgroundImage::after {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.36) 50%,
+    rgba(0, 0, 0, 0.75) 100%
+  );
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.image {
+  display: flex;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}

components/TempDesignSystem/Card/card.module.css

@@ -1,10 +1,11 @@
 .container {
-  align-items: center;
+  position: relative;
   display: flex;
-  border-radius: var(--Corner-radius-Medium);
+  align-items: center;
   flex-direction: column;
-  height: 320px; /* Fixed height from Figma */
   justify-content: center;
+  border-radius: var(--Corner-radius-Medium);
+  height: 320px; /* Fixed height from Figma */
   margin-right: var(--Spacing-x2);
   text-align: center;
   width: 100%;
@@ -12,11 +13,29 @@
   overflow: hidden;
 }
 
+.imageWrapper {
+  display: flex;
+}
+
+.imageWrapper::after {
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.36) 50%,
+    rgba(0, 0, 0, 0.75) 100%
+  );
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .image {
   object-fit: cover;
-  overflow: hidden;
   width: 100%;
-  height: auto;
+  height: 100%;
   min-height: 320px; /* Fixed height from Figma */
 }
 
@@ -78,9 +97,10 @@
 .themeImage {
   --font-color: var(--Base-Text-Inverted);
   --script-color: var(--Base-Text-Inverted);
+}
 
-  border: 1px; /* px from Figma */
+.themeImage .content {
-  border-color: var(--Base-Border-Subtle);
+  position: absolute;
 }
 
 .scriptContainer {
@@ -88,7 +108,7 @@
   gap: var(--Spacing-x1);
 }
 
-span.scriptedTitle {
+.scriptedTitle {
   color: var(--script-color);
   padding: var(--Spacing-x1);
   margin: 0;
@@ -98,7 +118,7 @@ span.scriptedTitle {
   color: var(--font-color);
 }
 
-p.bodyText {
+.bodyText {
   color: var(--font-color);
 }
 

components/TempDesignSystem/Card/card.ts

@@ -11,16 +11,18 @@ export interface CardProps
     href: string
     title: string
     openInNewTab?: boolean
-    isExternal: boolean
+    isExternal?: boolean
-  }
+  } | null
   secondaryButton?: {
     href: string
     title: string
     openInNewTab?: boolean
-    isExternal: boolean
+    isExternal?: boolean
-  }
+  } | null
   scriptedTopTitle?: string | null
   heading?: string | null
   bodyText?: string | null
   backgroundImage?: ImageVaultAsset
+  onPrimaryButtonClick?: () => void
+  onSecondaryButtonClick?: () => void
 }

components/TempDesignSystem/Card/index.tsx

@@ -21,24 +21,28 @@ export default function Card({
   className,
   theme,
   backgroundImage,
+  onPrimaryButtonClick,
+  onSecondaryButtonClick,
 }: CardProps) {
   const { buttonTheme, primaryLinkColor, secondaryLinkColor } = getTheme(theme)
 
   return (
     <article
       className={cardVariants({
-        className,
         theme,
+        className,
       })}
     >
       {backgroundImage && (
-        <Image
+        <div className={styles.imageWrapper}>
-          src={backgroundImage.url}
+          <Image
-          className={styles.image}
+            src={backgroundImage.url}
-          alt={backgroundImage.meta.alt || backgroundImage.title}
+            className={styles.image}
-          width={420}
+            alt={backgroundImage.meta.alt || backgroundImage.title}
-          height={320}
+            width={backgroundImage.dimensions.width || 420}
-        />
+            height={backgroundImage.dimensions.height || 320}
+          />
+        </div>
       )}
       <div className={styles.content}>
         {scriptedTopTitle ? (
@@ -73,6 +77,7 @@ export default function Card({
                 href={primaryButton.href}
                 target={primaryButton.openInNewTab ? "_blank" : undefined}
                 color={primaryLinkColor}
+                onClick={onPrimaryButtonClick}
               >
                 {primaryButton.title}
               </Link>
@@ -90,6 +95,7 @@ export default function Card({
                 href={secondaryButton.href}
                 target={secondaryButton.openInNewTab ? "_blank" : undefined}
                 color={secondaryLinkColor}
+                onClick={onSecondaryButtonClick}
               >
                 {secondaryButton.title}
               </Link>

stores/main-menu.ts

@@ -16,6 +16,7 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
   isHeaderLanguageSwitcherOpen: false,
   isHeaderLanguageSwitcherMobileOpen: false,
   isFooterLanguageSwitcherOpen: false,
+  openMegaMenu: false,
   handleHamburgerClick: () => {
     const state = get()
     if (state.isMyPagesMobileMenuOpen) {
@@ -31,9 +32,27 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
       }
     }
   },
+  toggleMegaMenu: (menu: string | false) =>
+    set(
+      produce((state: DropdownState) => {
+        if (state.openMegaMenu === menu) {
+          state.openMegaMenu = false
+        } else {
+          state.openMegaMenu = menu
+        }
+        state.isHamburgerMenuOpen = false
+        state.isMyPagesMobileMenuOpen = false
+        state.isMyPagesMenuOpen = false
+        state.isHeaderLanguageSwitcherOpen = false
+        state.isHeaderLanguageSwitcherMobileOpen = false
+        state.isFooterLanguageSwitcherOpen = false
+      })
+    ),
   toggleDropdown: (dropdown: DropdownTypeEnum) =>
     set(
       produce((state: DropdownState) => {
+        state.openMegaMenu = false
+
         switch (dropdown) {
           case DropdownTypeEnum.HamburgerMenu:
             state.isHamburgerMenuOpen = !state.isHamburgerMenuOpen
@@ -97,3 +116,42 @@ const useDropdownStore = create<DropdownState>((set, get) => ({
 }))
 
 export default useDropdownStore
+
+const error = [
+  {
+    query: {
+      hotelId: "698",
+      params: { hotelId: "698", language: "En", include: "RoomCategories" },
+    },
+  },
+  {
+    query: { lang: "en" },
+    error: {
+      issues: [
+        {
+          code: "invalid_type",
+          expected: "object",
+          received: "undefined",
+          path: [
+            "all_header",
+            "items",
+            0,
+            "menu_items",
+            0,
+            "submenu",
+            0,
+            "links",
+            0,
+            "linkConnection",
+            "edges",
+            0,
+            "node",
+            "web",
+          ],
+          message: "Required",
+        },
+      ],
+      name: "ZodError",
+    },
+  },
+]

types/components/dropdown/dropdown.ts

@@ -5,6 +5,8 @@ export interface DropdownState {
   isHeaderLanguageSwitcherOpen: boolean
   isHeaderLanguageSwitcherMobileOpen: boolean
   isFooterLanguageSwitcherOpen: boolean
+  openMegaMenu: string | false
+  toggleMegaMenu: (menu: string | false) => void
   toggleDropdown: (dropdown: DropdownTypeEnum) => void
   handleHamburgerClick: () => void
 }
@@ -16,6 +18,7 @@ export enum DropdownTypeEnum {
   HeaderLanguageSwitcher = "headerLanguageSwitcher",
   HeaderLanguageSwitcherMobile = "headerLanguageSwitcherMobile",
   FooterLanguageSwitcher = "footerLanguageSwitcher",
+  MegaMenu = "megaMenu",
 }
 
 export type DropdownType = `${DropdownTypeEnum}`