Merged in feat/sw-620-sort-hotels (pull request #868)

Feat/sw-620 sort hotels

* SW-620 Add radio button to select box

* feat(SW-620): Implement sorting on select hotel

* Fix casing

* Shallow copy hoteldata

* Use translations

* Remove unnecessary style

* Import order

* Type


Approved-by: Pontus Dreij

components/TempDesignSystem/Select/index.tsx

@@ -35,6 +35,7 @@ export default function Select({
   tabIndex,
   value,
   maxHeight,
+  showRadioButton = false,
 }: SelectProps) {
   const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
 
@@ -88,7 +89,7 @@ export default function Select({
               {items.map((item) => (
                 <ListBoxItem
                   aria-label={String(item)}
-                  className={styles.listBoxItem}
+                  className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton}`}
                   id={item.value}
                   key={item.label}
                   data-testid={item.label}

components/TempDesignSystem/Select/select.module.css

@@ -52,11 +52,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
+  padding: var(--Spacing-x2);
 }
 
 .listBoxItem {
   padding: var(--Spacing-x1);
-  margin: var(--Spacing-x0) var(--Spacing-x2);
 }
 
 .listBoxItem[data-focused="true"],
@@ -65,3 +65,23 @@
   border-radius: var(--Corner-radius-Medium,);
   outline: none;
 }
+
+.listBoxItem.showRadioButton {
+  display: flex;
+  align-items: center;
+}
+
+.listBoxItem.showRadioButton:before {
+  display: flex;
+  content: "";
+  margin-right: var(--Spacing-x-one-and-half);
+  background-color: white;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2px var(--Base-Border-Normal);
+}
+
+.listBoxItem[data-selected="true"].showRadioButton:before {
+  box-shadow: inset 0 0 0 8px var(--UI-Input-Controls-Fill-Selected);
+}

components/TempDesignSystem/Select/select.ts

@@ -10,6 +10,7 @@ export interface SelectProps
   placeholder?: string
   value?: string | number
   maxHeight?: number
+  showRadioButton?: boolean
 }
 
 export type SelectPortalContainer = HTMLDivElement | undefined