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

feat(SW-243): use Caption and Body

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-20 11:07:43 +02:00
parent 6a6dccaba5
commit bd14fb5fd2
2 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css
View File

@@ -8,18 +8,16 @@
.image { .image {
height: 100%; height: 100%;
width: 100%; width: 105px;
max-width: 105px;
object-fit: cover; object-fit: cover;
} }
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
gap: var(--Spacing-x1); gap: var(--Spacing-x1);
padding: var(--Spacing-x2); padding: var(--Spacing-x2);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
} }
.hotel, .hotel,
@@ -28,9 +26,15 @@
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
} }
.caption {
display: flex;
flex-direction: column;
}
.dates { .dates {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x-half);
} }
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
@@ -38,7 +42,7 @@
flex-direction: column; flex-direction: column;
} }
.image { .image {
max-width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 195px; max-height: 195px;
} }
@@ -50,7 +54,7 @@
} }
.hotel, .hotel,
.stay { .width {
width: 100%; width: 100%;
max-width: 230px; max-width: 230px;
} }

24
components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx
View File

@@ -1,5 +1,7 @@
import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons" import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
import Image from "@/components/Image" import Image from "@/components/Image"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./confirmationCard.module.css" import styles from "./confirmationCard.module.css"
@@ -22,16 +24,20 @@ export default function ConfirmationCard() {
<Title as="h5" textTransform="capitalize"> <Title as="h5" textTransform="capitalize">
Helsinki Hub Helsinki Hub
</Title> </Title>
<span>Kaisaniemenkatu 7, Helsinki</span> <Caption color="burgundy" className={styles.caption}>
<span>Call us at +358 300 870680</span> <span>Kaisaniemenkatu 7, Helsinki</span>
<span>Call us at +358 300 870680</span>
</Caption>
</div> </div>
<div className={styles.stay}> <div className={styles.width}>
<span>1 night</span> <Body className={styles.stay}>
<div className={styles.dates}> <span>1 night</span>
<span>2024.03.09</span> <span className={styles.dates}>
<ArrowRightIcon height={15} width={15} /> <span>2024.03.09</span>
<span>2024.03.10</span> <ArrowRightIcon height={15} width={15} />
</div> <span>2024.03.10</span>
</span>
</Body>
</div> </div>
</div> </div>
</section> </section>