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

@@ -4,12 +4,12 @@ import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import { RateEnum } from "@scandic-hotels/common/constants/rate"
import { logger } from "@scandic-hotels/common/logger"
import Body from "@scandic-hotels/design-system/Body"
import Caption from "@scandic-hotels/design-system/Caption"
import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
import { useIsLoggedIn } from "../../../../../../hooks/useIsLoggedIn"
@@ -59,8 +59,12 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
<Subtitle className={styles.subtitle} color="uiTextHighContrast">
{selectedRate.roomInfo.roomType}
</Subtitle>
<Body color="uiTextMediumContrast">{rateTitle}</Body>
<Body color="uiTextHighContrast">{selectedProductTitle}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<div>
<p className={styles.uiTextMediumContrast}>{rateTitle}</p>
<p className={styles.uiTextHighContrast}>{selectedProductTitle}</p>
</div>
</Typography>
</div>
<div className={styles.imageContainer}>
{image?.src ? (

View File

@@ -33,6 +33,14 @@ div.selectedRoomPanel p.subtitle {
padding-bottom: var(--Space-x1);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
@media screen and (max-width: 767px) {
.selectedRoomPanel {
gap: var(--Space-x1);