scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Bianca Widstam
2026-01-12 07:54:59 +00:00
parent 1b9273136a
commit 68c1b3dc50
58 changed files with 242 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx
View File

@@ -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() {
</header>
) : (
<SectionHeader
title={heading}
heading={heading}
preamble={preamble}
headingAs="h1"
headingLevel="h1"
/>
)}

4
apps/scandic-web/components/Blocks/CardGallery/index.tsx
View File

@@ -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 (
<Section>
<SectionHeader title={heading} link={link} />
<SectionHeader heading={heading} link={link} />
{filterCategories.length > 0 && activeFilter && (
<TabFilters
categories={filterCategories}

4
apps/scandic-web/components/Blocks/DynamicContent/HowItWorks/howItWorks.module.css
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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({

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

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

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

@@ -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" && (
<>

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

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

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

@@ -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 />

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

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

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

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

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

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

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

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

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

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

9
apps/scandic-web/components/Blocks/ShortcutsList/index.tsx
View File

@@ -1,5 +1,5 @@
import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header/Deprecated"
import { SectionHeader } from "@/components/Section/Header"
import ShortcutsListItems from "./ShortcutsListItems"
@@ -35,12 +35,7 @@ export default function ShortcutsList({
return (
<Section>
<SectionHeader
preamble={subtitle}
title={title}
headingAs="h3"
headingLevel="h2"
/>
<SectionHeader preamble={subtitle} heading={title} headingLevel="h2" />
<section className={styles.section}>
{columns.map(({ id, column }) => (
<ShortcutsListItems

4
apps/scandic-web/components/Blocks/Table/index.tsx
View File

@@ -11,7 +11,7 @@ import { useState } from "react"
import Table from "@scandic-hotels/design-system/Table"
import { Section } from "@/components/Section"
import SectionHeader from "@/components/Section/Header/Deprecated"
import { SectionHeader } from "@/components/Section/Header"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import styles from "./table.module.css"
@@ -54,7 +54,7 @@ export default function TableBlock({ data }: TableBlockProps) {
return (
<Section>
<SectionHeader preamble={preamble} title={heading} />
<SectionHeader preamble={preamble} heading={heading} />
<div className={styles.tableWrapper}>
<Table
width={`${totalWidth}%`}

3
apps/scandic-web/components/Countdown/countdown.module.css Normal file
View File

@@ -0,0 +1,3 @@
.title {
color: var(--Text-Heading);
}

8
apps/scandic-web/components/Countdown/index.tsx
View File

@@ -4,7 +4,9 @@ import { useState } from "react"
import { useInterval } from "usehooks-ts"
import { dt } from "@scandic-hotels/common/dt"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./countdown.module.css"
import type { CountdownProps } from "@/types/components/countdown"
@@ -28,8 +30,8 @@ export default function Countdown({
)
return (
<Title as="h1">
<Typography variant="Title/lg" className={styles.title}>
<time dateTime={time.toISOString()}>{time.format("m:ss")}</time>
</Title>
</Typography>
)
}

4
apps/scandic-web/components/DestinationFilterAndSort/Filter/filter.module.css
View File

@@ -8,6 +8,10 @@
gap: var(--Space-x4);
}
.title {
color: var(--Text-Heading);
}
.fieldset {
border: none;
padding: 0;

15
apps/scandic-web/components/DestinationFilterAndSort/Filter/index.tsx
View File

@@ -2,7 +2,6 @@
import { useIntl } from "react-intl"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useDestinationDataStore } from "@/stores/destination-data"
@@ -33,12 +32,14 @@ export default function Filter({ filters }: FilterProps) {
return (
<div className={styles.container}>
<Title level="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>
<form className={styles.form}>
<fieldset className={styles.fieldset}>
<Typography variant="Title/Subtitle/md">

23
apps/scandic-web/components/HotelReservation/MyStay/Header/header.module.css
View File

@@ -1,4 +1,4 @@
header .title {
.header {
position: relative;
z-index: 2;
left: 0;
@@ -6,23 +6,10 @@ header .title {
margin: 0 auto;
padding-top: var(--Space-x6);
margin-top: var(--Space-x2);
text-align: center;
color: var(--Text-Inverted);
}
.title .hotelName {
font-family: var(--typography-Title-3-fontFamily);
font-size: var(--typography-Title-3-fontSize);
font-weight: var(--typography-Title-3-fontWeight);
letter-spacing: var(--typography-Title-3-letterSpacing);
line-height: var(--typography-Title-3-lineHeight);
display: block;
}
@media (min-width: 768px) {
.title .hotelName {
font-family: var(--typography-Title-1-fontFamily);
font-size: var(--typography-Title-1-fontSize);
font-weight: var(--typography-Title-1-fontWeight);
letter-spacing: var(--typography-Title-1-letterSpacing);
line-height: var(--typography-Title-1-lineHeight);
}
.myStayAt {
transform: rotate(-4deg) translate(0px, -10px);
}

25
apps/scandic-web/components/HotelReservation/MyStay/Header/index.tsx
View File

@@ -1,6 +1,5 @@
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import { getIntl } from "@/i18n"
import styles from "./header.module.css"
@@ -13,21 +12,21 @@ export async function Header({
}: Pick<Hotel, "cityName" | "name">) {
const intl = await getIntl()
return (
<header>
<Title as="h2" color="white" className={styles.title} textAlign="center">
<BiroScript type="two" tilted="medium">
<header className={styles.header}>
<Typography variant="Title/Decorative/lg" className={styles.myStayAt}>
<h2>
{intl.formatMessage({
id: "myStay.header.myStayAt",
defaultMessage: "My stay at",
})}
{
/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
" "
}
</BiroScript>
<span className={styles.hotelName}>{name}</span>
{cityName}
</Title>
</h2>
</Typography>
<Typography variant="Title/lg">
<h2 className={styles.hotelName}>{name}</h2>
</Typography>
<Typography variant="Title/md">
<h3>{cityName}</h3>
</Typography>
</header>
)
}

7
apps/scandic-web/components/SasTierComparison/index.tsx
View File

@@ -6,7 +6,6 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
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 { Section } from "@/components/Section"
@@ -31,9 +30,9 @@ export function SasTierComparison({
return (
<Section className={styles.comparisonSection}>
<div className={styles.header}>
<Title level="h2" textAlign="center">
{title}
</Title>
<Typography variant="Title/md" className={styles.title}>
<h2>{title}</h2>
</Typography>
{preamble && <p className={styles.preamble}>{preamble}</p>}
</div>
<div>

5
apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
View File

@@ -15,6 +15,11 @@
text-align: center;
}
.title {
text-align: center;
color: var(--Text-Heading);
}
.preamble {
margin: 0;
white-space: pre-wrap;

52
apps/scandic-web/components/Section/Header/Deprecated.tsx
View File

@@ -1,52 +0,0 @@
import Title, { type HeadingProps } from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SectionLink from "../Link"
import styles from "./header.module.css"
type HeaderProps = {
link?: {
href: string
text: string
}
preamble?: string | null
textTransform?: HeadingProps["textTransform"]
title?: string | null
headingLevel?: HeadingProps["level"]
headingAs?: HeadingProps["as"]
}
/**
* @deprecated Use `@/components/Section/Header` instead.
*/
export default function SectionHeader({
link,
preamble,
title,
textTransform,
headingAs = "h4",
headingLevel = "h2",
}: HeaderProps) {
if (!title && !preamble && !link) {
return null
}
return (
<header className={styles.header}>
<Title
as={headingAs}
className={styles.title}
level={headingLevel}
textTransform={textTransform}
>
{title}
</Title>
{preamble && (
<Typography variant="Body/Lead text" className={styles.preamble}>
<p>{preamble}</p>
</Typography>
)}
<SectionLink link={link} variant="desktop" />
</header>
)
}

5
apps/scandic-web/components/Section/Header/index.tsx
View File

@@ -11,9 +11,8 @@ import styles from "./header.module.css"
import type { HTMLAttributes } from "react"
interface SectionHeaderProps
extends HTMLAttributes<HTMLElement>,
VariantProps<typeof headingVariants> {
heading?: string
extends HTMLAttributes<HTMLElement>, VariantProps<typeof headingVariants> {
heading?: string | null
headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
preamble?: string | null
link?: {

24
apps/scandic-web/components/TempDesignSystem/Card/card.module.css
View File

@@ -56,6 +56,9 @@
.themeOne {
background: var(--Primary-Light-Surface-Normal);
.heading {
color: var(--Primary-Light-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
@@ -63,6 +66,9 @@
.themeTwo {
background: var(--Secondary-Light-Surface-Normal);
.heading {
color: var(--Secondary-Light-On-Surface-Text);
}
.bodyText {
color: var(--Secondary-Light-On-Surface-Text);
}
@@ -70,6 +76,9 @@
.themeThree {
background: var(--Tertiary-Light-Surface-Normal);
.heading {
color: var(--Tertiary-Light-On-Surface-Text);
}
.bodyText {
color: var(--Tertiary-Light-On-Surface-Text);
}
@@ -77,6 +86,9 @@
.themePrimaryDark {
background: var(--Primary-Dark-Surface-Normal);
.heading {
color: var(--Primary-Dark-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Dark-On-Surface-Text);
}
@@ -84,6 +96,9 @@
.themePrimaryDim {
background: var(--Primary-Dim-Surface-Normal);
.heading {
color: var(--Primary-Dim-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Dim-On-Surface-Text);
}
@@ -91,6 +106,9 @@
.themePrimaryInverted {
background: var(--Base-Surface-Primary-light-Normal);
.heading {
color: var(--Primary-Light-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
@@ -98,6 +116,9 @@
.themePrimaryStrong {
background: var(--Primary-Strong-Surface-Normal);
.heading {
color: var(--Primary-Strong-On-Surface-Text);
}
.bodyText {
color: var(--Primary-Strong-On-Surface-Text);
}
@@ -107,6 +128,9 @@
.bodyText {
color: var(--Base-Text-Inverted);
}
.heading {
color: var(--Base-Text-Inverted);
}
.content {
position: absolute;
}

16
apps/scandic-web/components/TempDesignSystem/Card/index.tsx
View File

@@ -3,12 +3,11 @@ import Link from "next/link"
import Image from "@scandic-hotels/design-system/Image"
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 BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import { getButtonTheme, getScriptFontColor, getTitleFontColor } from "./utils"
import { getButtonTheme, getScriptFontColor } from "./utils"
import { cardVariants } from "./variants"
import styles from "./card.module.css"
@@ -30,7 +29,6 @@ export default function Card({
height,
}: CardProps) {
const buttonTheme = getButtonTheme(theme)
const titleFontColor = getTitleFontColor(theme)
const scriptFontColor = getScriptFontColor(theme)
return (
@@ -71,15 +69,9 @@ export default function Card({
</BiroScript>
</section>
)}
<Title
as="h3"
level="h3"
textAlign="center"
textTransform="regular"
color={titleFontColor}
>
{heading}
</Title>
<Typography variant="Title/smLowCase" className={styles.heading}>
<h3>{heading}</h3>
</Typography>
{bodyText && (
<Typography
variant="Body/Paragraph/mdRegular"

24
apps/scandic-web/components/TempDesignSystem/Card/utils.ts
View File

@@ -1,33 +1,9 @@
import type { ButtonProps } from "@scandic-hotels/design-system/OldDSButton"
import type Title from "@scandic-hotels/design-system/Title"
import type { VariantProps } from "class-variance-authority"
import type { ComponentProps } from "react"
import type { CardProps } from "@/components/TempDesignSystem/Card/card"
import type { biroScriptVariants } from "@/components/TempDesignSystem/Text/BiroScript/variants"
type TitleColor = ComponentProps<typeof Title>["color"]
export function getTitleFontColor(theme: CardProps["theme"]): TitleColor {
switch (theme) {
case "one":
return "primaryLight"
case "two":
return "secondaryLight"
case "three":
return "tertiaryLight"
case "primaryDark":
return "primaryDark"
case "primaryDim":
return "primaryDim"
case "primaryInverted":
return "primaryLight"
case "primaryStrong":
return "primaryStrong"
case "image":
return "baseText"
}
}
export function getScriptFontColor(
theme: CardProps["theme"]
): VariantProps<typeof biroScriptVariants>["color"] {

7
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/index.tsx
View File

@@ -1,7 +1,6 @@
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 { loyaltyCardVariants } from "./variants"
@@ -36,9 +35,9 @@ export default function LoyaltyCard({
dimensions={image.dimensions}
/>
) : null}
<Title as="h4" level="h3" textAlign="center">
{heading}
</Title>
<Typography variant="Title/xs" className={styles.heading}>
<h3>{heading}</h3>
</Typography>
{!!bodyText && (
<Typography
variant="Body/Paragraph/mdRegular"

4
apps/scandic-web/components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css
View File

@@ -18,6 +18,10 @@
justify-self: center;
}
.heading {
color: var(--Text-Heading);
}
.white {
background-color: var(--Main-Grey-White);
}

6
apps/scandic-web/components/Webviews/LoyaltyPage/index.tsx
View File

@@ -1,4 +1,4 @@
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { serverClient } from "@/lib/trpc/server"
@@ -22,7 +22,9 @@ export default async function AboutScandicFriends() {
<>
<section className={styles.content}>
<MaxWidth tag="main" className={styles.blocks}>
<Title>{loyaltyPage.heading}</Title>
<Typography variant="Title/md" className={styles.heading}>
<h1>{loyaltyPage.heading}</h1>
</Typography>
<Blocks blocks={loyaltyPage.blocks} />
</MaxWidth>
</section>

4
apps/scandic-web/components/Webviews/LoyaltyPage/loyaltyPage.module.css
View File

@@ -4,6 +4,10 @@
gap: var(--Space-x5);
}
.heading {
color: var(--Text-Heading);
}
.blocks {
display: grid;
gap: var(--Space-x5);