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

Merged in chore/BOOK-701-replace-subtitle-component (pull request #3398)

Browse Source 
chore(BOOK-701): replace subtitle with typography

* chore(BOOK-701): replace subtitle with typography

* chore(BOOK-701): align center

* chore(BOOK-701): change token

* chore(BOOK-701): change text color

* fix(BOOK-704): revert pricechange dialog changes

* chore(BOOK-701): remove subtitle from package.json


Approved-by: Matilda Landström
This commit is contained in:
Bianca Widstam
2026-01-12 07:40:30 +00:00
parent a88b022186
commit 1b9273136a
43 changed files with 337 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
View File

@@ -12,7 +12,6 @@ import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/No
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Link from "@scandic-hotels/design-system/OldDSLink"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useGetPointsCurrency } from "../../bookingFlowConfig/bookingFlowConfigContext"
@@ -88,7 +87,9 @@ export default function ListingHotelCardDialog({
/>
<div>
<div className={styles.name}>
<Subtitle type="two">{name}</Subtitle>
<Typography variant="Title/Subtitle/md">
<p>{name}</p>
</Typography>
</div>
<div className={styles.facilities}>
{amenities.map((facility) => (
@@ -127,35 +128,47 @@ export default function ListingHotelCardDialog({
</Caption>
)}
<div className={styles.listingPrices}>
{publicPrice && !isUserLoggedIn && memberPrice ? (
{publicPrice && !isUserLoggedIn ? (
<>
<Subtitle type="two">
{publicPrice} {currency}
</Subtitle>
<Typography variant="Title/Subtitle/md">
<p>
{publicPrice} {currency}
</p>
</Typography>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
{memberPrice && <Caption>/</Caption>}
</>
) : (
bookingCode &&
publicPrice && (
<Subtitle type="two" color="red">
{publicPrice} {currency}
</Subtitle>
<Typography
variant="Title/Subtitle/md"
className={styles.red}
>
<p>
{publicPrice} {currency}
</p>
</Typography>
)
)}
{memberPrice && (
<Subtitle type="two" color="red">
{intl.formatMessage(
{
id: "common.priceCurrency",
defaultMessage: "{price} {currency}",
},
{
price: memberPrice,
currency,
}
)}
</Subtitle>
<Typography
variant="Title/Subtitle/md"
className={styles.red}
>
<p>
{intl.formatMessage(
{
id: "common.priceCurrency",
defaultMessage: "{price} {currency}",
},
{
price: memberPrice,
currency,
}
)}
</p>
</Typography>
)}
{redemptionPrice && (
<HotelPointsRow
@@ -164,31 +177,36 @@ export default function ListingHotelCardDialog({
/>
)}
{chequePrice && (
<Subtitle type="two">
{intl.formatMessage(
{
id: "common.priceCurrency",
defaultMessage: "{price} {currency}",
},
{
price: chequePrice.numberOfCheques,
currency: "CC",
}
)}
{chequePrice.additionalPricePerStay > 0
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
" + " +
intl.formatMessage(
<>
<Typography variant="Title/Subtitle/md">
<span>
{intl.formatMessage(
{
id: "common.priceCurrency",
defaultMessage: "{price} {currency}",
},
{
price: chequePrice.additionalPricePerStay,
currency: chequePrice.currency,
price: chequePrice.numberOfCheques,
currency: "CC",
}
)
: null}
)}
{chequePrice.additionalPricePerStay > 0
? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
" + " +
intl.formatMessage(
{
id: "common.priceCurrency",
defaultMessage: "{price} {currency}",
},
{
price: chequePrice.additionalPricePerStay,
currency: chequePrice.currency,
}
)
: null}
</span>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>
@@ -199,20 +217,24 @@ export default function ListingHotelCardDialog({
})}
</span>
</Typography>
</Subtitle>
</>
)}
{voucherPrice && (
<Subtitle type="two">
{intl.formatMessage(
{
id: "common.priceCurrency",
defaultMessage: "{price} {currency}",
},
{
price: voucherPrice,
currency,
}
)}
<>
<Typography variant="Title/Subtitle/md">
<p>
{intl.formatMessage(
{
id: "common.priceCurrency",
defaultMessage: "{price} {currency}",
},
{
price: voucherPrice,
currency,
}
)}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<span>
@@ -223,7 +245,7 @@ export default function ListingHotelCardDialog({
})}
</span>
</Typography>
</Subtitle>
</>
)}
</div>
</div>

4
packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
View File

@@ -19,6 +19,10 @@
gap: var(--Space-x15);
}
.red {
color: var(--Text-Accent-Primary);
}
.name {
height: 48px;
max-width: 180px;