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

Merged in fix/SW-2790-room-picker-buttons (pull request #2667)

Browse Source 
fix(SW-2790): update ui room picker buttons

* fix(SW-2790): update ui room picker buttons

* fix(SW-2790


Approved-by: Matilda Landström
This commit is contained in:
Bianca Widstam
2025-08-20 06:38:18 +00:00
parent deaba8b5c4
commit aa7a7a8c2f
4 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/counter.module.css
View File

@@ -3,6 +3,7 @@
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
color: var(--Text-Interactive-Default);
} }
.counterBtn { .counterBtn {
width: 40px; width: 40px;

36
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Counter/index.tsx
View File

@@ -1,10 +1,10 @@
"use client" "use client"
import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import styles from "./counter.module.css" import styles from "./counter.module.css"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
type CounterProps = { type CounterProps = {
count: number count: number
@@ -23,33 +23,27 @@ export default function Counter({
}: CounterProps) { }: CounterProps) {
return ( return (
<div className={styles.counterContainer}> <div className={styles.counterContainer}>
<Button <IconButton
className={styles.counterBtn} className={styles.counterBtn}
intent="inverted"
onClick={handleOnDecrease} onClick={handleOnDecrease}
size="small" theme="Inverted"
theme="base" style="Elevated"
variant="icon" isDisabled={disableDecrease}
wrapping={true}
disabled={disableDecrease}
> >
<MaterialIcon icon="remove" color="CurrentColor" /> <MaterialIcon icon="remove" color="CurrentColor" />
</Button> </IconButton>
<Body color="baseTextHighContrast" textAlign="center"> <Typography variant="Body/Paragraph/mdRegular">
{count} <p>{count}</p>
</Body> </Typography>
<Button <IconButton
className={styles.counterBtn} className={styles.counterBtn}
onClick={handleOnIncrease} onClick={handleOnIncrease}
intent="inverted" theme="Inverted"
variant="icon" style="Elevated"
theme="base" isDisabled={disableIncrease}
wrapping={true}
size="small"
disabled={disableIncrease}
> >
<MaterialIcon icon="add" color="CurrentColor" /> <MaterialIcon icon="add" color="CurrentColor" />
</Button> </IconButton>
</div> </div>
) )
} }

54
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/Form.tsx
View File

@@ -5,7 +5,6 @@ import { useFormContext, useWatch } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Tooltip } from "@scandic-hotels/design-system/Tooltip" import { Tooltip } from "@scandic-hotels/design-system/Tooltip"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking"
@@ -16,6 +15,7 @@ import styles from "./guests-rooms-picker.module.css"
import type { GuestsRoom as TGuestsRoom } from ".." import type { GuestsRoom as TGuestsRoom } from ".."
import type { BookingWidgetSchema } from "../Client" import type { BookingWidgetSchema } from "../Client"
import { Button } from "@scandic-hotels/design-system/Button"
const MAX_ROOMS = 4 const MAX_ROOMS = 4
@@ -114,13 +114,13 @@ export default function GuestsRoomsPickerDialog({
{addRoomDisabledTextForSpecialRate ? ( {addRoomDisabledTextForSpecialRate ? (
<div className={styles.addRoomMobileContainer}> <div className={styles.addRoomMobileContainer}>
<Button <Button
intent="text" variant="Text"
variant="icon" color="Primary"
wrapping wrapping
theme="base"
fullWidth
onPress={handleAddRoom} onPress={handleAddRoom}
disabled isDisabled
size="Small"
typography="Body/Supporting text (caption)/smBold"
> >
<MaterialIcon icon="add" color="CurrentColor" /> <MaterialIcon icon="add" color="CurrentColor" />
{addRoomLabel} {addRoomLabel}
@@ -147,12 +147,12 @@ export default function GuestsRoomsPickerDialog({
<div className={styles.addRoomMobileContainer}> <div className={styles.addRoomMobileContainer}>
<Button <Button
className={styles.addRoomBtn} className={styles.addRoomBtn}
intent="text" variant="Text"
variant="icon"
wrapping wrapping
theme="base" color="Primary"
fullWidth
onPress={handleAddRoom} onPress={handleAddRoom}
size="Small"
typography="Body/Supporting text (caption)/smBold"
> >
<MaterialIcon icon="add" color="CurrentColor" /> <MaterialIcon icon="add" color="CurrentColor" />
{addRoomLabel} {addRoomLabel}
@@ -171,12 +171,13 @@ export default function GuestsRoomsPickerDialog({
arrow="left" arrow="left"
> >
<Button <Button
intent="text" variant="Text"
variant="icon"
wrapping wrapping
theme="base" color="Primary"
disabled isDisabled
size="Small"
onPress={handleAddRoom} onPress={handleAddRoom}
typography="Body/Supporting text (caption)/smBold"
> >
<MaterialIcon icon="add_circle" color="CurrentColor" /> <MaterialIcon icon="add_circle" color="CurrentColor" />
{addRoomLabel} {addRoomLabel}
@@ -188,11 +189,12 @@ export default function GuestsRoomsPickerDialog({
<div className={styles.hideOnMobile}> <div className={styles.hideOnMobile}>
<Button <Button
className={styles.addRoomBtn} className={styles.addRoomBtn}
intent="text" variant="Text"
variant="icon"
wrapping wrapping
theme="base" color="Primary"
size="Small"
onPress={handleAddRoom} onPress={handleAddRoom}
typography="Body/Supporting text (caption)/smBold"
> >
<MaterialIcon icon="add_circle" color="CurrentColor" /> <MaterialIcon icon="add_circle" color="CurrentColor" />
{addRoomLabel} {addRoomLabel}
@@ -202,21 +204,23 @@ export default function GuestsRoomsPickerDialog({
)} )}
<Button <Button
onPress={handleClose} onPress={handleClose}
disabled={isInvalid} isDisabled={isInvalid}
className={styles.hideOnDesktop} className={styles.hideOnDesktop}
intent="tertiary" variant="Tertiary"
theme="base" color="Primary"
size="large" size="Small"
typography="Body/Supporting text (caption)/smBold"
> >
{doneLabel} {doneLabel}
</Button> </Button>
<Button <Button
onPress={handleClose} onPress={handleClose}
disabled={isInvalid} isDisabled={isInvalid}
className={styles.hideOnMobile} className={styles.hideOnMobile}
intent="tertiary" variant="Tertiary"
theme="base" color="Primary"
size="small" size="Small"
typography="Body/Supporting text (caption)/smBold"
> >
{doneLabel} {doneLabel}
</Button> </Button>

3
packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
View File

@@ -236,7 +236,8 @@
.footer button { .footer button {
margin-left: auto; margin-left: auto;
width: 125px; width: auto;
min-width: 125px;
} }
.footer .hideOnDesktop, .footer .hideOnDesktop,