EWPP-249: [oe_theme] Improve list item pattern

behat.yml.dist

@@ -28,8 +28,8 @@ default:
               language switcher: ".ecl-language-list"
               language switcher link: ".ecl-site-header__selector"
               language switcher links: ".ecl-language-list--overlay"
-              list item: ".ecl-content-item"
-              list item image: ".ecl-content-item__image__before"
+              list item: ".list-item"
+              list item image: ".list-item__image__before"
               logo: ".ecl-site-header__logo-image"
               media container: ".ecl-media-container"
               page header: ".ecl-page-header"

modules/oe_theme_content_news/config/overrides/core.entity_view_display.node.oe_news.teaser.yml

@@ -12,11 +12,11 @@ dependencies:
     - field.field.node.oe_news.oe_subject
     - field.field.node.oe_news.oe_summary
     - field.field.node.oe_news.oe_teaser
-    - image.style.oe_theme_list_item_2x
+    - image.style.oe_theme_ratio_3_2_medium
     - node.type.oe_news
   module:
     - datetime
-    - oe_theme_helper
+    - media
     - text
     - user
 id: node.oe_news.teaser
@@ -30,12 +30,13 @@ content:
     settings: {  }
     third_party_settings: {  }
   oe_news_featured_media:
-    type: oe_theme_helper_media_thumbnail_url
+    type: media_thumbnail
     weight: 2
     region: content
     label: hidden
     settings:
-      image_style: oe_theme_list_item_2x
+      image_style: oe_theme_ratio_3_2_medium
+      image_link: ''
     third_party_settings: {  }
   oe_publication_date:
     type: datetime_default

modules/oe_theme_content_news/config/post_updates/00002_override_teaser_view_display/core.entity_view_display.node.oe_news.teaser.yml

@@ -12,11 +12,11 @@ dependencies:
     - field.field.node.oe_news.oe_subject
     - field.field.node.oe_news.oe_summary
     - field.field.node.oe_news.oe_teaser
-    - image.style.oe_theme_list_item_2x
+    - image.style.oe_theme_ratio_3_2_medium
     - node.type.oe_news
   module:
     - datetime
-    - oe_theme_helper
+    - media
     - text
     - user
 id: node.oe_news.teaser
@@ -30,12 +30,13 @@ content:
     settings: {  }
     third_party_settings: {  }
   oe_news_featured_media:
-    type: oe_theme_helper_media_thumbnail_url
+    type: media_thumbnail
     weight: 2
     region: content
     label: hidden
     settings:
-      image_style: oe_theme_list_item_2x
+      image_style: oe_theme_ratio_3_2_medium
+      image_link: ''
     third_party_settings: {  }
   oe_publication_date:
     type: datetime_default

modules/oe_theme_content_project/config/overrides/core.entity_view_display.node.oe_project.teaser.yml

@@ -24,7 +24,7 @@ dependencies:
     - field.field.node.oe_project.oe_subject
     - field.field.node.oe_project.oe_summary
     - field.field.node.oe_project.oe_teaser
-    - image.style.oe_theme_list_item_2x
+    - image.style.oe_theme_ratio_3_2_medium
     - node.type.oe_project
   module:
     - field_group
@@ -51,12 +51,13 @@ bundle: oe_project
 mode: teaser
 content:
   oe_featured_media:
-    type: oe_theme_helper_featured_media_thumbnail_url_formatter
+    type: oe_theme_helper_featured_media_thumbnail_formatter
     weight: 2
     region: content
     label: above
     settings:
-      image_style: oe_theme_list_item_2x
+      image_style: oe_theme_ratio_3_2_medium
+      image_link: ''
     third_party_settings: {  }
   oe_project_locations:
     type: oe_theme_helper_address_inline

modules/oe_theme_helper/config/schema/oe_theme_helper.schema.yml

@@ -71,3 +71,6 @@ field.formatter.settings.oe_theme_helper_featured_media_thumbnail_url_formatter:
 field.formatter.settings.oe_theme_helper_social_media_icons_list_formatter:
   type: field.formatter.settings.link
   label: 'Social media icons list formatter settings'
+
+field.formatter.settings.oe_theme_helper_featured_media_thumbnail_formatter:
+  type: field.formatter.settings.image

modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/FeaturedMediaThumbnailFormatter.php

@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\oe_theme_helper\Plugin\Field\FieldFormatter;
+
+use Drupal\media\Plugin\Field\FieldFormatter\MediaThumbnailFormatter;
+
+/**
+ * Display a featured media thumbnail.
+ *
+ * @FieldFormatter(
+ *   id = "oe_theme_helper_featured_media_thumbnail_formatter",
+ *   label = @Translation("Thumbnail"),
+ *   description = @Translation("Display a featured media thumbnail."),
+ *   field_types = {
+ *     "oe_featured_media"
+ *   }
+ * )
+ */
+class FeaturedMediaThumbnailFormatter extends MediaThumbnailFormatter {
+
+}

