From 68c1b3dc50b0b911988cb3bb1eb314deb22c7e36 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Mon, 12 Jan 2026 07:54:59 +0000 Subject: [PATCH] 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 --- .../(protected)/my-pages/[...path]/page.tsx | 5 +- .../components/Blocks/CardGallery/index.tsx | 4 +- .../HowItWorks/howItWorks.module.css | 4 + .../DynamicContent/HowItWorks/index.tsx | 16 +- .../DynamicContent/JobylonFeed/index.tsx | 5 +- .../DynamicContent/LoyaltyLevels/index.tsx | 8 +- .../LoyaltyLevels/loyaltyLevels.module.css | 5 + .../MyPagesOverviewShortcuts/index.tsx | 4 +- .../OverviewTable/LargeTable/index.tsx | 11 +- .../LargeTable/largeTable.module.css | 3 + .../OverviewTable/RewardList/Card/index.tsx | 8 +- .../RewardList/Card/rewardCard.module.css | 3 + .../Points/EarnAndBurn/index.tsx | 4 +- .../Points/ExpiringPoints/index.tsx | 4 +- .../DynamicContent/Points/Overview/index.tsx | 5 +- .../Rewards/CurrentRewards/index.tsx | 4 +- .../Rewards/NextLevel/index.tsx | 4 +- .../Rewards/Redeem/ConfirmClose.tsx | 15 +- .../Rewards/Redeem/Flows/Campaign.tsx | 7 +- .../Rewards/Redeem/Flows/Tier.tsx | 7 +- .../Rewards/Redeem/redeem.module.css | 5 + .../SAS/LinkedAccounts/index.tsx | 4 +- .../SAS/TransferPoints/index.tsx | 4 +- .../DynamicContent/SectionWrapper/index.tsx | 6 +- .../Stays/OldStayCard/index.tsx | 8 +- .../emptyUpcomingStays.module.css | 2 + .../Upcoming/EmptyUpcomingStays/index.tsx | 29 ++-- .../components/Blocks/ShortcutsList/index.tsx | 9 +- .../components/Blocks/Table/index.tsx | 4 +- .../components/Countdown/countdown.module.css | 3 + .../components/Countdown/index.tsx | 8 +- .../Filter/filter.module.css | 4 + .../DestinationFilterAndSort/Filter/index.tsx | 15 +- .../MyStay/Header/header.module.css | 23 +-- .../HotelReservation/MyStay/Header/index.tsx | 25 ++- .../components/SasTierComparison/index.tsx | 7 +- .../sasTierComparison.module.css | 5 + .../components/Section/Header/Deprecated.tsx | 52 ------- .../components/Section/Header/index.tsx | 5 +- .../TempDesignSystem/Card/card.module.css | 24 +++ .../TempDesignSystem/Card/index.tsx | 16 +- .../components/TempDesignSystem/Card/utils.ts | 24 --- .../TempDesignSystem/LoyaltyCard/index.tsx | 7 +- .../LoyaltyCard/loyaltyCard.module.css | 4 + .../components/Webviews/LoyaltyPage/index.tsx | 6 +- .../LoyaltyPage/loyaltyPage.module.css | 4 + .../EnterDetails/Header/header.module.css | 2 + .../components/EnterDetails/Header/index.tsx | 25 +-- .../EnterDetails/PriceChangeDialog/index.tsx | 12 +- .../priceChangeDialog.module.css | 1 + .../EnterDetails/Room/Multiroom.tsx | 26 ++-- .../lib/components/EnterDetails/Room/One.tsx | 26 ++-- .../FilterContent/filterContent.module.css | 3 +- .../Filters/FilterContent/index.tsx | 15 +- .../lib/components/Title/index.tsx | 64 -------- .../lib/components/Title/title.module.css | 143 ------------------ .../lib/components/Title/variants.ts | 47 ------ packages/design-system/package.json | 1 - 58 files changed, 242 insertions(+), 552 deletions(-) create mode 100644 apps/scandic-web/components/Countdown/countdown.module.css delete mode 100644 apps/scandic-web/components/Section/Header/Deprecated.tsx delete mode 100644 packages/design-system/lib/components/Title/index.tsx delete mode 100644 packages/design-system/lib/components/Title/title.module.css delete mode 100644 packages/design-system/lib/components/Title/variants.ts diff --git a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx index b58b19ba7..03cd84d9b 100644 --- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx +++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx @@ -5,7 +5,7 @@ import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK" import { serverClient } from "@/lib/trpc/server" import Blocks from "@/components/Blocks" -import SectionHeader from "@/components/Section/Header/Deprecated" +import { SectionHeader } from "@/components/Section/Header" import { getIntl } from "@/i18n" import styles from "./page.module.css" @@ -46,9 +46,8 @@ export default async function MyPages() { ) : ( )} diff --git a/apps/scandic-web/components/Blocks/CardGallery/index.tsx b/apps/scandic-web/components/Blocks/CardGallery/index.tsx index 7102f7b34..7a237ca1f 100644 --- a/apps/scandic-web/components/Blocks/CardGallery/index.tsx +++ b/apps/scandic-web/components/Blocks/CardGallery/index.tsx @@ -5,7 +5,7 @@ import { useState } from "react" import { Carousel } from "@/components/Carousel" import { ContentCard } from "@/components/ContentCard" 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 TabFilters from "@/components/TabFilters" @@ -22,7 +22,7 @@ export default function CardGallery({ card_gallery }: CardGalleryProps) { return (
- + {filterCategories.length > 0 && activeFilter && (
- - {intl.formatMessage({ - id: "common.howItWorks", - defaultMessage: "How it works", - })} - + +

+ {intl.formatMessage({ + id: "common.howItWorks", + defaultMessage: "How it works", + })} +

+
) diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/index.tsx index 785d10ae9..638003bb4 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/index.tsx +++ b/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({ diff --git a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx index 98999783b..4881c3473 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx +++ b/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) { - - {pointsMsg} - + +
{pointsMsg}
+
{level.rewards.map((reward) => (
- - {name} - + +

{name}

+ diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css index 333f71bf8..048fd7451 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css +++ b/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; diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx index e9902e421..47c3ef1e0 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx +++ b/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({
- - {title} - + +

{title}

+ diff --git a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css index e6c1e1c1e..c18ab3be2 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css +++ b/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; diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx index 6ffff966c..8d49f8457 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/EarnAndBurn/index.tsx +++ b/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 (
- +
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx index d9682e341..7b1e4b599 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Points/ExpiringPoints/index.tsx +++ b/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 (
- +
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx index 180fd0392..65dbc6233 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx +++ b/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 (
- + - + {nextLevelRewards.rewards.map((reward) => (
diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx index 74e3adc60..56fbd12b8 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx +++ b/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 ( <>
- - {intl.formatMessage({ - id: "redeem.confirmClose.title", - defaultMessage: "If you close this your benefit will be removed", - })} - + +

+ {intl.formatMessage({ + id: "redeem.confirmClose.title", + defaultMessage: "If you close this your benefit will be removed", + })} +

+

{intl.formatMessage({ diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx index 3c04305b6..71731d8e4 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx +++ b/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 }) { <>

- - {reward.label} - + +

{reward.label}

+ )} - - {reward.label} - + +

{reward.label}

+ {reward.redeemLocation !== "Non-redeemable" && ( <> diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css index 710fa9ebf..bc606079c 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css +++ b/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; diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx index cf162b126..7be816a78 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/LinkedAccounts/index.tsx +++ b/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 (
- + }> diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx index 3d71ddc41..41fe2f0d9 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/index.tsx +++ b/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 (
- + }> diff --git a/apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx index 531f3033b..c36c3a0fa 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/SectionWrapper/index.tsx +++ b/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({ ) : null} {children} diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx index 9cf25e2ef..96710126b 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx +++ b/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} />