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);
}
.fontSize {
font-size: var(--typography-Caption-Bold-Desktop-fontSize);
}
.border {
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
}
.where {
width: 100%;
max-width: 280px;
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
}
.when,
.rooms {
width: 100%;
max-width: 240px;
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
}
.vouchers {
width: 100%;
max-width: 200px;
border-right: 1px solid var(--Base-Surface-Subtle-Normal);
}
.options {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
max-width: 158px;
}

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

@@ -1,7 +1,7 @@
"use client"
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"
@@ -17,46 +17,36 @@ export default function FormContent() {
return (
<div className={styles.input}>
<div className={`${styles.where} ${styles.border}`}>
<Body color="red" textTransform="bold" className={styles.fontSize}>
{where}
</Body>
<div className={styles.where}>
<Caption color="red">{where}</Caption>
<input type="text" placeholder={where} />
</div>
<div className={`${styles.when} ${styles.border}`}>
<Body color="red" textTransform="bold" className={styles.fontSize}>
<div className={styles.when}>
<Caption color="red" textTransform="bold">
{when}
</Body>
</Caption>
<input type="text" placeholder={when} />
</div>
<div className={`${styles.rooms} ${styles.border}`}>
<Body color="red" textTransform="bold" className={styles.fontSize}>
<div className={styles.rooms}>
<Caption color="red" textTransform="bold">
{rooms}
</Body>
</Caption>
<input type="text" placeholder={rooms} />
</div>
<div className={`${styles.vouchers} ${styles.border}`}>
<Body
color="textMediumContrast"
textTransform="bold"
className={styles.fontSize}
>
<div className={styles.vouchers}>
<Caption color="textMediumContrast" textTransform="bold">
{vouchers}
</Body>
</Caption>
<input type="text" placeholder={vouchers} />
</div>
<div className={styles.options}>
<div className={styles.option}>
<input type="checkbox" />
<Body color="textMediumContrast" className={styles.fontSize}>
{bonus}
</Body>
<Caption color="textMediumContrast">{bonus}</Caption>
</div>
<div className={styles.option}>
<input type="checkbox" />
<Body color="textMediumContrast" className={styles.fontSize}>
{reward}
</Body>
<Caption color="textMediumContrast">{reward}</Caption>
</div>
</div>
</div>

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

@@ -1,5 +1,6 @@
.section {
display: flex;
align-items: center;
max-width: 1432px;
padding: var(--Spacing-x2) var(--Spacing-x5);
}
@@ -12,7 +13,3 @@
width: 118px;
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 Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import FormContent from "./FormContent"
import { bookingWidgetSchema } from "./schema"
@@ -71,9 +71,9 @@ export default function Form() {
intent="primary"
className={styles.button}
>
<Body color="white" textTransform="bold" className={styles.fontSize}>
<Caption color="white" textTransform="bold">
{intl.formatMessage({ id: "Find hotels" })}
</Body>
</Caption>
</Button>
</section>
)

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

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

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

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