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

feat(SW-350): Update design for booking widget

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-02 15:36:58 +02:00
parent e8027be2e8
commit d58c77493a
19 changed files with 162 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -5,11 +5,14 @@ import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import DatePicker from "@/components/DatePicker"
import { InfoCircleIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Search from "./Search"
import styles from "./formContent.module.css"
import tempStyles from "./Search/search.module.css" // TODO: Remove this when Rooms and Voucher is implemented
import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"
@@ -21,6 +24,7 @@ export default function FormContent({
const rooms = intl.formatMessage({ id: "Guests & Rooms" })
const vouchers = intl.formatMessage({ id: "Code / Voucher" })
const addVouchers = intl.formatMessage({ id: "Add code" })
const bonus = intl.formatMessage({ id: "Use bonus cheque" })
const reward = intl.formatMessage({ id: "Book reward night" })
@@ -44,22 +48,36 @@ export default function FormContent({
<Caption color="red" textTransform="bold">
{rooms}
</Caption>
<input type="text" placeholder={rooms} />
<Body asChild>
<input type="text" placeholder={rooms} className={tempStyles.input} />
</Body>
</div>
<div className={styles.vouchers}>
<Caption color="uiTextMediumContrast" textTransform="bold">
{vouchers}
</Caption>
<input type="text" placeholder={vouchers} />
<div className={styles.vouchersHeader}>
<Caption color="disabled" textTransform="bold">
{vouchers}
</Caption>
<InfoCircleIcon color="white" className={styles.infoIcon} />
</div>
<Body asChild>
<input
type="text"
placeholder={addVouchers}
className={tempStyles.input}
disabled
/>
</Body>
</div>
<div className={styles.options}>
<label className={styles.option}>
<input type="checkbox" />
<Caption color="textMediumContrast">{bonus}</Caption>
<input type="checkbox" disabled className={styles.checkbox} />
<Caption color="disabled">{bonus}</Caption>
<InfoCircleIcon color="white" className={styles.infoIcon} />
</label>
<label className={styles.option}>
<input type="checkbox" />
<Caption color="textMediumContrast">{reward}</Caption>
<input type="checkbox" disabled className={styles.checkbox} />
<Caption color="disabled">{reward}</Caption>
<InfoCircleIcon color="white" className={styles.infoIcon} />
</label>
</div>
</div>