oe_theme.theme

@@ -152,6 +152,11 @@ function oe_theme_theme_suggestions_field_alter(array &$suggestions, array $vari
     $suggestions[] = 'field__' . $element['#entity_type'] . '__' . $element['#field_name'] . '__' . $element['#view_mode'];
     $suggestions[] = 'field__' . $element['#entity_type'] . '__' . $element['#field_name'] . '__' . $element['#bundle'] . '__' . $element['#view_mode'];
   }
+
+  // Generate formatter-specific suggestions.
+  foreach ($suggestions as $key => $suggestion) {
+    $suggestions[] = $suggestion . '__formatter__' . $element['#formatter'];
+  }
 }
 
 /**

package.json

@@ -18,12 +18,15 @@
     "@ecl/ec-component-fact-figures": "2.31.0",
     "@ecl/ec-component-form-help-block": "2.31.0",
     "@ecl/ec-component-media-container": "2.31.0",
+    "@ecl/ec-utility-typography": "2.31.0",
     "@ecl/ec-preset-editor": "2.31.0",
     "@ecl/ec-preset-legacy-website": "2.31.0",
     "@ecl/ec-theme-default": "2.31.0",
     "@ecl/ec-utility-background": "^2.31.0",
     "@ecl/ec-utility-border": "^2.31.0",
     "@ecl/eu-component-form-help-block": "2.31.0",
+    "@ecl/eu-component-media-container": "2.31.0",
+    "@ecl/eu-utility-typography": "2.31.0",
     "@ecl/eu-preset-legacy-website": "2.31.0",
     "@ecl/eu-theme-default": "2.31.0",
     "@ecl/eu-utility-background": "^2.31.0",

sass/components/_list_items.scss

@@ -0,0 +1,60 @@
+.list-item {
+  margin-bottom: $ecl-spacing-l;
+  &__title {
+    @extend .ecl-u-type-heading-4;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  &__meta {
+    @extend .ecl-u-type-s;
+    @extend .ecl-u-type-color-grey-75;
+    margin-bottom: $ecl-spacing-xs;
+    text-transform: uppercase;
+  }
+  &__description {
+    @extend .ecl-u-type-color-grey-100;
+    font: $ecl-font-prolonged-m;
+    p {
+      margin: 0;
+    }
+  }
+  &__navigation {
+    .list-item__title {
+      @extend .ecl-u-type-heading-5;
+    }
+  }
+}
+.list-item {
+  &__image {
+    @extend .ecl-media-container;
+    margin-bottom: $ecl-spacing-m;
+    background-color: transparent;
+    img {
+      @extend .ecl-media-container__media;
+    }
+    @include ecl-media-breakpoint-up("md") {
+      width: 180px;
+      margin-bottom: 0;
+    }
+    @include ecl-media-breakpoint-up("lg") {
+      width: 220px;
+    }
+    &__before {
+      @include ecl-media-breakpoint-up("md") {
+        margin-right: $ecl-spacing-l;
+      }
+    }
+    &__after {
+      @include ecl-media-breakpoint-up("md") {
+        margin-left: $ecl-spacing-l;
+      }
+    }
+  }
+  &__date {
+    margin-right: $ecl-spacing-m;
+    @include ecl-media-breakpoint-up("md") {
+      margin-right: $ecl-spacing-l;
+    }
+  }
+}
+

sass/style-ec.scss

@@ -1,13 +1,16 @@
-@import '@ecl/ec-theme-default/exports/all';
-@import '@ecl/ec-theme-default/exports/colors';
-@import '@ecl/ec-theme-default/exports/colors-bg';
-@import '@ecl/ec-theme-default/exports/spacing';
-@import '@ecl/ec-utility-border/ec-utility-border';
-@import '@ecl/ec-utility-background/ec-utility-background';
-@import '@ecl/ec-component-form-help-block/ec-component-form-help-block';
+@import "@ecl/ec-theme-default/exports/all";
+@import "@ecl/ec-theme-default/exports/colors";
+@import "@ecl/ec-theme-default/exports/colors-bg";
+@import "@ecl/ec-theme-default/exports/spacing";
+@import "@ecl/ec-utility-border/ec-utility-border";
+@import "@ecl/ec-utility-background/ec-utility-background";
+@import "@ecl/ec-utility-typography/ec-utility-typography";
+@import "@ecl/ec-component-form-help-block/ec-component-form-help-block";
+@import "@ecl/ec-component-media-container/ec-component-media-container";
 @import "./components/form";
 @import "./components/toolbar";
 @import "./components/banner";
+@import "./components/list_items";
 @import "./components/wysiwyg";
 @import "./components/content_project";
 @import "./components/description-list";

sass/style-eu.scss

@@ -1,17 +1,16 @@
-@import '@ecl/eu-theme-default/exports/all';
-@import '@ecl/eu-theme-default/exports/colors';
-@import '@ecl/eu-theme-default/exports/colors-bg';
-@import '@ecl/eu-theme-default/exports/spacing';
-@import '@ecl/eu-utility-border/eu-utility-border';
-@import '@ecl/ec-utility-background/ec-utility-background';
-@import '@ecl/eu-component-form-help-block/eu-component-form-help-block';
-// Facts and Figure component is missing from EU family so we add it here.
-// @todo remove this after the above will be fixed upstream.
-@import '@ecl/ec-component-fact-figures/ec-component-fact-figures';
-@import '@ecl/ec-component-media-container/ec-component-media-container';
+@import "@ecl/eu-theme-default/exports/all";
+@import "@ecl/eu-theme-default/exports/colors";
+@import "@ecl/eu-theme-default/exports/colors-bg";
+@import "@ecl/eu-theme-default/exports/spacing";
+@import "@ecl/eu-utility-border/eu-utility-border";
+@import "@ecl/eu-utility-background/eu-utility-background";
+@import "@ecl/eu-utility-typography/eu-utility-typography";
+@import "@ecl/eu-component-form-help-block/eu-component-form-help-block";
+@import "@ecl/eu-component-media-container/eu-component-media-container";
 @import "./components/form";
 @import "./components/toolbar";
 @import "./components/banner";
+@import "./components/list_items";
 @import "./components/wysiwyg";
 @import "./components/content_project";
 @import "./components/description-list";

templates/content/node--oe-news--teaser.html.twig

@@ -4,7 +4,6 @@
  * Theme override to display a node of bundle news in the teaser view mode.
  */
 #}
