Merged in chore/BOOK-739-replace-caption (pull request #3428)
chore(BOOK-739): replace caption with typography * chore(BOOK-739): replace caption with typography * chore(BOOK-739): refactor div * chore(BOOK-739): refactor badge * chore(BOOK-739): remove span * chore(BOOK-739): skeleton update * chore(BOOK-739): update * chore(BOOK-739): update reward * chore(BOOK-739): update voucher currency Approved-by: Erik Tiekstra
This commit is contained in:
Bianca Widstam
@@ -8,8 +8,8 @@ import {
|
||||
} from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import Caption from "@scandic-hotels/design-system/Caption"
|
||||
import DateSelect from "@scandic-hotels/design-system/Form/Date"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
|
||||
import useLang from "../../../../../hooks/useLang"
|
||||
@@ -70,14 +70,14 @@ export default function Signup({
|
||||
}}
|
||||
>
|
||||
<header>
|
||||
<Caption type="bold">
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span className={styles.required}>
|
||||
{intl.formatMessage({
|
||||
id: "common.birthDate",
|
||||
defaultMessage: "Birth date",
|
||||
})}
|
||||
</span>
|
||||
</Caption>
|
||||
</Typography>
|
||||
</header>
|
||||
<DateSelect
|
||||
labels={{
|
||||
|
||||
@@ -2,7 +2,6 @@ import React from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import Caption from "@scandic-hotels/design-system/Caption"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import {
|
||||
@@ -115,27 +114,25 @@ function PaymentCard({
|
||||
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<Caption
|
||||
type="bold"
|
||||
textTransform="uppercase"
|
||||
className={styles.cardTitle}
|
||||
>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{title}{" "}
|
||||
<span>
|
||||
<Typography variant="Tag/sm">
|
||||
<p>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{"/ "}
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "booking.roomIndex",
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{
|
||||
roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</Caption>
|
||||
{title}{" "}
|
||||
<span className={styles.roomInfo}>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{"/ "}
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "booking.roomIndex",
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{
|
||||
roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
|
||||
<p>
|
||||
{formatPrice(intl, price, currency)}
|
||||
|
||||
@@ -13,12 +13,8 @@
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.cardTitle > span {
|
||||
color: var(--UI-Text-Placeholder);
|
||||
.roomInfo {
|
||||
color: var(--Text-Tertiary);
|
||||
}
|
||||
|
||||
.card.inactive {
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
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"
|
||||
@@ -107,21 +106,28 @@ export default function PriceChangeSummary({
|
||||
<p>{room.roomType}</p>
|
||||
</Typography>
|
||||
<div className={styles.priceRow}>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{intl.formatMessage({
|
||||
id: "priceDetails.roomCharge",
|
||||
defaultMessage: "Room charge",
|
||||
})}
|
||||
</Caption>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "priceDetails.roomCharge",
|
||||
defaultMessage: "Room charge",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
{newPrice ? (
|
||||
<div className={styles.updatedPrice}>
|
||||
<Caption color="uiTextMediumContrast" striked>
|
||||
{formatPrice(
|
||||
intl,
|
||||
room.roomPrice.perStay.local.price,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</Caption>
|
||||
<Typography
|
||||
variant="Body/Supporting text (caption)/smRegular"
|
||||
className={styles.prevPrice}
|
||||
>
|
||||
<p>
|
||||
{formatPrice(
|
||||
intl,
|
||||
room.roomPrice.perStay.local.price,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{formatPrice(
|
||||
@@ -133,32 +139,38 @@ export default function PriceChangeSummary({
|
||||
</Typography>
|
||||
</div>
|
||||
) : (
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{formatPrice(
|
||||
intl,
|
||||
room.roomPrice.perStay.local.price,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</Caption>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>
|
||||
{formatPrice(
|
||||
intl,
|
||||
room.roomPrice.perStay.local.price,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
{room.breakfast && (
|
||||
<div className={styles.priceRow}>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{intl.formatMessage({
|
||||
id: "enterDetails.priceChangeDialog.breakfastCharge",
|
||||
defaultMessage: "Breakfast charge",
|
||||
})}
|
||||
</Caption>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{formatPrice(
|
||||
intl,
|
||||
Number(
|
||||
room.breakfast.localPrice.totalPrice
|
||||
),
|
||||
room.breakfast.localPrice.currency
|
||||
)}
|
||||
</Caption>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "enterDetails.priceChangeDialog.breakfastCharge",
|
||||
defaultMessage: "Breakfast charge",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>
|
||||
{formatPrice(
|
||||
intl,
|
||||
Number(
|
||||
room.breakfast.localPrice.totalPrice
|
||||
),
|
||||
room.breakfast.localPrice.currency
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
)}
|
||||
{room.roomFeatures?.map((feature) => (
|
||||
@@ -166,20 +178,24 @@ export default function PriceChangeSummary({
|
||||
className={styles.priceRow}
|
||||
key={feature.itemCode}
|
||||
>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{getRoomFeatureDescription(
|
||||
feature.code,
|
||||
feature.description,
|
||||
intl
|
||||
)}
|
||||
</Caption>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{formatPrice(
|
||||
intl,
|
||||
Number(feature.localPrice.totalPrice),
|
||||
feature.localPrice.currency
|
||||
)}
|
||||
</Caption>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>
|
||||
{getRoomFeatureDescription(
|
||||
feature.code,
|
||||
feature.description,
|
||||
intl
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p>
|
||||
{formatPrice(
|
||||
intl,
|
||||
Number(feature.localPrice.totalPrice),
|
||||
feature.localPrice.currency
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -59,6 +59,10 @@
|
||||
color: var(--UI-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.prevPrice {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.updatedPrice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -2,7 +2,6 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
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 { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
@@ -131,9 +130,12 @@ export default function PriceChangeDialog({
|
||||
</p>
|
||||
</Typography>
|
||||
<div className={styles.prices}>
|
||||
<Caption striked>
|
||||
{formatPrice(intl, prevTotalPrice, currency)}
|
||||
</Caption>
|
||||
<Typography
|
||||
variant="Body/Supporting text (caption)/smRegular"
|
||||
className={styles.prevPrice}
|
||||
>
|
||||
<p>{formatPrice(intl, prevTotalPrice, currency)}</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p style={{ textAlign: "center" }}>
|
||||
{formatPrice(intl, newTotalPrice, currency)}
|
||||
|
||||
@@ -63,6 +63,10 @@
|
||||
width: 100dvw;
|
||||
}
|
||||
|
||||
.prevPrice {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user