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
@@ -10,12 +10,12 @@ import {
|
||||
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 { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
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 { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
|
||||
|
||||
@@ -86,21 +86,25 @@ export default function PriceChangeSummary({
|
||||
return (
|
||||
<Fragment key={idx}>
|
||||
<div className={styles.rowContainer}>
|
||||
<Body textTransform="bold">
|
||||
{rooms.length > 1
|
||||
? intl.formatMessage(
|
||||
{
|
||||
id: "booking.roomIndex",
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{ roomIndex: roomNumber }
|
||||
)
|
||||
: intl.formatMessage({
|
||||
id: "common.room",
|
||||
defaultMessage: "Room",
|
||||
})}
|
||||
</Body>
|
||||
<Body>{room.roomType}</Body>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{rooms.length > 1
|
||||
? intl.formatMessage(
|
||||
{
|
||||
id: "booking.roomIndex",
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{ roomIndex: roomNumber }
|
||||
)
|
||||
: intl.formatMessage({
|
||||
id: "common.room",
|
||||
defaultMessage: "Room",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>{room.roomType}</p>
|
||||
</Typography>
|
||||
<div className={styles.priceRow}>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{intl.formatMessage({
|
||||
@@ -117,16 +121,15 @@ export default function PriceChangeSummary({
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</Caption>
|
||||
<Body
|
||||
color="uiTextMediumContrast"
|
||||
textTransform="bold"
|
||||
>
|
||||
{formatPrice(
|
||||
intl,
|
||||
newPrice,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{formatPrice(
|
||||
intl,
|
||||
newPrice,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : (
|
||||
<Caption color="uiTextMediumContrast">
|
||||
@@ -185,26 +188,32 @@ export default function PriceChangeSummary({
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.rowContainer}>
|
||||
<Body>
|
||||
{intl.formatMessage({
|
||||
id: "common.total",
|
||||
defaultMessage: "Total",
|
||||
})}
|
||||
</Body>
|
||||
<div className={styles.priceRow}>
|
||||
<Body textTransform="bold">
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "booking.priceIncludingVat",
|
||||
defaultMessage: "Price including VAT",
|
||||
id: "common.total",
|
||||
defaultMessage: "Total",
|
||||
})}
|
||||
</Body>
|
||||
<Body textTransform="bold">
|
||||
{formatPrice(
|
||||
intl,
|
||||
newTotalPrice.price,
|
||||
newTotalPrice.currency
|
||||
)}
|
||||
</Body>
|
||||
</p>
|
||||
</Typography>
|
||||
<div className={styles.priceRow}>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "booking.priceIncludingVat",
|
||||
defaultMessage: "Price including VAT",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{formatPrice(
|
||||
intl,
|
||||
newTotalPrice.price,
|
||||
newTotalPrice.currency
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
.priceRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--UI-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.updatedPrice {
|
||||
|
||||
@@ -2,12 +2,12 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
|
||||
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 { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
import Title from "@scandic-hotels/design-system/Title"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { useEnterDetailsStore } from "../../../stores/enter-details"
|
||||
import { calculateTotalRoomPrice } from "../Payment/helpers"
|
||||
@@ -112,20 +112,22 @@ export default function PriceChangeDialog({
|
||||
{title}
|
||||
</Title>
|
||||
</div>
|
||||
<Body textAlign="center">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "enterDetails.priceChangeDialog.description",
|
||||
defaultMessage:
|
||||
"Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
|
||||
},
|
||||
{
|
||||
roomSelection: roomSelectionMsg,
|
||||
newRoomSelection: newRoomSelectionMsg,
|
||||
linebreak: <br />,
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p style={{ textAlign: "center" }}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "enterDetails.priceChangeDialog.description",
|
||||
defaultMessage:
|
||||
"Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
|
||||
},
|
||||
{
|
||||
roomSelection: roomSelectionMsg,
|
||||
newRoomSelection: newRoomSelectionMsg,
|
||||
linebreak: <br />,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
<div>
|
||||
<Subtitle textAlign="center" color="burgundy">
|
||||
{intl.formatMessage({
|
||||
@@ -137,9 +139,11 @@ export default function PriceChangeDialog({
|
||||
<Caption striked>
|
||||
{formatPrice(intl, prevTotalPrice, currency)}
|
||||
</Caption>
|
||||
<Body textAlign="center" textTransform="bold">
|
||||
{formatPrice(intl, newTotalPrice, currency)}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p style={{ textAlign: "center" }}>
|
||||
{formatPrice(intl, newTotalPrice, currency)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<PriceChangeSummary
|
||||
|
||||
Reference in New Issue
Block a user