Merge pull request #424 from City-of-Helsinki/UHF-6666-filter-styles

Uhf 6666 filter styles

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

@@ -1,5 +1,7 @@
 @import 'checkbox';
+@import 'collapsible';
 @import 'form';
 @import 'openid-connect-login-form';
 @import 'user-login-form';
+@import 'react-forms';
 @import 'select';

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

@@ -0,0 +1,82 @@
+$collapsible-height: 56px;
+
+.collapsible-wrapper {
+  position: relative;
+}
+
+.collapsible__element {
+  border: 2px solid #808080;
+}
+
+.collapsible-container {
+  align-items: center;
+  background: $color-white;
+  display: flex;
+  height: $collapsible-height;
+  margin-bottom: $spacing;
+  padding: $spacing;
+}
+
+.collapsible__title {
+  width: calc(100% - $spacing-and-half);
+}
+
+.collapsible__control {
+  align-items: center;
+  background: $color-white;
+  display: flex;
+  font-size: 18px;
+  height: 56px;
+  padding: 12px 16px;
+  text-align: start;
+  width: 100%;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:active,
+  &: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: $color-white;
+  border-top: none;
+  padding: $spacing;
+  position: absolute;
+  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,83 @@
+// 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;
+}
+
+// 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,48 @@ $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;
+
+  @include breakpoint($breakpoint-l) {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    @include flex-gap($spacing-and-half);
+  }
+}
+
+// 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__filter--date,
+.event-form__filter--location {
+  @include breakpoint($breakpoint-l) {
+    flex: 1;
+  }
+}
+
+.event-form__checkboxes-label {
+  font-weight: $font-weight-medium;
+  margin-bottom: $spacing;
+}
+
+.event-list__submit-button {
+  margin-bottom: $spacing-triple;
+  margin-top: $spacing;
+}

templates/paragraphs/paragraph--event-list.html.twig

@@ -1,4 +1,3 @@
-
 {% block paragraph %}
   {% embed "@hdbt/misc/component.twig" with
     {
@@ -13,7 +12,15 @@
   %}
     {% block component_content %}
       {# Hook React app to this div #}
-      <div id="helfi-events-search"></div>
+      <div
+        id="helfi-events-search"
+        data-events-url="{{ events_url }}"
+        data-show-location-filter="{{ field_event_location }}"
+        data-show-time-filter="{{ field_event_time }}"
+        data-show-free-events-filter="{{ field_free_events }}"
+        data-show-remote-events-filter="{{ field_remote_events }}"
+      >
+      </div>
       {# Indicate JS not enabled #}
       <noscript>
         <div class="event-list__javascript-disabled">