fix: add loyaltyCard

2024-06-28 11:21:09 +02:00
parent 5be118d9e5
commit 323df671d8
23 changed files with 467 additions and 106 deletions
--- a/components/TempDesignSystem/LoyaltyCard/index.tsx
+++ b/components/TempDesignSystem/LoyaltyCard/index.tsx
@@ -0,0 +1,65 @@
+import ArrowRight from "@/components/Icons/ArrowRight"
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import { loyaltyCardVariants } from "./variants"
+
+import styles from "./loyaltyCard.module.css"
+
+import type { LoyaltyCardProps } from "./loyaltyCard"
+
+export default function LoyaltyCard({
+  link,
+  image,
+  heading,
+  bodyText,
+  theme = "white",
+  className,
+}: LoyaltyCardProps) {
+  return (
+    <article
+      className={loyaltyCardVariants({
+        className,
+        theme,
+      })}
+    >
+      {image ? (
+        <section>
+          <Image
+            src={image.url}
+            width={180}
+            height={160}
+            className={styles.image}
+            alt={image.meta.alt || image.title}
+          />
+        </section>
+      ) : null}
+      <Title as="h5" level="h3" textAlign="center">
+        {heading}
+      </Title>
+      {bodyText ? (
+        <Body textAlign="center" color="red">
+          {bodyText}
+        </Body>
+      ) : null}
+      <div className={styles.buttonContainer}>
+        {link ? (
+          <span className={styles.linkWrapper}>
+            <ArrowRight color="burgundy" className={styles.icon} />
+            <Link
+              className={styles.link}
+              color="burgundy"
+              href={link.href}
+              target={link.openInNewTab ? "_blank" : undefined}
+              variant="myPage"
+            >
+              {link.title}
+            </Link>
+          </span>
+        ) : null}
+      </div>
+    </article>
+  )
+}
--- a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
+++ b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
@@ -0,0 +1,43 @@
+.container {
+  align-items: center;
+  display: grid;
+  border-radius: var(--Corner-radius-xLarge);
+  gap: var(--Spacing-x2);
+  height: 480px;
+  justify-content: space-between;
+  margin-right: var(--Spacing-x2);
+  padding: var(--Spacing-x4) var(--Spacing-x3);
+  text-align: center;
+  width: 100%;
+}
+
+.image {
+  object-fit: contain;
+  height: 160px;
+  width: auto;
+}
+
+.white {
+  background-color: var(--Main-Grey-White);
+}
+
+.buttonContainer {
+  display: flex;
+  gap: var(--Spacing-x1);
+  justify-content: center;
+}
+
+.linkWrapper {
+  display: flex;
+  align-items: baseline;
+  gap: var(--Spacing-x-half);
+}
+
+.link {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  align-self: center;
+}
--- a/components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts
+++ b/components/TempDesignSystem/LoyaltyCard/loyaltyCard.ts
@@ -0,0 +1,20 @@
+import { loyaltyCardVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+import { ImageVaultAsset } from "@/types/components/imageVaultImage"
+
+export interface LoyaltyCardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof loyaltyCardVariants> {
+  link?: {
+    href: string
+    title: string
+    openInNewTab?: boolean
+    isExternal: boolean
+  }
+  image?: ImageVaultAsset
+  heading?: string | null
+  bodyText?: string | null
+  backgroundImage?: { url: string }
+}
--- a/components/TempDesignSystem/LoyaltyCard/variants.ts
+++ b/components/TempDesignSystem/LoyaltyCard/variants.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./loyaltyCard.module.css"
+
+export const loyaltyCardVariants = cva(styles.container, {
+  variants: {
+    theme: {
+      white: styles.white,
+    },
+  },
+  defaultVariants: {
+    theme: "white",
+  },
+})
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -36,3 +36,15 @@
 .pale {
  color: var(--Scandic-Brand-Pale-Peach);
 }
+
+.textMediumContrast {
+  color: var(--Base-Text-UI-Medium-contrast);
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
--- a/components/TempDesignSystem/Text/Caption/index.tsx
+++ b/components/TempDesignSystem/Text/Caption/index.tsx
@@ -9,19 +9,21 @@ export default function Caption({
  className = "",
  color,
  fontOnly = false,
+  textAlign,
  textTransform,
  ...props
 }: CaptionProps) {
  const Comp = asChild ? Slot : "p"
  const classNames = fontOnly
    ? fontOnlycaptionVariants({
-      className,
-      textTransform,
-    })
+        className,
+        textTransform,
+      })
    : captionVariants({
-      className,
-      color,
-      textTransform,
-    })
+        className,
+        color,
+        textTransform,
+        textAlign,
+      })
  return <Comp className={classNames} {...props} />
 }
--- a/components/TempDesignSystem/Text/Caption/variants.ts
+++ b/components/TempDesignSystem/Text/Caption/variants.ts
@@ -8,11 +8,16 @@ const config = {
      black: styles.black,
      burgundy: styles.burgundy,
      pale: styles.pale,
+      textMediumContrast: styles.textMediumContrast,
    },
    textTransform: {
      bold: styles.bold,
      regular: styles.regular,
    },
+    textAlign: {
+      center: styles.center,
+      left: styles.left,
+    },
  },
  defaultVariants: {
    color: "black",