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

Merged in fix/SW-2121 (pull request #1747)

Browse Source 
SW-2121: Fix issue where closing SidePeeks would trigger other click events

* fix: replace div with Button in BookingWidget to align press events

* fix: replace div with Button in ImageGallery to align press events


Approved-by: Michael Zetterberg
This commit is contained in:
Arvid Norlin
2025-04-07 10:28:51 +00:00
parent 7c82a565ae
commit 39059eb8b2
4 changed files with 124 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css
View File

@@ -1,5 +1,6 @@
.complete, .complete,
.partial { .partial {
border: none;
align-items: center; align-items: center;
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16); box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
cursor: pointer; cursor: pointer;
@@ -8,6 +9,12 @@
padding: var(--Spacing-x2); padding: var(--Spacing-x2);
z-index: 1; z-index: 1;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
width: 100%;
/* In some cases the lingering pressend event will trigger the */
/* webkit tap styling (but not triggering the buttons press event) */
/* To avoid this "flash" the styling is set to transparent) */
/* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
-webkit-tap-highlight-color: transparent;
} }
.complete { .complete {
@@ -15,12 +22,31 @@
} }
.partial { .partial {
grid-template-columns: minmax(auto, 150px) min-content minmax( grid-template-columns:
auto, minmax(auto, 150px) min-content minmax(auto, 150px)
150px auto;
) auto;
} }
.block {
display: block;
}
.block > * {
display: block;
text-align: start;
}
.blockLabel {
color: var(--Scandic-Red-Default);
}
.locationAndDate {
color: var(--Scandic-Grey-100);
}
.placeholder {
color: var(--Text-Interactive-Placeholder);
}
.icon { .icon {
align-items: center; align-items: center;
background-color: var(--Base-Button-Primary-Fill-Normal); background-color: var(--Base-Button-Primary-Fill-Normal);

148
apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -1,16 +1,16 @@
"use client" "use client"
import { Button } from "react-aria-components"
import { useWatch } from "react-hook-form" import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
import SkeletonShimmer from "@/components/SkeletonShimmer" import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider" import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import isValidJson from "@/utils/isValidJson" import isValidJson from "@/utils/isValidJson"
@@ -85,68 +85,78 @@ export default function MobileToggleButton({
totalDetails.push(totalRoomsMsg) totalDetails.push(totalRoomsMsg)
return ( return (
<div <Button
className={locationAndDateIsSet ? styles.complete : styles.partial} className={locationAndDateIsSet ? styles.complete : styles.partial}
onClick={openMobileSearch} onPress={openMobileSearch}
role="button"
> >
{!locationAndDateIsSet && ( {!locationAndDateIsSet && (
<> <>
<div> <span className={styles.block}>
<Caption type="bold" color="red"> <Typography variant={"Body/Supporting text (caption)/smBold"}>
{intl.formatMessage({ id: "Where to?" })} <span className={styles.blockLabel}>
</Caption> {intl.formatMessage({ id: "Where to?" })}
<Body color="uiTextPlaceholder"> </span>
{parsedLocation </Typography>
? parsedLocation.name <Typography variant={"Body/Paragraph/mdRegular"}>
: intl.formatMessage({ id: "Destination" })} <span className={styles.placeholder}>
</Body> {parsedLocation
</div> ? parsedLocation.name
: intl.formatMessage({ id: "Destination" })}
</span>
</Typography>
</span>
{/* Divider can't be a div */}
<Divider color="baseSurfaceSubtleNormal" variant="vertical" /> <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<div> <span className={styles.block}>
<Caption type="bold" color="red"> <Typography variant={"Body/Supporting text (caption)/smBold"}>
{totalNightsMsg} <span className={styles.blockLabel}>{totalNightsMsg}</span>
</Caption> </Typography>
<Body> <Typography variant={"Body/Paragraph/mdRegular"}>
{intl.formatMessage( <span>
{ id: "{selectedFromDate} - {selectedToDate}" }, {intl.formatMessage(
{ { id: "{selectedFromDate} - {selectedToDate}" },
selectedFromDate, {
selectedToDate, selectedFromDate,
} selectedToDate,
)} }
</Body> )}
</div> </span>
<div className={styles.icon}> </Typography>
</span>
<span className={styles.icon}>
<MaterialIcon icon="search" color="Icon/Inverted" /> <MaterialIcon icon="search" color="Icon/Inverted" />
</div> </span>
</> </>
)} )}
{locationAndDateIsSet && ( {locationAndDateIsSet && (
<> <>
<div> <span className={styles.block}>
<Caption color="red">{parsedLocation?.name}</Caption> <Typography variant={"Body/Supporting text (caption)/smRegular"}>
<Caption> <span className={styles.blockLabel}>{parsedLocation?.name}</span>
{intl.formatMessage( </Typography>
{ <Typography variant={"Body/Supporting text (caption)/smRegular"}>
id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}", <span className={styles.locationAndDate}>
}, {intl.formatMessage(
{ {
selectedFromDate, id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
selectedToDate, },
totalNights: totalNightsMsg, {
details: totalDetails.join(", "), selectedFromDate,
} selectedToDate,
)} totalNights: totalNightsMsg,
</Caption> details: totalDetails.join(", "),
</div> }
<div className={styles.icon}> )}
</span>
</Typography>
</span>
<span className={styles.icon}>
<MaterialIcon icon="edit_square" color="Icon/Inverted" /> <MaterialIcon icon="edit_square" color="Icon/Inverted" />
</div> </span>
</> </>
)} )}
</div> </Button>
) )
} }
@@ -155,25 +165,29 @@ export function MobileToggleButtonSkeleton() {
return ( return (
<div className={styles.partial}> <div className={styles.partial}>
<div> <span className={styles.block}>
<Caption type="bold" color="red"> <Typography variant={"Body/Supporting text (caption)/smBold"}>
{intl.formatMessage({ id: "Where to?" })} <span className={styles.blockLabel}>
</Caption> {intl.formatMessage({ id: "Where to?" })}
<SkeletonShimmer height="24px" /> </span>
</div> </Typography>
<SkeletonShimmer display={"block"} height="24px" />
</span>
<Divider color="baseSurfaceSubtleNormal" variant="vertical" /> <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<div> <span className={styles.block}>
<Caption type="bold" color="red"> <Typography variant="Body/Supporting text (caption)/smBold">
{intl.formatMessage( <span className={styles.blockLabel}>
{ id: "{totalNights, plural, one {# night} other {# nights}}" }, {intl.formatMessage(
{ totalNights: 0 } { id: "{totalNights, plural, one {# night} other {# nights}}" },
)} { totalNights: 0 }
</Caption> )}
<SkeletonShimmer height="24px" /> </span>
</div> </Typography>
<div className={styles.icon}> <SkeletonShimmer display={"block"} height="24px" />
</span>
<span className={styles.icon}>
<MaterialIcon icon="search" color="Icon/Inverted" /> <MaterialIcon icon="search" color="Icon/Inverted" />
</div> </span>
</div> </div>
) )
} }

