EWPP-876: Theme the link and new variants on text with featued media …

…paragraphs.
openeuropa · Jun 21, 2021 · 10bb3cf · 10bb3cf
1 parent 5c00aa9
commit 10bb3cf
Show file tree

Hide file tree

Showing 8 changed files with 224 additions and 11 deletions.
diff --git a/composer.json b/composer.json
@@ -52,7 +52,7 @@
         "openeuropa/oe_corporate_countries": "~2.0",
         "openeuropa/oe_media": "~1.12",
         "openeuropa/oe_multilingual": "dev-master",
-        "openeuropa/oe_paragraphs": "dev-master",
+        "openeuropa/oe_paragraphs": "dev-EPIC-EWPP-873-Text-media-2",
         "openeuropa/oe_search": "~1.0",
         "openeuropa/oe_webtools": "~1.10",
         "openeuropa/oe_contact_forms": "~1.0",

diff --git a/oe_theme.theme b/oe_theme.theme
@@ -906,6 +906,20 @@ function oe_theme_preprocess_paragraph__oe_text_feature_media(array &$variables)
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = $variables['paragraph'];
 
+  // Set pattern variant.
+  if (!$paragraph->get('oe_paragraphs_variant')->isEmpty()) {
+    $variables['variant'] = $paragraph->get('oe_paragraphs_variant')->first()->value;
+  }
+
+  // Add link field.
+  if (!$paragraph->get('field_oe_link')->isEmpty()) {
+    $link_field = $paragraph->get('field_oe_link')->first();
+    $variables['link'] = [
+      'path' => $link_field->getUrl()->toString(),
+      'label' => $link_field->get('title')->getValue(),
+    ];
+  }
+
   // Bail out if there is no media present.
   if ($paragraph->get('field_oe_media')->isEmpty()) {
     return;

diff --git a/templates/paragraphs/paragraph--oe-text-feature-media.html.twig b/templates/paragraphs/paragraph--oe-text-feature-media.html.twig
@@ -13,10 +13,12 @@
  #}
 
 {{ pattern('text_featured_media', {
+  'variant': variant,
   'title': not paragraph.field_oe_title.isEmpty ? content.field_oe_title,
   'image': image,
   'video': video,
   'video_ratio': ratio,
   'caption': not paragraph.field_oe_plain_text_long.isEmpty ? content.field_oe_plain_text_long,
   'text': not paragraph.field_oe_text_long.isEmpty ? content.field_oe_text_long,
+  'link': link|default([]),
 }) }}
diff --git a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
@@ -2,23 +2,53 @@
 /**
  * @file
  * Text with featured media.
+ *
+ * Variant "left_simple" is used by default.
  */
 #}
 
+{% set variant = variant|default('left_simple') %}
+
 {% set video_ratio = video_ratio|replace({':': '-'}) %}
 {% set allowed_values = ['16-9','4-3','3-2','1-1'] %}
 {% if video_ratio not in allowed_values %}
   {% set video_ratio = '16-9' %}
 {% endif %}
 {% set text = text|render %}
 
-{% if image or video or text %}
+{% set media_position_class = ' ecl-u-order-md-last' %}
+{% if 'right' in variant %}
+  {% set media_position_class = '' %}
+{% endif %}
+
+{% set call_to_action_link = '' %}
+{% if link %}
+  {% set link_type = 'standalone' %}
+  {% if 'featured' in variant %}
+    {% set link_type = 'cta' %}
+  {% endif %}
+
+  {% set call_to_action_link %}
+    {% include '@ecl-twig/link' with {
+      link: {
+        type: link_type,
+        label: link.label,
+        path: link.path,
+        icon_position: 'after'
+      },
+      extra_classes: 'ecl-u-mt-m ecl-u-mt-md-l ecl-u-type-bold',
+      icon: get_link_icon(link.path)
+    } %}
+  {% endset %}
+{% endif %}
+
+{% if image or video or text or call_to_action_link %}
   {% if title %}
     <h2 class="ecl-u-type-heading-2 ecl-u-mt-2xl ecl-u-mt-md-3xl ecl-u-mb-l">{{ title }}</h2>
   {% endif %}
   <div class="ecl-row">
     {% if image or video %}
-      <div class="ecl-col-md-6 ecl-u-order-md-last ecl-u-mb-m ecl-u-mb-md-none">
+      <div class="ecl-col-md-6 ecl-u-mb-m ecl-u-mb-md-none{{ media_position_class }}">
         {% if image %}
           {% include '@ecl-twig/media-container' with {
             'image': image.src,
@@ -34,8 +64,13 @@
         {% endif %}
       </div>
     {% endif %}
-    {% if text %}
-      <div class="{{ image or video ? ' ecl-col-md-6' : 'ecl-col-12' }} ecl-editor">{{ text }}</div>
+    {% if text or call_to_action_link %}
+      <div class="{{ image or video ? 'ecl-col-md-6' : 'ecl-col-12' }}">
+        {% if text %}
+          <div class="ecl-editor">{{ text }}</div>
+        {% endif %}
+        {{ call_to_action_link }}
+      </div>
     {% endif %}
   </div>
 {% endif %}
diff --git a/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml b/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml
@@ -1,6 +1,19 @@
 text_featured_media:
   label: "Text with Featured media"
   description: "Shows a rich text with a title and a featured media on the right, if any."
+  variants:
+    left_simple:
+      label: 'Left simple'
+      description: 'Text on the left, simple call to action.'
+    right_simple:
+      label: 'Right simple'
+      description: 'Text on the right, simple call to action.'
+    left_featured:
+      label: 'Left featured'
+      description: 'Text on the left, featured call to action'
+    right_featured:
+      label: 'Right featured'
+      description: 'Text on the right, featured call to action'
   fields:
     title:
       type: "text"
@@ -35,3 +48,10 @@ text_featured_media:
       label: "Video aspect ratio"
       description: "Aspect ratio used to display videos in media container. Allowed values: 16:9, 4:3, 3:2, 1:1. Defaults to 16:9 if in invalid value is passed. This will not have any effects when used with images."
       preview: "16:9"
+    link:
+      type: "array"
+      label: "Link"
+      description: "Call to action link with icon"
+      preview:
+        label: "View all"
+        path: "#"
diff --git a/tests/Kernel/Paragraphs/MediaParagraphsTest.php b/tests/Kernel/Paragraphs/MediaParagraphsTest.php
@@ -282,6 +282,55 @@ public function testTextWithMedia(): void {
     $html = $this->renderParagraph($paragraph);
     $expected_values['video_ratio'] = '1:1';
     $assert->assertPattern($expected_values, $html);
+
+    // Assert Link field.
+    $paragraph->set('field_oe_link', [
+      'uri' => 'http://www.example.com/',
+      'title' => 'Read more',
+    ])->save();
+
+    $html = $this->renderParagraph($paragraph);
+    $expected_values['link'] = [
+      'label' => 'Read more',
+      'path' => 'http://www.example.com/',
+      'icon' => 'external',
+    ];
+    $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('left_simple', $html);
+
+    // Assert icon of the Link field.
+    $paragraph->set('field_oe_link', [
+      'uri' => 'internal:/',
+      'title' => 'Read more',
+    ])->save();
+
+    $html = $this->renderParagraph($paragraph);
+    $expected_values['link'] = [
+      'label' => 'Read more',
+      'path' => '/',
+      'icon' => 'corner-arrow',
+    ];
+    $assert->assertPattern($expected_values, $html);
+
+    // Assert "Text on the left, simple call to action" variant.
+    $paragraph->set('oe_paragraphs_variant', 'left_simple')->save();
+    $html = $this->renderParagraph($paragraph);
+    $assert->assertVariant('left_simple', $html);
+
+    // Assert "Text on the right, simple call to action" variant.
+    $paragraph->set('oe_paragraphs_variant', 'right_simple')->save();
+    $html = $this->renderParagraph($paragraph);
+    $assert->assertVariant('right_simple', $html);
+
+    // Assert "Text on the left, featured call to action" variant.
+    $paragraph->set('oe_paragraphs_variant', 'left_featured')->save();
+    $html = $this->renderParagraph($paragraph);
+    $assert->assertVariant('left_featured', $html);
+
+    // Assert "Text on the right, featured call to action" variant.
+    $paragraph->set('oe_paragraphs_variant', 'right_featured')->save();
+    $html = $this->renderParagraph($paragraph);
+    $assert->assertVariant('right_featured', $html);
   }
 
   /**

diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml
@@ -2260,42 +2260,56 @@
 - array:
     '#type': pattern
     '#id': text_featured_media
+    '#variant': "left_simple"
     '#fields':
       title: "Heading"
       image:
         src: "http://via.placeholder.com/150x150"
       caption: "Some caption text for the image"
       text: "Some more text"
+      link:
+        label: "Call to action"
+        path: "http://example.com"
   assertions:
     count:
       'div.ecl-row': 1
+      'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none.ecl-u-order-md-last': 1
       'figure.ecl-media-container': 1
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
       'div.ecl-media-container__media--ratio-16-9 iframe': 0
       'figcaption.ecl-media-container__caption': 1
+      'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
       'figcaption.ecl-media-container__caption': "Some caption text for the image"
-      'div.ecl-col-md-6.ecl-editor': "Some more text"
+      'div.ecl-col-md-6 div.ecl-editor': "Some more text"
+      'a.ecl-link span.ecl-link__label': "Call to action"
 - array:
     '#type': pattern
     '#id': text_featured_media
+    '#variant': "right_simple"
     '#fields':
       image:
         src: "http://via.placeholder.com/150x150"
       caption: "Some caption text for the image"
       text: "Some more text"
+      link:
+        label: "Call to action"
+        path: "http://example.com"
   assertions:
     count:
       'h2.ecl-u-type-heading-2': 0
       'div.ecl-row': 1
+      'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none.ecl-u-order-md-last': 0
       'figure.ecl-media-container': 1
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
       'div.ecl-media-container__media--ratio-16-9 iframe': 0
       'figcaption.ecl-media-container__caption': 1
+      'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
     equals:
       'figcaption.ecl-media-container__caption': "Some caption text for the image"
-      'div.ecl-col-md-6.ecl-editor': "Some more text"
+      'div.ecl-col-md-6 div.ecl-editor': "Some more text"
+      'a.ecl-link span.ecl-link__label': "Call to action"
 - array:
     '#type': pattern
     '#id': text_featured_media
@@ -2306,32 +2320,41 @@
   assertions:
     count:
       'div.ecl-row': 1
+      'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none': 0
       'figure.ecl-media-container': 0
       'div.ecl-col-md-6.ecl-editor': 0
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
       'div.ecl-media-container__media--ratio-16-9 iframe': 0
       'figcaption.ecl-media-container__caption': 0
+      'a.ecl-link': 0
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
-      'div.ecl-col-12.ecl-editor': "Some more text"
+      'div.ecl-col-12 div.ecl-editor': "Some more text"
 - array:
     '#type': pattern
     '#id': text_featured_media
+    '#variant': "right_featured"
     '#fields':
       title: "Heading"
       image:
         src: "http://via.placeholder.com/150x150"
       text: "Some more text"
+      link:
+        label: "Call to action"
+        path: "http://example.com"
   assertions:
     count:
       'div.ecl-row': 1
+      'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none.ecl-u-order-md-last': 0
       'figure.ecl-media-container': 1
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
       'div.ecl-media-container__media--ratio-16-9 iframe': 0
       'figcaption.ecl-media-container__caption': 0
+      'a.ecl-link.ecl-link--cta[href="http://example.com"]': 1
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
-      'div.ecl-col-md-6.ecl-editor': "Some more text"
+      'div.ecl-col-md-6 div.ecl-editor': "Some more text"
+      'a.ecl-link span.ecl-link__label': "Call to action"
 - array:
     '#type': pattern
     '#id': text_featured_media
@@ -2342,14 +2365,17 @@
     count:
       'div.ecl-row': 0
       'figure.ecl-media-container': 0
+      'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none': 0
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
       'div.ecl-media-container__media--ratio-16-9 iframe': 0
       'figcaption.ecl-media-container__caption': 0
       'h2.ecl-u-type-heading-2': 0
+      'a.ecl-link': 0
     equals: {}
 - array:
     '#type': pattern
     '#id': text_featured_media
+    '#variant': "left_featured"
     '#fields':
       title: "Heading"
       video:
@@ -2359,16 +2385,22 @@
           id: 'videoplayerI-181645'
           src: '//ec.europa.eu/avservices/play.cfm?ref=I-181645'
       text: "Some more text"
+      link:
+        label: "Call to action"
+        path: "http://example.com"
   assertions:
     count:
       'div.ecl-row': 1
+      'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none.ecl-u-order-md-last': 1
       'figure.ecl-media-container': 1
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
       'div.ecl-media-container__media--ratio-16-9 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1
       'figcaption.ecl-media-container__caption': 0
+      'a.ecl-link.ecl-link--cta[href="http://example.com"]': 1
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
-      'div.ecl-col-md-6.ecl-editor': "Some more text"
+      'div.ecl-col-md-6 div.ecl-editor': "Some more text"
+      'a.ecl-link span.ecl-link__label': "Call to action"
 - array:
     '#type': pattern
     '#id': text_featured_media
@@ -2394,9 +2426,14 @@
           id: 'videoplayerI-181645'
           src: '//ec.europa.eu/avservices/play.cfm?ref=I-181645'
       video_ratio: "1:1"
+      link:
+        label: "Call to action"
+        path: "http://example.com"
   assertions:
     count:
       'div.ecl-media-container__media--ratio-1-1 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1
+      'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none.ecl-u-order-md-last': 1
+      'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
 - array:
     '#type': pattern
     '#id': icons_with_text