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

29
apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
View File

@@ -1,12 +1,12 @@
import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./summaryCard.module.css"
interface SummaryCardProps {
title: string
title: React.ReactNode
image: {
src: string
alt: string
@@ -36,25 +36,28 @@ export default function SummaryCard({
<Image src={image.src} alt={image.alt} width={152} height={152} />
</div>
<div className={styles.content}>
<div className={styles.topContent}>
<Body textTransform="bold" color="uiTextHighContrast">
{title}
</Body>
<div>
{title}
{texts.map((text) => (
<Body color="uiTextHighContrast" key={text}>
{text}
</Body>
<Typography variant="Body/Paragraph/mdRegular" key={text}>
<p>{text}</p>
</Typography>
))}
</div>
{supportingText && (
<Caption color="uiTextPlaceholder">{supportingText}</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p className={styles.supportingText}>{supportingText}</p>
</Typography>
)}
<div className={styles.bottomContent}>
{chip}
{links && (
<div className={styles.links}>
{links.map((link) => (
<Caption asChild type="bold" color="burgundy" key={link.href}>
<Typography
variant="Body/Supporting text (caption)/smBold"
key={link.href}
>
<Link
href={link.href}
target="_blank"
@@ -65,7 +68,7 @@ export default function SummaryCard({
{link.icon}
{link.text}
</Link>
</Caption>
</Typography>
))}
</div>
)}

39
apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css
View File

@@ -5,34 +5,18 @@
gap: var(--Spacing-x2);
}
@media (min-width: 768px) {
.card {
align-items: flex-start;
flex-direction: row;
}
}
.image {
width: 152px;
height: 152px;
border-radius: var(--Corner-radius-Medium);
}
@media (min-width: 768px) {
.image {
background-color: var(--Base-Surface-Secondary-light-Normal);
}
}
.content {
display: flex;
flex-direction: column;
height: 100%;
}
.topContent {
margin-bottom: 10px;
text-align: center;
gap: var(--Spacing-x1);
}
.bottomContent {
@@ -50,3 +34,22 @@
align-items: center;
gap: var(--Spacing-x-half);
}
.supportingText {
color: var(--UI-Text-Placeholder);
}
@media (min-width: 768px) {
.card {
align-items: flex-start;
flex-direction: row;
}
.image {
background-color: var(--Base-Surface-Secondary-light-Normal);
}
.content {
text-align: left;
}
}