EWPP-2044: Adds the News ticker pattern.

package.json

@@ -45,6 +45,7 @@
     "@ecl/twig-component-media-container": "3.2.3",
     "@ecl/twig-component-menu": "3.2.3",
     "@ecl/twig-component-message": "3.2.3",
+    "@ecl/twig-component-news-ticker": "3.2.3",
     "@ecl/twig-component-page-banner": "3.2.3",
     "@ecl/twig-component-page-header-core": "3.2.3",
     "@ecl/twig-component-page-header-standardised": "3.2.3",

templates/patterns/news_ticker/news_ticker.ui_patterns.yml

@@ -0,0 +1,29 @@
+news_ticker:
+  label: "News ticker"
+  description: "The News ticker pattern allows to display pieces of information."
+  fields:
+    identifier:
+      type: "text"
+      label: "Id"
+      description: "Optional unique machine readable name."
+      preview: "news-ticker-example"
+    items:
+      type: "array"
+      label: "Items"
+      description: "List of news items containing the information and an optional link."
+      preview:
+        - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+          link: "http://example.com"
+        - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+          link: "http://example.com"
+        - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
+          link: "http://example.com"
+        - content: "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum"
+          link: "http://example.com"
+        - content: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium"
+          link: "http://example.com"
+        - content: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores"
+    counter_label:
+      type: "text"
+      label: "Counter label"
+      description: "The counter label defaults to 'of'. For e.g. '1 of 6'."

templates/patterns/news_ticker/pattern-news-ticker.html.twig

@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * News ticker pattern.
+ */
+#}
+{% set _items = [] %}
+{% for _item in items %}
+  {% set _items = _items|merge([{
+    content: _item.content,
+    link: _item.link
+  }]) %}
+{% endfor %}
+
+{% include '@ecl-twig/news-ticker' with {
+  'id': identifier|default(''),
+  'items': _items,
+  'counter_label': counter_label|default('of'),
+  'icon_path': ecl_icon_path
+} only %}

tests/src/Kernel/fixtures/rendering.yml

@@ -3243,3 +3243,67 @@
     equals:
       'div.ecl-list-illustration__item:nth-child(1) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#growth"></use>'
       'div.ecl-list-illustration__item:nth-child(2) svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#budget"></use>'
+- array:
+    '#type': 'pattern'
+    '#id': 'news_ticker'
+    '#fields':
+      identifier: "news-ticker-example"
+      items:
+        - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+          link: "http://example.com"
+        - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+        - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
+          link: "http://example.com"
+        - content: "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum"
+        - content: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium"
+          link: "http://example.com"
+        - content: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores"
+          link: "http://example.com"
+  assertions:
+    count:
+      div.ecl-news-ticker: 1
+      div.ecl-news-ticker__container: 1
+      div.ecl-news-ticker__content: 1
+      ul#news-ticker-example-content.ecl-news-ticker__slides: 1
+      li.ecl-news-ticker__slide: 6
+      a.ecl-link.ecl-news-ticker__slide-text: 4
+      div.ecl-news-ticker__counter span.ecl-news-ticker__counter--current: 1
+      div.ecl-news-ticker__controls: 1
+    contains:
+      li.ecl-news-ticker__slide:nth-child(1) a.ecl-link.ecl-news-ticker__slide-text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+      li.ecl-news-ticker__slide:nth-child(2): "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+      li.ecl-news-ticker__slide:nth-child(3) a.ecl-linkecl-news-ticker__slide-text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
+      li.ecl-news-ticker__slide:nth-child(4): "Excepteur sint occaecat cupidatat officia deserunt mollit anim id est laborum"
+      li.ecl-news-ticker__slide:nth-child(5) a.ecl-link.ecl-news-ticker__slide-text: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium"
+      li.ecl-news-ticker__slide:nth-child(6) a.ecl-link.ecl-news-ticker__slide-text: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores"
+    equals:
+      svg.ecl-icon.ecl-icon--m.ecl-news-ticker__icon: '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#information"></use>'
+      div.ecl-news-ticker__counter: '<span class="ecl-news-ticker__counter--current">1</span> of 6'
+- array:
+    '#type': 'pattern'
+    '#id': 'news_ticker'
+    '#fields':
+      items:
+        - content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+          link: "http://example.com"
+        - content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+        - content: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
+          link: "http://example.com"
+      counter_label: "in"
+  assertions:
+    count:
+      div.ecl-news-ticker: 1
+      div.ecl-news-ticker__container: 1
+      div.ecl-news-ticker__content: 1
+      ul.ecl-news-ticker__slides: 1
+      li.ecl-news-ticker__slide: 3
+      a.ecl-link.ecl-news-ticker__slide-text: 2
+      div.ecl-news-ticker__counter span.ecl-news-ticker__counter--current: 1
+      div.ecl-news-ticker__controls: 1
+    contains:
+      li.ecl-news-ticker__slide:nth-child(1) a.ecl-link.ecl-news-ticker__slide-text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+      li.ecl-news-ticker__slide:nth-child(2): "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
+      li.ecl-news-ticker__slide:nth-child(3) a.ecl-link.ecl-news-ticker__slide-text: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur"
+    equals:
+      svg.ecl-icon.ecl-icon--m.ecl-news-ticker__icon: '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#information"></use>'
+      div.ecl-news-ticker__counter: '<span class="ecl-news-ticker__counter--current">1</span> in 3'

tests/src/PatternAssertions/NewsTickerAssert.php

@@ -0,0 +1,63 @@
+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\Tests\oe_theme\PatternAssertions;
+
+use Symfony\Component\DomCrawler\Crawler;
+
+/**
+ * Assertions for the news ticker pattern.
+ *
+ * @see ./templates/patterns/news_ticker/news_ticker.ui_patterns.yml
+ */
+class NewsTickerAssert extends BasePatternAssert {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function getAssertions(string $variant): array {
+    return [
+      'items' => [
+        [$this, 'assertItems'],
+      ],
+    ];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function assertBaseElements(string $html, string $variant): void {
+    $crawler = new Crawler($html);
+    self::assertElementExists('div.ecl-news-ticker', $crawler);
+  }
+
+  /**
+   * Asserts the items of the pattern.
+   *
+   * @param array $expected_items
+   *   The expected item values.
+   * @param \Symfony\Component\DomCrawler\Crawler $crawler
+   *   The DomCrawler where to check the element.
+   */
+  protected function assertItems(array $expected_items, Crawler $crawler): void {
+    // Assert the number of items is correct.
+    $items = $crawler->filter('div.ecl-news-ticker__container div.ecl-news-ticker__content ul.ecl-news-ticker__slides li.ecl-news-ticker__slide');
+    // ECL clones the first and the last element to create the carousel effect
+    // so there are 2 additional items rendered.
+    self::assertCount(count($expected_items) + 2, $items, 'The expected news ticker items do not match the found news ticker items.');
+
+    // Assert the news items have the correct info and link, if given.
+    foreach ($expected_items as $index => $expected_item) {
+      $actual_item = $items->eq($index);
+      if (isset($expected_item['link'])) {
+        $this->assertElementText($expected_item['content'], 'a.ecl-link.ecl-news-ticker__slide-text', $actual_item);
+        $link = $actual_item->filter('a.ecl-link.ecl-news-ticker__slide-text');
+        self::assertStringContainsString($expected_item['link'], $link->attr('href'));
+        continue;
+      }
+      self::assertStringContainsString($expected_item['content'], $actual_item->text());
+    }
+  }
+
+}