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

feat(SW-240): add simple form

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-15 11:38:38 +02:00
parent 00a5465485
commit 608fe13004
4 changed files with 87 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/Forms/BookingWidget/FormContent/formContent.module.css
View File

@@ -5,11 +5,6 @@
max-width: 1250px; max-width: 1250px;
} }
.button {
width: 118px;
justify-content: center;
}
.bodyFontSize { .bodyFontSize {
font-size: var(--typography-Caption-Bold-Desktop-fontSize); font-size: var(--typography-Caption-Bold-Desktop-fontSize);
} }
@@ -19,9 +14,6 @@
} }
.where { .where {
display: flex;
gap: var(--Spacing-x-quarter);
flex-direction: column;
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;
} }
@@ -43,3 +35,7 @@
width: 100%; width: 100%;
max-width: 158px; max-width: 158px;
} }
.option {
display: flex;
}

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

@@ -2,7 +2,6 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./formContent.module.css" import styles from "./formContent.module.css"
@@ -16,75 +15,51 @@ export default function FormContent() {
const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" }) const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
const bonus = intl.formatMessage({ id: "Use bonus cheque" }) const bonus = intl.formatMessage({ id: "Use bonus cheque" })
const reward = intl.formatMessage({ id: "Book reward night" }) const reward = intl.formatMessage({ id: "Book reward night" })
const search = intl.formatMessage({ id: "Find hotels" })
return ( return (
<> <div className={styles.input}>
<div className={styles.input}> <div className={`${styles.where} ${styles.border}`}>
<div className={`${styles.where} ${styles.border}`}> <Body color="red" textTransform="bold" className={styles.bodyFontSize}>
<Body {where}
color="red" </Body>
textTransform="bold" <input placeholder={where} />
className={styles.bodyFontSize}
>
{where}
</Body>
</div>
<div className={`${styles.when} ${styles.border}`}>
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{when}
</Body>
</div>
<div className={`${styles.rooms} ${styles.border}`}>
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{rooms}
</Body>
</div>
<div className={`${styles.vouchers} ${styles.border}`}>
<Body
color="textMediumContrast"
textTransform="bold"
className={styles.bodyFontSize}
>
{vouchers}
</Body>
</div>
<div className={styles.options}>
<div>
<Body color="textMediumContrast" className={styles.bodyFontSize}>
{bonus}
</Body>
</div>
<div>
<Body color="textMediumContrast" className={styles.bodyFontSize}>
{reward}
</Body>
</div>
</div>
</div> </div>
<Button <div className={`${styles.when} ${styles.border}`}>
type="submit" <Body color="red" textTransform="bold" className={styles.bodyFontSize}>
size="small" {when}
theme="base" </Body>
intent="primary" <input placeholder={when} />
className={styles.button} </div>
> <div className={`${styles.rooms} ${styles.border}`}>
<Body color="red" textTransform="bold" className={styles.bodyFontSize}>
{rooms}
</Body>
<input placeholder={rooms} />
</div>
<div className={`${styles.vouchers} ${styles.border}`}>
<Body <Body
color="white" color="textMediumContrast"
textTransform="bold" textTransform="bold"
className={styles.bodyFontSize} className={styles.bodyFontSize}
> >
{search} {vouchers}
</Body> </Body>
</Button> <input placeholder={vouchers} />
</> </div>
<div className={styles.options}>
<div className={styles.option}>
<input type="checkbox" />
<Body color="textMediumContrast" className={styles.bodyFontSize}>
{bonus}
</Body>
</div>
<div className={styles.option}>
<input type="checkbox" />
<Body color="textMediumContrast" className={styles.bodyFontSize}>
{reward}
</Body>
</div>
</div>
</div>
) )
} }

17
components/Forms/BookingWidget/form.module.css
View File

@@ -1,7 +1,18 @@
.form { .section {
display: flex; display: flex;
justify-content: space-between;
width: 100%;
max-width: 1432px; max-width: 1432px;
padding: var(--Spacing-x2) var(--Spacing-x5); padding: var(--Spacing-x2) var(--Spacing-x5);
} }
.form {
width: 100%;
}
.button {
width: 118px;
justify-content: center;
}
.bodyFontSize {
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
}

40
components/Forms/BookingWidget/index.tsx
View File

@@ -1,9 +1,13 @@
"use client" "use client"
import { zodResolver } from "@hookform/resolvers/zod" import { zodResolver } from "@hookform/resolvers/zod"
import { FormProvider, useForm } from "react-hook-form" import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import FormContent from "./FormContent" import FormContent from "./FormContent"
import { bookingWidgetSchema } from "./schema" import { bookingWidgetSchema } from "./schema"
@@ -14,6 +18,7 @@ import { BookingWidgetSchema } from "@/types/components/bookingWidget"
const formId = "booking-widget" const formId = "booking-widget"
export default function Form() { export default function Form() {
const intl = useIntl()
const methods = useForm<BookingWidgetSchema>({ const methods = useForm<BookingWidgetSchema>({
defaultValues: { defaultValues: {
search: { search: {
@@ -48,14 +53,31 @@ export default function Form() {
} }
return ( return (
<form <section className={styles.section}>
onSubmit={methods.handleSubmit(onSubmit)} <form
className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}
id={formId} className={styles.form}
> id={formId}
<FormProvider {...methods}> >
<FormContent /> <FormProvider {...methods}>
</FormProvider> <FormContent />
</form> </FormProvider>
</form>
<Button
type="submit"
size="small"
theme="base"
intent="primary"
className={styles.button}
>
<Body
color="white"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Find hotels" })}
</Body>
</Button>
</section>
) )
} }