From da1f142b57fb7afb8c598e03e7aed16b2ad125c1 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 19 Jun 2024 08:57:24 +0200
Subject: [PATCH] feat: Add mobile dropdown variant for Link component

---
 .../TempDesignSystem/Link/link.module.css     | 27 +++++++++++++++++++
 components/TempDesignSystem/Link/variants.ts  |  1 +
 .../Text/Title/title.module.css               |  2 +-
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index 6aa0c5c60..92006940c 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -29,6 +29,33 @@
   text-decoration: underline;
 }
 
+.myPageMobileDropdown {
+  color: var(--Scandic-Brand-Burgundy);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-size: var(--typography-Body-Regular-fontSize);
+  line-height: var(--typography-Body-Regular-lineHeight);
+  letter-spacing: 0.096px;
+  padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
+    var(--Spacing-x-one-and-half);
+  width: 100%;
+  border-radius: var(--Corner-radius-Medium);
+  gap: 4px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+}
+
+.myPageMobileDropdown.active {
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Medium);
+  font-family: var(--typography-Body-Underlined-fontFamily);
+  font-size: var(--typography-Body-Underlined-fontSize);
+  font-weight: var(--typography-Body-Underlined-fontWeight);
+  letter-spacing: var(--typography-Body-Underlined-letterSpacing);
+  line-height: var(--typography-Body-Underlined-lineHeight);
+}
+
 .shortcut {
   align-items: center;
   border-bottom: 0.5px solid var(--Scandic-Beige-20);
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
index a49023324..c943da924 100644
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -23,6 +23,7 @@ export const linkVariants = cva(styles.link, {
       default: styles.default,
       icon: styles.icon,
       myPage: styles.myPage,
+      myPageMobileDropdown: styles.myPageMobileDropdown,
       shortcut: styles.shortcut,
       sidebar: styles.sidebar,
     },
diff --git a/components/TempDesignSystem/Text/Title/title.module.css b/components/TempDesignSystem/Text/Title/title.module.css
index dcb44f372..9040a0cab 100644
--- a/components/TempDesignSystem/Text/Title/title.module.css
+++ b/components/TempDesignSystem/Text/Title/title.module.css
@@ -69,7 +69,7 @@
 }
 
 .capitalize {
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 
 .regular {