-{% set image_url = content.oe_news_featured_media|field_value|render %}
 {{ pattern('list_item', {
   'variant': 'thumbnail_primary',
   'url': url,
@@ -13,5 +12,5 @@
     content.oe_publication_date|field_value
   ],
   'detail': content.oe_teaser|field_value,
-  'image': image_url ? { 'src': image_url }
+  'image': content.oe_news_featured_media|field_value
 }) }}

templates/content/node--oe-project--teaser.html.twig

@@ -4,7 +4,6 @@
  * Theme override to display a node of bundle project in the teaser view mode.
  */
 #}
-{% set image_url = content.oe_featured_media|field_value|render %}
 {{ pattern('list_item', {
   'variant': 'thumbnail_secondary',
   'url': url,
@@ -13,5 +12,5 @@
   'additional_information': [
     content.group_details,
   ],
-  'image': image_url ? { 'src': image_url }
+  'image': content.oe_featured_media|field_value
 }) }}

templates/field/field--node--oe-project-calls--oe-project.html.twig

@@ -6,14 +6,12 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{% set uppercase_label %}
-  <span class="ecl-u-type-uppercase">{{ label }}</span>
-{% endset %}
 <ul class="ecl-unordered-list ecl-unordered-list--divider">
   {% for item in items %}
     <li class="ecl-unordered-list__item ecl-u-pb-none ecl-u-mb-l">
       {{ pattern('list_item', {
-        meta: [ uppercase_label ],
+        variant: 'navigation',
+        meta: [ label ],
         url: item.content['#url'],
         title: item.content['#title']
       }) }}

templates/field/field--node--oe-project-funding-programme--oe-project.html.twig

@@ -6,14 +6,12 @@
  * @see ./core/themes/stable/templates/field/field.html.twig
  */
 #}
-{% set uppercase_label %}
-  <span class="ecl-u-type-uppercase">{{ label }}</span>
-{% endset %}
 <ul class="ecl-unordered-list ecl-unordered-list--divider">
   {% for item in items %}
     <li class="ecl-unordered-list__item ecl-u-pb-none ecl-u-mb-l">
       {{ pattern('list_item', {
-        meta: [ uppercase_label ],
+        variant: 'navigation',
+        meta: [ label ],
         title: item.content
       }) }}
     </li>

templates/paragraphs/paragraph--oe-list-item.html.twig

@@ -6,13 +6,23 @@
  * @see ./modules/contrib/paragraphs/templates/paragraph.html.twig
  */
 #}
-{{ pattern('list_item', {
-  'variant': variant,
-  'url': url,
-  'title': content.field_oe_title,
-  'detail': content.field_oe_text_long,
-  'meta': meta,
-  'date': date,
-  'image': image,
-  'secondary_image': image
-}) }}
+{% if variant == 'highlight' %}
+  {# Use featured_item pattern as the highlight variant has been deprecated in 2.9.0 #}
+  {{ pattern('featured_item', {
+    'variant': 'default',
+    'image': image,
+    'title': content.field_oe_title,
+    'link': { 'href': url },
+  }) }}
+{% else %}
+  {{ pattern('list_item', {
+    'variant': variant,
+    'url': url,
+    'title': content.field_oe_title,
+    'detail': content.field_oe_text_long,
+    'meta': meta,
+    'date': date,
+    'image': image,
+    'secondary_image': image
+  }) }}
+{% endif %}