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

5
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/addedAncillaries.module.css
View File

@@ -26,6 +26,7 @@
display: flex;
justify-content: space-between;
gap: var(--Space-x1);
color: var(--Base-Text-High-contrast);
}
.ancillaryMobile {
@@ -106,3 +107,7 @@
display: flex;
gap: var(--Space-x2);
}
.ancillaryComment {
color: var(--UI-Text-Medium-contrast);
}

182
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -4,10 +4,10 @@ import { useIntl } from "react-intl"
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import Body from "@scandic-hotels/design-system/Body"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage"
@@ -47,17 +47,18 @@ export function AddedAncillaries({
</Subtitle>
{booking.ancillary?.deliveryTime && (
<div className={styles.deliveryTime}>
<Body color="baseTextHighContrast" textTransform="bold">
{intl.formatMessage({
id: "ancillaries.deliveredAt",
defaultMessage: "Delivered at:",
})}
</Body>
<Body color="baseTextHighContrast" textTransform="bold">
{booking.ancillary?.deliveryTime}
</Body>
</div>
<Typography variant="Body/Paragraph/mdBold">
<div className={styles.deliveryTime}>
<p>
{intl.formatMessage({
id: "ancillaries.deliveredAt",
defaultMessage: "Delivered at:",
})}
</p>
<p>{booking.ancillary?.deliveryTime}</p>
</div>
</Typography>
)}
</div>
@@ -90,46 +91,55 @@ export function AddedAncillaries({
{ancillary.comment && (
<>
<div className={styles.commentMobile}>
<Body textTransform="bold">
{intl.formatMessage({
id: "common.otherRequests",
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</Body>
<Body color="uiTextMediumContrast">
{ancillary.comment}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage({
id: "common.otherRequests",
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</p>
</Typography>
<Typography
variant="Body/Paragraph/mdBold"
className={styles.ancillaryComment}
>
<p>{ancillary.comment}</p>
</Typography>
</div>
</>
)}
<div className={styles.paymentMobileWrapper}>
<div className={styles.paymentMobile}>
<Body>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</Body>
<Body textTransform="bold">
{ancillary.currency.toLowerCase() === "points"
? intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.totalPrice,
}
)
: formatPrice(
intl,
ancillary.totalPrice,
ancillary.currency
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{ancillary.currency.toLowerCase() === "points"
? intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.totalPrice,
}
)
: formatPrice(
intl,
ancillary.totalPrice,
ancillary.currency
)}
</p>
</Typography>
</div>
</div>
</div>
@@ -162,33 +172,39 @@ export function AddedAncillaries({
icon="check_circle"
color="Icon/Feedback/Success"
/>
<Body textTransform="bold">{ancillaryTitle}</Body>
<Typography variant="Body/Paragraph/mdBold">
<p>{ancillaryTitle}</p>
</Typography>
</div>
<div className={styles.payment}>
<Body>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</Body>
<Body textTransform="bold">
{ancillary.currency.toLowerCase() === "points"
? intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.totalPrice,
}
)
: formatPrice(
intl,
ancillary.totalPrice,
ancillary.currency
)}
</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "common.total",
defaultMessage: "Total",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{ancillary.currency.toLowerCase() === "points"
? intl.formatMessage(
{
id: "common.numberOfPoints",
defaultMessage:
"{points, plural, one {# point} other {# points}}",
},
{
points: ancillary.totalPrice,
}
)
: formatPrice(
intl,
ancillary.totalPrice,
ancillary.currency
)}
</p>
</Typography>
</div>
</div>
@@ -198,15 +214,19 @@ export function AddedAncillaries({
<div className={styles.comment}>
{ancillary.comment && (
<>
<Body textTransform="bold">
{intl.formatMessage({
id: "common.otherRequests",
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</Body>
<Body>{ancillary.comment}</Body>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "common.otherRequests",
defaultMessage: "Other requests",
})}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{":"}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>{ancillary.comment}</p>
</Typography>
</>
)}
</div>