Merge branch 'develop' into feature/sw-561-design-fixes-2

components/Blocks/CardsGrid.tsx

@@ -6,12 +6,15 @@ import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"
 import TeaserCard from "@/components/TempDesignSystem/TeaserCard"
 
 import type { CardsGridProps } from "@/types/components/blocks/cardsGrid"
-import { CardsGridEnum } from "@/types/enums/cardsGrid"
+import { CardsGridEnum, CardsGridLayoutEnum } from "@/types/enums/cardsGrid"
 
 export default function CardsGrid({
   cards_grid,
   firstItem = false,
 }: CardsGridProps) {
+  const columns =
+    cards_grid.layout === CardsGridLayoutEnum.THREE_COLUMNS ? 3 : 2
+
   return (
     <SectionContainer>
       <SectionHeader
@@ -19,7 +22,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 +46,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/Forms/Register/index.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { signupTerms } from "@/constants/routes/signup"
+import { privacyPolicy } from "@/constants/currentWebHrefs"
 
 import { registerUser } from "@/actions/registerUser"
 import Button from "@/components/TempDesignSystem/Button"
@@ -163,7 +163,7 @@ export default function Form({ link, subtitle, title }: RegisterFormProps) {
                   variant="underscored"
                   color="peach80"
                   target="_blank"
-                  href={signupTerms[lang]}
+                  href={privacyPolicy[lang]}
                 >
                   {intl.formatMessage({ id: "Scandic's Privacy Policy." })}
                 </Link>

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

@@ -21,7 +21,7 @@ import {
   ChevronRightIcon,
   ChevronRightSmallIcon,
   CloseIcon,
-  CloseLarge,
+  CloseLargeIcon,
   CoffeeIcon,
   ConciergeIcon,
   CrossCircle,
@@ -103,7 +103,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
         >
@@ -82,7 +85,7 @@ function SidePeek({
                     intent="text"
                     onPress={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 type { TeaserCardSidepeekProps } from "@/types/components/teaserCard"
+
+export default function TeaserCardSidepeek({
+  button,
+  sidePeekContent,
+}: TeaserCardSidepeekProps) {
+  const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
+  const { heading, content, primary_button, secondary_button } = sidePeekContent
+
+  return (
+    <>
+      <Button
+        onPress={() => 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,14 @@ export default function TeaserCard({
         <Subtitle textAlign="left" type="two" color="black">
           {title}
         </Subtitle>
-        <Body color="black">{description}</Body>
-        {!!sidePeekButton ? (
-          <Button
-            // onClick={() => {
-            //   // TODO: Implement sidePeek functionality once SW-341 is merged.
-            // }}
-            theme="base"
-            variant="icon"
-            intent="text"
-            size="small"
-            className={styles.sidePeekCTA}
-          >
-            {sidePeekButton.title}
-            <ChevronRightIcon />
-          </Button>
+        <Body color="black" className={styles.body}>
+          {description}
+        </Body>
+        {sidePeekButton && sidePeekContent ? (
+          <TeaserCardSidepeek
+            button={sidePeekButton}
+            sidePeekContent={sidePeekContent}
+          />
         ) : (
           <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>
   )