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

Merged in fix/book-751-booking-widget-tablet-skeleton (pull request #3454)

Browse Source 
fix(BOOK-751): added missing padding to tablet booking widget skeleton

* fix(BOOK-751): added missing padding to tablet booking widget skeleton


Approved-by: Bianca Widstam
Approved-by: Anton Gunnarsson
This commit is contained in:
Matilda Haneling
2026-01-20 07:43:43 +00:00
parent 042fe19f84
commit ba42690261
3 changed files with 69 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx
View File

@@ -40,28 +40,30 @@ export function VoucherSkeleton() {
})
return (
<div className={styles.optionsContainer}>
{config.bookingCodeEnabled && (
<div className={styles.voucherSkeletonContainer}>
<Typography variant="Body/Supporting text (caption)/smBold">
<label>{vouchers}</label>
</Typography>
<SkeletonShimmer width="100%" display="block" />
</div>
)}
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={styles.options}>
<div className={cx(styles.option, styles.showOnTablet)}>
<SkeletonShimmer width="24px" height="24px" />
{vouchers}
<div className={styles.skeletonContainer}>
<div className={styles.optionsContainer}>
{config.bookingCodeEnabled && (
<div className={styles.voucherSkeletonContainer}>
<Typography variant="Body/Supporting text (caption)/smBold">
<label>{vouchers}</label>
</Typography>
<SkeletonShimmer width="100%" display="block" />
</div>
)}
<Typography variant="Body/Supporting text (caption)/smRegular">
<div className={styles.options}>
<div className={cx(styles.option, styles.showOnTablet)}>
<SkeletonShimmer width="24px" height="24px" />
{vouchers}
</div>
<div className={styles.option}>
<SkeletonShimmer width="24px" height="24px" />
{reward}
<div className={styles.option}>
<SkeletonShimmer width="24px" height="24px" />
{reward}
</div>
</div>
</div>
</Typography>
</Typography>
</div>
</div>
)
}

3
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
View File

@@ -54,6 +54,9 @@
.showOnTablet {
display: flex;
}
.skeletonContainer {
padding: var(--Space-x2) 0;
}
}
@media screen and (min-width: 1367px) {

88
packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/index.tsx
View File

@@ -171,51 +171,53 @@ export function BookingWidgetFormContentSkeleton() {
return (
<div className={styles.input}>
<div className={styles.inputContainer}>
<div className={styles.where}>
<SearchSkeleton />
<div className={styles.inputRow}>
<div className={styles.inputContainer}>
<div className={styles.where}>
<SearchSkeleton />
</div>
<div className={styles.when}>
<Typography
variant="Body/Supporting text (caption)/smBold"
className={styles.label}
>
<label>
{intl.formatMessage(
{
id: "booking.numberOfNights",
defaultMessage:
"{totalNights, plural, one {# night} other {# nights}}",
},
{ totalNights: 0 }
)}
</label>
</Typography>
<SkeletonShimmer width="100%" display="block" />
</div>
<div className={styles.rooms}>
<Typography
variant="Body/Supporting text (caption)/smBold"
className={styles.label}
>
<label id="rooms-and-guests">
{intl.formatMessage({
id: "bookingWidget.label.roomsAndGuests",
defaultMessage: "Rooms & Guests",
})}
</label>
</Typography>
<SkeletonShimmer width="100%" display="block" />
</div>
</div>
<div className={styles.when}>
<Typography
variant="Body/Supporting text (caption)/smBold"
className={styles.label}
>
<label>
{intl.formatMessage(
{
id: "booking.numberOfNights",
defaultMessage:
"{totalNights, plural, one {# night} other {# nights}}",
},
{ totalNights: 0 }
)}
</label>
</Typography>
<SkeletonShimmer width="100%" display="block" />
<div className={cx(styles.buttonContainer, styles.showOnTablet)}>
<IconButton
variant="Filled"
size="xl"
type="submit"
isDisabled
iconName="search"
/>
</div>
<div className={styles.rooms}>
<Typography
variant="Body/Supporting text (caption)/smBold"
className={styles.label}
>
<label id="rooms-and-guests">
{intl.formatMessage({
id: "bookingWidget.label.roomsAndGuests",
defaultMessage: "Rooms & Guests",
})}
</label>
</Typography>
<SkeletonShimmer width="100%" display="block" />
</div>
</div>
<div className={cx(styles.buttonContainer, styles.showOnTablet)}>
<IconButton
variant="Filled"
size="xl"
type="submit"
isDisabled
iconName="search"
/>
</div>
<div className={cx(styles.voucherContainer, styles.voucherRow)}>
<VoucherSkeleton />