feat(SW-391): Added sidepeek functionality to teasercard

app/globals.css

@@ -115,6 +115,7 @@
   --header-z-index: 10;
   --menu-overlay-z-index: 10;
   --dialog-z-index: 9;
+  --sidepeek-z-index: 11;
 }
 
 * {

components/Blocks/CardsGrid.tsx

@@ -7,11 +7,15 @@ import TeaserCard from "@/components/TempDesignSystem/TeaserCard"
 
 import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
 import { CardsGridEnum } from "@/types/enums/cardsGrid"
+import { CardsGridLayoutEnum } from "@/types/trpc/routers/contentstack/blocks"
 
 export default function CardsGrid({
   cards_grid,
   firstItem = false,
 }: CardsGridProps) {
+  const columns =
+    cards_grid.layout === CardsGridLayoutEnum.THREE_COLUMNS ? 3 : 2
+
   return (
     <SectionContainer>
       <SectionHeader
@@ -19,7 +23,7 @@ export default function CardsGrid({
         preamble={cards_grid.preamble}
         topTitle={firstItem}
       />
-      <Grids.Stackable>
+      <Grids.Stackable columns={columns}>
         {cards_grid.cards.map((card) => {
           switch (card.__typename) {
             case CardsGridEnum.cards.Card:
@@ -43,6 +47,7 @@ export default function CardsGrid({
                   primaryButton={card.primaryButton}
                   secondaryButton={card.secondaryButton}
                   sidePeekButton={card.sidePeekButton}
+                  sidePeekContent={card.sidePeekContent}
                   image={card.image}
                 />
               )

components/BookingWidget/Client.tsx

@@ -7,7 +7,7 @@ import { dt } from "@/lib/dt"
 
 import Form from "@/components/Forms/BookingWidget"
 import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
-import { CloseLarge } from "@/components/Icons"
+import { CloseLargeIcon } from "@/components/Icons"
 import { debounce } from "@/utils/debounce"
 
 import MobileToggleButton from "./MobileToggleButton"
@@ -98,7 +98,7 @@ export default function BookingWidgetClient({
           onClick={closeMobileSearch}
           type="button"
         >
-          <CloseLarge />
+          <CloseLargeIcon />
         </button>
         <Form locations={locations} type={type} />
       </section>

components/DatePicker/Screen/Mobile.tsx

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
 import { Lang } from "@/constants/languages"
 import { dt } from "@/lib/dt"
 
-import { CloseLarge } from "@/components/Icons"
+import { CloseLargeIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -127,7 +127,7 @@ export default function DatePickerMobile({
                   ))}
                 </select>
                 <button className={styles.close} onClick={close} type="button">
-                  <CloseLarge />
+                  <CloseLargeIcon />
                 </button>
               </header>
               {children}

components/Icons/get-icon-by-icon-name.ts

@@ -21,7 +21,7 @@ import {
   ChevronRightIcon,
   ChevronRightSmallIcon,
   CloseIcon,
-  CloseLarge,
+  CloseLargeIcon,
   CoffeeIcon,
   ConciergeIcon,
   CrossCircle,
@@ -104,7 +104,7 @@ export function getIconByIconName(icon?: IconName): FC<IconProps> | null {
     case IconName.Close:
       return CloseIcon
     case IconName.CloseLarge:
-      return CloseLarge
+      return CloseLargeIcon
     case IconName.Coffee:
       return CoffeeIcon
     case IconName.Concierge:

components/Icons/index.tsx

@@ -16,7 +16,7 @@ export { default as ChevronLeftIcon } from "./ChevronLeft"
 export { default as ChevronRightIcon } from "./ChevronRight"
 export { default as ChevronRightSmallIcon } from "./ChevronRightSmall"
 export { default as CloseIcon } from "./Close"
-export { default as CloseLarge } from "./CloseLarge"
+export { default as CloseLargeIcon } from "./CloseLarge"
 export { default as CoffeeIcon } from "./Coffee"
 export { default as ConciergeIcon } from "./Concierge"
 export { default as CreditCard } from "./CreditCard"

components/TempDesignSystem/SidePeek/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { CloseIcon } from "@/components/Icons"
+import { CloseLargeIcon } from "@/components/Icons"
 import { SidePeekContext } from "@/components/SidePeekProvider"
 
 import Button from "../Button"
@@ -52,13 +52,16 @@ function SidePeek({
       </div>
     )
   }
+
   return (
     <div ref={setRef}>
       <DialogTrigger>
         <ModalOverlay
           UNSTABLE_portalContainer={rootDiv}
           className={styles.overlay}
-          isOpen={isOpen || contentKey === context?.activeSidePeek}
+          isOpen={
+            isOpen || (!!contentKey && contentKey === context?.activeSidePeek)
+          }
           onOpenChange={onClose}
           isDismissable
         >
@@ -80,9 +83,9 @@ function SidePeek({
                     aria-label={intl.formatMessage({ id: "Close" })}
                     className={styles.closeButton}
                     intent="text"
-                    onPress={onClose}
+                    onClick={onClose}
                   >
-                    <CloseIcon color="burgundy" height={32} width={32} />
+                    <CloseLargeIcon color="burgundy" />
                   </Button>
                 </header>
                 <div className={styles.sidePeekContent}>{children}</div>

components/TempDesignSystem/SidePeek/sidePeek.module.css

@@ -22,12 +22,13 @@
 }
 
 .overlay {
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 99;
+  z-index: var(--sidepeek-z-index);
+  background-color: var(--UI-Opacity-Almost-Black-30);
 }
 
 .modal {

components/TempDesignSystem/SidePeek/sidePeek.ts

@@ -1,5 +1,5 @@
 export interface SidePeekProps {
-  contentKey: string
+  contentKey?: string
   title: string
   isOpen?: boolean
   handleClose?: (isOpen: boolean) => void

components/TempDesignSystem/TeaserCard/Sidepeek/index.tsx

@@ -0,0 +1,82 @@
+"use client"
+
+import { useState } from "react"
+
+import { ChevronRightIcon } from "@/components/Icons"
+import JsonToHtml from "@/components/JsonToHtml"
+import Button from "@/components/TempDesignSystem/Button"
+
+import Link from "../../Link"
+import SidePeek from "../../SidePeek"
+
+import styles from "./sidepeek.module.css"
+
+import { TeaserCardSidepeekProps } from "@/types/components/teaserCard"
+
+export default function TeaserCardSidepeek({
+  button,
+  data,
+}: TeaserCardSidepeekProps) {
+  const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
+  const { heading, content, primary_button, secondary_button } = data
+
+  return (
+    <>
+      <Button
+        onClick={() => setSidePeekIsOpen(true)}
+        theme="base"
+        variant="icon"
+        intent="text"
+        size="small"
+        wrapping
+      >
+        {button.call_to_action_text}
+        <ChevronRightIcon />
+      </Button>
+      <SidePeek
+        title={heading}
+        isOpen={sidePeekIsOpen}
+        handleClose={() => setSidePeekIsOpen(false)}
+      >
+        <JsonToHtml
+          nodes={content.json.children}
+          embeds={content.embedded_itemsConnection.edges}
+        />
+        <div className={styles.ctaContainer}>
+          {primary_button && (
+            <Button
+              asChild
+              theme="base"
+              intent="primary"
+              size="small"
+              className={styles.ctaButton}
+            >
+              <Link
+                href={primary_button.href}
+                target={primary_button.openInNewTab ? "_blank" : undefined}
+                color="none"
+              >
+                {primary_button.title}
+              </Link>
+            </Button>
+          )}
+          {secondary_button && (
+            <Button
+              asChild
+              intent="secondary"
+              size="small"
+              className={styles.ctaButton}
+            >
+              <Link
+                href={secondary_button.href}
+                target={secondary_button.openInNewTab ? "_blank" : undefined}
+              >
+                {secondary_button.title}
+              </Link>
+            </Button>
+          )}
+        </div>
+      </SidePeek>
+    </>
+  )
+}

components/TempDesignSystem/TeaserCard/Sidepeek/sidepeek.module.css

@@ -0,0 +1,4 @@
+.ctaContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}

components/TempDesignSystem/TeaserCard/index.tsx

@@ -1,10 +1,10 @@
-import { ChevronRightIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
 import Subtitle from "../Text/Subtitle"
+import TeaserCardSidepeek from "./Sidepeek"
 import { teaserCardVariants } from "./variants"
 
 import styles from "./teaserCard.module.css"
@@ -17,6 +17,7 @@ export default function TeaserCard({
   primaryButton,
   secondaryButton,
   sidePeekButton,
+  sidePeekContent,
   image,
   style = "default",
   alwaysStack = false,
@@ -41,21 +42,11 @@ export default function TeaserCard({
         <Subtitle textAlign="left" type="two" color="black">
           {title}
         </Subtitle>
-        <Body color="black">{description}</Body>
+        <Body color="black" className={styles.body}>
-        {!!sidePeekButton ? (
+          {description}
-          <Button
+        </Body>
-            // onClick={() => {
+        {sidePeekButton && sidePeekContent ? (
-            //   // TODO: Implement sidePeek functionality once SW-341 is merged.
+          <TeaserCardSidepeek button={sidePeekButton} data={sidePeekContent} />
-            // }}
-            theme="base"
-            variant="icon"
-            intent="text"
-            size="small"
-            className={styles.sidePeekCTA}
-          >
-            {sidePeekButton.title}
-            <ChevronRightIcon />
-          </Button>
         ) : (
           <div className={styles.ctaContainer}>
             {primaryButton && (

components/TempDesignSystem/TeaserCard/teaserCard.module.css

@@ -54,6 +54,17 @@
   width: 100%;
 }
 
+.body {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* line-height variables are in %, so using the value in rem instead */
+  max-height: calc(3 * 1.5rem);
+}
+
 @media (min-width: 1367px) {
   .card:not(.alwaysStack) .ctaContainer {
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -63,9 +74,3 @@
     grid-template-columns: 1fr;
   }
 }
-
-.sidePeekCTA {
-  /* TODO: Create ticket to remove padding on "link" buttons, 
-  align w. design on this. */
-  padding: 0 !important;
-}

components/TempDesignSystem/Toasts/index.tsx

@@ -2,7 +2,7 @@ import { ExternalToast, toast as sonnerToast, Toaster } from "sonner"
 
 import {
   CheckCircleIcon,
-  CloseLarge,
+  CloseLargeIcon,
   CrossCircle,
   InfoCircleIcon,
   WarningTriangle,
@@ -42,7 +42,7 @@ export function Toast({ message, onClose, variant }: ToastsProps) {
       </div>
       <Body className={styles.message}>{message}</Body>
       <Button onClick={onClose} variant="icon" intent="text">
-        <CloseLarge />
+        <CloseLargeIcon />
       </Button>
     </div>
   )

lib/graphql/Fragments/Blocks/TeaserCard.graphql

@@ -28,6 +28,7 @@ fragment TeaserCardBlock on TeaserCard {
           ...LoyaltyPageLink
           ...ContentPageLink
           ...AccountPageLink
+          ...HotelPageLink
         }
       }
     }
@@ -55,6 +56,63 @@ fragment TeaserCardBlock on TeaserCard {
   sidepeek_button {
     call_to_action_text
   }
+  sidepeek_content {
+    heading
+    content {
+      embedded_itemsConnection {
+        edges {
+          node {
+            __typename
+            ...AccountPageLink
+            ...ContentPageLink
+            ...HotelPageLink
+            ...LoyaltyPageLink
+          }
+        }
+      }
+      json
+    }
+    has_primary_button
+    primary_button {
+      is_contentstack_link
+      cta_text
+      open_in_new_tab
+      external_link {
+        title
+        href
+      }
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...LoyaltyPageLink
+            ...ContentPageLink
+            ...HotelPageLink
+          }
+        }
+      }
+    }
+    has_secondary_button
+    secondary_button {
+      is_contentstack_link
+      cta_text
+      open_in_new_tab
+      external_link {
+        title
+        href
+      }
+      linkConnection {
+        edges {
+          node {
+            __typename
+            ...LoyaltyPageLink
+            ...ContentPageLink
+            ...HotelPageLink
+          }
+        }
+      }
+    }
+  }
   system {
     ...System
   }

lib/graphql/Query/ContentPage/ContentPage.graphql

@@ -23,16 +23,6 @@ query GetContentPage($locale: String!, $uid: String!) {
       preamble
       ...NavigationLinks
     }
-    blocks {
-      __typename
-      ...CardsGrid_ContentPage
-      ...Content_ContentPage
-      ...DynamicContent_ContentPage
-      ...Shortcuts_ContentPage
-      ...Table_ContentPage
-      ...TextCols_ContentPage
-      ...UspGrid_ContentPage
-    }
     sidebar {
       __typename
       ...ContentSidebar_ContentPage
@@ -47,6 +37,21 @@ query GetContentPage($locale: String!, $uid: String!) {
   }
 }
 
+query GetContentPageBlocks($locale: String!, $uid: String!) {
+  content_page(uid: $uid, locale: $locale) {
+    blocks {
+      __typename
+      ...CardsGrid_ContentPage
+      ...Content_ContentPage
+      ...DynamicContent_ContentPage
+      ...Shortcuts_ContentPage
+      ...Table_ContentPage
+      ...TextCols_ContentPage
+      ...UspGrid_ContentPage
+    }
+  }
+}
+
 query GetContentPageRefs($locale: String!, $uid: String!) {
   content_page(locale: $locale, uid: $uid) {
     header {

server/routers/contentstack/contentPage/query.ts

@@ -1,5 +1,8 @@
 import { Lang } from "@/constants/languages"
-import { GetContentPage } from "@/lib/graphql/Query/ContentPage/ContentPage.graphql"
+import {
+  GetContentPage,
+  GetContentPageBlocks,
+} from "@/lib/graphql/Query/ContentPage/ContentPage.graphql"
 import { request } from "@/lib/graphql/request"
 import { contentstackExtendedProcedureUID, router } from "@/server/trpc"
 
@@ -40,18 +43,38 @@ export const contentPageQueryRouter = router({
       })
     )
 
-    const response = await request<GetContentPageSchema>(
+    const [mainResponse, blocksResponse] = await Promise.all([
-      GetContentPage,
+      request<GetContentPageSchema>(
-      { locale: lang, uid },
+        GetContentPage,
-      {
+        { locale: lang, uid },
-        cache: "force-cache",
+        {
-        next: {
+          cache: "force-cache",
-          tags,
+          next: {
-        },
+            tags,
-      }
+          },
-    )
+        }
+      ),
+      request<GetContentPageSchema>(
+        GetContentPageBlocks,
+        { locale: lang, uid },
+        {
+          cache: "force-cache",
+          next: {
+            tags,
+          },
+        }
+      ),
+    ])
 
-    const contentPage = contentPageSchema.safeParse(response.data)
+    const responseData = {
+      ...mainResponse.data,
+      content_page: {
+        ...mainResponse.data.content_page,
+        blocks: blocksResponse.data.content_page.blocks,
+      },
+    }
+
+    const contentPage = contentPageSchema.safeParse(responseData)
 
     if (!contentPage.success) {
       console.error(

server/routers/contentstack/schemas/blocks/cardsGrid.ts

@@ -1,12 +1,17 @@
 import { z } from "zod"
 
+import * as pageLinks from "@/server/routers/contentstack/schemas/pageLinks"
+
 import { tempImageVaultAssetSchema } from "../imageVault"
 import { systemSchema } from "../system"
 import { buttonSchema } from "./utils/buttonLinkSchema"
 import { linkConnectionRefsSchema } from "./utils/linkConnection"
+import { imageSchema } from "./image"
+import { imageContainerSchema } from "./imageContainer"
 
 import { BlocksEnums } from "@/types/enums/blocks"
 import { CardsGridEnum } from "@/types/enums/cardsGrid"
+import { CardsGridLayoutEnum } from "@/types/trpc/routers/contentstack/blocks"
 
 export const cardBlockSchema = z.object({
   __typename: z.literal(CardsGridEnum.cards.Card),
@@ -49,17 +54,57 @@ export const teaserCardBlockSchema = z.object({
   has_primary_button: z.boolean().default(false),
   has_secondary_button: z.boolean().default(false),
   has_sidepeek_button: z.boolean().default(false),
-  side_peek_button: z
+  sidepeek_button: z
     .object({
-      title: z.string().optional().default(""),
+      call_to_action_text: z.string().optional().default(""),
     })
     .optional(),
+  sidepeek_content: z
+    .object({
+      heading: z.string(),
+      content: z.object({
+        json: z.any(),
+        embedded_itemsConnection: z.object({
+          edges: z.array(
+            z.object({
+              node: z
+                .discriminatedUnion("__typename", [
+                  imageContainerSchema,
+                  imageSchema,
+                  pageLinks.accountPageSchema,
+                  pageLinks.contentPageSchema,
+                  pageLinks.hotelPageSchema,
+                  pageLinks.loyaltyPageSchema,
+                ])
+                .transform((data) => {
+                  const link = pageLinks.transform(data)
+                  if (link) {
+                    return link
+                  }
+                  return data
+                }),
+            })
+          ),
+        }),
+      }),
+      has_primary_button: z.boolean().default(false),
+      primary_button: buttonSchema,
+      has_secondary_button: z.boolean().default(false),
+      secondary_button: buttonSchema,
+    })
+    .optional(),
+  // sidepeek_content: z
+  //   .object({
+  //     heading: z.string(),
+  //   })
+  //   .optional(),
   system: systemSchema,
 })
 
 export function transformTeaserCardBlock(
   card: typeof teaserCardBlockSchema._type
 ) {
+  console.log({ has_sidepeek_button: card.sidepeek_content })
   return {
     __typename: card.__typename,
     body_text: card.body_text,
@@ -68,8 +113,9 @@ export function transformTeaserCardBlock(
     secondaryButton: card.has_secondary_button
       ? card.secondary_button
       : undefined,
-    sidePeekButton: card.has_sidepeek_button
+    sidePeekButton: card.has_sidepeek_button ? card.sidepeek_button : undefined,
-      ? card.side_peek_button
+    sidePeekContent: card.has_sidepeek_button
+      ? card.sidepeek_content
       : undefined,
     image: card.image,
     system: card.system,
@@ -105,7 +151,7 @@ export const cardsGridSchema = z.object({
           })
         ),
       }),
-      layout: z.enum(["twoColumnGrid", "threeColumnGrid", "twoPlusOne"]),
+      layout: z.nativeEnum(CardsGridLayoutEnum),
       preamble: z.string().optional().default(""),
       theme: z.enum(["one", "two", "three"]).nullable(),
       title: z.string().optional().default(""),

server/routers/contentstack/schemas/blocks/utils/buttonLinkSchema.ts

@@ -20,6 +20,7 @@ export const buttonSchema = z
               pageLinks.accountPageSchema,
               pageLinks.contentPageSchema,
               pageLinks.loyaltyPageSchema,
+              pageLinks.hotelPageSchema,
             ])
             .transform((data) => {
               const link = pageLinks.transform(data)

types/components/teaserCard.ts

@@ -2,11 +2,12 @@ import { VariantProps } from "class-variance-authority"
 
 import { teaserCardVariants } from "@/components/TempDesignSystem/TeaserCard/variants"
 
-import { ImageVaultAsset } from "@/types/components/imageVault"
+import type { ImageVaultAsset } from "@/types/components/imageVault"
 import type { CardProps } from "@/components/TempDesignSystem/Card/card"
+import type { TeaserCard } from "../trpc/routers/contentstack/blocks"
 
 interface SidePeekButton {
-  title: string
+  call_to_action_text: string
 }
 
 export interface TeaserCardProps
@@ -16,6 +17,12 @@ export interface TeaserCardProps
   primaryButton?: CardProps["primaryButton"]
   secondaryButton?: CardProps["secondaryButton"]
   sidePeekButton?: SidePeekButton
+  sidePeekContent?: TeaserCard["sidepeek_content"]
   image?: ImageVaultAsset
   className?: string
 }
+
+export interface TeaserCardSidepeekProps {
+  button: SidePeekButton
+  data: NonNullable<TeaserCard["sidepeek_content"]>
+}

types/trpc/routers/contentstack/blocks.ts

@@ -1,6 +1,9 @@
 import { z } from "zod"
 
-import { cardsGridSchema } from "@/server/routers/contentstack/schemas/blocks/cardsGrid"
+import {
+  cardsGridSchema,
+  teaserCardBlockSchema,
+} from "@/server/routers/contentstack/schemas/blocks/cardsGrid"
 import { contentSchema } from "@/server/routers/contentstack/schemas/blocks/content"
 import { dynamicContentSchema } from "@/server/routers/contentstack/schemas/blocks/dynamicContent"
 import { shortcutsSchema } from "@/server/routers/contentstack/schemas/blocks/shortcuts"
@@ -8,6 +11,13 @@ import { tableSchema } from "@/server/routers/contentstack/schemas/blocks/table"
 import { textColsSchema } from "@/server/routers/contentstack/schemas/blocks/textCols"
 import { uspGridSchema } from "@/server/routers/contentstack/schemas/blocks/uspGrid"
 
+export enum CardsGridLayoutEnum {
+  TWO_COLUMNS = "twoColumnGrid",
+  THREE_COLUMNS = "threeColumnGrid",
+  TWO_PLUS_ONE = "twoPlusOne",
+}
+
+export interface TeaserCard extends z.output<typeof teaserCardBlockSchema> {}
 export interface CardsGrid extends z.output<typeof cardsGridSchema> {}
 export interface Content extends z.output<typeof contentSchema> {}
 export interface DynamicContent extends z.output<typeof dynamicContentSchema> {}