Merged in feat/SW-338-filter-sort-ui (pull request #896)

Feat/SW-338 design filters and sorting on select hotel

* feat(SW-338): design hotel sort dropdown

* Translations

* feat(SW-338): style filters

* Bold

* Import type

* Translations

* Rename and add translation

* Rename translation


Approved-by: Bianca Widstam

components/HotelReservation/SelectHotel/HotelSorter/index.tsx

@@ -6,24 +6,19 @@ import { useIntl } from "react-intl"
 
 import Select from "@/components/TempDesignSystem/Select"
 
+import styles from "./hotelSorter.module.css"
+
 import {
   type SortItem,
   SortOrder,
 } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
 
-const sortItems: SortItem[] = [
-  { label: "Distance", value: SortOrder.Distance },
-  { label: "Name", value: SortOrder.Name },
-  { label: "Price", value: SortOrder.Price },
-  { label: "TripAdvisor rating", value: SortOrder.TripAdvisorRating },
-]
-
 export const DEFAULT_SORT = SortOrder.Distance
 
 export default function HotelSorter() {
   const searchParams = useSearchParams()
   const pathname = usePathname()
-  const i18n = useIntl()
+  const intl = useIntl()
 
   const onSelect = useCallback(
     (value: string | number) => {
@@ -43,14 +38,30 @@ export default function HotelSorter() {
     },
     [pathname, searchParams]
   )
+  const sortItems: SortItem[] = [
+    {
+      label: intl.formatMessage({ id: "Distance to city center" }),
+      value: SortOrder.Distance,
+    },
+    { label: intl.formatMessage({ id: "Name" }), value: SortOrder.Name },
+    { label: intl.formatMessage({ id: "Price" }), value: SortOrder.Price },
+    {
+      label: intl.formatMessage({ id: "TripAdvisor rating" }),
+      value: SortOrder.TripAdvisorRating,
+    },
+  ]
 
   return (
-    <Select
-      items={sortItems}
-      label={i18n.formatMessage({ id: "Sort by" })}
-      name="sort"
-      showRadioButton
-      onSelect={onSelect}
-    />
+    <div className={styles.container}>
+      <Select
+        items={sortItems}
+        defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
+        label={intl.formatMessage({ id: "Sort by" })}
+        name="sort"
+        showRadioButton
+        discreet
+        onSelect={onSelect}
+      />
+    </div>
   )
 }