UHF-8838: SEO friendly listing for services

hdbt.theme

@@ -1670,3 +1670,20 @@ function hdbt_preprocess_external_entity__helfi_hearings(array &$variables) {
   }
 
 }
+
+/**
+ * Implements hook_theme_suggestions_alter() for container.
+ */
+function hdbt_theme_suggestions_container_alter(array &$suggestions, array &$variables) {
+  $name = '';
+  $type = '';
+  if (isset($variables['element']['#name'])) {
+    $name = $variables['element']['#name'];
+  }
+
+  if (isset($variables['element']['#type'])) {
+    $type = $variables['element']['#type'];
+  }
+
+  array_unshift($suggestions, 'container__' . $type . '__' . $name);
+}

src/scss/06_components/pages/_service.scss

@@ -14,53 +14,22 @@ $teaser-icon-size-desktop: 48px;
 }
 
 .service.service--teaser {
-  @include breakpoint($breakpoint-l) {
-    height: 100%;
-    margin-left: calc(#{$spacing-and-half} / 2);
-    margin-right: calc(#{$spacing-and-half} / 2);
-  }
-
-  .service__title {
-    @include heading-hyphens;
-    @include font('h4');
-    margin: 0;
-  }
-
-  .hel-icon {
-    --icon-size: #{$teaser-icon-size-mobile};
-    bottom: 50%;
-    left: auto;
-    position: absolute;
-    right: $spacing;
-    transform: translateY(50%);
-
-    @media (prefers-reduced-motion) {
-      transition: none;
-    }
-
-    @include pseudo-icon('arrow-right');
-
-    @include breakpoint($breakpoint-l) {
-      --icon-size: #{ $teaser-icon-size-desktop};
-      margin-top: $spacing-and-half;
-      position: static;
-      transform: none;
-      transition: transform 0.3s linear;
-    }
-  }
+  @include font('body');
 }
 
 .service.service--teaser--unpublished {
   color: var(--color-error);
 
-  .service__link {
+  .service__link,
+  a {
     border-color: var(--color-error);
     color: var(--color-error);
 
     &::before {
       opacity: 30%;
     }
   }
+
   .hel-icon {
     background-color: var(--color-error);
   }

src/scss/06_components/pages/_unit.scss

@@ -97,58 +97,8 @@
     margin-top: 0;
   }
 
-  .unit__services__count-container {
-    @include font('lead');
-    display: block;
-    margin-top: $spacing-and-half;
-    width: 100%;
-
-    .unit__services__count {
-      font-weight: $font-weight-bold;
-    }
-  }
-
   .unit__services__list {
     margin-top: $spacing-and-half;
-
-    @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;
-    }
-
-    .service {
-      width: 100%;
-
-      @include breakpoint($breakpoint-l) {
-        margin-top: $spacing-and-half;
-        width: 25%;
-      }
-
-      &:nth-child(-n+4) {
-        margin-top: 0;
-      }
-
-      @include breakpoint($breakpoint-l) {
-        width: calc(25% - #{$spacing-and-half});
-      }
-
-      // If there is 1 or 2 items inside the services listing:
-      @include content_count(1, 2) {
-        @include breakpoint($breakpoint-l) {
-          width: calc(50% - #{$spacing-and-half});
-        }
-      }
-
-      // If there 3 items inside the services listing:
-      @include content_count(3) {
-        @include breakpoint($breakpoint-l) {
-          width: calc(33.33% - #{$spacing-and-half});
-        }
-      }
-    }
   }
 }
 

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

@@ -1,3 +1,22 @@
+// Service list is divided into two columns on breakpoint-l if there is more
+// than 6 items and less than 20 items in the list.
+.service-list:has(li:nth-last-child(n+6)):not(:has(li:nth-last-child(n+21))) {
+  @include breakpoint($breakpoint-l) {
+    column-gap: $spacing-triple;
+    columns: 2;
+  }
+}
+
+.has-sidebar .main-content .service-list:has(li:nth-last-child(n+6)):not(:has(li:nth-last-child(n+21))) {
+  @include breakpoint($breakpoint-l) {
+    columns: 1;
+  }
+  @include breakpoint($breakpoint-xl) {
+    column-gap: $spacing-triple;
+    columns: 2;
+  }
+}
+
 .views--service-list {
   .form-actions .hds-button--primary {
     width: 100%;
@@ -51,36 +70,6 @@
   }
 }
 
-.service-list__count-container {
-  display: block;
-  margin-bottom: $spacing-double;
-  margin-top: $spacing-triple;
-
-  @include font('lead');
-  width: 100%;
-
-  .service-list__count {
-    font-weight: $font-weight-bold;
-  }
-}
-
-.service-list__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) {
-      width: 25%;
-    }
-  }
-}
-
 .service-search__results {
   margin-top: $spacing-and-half;
 

templates/misc/container--view--service-list.html.twig

@@ -0,0 +1 @@
+{{ children }}

templates/misc/container--view--unit-services.html.twig

@@ -0,0 +1 @@
+{{ children }}

templates/module/helfi_tpr/tpr-service.html.twig

@@ -47,13 +47,10 @@
 
   {% set wrapper_attributes = create_attribute() %}
 
-  <div{{ wrapper_attributes.addClass(service_classes) }}>
-    <a href="{{ url('entity.tpr_service.canonical', { 'tpr_service': entity.id() }) }}" class="service__link">
-      <span class="service__title">
-        {{ entity.label }}
-      </span>
-      {% include '@hdbt/misc/icon.twig' ignore missing with {icon: 'arrow-right'} %}
+  <li{{ wrapper_attributes.addClass(service_classes) }}>
+    <a href="{{ url('entity.tpr_service.canonical', { 'tpr_service': entity.id() }) }}">
+      {{ entity.label }}
     </a>
-  </div>
+  </li>
 
 {% endif %}

templates/module/helfi_tpr/tpr-unit-lower-content.html.twig

@@ -10,20 +10,7 @@
 {% set services_view = drupal_view_result('unit_services', 'unit_services')|length %}
 
 {% if services_view > 0 %}
-  {% embed "@hdbt/misc/component.twig" with
-    {
-      component_classes: [
-      'component--unit-services',
-      'component--hardcoded',
-    ]
-    }
-  %}
-    {% block component_content %}
-      <div class="unit__services">
-        {{ drupal_view('unit_services', 'unit_services') }}
-      </div>
-    {% endblock component_content %}
-  {% endembed %}
+  {{ drupal_view('unit_services', 'unit_services') }}
 {% endif %}
 
 {% if content.accessibility_sentences|render %}

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

@@ -32,24 +32,16 @@
 #}
 {%
   set classes = [
+  'service-list',
   'views--service-list',
   'views--service-list--block',
   dom_id ? 'js-view-dom-id-' ~ dom_id,
 ]
 %}
 
-<div{{attributes.addClass(classes)}}>
-  {%  if total_rows > pager_items_per_page %}
-    <span class="service-list__count-container">
-      <span class="service-list__count">{{ total_rows }}</span>
-      {% trans with {'context': 'Service list count'}%}service{% plural total_rows %}services{% endtrans %}
-    </span>
-  {% endif %}
+<ul{{attributes.addClass(classes)}}>
+  {{ rows }}
+</ul>
 
-  <div class="service-list__results">
-    {{ rows }}
-  </div>
-
-  {{ empty }}
-  {{ pager }}
-</div>
+{{ empty }}
+{{ pager }}

templates/views/views-view--unit-services.html.twig

@@ -32,29 +32,28 @@
 #}
 {%
   set classes = [
+  'service-list',
   'views',
   'views--' ~ id|clean_class,
   'views--' ~ display_id|clean_class,
-  dom_id ? 'js-view-dom-id-' ~ dom_id,
-  'unit__services__content'
+  dom_id ? 'js-view-dom-id-' ~ dom_id
 ]
 %}
+{% embed "@hdbt/misc/component.twig" with
+  {
+    component_classes: [
+      'component--service-list',
+      'component--hardcoded',
+    ],
+    component_title: 'Services'|trans
+  }
+%}
+  {% block component_content %}
+    <ul{{attributes.addClass(classes)}}>
+      {{ rows }}
+    </ul>
 
-<div{{attributes.addClass(classes)}}>
-  <div class="unit__services__header">
-    <h2 class="unit__services__title">{% trans %}Services{% endtrans %}</h2>
-    {%  if total_rows > pager_items_per_page %}
-      <span class="unit__services__count-container">
-          <span class="unit__services__count">{{ total_rows }}</span>
-          {% trans with {'context': 'Unit services count'}%}service{% plural total_rows %}services{% endtrans %}
-        </span>
-    {% endif %}
-  </div>
-
-  <div class="unit__services__list">
-    {{ rows }}
-  </div>
-
-  {{ empty }}
-  {{ pager }}
-</div>
+    {{ empty }}
+    {{ pager }}
+  {% endblock component_content %}
+{% endembed %}

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

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Theme override to display a view of unformatted rows.
+ *
+ * Available variables:
+ * - title: The title of this group of rows. May be empty.
+ * - rows: A list of the view's row items.
+ *   - attributes: The row's HTML attributes.
+ *   - content: The row's content.
+ * - view: The view object.
+ * - default_row_class: A flag indicating whether default classes should be
+ *   used on rows.
+ *
+ * @see template_preprocess_views_view_unformatted()
+ */
+#}
+
+{% for row in rows %}
+  {{- row.content -}}
+{% endfor %}