3
apps/scandic-web/components/ImageGallery/imageGallery.module.css
View File

@@ -12,6 +12,9 @@
gap: var(--Spacing-x-quarter); gap: var(--Spacing-x-quarter);
} }
.imageCountNumber {
color: var(--Text-Inverted);
}
.triggerArea { .triggerArea {
display: flex; display: flex;
cursor: pointer; cursor: pointer;

21
apps/scandic-web/components/ImageGallery/index.tsx
View File

@@ -1,15 +1,15 @@
"use client" "use client"
import { memo, useState } from "react" import { memo, useState } from "react"
import { Button } from "react-aria-components"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Image from "@/components/Image" import Image from "@/components/Image"
import Lightbox from "@/components/Lightbox" import Lightbox from "@/components/Lightbox"
import Caption from "../TempDesignSystem/Text/Caption"
import styles from "./imageGallery.module.css" import styles from "./imageGallery.module.css"
import type { ImageGalleryProps } from "@/types/components/imageGallery" import type { ImageGalleryProps } from "@/types/components/imageGallery"
@@ -35,10 +35,9 @@ function ImageGallery({
return ( return (
<> <>
<div <Button
className={`${styles.triggerArea} ${fill ? styles.fill : ""}`} className={`${styles.triggerArea} ${fill ? styles.fill : ""}`}
role="button" onPress={() => setLightboxIsOpen(true)}
onClick={() => setLightboxIsOpen(true)}
aria-label={intl.formatMessage({ id: "Open image gallery" })} aria-label={intl.formatMessage({ id: "Open image gallery" })}
> >
<Image <Image
@@ -48,13 +47,13 @@ function ImageGallery({
onError={() => setImageError(true)} onError={() => setImageError(true)}
{...imageProps} {...imageProps}
/> />
<div className={styles.imageCount}> <span className={styles.imageCount}>
<MaterialIcon icon="filter" color="Icon/Inverted" /> <MaterialIcon icon="filter" color="Icon/Inverted" />
<Caption color="white" type="label"> <Typography variant={"Body/Supporting text (caption)/smRegular"}>
{images.length} <span className={styles.imageCountNumber}>{images.length}</span>
</Caption> </Typography>
</div> </span>
</div> </Button>
<Lightbox <Lightbox
images={images} images={images}
dialogTitle={title} dialogTitle={title}