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/TempDesignSystem/Form/Label/label.module.css

@@ -18,6 +18,12 @@ span.regular {
   order: 1;
 }
 
+span.discreet {
+  color: var(--Base-Text-High-contrast);
+  font-weight: 500;
+  order: unset;
+}
+
 input:active ~ .label,
 input:not(:placeholder-shown) ~ .label {
   display: block;

components/TempDesignSystem/Form/Label/variants.ts

@@ -7,6 +7,7 @@ export const labelVariants = cva(styles.label, {
     size: {
       small: styles.small,
       regular: styles.regular,
+      discreet: styles.discreet,
     },
   },
   defaultVariants: {

components/TempDesignSystem/Form/SelectChevron/index.tsx

@@ -2,10 +2,12 @@ import { ChevronDownIcon } from "@/components/Icons"
 
 import styles from "./chevron.module.css"
 
-export default function SelectChevron() {
+import type { IconProps } from "@/types/components/icon"
+
+export default function SelectChevron(props: IconProps) {
   return (
     <span aria-hidden="true" className={styles.chevron}>
-      <ChevronDownIcon color="grey80" width={20} height={20} />
+      <ChevronDownIcon color="grey80" width={20} height={20} {...props} />
     </span>
   )
 }