From bb5e7b65bb97dd8c68e7306b8c5c23e634408e4f Mon Sep 17 00:00:00 2001 From: Erik Tiekstra Date: Wed, 28 May 2025 08:54:27 +0000 Subject: [PATCH] feat(SW-2144): added back-to-top button on destination map views MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Approved-by: Matilda Landström --- .../DestinationPage/CityListing/index.tsx | 6 +- .../CityMap/HotelList/hotelList.module.css | 3 +- .../CityMap/HotelListItem/index.tsx | 1 + .../HotelListing/HotelListingItem/index.tsx | 2 + .../DestinationPage/HotelListing/index.tsx | 6 +- .../ContentType/DestinationPage/Map/index.tsx | 15 +++- .../backToTopButton.module.css | 69 ++++++++----------- .../BackToTopButton/backToTopButton.ts | 9 +++ .../BackToTopButton/index.tsx | 34 ++++----- 9 files changed, 81 insertions(+), 64 deletions(-) create mode 100644 apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts diff --git a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx index 317d6db27..c8e4ae88a 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/CityListing/index.tsx @@ -66,9 +66,9 @@ export default function CityListing() { ))} - {showBackToTop && ( - - )} + {showBackToTop ? ( + + ) : null} )} diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css index 6bb8fe838..778330081 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/hotelList.module.css @@ -11,8 +11,7 @@ } .hotelList { - display: flex; - flex-direction: column; + display: grid; gap: var(--Spacing-x3); list-style: none; } diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx index aa53fd45f..494be159e 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx @@ -140,6 +140,7 @@ export default function HotelListItem(data: DestinationPagesHotelData) { variant="Tertiary" color="Primary" size="Small" + typography="Body/Paragraph/mdBold" > {intl.formatMessage({ defaultMessage: "See hotel details", diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx index fc2787466..82daaae31 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx @@ -132,6 +132,7 @@ export default function HotelListingItem(data: DestinationPagesHotelData) { color="Primary" size="Medium" wrapping={false} + typography="Body/Paragraph/mdBold" onClick={() => setActiveMarker(hotel.id)} > {intl.formatMessage({ @@ -150,6 +151,7 @@ export default function HotelListingItem(data: DestinationPagesHotelData) { variant="Tertiary" color="Primary" size="Small" + typography="Body/Paragraph/mdBold" > {intl.formatMessage({ defaultMessage: "See hotel details", diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx index 66f4d1217..6936ab6fc 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelListing/index.tsx @@ -97,9 +97,9 @@ export default function HotelListing() { ))} - {showBackToTop && ( - - )} + {showBackToTop ? ( + + ) : null} )} diff --git a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx index 271286261..8255e6725 100644 --- a/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx +++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx @@ -17,7 +17,9 @@ import { useDestinationDataStore } from "@/stores/destination-data" import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map" import DestinationFilterAndSort from "@/components/DestinationFilterAndSort" +import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton" import Button from "@/components/TempDesignSystem/Button" +import { useScrollToTop } from "@/hooks/useScrollToTop" import { debounce } from "@/utils/debounce" import DynamicMap from "./DynamicMap" @@ -52,6 +54,12 @@ export default function Map({ const activeHotel = hotels.find(({ hotel }) => hotel.id === activeHotelId) const rootDiv = useRef(null) const [mapHeight, setMapHeight] = useState("100dvh") + const scrollRef = useRef(null) + const { showBackToTop, scrollToTop } = useScrollToTop({ + threshold: 550, + elementRef: scrollRef, + refScrollable: true, + }) const intl = useIntl() @@ -145,7 +153,12 @@ export default function Map({ listType={pageType === "city" ? "hotel" : "city"} /> - + svg * { - fill: var(--Base-Button-Tertiary-On-Fill-Hover); - } - .backToTopButton { - padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); +@media screen and (max-width: 767px) { + .text { + display: none; + } +} + +@media screen and (min-width: 768px) { + .backToTopButton { + padding: 10px var(--Space-x2); } } diff --git a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts b/apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts new file mode 100644 index 000000000..11dcab760 --- /dev/null +++ b/apps/scandic-web/components/TempDesignSystem/BackToTopButton/backToTopButton.ts @@ -0,0 +1,9 @@ +import type { VariantProps } from "class-variance-authority" +import type { ComponentProps } from "react" +import type { Button } from "react-aria-components" + +import type { backToTopButtonVariants } from "./variants" + +export interface BackToTopButtonProps + extends ComponentProps, + VariantProps {} diff --git a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx b/apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx index ad8bd2c3d..82cb6184f 100644 --- a/apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/BackToTopButton/index.tsx @@ -4,30 +4,32 @@ import { Button as ButtonRAC } 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 { backToTopButtonVariants } from "./variants" import styles from "./backToTopButton.module.css" -export function BackToTopButton({ - onClick, - position, -}: { - onClick: () => void - position: "left" | "right" | "center" -}) { +import type { BackToTopButtonProps } from "./backToTopButton" + +export function BackToTopButton({ position, ...props }: BackToTopButtonProps) { const intl = useIntl() return ( - - - - {intl.formatMessage({ + + - + {...props} + > + + + {intl.formatMessage({ + defaultMessage: "Back to top", + })} + + + ) }