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

Merged in chore/replace-deprecated-body (pull request #3300)

Browse Source 
Replace deprecated <Body> with <Typography>

* chore: replace deprecated body component

* refactor: replace Body component with Typography across various components

* merge


Approved-by: Bianca Widstam
Approved-by: Matilda Landström
This commit is contained in:
Joakim Jäderberg
2025-12-09 12:45:34 +00:00
parent f40035baa9
commit 7eb74ea239
69 changed files with 755 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,34 +56,60 @@
.themeOne {
background: var(--Primary-Light-Surface-Normal);
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
}
.themeTwo {
background: var(--Secondary-Light-Surface-Normal);
.bodyText {
color: var(--Secondary-Light-On-Surface-Text);
}
}
.themeThree {
background: var(--Tertiary-Light-Surface-Normal);
.bodyText {
color: var(--Tertiary-Light-On-Surface-Text);
}
}
.themePrimaryDark {
background: var(--Primary-Dark-Surface-Normal);
.bodyText {
color: var(--Primary-Dark-On-Surface-Text);
}
}
.themePrimaryDim {
background: var(--Primary-Dim-Surface-Normal);
.bodyText {
color: var(--Primary-Dim-On-Surface-Text);
}
}
.themePrimaryInverted {
background: var(--Base-Surface-Primary-light-Normal);
.bodyText {
color: var(--Primary-Light-On-Surface-Text);
}
}
.themePrimaryStrong {
background: var(--Primary-Strong-Surface-Normal);
.bodyText {
color: var(--Primary-Strong-On-Surface-Text);
}
}
.themeImage .content {
position: absolute;
.themeImage {
.bodyText {
color: var(--Base-Text-Inverted);
}
.content {
position: absolute;
}
}
.scriptContainer {

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

@@ -1,19 +1,14 @@
import { cx } from "class-variance-authority"
import Link from "next/link"
import Body from "@scandic-hotels/design-system/Body"
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 {
getBodyFontColor,
getButtonTheme,
getScriptFontColor,
getTitleFontColor,
} from "./utils"
import { getButtonTheme, getScriptFontColor, getTitleFontColor } from "./utils"
import { cardVariants } from "./variants"
import styles from "./card.module.css"
@@ -37,7 +32,6 @@ export default function Card({
const buttonTheme = getButtonTheme(theme)
const titleFontColor = getTitleFontColor(theme)
const scriptFontColor = getScriptFontColor(theme)
const bodyFontColor = getBodyFontColor(theme)
return (
<article
@@ -65,7 +59,7 @@ export default function Card({
</div>
)}
<div className={styles.content}>
{scriptedTopTitle ? (
{scriptedTopTitle && (
<section className={styles.scriptContainer}>
<BiroScript
className={styles.scriptedTitle}
@@ -76,7 +70,7 @@ export default function Card({
{scriptedTopTitle}
</BiroScript>
</section>
) : null}
)}
<Title
as="h3"
level="h3"
@@ -86,11 +80,14 @@ export default function Card({
>
{heading}
</Title>
{bodyText ? (
<Body textAlign="center" color={bodyFontColor}>
{bodyText}
</Body>
) : null}
{bodyText && (
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.bodyText}
>
<p>{bodyText}</p>
</Typography>
)}
<div className={styles.buttonContainer}>
{primaryButton ? (
<Button

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

@@ -1,4 +1,3 @@
import type Body from "@scandic-hotels/design-system/Body"
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"
@@ -52,28 +51,6 @@ export function getScriptFontColor(
}
}
type BodyColor = ComponentProps<typeof Body>["color"]
export function getBodyFontColor(theme: CardProps["theme"]): BodyColor {
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 getButtonTheme(
theme: CardProps["theme"]
): ButtonProps["theme"] {