UHF-9914: Change the news item teaser layout to user card component

src/scss/06_components/pages/_news-page.scss

@@ -8,7 +8,7 @@
   padding-top: 0;
 }
 
-.news-listing__item {
+:not(.latest-news-list) > .news-listing__item {
   list-style: none;
   margin-top: $spacing-and-half;
   padding-left: 0; // Remove card paddings from news listing

templates/module/helfi-news-item/node--news-item--teaser.html.twig

@@ -1,10 +1,27 @@
-{% set has_image = false %}
-{% if content.field_main_image|render %}
-  {% set has_image = true %}
+{# Created date and modified date #}
+{% if published_at is not empty %}
+  {% set html_published_at  %}
+    <time datetime="{{ published_at|format_date('custom', 'Y-m-d') ~ 'T' ~ published_at|format_date('custom', 'H:i') }}" class="news-listing__datetime news-listing__datetime--published" {{ alternative_language ? create_attribute(({ 'lang': lang_attributes.fallback_lang, 'dir': lang_attributes.fallback_dir })) }}>
+      <span class="visually-hidden">{{ 'Published'|t({}, {'context': 'The helper text before the node published timestamp'}) }}</span>
+      {{ published_at|format_date('publication_date_format') }}
+    </time>
+  {% endset %}
+{% else %}
+  {% set html_published_at = '-' %}
 {% endif %}
 
-{% include '@hdbt/module/helfi-news-item/news-teaser-generic.twig' with {
-  class: has_image ? 'news-listing__content--with-image',
-  heading_level: 'h2',
-  show_image: true
-}%}
+{% embed '@hdbt/component/card.twig' with {
+  card_modifier_class: 'news-listing__item',
+  card_image: content.field_main_image,
+  card_title_level: 'h3',
+  card_title: short_title,
+  card_url: node_url,
+  card_metas: [
+    {
+      icon: 'clock',
+      label: 'Published'|t({}, {'context': 'Label for news card published time'}),
+      content: html_published_at
+    },
+  ],
+} %}
+{% endembed %}

templates/module/helfi-news-item/views-view-unformatted--news-archive.html.twig

@@ -1,8 +1,8 @@
-<h2 class="news-archive__heading">{{ 'All news items'|t({}, {'context': 'News archive heading'}) }}</h2>
-<ul class="news-listing news-listing--teasers">
-  {% for row in rows %}
-    <li class="news-listing__item">
-      {{- row.content -}}
-    </li>
-  {% endfor %}
-</ul>
+<div class="news-archive__heading">
+  <h2 class="news-archive__title">
+    {{ 'All news items'|t({}, {'context': 'News archive heading'}) }}
+  </h2>
+</div>
+{% for row in rows %}
+  {{- row.content -}}
+{% endfor %}

translations/fi.po

@@ -1213,3 +1213,7 @@ msgstr "Ajankohta"
 msgctxt "Event search: event type prefix"
 msgid "Show only"
 msgstr "Näytä vain"
+
+msgctxt "Label for news card published time"
+msgid "Published"
+msgstr "Julkaistu"

translations/sv.po

@@ -1215,3 +1215,7 @@ msgstr "Tidsperiod"
 msgctxt "Event search: event type prefix"
 msgid "Show only"
 msgstr "Visa endast"
+
+msgctxt "Label for news card published time"
+msgid "Published"
+msgstr "Publicerad"