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/HowItWorks/howItWorks.module.css

@@ -7,3 +7,7 @@
   justify-content: center;
   width: 100%;
 }
+
+.title {
+  color: var(--Text-Heading);
+}

apps/scandic-web/components/Blocks/DynamicContent/HowItWorks/index.tsx

@@ -1,4 +1,4 @@
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
 
@@ -13,12 +13,14 @@ export default async function HowItWorks({ dynamic_content }: HowItWorksProps) {
   return (
     <SectionWrapper dynamic_content={dynamic_content}>
       <section className={styles.container}>
-        <Title level="h3">
-          {intl.formatMessage({
-            id: "common.howItWorks",
-            defaultMessage: "How it works",
-          })}
-        </Title>
+        <Typography variant="Title/sm" className={styles.title}>
+          <h3>
+            {intl.formatMessage({
+              id: "common.howItWorks",
+              defaultMessage: "How it works",
+            })}
+          </h3>
+        </Typography>
       </section>
     </SectionWrapper>
   )

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/index.tsx

@@ -1,7 +1,7 @@
 import { getJobylonFeed } 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 JobList from "./JobList"
@@ -28,8 +28,7 @@ export default async function JobylonFeed({
       <SectionHeader
         link={link}
         preamble={subtitle}
-        title={title}
-        headingAs="h3"
+        heading={title}
         headingLevel="h2"
       />
       <JobList allJobs={allJobs} />

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -1,6 +1,6 @@
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { serverClient } from "@/lib/trpc/server"
 
@@ -78,9 +78,9 @@ async function LevelCard({ level }: LevelCardProps) {
         </BiroScript>
         <MembershipLevelIcon level={level.level_id} color="red" />
       </header>
-      <Title textAlign="center" level="h5">
-        {pointsMsg}
-      </Title>
+      <Typography variant="Title/xs" className={styles.pointMsg}>
+        <h5>{pointsMsg}</h5>
+      </Typography>
       <div className={styles.textContainer}>
         {level.rewards.map((reward) => (
           <Caption

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -3,6 +3,11 @@
   gap: var(--Space-x2);
 }
 
+.pointMsg {
+  text-align: center;
+  color: var(--Text-Heading);
+}
+
 .link {
   justify-self: center;
 }

apps/scandic-web/components/Blocks/DynamicContent/MyPagesOverviewShortcuts/index.tsx

@@ -3,7 +3,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import ShortcutsListItems from "@/components/Blocks/ShortcutsList/ShortcutsListItems"
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
@@ -126,7 +126,6 @@ export default async function MyPagesOverviewShortcuts() {
             id: "myPagesOverviewShortcuts.yourMembership",
             defaultMessage: "Your membership",
           })}
-          headingAs="h4"
           headingLevel="h3"
         />
         <ShortcutsListItems
@@ -140,7 +139,6 @@ export default async function MyPagesOverviewShortcuts() {
             id: "myPagesOverviewShortcuts.scandicFriendsLinks",
             defaultMessage: "Scandic Friends Links",
           })}
-          headingAs="h4"
           headingLevel="h3"
         />
         <ShortcutsListItems

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown } from "react-feather"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import {
   findAvailableRewards,
@@ -71,9 +71,12 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
     <details className={styles.details}>
       <summary className={styles.summary}>
         <hgroup className={styles.rewardHeader}>
-          <Title as="h4" level="h2" textTransform="regular">
-            {name}
-          </Title>
+          <Typography
+            variant="Title/Subtitle/md"
+            className={styles.rewardTitle}
+          >
+            <h2>{name}</h2>
+          </Typography>
           <span className={styles.chevron}>
             <ChevronDown />
           </span>

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css

@@ -43,6 +43,9 @@
   padding-right: calc(var(--Space-x3) + var(--Space-x1));
 }
 
+.rewardTitle {
+  color: var(--Text-Heading);
+}
 .chevron {
   display: flex;
   align-self: start;

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx

@@ -1,6 +1,6 @@
 import { ChevronDown } from "react-feather"
 
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import RewardValue from "../../RewardValue"
 
@@ -19,9 +19,9 @@ export default function RewardCard({
         <details className={styles.details}>
           <summary className={styles.summary}>
             <hgroup className={styles.rewardCardHeader}>
-              <Title as="h4" level="h2" textTransform="regular">
-                {title}
-              </Title>
+              <Typography variant="Title/Subtitle/md" className={styles.title}>
+                <h2>{title}</h2>
+              </Typography>
               <span className={styles.chevron}>
                 <ChevronDown />
               </span>

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css

@@ -3,6 +3,9 @@
   grid-column: 1/3;
 }
 
+.title {
+  color: var(--Text-Heading);
+}
 .rewardCardHeader {
   display: grid;
   grid-template-columns: 1fr auto;

apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx

@@ -1,5 +1,5 @@
 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 ClaimPoints from "../ClaimPoints"
@@ -17,7 +17,7 @@ export default function EarnAndBurn({
   return (
     <Section>
       <div className={styles.header}>
-        <SectionHeader title={title} link={link} preamble={subtitle} />
+        <SectionHeader heading={title} link={link} preamble={subtitle} />
 
         <ClaimPoints />
       </div>

apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx

@@ -1,7 +1,7 @@
 import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 
 import ExpiringPointsTable from "./ExpiringPointsTable"
 
@@ -20,7 +20,7 @@ export default async function ExpiringPoints({
 
   return (
     <Section>
-      <SectionHeader title={title} link={link} preamble={subtitle} />
+      <SectionHeader heading={title} link={link} preamble={subtitle} />
       <ExpiringPointsTable
         points={membershipLevel.pointsToExpire}
         expirationDate={membershipLevel.pointsExpiryDate}

apps/scandic-web/components/Blocks/DynamicContent/Points/Overview/index.tsx

@@ -2,7 +2,7 @@ import { getProfile } from "@/lib/trpc/memoizedRequests"
 
 import LevelProgressCard from "@/components/MyPages/LevelProgressCard"
 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 PointsToSpendCard from "../PointsToSpendCard"
@@ -26,8 +26,7 @@ export default async function PointsOverview({
       <SectionHeader
         link={link}
         preamble={subtitle}
-        title={title}
-        headingAs="h3"
+        heading={title}
         headingLevel="h1"
       />
       <div className={styles.membershipCardsContainer}>

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;

apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx

@@ -17,7 +17,7 @@ import {
 import { getProfile } 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 { getIntl } from "@/i18n"
 import { getSasTierExpirationDate } from "@/utils/sas"
@@ -44,7 +44,7 @@ export default async function SASLinkedAccount({
   return (
     <div className={styles.container}>
       <Section>
-        <SectionHeader link={link} preamble={subtitle} title={title} />
+        <SectionHeader link={link} preamble={subtitle} heading={title} />
         <SectionLink link={link} variant="mobile" />
         <Suspense fallback={<MatchedAccountInfoSkeleton />}>
           <MatchedAccountInfo />

apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from "react"
 
 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 { getLang } from "@/i18n/serverContext"
 
@@ -25,7 +25,7 @@ export default async function SASTransferPoints({
 
   return (
     <Section>
-      <SectionHeader link={link} preamble={subtitle} title={title} />
+      <SectionHeader link={link} preamble={subtitle} heading={title} />
       <SectionLink link={link} variant="mobile" />
       <Suspense fallback={<TransferPointsFormSkeleton lang={lang} />}>
         <TransferPointsForm lang={lang} />

apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx

@@ -1,5 +1,5 @@
 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 type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
@@ -19,9 +19,7 @@ export default function SectionWrapper({
         <SectionHeader
           link={dynamic_content.link}
           preamble={dynamic_content.subtitle}
-          title={dynamic_content.title}
-          headingAs="h3"
-          headingLevel="h2"
+          heading={dynamic_content.title}
         />
       ) : null}
       {children}

apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx

@@ -5,7 +5,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
 
@@ -54,9 +54,9 @@ function CardContent({ stay }: StayCardProps) {
         height={240}
       />
       <footer className={styles.footer}>
-        <Title as="h4" className={styles.hotel} level="h3">
-          {hotelInformation.hotelName}
-        </Title>
+        <Typography variant="Title/xs" className={styles.hotel}>
+          <h3>{hotelInformation.hotelName}</h3>
+        </Typography>
         <div className={styles.date}>
           <MaterialIcon
             icon="calendar_month"

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -19,6 +19,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
+  color: var(--Text-Accent-Primary);
 }
 
 .burgundyTitle {

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -1,7 +1,6 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { env } from "@/env/server"
@@ -21,24 +20,20 @@ export default async function EmptyUpcomingStays() {
     return (
       <section className={styles.container}>
         <div className={styles.titleContainer}>
-          <Title
-            as="h4"
-            level="h3"
-            color="red"
-            className={styles.title}
-            textAlign="center"
-          >
-            {intl.formatMessage({
-              id: "stays.noUpcomingStays",
-              defaultMessage: "You have no upcoming stays.",
-            })}
-            <span className={styles.burgundyTitle}>
+          <Typography variant="Title/sm" className={styles.title}>
+            <h3>
               {intl.formatMessage({
-                id: "stays.whereToGoNext",
-                defaultMessage: "Where should you go next?",
+                id: "stays.noUpcomingStays",
+                defaultMessage: "You have no upcoming stays.",
               })}
-            </span>
-          </Title>
+              <span className={styles.burgundyTitle}>
+                {intl.formatMessage({
+                  id: "stays.whereToGoNext",
+                  defaultMessage: "Where should you go next?",
+                })}
+              </span>
+            </h3>
+          </Typography>
         </div>
         <Link
           href={href}