From ec8db51c47f47ea038724ef8114bf4d76c9f98bc Mon Sep 17 00:00:00 2001 From: Pontus Dreij Date: Mon, 10 Feb 2025 14:01:49 +0000 Subject: [PATCH] Merged in feat/ancillery-card (pull request #1293) 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 --- .../AncillaryCard/ancillaryCard.module.css | 29 +++++++++ .../TempDesignSystem/AncillaryCard/index.tsx | 62 +++++++++++++++++++ types/components/ancillaryCard.ts | 13 ++++ 3 files changed, 104 insertions(+) create mode 100644 components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css create mode 100644 components/TempDesignSystem/AncillaryCard/index.tsx create mode 100644 types/components/ancillaryCard.ts diff --git a/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css b/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css new file mode 100644 index 000000000..d2aa43334 --- /dev/null +++ b/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css @@ -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); +} diff --git a/components/TempDesignSystem/AncillaryCard/index.tsx b/components/TempDesignSystem/AncillaryCard/index.tsx new file mode 100644 index 000000000..443bf110e --- /dev/null +++ b/components/TempDesignSystem/AncillaryCard/index.tsx @@ -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 ( +
+
+ {ancillary.title} +
+
+
+ + {ancillary.title} + + +
+ + {formatPrice( + intl, + ancillary.price.total, + ancillary.price.currency + )} + + + {ancillary.points && ( + <> +
+ +
+ + {ancillary.points} {intl.formatMessage({ id: "Points" })} + + + )} +
+
+ {ancillary.description && ( + +
+ + )} +
+
+ ) +} diff --git a/types/components/ancillaryCard.ts b/types/components/ancillaryCard.ts new file mode 100644 index 000000000..dc8516a35 --- /dev/null +++ b/types/components/ancillaryCard.ts @@ -0,0 +1,13 @@ +export interface AncillaryCardProps { + ancillary: { + title: string + imageUrl: string + imageOpacity?: number + price: { + total: number + currency: string + } + points?: number + description?: string + } +}