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; justify-content: space-between;
align-items: center; 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 { 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 Caption from "@/components/TempDesignSystem/Text/Caption"
import Counter from "../Counter"
import styles from "./adult-selector.module.css" import styles from "./adult-selector.module.css"
import { BedTypeEnum } from "@/types/components/bookingWidget/enums" import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
@@ -60,39 +59,17 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
<Caption color="uiTextHighContrast" textTransform="bold"> <Caption color="uiTextHighContrast" textTransform="bold">
{adultsLabel} {adultsLabel}
</Caption> </Caption>
<div className={styles.counterContainer}> <Counter
<Button count={adults}
className={styles.counterBtn} handleOnDecrease={() => {
intent="elevated" decreaseAdultsCount(roomIndex)
onClick={() => { }}
decreaseAdultsCount(roomIndex) handleOnIncrease={() => {
}} increaseAdultsCount(roomIndex)
size="small" }}
theme="base" disableDecrease={adults == 1}
variant="icon" disableIncrease={adults == 6}
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>
</section> </section>
) )
} }

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

@@ -3,19 +3,10 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.captionBold { .captionBold {
font-weight: 600; font-weight: 600;
} }
.counterContainer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
}
.counterBtn {
width: 40px;
height: 40px;
}
.childInfoContainer { .childInfoContainer {
display: grid; 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 { 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 Caption from "@/components/TempDesignSystem/Text/Caption"
import Counter from "../Counter"
import ChildInfoSelector from "./ChildInfoSelector" import ChildInfoSelector from "./ChildInfoSelector"
import styles from "./child-selector.module.css" import styles from "./child-selector.module.css"
@@ -34,7 +32,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
age: -1, age: -1,
bed: -1, bed: -1,
}) })
trigger() trigger("rooms")
} }
} }
function decreaseChildrenCount(roomIndex: number) { function decreaseChildrenCount(roomIndex: number) {
@@ -51,39 +49,17 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
<Caption color="uiTextHighContrast" textTransform="bold"> <Caption color="uiTextHighContrast" textTransform="bold">
{childrenLabel} {childrenLabel}
</Caption> </Caption>
<div className={styles.counterContainer}> <Counter
<Button count={children.length}
className={styles.counterBtn} handleOnDecrease={() => {
intent="elevated" decreaseChildrenCount(roomIndex)
onClick={() => { }}
decreaseChildrenCount(roomIndex) handleOnIncrease={() => {
}} increaseChildrenCount(roomIndex)
size="small" }}
theme="base" disableDecrease={children.length == 0}
variant="icon" disableIncrease={children.length == 5}
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>
</section> </section>
{children.map((child, index) => ( {children.map((child, index) => (
<ChildInfoSelector <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; outline: none;
} }
.elevated,
a.elevated {
border: none;
box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
}
/* VARIANTS */ /* VARIANTS */
.default, .default,
a.default { a.default {

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

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

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

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