UHF-6666: Event list filter styles

src/scss/06_components/forms/__index.scss

@@ -3,4 +3,5 @@
 @import 'form';
 @import 'openid-connect-login-form';
 @import 'user-login-form';
+@import 'react-forms';
 @import 'select';

src/scss/06_components/forms/_collapsible.scss

@@ -1,53 +1,82 @@
-$collapsible_height: 56px;
+$collapsible-height: 56px;
 
 .collapsible-wrapper {
   position: relative;
 }
 
 .collapsible__element {
   border: 2px solid #808080;
-  border-radius: 2px;
 }
 
 .collapsible-container {
   align-items: center;
-  background: #fff;
-  display:flex;
-  font-size: 18px;
-  height: $collapsible_height;
-  margin-bottom: 16px;
-  padding: 12px;
+  background: $color-white;
+  display: flex;
+  height: $collapsible-height;
+  margin-bottom: $spacing;
+  padding: $spacing;
 }
 
 .collapsible__title {
-  width: calc(100% - 24px);
+  width: calc(100% - $spacing-and-half);
 }
 
 .collapsible__control {
   align-items: center;
-  background: #fff;
+  background: $color-white;
   display: flex;
   font-size: 18px;
   height: 56px;
   padding: 12px 16px;
+  text-align: start;
   width: 100%;
 
   &:hover {
     cursor: pointer;
   }
 
   &:active,
-  &:hover, {
-    border: 2px solid $color-black;
+  &:hover,
+  &:focus {
+    border-color: $color-black;
+  }
+
+  &:focus {
+    outline: 3px solid $color-black;
   }
 }
 
+.collapsible__control[aria-expanded="true"] {
+  border-bottom: 1px solid $color-black-20;
+}
+
+// Match the HDS style of outlining handle when control is focused
+.collapsible__control:focus .collapsible__handle {
+  outline: 3px solid $color-black;
+}
+
+// ... and hide the outline when dropdown is opened
+.collapsible__control[aria-expanded="true"] .collapsible__handle {
+  outline: none;
+}
+
+
+.collapsible__handle {
+  pointer-events: none;
+}
+
 .collapsible__children {
-  background-color: #fff;
+  background-color: $color-white;
+  border-top: none;
+  padding: $spacing;
   position: absolute;
-  top: $collapsible_height;
   width: 100%;
 
   // Show above other components when opened
   z-index: 2;
 }
+
+.collapsible__helper {
+  color: $color-black-60;
+  margin-top: $spacing-half;
+}

src/scss/06_components/forms/_react-forms.scss

@@ -0,0 +1,90 @@
+// Min-width for filter components in desktop. Helps preventing weird behavior with hds-dropdowns.
+$filter-component-min-width-xl: 328px;
+
+// Checkbox styles need specific selectors to override HDS styles
+.hdbt-search__filter.hdbt-search__checkbox {
+  --background-unselected: transparent;
+  --background-selected: var(--hdbt-color-black);
+  --background-hover: var(--hdbt-color-black);
+  --border-color-selected: var(--hdbt-color-black);
+  --border-color-selected-hover: var(--hdbt-color-black);
+  --border-color-selected-focus: var(--hdbt-color-black);
+  --border-color-unselected: var(--hdbt-color-black);
+  --border-color-unselected-hover: var(--hdbt-color-black);
+  --border-color-unselected-focus: var(--hdbt-color-black);
+  --icon-color-unselected: transparent;
+  --icon-color-selected: var(--hdbt-text-color);
+  --icon-color-disabled: var(--hdbt-text-color);
+  --focus-outline-color: var(--hdbt-color-black);
+}
+
+.hdbt-search__filter.hdbt-search__checkbox label {
+  font-weight: $font-weight-regular;
+}
+
+.hdbt-search__filter {
+  margin-bottom: $spacing;
+
+  @include breakpoint($breakpoint-xl) {
+    min-width: $filter-component-min-width-xl;
+  }
+}
+
+// Override HDBTs li+li style {
+.hdbt-search__filter li {
+  margin-top: 0;
+}
+
+.hdbt-search__filter label {
+  color: $color-black;
+  display: block;
+  font-weight: $font-weight-medium;
+  margin-bottom: $spacing-quarter;
+}
+
+// Need specific selector here to override HDS styles
+.hdbt-search__submit-button:not(:disabled) {
+  --background-color: var(--hdbt-color-black);
+  --background-color-hover: var(--hdbt-text-color);
+  --background-color-focus: var(--hdbt-text-color);
+  --background-color-hover-focus: var(--hdbt-text-color);
+  --border-color: var(--hdbt-color-black);
+  --border-color-hover: var(--hdbt-color-black);
+  --border-color-focus: var(--hdbt-color-black);
+  --border-color-hover-focus: var(--hdbt-color-black);
+  --color: var(--hdbt-text-color);
+  --color-hover: var(--hdbt-color-black);
+  --color-focus: var(--hdbt-color-black);
+  --color-hover-focus: var(--hdbt-color-black);
+  --focus-outline-color: var(--hdbt-color-black);
+}
+
+// Override HDS styles for date input
+.hdbt-search__filter.hdbt-search__date-input {
+  --focus-outline-color: var(--hdbt-color-black);
+}
+
+// Override HDBT table styles to fix date picker
+.hdbt-search__date-input table {
+  border: none;
+  display: table;
+  margin-top: 0;
+}
+
+.hdbt-search__date-input table tbody tr td {
+  min-width: unset;
+}
+
+.hdbt-search__date-input table thead th {
+  background: $color-white;
+  color: $color-black;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  text-align: center;
+}
+
+.hdbt-search__date-input table tbody tr td,
+.hdbt-search__date-input table thead th {
+  min-width: unset;
+}

src/scss/06_components/paragraphs/_event-list.scss

@@ -173,14 +173,6 @@ $tag-vertical-padding: 5px;
   margin-bottom: $spacing-and-half;
 }
 
-.event-list__load-more {
-  @include flex-gap($spacing);
-}
-
-.event-list__load-more-button {
-  margin-bottom: $spacing;
-}
-
 .event-list-spinner {
   position: relative;
 }
@@ -191,3 +183,22 @@ $tag-vertical-padding: 5px;
   margin-top: $spacing-triple;
   position: relative;
 }
+
+.event-form-container {
+  border-bottom: 1px solid $color-black-20;
+  margin-bottom: $spacing-double;
+}
+
+.event-form__filters-container {
+  margin-top: $spacing;
+}
+
+.event-form__filter-section-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.event-list__submit-button {
+  margin-bottom: $spacing-triple;
+  margin-top: $spacing;
+}