scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Niclas Edenvin
2024-11-15 07:18:30 +00:00
parent a6a0b0cf15
commit 18d40120b9
20 changed files with 159 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/TempDesignSystem/Select/index.tsx
View File

@@ -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>

22
components/TempDesignSystem/Select/select.module.css
View File

@@ -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;

1
components/TempDesignSystem/Select/select.ts
View File

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