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
2025-02-10 14:01:49 +00:00
parent 450a1d4adc
commit ec8db51c47
3 changed files with 104 additions and 0 deletions
--- a/components/TempDesignSystem/AncillaryCard/ancillaryCard.module.css
+++ 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);
+}
--- a/components/TempDesignSystem/AncillaryCard/index.tsx
+++ 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 (
+    <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>
+  )
+}
--- a/types/components/ancillaryCard.ts
+++ 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
+  }
+}