fix: break out css variables

components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/index.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { privacyPolicy } from "@/constants/currentWebHrefs"
+
+import { CheckIcon } from "@/components/Icons"
+import LoginButton from "@/components/LoginButton"
+import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import useLang from "@/hooks/useLang"
+
+import styles from "./joinScandicFriendsCard.module.css"
+
+import { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"
+
+export default function JoinScandicFriendsCard({
+  name,
+  memberPrice,
+}: JoinScandicFriendsCardProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const list = [
+    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
+    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
+    { title: intl.formatMessage({ id: "Join at no cost" }) },
+  ]
+
+  const saveOnJoiningLabel = intl.formatMessage(
+    {
+      id: "Only pay {amount} {currency}",
+    },
+    {
+      amount: intl.formatNumber(memberPrice?.price ?? 0),
+      currency: memberPrice?.currency ?? "SEK",
+    }
+  )
+
+  return (
+    <div className={styles.cardContainer}>
+      <Checkbox name={name} className={styles.checkBox}>
+        <div>
+          {memberPrice ? (
+            <Caption type="label" textTransform="uppercase" color="red">
+              {saveOnJoiningLabel}
+            </Caption>
+          ) : null}
+          <Caption
+            type="label"
+            textTransform="uppercase"
+            color="uiTextHighContrast"
+          >
+            {intl.formatMessage({ id: "Join Scandic Friends" })}
+          </Caption>
+        </div>
+      </Checkbox>
+
+      <Footnote color="uiTextHighContrast" className={styles.login}>
+        {intl.formatMessage({ id: "Already a friend?" })}{" "}
+        <LoginButton
+          color="burgundy"
+          position="enter details"
+          trackingId="join-scandic-friends-enter-details"
+          variant="breadcrumb"
+          target="_blank"
+        >
+          {intl.formatMessage({ id: "Log in" })}
+        </LoginButton>
+      </Footnote>
+
+      <div className={styles.list}>
+        {list.map((item) => (
+          <Caption
+            key={item.title}
+            color="uiTextPlaceholder"
+            className={styles.listItem}
+          >
+            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+          </Caption>
+        ))}
+      </div>
+      <Footnote color="uiTextPlaceholder" className={styles.terms}>
+        {intl.formatMessage<React.ReactNode>(
+          {
+            id: "signup.terms",
+          },
+          {
+            termsLink: (str) => (
+              <Link
+                variant="default"
+                textDecoration="underline"
+                size="tiny"
+                target="_blank"
+                color="uiTextPlaceholder"
+                href={privacyPolicy[lang]}
+              >
+                {str}
+              </Link>
+            ),
+          }
+        )}
+      </Footnote>
+    </div>
+  )
+}

components/HotelReservation/EnterDetails/Details/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -0,0 +1,55 @@
+.cardContainer {
+  align-self: flex-start;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  grid-template-areas:
+    "checkbox"
+    "list"
+    "login"
+    "terms";
+  width: min(100%, 600px);
+}
+
+.login {
+  grid-area: login;
+}
+
+.checkBox {
+  align-self: center;
+  grid-area: checkbox;
+}
+
+.list {
+  display: grid;
+  grid-area: list;
+  gap: var(--Spacing-x1);
+}
+
+.listItem {
+  display: flex;
+}
+
+.terms {
+  border-top: 1px solid var(--Base-Border-Normal);
+  grid-area: terms;
+  padding-top: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .cardContainer {
+    grid-template-columns: 1fr auto;
+    gap: var(--Spacing-x2);
+    grid-template-areas:
+      "checkbox login"
+      "list list"
+      "terms terms";
+  }
+  .list {
+    display: flex;
+    gap: var(--Spacing-x1);
+  }
+}

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -10,10 +10,10 @@ import { useStepsStore } from "@/stores/steps"
 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import JoinScandicFriendsCard from "@/components/TempDesignSystem/Form/JoinScandicFriendsCard"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
+import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
 
@@ -25,7 +25,7 @@ import type {
 } from "@/types/components/hotelReservation/enterDetails/details"
 
 const formID = "enter-details"
-export default function Details({ user }: DetailsProps) {
+export default function Details({ user, memberPrice }: DetailsProps) {
   const intl = useIntl()
   const initialData = useDetailsStore((state) => ({
     countryCode: state.data.countryCode,
@@ -68,7 +68,6 @@ export default function Details({ user }: DetailsProps) {
     [completeStep, updateDetails]
   )
 
-  const joinValue = methods.watch("join")
   return (
     <FormProvider {...methods}>
       <form
@@ -77,10 +76,7 @@ export default function Details({ user }: DetailsProps) {
         onSubmit={methods.handleSubmit(onSubmit)}
       >
         {user ? null : (
-          <JoinScandicFriendsCard
-            name="join"
-            difference={{ price: 1000, currency: "SEK" }}
-          />
+          <JoinScandicFriendsCard name="join" memberPrice={memberPrice} />
         )}
         <div className={styles.container}>
           <Footnote

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -66,7 +66,7 @@ export default function SectionAccordion({
   const textColor =
     isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
   return (
-    <div className={styles.main} data-open={isOpen} data-step={step}>
+    <div className={styles.accordion} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
         <div className={styles.circle} data-checked={isComplete}>
           {isComplete ? (

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -1,4 +1,7 @@
-.main {
+.accordion {
+  --header-height: 2.4em;
+  --circle-height: 24px;
+
   gap: var(--Spacing-x3);
   width: 100%;
   padding-top: var(--Spacing-x3);
@@ -7,12 +10,12 @@
   display: grid;
   grid-template-areas: "circle header" "content content";
   grid-template-columns: auto 1fr;
-  grid-template-rows: 2.4em 0fr;
+  grid-template-rows: var(--header-height) 0fr;
 
   column-gap: var(--Spacing-x-one-and-half);
 }
 
-.main:last-child .main {
+.accordion:last-child {
   border-bottom: none;
 }
 
@@ -52,8 +55,8 @@
 }
 
 .circle {
-  width: 24px;
-  height: 24px;
+  width: var(--circle-height);
+  height: var(--circle-height);
   border-radius: 100px;
   transition: background-color 0.4s;
   border: 2px solid var(--Base-Border-Inverted);
@@ -66,16 +69,16 @@
   background-color: var(--UI-Input-Controls-Fill-Selected);
 }
 
-.main[data-open="true"] .circle[data-checked="false"] {
+.accordion[data-open="true"] .circle[data-checked="false"] {
   background-color: var(--UI-Text-Placeholder);
 }
 
-.main[data-open="false"] .circle[data-checked="false"] {
+.accordion[data-open="false"] .circle[data-checked="false"] {
   background-color: var(--Base-Surface-Subtle-Hover);
 }
 
-.main[data-open="true"] {
-  grid-template-rows: 2.4em 1fr;
+.accordion[data-open="true"] {
+  grid-template-rows: var(--header-height) 1fr;
   gap: var(--Spacing-x3);
 }
 
@@ -86,7 +89,7 @@
 }
 
 @media screen and (min-width: 768px) {
-  .main {
+  .accordion {
     gap: var(--Spacing-x3);
     grid-template-areas: "circle header" "circle content";
   }
@@ -95,11 +98,11 @@
     top: var(--Spacing-x1);
   }
 
-  .main:not(:last-child) .iconWrapper::after {
+  .accordion:not(:last-child) .iconWrapper::after {
     position: absolute;
     left: 12px;
     bottom: calc(0px - var(--Spacing-x7));
-    top: 24px;
+    top: var(--circle-height);
 
     content: "";
     border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);