Merged in chore/BOOK-708-replace-title-component (pull request #3414)

Chore/BOOK-708 replace title component

* chore(BOOK-708): replace title with typography

* chore(BOOK-708): replace title with typography

* chore(BOOK-708): remove Title from package.json


Approved-by: Linus Flood
Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Header/header.module.css

@@ -39,6 +39,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--Space-x05);
+  text-align: center;
+  color: var(--Text-Inverted);
 }
 
 .mobileTitle {

packages/booking-flow/lib/components/EnterDetails/Header/index.tsx

@@ -3,7 +3,6 @@
 import { useIntl } from "react-intl"
 
 import Image from "@scandic-hotels/design-system/Image"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { HotelDetailsSidePeek } from "../../HotelDetailsSidePeek"
@@ -35,24 +34,12 @@ export default function HotelHeader({
       <div className={styles.wrapper}>
         <div className={styles.container}>
           <div className={styles.titleContainer}>
-            <Title
-              as="h1"
-              level="h1"
-              color="white"
-              textAlign="center"
-              className={styles.title}
-            >
-              {hotel.name}
-            </Title>
-            <Title
-              as="h2"
-              level="h1"
-              color="white"
-              className={styles.mobileTitle}
-              textAlign="center"
-            >
-              {hotel.name}
-            </Title>
+            <Typography variant="Title/lg" className={styles.title}>
+              <h1>{hotel.name}</h1>
+            </Typography>
+            <Typography variant="Title/md" className={styles.mobileTitle}>
+              <h1>{hotel.name}</h1>
+            </Typography>
             <Typography variant="Title/Overline/sm">
               <div className={styles.address}>{addressStr}</div>
             </Typography>

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx

@@ -5,7 +5,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useEnterDetailsStore } from "../../../stores/enter-details"
@@ -102,14 +101,9 @@ export default function PriceChangeDialog({
                 size={48}
                 color="Icon/Interactive/Default"
               />
-              <Title
-                level="h1"
-                as="h3"
-                textAlign="center"
-                textTransform="uppercase"
-              >
-                {title}
-              </Title>
+              <Typography variant="Title/sm">
+                <h3>{title}</h3>
+              </Typography>
             </div>
             <Typography variant="Body/Paragraph/mdRegular">
               <p style={{ textAlign: "center" }}>

packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css

@@ -74,6 +74,7 @@
   flex-direction: column;
   align-items: center;
   gap: var(--Space-x1);
+  color: var(--Text-Heading);
 }
 
 .footer {

packages/booking-flow/lib/components/EnterDetails/Room/Multiroom.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
@@ -38,17 +38,19 @@ export default function Multiroom() {
   return (
     <section id={`room-${roomNr}`}>
       <Header>
-        <Title level="h2" as="h4">
-          {intl.formatMessage(
-            {
-              id: "booking.roomIndex",
-              defaultMessage: "Room {roomIndex}",
-            },
-            {
-              roomIndex: roomNr,
-            }
-          )}
-        </Title>
+        <Typography variant="Title/xs">
+          <h2 style={{ color: "var(--Text-Heading)" }}>
+            {intl.formatMessage(
+              {
+                id: "booking.roomIndex",
+                defaultMessage: "Room {roomIndex}",
+              },
+              {
+                roomIndex: roomNr,
+              }
+            )}
+          </h2>
+        </Typography>
       </Header>
 
       <SelectedRoom />

packages/booking-flow/lib/components/EnterDetails/Room/One.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
@@ -42,17 +42,19 @@ export default function RoomOne({ user }: { user: User | null }) {
     <section id="room-1">
       {isMultiroom ? (
         <Header>
-          <Title level="h2" as="h4">
-            {intl.formatMessage(
-              {
-                id: "booking.roomIndex",
-                defaultMessage: "Room {roomIndex}",
-              },
-              {
-                roomIndex: 1,
-              }
-            )}
-          </Title>
+          <Typography variant="Title/xs">
+            <h2 style={{ color: "var(--Text-Heading)" }}>
+              {intl.formatMessage(
+                {
+                  id: "booking.roomIndex",
+                  defaultMessage: "Room {roomIndex}",
+                },
+                {
+                  roomIndex: 1,
+                }
+              )}
+            </h2>
+          </Typography>
         </Header>
       ) : null}
 

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/filterContent.module.css

@@ -8,8 +8,7 @@
   gap: var(--Space-x3);
 }
 
-.container .filterByTitle {
-  font-weight: 500;
+.title {
   color: var(--Text-Heading);
 }
 

packages/booking-flow/lib/components/SelectHotel/Filters/FilterContent/index.tsx

@@ -2,7 +2,6 @@ import { useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
@@ -117,12 +116,14 @@ export default function FilterContent({
   return (
     <aside className={`${styles.container} ${className}`}>
       <div>
-        <Title as="h4">
-          {intl.formatMessage({
-            id: "filter.filterBy",
-            defaultMessage: "Filter by",
-          })}
-        </Title>
+        <Typography variant="Title/xs" className={styles.title}>
+          <h4>
+            {intl.formatMessage({
+              id: "filter.filterBy",
+              defaultMessage: "Filter by",
+            })}
+          </h4>
+        </Typography>
         <div className={styles.facilities}>
           <Typography variant="Title/Subtitle/md">
             <p>