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

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

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