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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

64
packages/design-system/lib/components/Title/index.tsx
View File

@@ -1,64 +0,0 @@
import { Children, ReactNode } from "react"
import { headingVariants } from "./variants"
import type { VariantProps } from "class-variance-authority"
type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5"
export interface HeadingProps
extends
Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
VariantProps<typeof headingVariants> {
as?: HeadingLevel
level?: HeadingLevel
}
/**
* @deprecated Use `Typography` instead.
*/
export default function Title({
/**
* What styling to use, based on heading level. If not provided `level`
* will determine the styling.
*/
as,
children,
className = "",
color,
/**
* What HTML tag to use. Defaults to h1.
*/
level = "h1",
textAlign,
textTransform,
...rest
}: HeadingProps) {
if (checkForEmptyChildren(children) === 0) {
return null
}
const Hx = level
const classNames = headingVariants({
className,
color,
textAlign,
textTransform,
type: as ?? level,
})
return (
<Hx {...rest} className={classNames}>
{children}
</Hx>
)
}
function checkForEmptyChildren(children: ReactNode) {
return Children.toArray(children).filter((child) => {
if (child === "") {
return false
} else if (child == null) {
return false
} else {
return true
}
}).length
}

143
packages/design-system/lib/components/Title/title.module.css
View File

@@ -1,143 +0,0 @@
.heading {
margin: 0;
padding: 0;
font-weight: 500;
}
/* Temporarily remove h1 styling until design tokens är updated */
/* .h1 {
font-family: var(--typography-Title-1-fontFamily);
font-size: clamp(
var(--typography-Title-1-Mobile-fontSize),
2.6vw + 27px,
var(--typography-Title-1-Desktop-fontSize)
);
letter-spacing: var(--typography-Title-1-letterSpacing);
line-height: var(--typography-Title-1-lineHeight);
text-decoration: var(--typography-Title-1-textDecoration);
} */
.h1 {
font-family: var(--typography-Title-2-fontFamily);
font-size: clamp(
var(--typography-Title-2-Mobile-fontSize),
2vw + 20px,
var(--typography-Title-2-Desktop-fontSize)
);
letter-spacing: var(--typography-Title-2-letterSpacing);
line-height: var(--typography-Title-2-lineHeight);
text-decoration: var(--typography-Title-2-textDecoration);
font-weight: var(--typography-Title-2-fontWeight);
}
.h2 {
font-family: var(--typography-Title-3-fontFamily);
font-size: clamp(
var(--typography-Title-3-Mobile-fontSize),
0.6vw + 27px,
var(--typography-Title-3-Desktop-fontSize)
);
letter-spacing: var(--typography-Title-3-letterSpacing);
line-height: var(--typography-Title-3-lineHeight);
text-decoration: var(--typography-Title-3-textDecoration);
font-weight: var(--typography-Title-3-fontWeight);
}
.h3 {
font-family: var(--typography-Title-4-fontFamily);
font-size: clamp(
var(--typography-Title-4-Mobile-fontSize),
0.6vw + 19px,
var(--typography-Title-4-Desktop-fontSize)
);
letter-spacing: var(--typography-Title-4-letterSpacing);
line-height: var(--typography-Title-4-lineHeight);
text-decoration: var(--typography-Title-4-textDecoration);
font-weight: var(--typography-Title-4-fontWeight);
}
.h4 {
font-family: var(--typography-Title-5-fontFamily);
font-size: clamp(
var(--typography-Title-5-Mobile-fontSize),
0.3vw + 17px,
var(--typography-Title-5-Desktop-fontSize)
);
letter-spacing: var(--typography-Title-5-letterSpacing);
line-height: var(--typography-Title-5-lineHeight);
text-decoration: var(--typography-Title-5-textDecoration);
font-weight: var(--typography-Title-5-fontWeight);
}
.capitalize {
text-transform: capitalize;
}
.regular {
text-transform: none;
}
.uppercase {
text-transform: uppercase;
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.black {
color: var(--Main-Grey-100);
}
.burgundy {
color: var(--Scandic-Brand-Burgundy);
}
.pale {
color: var(--Scandic-Brand-Pale-Peach);
}
.peach80 {
color: var(--Scandic-Peach-80);
}
.red {
color: var(--Scandic-Brand-Scandic-Red);
}
.white {
color: var(--UI-Opacity-White-100);
}
.primaryLight {
color: var(--Primary-Light-On-Surface-Text);
}
.secondaryLight {
color: var(--Secondary-Light-On-Surface-Text);
}
.tertiaryLight {
color: var(--Tertiary-Light-On-Surface-Text);
}
.primaryDark {
color: var(--Primary-Dark-On-Surface-Text);
}
.primaryDim {
color: var(--Primary-Dim-On-Surface-Text);
}
.primaryStrong {
color: var(--Primary-Strong-On-Surface-Text);
}
.baseText {
color: var(--Base-Text-Inverted);
}

47
packages/design-system/lib/components/Title/variants.ts
View File

@@ -1,47 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./title.module.css"
const config = {
variants: {
color: {
black: styles.black,
burgundy: styles.burgundy,
pale: styles.pale,
peach80: styles.peach80,
red: styles.red,
white: styles.white,
primaryLight: styles.primaryLight,
secondaryLight: styles.secondaryLight,
tertiaryLight: styles.tertiaryLight,
primaryDark: styles.primaryDark,
primaryDim: styles.primaryDim,
primaryStrong: styles.primaryStrong,
baseText: styles.baseText,
},
textAlign: {
center: styles.center,
left: styles.left,
},
textTransform: {
capitalize: styles.capitalize,
regular: styles.regular,
uppercase: styles.uppercase,
},
type: {
h1: styles.h1,
h2: styles.h2,
h3: styles.h3,
h4: styles.h4,
h5: styles.h4,
},
},
defaultVariants: {
color: "burgundy",
textAlign: "left",
textTransform: "uppercase",
type: "h1",
},
} as const
export const headingVariants = cva(styles.heading, config)

1
packages/design-system/package.json
View File

@@ -180,7 +180,6 @@
"./TextArea": "./lib/components/TextArea/index.tsx",
"./TextLink": "./lib/components/TextLink/index.tsx",
"./TextLinkButton": "./lib/components/TextLinkButton/index.tsx",
"./Title": "./lib/components/Title/index.tsx",
"./Toast": "./lib/components/Toasts/index.tsx",
"./ToastHandler": "./lib/components/Toasts/ToastHandler.tsx",
"./Tooltip": "./lib/components/Tooltip/index.tsx",