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

feat: SW-276 Updated UI as per design

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2024-10-14 08:50:55 +02:00
parent b8f7f91fb4
commit cefed89ae5
9 changed files with 97 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/GuestsRoomsPicker/AdultSelector/adult-selector.module.css
View File

@@ -3,13 +3,3 @@
justify-content: space-between;
align-items: center;
}
.counterContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.counterBtn {
width: 40px;
height: 40px;
}

49
components/GuestsRoomsPicker/AdultSelector/index.tsx
View File

@@ -5,11 +5,10 @@ import { useIntl } from "react-intl"
import { useGuestsRoomsStore } from "@/stores/guests-rooms"
import { MinusIcon, PlusIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Counter from "../Counter"
import styles from "./adult-selector.module.css"
import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
@@ -60,39 +59,17 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
<Caption color="uiTextHighContrast" textTransform="bold">
{adultsLabel}
</Caption>
<div className={styles.counterContainer}>
<Button
className={styles.counterBtn}
intent="elevated"
onClick={() => {
decreaseAdultsCount(roomIndex)
}}
size="small"
theme="base"
variant="icon"
wrapping={true}
disabled={adults == 1}
>
<MinusIcon color="burgundy" />
</Button>
<Body color="textHighContrast" textAlign="center">
{adults}
</Body>
<Button
className={styles.counterBtn}
onClick={() => {
increaseAdultsCount(roomIndex)
}}
intent="elevated"
variant="icon"
theme="base"
wrapping={true}
size="small"
disabled={adults == 6}
>
<PlusIcon color="burgundy" />
</Button>
</div>
<Counter
count={adults}
handleOnDecrease={() => {
decreaseAdultsCount(roomIndex)
}}
handleOnIncrease={() => {
increaseAdultsCount(roomIndex)
}}
disableDecrease={adults == 1}
disableIncrease={adults == 6}
/>
</section>
)
}

11
components/GuestsRoomsPicker/ChildSelector/child-selector.module.css
View File

@@ -3,19 +3,10 @@
justify-content: space-between;
align-items: center;
}
.captionBold {
font-weight: 600;
}
.counterContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.counterBtn {
width: 40px;
height: 40px;
}
.childInfoContainer {
display: grid;

50
components/GuestsRoomsPicker/ChildSelector/index.tsx
View File

@@ -5,11 +5,9 @@ import { useIntl } from "react-intl"
import { useGuestsRoomsStore } from "@/stores/guests-rooms"
import { MinusIcon, PlusIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Counter from "../Counter"
import ChildInfoSelector from "./ChildInfoSelector"
import styles from "./child-selector.module.css"
@@ -34,7 +32,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
age: -1,
bed: -1,
})
trigger()
trigger("rooms")
}
}
function decreaseChildrenCount(roomIndex: number) {
@@ -51,39 +49,17 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
<Caption color="uiTextHighContrast" textTransform="bold">
{childrenLabel}
</Caption>
<div className={styles.counterContainer}>
<Button
className={styles.counterBtn}
intent="elevated"
onClick={() => {
decreaseChildrenCount(roomIndex)
}}
size="small"
theme="base"
variant="icon"
wrapping={true}
disabled={children.length == 0}
>
<MinusIcon color="burgundy" />
</Button>
<Body color="textHighContrast" textAlign="center">
{children.length}
</Body>
<Button
className={styles.counterBtn}
onClick={() => {
increaseChildrenCount(roomIndex)
}}
intent="elevated"
variant="icon"
theme="base"
wrapping={true}
size="small"
disabled={children.length == 5}
>
<PlusIcon color="burgundy" />
</Button>
</div>
<Counter
count={children.length}
handleOnDecrease={() => {
decreaseChildrenCount(roomIndex)
}}
handleOnIncrease={() => {
increaseChildrenCount(roomIndex)
}}
disableDecrease={children.length == 0}
disableIncrease={children.length == 5}
/>
</section>
{children.map((child, index) => (
<ChildInfoSelector

13
components/GuestsRoomsPicker/Counter/counter.module.css Normal file
View File

@@ -0,0 +1,13 @@
.counterContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.counterBtn {
width: 40px;
height: 40px;
}
.counterBtn:not([disabled]) {
box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
}

49
components/GuestsRoomsPicker/Counter/index.tsx Normal file
View File

@@ -0,0 +1,49 @@
"use client"
import { MinusIcon, PlusIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./counter.module.css"
import { CounterProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
export default function Counter({
count,
handleOnIncrease,
handleOnDecrease,
disableIncrease,
disableDecrease,
}: CounterProps) {
return (
<div className={styles.counterContainer}>
<Button
className={styles.counterBtn}
intent="inverted"
onClick={handleOnDecrease}
size="small"
theme="base"
variant="icon"
wrapping={true}
disabled={disableDecrease}
>
<MinusIcon color="burgundy" />
</Button>
<Body color="textHighContrast" textAlign="center">
{count}
</Body>
<Button
className={styles.counterBtn}
onClick={handleOnIncrease}
intent="inverted"
variant="icon"
theme="base"
wrapping={true}
size="small"
disabled={disableIncrease}
>
<PlusIcon color="burgundy" />
</Button>
</div>
)
}

6
components/TempDesignSystem/Button/button.module.css
View File

@@ -56,12 +56,6 @@ a.text {
outline: none;
}
.elevated,
a.elevated {
border: none;
box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
}
/* VARIANTS */
.default,
a.default {

1
components/TempDesignSystem/Button/variants.ts
View File

@@ -10,7 +10,6 @@ export const buttonVariants = cva(styles.btn, {
secondary: styles.secondary,
tertiary: styles.tertiary,
text: styles.text,
elevated: styles.elevated,
},
size: {
small: styles.small,

8
types/components/bookingWidget/guestsRoomsPicker.ts
View File

@@ -34,3 +34,11 @@ export type ChildInfoSelectorProps = {
index: number
roomIndex: number
}
export interface CounterProps {
count: number
handleOnIncrease: () => void
handleOnDecrease: () => void
disableIncrease: boolean
disableDecrease: boolean
}