feat: add new design for join scandic friends checkbox

components/TempDesignSystem/Form/Checkbox/index.tsx

@@ -12,6 +12,7 @@ import styles from "./checkbox.module.css"
 import { CheckboxProps } from "@/types/components/checkbox"
 
 export default function Checkbox({
+  className,
   name,
   children,
   registerOptions,
@@ -25,16 +26,17 @@ export default function Checkbox({
 
   return (
     <AriaCheckbox
-      className={styles.container}
+      className={`${styles.container} ${className}`}
       isSelected={field.value}
       onChange={field.onChange}
       data-testid={name}
       isDisabled={registerOptions?.disabled}
+      excludeFromTabOrder
     >
       {({ isSelected }) => (
         <>
           <span className={styles.checkboxContainer}>
-            <span className={styles.checkbox}>
+            <span className={styles.checkbox} tabIndex={0}>
               {isSelected && <CheckIcon color="white" />}
             </span>
             {children}

components/TempDesignSystem/Form/ChoiceCard/Checkbox.tsx

@@ -1,7 +0,0 @@
-import Card from "./_Card"
-
-import type { CheckboxProps } from "./_Card/card"
-
-export default function CheckboxCard(props: CheckboxProps) {
-  return <Card {...props} type="checkbox" />
-}

components/TempDesignSystem/Form/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 useLang from "@/hooks/useLang"
+
+import Link from "../../Link"
+import Caption from "../../Text/Caption"
+import Footnote from "../../Text/Footnote"
+import Checkbox from "../Checkbox"
+
+import styles from "./joinScandicFriendsCard.module.css"
+
+type JoinScandicFriendsCardProps = {
+  name: string
+  difference: { price: number; currency: string }
+}
+
+export default function JoinScandicFriendsCard({
+  name,
+  difference,
+}: 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" }) },
+  ]
+
+  return (
+    <label className={styles.cardContainer}>
+      <header className={styles.header}>
+        <Checkbox name={name} className={styles.checkBox} />
+        <div>
+          <Caption type="label" textTransform="uppercase" color="red">
+            {intl.formatMessage(
+              {
+                id: "Only pay {amount} {currency}",
+              },
+              {
+                amount: intl.formatNumber(difference.price),
+                currency: difference.currency,
+              }
+            )}
+          </Caption>
+          <Caption
+            type="label"
+            textTransform="uppercase"
+            color="uiTextHighContrast"
+          >
+            {intl.formatMessage({ id: "Join Scandic Friends" })}
+          </Caption>
+        </div>
+        <Footnote color="uiTextHighContrast">
+          {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>
+      </header>
+
+      <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">
+        {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>
+    </label>
+  )
+}

components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css

@@ -0,0 +1,30 @@
+.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;
+  cursor: pointer;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  width: min(100%, 600px);
+}
+
+.header {
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+  grid-template-columns: auto 1fr auto;
+}
+
+.checkBox {
+  align-self: center;
+}
+
+.list {
+  display: flex;
+  gap: var(--Spacing-x1);
+}
+
+.listItem {
+  display: flex;
+}

components/TempDesignSystem/Link/link.module.css

@@ -16,7 +16,7 @@
 .breadcrumb {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  font-weight: 450; /* var(--typography-Footnote-Bold-fontWeight); */
   letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -24,7 +24,7 @@
 .link.breadcrumb {
   font-family: var(--typography-Footnote-Bold-fontFamily);
   font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
+  font-weight: 450; /* var(--typography-Footnote-Bold-fontWeight); */
   letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
   line-height: var(--typography-Footnote-Bold-lineHeight);
 }
@@ -128,6 +128,15 @@
   color: #000;
 }
 
+.uiTextPlaceholder {
+  color: var(--Base-Text-Placeholder);
+}
+
+.uiTextPlaceholder:hover,
+.uiTextPlaceholder:active {
+  color: var(--Base-Text-Medium-contrast);
+}
+
 .burgundy {
   color: var(--Base-Text-High-contrast);
 }
@@ -211,6 +220,14 @@
   line-height: var(--typography-Caption-Regular-lineHeight);
 }
 
+.tiny {
+  font-family: var(--typography-Footnote-Regular-fontFamily);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: var(--typography-Footnote-Regular-fontWeight);
+  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
+  line-height: var(--typography-Footnote-Regular-lineHeight);
+}
+
 .activeSmall {
   font-family: var(--typography-Caption-Bold-fontFamily);
   font-size: var(--typography-Caption-Bold-fontSize);

components/TempDesignSystem/Link/variants.ts

@@ -17,10 +17,12 @@ export const linkVariants = cva(styles.link, {
       peach80: styles.peach80,
       white: styles.white,
       red: styles.red,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     size: {
       small: styles.small,
       regular: styles.regular,
+      tiny: styles.tiny,
     },
     textDecoration: {
       none: styles.noDecoration,