Merged in fix/SW-2121 (pull request #1747)
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
@@ -1,5 +1,6 @@
|
||||
.complete,
|
||||
.partial {
|
||||
border: none;
|
||||
align-items: center;
|
||||
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
|
||||
cursor: pointer;
|
||||
@@ -8,6 +9,12 @@
|
||||
padding: var(--Spacing-x2);
|
||||
z-index: 1;
|
||||
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 {
|
||||
@@ -15,12 +22,31 @@
|
||||
}
|
||||
|
||||
.partial {
|
||||
grid-template-columns: minmax(auto, 150px) min-content minmax(
|
||||
auto,
|
||||
150px
|
||||
) auto;
|
||||
grid-template-columns:
|
||||
minmax(auto, 150px) min-content minmax(auto, 150px)
|
||||
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 {
|
||||
align-items: center;
|
||||
background-color: var(--Base-Button-Primary-Fill-Normal);
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "react-aria-components"
|
||||
import { useWatch } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { dt } from "@/lib/dt"
|
||||
|
||||
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
||||
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 isValidJson from "@/utils/isValidJson"
|
||||
|
||||
@@ -85,68 +85,78 @@ export default function MobileToggleButton({
|
||||
totalDetails.push(totalRoomsMsg)
|
||||
|
||||
return (
|
||||
<div
|
||||
<Button
|
||||
className={locationAndDateIsSet ? styles.complete : styles.partial}
|
||||
onClick={openMobileSearch}
|
||||
role="button"
|
||||
onPress={openMobileSearch}
|
||||
>
|
||||
{!locationAndDateIsSet && (
|
||||
<>
|
||||
<div>
|
||||
<Caption type="bold" color="red">
|
||||
{intl.formatMessage({ id: "Where to?" })}
|
||||
</Caption>
|
||||
<Body color="uiTextPlaceholder">
|
||||
{parsedLocation
|
||||
? parsedLocation.name
|
||||
: intl.formatMessage({ id: "Destination" })}
|
||||
</Body>
|
||||
</div>
|
||||
<span className={styles.block}>
|
||||
<Typography variant={"Body/Supporting text (caption)/smBold"}>
|
||||
<span className={styles.blockLabel}>
|
||||
{intl.formatMessage({ id: "Where to?" })}
|
||||
</span>
|
||||
</Typography>
|
||||
<Typography variant={"Body/Paragraph/mdRegular"}>
|
||||
<span className={styles.placeholder}>
|
||||
{parsedLocation
|
||||
? parsedLocation.name
|
||||
: intl.formatMessage({ id: "Destination" })}
|
||||
</span>
|
||||
</Typography>
|
||||
</span>
|
||||
{/* Divider can't be a div */}
|
||||
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
|
||||
<div>
|
||||
<Caption type="bold" color="red">
|
||||
{totalNightsMsg}
|
||||
</Caption>
|
||||
<Body>
|
||||
{intl.formatMessage(
|
||||
{ id: "{selectedFromDate} - {selectedToDate}" },
|
||||
{
|
||||
selectedFromDate,
|
||||
selectedToDate,
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
</div>
|
||||
<div className={styles.icon}>
|
||||
<span className={styles.block}>
|
||||
<Typography variant={"Body/Supporting text (caption)/smBold"}>
|
||||
<span className={styles.blockLabel}>{totalNightsMsg}</span>
|
||||
</Typography>
|
||||
<Typography variant={"Body/Paragraph/mdRegular"}>
|
||||
<span>
|
||||
{intl.formatMessage(
|
||||
{ id: "{selectedFromDate} - {selectedToDate}" },
|
||||
{
|
||||
selectedFromDate,
|
||||
selectedToDate,
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
</span>
|
||||
<span className={styles.icon}>
|
||||
<MaterialIcon icon="search" color="Icon/Inverted" />
|
||||
</div>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
||||
{locationAndDateIsSet && (
|
||||
<>
|
||||
<div>
|
||||
<Caption color="red">{parsedLocation?.name}</Caption>
|
||||
<Caption>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
|
||||
},
|
||||
{
|
||||
selectedFromDate,
|
||||
selectedToDate,
|
||||
totalNights: totalNightsMsg,
|
||||
details: totalDetails.join(", "),
|
||||
}
|
||||
)}
|
||||
</Caption>
|
||||
</div>
|
||||
<div className={styles.icon}>
|
||||
<span className={styles.block}>
|
||||
<Typography variant={"Body/Supporting text (caption)/smRegular"}>
|
||||
<span className={styles.blockLabel}>{parsedLocation?.name}</span>
|
||||
</Typography>
|
||||
<Typography variant={"Body/Supporting text (caption)/smRegular"}>
|
||||
<span className={styles.locationAndDate}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
|
||||
},
|
||||
{
|
||||
selectedFromDate,
|
||||
selectedToDate,
|
||||
totalNights: totalNightsMsg,
|
||||
details: totalDetails.join(", "),
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
</span>
|
||||
<span className={styles.icon}>
|
||||
<MaterialIcon icon="edit_square" color="Icon/Inverted" />
|
||||
</div>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -155,25 +165,29 @@ export function MobileToggleButtonSkeleton() {
|
||||
|
||||
return (
|
||||
<div className={styles.partial}>
|
||||
<div>
|
||||
<Caption type="bold" color="red">
|
||||
{intl.formatMessage({ id: "Where to?" })}
|
||||
</Caption>
|
||||
<SkeletonShimmer height="24px" />
|
||||
</div>
|
||||
<span className={styles.block}>
|
||||
<Typography variant={"Body/Supporting text (caption)/smBold"}>
|
||||
<span className={styles.blockLabel}>
|
||||
{intl.formatMessage({ id: "Where to?" })}
|
||||
</span>
|
||||
</Typography>
|
||||
<SkeletonShimmer display={"block"} height="24px" />
|
||||
</span>
|
||||
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
|
||||
<div>
|
||||
<Caption type="bold" color="red">
|
||||
{intl.formatMessage(
|
||||
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
|
||||
{ totalNights: 0 }
|
||||
)}
|
||||
</Caption>
|
||||
<SkeletonShimmer height="24px" />
|
||||
</div>
|
||||
<div className={styles.icon}>
|
||||
<span className={styles.block}>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span className={styles.blockLabel}>
|
||||
{intl.formatMessage(
|
||||
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
|
||||
{ totalNights: 0 }
|
||||
)}
|
||||
</span>
|
||||
</Typography>
|
||||
<SkeletonShimmer display={"block"} height="24px" />
|
||||
</span>
|
||||
<span className={styles.icon}>
|
||||
<MaterialIcon icon="search" color="Icon/Inverted" />
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -12,6 +12,9 @@
|
||||
gap: var(--Spacing-x-quarter);
|
||||
}
|
||||
|
||||
.imageCountNumber {
|
||||
color: var(--Text-Inverted);
|
||||
}
|
||||
.triggerArea {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import { memo, useState } from "react"
|
||||
import { Button } from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import Image from "@/components/Image"
|
||||
import Lightbox from "@/components/Lightbox"
|
||||
|
||||
import Caption from "../TempDesignSystem/Text/Caption"
|
||||
|
||||
import styles from "./imageGallery.module.css"
|
||||
|
||||
import type { ImageGalleryProps } from "@/types/components/imageGallery"
|
||||
@@ -35,10 +35,9 @@ function ImageGallery({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
<Button
|
||||
className={`${styles.triggerArea} ${fill ? styles.fill : ""}`}
|
||||
role="button"
|
||||
onClick={() => setLightboxIsOpen(true)}
|
||||
onPress={() => setLightboxIsOpen(true)}
|
||||
aria-label={intl.formatMessage({ id: "Open image gallery" })}
|
||||
>
|
||||
<Image
|
||||
@@ -48,13 +47,13 @@ function ImageGallery({
|
||||
onError={() => setImageError(true)}
|
||||
{...imageProps}
|
||||
/>
|
||||
<div className={styles.imageCount}>
|
||||
<span className={styles.imageCount}>
|
||||
<MaterialIcon icon="filter" color="Icon/Inverted" />
|
||||
<Caption color="white" type="label">
|
||||
{images.length}
|
||||
</Caption>
|
||||
</div>
|
||||
</div>
|
||||
<Typography variant={"Body/Supporting text (caption)/smRegular"}>
|
||||
<span className={styles.imageCountNumber}>{images.length}</span>
|
||||
</Typography>
|
||||
</span>
|
||||
</Button>
|
||||
<Lightbox
|
||||
images={images}
|
||||
dialogTitle={title}
|
||||
|
||||
Reference in New Issue
Block a user