UHF-10259: Curated event list

src/scss/06_components/__index.scss

@@ -15,3 +15,4 @@
 @import 'tags';
 @import 'throbber';
 @import 'editorially';
+@import 'linkedevents-event';

src/scss/06_components/_linkedevents-event.scss

@@ -0,0 +1,73 @@
+// @todo: Move these styles to generice teaser file
+// https://helsinkisolutionoffice.atlassian.net/browse/UHF-10868
+.linkedevents-event {
+  display: flex;
+  height: 100%;
+
+  @include breakpoint($breakpoint-m) {
+    flex-direction: column;
+    padding-bottom: 0;
+  }
+}
+
+.linkedevents-event__title {
+  @include font(h5);
+  margin-bottom: $spacing-half;
+  margin-top: 0;
+
+  @include breakpoint($breakpoint-l) {
+    @include font(h4);
+  }
+}
+
+.linkedevents-event__title a::after {
+  bottom: 0;
+  content: '';
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.linkedevents-event__text-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-inline-start: $spacing;
+  width: 60%;
+
+  @include breakpoint($breakpoint-m) {
+    padding: $spacing 0 0 0;
+    width: unset;
+  }
+
+  [dir='rtl'] & {
+    padding-left: 0;
+    padding-right: $spacing;
+
+    @include breakpoint($breakpoint-m) {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+.linkedevents-event__img {
+  position: relative;
+  width: 40%;
+
+  @include breakpoint($breakpoint-m) {
+    width: unset;
+  }
+
+  img {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+}
+
+.linkedevents-event__date-container {
+  @include font(small);
+  color: $color-black-60
+}

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

@@ -82,16 +82,18 @@
 }
 
 // Latest news block variant.
+// @todo: move medium teaser styles to generic teaser
+// https://helsinkisolutionoffice.atlassian.net/browse/UHF-10868
 .news-listing--latest-medium-teasers {
   margin-bottom: 0;
   padding-inline-start: 0; // User agent stylesheet override
   padding-right: 0;
 
   @include breakpoint($breakpoint-m) {
-    grid-column-gap: $spacing-and-half;
-    grid-row-gap: $spacing-double;
+    column-gap: $spacing-and-half;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    row-gap: $spacing-double;
   }
 
   .news-listing__item {
@@ -219,13 +221,13 @@
 }
 
 .news-listing--card-teasers {
-  grid-gap: 0;
   display: grid;
+  gap: 0;
   list-style: none;
   padding-left: 0;
 
   @include breakpoint($breakpoint-m) {
-    grid-column-gap: $spacing-and-half;
+    column-gap: $spacing-and-half;
     grid-template-columns: repeat(3, 1fr);
   }
 

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

@@ -5,6 +5,7 @@
 @import 'contact-card';
 @import 'contact-card-listing';
 @import 'content-cards';
+@import 'curated-event-list';
 @import 'district-and-project-search';
 @import 'event-list';
 @import 'hearings';

src/scss/06_components/paragraphs/_curated-event-list.scss

@@ -0,0 +1,31 @@
+.curated-event-list__events {
+  display: grid;
+  gap: 0;
+  list-style: none;
+  padding-left: 0;
+
+  @include breakpoint($breakpoint-m) {
+    column-gap: $spacing-and-half;
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.curated-event-list__event + .curated-event-list__event {
+  margin-top: $spacing-double;
+
+  @include breakpoint($breakpoint-m) {
+    margin-top: 0;
+  }
+}
+
+.curated-event-list__empty-message__container {
+  margin-bottom: $spacing-and-half;
+}
+
+.curated-event-list__empty-message {
+  @include font(h4);
+}
+
+.curated-event-list__event {
+  position: relative;
+}

templates/content/external-entity--linkedevents-event.html.twig

@@ -0,0 +1,43 @@
+{# @todo Use a general component to create the card-teaser html #}
+{# https://helsinkisolutionoffice.atlassian.net/browse/UHF-10868 #}
+<div class="linkedevents-event">
+  <div class="linkedevents-event__img">
+    {{ content.main_image }}
+  </div>
+  <div class="linkedevents-event__text-container">
+    <h3 class="linkedevents-event__title">
+      {{ content.external_link }}
+    </h3>
+    <div class="linkedevents-event__date-container">
+      {% set is_multidate = start_timestamp|date('Y-m-d') != end_timestamp|date('Y-m-d') %}
+      {% set same_year = start_timestamp|date('Y') == end_timestamp|date('Y') %}
+      {% set html_start = start_timestamp|format_date('custom', 'Y-m-d') ~ 'T' ~ start_timestamp|format_date('custom', 'H:i') %}
+      {% set html_end = end_timestamp|format_date('custom', 'Y-m-d') ~ 'T' ~ end_timestamp|format_date('custom', 'H:i') %}
+      {% if is_multidate and not same_year %}
+        <time datetime="{{ html_start }}">
+          {{ start_timestamp|date('d.m.Y') }}
+        </time>
+        –
+        <time datetime="{{ html_end }}">
+          {{ end_timestamp|date('d.m.Y') }}
+        </time>
+      {% elseif is_multidate %}
+        <time datetime="{{ html_start }}">
+          {{ start_timestamp|date('d.m.') }}
+        </time>
+        –
+        <time datetime="{{ html_end }}">
+          {{ end_timestamp|date('d.m.Y') }}
+        </time>
+      {% else %}
+        <time datetime="{{ html_start }}">
+          {{ start_timestamp|format_date('publication_date_format') }}
+        </time>
+        –
+        <time datetime="{{ html_end }}">
+          {{ end_timestamp|format_date('custom', 'H:i') }}
+        </time>
+      {% endif %}
+    </div>
+  </div>
+</div>

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

@@ -1,3 +1,5 @@
+{# @todo Use a general component to create the card-teaser html #}
+{# https://helsinkisolutionoffice.atlassian.net/browse/UHF-10868 #}
 <div class="news-listing__content news-listing__card-teaser">
   {# Main image #}
     <div class="news-listing__img">

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

@@ -0,0 +1,38 @@
+{% block paragraph %}
+  {% embed "@hdbt/misc/component.twig" with
+    {
+      component_classes: [
+      'component--full-width',
+      'component--curated-event-list',
+      ],
+      component_title_level: 'h2',
+      component_title: 'Recommended events'|trans({}, {'context': 'Curated event list title'}),
+    }
+  %}
+    {% block component_content %}
+      <div class="curated-event-list">
+        {% if content.future_or_ongoing is empty %}
+          <div class="curated-event-list__empty-message__container">
+            <span class="curated-event-list__empty-message">
+              {{ 'Recommended events were not found'|t({}, {'context': 'Curated events list empty message'}) }}
+            </span>
+          </div>
+        {% else %}
+          <ul class="curated-event-list__events">
+            {% for event in content.future_or_ongoing %}
+              <li class="curated-event-list__event">
+                {{ event }}
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+        {% include '@hdbt/navigation/link-button.html.twig' with {
+          label: content.field_all_events_link.0['#title'],
+          open_in_a_new_window: content.field_all_events_link.0.options.target_new,
+          type: 'primary',
+          url: content.field_all_events_link.0['#url'],
+        } %}
+      </div>
+    {% endblock %}
+  {% endembed %}
+{% endblock %}

translations/fi.po

@@ -1312,6 +1312,14 @@ msgctxt "The helper text before the news article changed timestamp"
 msgid "updated"
 msgstr "päivitetty"
 
+msgctxt "Curated event list title"
+msgid "Recommended events"
+msgstr "Suositellut tapahtumat"
+
+msgctxt "Curated events list empty message"
+msgid "Recommended events were not found"
+msgstr "Suositeltuja tapahtumia ei löytynyt."
+
 msgctxt "React & Share cookie compliance"
 msgid "Would you like to give feedback on this page?"
 msgstr "Haluatko antaa meille palautetta tästä sivusta?"