Skip to content

Commit

Permalink
feat: hearingList label search remove bootstrap KER-346
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikkojamG
mikkojamG committed Oct 31, 2024
1 parent f36f16f commit 73a94df
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 91 deletions.
32 changes: 1 addition & 31 deletions assets/sass/kerrokantasi/_hearing-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,10 +225,6 @@
&__container {
padding-bottom: 10px;

.Select-placeholder {
color: var(--color-black-60);
}

#hearings-search-form {
scroll-margin-top: 100px;
}
Expand All @@ -244,39 +240,13 @@
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-m);
}

&__input {
--icon-size: var(--spacing-s);
}

&__select {
background-color: var(--color-white);

* {
border-radius: 0;
}

> div {
border: 2px solid var(--color-black-50) !important;

span {
background-color: var(--color-white);

span {
left: 5;
top: 1;
}
}
}

.Select-menu-outer {
> div {
border: none;
}
}
}

&__label {
width: 48%;
float: right;
Expand Down
27 changes: 11 additions & 16 deletions src/components/HearingsSearch.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
/* eslint-disable react/forbid-prop-types */
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { FormGroup, ControlLabel } from 'react-bootstrap';
import { FormattedMessage } from 'react-intl';
import Select from 'react-select';
import { isEmpty } from 'lodash';
import { SearchInput, Button } from 'hds-react';
import { SearchInput, Button, Combobox } from 'hds-react';

import getAttr from '../utils/getAttr';
import { labelShape } from '../types';
Expand All @@ -16,7 +14,6 @@ const HearingsSearch = ({ handleSearch, handleSelectLabels, labels, language, se

const labelsAsOptions = labels.map(({ label, id }) => ({
label: getAttr(label, language),
value: getAttr(label, language),
id,
}));

Expand All @@ -31,7 +28,7 @@ const HearingsSearch = ({ handleSearch, handleSelectLabels, labels, language, se
id='hearings-search-form'
>
<div className='hearings-search__controls'>
<FormGroup className='hearings-search__text' controlId='formControlsSearchText'>
<div id='formControlsSearchText' className='hearings-search__text'>
<SearchInput
className='hearings-search__input'
label={<FormattedMessage id='searchTitles' />}
Expand All @@ -41,25 +38,23 @@ const HearingsSearch = ({ handleSearch, handleSelectLabels, labels, language, se
onChange={(newValue) => setSearchValue(newValue)}
onSubmit={(value) => handleSearch(value)}
/>
</FormGroup>
<FormGroup className='hearings-search__label' controlId='formControlsSearchSelect'>
<ControlLabel>
<FormattedMessage id='searchLabels' />
</ControlLabel>
</div>
<div id='formControlsSearchSelect' className='hearings-search__label'>
{!isEmpty(labels) && (
<Select
<Combobox
label={<FormattedMessage id='searchLabels' />}
className='hearings-search__select'
isMulti
multiselect
value={selectedLabels}
options={labelsAsOptions}
onChange={(values) => {
handleSelectLabels(values);
}}
onChange={(selected) => handleSelectLabels(selected)}
placeholder={intl.formatMessage({ id: 'searchPlaceholder' })}
id='formControlsSearchSelect'
clearButtonAriaLabel={intl.formatMessage({ id: 'clear' })}
selectedItemRemoveButtonAriaLabel={intl.formatMessage({ id: 'searchLabelsRemoveSelection' })}
/>
)}
</FormGroup>
</div>
</div>
<Button className='hearings-search__button kerrokantasi-btn' type='submit'>
<FormattedMessage id='search' />
Expand Down
1 change: 1 addition & 0 deletions src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,6 +280,7 @@
"save": "Save",
"search": "Search",
"searchLabels": "Search labels",
"searchLabelsRemoveSelection": "Remove {value}",
"searchPlaceholder": "Search...",
"searchSubjects": "Search from subjects",
"searchTitles": "Search from titles",
Expand Down
1 change: 1 addition & 0 deletions src/i18n/fi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -347,6 +347,7 @@
"scenarioSection": "Vaihtoehto",
"search": "Etsi",
"searchLabels": "Hae aiheista",
"searchLabelsRemoveSelection": "Poista {value}",
"searchPlaceholder": "Etsi...",
"searchSubjects": "Etsi aiheista",
"searchTitles": "Etsi otsikoista",
Expand Down
1 change: 1 addition & 0 deletions src/i18n/sv.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@
"save": "Spara",
"search": "Sök",
"searchLabels": "Sök bland ämnena",
"searchLabelsRemoveSelection": "Ta bort {value}",
"searchPlaceholder": "Söka...",
"searchSubjects": "Sök bland ämnena",
"searchTitles": "Sök bland rubrikerna",
Expand Down
104 changes: 60 additions & 44 deletions src/views/Hearings/__tests__/__snapshots__/Hearings.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ exports[`<Hearings /> should render correctly 1`] = `
class="hearings-search__controls"
>
<div
class="hearings-search__text form-group"
class="hearings-search__text"
id="formControlsSearchText"
>
<div
class="SearchInput-module_root__sMwrY hearings-search__input"
Expand Down Expand Up @@ -104,57 +105,72 @@ exports[`<Hearings /> should render correctly 1`] = `
</div>
</div>
<div
class="hearings-search__label form-group"
class="hearings-search__label"
id="formControlsSearchSelect"
>
<label
class="control-label"
for="formControlsSearchSelect"
>
<span>
searchLabels
</span>
</label>
<div
class="Select hearings-search__select is-clearable is-searchable Select--multi"
class="Combobox-module_root__Hs8Hg Combobox-module_multiselect__3vNbJ hearings-search__select"
>
<label
class="FieldLabel-module_label__1zrXK "
for="formControlsSearchSelect-input"
id="formControlsSearchSelect-label"
>
<span>
searchLabels
</span>
</label>
<div
class="Select-control"
class="Combobox-module_wrapper__3kVTg"
>
<div
class="Select-multi-value-wrapper"
id="react-select-2--value"
<input
aria-autocomplete="list"
aria-controls="formControlsSearchSelect-menu"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby="formControlsSearchSelect-label formControlsSearchSelect-input"
aria-owns="formControlsSearchSelect-menu"
autocomplete="off"
autocorrect="off"
class="Combobox-module_input__Dcmdn"
id="formControlsSearchSelect-input"
placeholder="Etsi..."
role="combobox"
type="text"
value=""
/>
<button
aria-expanded="false"
aria-label="[object Object]: undefined"
class="Combobox-module_button__1W9PN"
id="formControlsSearchSelect-toggle-button"
tabindex="-1"
type="button"
>
<div
class="Select-placeholder"
>
Etsi...
</div>
<div
class="Select-input"
style="display: inline-block;"
<svg
aria-hidden="true"
aria-label="angle-down"
class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_s__2WGWe icon_hds-icon--size-s__2Lkik Combobox-module_angleIcon__10DvA"
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<input
aria-activedescendant="react-select-2--value"
aria-expanded="false"
aria-haspopup="false"
aria-owns=""
id="formControlsSearchSelect"
role="combobox"
style="box-sizing: content-box; width: 5px;"
value=""
<path
clip-rule="evenodd"
d="M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z"
fill="currentColor"
fill-rule="evenodd"
/>
<div
style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 100%; font-family: inherit; letter-spacing: normal; text-transform: none;"
/>
</div>
</div>
<span
class="Select-arrow-zone"
>
<span
class="Select-arrow"
/>
</span>
</svg>
</button>
<ul
aria-labelledby="formControlsSearchSelect-label"
aria-multiselectable="true"
class="Combobox-module_menu__3jA0e"
id="formControlsSearchSelect-menu"
role="listbox"
style="max-height: 260px;"
/>
</div>
</div>
</div>
Expand Down

0 comments on commit 73a94df

Please sign in to comment.