scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in chore/BOOK-739-replace-caption (pull request #3428)

Browse Source 
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
2026-01-14 09:33:27 +00:00
parent d284e82828
commit d9ec1b1f2d
53 changed files with 465 additions and 673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
View File

@@ -17,6 +17,10 @@
color: var(--Text-Default);
}
.secondaryText {
color: var(--Text-Secondary);
}
.cheque {
justify-content: end;
}

67
packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
View File

@@ -1,7 +1,6 @@
import { useIntl } from "react-intl"
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
import Caption from "../../Caption"
import styles from "./hotelChequeCard.module.css"
import { Typography } from "../../Typography"
@@ -28,17 +27,21 @@ export default function HotelChequeCard({
return (
<div className={styles.chequeCard}>
<div className={styles.chequeRow}>
<Caption>
{intl.formatMessage({
id: "common.from",
defaultMessage: "From",
})}
</Caption>
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
{intl.formatMessage({
id: "common.from",
defaultMessage: "From",
})}
</p>
</Typography>
<div className={styles.cheque}>
<Typography variant="Title/Subtitle/md">
<p>{productTypeCheque.localPrice.numberOfCheques}</p>
</Typography>
<Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>{CurrencyEnum.CC}</p>
</Typography>
{productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
// eslint-disable-next-line formatjs/no-literal-string-in-jsx
<>
@@ -46,9 +49,9 @@ export default function HotelChequeCard({
<Typography variant="Title/Subtitle/md">
<p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
</Typography>
<Caption color="uiTextHighContrast">
{productTypeCheque.localPrice.currency}
</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>{productTypeCheque.localPrice.currency}</p>
</Typography>
</>
) : null}
</div>
@@ -56,21 +59,33 @@ export default function HotelChequeCard({
{productTypeCheque.requestedPrice &&
productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
<div className={styles.chequeRow}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
id: "booking.approx",
defaultMessage: "Approx.",
})}
</Caption>
<Caption color="uiTextMediumContrast">
{productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
{productTypeCheque.requestedPrice.additionalPricePerStay
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
" + "
: ""}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.secondaryText}
>
<p>
{intl.formatMessage({
id: "booking.approx",
defaultMessage: "Approx.",
})}
</p>
</Typography>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.secondaryText}
>
<p>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{productTypeCheque.requestedPrice.numberOfCheques}{" "}
{CurrencyEnum.CC}
{productTypeCheque.requestedPrice.additionalPricePerStay
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
" + "
: ""}
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
</p>
</Typography>
</div>
) : null}
</div>