From 62310caa90e54881cff5048c3fa0dfefe8b99fdb Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Mon, 15 Jul 2024 15:07:23 +0200
Subject: [PATCH] fix: make all h4 and subtitles capitalized

---
 .../(protected)/my-pages/profile/@profile/page.tsx    |  4 ++--
 components/Forms/Edit/Profile/index.tsx               |  4 ++--
 .../HotelReservation/SelectHotel/HotelCard/index.tsx  |  4 +++-
 components/Loyalty/Sidebar/JoinLoyalty/index.tsx      |  2 +-
 .../MyPages/Blocks/Benefits/NextLevel/index.tsx       | 11 ++++++-----
 .../MyPages/Blocks/Benefits/NextLevel/next.module.css |  5 +++++
 components/MyPages/Sidebar/index.tsx                  |  4 +---
 .../Text/Subtitle/subtitle.module.css                 |  4 ++++
 components/TempDesignSystem/Text/Subtitle/variants.ts |  3 ++-
 9 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
index 81ccf6cb8..76cf6f994 100644
--- a/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
+++ b/app/[lang]/(live)/(protected)/my-pages/profile/@profile/page.tsx
@@ -32,10 +32,10 @@ export default async function Profile({ params }: PageArgs<LangParams>) {
     <>
       <Header>
         <hgroup>
-          <Title as="h4" color="red" level="h1">
+          <Title as="h4" color="red" level="h1" textTransform="capitalize">
             {formatMessage({ id: "Welcome" })}
           </Title>
-          <Title as="h4" color="burgundy" level="h2">
+          <Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
             {user.name}
           </Title>
         </hgroup>
diff --git a/components/Forms/Edit/Profile/index.tsx b/components/Forms/Edit/Profile/index.tsx
index 013c2dbcd..768c5b412 100644
--- a/components/Forms/Edit/Profile/index.tsx
+++ b/components/Forms/Edit/Profile/index.tsx
@@ -64,10 +64,10 @@ export default function Form({ user }: EditFormProps) {
     <>
       <Header>
         <hgroup>
-          <Title as="h4" color="red" level="h1">
+          <Title as="h4" color="red" level="h1" textTransform="capitalize">
             {formatMessage({ id: "Welcome" })}
           </Title>
-          <Title as="h4" color="burgundy" level="h2">
+          <Title as="h4" color="burgundy" level="h2" textTransform="capitalize">
             {user.name}
           </Title>
         </hgroup>
diff --git a/components/HotelReservation/SelectHotel/HotelCard/index.tsx b/components/HotelReservation/SelectHotel/HotelCard/index.tsx
index 360ea711d..e8fe62fb4 100644
--- a/components/HotelReservation/SelectHotel/HotelCard/index.tsx
+++ b/components/HotelReservation/SelectHotel/HotelCard/index.tsx
@@ -18,7 +18,9 @@ export default async function HotelCard({ hotel }: HotelCardProps) {
       <div className={styles.information}>
         <header className={styles.title}>
           <ScandicLogoIcon color="red" />
-          <Title as="h4">{hotel.name}</Title>
+          <Title as="h4" textTransform="capitalize">
+            {hotel.name}
+          </Title>
         </header>
         <div className={styles.description}>
           <span>{`${hotel.address.streetAddress}, ${hotel.address.city}`}</span>
diff --git a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
index 0718abd31..a81548446 100644
--- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
@@ -30,7 +30,7 @@ export default async function JoinLoyaltyContact({
   return (
     <section>
       <article className={styles.wrapper}>
-        <Title as="h4" level="h3">
+        <Title as="h4" level="h3" textTransform="capitalize">
           {block.title}
         </Title>
         <ScandicFriends color="red" />
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
index 4503c4d0d..48136fd7a 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
+++ b/components/MyPages/Blocks/Benefits/NextLevel/index.tsx
@@ -9,7 +9,7 @@ import SectionLink from "@/components/Section/Link"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Grids from "@/components/TempDesignSystem/Grids"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getMembershipLevelObject } from "@/utils/membershipLevel"
 
@@ -47,17 +47,18 @@ export default async function NextLevelBenefitsBlock({
               <Lock height={16} />
               {formatMessage({ id: "Level up to unlock" })}
             </Chip>
-            <div>
+            <div className={styles.textContainer}>
               <Body color="peach50" textAlign="center">
                 {formatMessage({ id: "As our" })} {nextLevel.name}
               </Body>{" "}
-              <Subtitle
+              <Title
+                level="h4"
+                textTransform="capitalize"
                 color="pale"
                 textAlign="center"
-                textTransform="uppercase"
               >
                 {benefit.title}
-              </Subtitle>
+              </Title>
             </div>
           </article>
         ))}
diff --git a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
index 2e155bc9f..e75630991 100644
--- a/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
+++ b/components/MyPages/Blocks/Benefits/NextLevel/next.module.css
@@ -8,3 +8,8 @@
   justify-content: center;
   padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x7);
 }
+
+.textContainer {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
diff --git a/components/MyPages/Sidebar/index.tsx b/components/MyPages/Sidebar/index.tsx
index c942f0557..bf9280cd8 100644
--- a/components/MyPages/Sidebar/index.tsx
+++ b/components/MyPages/Sidebar/index.tsx
@@ -21,9 +21,7 @@ export default async function Sidebar({ lang }: LangParams) {
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
-        <Subtitle textTransform="regular" type="two">
-          {navigation.title}
-        </Subtitle>
+        <Subtitle type="two">{navigation.title}</Subtitle>
         {navigation.menuItems.map((menuItem, idx) => (
           <Fragment key={`${menuItem.display_sign_out_link}-${idx}`}>
             <Divider color="beige" />
diff --git a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
index d02215b80..07f795811 100644
--- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
+++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
@@ -35,6 +35,10 @@
   text-transform: uppercase;
 }
 
+.capitalize {
+  text-transform: capitalize;
+}
+
 .center {
   text-align: center;
 }
diff --git a/components/TempDesignSystem/Text/Subtitle/variants.ts b/components/TempDesignSystem/Text/Subtitle/variants.ts
index 3f32c2fb7..da1985669 100644
--- a/components/TempDesignSystem/Text/Subtitle/variants.ts
+++ b/components/TempDesignSystem/Text/Subtitle/variants.ts
@@ -16,6 +16,7 @@ const config = {
     textTransform: {
       regular: styles.regular,
       uppercase: styles.uppercase,
+      capitalize: styles.capitalize,
     },
     type: {
       one: styles.one,
@@ -25,7 +26,7 @@ const config = {
   defaultVariants: {
     color: "burgundy",
     textAlign: "left",
-    textTransform: "regular",
+    textTransform: "capitalize",
     type: "one",
   },
 } as const