feat(WEB-304): remaning UI from design system primitives

2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
--- a/components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
@@ -1,11 +1,9 @@
 .container {
-  display: flex;
-  justify-content: center;
  align-items: center;
-  width: 100%;
-  height: 37rem;
-  border-radius: 1.6rem;
  background-color: var(--UI-Grey-10);
-  text-align: center;
-  margin-right: 1.6rem;
+  border-radius: var(--Corner-radius-xLarge);
+  display: flex;
+  height: 370px;
+  justify-content: center;
+  width: 100%;
 }
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -1,14 +1,23 @@
 "use client"

 import { useParams } from "next/navigation"
-import { Check } from "react-feather"
 import { useIntl } from "react-intl"

 import { Lang } from "@/constants/languages"

-import Image from "@/components/Image"
+import { CheckIcon } from "@/components/Icons"
+import {
+  BestFriend,
+  CloseFriend,
+  DearFriend,
+  GoodFriend,
+  LoyalFriend,
+  NewFriend,
+  TrueFriend,
+} from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"

 import levelsData from "./data"
@@ -35,13 +44,11 @@ export default function LoyaltyLevels() {
          />
        ))}
      </div>
-      <div className={styles.buttonContainer}>
-        <Button intent="primary" asChild>
-          <Link href={`/${lang}/compare-all-levels`}>
-            {formatMessage({ id: "Compare all levels" })}
-          </Link>
-        </Button>
-      </div>
+      <Button asChild intent="primary">
+        <Link className={styles.link} href={`/${lang}/compare-all-levels`}>
+          {formatMessage({ id: "Compare all levels" })}
+        </Link>
+      </Button>
    </section>
  )
 }
@@ -51,19 +58,46 @@ function LevelCard({ formatMessage, lang, level }: LevelCardProps) {
  const qualifications = level.requiredNights
    ? `${pointsString} ${formatMessage({ id: "or" })} ${level.requiredNights} ${formatMessage({ id: "nights" })}`
    : pointsString
+
+  let Level = null
+  switch (level.tier) {
+    case 1:
+      Level = NewFriend
+      break
+    case 2:
+      Level = GoodFriend
+      break
+    case 3:
+      Level = CloseFriend
+      break
+    case 4:
+      Level = DearFriend
+      break
+    case 5:
+      Level = LoyalFriend
+      break
+    case 6:
+      Level = TrueFriend
+      break
+    case 7:
+      Level = BestFriend
+      break
+  }
  return (
    <article className={styles.card}>
      <Title className={styles.tierHeading} level="h4">
        {level.tier}
      </Title>
-      <Image src={level.icon} alt={level.name} width={140} height={54} />
-      <p className={styles.qualifications}>{qualifications}</p>
-      {level.benefits.map((benefit) => (
-        <p key={benefit.title} className={styles.benefits}>
-          <Check className={styles.icon} />
-          {benefit.title}
-        </p>
-      ))}
+      {Level ? <Level color="primaryLightOnSurfaceAccent" /> : null}
+      <div className={styles.textContainer}>
+        <Body textTransform="bold">{qualifications}</Body>
+        {level.benefits.map((benefit) => (
+          <Body key={benefit.title} textAlign="center">
+            <CheckIcon className={styles.checkIcon} />
+            {benefit.title}
+          </Body>
+        ))}
+      </div>
    </article>
  )
 }
--- a/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
@@ -1,86 +1,69 @@
 .container {
  display: grid;
-  gap: 2.4rem;
-}
-
-.buttonContainer {
-  display: flex;
-  justify-content: center;
+  gap: var(--Spacing-x3);
 }

 .cardContainer {
-  display: flex;
-  gap: 0.8rem;
+  display: grid;
+  gap: var(--Spacing-x2);
+  margin-right: calc(0px - var(--Spacing-x2));
  overflow-x: auto;
-  padding-right: 1.6rem;
-  margin-right: -1.6rem;
+  padding-right: var(--Spacing-x2);
  /* Hide scrollbar IE and Edge */
  -ms-overflow-style: none;
  /* Hide Scrollbar Firefox */
  scrollbar-width: none;
 }

+.link {
+  justify-self: center;
+}
+
 .card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 37rem;
-  min-width: 32rem;
-  padding: 4rem 1rem;
+  align-content: flex-start;
  background-color: var(--UI-Grey-10);
-  border-radius: 1.6rem;
-  gap: 1.8rem;
+  border-radius: var(--Corner-radius-xLarge);
+  display: grid;
+  gap: var(--Spacing-x2);
+  justify-content: center;
+  justify-items: center;
+  padding: var(--Spacing-x5) var(--Spacing-x1);
 }

 .tierHeading {
-  color: #b05b65;
+  color: var(--Scandic-Peach-70);
 }

