Merge pull request #760 from City-of-Helsinki/UHF-8748-add-selections…

…-wrapper-common-component UHF-8748: Add selections wrapper common component
City-of-Helsinki · Sep 5, 2023 · 3220b90 · 3220b90
2 parents 9c43863 + 3d0fc23
commit 3220b90
Show file tree

Hide file tree

Showing 16 changed files with 185 additions and 322 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/js/district-and-project-search.min.js b/dist/js/district-and-project-search.min.js
diff --git a/dist/js/job-search.min.js b/dist/js/job-search.min.js
diff --git a/dist/js/linkedevents.min.js b/dist/js/linkedevents.min.js
diff --git a/dist/js/news-archive.min.js b/dist/js/news-archive.min.js
diff --git a/dist/js/school-search.min.js b/dist/js/school-search.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/js/react/apps/district-and-project-search/containers/SelectionsContainer.tsx b/src/js/react/apps/district-and-project-search/containers/SelectionsContainer.tsx
@@ -1,7 +1,7 @@
-import { Button, IconCross } from 'hds-react';
 import { useAtomValue, useSetAtom } from 'jotai';
 
 import FilterButton from '@/react/common/FilterButton';
+import SelectionsWrapper from '@/react/common/SelectionsWrapper';
 import SearchComponents from '../enum/SearchComponents';
 import transformDropdownsValues from '../helpers/Params';
 import { capitalize } from '../helpers/helpers';
@@ -44,50 +44,36 @@ const SelectionsContainer = () => {
   const showProjectTypes = Boolean(urlParams.project_type?.length);
 
   return (
-    <div className='hdbt-search__selections-wrapper'>
-      <ul className='hdbt-search__selections-container content-tags__tags'>
-        {showDistricts && (
-          <ListFilter
-            updater={updateDistricts}
-            valueKey={SearchComponents.DISTRICTS}
-            values={transformDropdownsValues(urlParams.districts, districtOptions)}
-          />
-        )}
-        {showProjectThemes && (
-          <ListFilter
-            updater={updateThemes}
-            valueKey={SearchComponents.THEME}
-            values={transformDropdownsValues(urlParams.project_theme, themeOptions)}
-          />
-        )}
-        {showProjectPhases && (
-          <ListFilter
-            updater={updatePhases}
-            valueKey={SearchComponents.PHASE}
-            values={transformDropdownsValues(urlParams.project_phase, phaseOptions)}
-          />
-        )}
-        {showProjectTypes && (
-          <ListFilter
-            updater={updateTypes}
-            valueKey={SearchComponents.TYPE}
-            values={transformDropdownsValues(urlParams.project_type, typeOptions)}
-          />
-        )}
-        <li className='hdbt-search__clear-all'>
-          <Button
-            aria-hidden={showClearButton ? 'false' : 'true'}
-            className='hdbt-search__clear-all-button'
-            iconLeft={<IconCross className='hdbt-search__clear-all-icon' />}
-            onClick={resetForm}
-            style={showClearButton ? {} : { visibility: 'hidden' }}
-            variant='supplementary'
-          >
-          {Drupal.t('Clear selections', {}, { context: 'React search: clear selections' })}
-          </Button>
-        </li>
-      </ul>
-    </div>
+    <SelectionsWrapper showClearButton={showClearButton} resetForm={resetForm}>
+      {showDistricts && (
+        <ListFilter
+          updater={updateDistricts}
+          valueKey={SearchComponents.DISTRICTS}
+          values={transformDropdownsValues(urlParams.districts, districtOptions)}
+        />
+      )}
+      {showProjectThemes && (
+        <ListFilter
+          updater={updateThemes}
+          valueKey={SearchComponents.THEME}
+          values={transformDropdownsValues(urlParams.project_theme, themeOptions)}
+        />
+      )}
+      {showProjectPhases && (
+        <ListFilter
+          updater={updatePhases}
+          valueKey={SearchComponents.PHASE}
+          values={transformDropdownsValues(urlParams.project_phase, phaseOptions)}
+        />
+      )}
+      {showProjectTypes && (
+        <ListFilter
+          updater={updateTypes}
+          valueKey={SearchComponents.TYPE}
+          values={transformDropdownsValues(urlParams.project_type, typeOptions)}
+        />
+      )}
+    </SelectionsWrapper>
   );
 };
 

diff --git a/src/js/react/apps/job-search/containers/SelectionsContainer.tsx b/src/js/react/apps/job-search/containers/SelectionsContainer.tsx
@@ -1,6 +1,6 @@
-import { Button, IconCross } from 'hds-react';
 import { useAtomValue, useSetAtom } from 'jotai';
 
+import SelectionsWrapper from '@/react/common/SelectionsWrapper';
 import FilterButton from '@/react/common/FilterButton';
 import SearchComponents from '../enum/SearchComponents';
 import { getLanguageLabel } from '../helpers/Language';
