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
2024-11-15 07:18:30 +00:00
parent a6a0b0cf15
commit 18d40120b9
20 changed files with 159 additions and 71 deletions
@@ -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;
@@ -7,6 +7,7 @@ export const labelVariants = cva(styles.label, {
    size: {
      small: styles.small,
      regular: styles.regular,
+      discreet: styles.discreet,
    },
  },
  defaultVariants: {
@@ -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>
  )
 }
@@ -36,6 +36,7 @@ export default function Select({
  value,
  maxHeight,
  showRadioButton = false,
+  discreet = false,
 }: SelectProps) {
  const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)

@@ -53,7 +54,7 @@ export default function Select({
    <div className={styles.container} ref={setRef}>
      <ReactAriaSelect
        aria-label={ariaLabel}
-        className={styles.select}
+        className={`${styles.select} ${discreet && styles.discreet}`}
        defaultSelectedKey={defaultSelectedKey}
        name={name}
        onSelectionChange={handleOnSelect}
@@ -63,12 +64,15 @@ export default function Select({
        <Body asChild fontOnly>
          <Button className={styles.input} data-testid={name}>
            <span className={styles.inputContentWrapper} tabIndex={tabIndex}>
-              <Label required={required} size="small">
+              <Label required={required} size={discreet ? "discreet" : "small"}>
                {label}
+                {discreet && `:`}
              </Label>
              <SelectValue />
            </span>
-            <SelectChevron />
+            <SelectChevron
+              {...(discreet ? { color: "baseButtonTextOnFillNormal" } : {})}
+            />
          </Button>
        </Body>
        <Body asChild fontOnly>
@@ -10,11 +10,29 @@
  gap: var(--Spacing-x-half);
 }

-.select[data-focused="true"] {
+.select[data-focused="true"],
+.select[data-focused="true"].discreet {
  border: 1px solid var(--Scandic-Blue-90);
  outline: none;
 }

+.select.discreet {
+  border: 1px solid transparent;
+}
+
+.select.discreet .input {
+  background-color: unset;
+  color: var(--Base-Text-High-contrast);
+  gap: var(--Spacing-x1);
+}
+
+.select.discreet .inputContentWrapper {
+  align-items: center;
+  justify-content: flex-end;
+  flex-direction: row;
+  font-weight: 500;
+}
+
 .input {
  align-items: center;
  background-color: var(--UI-Opacity-White-100);
@@ -72,7 +90,7 @@
 }

 .listBoxItem.showRadioButton:before {
-  display: flex;
+  flex-shrink: 0;
  content: "";
  margin-right: var(--Spacing-x-one-and-half);
  background-color: white;
@@ -11,6 +11,7 @@ export interface SelectProps
  value?: string | number
  maxHeight?: number
  showRadioButton?: boolean
+  discreet?: boolean
 }

 export type SelectPortalContainer = HTMLDivElement | undefined