EWPP-1564: Update timeline pattern.

openeuropa · Jan 25, 2022 · 864b47f · 864b47f
1 parent 0e0cc5e
commit 864b47f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/templates/paragraphs/paragraph--oe-timeline.html.twig b/templates/paragraphs/paragraph--oe-timeline.html.twig
@@ -4,12 +4,9 @@
  * Theme override to display the 'timeline' type paragraph.
  */
 #}
-{% if content.field_oe_text_long|field_value|render is not empty %}
-  {% set introduction = content.field_oe_text_long|field_value|render %}
-{% endif %}
 {{ pattern('timeline', {
   'title': heading,
-  'introduction': introduction,
+  'introduction': content.field_oe_text_long|field_value|render|default(''),
   'limit': limit,
   'button_label': show_more,
   'items': items,

diff --git a/templates/patterns/timeline/pattern-timeline.html.twig b/templates/patterns/timeline/pattern-timeline.html.twig
@@ -27,7 +27,9 @@
   </h2>
 {% endif %}
 {% if introduction %}
-  {{ introduction }}
+  <div id="timeline-introduction">
+    {{ introduction }}
+  </div>
 {% endif %}
 {% include '@ecl-twig/timeline' with {
   'toggle_collapsed': _toggle_collapsed,

diff --git a/tests/src/Kernel/Paragraphs/TimelineParagraphTest.php b/tests/src/Kernel/Paragraphs/TimelineParagraphTest.php
@@ -111,8 +111,9 @@ public function testTimeline(): void {
     $html = $this->renderParagraph($paragraph);
     $crawler = new Crawler($html);
 
-    // No heading should be rendered if the paragraph has no heading set.
+    // No heading or introduction should be rendered.
     $this->assertCount(0, $crawler->filter('h2.ecl-u-type-heading-2'));
+    $this->assertCount(0, $crawler->filter('div#timeline-introduction'));
     $this->assertCount(1, $crawler->filter('ol.ecl-timeline'));
     $this->assertCount(7, $crawler->filter('ol.ecl-timeline li.ecl-timeline__item'));
     $this->assertCount(3, $crawler->filter('ol.ecl-timeline li.ecl-timeline__item.ecl-timeline__item--collapsed'));
@@ -154,7 +155,7 @@ public function testTimeline(): void {
     // Assert rendering is updated.
     $this->assertCount(1, $crawler->filter('h2.ecl-u-type-heading-2'));
     $this->assertEquals('Timeline paragraph heading', trim($crawler->filter('h2.ecl-u-type-heading-2')->html()));
-    $this->assertEquals('Timeline paragraph introduction', trim($crawler->filter('div.ecl')->html()));
+    $this->assertEquals('Timeline paragraph introduction', trim($crawler->filter('div#timeline-introduction')->html()));
     $this->assertCount(6, $crawler->filter('ol.ecl-timeline li.ecl-timeline__item'));
     $this->assertCount(0, $crawler->filter('ol.ecl-timeline li.ecl-timeline__item.ecl-timeline__item--collapsed'));
     $this->assertCount(0, $crawler->filter('ol.ecl-timeline li.ecl-timeline__item.ecl-timeline__item--toggle'));

diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
@@ -2332,7 +2332,7 @@
   assertions:
     count:
       'h2.ecl-u-type-heading-2': 0
-      'div.ecl': 0
+      'div#timeline-introduction': 0
       'ol.ecl-timeline': 1
       'li.ecl-timeline__item': 7
       '.ecl-timeline__item.ecl-timeline__item--toggle': 1
@@ -2380,7 +2380,7 @@
   assertions:
     count:
       'h2.ecl-u-type-heading-2': 0
-      'div.ecl': 0
+      'div#timeline-introduction': 0
       'ol.ecl-timeline': 1
       'li.ecl-timeline__item': 6
       '.ecl-timeline__item.ecl-timeline__item--toggle': 0
@@ -2427,7 +2427,7 @@
   assertions:
     count:
       'h2.ecl-u-type-heading-2': 0
-      'div.ecl': 0
+      'div#timeline-introduction': 0
       'ol.ecl-timeline': 1
       'li.ecl-timeline__item': 7
       '.ecl-timeline__item.ecl-timeline__item--toggle': 1
@@ -2479,7 +2479,7 @@
   assertions:
     count:
       'h2.ecl-u-type-heading-2': 1
-      'div.ecl': 1
+      'div#timeline-introduction': 1
       'ol.ecl-timeline': 1
       'li.ecl-timeline__item': 7
       '.ecl-timeline__item.ecl-timeline__item--toggle': 1
@@ -2489,7 +2489,7 @@
       '.ecl-timeline__item:nth-child(5) .ecl-timeline__title': 0
     equals:
       'h2.ecl-u-type-heading-2': "Timeline heading"
-      'div.ecl': "Timeline introduction"
+      'div#timeline-introduction': "Timeline introduction"
       '.ecl-timeline__item:nth-child(1) .ecl-timeline__title': "Item 1"
       '.ecl-timeline__item:nth-child(1) .ecl-timeline__label': "13 September 2017"
       '.ecl-timeline__item:nth-child(2) .ecl-timeline__title': "Item 2"