UHF-9500: Fix service list search component styles

src/scss/06_components/paragraphs/__index.scss

@@ -22,6 +22,7 @@
 @import 'react-search';
 @import 'remote-video';
 @import 'service-list';
+@import 'service-list-search';
 @import 'sidebar-text';
 @import 'target-group-links';
 @import 'text';

src/scss/06_components/paragraphs/_service-list-search.scss

@@ -0,0 +1,4 @@
+.component--service-list-search {
+  @include component-side-padding;
+  background-color: $color-silver-light;
+}

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

@@ -11,110 +11,9 @@
   @include breakpoint($breakpoint-l) {
     columns: 1;
   }
+
   @include breakpoint($breakpoint-xl) {
     column-gap: $spacing-triple;
     columns: 2;
   }
 }
-
-.views--service-list {
-  .form-actions [data-hds-component='button']:not([class*='hds-button']):not([data-hds-variant]), // When variant is not defined, we fallback to primary styles
-  .form-actions [data-hds-component='button']:not([class*='hds-button'])[data-hds-variant='primary'],
-  .form-actions .hds-button--primary {
-    width: 100%;
-
-    @include breakpoint($breakpoint-m) {
-      margin-left: $spacing-and-half;
-    }
-  }
-
-  .views-exposed-form {
-    border-bottom: 1px solid $color-black-10;
-    padding-bottom: $spacing-triple;
-
-    @include breakpoint($breakpoint-l) {
-      padding-bottom: $spacing-quadruple;
-    }
-
-    @include breakpoint($breakpoint-m) {
-      align-items: flex-end;
-      display: flex;
-    }
-  }
-
-  .form-item {
-    @include breakpoint($breakpoint-m) {
-      margin-bottom: 0;
-      width: 70%;
-    }
-  }
-
-  .hds-text-input__input-wrapper {
-    &::after {
-      @include pseudo-icon('search', 20px, $color-black, block);
-      position: absolute;
-      right: $spacing;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    .hds-text-input__input {
-      border-radius: 0;
-      padding-right: $spacing-triple;
-    }
-  }
-
-  .form-actions {
-    @include breakpoint($breakpoint-m) {
-      display: flex;
-      width: 30%;
-    }
-  }
-}
-
-.service-search__results {
-  margin-top: $spacing-and-half;
-
-  @include breakpoint($breakpoint-l) {
-    display: flex;
-    flex-wrap: wrap;
-    margin-inline: calc(-#{$spacing-and-half} / 2);
-    margin-top: $spacing-triple;
-  }
-
-  .views-row {
-    @include breakpoint($breakpoint-l) {
-      display: flex;
-      flex-wrap: wrap;
-      margin-left: calc(-#{$spacing-and-half} / 2);
-      margin-right: calc(-#{$spacing-and-half} / 2);
-      margin-top: $spacing-triple;
-    }
-  }
-}
-
-.views--service-list--block-search {
-  .services-search__results {
-    > .views-row + .views-row {
-      margin-top: $spacing;
-    }
-  }
-}
-
-.views--service-list--block {
-  .views-row {
-    @include breakpoint($breakpoint-l) {
-      margin-top: $spacing-and-half;
-      width: 25%;
-    }
-
-    &:nth-child(-n+4) {
-      margin-top: 0;
-    }
-  }
-}
-
-.component--service-list-search {
-  @include component-side-padding;
-  background-color: $color-silver-light;
-}

templates/views/views-view--service-list--block-search.html.twig

@@ -34,7 +34,8 @@
   set classes = [
   'views',
   'views--service-list',
-  'views--service-list--block-search',
+  'views--service-list--search',
+  'views--unit-search',
   dom_id ? 'js-view-dom-id-' ~ dom_id,
 ]
 %}
@@ -51,25 +52,25 @@
   {% endif %}
 
   {{ exposed }}
-  <div class="services-search__results" data-id-number="{{ dom_id }}">
-    <span class="service-list__count-container">
+  <div class="service-list-search__results unit-search__results" data-id-number="{{ dom_id }}">
+    <span class="service-list-search__count-container unit-search__count-container">
       {% if total_rows %}
-        <span class="service-list__count">{{ total_rows }}</span>
-        {% trans with {'context': 'Service list count'}%}service{% plural total_rows %}services{% endtrans %}
+        <span class="service-list-search__count  unit-search__count">{{ total_rows }}</span>
+        {% trans with {'context': 'Service list search count'}%}service{% plural total_rows %}services{% endtrans %}
       {% endif %}
 
       {{ empty }}
     </span>
-  </div>
-  {{ attachment_before }}
+    {{ attachment_before }}
+
+    {{ rows }}
 
-  {{ rows }}
+    {{ pager }}
 
-
-  {{ pager }}
+    {{ attachment_after }}
+    {{ more }}
 
-  {{ attachment_after }}
-  {{ more }}
+  </div>
 
   {% if footer %}
     <footer>

translations/fi.po

@@ -928,3 +928,9 @@ msgstr "Kadun eri osuuksilla on erilaiset tavoiteaikataulut auraukselle. Alla on
 msgctxt "Ploughing schedule: Result title"
 msgid "Estimated ploughing schedule"
 msgstr "Arvioitu aurausaikataulu"
+
+msgctxt "Service list search count"
+msgid "service"
+msgid_plural "services"
+msgstr[0] "palvelu"
+msgstr[1] "palvelua"

translations/sv.po

@@ -921,3 +921,9 @@ msgstr "Vi har olika mål för när olika avsnitt av gatan ska vara plogade. Ned
 msgctxt "Ploughing schedule: Result title"
 msgid "Estimated ploughing schedule"
 msgstr "Uppskattad tidsplan för plogning"
+
+msgctxt "Service list search count"
+msgid "service"
+msgid_plural "services"
+msgstr[0] "tjänst"
+msgstr[1] "tjänster"