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

@@ -2,8 +2,8 @@ import React from "react"
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 { Typography } from "@scandic-hotels/design-system/Typography"
import {
calculateTotalRoomPrice,
@@ -136,12 +136,14 @@ function PaymentCard({
)}
</span>
</Caption>
<Body textTransform="bold" className={styles.priceItem}>
{formatPrice(intl, price, currency)}
{isMemberRateApplied && comparisonPrice ? (
<span>{formatPrice(intl, comparisonPrice, currency)}</span>
) : null}
</Body>
<Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
<p>
{formatPrice(intl, price, currency)}
{isMemberRateApplied && comparisonPrice && (
<span>{formatPrice(intl, comparisonPrice, currency)}</span>
)}
</p>
</Typography>
</div>
)
}

View File

@@ -2,10 +2,10 @@
import { useIntl } from "react-intl"
import Body from "@scandic-hotels/design-system/Body"
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../../../hooks/useLang"
@@ -26,26 +26,31 @@ export default function TimeoutSpinner() {
defaultMessage: "Taking longer than usual",
})}
</Subtitle>
<Body textAlign="center" className={styles.messageContainer}>
{intl.formatMessage(
{
id: "enterDetails.payment.loadingMessage",
defaultMessage:
"We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
},
{
link: (text) => (
<Link
href={routes.customerService[lang]}
textDecoration="underline"
target="_blank"
>
{text}
</Link>
),
}
)}
</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.messageContainer}
>
<p>
{intl.formatMessage(
{
id: "enterDetails.payment.loadingMessage",
defaultMessage:
"We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
},
{
link: (text) => (
<Link
href={routes.customerService[lang]}
textDecoration="underline"
target="_blank"
>
{text}
</Link>
),
}
)}
</p>
</Typography>
</div>
)
}