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
components/Forms/BookingWidget/FormContent/Search/search.module.css
+5
View File
@@ -46,3 +46,8 @@
.input::-webkit-search-cancel-button {
display: none;
}
.input:disabled,
.input:disabled::placeholder {
color: var(--Base-Text-Disabled);
}
components/Forms/BookingWidget/FormContent/formContent.module.css
+45 -6
View File
@@ -1,5 +1,4 @@
.options {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
@@ -7,9 +6,30 @@
.option {
display: flex;
gap: var(--Spacing-x-one-and-half);
align-items: center;
}
@media screen and (max-width: 1366px) {
.infoIcon {
stroke: var(--Base-Text-Disabled);
}
.vouchers,
.options {
display: none;
}
.vouchersHeader {
display: flex;
gap: var(--Spacing-x-one-and-half);
}
.checkbox {
width: var(--Spacing-x3);
height: var(--Spacing-x3);
}
@media screen and (max-width: 766px) {
.input {
display: grid;
gap: var(--Spacing-x2);
@@ -39,7 +59,7 @@
}
}
@media screen and (min-width: 1367px) {
@media screen and (min-width: 767px) {
.input {
display: flex;
gap: var(--Spacing-x2);
@@ -49,7 +69,6 @@
.vouchers,
.when,
.where {
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
width: 100%;
}
@@ -59,14 +78,20 @@
}
.rooms,
.vouchers,
.when {
max-width: 240px;
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
border-radius: var(--Corner-radius-Small);
}
.when:hover,
.rooms:hover,
.rooms:has(.input:active, .input:focus, .input:focus-within) {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.vouchers {
max-width: 200px;
padding: var(--Spacing-x1) 0;
}
.where {
@@ -75,6 +100,20 @@
}
.options {
max-width: 158px;
max-width: 190px;
}
}
@media screen and (min-width: 1367px) {
.vouchers {
display: block;
}
.options {
display: flex;
}
.vouchers:hover,
.option:hover {
cursor: not-allowed;
}
}
components/Forms/BookingWidget/FormContent/index.tsx
+27 -9
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>
components/Forms/BookingWidget/form.module.css
+12 -2
View File
@@ -12,7 +12,7 @@
width: 100%;
}
@media screen and (max-width: 1366px) {
@media screen and (max-width: 766px) {
.form {
align-self: flex-start;
}
@@ -24,13 +24,23 @@
}
}
@media screen and (min-width: 1367px) {
@media screen and (min-width: 767px) {
.section {
display: flex;
padding: var(--Spacing-x1) var(--Spacing-x5);
}
.button {
justify-content: center;
width: 118px;
}
.default {
border-radius: var(--Corner-radius-Medium);
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
var(--Spacing-x-one-and-half) var(--Spacing-x1);
}
.full {
padding: var(--Spacing-x1) var(--Spacing-x5);
}
}
components/Forms/BookingWidget/index.tsx
+7 -3
View File
@@ -7,6 +7,7 @@ import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import FormContent from "./FormContent"
import { bookingWidgetVariants } from "./variants"
import styles from "./form.module.css"
@@ -15,10 +16,14 @@ import type { BookingWidgetFormProps } from "@/types/components/form/bookingwidg
const formId = "booking-widget"
export default function Form({ locations }: BookingWidgetFormProps) {
export default function Form({ locations, type }: BookingWidgetFormProps) {
const intl = useIntl()
const router = useRouter()
const classNames = bookingWidgetVariants({
type,
})
const { formState, handleSubmit, register } =
useFormContext<BookingWidgetSchema>()
@@ -31,7 +36,7 @@ export default function Form({ locations }: BookingWidgetFormProps) {
}
return (
<section className={styles.section}>
<section className={classNames}>
<form
onSubmit={handleSubmit(onSubmit)}
className={styles.form}
@@ -45,7 +50,6 @@ export default function Form({ locations }: BookingWidgetFormProps) {
disabled={!formState.isValid}
form={formId}
intent="primary"
size="small"
theme="base"
type="submit"
>
components/Forms/BookingWidget/variants.ts
+15
View File
@@ -0,0 +1,15 @@
import { cva } from "class-variance-authority"
import styles from "./form.module.css"
export const bookingWidgetVariants = cva(styles.section, {
variants: {
type: {
default: styles.default,
full: styles.full,
},
},
defaultVariants: {
type: "default",
},
})