From fdd48ff48aa8db6ba47556e824e38dfd1b0aa820 Mon Sep 17 00:00:00 2001
From: Fredrik Thorsson <fredrik.thorsson@scandichotels.com>
Date: Fri, 1 Nov 2024 15:02:14 +0100
Subject: [PATCH] style(SW-762): update styling for headings

---
 .../Blocks/DynamicContent/LoyaltyLevels/index.tsx  |  2 +-
 .../OverviewTable/LargeTable/index.tsx             |  2 +-
 .../OverviewTable/RewardList/Card/index.tsx        |  2 +-
 .../DynamicContent/Rewards/NextLevel/index.tsx     |  2 +-
 .../Stays/Previous/EmptyPreviousStays/index.tsx    |  2 +-
 .../Stays/Soonest/EmptyUpcomingStays/index.tsx     |  2 +-
 .../Blocks/DynamicContent/Stays/StayCard/index.tsx |  2 +-
 .../Stays/Upcoming/EmptyUpcomingStays/index.tsx    |  2 +-
 .../Current/Header/MyPagesMobileDropdown/index.tsx |  2 +-
 components/DeprecatedJsonToHtml/renderOptions.tsx  |  2 +-
 .../SelectRate/SelectionCard/index.tsx             |  2 +-
 components/JsonToHtml/renderOptions.tsx            |  2 +-
 components/TempDesignSystem/LoyaltyCard/index.tsx  |  2 +-
 .../TempDesignSystem/Text/Title/title.module.css   | 14 ++++++++------
 components/TempDesignSystem/Text/Title/title.ts    |  2 +-
 components/TempDesignSystem/Text/Title/variants.ts |  1 -
 16 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
