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 ( return (
<div className={styles.optionsContainer}> <div className={styles.skeletonContainer}>
{config.bookingCodeEnabled && ( <div className={styles.optionsContainer}>
<div className={styles.voucherSkeletonContainer}> {config.bookingCodeEnabled && (
<Typography variant="Body/Supporting text (caption)/smBold"> <div className={styles.voucherSkeletonContainer}>
<label>{vouchers}</label> <Typography variant="Body/Supporting text (caption)/smBold">
</Typography> <label>{vouchers}</label>
<SkeletonShimmer width="100%" display="block" /> </Typography>
</div> <SkeletonShimmer width="100%" display="block" />
)}
<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>
)}
<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}> <div className={styles.option}>
<SkeletonShimmer width="24px" height="24px" /> <SkeletonShimmer width="24px" height="24px" />
{reward} {reward}
</div>
</div> </div>
</div> </Typography>
</Typography> </div>
</div> </div>
) )
} }

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

@@ -54,6 +54,9 @@
.showOnTablet { .showOnTablet {
display: flex; display: flex;
} }
.skeletonContainer {
padding: var(--Space-x2) 0;
}
} }
@media screen and (min-width: 1367px) { @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 ( return (
<div className={styles.input}> <div className={styles.input}>
<div className={styles.inputContainer}> <div className={styles.inputRow}>
<div className={styles.where}> <div className={styles.inputContainer}>
<SearchSkeleton /> <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>
<div className={styles.when}> <div className={cx(styles.buttonContainer, styles.showOnTablet)}>
<Typography <IconButton
variant="Body/Supporting text (caption)/smBold" variant="Filled"
className={styles.label} size="xl"
> type="submit"
<label> isDisabled
{intl.formatMessage( iconName="search"
{ />
id: "booking.numberOfNights",
defaultMessage:
"{totalNights, plural, one {# night} other {# nights}}",
},
{ totalNights: 0 }
)}
</label>
</Typography>
<SkeletonShimmer width="100%" display="block" />
</div> </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>
<div className={cx(styles.voucherContainer, styles.voucherRow)}> <div className={cx(styles.voucherContainer, styles.voucherRow)}>
<VoucherSkeleton /> <VoucherSkeleton />