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

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>
-        {!!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} data={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>
   )