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

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

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