Merge pull request #1396 from openeuropa/EWPP-4032

EWPP-4032: Add Highlighted list pattern and composition.

oe_theme.theme

@@ -2518,3 +2518,67 @@ function oe_theme_page_attachments_alter(array &$attachments) {
 function _oe_theme_sanitize_url($url): mixed {
   return $url instanceof Url ? $url : UrlHelper::filterBadProtocol($url);
 }
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function oe_theme_preprocess_pattern_highlighted_list(array &$variables): void {
+  if (!isset($variables['highlighted_item'])) {
+    // If we don't have a highlighted item for the list, we bail out.
+    return;
+  }
+  // Override highlighted item information.
+  if (isset($variables['highlighted_item']['#fields']['image'])) {
+    $variables['highlighted_item']['#fields']['image']['size'] = 'large';
+    if (!isset($variables['highlighted_item']['#fields']['image_position']) ||
+      $variables['highlighted_item']['#fields']['image_position'] !== 'top') {
+      $variables['highlighted_item']['#fields']['image_position'] = 'top';
+    }
+  }
+  $variables['highlighted_item']['#fields']['divider'] = TRUE;
+  $variables['highlighted_item']['#fields']['extra_classes'] = 'ecl-u-flex-grow-1';
+  // It should always use the default variant.
+  $variables['highlighted_item']['#variant'] = 'default';
+  // Make sure no other list_item pattern info is used.
+  $variables['highlighted_item']['#fields']['date'] = NULL;
+  $variables['highlighted_item']['#fields']['badges'] = NULL;
+  $variables['highlighted_item']['#fields']['lists'] = NULL;
+  if (!isset($variables['items'])) {
+    // If we don't have items, we bail out.
+    return;
+  }
+
+  // We only display the first four items in the list.
+  $variables['items'] = array_slice($variables['items'], 0, 3);
+  foreach ($variables['items'] as $key => &$item) {
+    // It should always use the default variant.
+    $item['#variant'] = 'default';
+    $item['#fields']['divider'] = TRUE;
+    // Make sure no other list_item pattern info is used.
+    $item['#fields']['date'] = NULL;
+    $item['#fields']['badges'] = NULL;
+    $item['#fields']['lists'] = NULL;
+    if ($key === 0) {
+      // We only display the image for the first item.
+      if (isset($item['#fields']['image'])) {
+        // It always has the medium 'size' and position 'top'.
+        $item['#fields']['image']['size'] = 'medium';
+        $item['#fields']['image_position'] = 'top';
+      }
+      if (isset($item['#fields']['detail'])) {
+        $item['#fields']['detail'] = NULL;
+      }
+    }
+    else {
+      // We don't display the image and detail for the rest of the items.
+      $item['#fields']['image'] = NULL;
+      $item['#fields']['detail'] = NULL;
+    }
+    if ($key !== 2) {
+      $item['#fields']['extra_classes'] = 'ecl-u-flex-grow-1 ecl-u-mb-m';
+    }
+    else {
+      $item['#fields']['extra_classes'] = 'ecl-u-flex-grow-1';
+    }
+  }
+}

templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig

@@ -0,0 +1,43 @@
+{% apply spaceless %}
+{#
+  @file
+  Theme implementation for the Highlighted News Block
+  Parameters:
+    - "title" (string) (default: ''): The Highlighted News Block title.
+    - "highlighted" (array) (default: []): The main item of the list compatible with the ECL Content Item component.
+    - "items" (array) (default: []): Highlighted News items compatible with the ECL Content Item component.
+    - "see_more" (array) (default: []): Predefined structure compatible with Link component.
+    - "detail" (string) (default: ''): Additional information to be displayed below the 'See more' link.
+#}
+  <div id="{{ 'highlighted-news-block'|clean_unique_id }}">
+    {% if title is not empty %}
+      <div class="ecl-row">
+        <div class="ecl-col-12">
+          <h2 class='ecl-u-type-heading-2'>{{ title }}</h2>
+        </div>
+      </div>
+    {% endif %}
+    {% if highlighted is not empty and items is not empty %}
+      <div class="ecl-row">
+        <div class="ecl-col-l-8 ecl-u-d-flex ecl-u-flex-column">
+          {{ highlighted }}
+        </div>
+        <div class="ecl-col-l-4 ecl-u-d-flex ecl-u-flex-column">
+          {% for item in items %}
+            {{ item }}
+          {% endfor %}
+        </div>
+      </div>
+    {% endif %}
+    {% if see_more is not empty %}
+      <div class="ecl-u-mt-s">
+        {% include '@ecl-twig/link' with see_more %}
+      </div>
+    {% endif %}
+    {% if detail is not empty %}
+      <div class="ecl ecl-u-mt-s">
+        {{ detail }}
+      </div>
+    {% endif %}
+  </div>
+{% endapply %}

templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml

@@ -0,0 +1,129 @@
+highlighted_list:
+  label: "Highlighted list"
+  description: "A list of 4 highlighted content items. The image is only displayed for the first two items and the description for the first item. If more than 4 items are provided, only the first 4 will be displayed."
+  fields:
+    title:
+      type: "text"
+      label: "Title"
+      description: "Highlighted list title"
+      preview: "Highlighted News"
+    highlighted_item:
+      type: "array"
+      label: "Highlighted item"
+      description: "The main item of the highlighted list."
+      preview:
+        type: pattern
+        id: list_item
+        variant: default
+        fields:
+          title: "Item 1"
+          url: "#"
+          external_link: true
+          detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus"
+          meta:
+            - "Item 1 primary meta"
+            - "DD Month Year"
+          secondary_meta:
+            - label: "3 minutes read"
+              icon: "information"
+            - label: "5 minutes read"
+              icon: "clock"
+          image:
+            src: "https://loremflickr.com/1200/900/arch"
+            alt: "Alternative text for image"
+          badges:
+            - label: "Highlighted"
+              variant: "highlight"
+    items:
+      type: "array"
+      label: "Items"
+      description: "List of items compatible with the ECL Content item component."
+      preview:
+        - type: pattern
+          id: list_item
+          variant: thumbnail_primary
+          fields:
+            title: "Item 2"
+            detail: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem."
+            meta:
+              - "Item 2 primary meta"
+              - "DD Month Year"
+            secondary_meta:
+              - label: "5 minutes read"
+                icon: "clock"
+            image:
+              src: "https://loremflickr.com/1200/900/arch"
+              alt: "Alternative text for image"
+            badges:
+              - label: "Highlighted"
+                variant: "highlight"
+            lists:
+              -
+                - term: "When"
+                  definition: "Thursday 15 November, 08:00 AM to Friday 16 November"
+                - term: "Where"
+                  definition: "The EGG, Rue Barra 175, 1070 Brussels, Belgium"
+        - type: pattern
+          id: list_item
+          variant: default
+          fields:
+            title: "Item 3"
+            url: "https://external.com"
+            detail: "In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam"
+            meta:
+              - "Item 3 primary meta"
+              - "DD Month Year"
+            secondary_meta:
+              - label: "2 minutes read"
+                icon: "clock"
+            image:
+              src: "https://loremflickr.com/1200/900/arch"
+              alt: "Alternative text for image"
+            image_position: "top"
+        - type: pattern
+          id: list_item
+          variant: default
+          fields:
+            title: "Item 4"
+            url: "#"
+            detail: "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam"
+            meta:
+              - "Item 4 primary meta"
+              - "DD Month Year"
+            image:
+              src: "https://loremflickr.com/1200/900/arch"
+              alt: "Alternative text for image"
+            secondary_meta:
+              - label: "3 minutes read"
+                icon: "clock"
+              - label: "Brussels"
+                icon: "location"
+        - type: pattern
+          id: list_item
+          variant: default
+          fields:
+            title: "Item 5"
+            url: "#"
+            detail: "Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe"
+            meta:
+              - "Item 5 primary meta"
+              - "DD Month Year"
+            image:
+              src: "https://loremflickr.com/1200/900/arch"
+              alt: "Alternative text for image"
+    see_more_label:
+      type: "text"
+      label: "See more label"
+      description: "The label for the See more link."
+      preview: "Read more news"
+    see_more_url:
+      type: "Url"
+      label: "See more URL"
+      description: "See more link URL (A Drupal Url object)"
+      preview: "#"
+    detail:
+      type: "text"
+      label: "Detail"
+      description: "List's additional information displayed below the See more link."
+      preview:
+        '#markup': "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis. Ego vero volo in virtute vim esse quam maximam; <b>A mene tu?</b> Quid, quod res alia tota est? Duo Reges: constructio interrete.</p>"

templates/patterns/highlighted_list/pattern-highlighted-list.html.twig

@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Highlighted list pattern.
+ */
+#}
+
+{# Prepare the see more link. #}
+{% if see_more_url is defined and see_more_url is not empty %}
+  {% set _see_more = {
+    link: {
+      type: 'standalone',
+      label: see_more_label|default(see_more_url),
+      path: see_more_url,
+      external: see_more_url|is_external_url,
+      icon_path: ecl_icon_path
+    },
+    icon: {
+      path: ecl_icon_path,
+      name: 'arrow-left',
+      size: 'xs',
+      transform: 'rotate-180'
+    }
+  } %}
+{% endif %}
+
+{% include '@oe_theme/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig' with {
+  'title': title|default(''),
+  'highlighted': highlighted_item,
+  'items': items,
+  'see_more': _see_more,
+  'detail': detail|default(''),
+} only %}
+

templates/patterns/list_item/list_item.ui_patterns.yml

@@ -101,6 +101,11 @@ list_item:
         src: "https://loremflickr.com/1200/900/arch"
         alt: "Alternative text for image"
         size: "large"
+    image_position:
+      type: "text"
+      label: "Image position"
+      description: "The image position: left (default), right, top."
+      preview: "left"
     icon:
       type: "text"
       label: "Icon (deprecated - to be removed in 4.x)"
@@ -168,3 +173,8 @@ list_item:
       label: "Lists variant"
       description: "An optional parameter for the layout of the lists (vertical or horizontal). It defaults to horizontal."
       preview: "vertical"
+    extra_classes:
+      type: 'text'
+      label: 'Extra classes string'
+      description: 'Extra classes string'
+      preview: ''

templates/patterns/list_item/pattern-list-item.html.twig

@@ -16,6 +16,7 @@
     - "external_link" (bool) (default: false): Whether the link is external or not.
     - "lists" (array) (default: []): Array of lists compatible with ECL Description list component.
     - "divider" (bool) (default: false): Whether to set a divider below the item.
+    - "extra_classes" (string) (default: '')
 #}
 
 {# Prepare the picture array. #}
@@ -163,4 +164,5 @@
   divider: divider|default(false),
   secondary_meta: _secondary_meta|default([]),
   date: _date|default([]),
+  extra_classes: extra_classes|default(''),
 } only %}