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

feat(SW-240): add basic styling

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-13 14:13:02 +02:00
parent a3602b285b
commit 8c339fa593
10 changed files with 125 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
components/BookingWidget/bookingWidget.module.css
View File

@@ -1,29 +1,55 @@
.container {
border-top: 1px solid var(--Base-Border-Subtle);
/* display: none; */
}
.form {
display: flex;
justify-content: space-between;
max-width: 1432px;
padding: var(--Spacing-x2) var(--Spacing-x5);
}
.input {
display: flex;
gap: var(--Spacing-x2);
width: 100%;
max-width: 1250px;
}
.button {
width: 118px;
justify-content: center;
}
.bodyFontSize {
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
}
.where {
width: 100%;
max-width: 280px;
height: 100%;
max-height: 46px;
}
.when {
.when,
.rooms {
width: 100%;
max-width: 240px;
}
.vouchers {
width: 100%;
max-width: 200px;
}
.options {
display: flex;
flex-direction: column;
width: 100%;
max-width: 158px;
}
/**
* Update the styles after mobile UX is ready
*/

71
components/BookingWidget/index.tsx
View File

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import Button from "../TempDesignSystem/Button"
import Body from "../TempDesignSystem/Text/Body"
import { bookingWidgetSchema } from "./schema"
import styles from "./bookingWidget.module.css"
@@ -13,7 +14,7 @@ import styles from "./bookingWidget.module.css"
import { type BookingWidgetSchema } from "@/types/components/bookingWidget"
export function BookingWidget() {
const { formatMessage } = useIntl()
const intl = useIntl()
const methods = useForm<BookingWidgetSchema>({
defaultValues: {
@@ -54,17 +55,75 @@ export function BookingWidget() {
<FormProvider {...methods}>
<div className={styles.input}>
<div className={styles.where}>
{formatMessage({ id: "Where to" })}
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Where to" })}
</Body>
</div>
<div className={styles.when}>
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "When" })}
</Body>
</div>
<div className={styles.when}>{formatMessage({ id: "When" })}</div>
<div className={styles.rooms}>
{formatMessage({ id: "Rooms & Guests" })}
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Rooms & Guests" })}
</Body>
</div>
<div className={styles.vouchers}>
{formatMessage({ id: "Booking codes and vouchers" })}
<Body
color="textMediumContrast"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Booking codes and vouchers" })}
</Body>
</div>
<div className={styles.options}>
<div>
<Body
color="textMediumContrast"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Use bonus cheque" })}
</Body>
</div>
<div>
<Body
color="textMediumContrast"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Book reward night" })}
</Body>
</div>
</div>
</div>
<Button type="submit">Search</Button>
<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>
</FormProvider>
</form>
</div>

2
components/TempDesignSystem/Text/Body/body.module.css
View File

@@ -63,7 +63,7 @@
}
.textMediumContrast {
color: var(--Base-Text-UI-Medium-contrast);
color: var(--UI-Text-Medium-contrast);
}
.white {