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

Merged in feat/ancillery-card (pull request #1293)

Browse Source 
Created AncillaryCard for SW-1504 and SW-1546

* Created AncillaryCard for SW-1504 and SW-1546

* updated divider

* added dangerouslySetInnerHTML

* Added color="uiTextHighContrast"


Approved-by: Bianca Widstam
This commit is contained in:
Pontus Dreij
2025-02-10 14:01:49 +00:00
parent 450a1d4adc
commit ec8db51c47
3 changed files with 104 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css Normal file
View File

@@ -0,0 +1,29 @@
.ancillaryCard {
display: flex;
flex-direction: column;
max-width: 280px;
}
.imageContainer {
position: relative;
width: 100%;
height: 140px;
border-radius: var(--Corner-radius-Medium);
overflow: hidden;
}
.image {
object-fit: cover;
}
.price {
display: flex;
gap: var(--Spacing-x1);
}
.contentContainer {
padding: var(--Spacing-x-one-and-half) 0 0 0;
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}

62
components/TempDesignSystem/AncillaryCard/index.tsx Normal file
View File

@@ -0,0 +1,62 @@
import { useIntl } from "react-intl"
import Image from "@/components/Image"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./ancillaryCard.module.css"
import type { AncillaryCardProps } from "@/types/components/ancillaryCard"
export function AncillaryCard({ ancillary }: AncillaryCardProps) {
const intl = useIntl()
return (
<article className={styles.ancillaryCard}>
<div className={styles.imageContainer}>
<Image
className={styles.image}
src={ancillary.imageUrl}
alt={ancillary.title}
fill
style={{ opacity: ancillary.imageOpacity ?? 1 }}
/>
</div>
<div className={styles.contentContainer}>
<div>
<Body textTransform="bold" color="uiTextHighContrast">
{ancillary.title}
</Body>
<div className={styles.price}>
<Body color="uiTextHighContrast">
{formatPrice(
intl,
ancillary.price.total,
ancillary.price.currency
)}
</Body>
{ancillary.points && (
<>
<div>
<Divider variant="vertical" color="subtle" />
</div>
<Body textAlign="right" color="uiTextHighContrast">
{ancillary.points} {intl.formatMessage({ id: "Points" })}
</Body>
</>
)}
</div>
</div>
{ancillary.description && (
<Caption asChild color="uiTextHighContrast">
<div dangerouslySetInnerHTML={{ __html: ancillary.description }} />
</Caption>
)}
</div>
</article>
)
}

13
types/components/ancillaryCard.ts Normal file
View File

@@ -0,0 +1,13 @@
export interface AncillaryCardProps {
ancillary: {
title: string
imageUrl: string
imageOpacity?: number
price: {
total: number
currency: string
}
points?: number
description?: string
}
}