feat(SW-272) added mega menu

2024-09-20 14:27:20 +02:00
parent bb93d488bb
commit 9fcf362587
8 changed files with 307 additions and 58 deletions
--- a/components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
+++ b/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;
-  }
 }
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/index.tsx
+++ b/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 [isExpanded, setIsExpanded] = useState(false) // TODO: Use store to manage this state when adding the menu itself.
+  const { openMegaMenu, toggleMegaMenu } = useDropdownStore()
+  const { submenu, title, link, seeAllLink, card } = item
+  const isMegaMenuOpen = openMegaMenu === title

-  function handleButtonClick() {
-    setIsExpanded((prev) => !prev)
+  useHandleKeyUp((event: KeyboardEvent) => {
+    if (event.key === "Escape" && isMegaMenuOpen) {
+      toggleMegaMenu(false)
+    }
+  })
+
+  function handleLinkClick() {
+    toggleMegaMenu(false)
  }

  return submenu.length ? (
-    <MainMenuButton
-      onClick={handleButtonClick}
-      className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
-    >
-      {title}
-      {isMobile ? (
-        <ChevronRightIcon className={`${styles.chevron}`} color="red" />
-      ) : (
-        <ChevronDownIcon
-          className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
-          color="red"
-        />
-      )}
-    </MainMenuButton>
+    <span className={styles.menuWrapper}>
+      <MainMenuButton
+        onClick={() => toggleMegaMenu(title)}
+        className={`${styles.navigationMenuItem} ${isMobile ? styles.mobile : styles.desktop}`}
+      >
+        {title}
+        {isMobile ? (
+          <ChevronRightIcon className={`${styles.chevron}`} color="red" />
+        ) : (
+          <ChevronDownIcon
+            className={`${styles.chevron} ${isMegaMenuOpen ? styles.isExpanded : ""}`}
+            color="red"
+          />
+        )}
+      </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}`}
--- a/components/Header/MainMenu/NavigationMenu/NavigationMenuItem/navigationMenuItem.module.css
+++ b/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%;
+}
--- a/components/TempDesignSystem/Card/card.module.css
+++ b/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 */
-  border-color: var(--Base-Border-Subtle);
+.themeImage .content {
+  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);
 }

--- a/components/TempDesignSystem/Card/card.ts
+++ b/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
 }
--- a/components/TempDesignSystem/Card/index.tsx
+++ b/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
-          src={backgroundImage.url}
-          className={styles.image}
-          alt={backgroundImage.meta.alt || backgroundImage.title}
-          width={420}
-          height={320}
-        />
+        <div className={styles.imageWrapper}>
+          <Image
+            src={backgroundImage.url}
+            className={styles.image}
+            alt={backgroundImage.meta.alt || backgroundImage.title}
+            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>
--- a/stores/main-menu.ts
+++ b/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",
+    },
+  },
+]
--- a/types/components/dropdown/dropdown.ts
+++ b/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}`