scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SW-1182 Updated popover to modal

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2025-01-07 16:11:40 +01:00
parent b973882c5c
commit 61bd3a2c3e
8 changed files with 66 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
View File

@@ -77,24 +77,15 @@ input[type="radio"]:checked + .card .checkIcon {
margin: 0 auto var(--Spacing-x2);
}
.popover {
background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-Medium);
left: 0px;
max-height: 400px;
padding: var(--Spacing-x2);
top: calc(55px + var(--Spacing-x1));
width: 100%;
box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
}
.popover section:focus-visible {
.modal section:focus-visible {
outline: none;
}
.popover .popoverText {
margin-bottom: var(--Spacing-x-half);
.terms {
margin-top: var(--Spacing-x3);
margin-bottom: var(--Spacing-x3);
}
.popover .popoverHeading {
.termsText:nth-child(n) {
display: flex;
align-items: center;
margin-bottom: var(--Spacing-x1);
font-weight: 600; /* TODO: Remove when this is updated in Design system */
}

57
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
View File

@@ -5,10 +5,12 @@ import { useEffect, useRef } from "react"
import { useIntl } from "react-intl"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Label from "@/components/TempDesignSystem/Form/Label"
import Popover from "@/components/TempDesignSystem/Popover"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Modal from "../../../Modal/index"
import { RATE_CARD_EQUAL_HEIGHT_CLASS } from "../utils"
import PriceTable from "./PriceList"
@@ -116,33 +118,36 @@ export default function FlexibilityOption({
/>
<div className={`${styles.card} ${RATE_CARD_EQUAL_HEIGHT_CLASS}`}>
<div className={styles.header}>
<Popover
placement="bottom left"
triggerContent={
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
/>
<Modal
trigger={
<Button intent="text">
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
/>
</Button>
}
title={name}
subtitle={paymentTerm}
>
<Caption
color="uiTextHighContrast"
type="bold"
className={styles.popoverHeading}
>
{name}
</Caption>
{priceInformation?.map((info) => (
<Caption
key={info}
color="uiTextHighContrast"
className={styles.popoverText}
>
{info}
</Caption>
))}
</Popover>
<div className={styles.terms}>
{priceInformation?.map((info) => (
<Body
key={info}
color="uiTextHighContrast"
className={styles.termsText}
>
<CheckIcon
color="uiSemanticSuccess"
width={20}
height={20}
></CheckIcon>
{info}
</Body>
))}
</div>
</Modal>
<div className={styles.priceType}>
<Caption color="uiTextHighContrast">{name}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>