-.qualifications {
-  margin: 0;
-  font-size: var(--typography-Body-Bold-fontSize);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  /* font-weight: var(--typography-Body-Bold-fontWeight);  -- Tokens not parsable*/
-  font-weight: 600;
+.textContainer {
+  align-content: flex-start;
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  justify-content: center;
+  justify-items: center;
 }

-.benefits {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  margin: 0;
-  text-align: center;
-}
-
-.icon {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  position: relative;
-  top: 0.3rem;
-  height: 1.4rem;
+.checkIcon {
+  vertical-align: text-bottom;
 }

@media screen and (min-width: 1367px) {
  .container {
-    gap: 3.2rem;
+    gap: var(--Spacing-x4);
  }

  .cardContainer {
    display: grid;
-    grid-template-columns: repeat(12, auto);
+    grid-template-columns: repeat(12, 1fr);
+    margin-right: 0;
    /* Three columns in the first row */
    padding-right: 0;
-    margin-right: 0rem;
  }

-  .card {
-    min-width: auto;
-  }
-
-  .card:nth-child(-n + 3) {
+  .card:nth-of-type(-n + 3) {
    grid-column: span 4;
  }

-  .card:nth-last-child(-n + 4) {
+  .card:nth-of-type(n + 4) {
    grid-column: span 3;
  }
 }
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/benefitCard.module.css
@@ -56,4 +56,4 @@
  .benefitComparison {
    grid-template-columns: 1fr 1fr 1fr;
  }
-}
+}
--- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
@@ -7,8 +7,8 @@

 .levelRequirements {
  background-color: var(--Main-Brand-Burgundy);
-  border-radius: var(--Corner-radius-xLarge);
-  color: #f7e1d5;
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Scandic-Brand-Pale-Peach);
  padding: var(--Spacing-x-half) var(--Spacing-x1);
 }

@@ -27,4 +27,4 @@
  .levelSummaryText {
    font-size: var(--typography-Caption-Regular-fontSize);
  }
-}
+}
--- a/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css
+++ b/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css
@@ -1,36 +1,36 @@
 .container {
  display: grid;
-  gap: 2.4rem;
+  gap: var(--Spacing-x4);
  /* These negative margins are needed for horizontally scrollable lists of cards */
-  margin-right: -1.6rem;
-  padding-right: 1.6rem;
+  margin-right: calc(0px - var(--Spacing-x2));
+  overflow-x: hidden;
+  padding-right: var(--Spacing-x2);
 }

-.titleContainer {
+.header {
  display: grid;
-  grid-template-areas: "title link" "subtitle subtitle";
-  grid-template-columns: 1fr max-content;
-  padding-bottom: 0.8rem;
+  gap: var(--Spacing-x1);
+  grid-template-columns: 1fr auto;
 }

 .title {
-  grid-area: title;
+  grid-column: 1/2;
+  grid-row: 1/2;
 }

 .link {
-  grid-area: link;
-  font-size: var(--typography-Body-Underlined-fontSize);
-  color: var(--some-black-color, #000);
+  grid-column: 2/-1;
+  grid-row: 1/2;
 }

 .subtitle {
-  margin: 0;
-  grid-area: subtitle;
+  grid-column: 1/-1;
+  grid-row: 2;
 }

@media screen and (min-width: 950px) {
  .container {
-    margin-right: 0;
-    margin-left: 0;
+    margin-right: var(--Spacing-x0);
+    margin-left: var(--Spacing-x0);
  }
 }
--- a/components/Loyalty/Blocks/DynamicContent/index.tsx
+++ b/components/Loyalty/Blocks/DynamicContent/index.tsx
@@ -1,9 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"

 import { auth } from "@/auth"
-import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Header from "@/components/MyPages/Blocks/Header"

 import HowItWorks from "./HowItWorks"
 import LoyaltyLevels from "./LoyaltyLevels"
@@ -36,9 +34,10 @@ async function DynamicComponentBlock({ component }: DynamicComponentProps) {

 export default function DynamicContent({
  dynamicContent,
+  firstItem,
 }: DynamicContentProps) {
  const displayHeader = !!(
-    dynamicContent.title ||
+    dynamicContent.link ||
    dynamicContent.subtitle ||
    dynamicContent.title
  )
@@ -46,19 +45,12 @@ export default function DynamicContent({
  return (
    <section className={styles.container}>
      {displayHeader ? (
-        <header className={styles.titleContainer}>
-          <Title as="h3" className={styles.title} level="h2">
-            {dynamicContent.title}
-          </Title>
-          {dynamicContent.link ? (
-            <Link className={styles.link} href={dynamicContent.link.href}>
-              {dynamicContent.link.text}
-            </Link>
-          ) : null}
-          <Subtitle className={styles.subtitle}>
-            {dynamicContent.subtitle}
-          </Subtitle>
-        </header>
+        <Header
+          link={dynamicContent.link}
+          subtitle={dynamicContent.subtitle}
+          title={dynamicContent.title}
+          topTitle={firstItem}
+        />
      ) : null}
      <DynamicComponentBlock component={dynamicContent.component} />
    </section>