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>