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

97
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
View File

@@ -2,11 +2,11 @@ import { useIntl } from "react-intl"
import { RateEnum } from "@scandic-hotels/common/constants/rate"
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 Footnote from "@scandic-hotels/design-system/Footnote"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
import SignupPromoDesktop from "../../../SignupPromo/Desktop"
@@ -137,15 +137,17 @@ export function DesktopSummary({
</div>
)}
<div className={styles.summaryPriceTextDesktop}>
<Body>
{intl.formatMessage(
{
id: "booking.totalPriceInclVat",
defaultMessage: "<b>Total price</b> (incl VAT)",
},
{ b: (str) => <b>{str}</b> }
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage(
{
id: "booking.totalPriceInclVat",
defaultMessage: "<b>Total price</b> (incl VAT)",
},
{ b: (str) => <b>{str}</b> }
)}
</p>
</Typography>
<Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
</div>
<div className={styles.summaryPrice}>
@@ -175,25 +177,31 @@ export function DesktopSummary({
)}
</Caption>
)}
{selectedRates.totalPrice.requested ? (
<Body color="uiTextMediumContrast">
{intl.formatMessage(
{
id: "booking.approxValue",
defaultMessage: "Approx. {value}",
},
{
value: formatPrice(
intl,
selectedRates.totalPrice.requested.price,
selectedRates.totalPrice.requested.currency,
selectedRates.totalPrice.requested.additionalPrice,
selectedRates.totalPrice.requested.additionalPriceCurrency
),
}
)}
</Body>
) : null}
{!!selectedRates.totalPrice.requested && (
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.approxPrice}
>
<p>
{intl.formatMessage(
{
id: "booking.approxValue",
defaultMessage: "Approx. {value}",
},
{
value: formatPrice(
intl,
selectedRates.totalPrice.requested.price,
selectedRates.totalPrice.requested.currency,
selectedRates.totalPrice.requested.additionalPrice,
selectedRates.totalPrice.requested
.additionalPriceCurrency
),
}
)}
</p>
</Typography>
)}
</div>
<div className={styles.summaryPriceTextMobile}>
<Caption color="uiTextHighContrast">
@@ -259,12 +267,17 @@ function RateSummary({
{ roomIndex: roomIndex + 1 }
)}
</Subtitle>
<Body color="uiTextPlaceholder">
{intl.formatMessage({
id: "booking.selectRoom",
defaultMessage: "Select room",
})}
</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.selectRoom}
>
<p>
{intl.formatMessage({
id: "booking.selectRoom",
defaultMessage: "Select room",
})}
</p>
</Typography>
</div>
)
}
@@ -279,7 +292,12 @@ function RateSummary({
{ roomIndex: roomIndex + 1 }
)}
</Subtitle>
<Body color="uiTextMediumContrast">{room.roomInfo.roomType}</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.uiTextMediumContrast}
>
<p>{room.roomInfo.roomType}</p>
</Typography>
<Caption color="uiTextMediumContrast">
{getRateDetails(room.rate)}
</Caption>
@@ -289,7 +307,12 @@ function RateSummary({
<Subtitle color="uiTextHighContrast">
{room.roomInfo.roomType}
</Subtitle>
<Body color="uiTextMediumContrast">{getRateDetails(room.rate)}</Body>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.uiTextMediumContrast}
>
<p>{getRateDetails(room.rate)}</p>
</Typography>
</>
)}
</div>

11
packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
View File

@@ -43,6 +43,9 @@
width: 100%;
gap: var(--Space-x4);
}
.approxPrice {
color: var(--UI-Text-Medium-contrast);
}
.petInfo {
border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
@@ -74,6 +77,14 @@
display: block;
}
.selectRoom {
color: var(--UI-Text-Placeholder);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}
@media (min-width: 1367px) {
.summary {
border-top: 1px solid var(--Base-Border-Subtle);