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