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

Merged in chore/SW-2878-extract-booking-confirmation-pag (pull request #2779)

Browse Source 
Chore/SW-2878 extract booking confirmation pag

* chore(SW-2878): Moved booking confirmation page to booking-flow package

* chore(SW-2878): Fixed promo styles as per design

* chore(SW-2878): Kept tiny duplicate function to avoid export from booking-flow package


Approved-by: Anton Gunnarsson
This commit is contained in:
Hrishikesh Vaipurkar
2025-09-10 07:50:48 +00:00
parent c6da0fb8cb
commit a5790ee454
77 changed files with 410 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/index.tsx Normal file
View File

@@ -0,0 +1,25 @@
import { Button } from "@scandic-hotels/design-system/Button"
import Link from "@scandic-hotels/design-system/Link"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./promo.module.css"
import type { PromoProps } from "../../../../types/components/promo/promoProps"
export function Promo({ buttonText, href, text, title }: PromoProps) {
return (
<Link className={styles.link} color="none" href={href}>
<article className={styles.promo}>
<Typography variant={"Title/smLowCase"}>
<h4>{title}</h4>
</Typography>
<Typography variant={"Body/Paragraph/mdRegular"}>
<p className={styles.text}>{text}</p>
</Typography>
<Button size="Small" variant={"Secondary"} color={"Inverted"} wrapping>
<div>{buttonText}</div>
</Button>
</article>
</Link>
)
}

42
packages/booking-flow/lib/components/BookingConfirmation/Promos/Promo/promo.module.css Normal file
View File

@@ -0,0 +1,42 @@
.promo {
align-items: center;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--Medium, 8px);
color: var(--Text-Brand-OnPrimary-2-Heading);
display: flex;
flex: 1 0 320px;
flex-direction: column;
gap: var(--Spacing-x2);
height: 320px;
justify-content: center;
padding: var(--Spacing-x4) var(--Spacing-x3);
}
.link:nth-of-type(1) .promo {
background-image:
linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.36) 37.88%,
rgba(0, 0, 0, 0.75) 100%
),
url("/_static/img/Scandic_Park_Party_Lipstick.jpg");
}
.link:nth-of-type(2) .promo {
background-image:
linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.36) 37.88%,
rgba(0, 0, 0, 0.75) 100%
),
url("/_static/img/Scandic_Family_Breakfast.jpg");
}
.text {
max-width: 400px;
text-align: center;
}