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,10 +1,10 @@
import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./ancillaryCard.module.css"
@@ -30,37 +30,47 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
</div>
<div className={styles.contentContainer}>
<div>
<Body textTransform="bold" color="uiTextHighContrast">
{ancillary.title}
</Body>
<Typography
variant="Body/Paragraph/mdBold"
className={styles.ancillaryTitle}
>
<p>{ancillary.title}</p>
</Typography>
<div className={styles.price}>
<Body color="uiTextHighContrast">
{ancillary.price.included
? intl.formatMessage({
id: "common.included",
defaultMessage: "Included",
})
: priceMsg}
</Body>
<Typography>
<p>
{ancillary.price.included
? intl.formatMessage({
id: "common.included",
defaultMessage: "Included",
})
: priceMsg}
</p>
</Typography>
{ancillary.points && (
<>
<div>
<Divider variant="vertical" />
</div>
<Body textAlign="right" color="uiTextHighContrast">
{intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.points,
}
)}
</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.ancillaryPoints}
>
<p>
{intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.points,
}
)}
</p>
</Typography>
</>
)}
</div>