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;
align-items: center;
gap: 20px;
color: var(--Text-Interactive-Default);
}
.counterBtn {
width: 40px;

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

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