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

apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx

@@ -4,7 +4,7 @@ import {
 } from "@/lib/trpc/memoizedRequests"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import ClientCurrentRewards from "./Client"
@@ -27,7 +27,7 @@ export default async function CurrentRewardsBlock({
 
   return (
     <Section>
-      <SectionHeader title={title} link={link} preamble={subtitle} />
+      <SectionHeader heading={title} link={link} preamble={subtitle} />
       <ClientCurrentRewards
         rewards={rewardsResponse.rewards}
         showRedeem={true}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx

@@ -8,7 +8,7 @@ import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 import Grids from "@/components/TempDesignSystem/Grids"
 import { getIntl } from "@/i18n"
@@ -42,7 +42,7 @@ export default async function NextLevelRewardsBlock({
 
   return (
     <Section>
-      <SectionHeader title={title} preamble={subtitle} link={link} />
+      <SectionHeader heading={title} preamble={subtitle} link={link} />
       <Grids.Stackable columns={2}>
         {nextLevelRewards.rewards.map((reward) => (
           <article key={reward.reward_id} className={styles.card}>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx

@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"
 
 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 useRedeemFlow from "./useRedeemFlow"
@@ -15,12 +14,14 @@ export function ConfirmClose({ close }: { close: () => void }) {
   return (
     <>
       <div className={styles.modalContent}>
-        <Title level="h3" textAlign="center" textTransform="regular">
-          {intl.formatMessage({
-            id: "redeem.confirmClose.title",
-            defaultMessage: "If you close this your benefit will be removed",
-          })}
-        </Title>
+        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
+          <h3>
+            {intl.formatMessage({
+              id: "redeem.confirmClose.title",
+              defaultMessage: "If you close this your benefit will be removed",
+            })}
+          </h3>
+        </Typography>
         <Typography variant="Body/Paragraph/mdRegular">
           <p>
             {intl.formatMessage({

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 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 { toast } from "@scandic-hotels/design-system/Toast"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -22,9 +21,9 @@ export default function Campaign({ reward }: { reward: Campaign }) {
     <>
       <div className={styles.modalContent}>
         <RewardIcon rewardId={reward.reward_id} />
-        <Title level="h3" textAlign="center" textTransform="regular">
-          {reward.label}
-        </Title>
+        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
+          <h3>{reward.label}</h3>
+        </Typography>
         <Typography
           variant="Body/Paragraph/mdRegular"
           className={styles.rewardDescription}

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx

@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"
 
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 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 { isRestaurantOnSiteTierReward } from "@/utils/rewards"
@@ -43,9 +42,9 @@ export default function Tier({
           </div>
         )}
         <RewardIcon rewardId={reward.reward_id} />
-        <Title level="h3" textAlign="center" textTransform="regular">
-          {reward.label}
-        </Title>
+        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
+          <h3>{reward.label}</h3>
+        </Typography>
 
         {reward.redeemLocation !== "Non-redeemable" && (
           <>

apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css

@@ -8,6 +8,11 @@
   align-items: center;
 }
 
+.rewardLabel {
+  text-align: center;
+  color: var(--Text-Heading);
+}
+
 .redeemed {
   display: flex;
   justify-content: center;