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

32
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/index.tsx
View File

@@ -1,9 +1,8 @@
import { Lock } from "react-feather"
import { MembershipLevelEnum } from "@scandic-hotels/common/constants/membershipLevels"
import Body from "@scandic-hotels/design-system/Body"
import Chip from "@scandic-hotels/design-system/Chip"
import Title from "@scandic-hotels/design-system/Title"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getMembershipLevel } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"
@@ -55,18 +54,23 @@ export default async function NextLevelRewardsBlock({
})}
</Chip>
<div className={styles.textContainer}>
<Body color="peach50" textAlign="center">
{intl.formatMessage(
{
id: "rewards.nextLevel.asOurLevel",
defaultMessage: "As our {level}",
},
{ level: nextLevelRewards.level?.name }
)}
</Body>
<Title level="h4" as="h4" color="pale" textAlign="center">
{reward.label}
</Title>
<Typography
variant="Body/Paragraph/mdRegular"
className={styles.asOur}
>
<p>
{intl.formatMessage(
{
id: "rewards.nextLevel.asOurLevel",
defaultMessage: "As our {level}",
},
{ level: nextLevelRewards.level?.name }
)}
</p>
</Typography>
<Typography variant="Title/xs" className={styles.rewardTitle}>
<h4>{reward.label}</h4>
</Typography>
</div>
</article>
))}

9
apps/scandic-web/components/Blocks/DynamicContent/Rewards/NextLevel/next.module.css
View File

@@ -12,4 +12,13 @@
.textContainer {
display: grid;
gap: var(--Space-x1);
text-align: center;
}
.asOur {
color: var(--Primary-Dark-On-Surface-Accent);
}
.rewardTitle {
color: var(--Scandic-Brand-Pale-Peach);
}

33
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ConfirmClose.tsx
View File

@@ -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

9
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
View File

@@ -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({

9
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
View File

@@ -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 && (

4
apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
View File

@@ -129,3 +129,7 @@
.redeemButton {
width: 100%;
}
.rewardDescription {
text-align: center;
}

2
apps/scandic-web/components/Blocks/DynamicContent/index.tsx
View File

@@ -26,9 +26,9 @@ import { ProfilingConsentBanner } from "@/components/MyPages/ProfilingConsent/Ba
import { SJWidget } from "@/components/SJWidget"
import JobylonFeed from "./JobylonFeed"
import { RewardNights } from "./RewardNights"
import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
import { RewardNights } from "./RewardNights"
export default function DynamicContent(props: DynamicContentProps) {
return (