style(SW-762): update styling for headings

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}>

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}>

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}>

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>

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.",
         })}

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?" })}

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}>

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?" })}

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) => (

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>
     )

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>

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>
     )

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}

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),

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">,

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: {