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/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
@@ -1,21 +1,5 @@
-.container {
-  display: grid;
-  text-align: center;
-  gap: 0.4rem;
-  padding: 1rem;
-}
-
-.title {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 700;
-
-  margin: 0;
-}
-
-.value {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 400;
-  margin: 0;
+.icon,
+.icon * {
+  fill: var(--Scandic-Brand-Burgundy);
+  margin-bottom: var(--Spacing-x-half);
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -1,5 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"

+import { EmailIcon, PhoneIcon } from "@/components/Icons"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import { getValueFromContactConfig } from "@/utils/contactConfig"

 import styles from "./contactRow.module.css"
@@ -7,7 +9,7 @@ import styles from "./contactRow.module.css"
 import type { ContactRowProps } from "@/types/components/loyalty/sidebar"

 export default async function ContactRow({ contact }: ContactRowProps) {
-  const data = await serverClient().contentstack.config.contact()
+  const data = await serverClient().contentstack.base.contact()

  const val = getValueFromContactConfig(contact.contact_field, data)

@@ -15,10 +17,22 @@ export default async function ContactRow({ contact }: ContactRowProps) {
    return null
  }

+  let Icon = null
+  if (contact.contact_field.includes("email")) {
+    Icon = EmailIcon
+  } else if (contact.contact_field.includes("phone")) {
+    Icon = PhoneIcon
+  }
+
  return (
-    <div className={styles.container}>
-      <h4 className={styles.title}>{contact.display_text}</h4>
-      <p className={styles.value}>{val}</p>
+    <div>
+      {Icon ? <Icon className={styles.icon} /> : null}
+      <Body color="burgundy" textAlign="center" textTransform="bold">
+        {contact.display_text}
+      </Body>
+      <Body color="burgundy" textAlign="center">
+        {val}
+      </Body>
    </div>
  )
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/contact.module.css
@@ -4,13 +4,18 @@

@media screen and (min-width: 1367px) {
  .contactContainer {
+    align-items: center;
+    border-top: 1px solid var(--UI-Grey-30);
    display: flex;
    flex-direction: column;
-    align-items: center;
+    gap: var(--Spacing-x5);
    justify-content: center;
-    border-top: 0.5px solid var(--UI-Grey-30);
-    padding: 3.4rem;
+    padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
    text-align: center;
-    gap: 6.2rem;
+  }
+
+  .contact {
+    display: grid;
+    gap: var(--Spacing-x-one-and-half);
  }
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/Contact/index.tsx
@@ -1,4 +1,4 @@
-import Title from "@/components/TempDesignSystem/Text/Title"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"

 import ContactRow from "./ContactRow"
@@ -11,9 +11,11 @@ import type { ContactProps } from "@/types/components/loyalty/sidebar"
 export default async function Contact({ contactBlock }: ContactProps) {
  const { formatMessage } = await getIntl()
  return (
-    <div className={styles.contactContainer}>
-      <Title level="h5">{formatMessage({ id: "Contact us" })}</Title>
-      <section>
+    <article className={styles.contactContainer}>
+      <Subtitle textAlign="center">
+        {formatMessage({ id: "Contact us" })}
+      </Subtitle>
+      <section className={styles.contact}>
        {contactBlock.map(({ contact, __typename }, i) => {
          switch (__typename) {
            case JoinLoyaltyContactTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContactBlockContactContact:
@@ -28,6 +30,6 @@ export default async function Contact({ contactBlock }: ContactProps) {
          }
        })}
      </section>
-    </div>
+    </article>
  )
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
@@ -1,6 +1,8 @@
-import Image from "@/components/Image"
+import { ScandicFriends } from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"

@@ -12,31 +14,32 @@ import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar

 export default async function JoinLoyaltyContact({
  block,
+  lang,
 }: JoinLoyaltyContactProps) {
  const { formatMessage } = await getIntl()
  return (
-    <div className={styles.container}>
-      <div className={styles.wrapper}>
-        <Title level="h3">{block.title}</Title>
-        <Image
-          alt="Scandic Friends"
-          className={styles.image}
-          height={65}
-          src="/_static/icons/scandic-friends.png"
-          width={203}
-        />
-        {block.preamble && <p className={styles.preamble}>{block.preamble}</p>}
-        <Button intent="primary">
-          <span>{formatMessage({ id: "Join Scandic Friends" })}</span>
+    <section className={styles.container}>
+      <article className={styles.wrapper}>
+        <Title as="h4" level="h3">
+          {block.title}
+        </Title>
+        <ScandicFriends color="primaryLightOnSurfaceAccent" />
+        {block.preamble ? (
+          <Body textAlign="center">{block.preamble}</Body>
+        ) : null}
+        <Button asChild className={styles.link} intent="primary">
+          <Link href="#">
+            {formatMessage({ id: "Join Scandic Friends" })}
+          </Link>
        </Button>
-        <div className={styles.linkContainer}>
-          <Link href="/login" className={styles.loginLink}>
+        <Link href={`/${lang}/login`}>
+          <Footnote textAlign="center" textTransform="bold">
            {formatMessage({ id: "Already a friend?" })} <br />
            {formatMessage({ id: "Click here to log in" })}
-          </Link>
-        </div>
-      </div>
-      {block.contact && <Contact contactBlock={block.contact} />}
-    </div>
+          </Footnote>
+        </Link>
+      </article>
+      {block.contact ? <Contact contactBlock={block.contact} /> : null}
+    </section>
  )
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
+++ b/components/Loyalty/Sidebar/JoinLoyalty/joinLoyalty.module.css
@@ -1,54 +1,21 @@
 .container {
+  background-color: var(--Main-Grey-White);
  display: grid;
-  font-weight: 600;
-  background-color: var(--Base-Background-Elevated);
 }

 .wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
-  gap: 2rem;
-  padding: 6rem 2rem;
+  gap: var(--Spacing-x5);
+  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x5);
 }

-.preamble {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 400;
-  line-height: 2.4rem;
-  text-align: center;
-  margin: 0;
-}
-
-.loginLink {
-  text-decoration: none;
-  color: var(--some-black-color, #2e2e2e);
-  font-size: 1.2rem;
-}
-
-.linkContainer {
-  text-align: center;
-}
-
-.contactContainer {
-  display: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .container {
-    border-radius: 32px 4px 4px 32px;
-  }
-
-  .wrapper {
-    gap: 3rem;
-  }
-
-  .contactContainer {
-    display: block;
-    border-top: 0.5px solid var(--UI-Grey-30);
-    display: flex;
-    justify-content: center;
-    padding: 3.4rem;
-  }
+/* TODO: Remove when we get proper button variables */
+.link {
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+  letter-spacing: var(--typography-Body-Bold-letterSpacing);
+  line-height: var(--typography-Body-Bold-lineHeight);
 }
--- a/components/Loyalty/Sidebar/index.tsx
+++ b/components/Loyalty/Sidebar/index.tsx
@@ -7,9 +7,9 @@ import styles from "./sidebar.module.css"
 import { SidebarTypenameEnum } from "@/types/components/loyalty/enums"
 import { SidebarProps } from "@/types/components/loyalty/sidebar"

-export default function SidebarLoyalty({ blocks }: SidebarProps) {
+export default function SidebarLoyalty({ blocks, lang }: SidebarProps) {
  return (
-    <aside>
+    <aside className={styles.aside}>
      {blocks.map((block) => {
        switch (block.__typename) {
          case SidebarTypenameEnum.LoyaltyPageSidebarContent:
@@ -22,7 +22,12 @@ export default function SidebarLoyalty({ blocks }: SidebarProps) {
              </section>
            )
          case SidebarTypenameEnum.LoyaltyPageSidebarJoinLoyaltyContact:
-            return <JoinLoyaltyContact block={block.join_loyalty_contact} />
+            return (
+              <JoinLoyaltyContact
+                block={block.join_loyalty_contact}
+                lang={lang}
+              />
+            )
          default:
            return null
        }
--- a/components/Loyalty/Sidebar/sidebar.module.css
+++ b/components/Loyalty/Sidebar/sidebar.module.css
@@ -1,5 +1,11 @@
+.aside {
+  align-content: flex-start;
+  display: grid;
+  gap: var(--Spacing-x4);
+}
+
@media screen and (max-width: 1366px) {
  .content {
-    padding: 0 1.6rem;
+    padding: var(--Spacing-x0) var(--Spacing-x2);
  }
 }