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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user