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

Merged in feat/SW-1737-design-mystay-multiroom (pull request #1565)

Browse Source 
Feat/SW-1737 design mystay multiroom

* feat(SW-1737) Fixed member view of guest details

* feat(SW-1737) fix merge issues

* feat(SW-1737) Fixed price details

* feat(SW-1737) removed unused imports

* feat(SW-1737) removed true as statement

* feat(SW-1737) updated store handling

* feat(SW-1737) fixed bug showing double numbers

* feat(SW-1737) small design fixed

* feat(SW-1737) fixed rebase errors

* feat(SW-1737) fixed create booking error with dates

* feat(SW-1737) fixed view multiroom as singleroom

* feat(SW-1737) fixes for multiroom

* feat(SW-1737) fixed bookingsummary

* feat(SW-1737) dont hide modify dates

* feat(SW-1737) updated breakfast to handle number

* feat(SW-1737) Added red color if member rate

* feat(SW-1737) fix PR comments

* feat(SW-1737) updated member tiers svg

* feat(SW-1737) updated how to handle paymentMethodDescription

* feat(SW-1737) fixes after testing mystay

* feat(SW-1737) updated Room type to just use whats used

* feat(SW-1737) fixed access

* feat(SW-1737) refactor my stay after PR comments

* feat(SW-1737) fix roomNumber translation

* feat(SW-1737) removed log


Approved-by: Arvid Norlin
This commit is contained in:
Pontus Dreij
2025-03-24 09:30:10 +00:00
parent c5e294c7ea
commit 74c5b47319
117 changed files with 5899 additions and 1901 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
apps/scandic-web/components/HotelReservation/MyStay/Promo/index.tsx
View File

@@ -1,25 +1,45 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./promo.module.css"
import type { PromoProps } from "@/types/components/hotelReservation/bookingConfirmation/promo"
export default function Promo({ buttonText, href, text, title }: PromoProps) {
export default function Promo({
buttonText,
href,
text,
title,
image,
}: PromoProps) {
return (
<Link className={styles.link} color="none" href={href}>
<Link color="none" href={href}>
<article className={styles.promo}>
<Title color="white" level="h4">
{title}
</Title>
<Body className={styles.text} color="white" textAlign="center">
{text}
</Body>
<Button asChild intent="primary" size="small" theme="primaryStrong">
<div>{buttonText}</div>
</Button>
{image && (
<div className={styles.imageContainer}>
<Image
className={styles.image}
src={image.imageSizes.large}
alt={image.metaData.altText}
fill
/>
</div>
)}
<div className={styles.overlay} />
<div className={styles.content}>
<Typography variant="Title/smRegular">
<p>{title}</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.text}>{text}</p>
</Typography>
<Button asChild intent="secondary" size="small" theme="primaryStrong">
<span>{buttonText}</span>
</Button>
</div>
</article>
</Link>
)

81
apps/scandic-web/components/HotelReservation/MyStay/Promo/promo.module.css
View File

@@ -1,34 +1,71 @@
.promo {
align-items: center;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 480px;
position: relative;
display: flex;
flex: 1 0 480px;
overflow: hidden;
}
.content {
position: relative;
z-index: 2;
align-items: center;
display: flex;
flex: 1 0 100%;
flex-direction: column;
gap: var(--Spacing-x2);
height: 480px;
justify-content: center;
padding: var(--Spacing-x4) var(--Spacing-x3);
color: var(--UI-Opacity-White-100);
text-align: center;
}
.text {
width: 100%;
}
.imageContainer {
height: 100%;
width: 100%;
position: absolute;
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%
);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
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%
);
z-index: 1;
}
.image {
height: 100%;
object-fit: cover;
width: 100%;
}
@media (min-width: 768px) {
.promo {
border-radius: var(--Medium, 8px);
border-radius: var(--Corner-radius-xLarge);
}
.content {
flex: 1 0 480px;
}
.text {
width: 400px;
}
}
.link .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;
}