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

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