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,8 +1,8 @@
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
import Title from "@scandic-hotels/design-system/Title"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import useRedeemFlow from "./useRedeemFlow"
|
||||
|
||||
@@ -21,19 +21,24 @@ export function ConfirmClose({ close }: { close: () => void }) {
|
||||
defaultMessage: "If you close this your benefit will be removed",
|
||||
})}
|
||||
</Title>
|
||||
<Body>
|
||||
{intl.formatMessage({
|
||||
id: "redeem.confirmClose.question",
|
||||
defaultMessage: "Have you showed this benefit to the hotel staff?",
|
||||
})}
|
||||
</Body>
|
||||
<Body>
|
||||
{intl.formatMessage({
|
||||
id: "redeem.confirmClose.info",
|
||||
defaultMessage:
|
||||
"If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
|
||||
})}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "redeem.confirmClose.question",
|
||||
defaultMessage:
|
||||
"Have you showed this benefit to the hotel staff?",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "redeem.confirmClose.info",
|
||||
defaultMessage:
|
||||
"If not, please go back and do so before you close this. Once you close this your benefit will be void and removed from My Benefits.",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
<footer className={styles.modalFooter}>
|
||||
<Button
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
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 Title from "@scandic-hotels/design-system/Title"
|
||||
import { toast } from "@scandic-hotels/design-system/Toast"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { RewardIcon } from "../../RewardIcon"
|
||||
|
||||
@@ -25,7 +25,12 @@ export default function Campaign({ reward }: { reward: Campaign }) {
|
||||
<Title level="h3" textAlign="center" textTransform="regular">
|
||||
{reward.label}
|
||||
</Title>
|
||||
<Body textAlign="center">{reward.description}</Body>
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.rewardDescription}
|
||||
>
|
||||
<p>{reward.description}</p>
|
||||
</Typography>
|
||||
<div className={styles.rewardBadge}>
|
||||
<Caption textAlign="center" color="uiTextHighContrast" type="bold">
|
||||
{intl.formatMessage({
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
import Title from "@scandic-hotels/design-system/Title"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
|
||||
|
||||
@@ -50,7 +50,12 @@ export default function Tier({
|
||||
{reward.redeemLocation !== "Non-redeemable" && (
|
||||
<>
|
||||
{redeemStep === "initial" && (
|
||||
<Body textAlign="center">{reward.description}</Body>
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.rewardDescription}
|
||||
>
|
||||
<p>{reward.description}</p>
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{redeemStep === "confirmation" && reward.redeem_description && (
|
||||
|
||||
@@ -129,3 +129,7 @@
|
||||
.redeemButton {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rewardDescription {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user