From 8f3d203b703c2fbbe39f170215f6c27e1f1c3d15 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Thu, 28 Nov 2024 07:42:52 +0000 Subject: [PATCH] Merged in fix/SW-1041-design-feedback-select-hotel (pull request #986) fix(SW-1041): fix UI design feedback * fix(SW-1041): fix UI design feedback * fix(SW-1041): small fix * fix(SW-1041): add filter and sort badge * fix(SW-1041): update activefilter when entering map view * fix(SW-1041): create hook with activefilters * fix(SW-1041): hook only sets filter * fix(SW-1041): fix padding breadcrumbs * fix(SW-1041): rename hook * fix(SW-1041): fix double scroll Approved-by: Pontus Dreij Approved-by: Niclas Edenvin --- .../(standard)/select-hotel/page.module.css | 2 +- .../hotelCardListing.module.css | 2 - .../filterAndSortModal.module.css | 61 ++++++++++--- .../SelectHotel/FilterAndSortModal/index.tsx | 16 +++- .../FilterCheckbox/filterCheckbox.module.css | 1 + .../HotelFilter/hotelFilter.module.css | 3 + .../SelectHotel/HotelFilter/index.tsx | 87 +++++++++---------- .../MobileMapButtonContainer/index.tsx | 13 ++- .../SelectHotelMap/selectHotelMap.module.css | 4 + components/Icons/icon.module.css | 5 ++ components/Icons/variants.ts | 1 + components/Lightbox/FullView.tsx | 6 ++ components/SidePeeks/HotelSidePeek/index.tsx | 43 ++++++--- .../SidePeek/sidePeek.module.css | 1 + hooks/useInitializeFiltersFromUrl.ts | 18 ++++ i18n/dictionaries/da.json | 6 +- i18n/dictionaries/de.json | 6 +- i18n/dictionaries/en.json | 6 +- i18n/dictionaries/fi.json | 6 +- i18n/dictionaries/no.json | 6 +- i18n/dictionaries/sv.json | 6 +- stores/hotel-filters.ts | 1 - 22 files changed, 205 insertions(+), 95 deletions(-) create mode 100644 hooks/useInitializeFiltersFromUrl.ts diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css index cb7245753..7cb413ac8 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css +++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css @@ -72,7 +72,7 @@ .header nav { display: block; max-width: var(--max-width-navigation); - padding-left: 0; + padding: 0; } .sorter { diff --git a/components/HotelReservation/HotelCardListing/hotelCardListing.module.css b/components/HotelReservation/HotelCardListing/hotelCardListing.module.css index 5a5d0ea7e..00bd7ec84 100644 --- a/components/HotelReservation/HotelCardListing/hotelCardListing.module.css +++ b/components/HotelReservation/HotelCardListing/hotelCardListing.module.css @@ -3,6 +3,4 @@ flex-direction: column; gap: var(--Spacing-x2); margin-bottom: var(--Spacing-x2); - max-height: 100vh; - overflow-y: auto; } diff --git a/components/HotelReservation/SelectHotel/FilterAndSortModal/filterAndSortModal.module.css b/components/HotelReservation/SelectHotel/FilterAndSortModal/filterAndSortModal.module.css index eab6a1c1d..5f38f2614 100644 --- a/components/HotelReservation/SelectHotel/FilterAndSortModal/filterAndSortModal.module.css +++ b/components/HotelReservation/SelectHotel/FilterAndSortModal/filterAndSortModal.module.css @@ -59,22 +59,42 @@ .content { flex-direction: column; - gap: var(--Spacing-x3); display: flex; height: 100%; } .sorter { - padding: var(--Spacing-x2); + padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x-half) + var(--Spacing-x2); flex: 0 0 auto; } +.badge { + background-color: var(--Base-Text-Accent); + border-radius: var(--Corner-radius-xLarge); + width: 20px; + height: 20px; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; +} + .filters { padding: var(--Spacing-x2); + padding-top: calc(var(--Spacing-x3) + var(--Spacing-x-half)); flex: 1 1 auto; overflow-y: auto; } +.filters ul { + margin-top: var(--Spacing-x3); +} + +.filters ul li { + padding-bottom: var(--Spacing-x1); +} + .header { text-align: right; padding: var(--Spacing-x-one-and-half); @@ -93,11 +113,15 @@ padding: 0; } +.divider { + display: none; +} + .footer { display: flex; - flex-direction: column-reverse; + flex-direction: column; gap: var(--Spacing-x1); - padding: var(--Spacing-x2); + padding: var(--Spacing-x3) var(--Spacing-x2); flex: 0 0 auto; border-top: 1px solid var(--Base-Border-Subtle); } @@ -112,6 +136,11 @@ overflow-y: auto; } + .divider { + display: block; + padding: 0 var(--Spacing-x3); + } + .header { display: grid; grid-template-columns: auto 1fr; @@ -139,6 +168,10 @@ overflow-y: unset; } + .sorter { + padding: var(--Spacing-x2); + } + .sorter, .filters, .footer, @@ -158,19 +191,27 @@ padding: var(--Spacing-x2) var(--Spacing-x3); } - .filters aside h1 { - margin-bottom: var(--Spacing-x2); + .filters aside > form { + gap: var(--Spacing-x2); } - .filters aside > div:last-child { - margin-top: var(--Spacing-x4); - padding-bottom: 0; + .filters aside form > div:last-child { + margin-top: var(--Spacing-x2); } .filters aside ul { display: grid; grid-template-columns: 1fr 1fr; - margin-top: var(--Spacing-x3); + margin-top: var(--Spacing-x1); + } + + .filters ul li:hover { + background: var(--UI-Input-Controls-Surface-Hover); + border-radius: var(--Corner-radius-Medium,); + outline: none; + } + .filters ul li { + padding: var(--Spacing-x1) var(--Spacing-x-one-and-half); } } @media screen and (min-width: 1024) { diff --git a/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx b/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx index 286042ca0..8a68a8105 100644 --- a/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx +++ b/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx @@ -13,7 +13,9 @@ import { useHotelFilterStore } from "@/stores/hotel-filters" import { CloseLargeIcon, FilterIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" +import Footnote from "@/components/TempDesignSystem/Text/Footnote" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl" import HotelFilter from "../HotelFilter" import HotelSorter from "../HotelSorter" @@ -26,15 +28,20 @@ export default function FilterAndSortModal({ filters, }: FilterAndSortModalProps) { const intl = useIntl() + useInitializeFiltersFromUrl() const resultCount = useHotelFilterStore((state) => state.resultCount) const setFilters = useHotelFilterStore((state) => state.setFilters) + const activeFilters = useHotelFilterStore((state) => state.activeFilters) return ( <> - @@ -60,7 +67,9 @@ export default function FilterAndSortModal({
- +
+ +
@@ -76,7 +85,6 @@ export default function FilterAndSortModal({ { count: resultCount } )} - diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css index 81c02fa3d..0d860f73b 100644 --- a/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css +++ b/components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css @@ -23,6 +23,10 @@ height: 44px; } +.container .listingContainer .filterContainer > button { + border: none; +} + @media (min-width: 768px) { .container .closeButton { display: flex; diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css index 1782e9b77..c17560143 100644 --- a/components/Icons/icon.module.css +++ b/components/Icons/icon.module.css @@ -82,6 +82,11 @@ fill: var(--Base-Button-Text-On-Fill-Normal); } +.baseTextHighcontrast, +.baseTextHighcontrast * { + fill: var(--Base-Text-High-contrast); +} + .disabled, .disabled * { fill: var(--Base-Text-Disabled); diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts index 24c3531c3..99e5ba5eb 100644 --- a/components/Icons/variants.ts +++ b/components/Icons/variants.ts @@ -8,6 +8,7 @@ const config = { baseButtonTertiaryOnFillNormal: styles.baseButtonTertiaryOnFillNormal, baseButtonTextOnFillNormal: styles.baseButtonTextOnFillNormal, baseIconLowContrast: styles.baseIconLowContrast, + baseTextHighcontrast: styles.baseTextHighcontrast, black: styles.black, blue: styles.blue, burgundy: styles.burgundy, diff --git a/components/Lightbox/FullView.tsx b/components/Lightbox/FullView.tsx index c1b08c49f..73308f2c2 100644 --- a/components/Lightbox/FullView.tsx +++ b/components/Lightbox/FullView.tsx @@ -20,6 +20,10 @@ export default function FullView({ currentIndex, totalImages, }: FullViewProps) { + function handleSwipe(offset: number) { + if (offset > 30) onPrev() + if (offset < -30) onNext() + } return (
) diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css index 5fb93dc80..5c2061cc9 100644 --- a/components/TempDesignSystem/SidePeek/sidePeek.module.css +++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css @@ -59,6 +59,7 @@ .dialog { height: 100%; + outline: none; } .sidePeek { diff --git a/hooks/useInitializeFiltersFromUrl.ts b/hooks/useInitializeFiltersFromUrl.ts new file mode 100644 index 000000000..6ff791064 --- /dev/null +++ b/hooks/useInitializeFiltersFromUrl.ts @@ -0,0 +1,18 @@ +import { useSearchParams } from "next/navigation" +import { useEffect } from "react" + +import { useHotelFilterStore } from "@/stores/hotel-filters" + +export default function useInitializeFiltersFromUrl() { + const searchParams = useSearchParams() + const setFilters = useHotelFilterStore((state) => state.setFilters) + + useEffect(() => { + const filtersFromUrl = searchParams.get("filters") + if (filtersFromUrl) { + setFilters(filtersFromUrl.split(",")) + } else { + setFilters([]) + } + }, [searchParams, setFilters]) +} diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 515e8e806..9bfc58fad 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -105,7 +105,7 @@ "Discard unsaved changes?": "Slette ændringer, der ikke er gemt?", "Distance in km to city centre": "{number} km til centrum", "Distance to city centre": "Afstand til centrum", - "Distance to hotel": "Afstand til hotel", + "Distance to hotel": "Afstand til hotel: {distance} m", "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte morgenbuffet?", "Done": "Færdig", "Download the Scandic app": "Download Scandic-appen", @@ -241,8 +241,8 @@ "Nordic Swan Ecolabel": "Svanemærket", "Not found": "Ikke fundet", "Nr night, nr adult": "{nights, number} nat, {adults, number} voksen", - "Number of charging points for electric cars": "Antal ladepunkter til elbiler", - "Number of parking spots": "Antal parkeringspladser", + "Number of charging points for electric cars": "Antal ladepunkter til elbiler: {number}", + "Number of parking spots": "Antal parkeringspladser: {number}", "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER", "On your journey": "På din rejse", "Only pay {amount} {currency}": "Betal kun {amount} {currency}", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index ccf322563..69c8c8956 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -105,7 +105,7 @@ "Discard unsaved changes?": "Nicht gespeicherte Änderungen verwerfen?", "Distance in km to city centre": "{number} km zum Stadtzentrum", "Distance to city centre": "Entfernung zum Stadtzentrum", - "Distance to hotel": "Entfernung zum Hotel", + "Distance to hotel": "Entfernung zum Hotel: {distance} m", "Do you want to start the day with Scandics famous breakfast buffé?": "Möchten Sie den Tag mit Scandics berühmtem Frühstücksbuffet beginnen?", "Done": "Fertig", "Download the Scandic app": "Laden Sie die Scandic-App herunter", @@ -240,8 +240,8 @@ "Nordic Swan Ecolabel": "Nordic Swan Ecolabel", "Not found": "Nicht gefunden", "Nr night, nr adult": "{nights, number} Nacht, {adults, number} Erwachsener", - "Number of charging points for electric cars": "Anzahl der Ladestationen für Elektroautos", - "Number of parking spots": "Anzahl der Parkplätze", + "Number of charging points for electric cars": "Anzahl der Ladestationen für Elektroautos: {number}", + "Number of parking spots": "Anzahl der Parkplätze: {number}", "OTHER PAYMENT METHODS": "ANDERE BEZAHLMETHODE", "On your journey": "Auf deiner Reise", "Only pay {amount} {currency}": "Nur bezahlen {amount} {currency}", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 94e1df20e..2bc086e28 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -113,7 +113,7 @@ "Discard unsaved changes?": "Discard unsaved changes?", "Distance in km to city centre": "{number} km to city centre", "Distance to city centre": "Distance to city centre", - "Distance to hotel": "Distance to hotel", + "Distance to hotel": "Distance to hotel: {distance} m", "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?", "Done": "Done", "Download invoice": "Download invoice", @@ -258,8 +258,8 @@ "Nordic Swan Ecolabel": "Nordic Swan Ecolabel", "Not found": "Not found", "Nr night, nr adult": "{nights, number} night, {adults, number} adult", - "Number of charging points for electric cars": "Number of charging points for electric cars", - "Number of parking spots": "Number of parking spots", + "Number of charging points for electric cars": "Number of charging points for electric cars: {number}", + "Number of parking spots": "Number of parking spots: {number}", "OTHER PAYMENT METHODS": "OTHER PAYMENT METHODS", "On your journey": "On your journey", "Only pay {amount} {currency}": "Only pay {amount} {currency}", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index 1623032eb..0f536a5ff 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -105,7 +105,7 @@ "Discard unsaved changes?": "Hylkäätkö tallentamattomat muutokset?", "Distance in km to city centre": "{number} km Etäisyys kaupunkiin", "Distance to city centre": "Etäisyys kaupungin keskustaan", - "Distance to hotel": "Etäisyys hotelliin", + "Distance to hotel": "Etäisyys hotelliin: {distance} m", "Do you want to start the day with Scandics famous breakfast buffé?": "Haluatko aloittaa päiväsi Scandicsin kuuluisalla aamiaisbuffella?", "Done": "Valmis", "Download the Scandic app": "Lataa Scandic-sovellus", @@ -241,8 +241,8 @@ "Nordic Swan Ecolabel": "Ympäristömerkki Miljömärkt", "Not found": "Ei löydetty", "Nr night, nr adult": "{nights, number} yö, {adults, number} aikuinen", - "Number of charging points for electric cars": "Sähköautojen latauspisteiden määrä", - "Number of parking spots": "Pysäköintipaikkojen määrä", + "Number of charging points for electric cars": "Sähköautojen latauspisteiden määrä: {number}", + "Number of parking spots": "Pysäköintipaikkojen määrä: {number}", "OTHER PAYMENT METHODS": "MUISE KORT", "On your journey": "Matkallasi", "Only pay {amount} {currency}": "Vain maksaa {amount} {currency}", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 274e9e79f..443b83bab 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -104,7 +104,7 @@ "Discard unsaved changes?": "Forkaste endringer som ikke er lagret?", "Distance in km to city centre": "{number} km til sentrum", "Distance to city centre": "Avstand til sentrum", - "Distance to hotel": "Avstand til hotell", + "Distance to hotel": "Avstand til hotell: {distance} m", "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte frokostbuffé?", "Done": "Ferdig", "Download the Scandic app": "Last ned Scandic-appen", @@ -239,8 +239,8 @@ "Nordic Swan Ecolabel": "Svanemerket", "Not found": "Ikke funnet", "Nr night, nr adult": "{nights, number} natt, {adults, number} voksen", - "Number of charging points for electric cars": "Antall ladepunkter for elbiler", - "Number of parking spots": "Antall parkeringsplasser", + "Number of charging points for electric cars": "Antall ladepunkter for elbiler: {number}", + "Number of parking spots": "Antall parkeringsplasser: {number}", "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER", "On your journey": "På reisen din", "Only pay {amount} {currency}": "Bare betal {amount} {currency}", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 09ed7c72d..94c6bd602 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -104,7 +104,7 @@ "Discard unsaved changes?": "Vill du ignorera ändringar som inte har sparats?", "Distance in km to city centre": "{number} km till centrum", "Distance to city centre": "Avstånd till centrum", - "Distance to hotel": "Avstånd till hotell", + "Distance to hotel": "Avstånd till hotell: {distance} m", "Do you want to start the day with Scandics famous breakfast buffé?": "Vill du starta dagen med Scandics berömda frukostbuffé?", "Done": "Klar", "Download the Scandic app": "Ladda ner Scandic-appen", @@ -239,8 +239,8 @@ "Nordic Swan Ecolabel": "Svanenmärkt", "Not found": "Hittades inte", "Nr night, nr adult": "{nights, number} natt, {adults, number} vuxen", - "Number of charging points for electric cars": "Antal laddplatser för elbilar", - "Number of parking spots": "Antal parkeringsplatser", + "Number of charging points for electric cars": "Antal laddplatser för elbilar: {number}", + "Number of parking spots": "Antal parkeringsplatser: {number}", "OTHER PAYMENT METHODS": "ANDRE BETALINGSMETODER", "On your journey": "På din resa", "Only pay {amount} {currency}": "Betala endast {amount} {currency}", diff --git a/stores/hotel-filters.ts b/stores/hotel-filters.ts index 1f1964024..ad550d0e6 100644 --- a/stores/hotel-filters.ts +++ b/stores/hotel-filters.ts @@ -21,7 +21,6 @@ export const useHotelFilterStore = create((set) => ({ : [...state.activeFilters, filterId] return { activeFilters: newFilters } }), - resultCount: 0, setResultCount: (count) => set({ resultCount: count }), }))