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

fix(SW-451): Fixed some of the ui comments

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-09 10:38:45 +01:00
parent 61027acd0d
commit 031c0f71b8
10 changed files with 102 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/HotelReservation/SelectRate/RoomFilter/index.tsx
View File

@@ -6,7 +6,7 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { z } from "zod"
import { InfoCircleIcon } from "@/components/Icons"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -114,7 +114,7 @@ export default function RoomFilter({
/>
))}
<Tooltip text={tooltipText} position="bottom" arrow="right">
<InfoCircleIcon className={styles.infoIcon} />
<InfoCircleIcon color="uiTextPlaceholder" />
</Tooltip>
</div>
</form>

5
components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
View File

@@ -12,11 +12,6 @@
align-items: center;
}
.roomsFilter .infoIcon,
.roomsFilter .infoIcon path {
stroke: var(--UI-Text-Medium-contrast);
fill: transparent;
}
.filterInfo {
display: flex;
flex-direction: row;

5
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
View File

@@ -1,6 +1,11 @@
.priceList {
margin: 0;
}
.priceRow {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: var(--Spacing-x-quarter) 0;
}

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

@@ -3,6 +3,7 @@
border-radius: var(--Corner-radius-Large);
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
background-color: var(--Base-Surface-Secondary-light-Normal);
border: 1px solid var(--Base-Surface-Secondary-light-Normal);
position: relative;
display: flex;
flex-direction: column;
@@ -22,6 +23,13 @@
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.checkIcon {
width: 24px;
height: 24px;
border-radius: 100px;
background-color: var(--UI-Input-Controls-Fill-Selected);
border: 2px solid var(--Base-Border-Inverted);
justify-content: center;
align-items: center;
display: none;
}
input[type="radio"]:checked + .card {
@@ -29,7 +37,7 @@ input[type="radio"]:checked + .card {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
input[type="radio"]:checked + .card .checkIcon {
display: block;
display: flex;
position: absolute;
top: -10px;
right: -10px;
@@ -40,12 +48,6 @@ input[type="radio"]:checked + .card .checkIcon {
gap: var(--Spacing-x-half);
}
.header .infoIcon,
.header .infoIcon path {
stroke: var(--UI-Text-Medium-contrast);
fill: transparent;
}
.button {
background: none;
border: none;
@@ -53,7 +55,7 @@ input[type="radio"]:checked + .card .checkIcon {
grid-area: chevron;
height: 100%;
justify-self: flex-end;
padding: 0;
padding: 1px 0 0 0;
}
.popover {

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

@@ -1,8 +1,8 @@
"use client"
import { useState } from "react"
import { useRef, useState } from "react"
import { Button, DialogTrigger } from "react-aria-components"
import { CheckCircleIcon, InfoCircleIcon } from "@/components/Icons"
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import PricePopover from "./Popover"
@@ -25,6 +25,7 @@ export default function FlexibilityOption({
}: FlexibilityOptionProps) {
const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
const [isPopoverOpen, setIsPopoverOpen] = useState(false)
let triggerRef = useRef<HTMLButtonElement>(null)
function setRef(node: Element | null) {
if (node) {
@@ -36,7 +37,7 @@ export default function FlexibilityOption({
return (
<div className={styles.disabledCard}>
<div className={styles.header}>
<InfoCircleIcon className={styles.infoIcon} />
<InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
<Caption color="disabled">{name}</Caption>
<Caption color="disabled">({paymentTerm})</Caption>
</div>
@@ -59,6 +60,13 @@ export default function FlexibilityOption({
handleSelectRate(rate)
}
function togglePopover() {
console.log("Toggle Popover called")
setIsPopoverOpen((prevState) => !prevState)
}
console.log(isPopoverOpen)
return (
<label>
<input
@@ -69,48 +77,52 @@ export default function FlexibilityOption({
/>
<div className={styles.card}>
<div className={styles.header} ref={setRef}>
<DialogTrigger>
<Button
aria-label="Help"
className={styles.button}
onPress={() => setIsPopoverOpen(true)}
>
<InfoCircleIcon className={styles.infoIcon} />
</Button>
<PricePopover
placement="bottom"
className={styles.popover}
isNonModal
shouldFlip={false}
shouldUpdatePosition={false}
/**
* react-aria uses portals to render Popover in body
* unless otherwise specified. We need it to be contained
* by this component to both access css variables assigned
* on the container as well as to not overflow it at any time.
*/
UNSTABLE_portalContainer={rootDiv}
isOpen={isPopoverOpen}
onOpenChange={setIsPopoverOpen}
<Button
aria-label="Help"
className={styles.button}
onPress={togglePopover}
ref={triggerRef}
>
<InfoCircleIcon
width={16}
height={16}
color="uiTextMediumContrast"
/>
</Button>
<PricePopover
placement="bottom"
className={styles.popover}
isNonModal
shouldFlip={false}
shouldUpdatePosition={false}
/**
* react-aria uses portals to render Popover in body
* unless otherwise specified. We need it to be contained
* by this component to both access css variables assigned
* on the container as well as to not overflow it at any time.
*/
UNSTABLE_portalContainer={rootDiv}
triggerRef={triggerRef}
isOpen={isPopoverOpen}
onOpenChange={setIsPopoverOpen}
>
<Caption
color="uiTextHighContrast"
type="bold"
className={styles.popoverHeading}
>
{name}
</Caption>
{priceInformation?.map((info) => (
<Caption
key={info}
color="uiTextHighContrast"
type="bold"
className={styles.popoverHeading}
className={styles.popoverText}
>
{name}
{info}
</Caption>
{priceInformation?.map((info) => (
<Caption
key={info}
color="uiTextHighContrast"
className={styles.popoverText}
>
{info}
</Caption>
))}
</PricePopover>
</DialogTrigger>
))}
</PricePopover>
<Caption color="uiTextHighContrast">{name}</Caption>
<Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
</div>
@@ -119,13 +131,10 @@ export default function FlexibilityOption({
memberPrice={memberPrice}
petRoomPackage={petRoomPackage}
/>
<CheckCircleIcon
color="blue"
className={styles.checkIcon}
width={24}
height={24}
stroke="white"
/>
<div className={styles.checkIcon}>
<CheckIcon color="white" height="16" width="16" />
</div>
</div>
</label>
)

27
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -88,25 +88,30 @@ export default function RoomCard({
: `${roomSize?.min}-${roomSize?.max}`}
m²
</Caption>
{roomConfiguration.roomTypeCode && (
<ToggleSidePeek
hotelId={hotelId}
roomTypeCode={roomConfiguration.roomTypeCode}
/>
)}
<div className={styles.toggleSidePeek}>
{roomConfiguration.roomTypeCode && (
<ToggleSidePeek
hotelId={hotelId}
roomTypeCode={roomConfiguration.roomTypeCode}
/>
)}
</div>
</div>
<div className={styles.container}>
<div className={styles.roomDetails}>
<Subtitle className={styles.name} type="two">
{roomConfiguration.roomType}
</Subtitle>
{/* Out of scope for now
<Body>{descriptions?.short}</Body>
*/}
<Caption color="uiTextHighContrast" type="bold">
{intl.formatMessage({
id: "Breakfast selection in next step.",
})}
</Caption>
</div>
<Caption color="uiTextHighContrast">
{intl.formatMessage({
id: "Breakfast selection in next step.",
})}
</Caption>
<div className={styles.flexibilityOptions}>
{Object.entries(rates).map(([key, rate]) => (
<FlexibilityOption

9
components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
View File

@@ -27,24 +27,21 @@
padding-right: var(--Spacing-x1);
}
.specification .button {
.toggleSidePeek {
margin-left: auto;
padding: 0 0 0 var(--Spacing-x-half);
text-decoration: none;
}
.container {
padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
gap: var(--Spacing-x-one-and-half);
}
.roomDetails {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
margin-bottom: var(--Spacing-x2);
gap: var(--Spacing-x2);
}
.name {

8
components/Icons/InfoCircle.tsx
View File

@@ -12,14 +12,14 @@ export default function InfoCircleIcon({
<svg
className={classNames}
fill="none"
height="17"
viewBox="0 0 16 17"
width="16"
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M8.00833 11.75C8.18056 11.75 8.32778 11.6889 8.45 11.5667C8.57222 11.4444 8.63333 11.2972 8.63333 11.125V8.475C8.63333 8.30278 8.57222 8.15556 8.45 8.03333C8.32778 7.91111 8.18056 7.85 8.00833 7.85C7.83611 7.85 7.68889 7.91111 7.56667 8.03333C7.44444 8.15556 7.38333 8.30278 7.38333 8.475V11.125C7.38333 11.2972 7.44444 11.4444 7.56667 11.5667C7.68889 11.6889 7.83611 11.75 8.00833 11.75ZM7.99825 6.56667C8.17719 6.56667 8.32778 6.50614 8.45 6.38508C8.57222 6.26404 8.63333 6.11404 8.63333 5.93508C8.63333 5.75614 8.57281 5.60556 8.45175 5.48333C8.33071 5.36111 8.18071 5.3 8.00175 5.3C7.82281 5.3 7.67222 5.36053 7.55 5.48158C7.42778 5.60263 7.36667 5.75263 7.36667 5.93158C7.36667 6.11053 7.42719 6.26111 7.54825 6.38333C7.66929 6.50556 7.81929 6.56667 7.99825 6.56667ZM8 15C7.10103 15 6.25623 14.8291 5.46558 14.4873C4.67493 14.1455 3.98717 13.6816 3.4023 13.0956C2.81743 12.5097 2.35417 11.8217 2.0125 11.0319C1.67083 10.242 1.5 9.39806 1.5 8.5C1.5 7.60103 1.67091 6.75623 2.01272 5.96558C2.35453 5.17493 2.81842 4.48717 3.40438 3.9023C3.99035 3.31743 4.67826 2.85417 5.46812 2.5125C6.25798 2.17083 7.10194 2 8 2C8.89897 2 9.74377 2.17091 10.5344 2.51272C11.3251 2.85453 12.0128 3.31842 12.5977 3.90438C13.1826 4.49035 13.6458 5.17826 13.9875 5.96812C14.3292 6.75798 14.5 7.60194 14.5 8.5C14.5 9.39897 14.3291 10.2438 13.9873 11.0344C13.6455 11.8251 13.1816 12.5128 12.5956 13.0977C12.0097 13.6826 11.3217 14.1458 10.5319 14.4875C9.74202 14.8292 8.89806 15 8 15Z"
d="M10.0061 13.8958C10.1965 13.8958 10.3612 13.8274 10.5 13.6906C10.6389 13.5538 10.7084 13.3896 10.7084 13.1979V9.71873C10.7084 9.52706 10.6404 9.36283 10.5044 9.22602C10.3685 9.08922 10.2053 9.02081 10.0149 9.02081C9.82442 9.02081 9.65976 9.08922 9.52087 9.22602C9.38199 9.36283 9.31254 9.52706 9.31254 9.71873V13.1979C9.31254 13.3896 9.38052 13.5538 9.51648 13.6906C9.65245 13.8274 9.81564 13.8958 10.0061 13.8958ZM9.99346 7.58331C10.1923 7.58331 10.3612 7.51606 10.5 7.38156C10.6389 7.24706 10.7084 7.0804 10.7084 6.88156C10.7084 6.68273 10.6411 6.51387 10.5066 6.37498C10.3721 6.23609 10.2055 6.16665 10.0066 6.16665C9.80779 6.16665 9.63893 6.2339 9.50004 6.3684C9.36115 6.5029 9.29171 6.66956 9.29171 6.8684C9.29171 7.06723 9.35896 7.23609 9.49346 7.37498C9.62796 7.51387 9.79462 7.58331 9.99346 7.58331ZM10.0058 17.7916C8.9338 17.7916 7.92449 17.5884 6.97785 17.182C6.0312 16.7756 5.20275 16.2165 4.4925 15.5049C3.78225 14.7933 3.224 13.9649 2.81775 13.0199C2.4115 12.0748 2.20837 11.065 2.20837 9.99044C2.20837 8.91476 2.41159 7.90707 2.81802 6.96738C3.22445 6.02767 3.78348 5.20269 4.4951 4.49244C5.20673 3.78219 6.03508 3.22394 6.98017 2.81769C7.92523 2.41144 8.93504 2.20831 10.0096 2.20831C11.0853 2.20831 12.093 2.41153 13.0326 2.81796C13.9724 3.22439 14.7973 3.78342 15.5076 4.49504C16.2178 5.20667 16.7761 6.0334 17.1823 6.97523C17.5886 7.91705 17.7917 8.92338 17.7917 9.99423C17.7917 11.0662 17.5885 12.0755 17.1821 13.0222C16.7756 13.9688 16.2166 14.7973 15.505 15.5075C14.7934 16.2178 13.9666 16.776 13.0248 17.1823C12.083 17.5885 11.0766 17.7916 10.0058 17.7916ZM10 16.3958C11.7709 16.3958 13.2796 15.7725 14.5261 14.526C15.7726 13.2795 16.3959 11.7708 16.3959 9.99998C16.3959 8.22915 15.7726 6.72047 14.5261 5.47394C13.2796 4.22741 11.7709 3.60415 10 3.60415C8.22921 3.60415 6.72053 4.22741 5.474 5.47394C4.22747 6.72047 3.60421 8.22915 3.60421 9.99998C3.60421 11.7708 4.22747 13.2795 5.474 14.526C6.72053 15.7725 8.22921 16.3958 10 16.3958Z"
fill="#CD0921"
/>
</svg>

5
components/Icons/icon.module.css
View File

@@ -62,6 +62,11 @@
fill: var(--UI-Text-Medium-contrast);
}
.uiTextPlaceholder,
.uiTextPlaceholder * {
fill: var(--UI-Text-Placeholder);
}
.blue,
.blue * {
fill: var(--UI-Input-Controls-Fill-Selected);

1
components/Icons/variants.ts
View File

@@ -20,6 +20,7 @@ const config = {
white: styles.white,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextMediumContrast: styles.uiTextMediumContrast,
uiTextPlaceholder: styles.uiTextPlaceholder,
disabled: styles.disabled,
},
},