@@ -42,71 +42,57 @@ const SelectionsContainer = () => {
   const showEmployment = Boolean(urlParams.employment?.length && urlParams.employment?.length > 0);
 
   return (
-    <div className='job-search-form__selections-wrapper'>
-      <ul className='job-search-form__selections-container content-tags__tags'>
-        {showTaskAreas && (
-          <ListFilter
-            updater={updateTaskAreas}
-            valueKey={SearchComponents.TASK_AREAS}
-            values={transformDropdownsValues(urlParams.task_areas, taskAreaOptions)}
-          />
-        )}
-        {showEmployment && (
-          <ListFilter
-            updater={updateEmploymentOptions}
-            valueKey={SearchComponents.EMPLOYMENT}
-            values={transformDropdownsValues(urlParams.employment, employmentOptions)}
-          />
-        )}
-        {urlParams.language && (
-          <SingleFilter
-            label={getLanguageLabel(urlParams.language)}
-            atom={languageSelectionAtom}
-            valueKey={SearchComponents.LANGUAGE}
-          />
-        )}
-        {urlParams.continuous && (
-          <CheckboxFilterPill
-            label={Drupal.t('Open-ended vacancies', {}, { context: 'Job search' })}
-            atom={continuousAtom}
-            valueKey={SearchComponents.CONTINUOUS}
-          />
-        )}
-        {urlParams.internship && (
-          <CheckboxFilterPill
-            label={Drupal.t('Practical training', {}, { context: 'Job search' })}
-            atom={internshipAtom}
-            valueKey={SearchComponents.INTERNSHIPS}
-          />
-        )}
-        {urlParams.summer_jobs && (
-          <CheckboxFilterPill
-            label={Drupal.t('Summer jobs', {}, { context: 'Job search' })}
-            atom={summerJobsAtom}
-            valueKey={SearchComponents.SUMMER_JOBS}
-          />
-        )}
-        {urlParams.youth_summer_jobs && (
-          <CheckboxFilterPill
-            label={Drupal.t('Summer jobs for young people', {}, { context: 'Job search' })}
-            atom={youthSummerJobsAtom}
-            valueKey={SearchComponents.YOUTH_SUMMER_JOBS}
-          />
-        )}
-        <li className='job-search-form__clear-all'>
-          <Button
-            aria-hidden={showClearButton ? 'false' : 'true'}
-            className='job-search-form__clear-all-button'
-            iconLeft={<IconCross className='job-search-form__clear-all-icon' />}
-            onClick={resetForm}
-            style={showClearButton ? {} : { visibility: 'hidden' }}
-            variant='supplementary'
-          >
-            {Drupal.t('Clear selections', {}, { context: 'Job search clear selections' })}
-          </Button>
-        </li>
-      </ul>
-    </div>
+    <SelectionsWrapper showClearButton={showClearButton} resetForm={resetForm}>
+      {showTaskAreas && (
+        <ListFilter
+          updater={updateTaskAreas}
+          valueKey={SearchComponents.TASK_AREAS}
+          values={transformDropdownsValues(urlParams.task_areas, taskAreaOptions)}
+        />
+      )}
+      {showEmployment && (
+        <ListFilter
+          updater={updateEmploymentOptions}
+          valueKey={SearchComponents.EMPLOYMENT}
+          values={transformDropdownsValues(urlParams.employment, employmentOptions)}
+        />
+      )}
+      {urlParams.language && (
+        <SingleFilter
+          label={getLanguageLabel(urlParams.language)}
+          atom={languageSelectionAtom}
+          valueKey={SearchComponents.LANGUAGE}
+        />
+      )}
+      {urlParams.continuous && (
+        <CheckboxFilterPill
+          label={Drupal.t('Open-ended vacancies', {}, { context: 'Job search' })}
+          atom={continuousAtom}
+          valueKey={SearchComponents.CONTINUOUS}
+        />
+      )}
+      {urlParams.internship && (
+        <CheckboxFilterPill
+          label={Drupal.t('Practical training', {}, { context: 'Job search' })}
+          atom={internshipAtom}
+          valueKey={SearchComponents.INTERNSHIPS}
+        />
+      )}
+      {urlParams.summer_jobs && (
+        <CheckboxFilterPill
+          label={Drupal.t('Summer jobs', {}, { context: 'Job search' })}
+          atom={summerJobsAtom}
+          valueKey={SearchComponents.SUMMER_JOBS}
+        />
+      )}
+      {urlParams.youth_summer_jobs && (
+        <CheckboxFilterPill
+          label={Drupal.t('Summer jobs for young people', {}, { context: 'Job search' })}
+          atom={youthSummerJobsAtom}
+          valueKey={SearchComponents.YOUTH_SUMMER_JOBS}
+        />
+      )}
+    </SelectionsWrapper>
   );
 };