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

feat(SW-240): use caption instead of body

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-19 15:37:03 +02:00
parent 0bf2927e79
commit 121d3878af
6 changed files with 32 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,33 +8,29 @@
padding: var(--Spacing-x1) var(--Spacing-x0); padding: var(--Spacing-x1) var(--Spacing-x0);
} }
.fontSize {
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
}
.border {
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
}
.where { .where {
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
} }
.when, .when,
.rooms { .rooms {
width: 100%; width: 100%;
max-width: 240px; max-width: 240px;
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
} }
.vouchers { .vouchers {
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
} }
.options { .options {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
width: 100%; width: 100%;
max-width: 158px; max-width: 158px;
} }

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

@@ -1,7 +1,7 @@
"use client" "use client"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./formContent.module.css" import styles from "./formContent.module.css"
@@ -17,46 +17,36 @@ export default function FormContent() {
return ( return (
<div className={styles.input}> <div className={styles.input}>
<div className={`${styles.where} ${styles.border}`}> <div className={styles.where}>
<Body color="red" textTransform="bold" className={styles.fontSize}> <Caption color="red">{where}</Caption>
{where}
</Body>
<input type="text" placeholder={where} /> <input type="text" placeholder={where} />
</div> </div>
<div className={`${styles.when} ${styles.border}`}> <div className={styles.when}>
<Body color="red" textTransform="bold" className={styles.fontSize}> <Caption color="red" textTransform="bold">
{when} {when}
</Body> </Caption>
<input type="text" placeholder={when} /> <input type="text" placeholder={when} />
</div> </div>
<div className={`${styles.rooms} ${styles.border}`}> <div className={styles.rooms}>
<Body color="red" textTransform="bold" className={styles.fontSize}> <Caption color="red" textTransform="bold">
{rooms} {rooms}
</Body> </Caption>
<input type="text" placeholder={rooms} /> <input type="text" placeholder={rooms} />
</div> </div>
<div className={`${styles.vouchers} ${styles.border}`}> <div className={styles.vouchers}>
<Body <Caption color="textMediumContrast" textTransform="bold">
color="textMediumContrast"
textTransform="bold"
className={styles.fontSize}
>
{vouchers} {vouchers}
</Body> </Caption>
<input type="text" placeholder={vouchers} /> <input type="text" placeholder={vouchers} />
</div> </div>
<div className={styles.options}> <div className={styles.options}>
<div className={styles.option}> <div className={styles.option}>
<input type="checkbox" /> <input type="checkbox" />
<Body color="textMediumContrast" className={styles.fontSize}> <Caption color="textMediumContrast">{bonus}</Caption>
{bonus}
</Body>
</div> </div>
<div className={styles.option}> <div className={styles.option}>
<input type="checkbox" /> <input type="checkbox" />
<Body color="textMediumContrast" className={styles.fontSize}> <Caption color="textMediumContrast">{reward}</Caption>
{reward}
</Body>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,5 +1,6 @@
.section { .section {
display: flex; display: flex;
align-items: center;
max-width: 1432px; max-width: 1432px;
padding: var(--Spacing-x2) var(--Spacing-x5); padding: var(--Spacing-x2) var(--Spacing-x5);
} }
@@ -12,7 +13,3 @@
width: 118px; width: 118px;
justify-content: center; justify-content: center;
} }
.fontSize {
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
}

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

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption"
import FormContent from "./FormContent" import FormContent from "./FormContent"
import { bookingWidgetSchema } from "./schema" import { bookingWidgetSchema } from "./schema"
@@ -71,9 +71,9 @@ export default function Form() {
intent="primary" intent="primary"
className={styles.button} className={styles.button}
> >
<Body color="white" textTransform="bold" className={styles.fontSize}> <Caption color="white" textTransform="bold">
{intl.formatMessage({ id: "Find hotels" })} {intl.formatMessage({ id: "Find hotels" })}
</Body> </Caption>
</Button> </Button>
</section> </section>
) )

8
components/TempDesignSystem/Text/Caption/caption.module.css
View File

@@ -41,6 +41,14 @@
color: var(--UI-Text-Medium-contrast); color: var(--UI-Text-Medium-contrast);
} }
.red {
color: var(--Scandic-Brand-Scandic-Red);
}
.white {
color: var(--UI-Opacity-White-100);
}
.center { .center {
text-align: center; text-align: center;
} }

2
components/TempDesignSystem/Text/Caption/variants.ts
View File

@@ -9,6 +9,8 @@ const config = {
burgundy: styles.burgundy, burgundy: styles.burgundy,
pale: styles.pale, pale: styles.pale,
textMediumContrast: styles.textMediumContrast, textMediumContrast: styles.textMediumContrast,
red: styles.red,
white: styles.white,
}, },
textTransform: { textTransform: {
bold: styles.bold, bold: styles.bold,