Wrap checkboxes in fieldset, remove legacy styles

City-of-Helsinki · Feb 10, 2025 · efb0a4c · efb0a4c
1 parent 66d173a
commit efb0a4c
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 62 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/dist/js/linkedevents.min.js b/dist/js/linkedevents.min.js
diff --git a/src/js/react/apps/linkedevents/components/CheckboxFilter.tsx b/src/js/react/apps/linkedevents/components/CheckboxFilter.tsx
@@ -34,7 +34,7 @@ function CheckboxFilter({ id, label, atom, valueKey }: CheckboxFilterProps) {
   return (
     <Checkbox
       checked={checked}
-      className="hdbt-search__filter hdbt-search__checkbox"
+      className="hdbt-search--react__checkbox"
       id={id}
       label={label}
       onChange={(event) => toggleValue(event)}

diff --git a/src/js/react/apps/linkedevents/containers/FormContainer.tsx b/src/js/react/apps/linkedevents/containers/FormContainer.tsx
@@ -94,29 +94,33 @@ function FormContainer() {
             <DateSelect />
           }
         </div>
-        {
-          bothCheckboxes &&
-          <div className='event-form__checkboxes-label'>{showOnlyLabel}</div>
-        }
-        <div className='event-form__filter-checkbox-container'>
-          {
-            showRemoteFilter &&
-              <CheckboxFilter
-                id='remote-toggle'
-                label={remoteLabel}
-                atom={remoteFilterAtom}
-                valueKey={ApiKeys.REMOTE}
-              />
-          }
+        <div className='hdbt-search--react__checkbox-filter-container'>
           {
-            showFreeFilter &&
-              <CheckboxFilter
-                id='free-toggle'
-                label={freeLabel}
-                atom={freeFilterAtom}
-                valueKey={ApiKeys.FREE}
-              />
+            bothCheckboxes &&
+            <legend className='hdbt-search--react__legend'>
+              {showOnlyLabel}
+            </legend>
           }
+          <fieldset className='hdbt-search--react__fieldset'>
+            {
+              showRemoteFilter &&
+                <CheckboxFilter
+                  id='remote-toggle'
+                  label={remoteLabel}
+                  atom={remoteFilterAtom}
+                  valueKey={ApiKeys.REMOTE}
+                />
+            }
+            {
+              showFreeFilter &&
+                <CheckboxFilter
+                  id='free-toggle'
+                  label={freeLabel}
+                  atom={freeFilterAtom}
+                  valueKey={ApiKeys.FREE}
+                />
+            }
+          </fieldset>
         </div>
         <SubmitButton disabled={errors.invalidEndDate || errors.invalidStartDate} />
         <SelectionsContainer url={url} />

diff --git a/src/scss/06_components/paragraphs/_event-list.scss b/src/scss/06_components/paragraphs/_event-list.scss
@@ -1,13 +1,3 @@
-// Image width from sketch
-$event-list-image-width: 325px;
-
-// Image height in mobile
-$event-list-image-mobile-height: 264px;
-
-// Padding values for tag elements
-$tag-horizontal-padding: 12px;
-$tag-vertical-padding: 5px;
-
 .component--event-list {
   @include component-side-padding;
 }
@@ -39,40 +29,12 @@ $tag-vertical-padding: 5px;
       flex-basis: 48%;
     }
   }
-
-  .event-form__filter-checkbox-container {
-    display: flex;
-    flex-direction: column;
-
-    .hdbt-search__checkbox {
-      margin-top: var(--spacing-2-xs);
-    }
-
-    @include breakpoint($breakpoint-m) {
-      flex-direction: row;
-      flex-wrap: wrap;
-
-      @include flex-gap($spacing-and-half);
-    }
-  }
 }
 
 .event-form__filter-section-container .hdbt-search__dropdown {
   max-width: none;
 }
 
-// Override HDS style for multiple checkboxes
-.event-form__filter-section-container .hdbt-search__checkbox:not(:first-of-type) {
-  @include breakpoint($breakpoint-l) {
-    margin-top: 0;
-  }
-}
-
-.event-form__checkboxes-label {
-  font-weight: $font-weight-medium;
-  margin-bottom: $spacing;
-}
-
 .event-list__see-all-button {
   margin-inline: auto;
   margin-top: $spacing-double;