feat(SW-612): Add popover component

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -11,6 +11,7 @@ import { ArrowRightIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
+import Popover from "@/components/TempDesignSystem/Popover"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -178,9 +179,23 @@ export default function Summary({ showMemberPrice, room }: SummaryProps) {
           <Caption color="uiTextMediumContrast">
             {room.cancellationText}
           </Caption>
-          <Link color="burgundy" href="#" variant="underscored" size="small">
-            {intl.formatMessage({ id: "Rate details" })}
-          </Link>
+          <Popover
+            placement={"bottom left"}
+            triggerContent={
+              <Caption color="burgundy" type="underline">
+                {intl.formatMessage({ id: "Rate details" })}
+              </Caption>
+            }
+          >
+            <aside className={styles.rateDetailsPopover}>
+              <header>
+                <Caption type={"bold"}>{room.cancellationText}</Caption>
+              </header>
+              {room.rateDetails?.map((detail, idx) => (
+                <Caption key={`rateDetails-${idx}`}>{detail}</Caption>
+              ))}
+            </aside>
+          </Popover>
         </div>
         {room.packages
           ? room.packages.map((roomPackage) => (

components/HotelReservation/EnterDetails/Summary/summary.module.css

@@ -41,6 +41,13 @@
   gap: var(--Spacing-x-one-and-half);
 }
 
+.rateDetailsPopover {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  max-width: 360px;
+}
+
 .entry {
   display: flex;
   gap: var(--Spacing-x-half);
@@ -50,6 +57,7 @@
 .entry > :last-child {
   justify-items: flex-end;
 }
+
 .total {
   display: flex;
   flex-direction: column;