index f23130e7d..a2958c3e3 100644
--- a/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -51,7 +51,7 @@ async function LevelCard({ level }: LevelCardProps) {
         </BiroScript>
         <MembershipLevelIcon level={level.level_id} color="red" />
       </header>
-      <Title textAlign="center" level="h5">
+      <Title textAlign="center" level="h4">
         {pointsString}
         {level.required_nights ? (
           <span className={styles.redText}>
diff --git a/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx b/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
index f19b42444..aa9d320cd 100644
--- a/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
+++ b/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
@@ -70,7 +70,7 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
     <details className={styles.details}>
       <summary className={styles.summary}>
         <hgroup className={styles.rewardHeader}>
-          <Title as="h5" level="h2" textTransform={"regular"}>
+          <Title as="h4" level="h2" textTransform={"regular"}>
             {name}
           </Title>
           <span className={styles.chevron}>
diff --git a/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx b/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx
index b54d9722d..4a49abd04 100644
--- a/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx
+++ b/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx
@@ -19,7 +19,7 @@ export default function RewardCard({
         <details className={styles.details}>
           <summary className={styles.summary}>
             <hgroup className={styles.rewardCardHeader}>
-              <Title as="h5" level="h2" textTransform={"regular"}>
+              <Title as="h4" level="h2" textTransform={"regular"}>
                 {title}
               </Title>
               <span className={styles.chevron}>
diff --git a/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx b/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
index 7517ed955..cc311048d 100644
--- a/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
+++ b/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
@@ -56,7 +56,7 @@ export default async function NextLevelRewardsBlock({
                   { level: nextLevelRewards.level?.name }
                 )}
               </Body>
-              <Title level="h4" as="h5" color="pale" textAlign="center">
+              <Title level="h4" as="h4" color="pale" textAlign="center">
                 {reward.label}
               </Title>
             </div>
diff --git a/components/Blocks/DynamicContent/Stays/Previous/EmptyPreviousStays/index.tsx b/components/Blocks/DynamicContent/Stays/Previous/EmptyPreviousStays/index.tsx
index e80cab97c..e4da92974 100644
--- a/components/Blocks/DynamicContent/Stays/Previous/EmptyPreviousStays/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/Previous/EmptyPreviousStays/index.tsx
@@ -7,7 +7,7 @@ export default async function EmptyPreviousStaysBlock() {
   const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
-      <Title as="h5" level="h3" color="red" textAlign="center">
+      <Title as="h4" level="h3" color="red" textAlign="center">
         {formatMessage({
           id: "You have no previous stays.",
         })}
diff --git a/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx b/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx
index 1cd297438..0db81b6ce 100644
--- a/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx
@@ -14,7 +14,7 @@ export default async function EmptyUpcomingStaysBlock() {
   return (
     <section className={styles.container}>
       <div className={styles.titleContainer}>
-        <Title as="h5" level="h3" color="red" className={styles.title}>
+        <Title as="h4" level="h3" color="red" className={styles.title}>
           {formatMessage({ id: "You have no upcoming stays." })}
           <span className={styles.burgundyTitle}>
             {formatMessage({ id: "Where should you go next?" })}
diff --git a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
index 9e63c0f77..59c768156 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
@@ -47,7 +47,7 @@ export default function StayCard({ stay }: StayCardProps) {
           height={240}
         />
         <footer className={styles.footer}>
-          <Title as="h5" className={styles.hotel} level="h3">
+          <Title as="h4" className={styles.hotel} level="h3">
             {hotelInformation.hotelName}
           </Title>
           <div className={styles.date}>
diff --git a/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx b/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
index 1cd297438..0db81b6ce 100644
--- a/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
@@ -14,7 +14,7 @@ export default async function EmptyUpcomingStaysBlock() {
   return (
     <section className={styles.container}>
       <div className={styles.titleContainer}>
-        <Title as="h5" level="h3" color="red" className={styles.title}>
+        <Title as="h4" level="h3" color="red" className={styles.title}>
           {formatMessage({ id: "You have no upcoming stays." })}
           <span className={styles.burgundyTitle}>
             {formatMessage({ id: "Where should you go next?" })}
diff --git a/components/Current/Header/MyPagesMobileDropdown/index.tsx b/components/Current/Header/MyPagesMobileDropdown/index.tsx
index 49c333f34..bf8c5a01e 100644
--- a/components/Current/Header/MyPagesMobileDropdown/index.tsx
+++ b/components/Current/Header/MyPagesMobileDropdown/index.tsx
@@ -34,7 +34,7 @@ export default function MyPagesMobileDropdown({
     <nav
       className={`${styles.navigationMenu} ${isMyPagesMobileMenuOpen ? styles.navigationMenuIsOpen : ""}`}
     >
-      <Title className={styles.heading} textTransform="capitalize" level="h5">
+      <Title className={styles.heading} textTransform="capitalize" level="h4">
         {navigation.title}
       </Title>
       {navigation.menuItems.map((menuItem, idx) => (
diff --git a/components/DeprecatedJsonToHtml/renderOptions.tsx b/components/DeprecatedJsonToHtml/renderOptions.tsx
index c22f469e0..732e2c321 100644
--- a/components/DeprecatedJsonToHtml/renderOptions.tsx
+++ b/components/DeprecatedJsonToHtml/renderOptions.tsx
@@ -198,7 +198,7 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <Title key={node.uid} {...props} level="h5">
+      <Title key={node.uid} {...props} level="h4">
         {next(node.children, embeds, fullRenderOptions)}
       </Title>
     )
diff --git a/components/HotelReservation/SelectRate/SelectionCard/index.tsx b/components/HotelReservation/SelectRate/SelectionCard/index.tsx
index bf3b8caeb..e902993a1 100644
--- a/components/HotelReservation/SelectRate/SelectionCard/index.tsx
+++ b/components/HotelReservation/SelectRate/SelectionCard/index.tsx
@@ -20,7 +20,7 @@ export default function SelectionCard({
   return (
     <div className={styles.card}>
       <div>
-        <Title className={styles.name} as="h5" level="h3">
+        <Title className={styles.name} as="h4" level="h3">
           {title}
         </Title>
         <div className={styles.nameInfo}>i</div>
diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index 2ce1afbec..65efe5a7a 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -221,7 +221,7 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
     return (
-      <Title key={node.uid} {...props} level="h5">
+      <Title key={node.uid} {...props} level="h4">
         {next(node.children, embeds, fullRenderOptions)}
       </Title>
     )
diff --git a/components/TempDesignSystem/LoyaltyCard/index.tsx b/components/TempDesignSystem/LoyaltyCard/index.tsx
index ea49366fc..fe26a51c7 100644
--- a/components/TempDesignSystem/LoyaltyCard/index.tsx
+++ b/components/TempDesignSystem/LoyaltyCard/index.tsx
@@ -35,7 +35,7 @@ export default function LoyaltyCard({
           focalPoint={image.focalPoint}
         />
       ) : null}
-      <Title as="h5" level="h3" textAlign="center">
+      <Title as="h4" level="h3" textAlign="center">
         {heading}
       </Title>
       {bodyText ? <Body textAlign="center">{bodyText}</Body> : null}
diff --git a/components/TempDesignSystem/Text/Title/title.module.css b/components/TempDesignSystem/Text/Title/title.module.css
index d01be3335..5693c267c 100644
--- a/components/TempDesignSystem/Text/Title/title.module.css
+++ b/components/TempDesignSystem/Text/Title/title.module.css
@@ -4,7 +4,9 @@
   font-weight: 500;
 }
 
-.h1 {
+/* Temporarily remove h1 styling until design tokens är updated */
+
+/* .h1 {
   font-family: var(--typography-Title-1-fontFamily);
   font-size: clamp(
     var(--typography-Title-1-Mobile-fontSize),
@@ -14,9 +16,9 @@
   letter-spacing: var(--typography-Title-1-letterSpacing);
   line-height: var(--typography-Title-1-lineHeight);
   text-decoration: var(--typography-Title-1-textDecoration);
-}
+} */
 
-.h2 {
+.h1 {
   font-family: var(--typography-Title-2-fontFamily);
   font-size: clamp(
     var(--typography-Title-2-Mobile-fontSize),
@@ -28,7 +30,7 @@
   text-decoration: var(--typography-Title-2-textDecoration);
 }
 
-.h3 {
+.h2 {
   font-family: var(--typography-Title-3-fontFamily);
   font-size: clamp(
     var(--typography-Title-3-Mobile-fontSize),
@@ -40,7 +42,7 @@
   text-decoration: var(--typography-Title-3-textDecoration);
 }
 
-.h4 {
+.h3 {
   font-family: var(--typography-Title-4-fontFamily);
   font-size: clamp(
     var(--typography-Title-4-Mobile-fontSize),
@@ -52,7 +54,7 @@
   text-decoration: var(--typography-Title-4-textDecoration);
 }
 
-.h5 {
+.h4 {
   font-family: var(--typography-Title-5-fontFamily);
   font-size: clamp(
     var(--typography-Title-5-Mobile-fontSize),
diff --git a/components/TempDesignSystem/Text/Title/title.ts b/components/TempDesignSystem/Text/Title/title.ts
index ce7789263..f4ab9eca3 100644
--- a/components/TempDesignSystem/Text/Title/title.ts
+++ b/components/TempDesignSystem/Text/Title/title.ts
@@ -2,7 +2,7 @@ import { headingVariants } from "./variants"
 
 import type { VariantProps } from "class-variance-authority"
 
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
+type HeadingLevel = "h1" | "h2" | "h3" | "h4"
 
 export interface HeadingProps
   extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
diff --git a/components/TempDesignSystem/Text/Title/variants.ts b/components/TempDesignSystem/Text/Title/variants.ts
index 641394ceb..291c12486 100644
--- a/components/TempDesignSystem/Text/Title/variants.ts
+++ b/components/TempDesignSystem/Text/Title/variants.ts
@@ -26,7 +26,6 @@ const config = {
       h2: styles.h2,
       h3: styles.h3,
       h4: styles.h4,
-      h5: styles.h5,
     },
   },
   defaultVariants: {