Merge pull request #839 from openeuropa/EWPP-876

[EWPP-873] EWPP-876: Theme the link and new variants on text with featued media paragraphs.
openeuropa · Jul 8, 2021 · bdaf9fe · bdaf9fe
2 parents 7cec91b + 0a27a2e
commit bdaf9fe
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -113,6 +113,20 @@ users can access to the main navigation menu only on sites using standardised EC
 
 To learn more about EC/EU families and ECL branding visit the [ECL website](https://ec.europa.eu/component-library).
 
+### Upgrade to 2.21.0
+
+#### Text with Featured media pattern
+
+The pattern [Text with Featured media](/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml) now
+supports the following 4 variants:
+
+- Left simple / `left_simple`: text on the left, simple call to action. This is the default behaviour.
+- Right simple / `right_simple`: text on the right, simple call to action.
+- Left featured / `left_featured`: text on the left, featured call to action.
+- Right featured / `right_featured`: text on the right, featured call to action.
+
+If no variant is set, then the pattern will be visualized using the default one. This guarantees backward compatibility.
+
 ### Upgrade to 2.17.0
 
 #### Dropdown UI pattern

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
@@ -915,6 +915,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,47 @@
 /**
  * @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 = 'right' in variant ? '' : ' ecl-u-order-md-last' %}
+
+{% set call_to_action_link = '' %}
+{% if link %}
+  {% set link_type = 'featured' in variant ? 'cta' : 'standalone' %}
+
+  {% 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 +58,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. This is the default behaviour.'
+    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
@@ -87,6 +87,7 @@ public function testTextWithMedia(): void {
       'image' => NULL,
     ];
     $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('left_simple', $html);
 
     // Set image media translatable.
     $this->container->get('content_translation.manager')->setEnabled('media', 'image', TRUE);
@@ -145,6 +146,7 @@ public function testTextWithMedia(): void {
     ];
     $html = $this->renderParagraph($paragraph, 'en');
     $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('left_simple', $html);
 
     $expected_values = [
       'title' => 'Title bg',
@@ -174,6 +176,7 @@ public function testTextWithMedia(): void {
     ];
     $html = $this->renderParagraph($paragraph);
     $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('left_simple', $html);
 
     // Publish the media.
     $media->set('status', 1);
@@ -198,6 +201,7 @@ public function testTextWithMedia(): void {
       ],
     ];
     $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('left_simple', $html);
 
     // Remove the title and assert the element is no longer rendered.
     $paragraph->set('field_oe_title', '');
@@ -206,6 +210,7 @@ public function testTextWithMedia(): void {
     $html = $this->renderParagraph($paragraph);
     $expected_values['title'] = NULL;
     $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('left_simple', $html);
 
     // Create a remote video and add it to the paragraph.
     $media = $media_storage->create([
@@ -248,6 +253,7 @@ public function testTextWithMedia(): void {
       'video_ratio' => '16:9',
     ];
     $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('left_simple', $html);
 
     // Create iframe video with aspect ration 16:9 and add it to the paragraph.
     $media = $media_storage->create([
@@ -257,6 +263,7 @@ public function testTextWithMedia(): void {
     ]);
     $media->save();
     $paragraph->set('field_oe_media', ['target_id' => $media->id()]);
+    $paragraph->set('oe_paragraphs_variant', 'left_featured');
     $paragraph->save();
 
     $html = $this->renderParagraph($paragraph);
@@ -268,6 +275,8 @@ public function testTextWithMedia(): void {
       'video_ratio' => '16:9',
     ];
     $assert->assertPattern($expected_values, $html);
+    // Since link doesn't exist variant is recognized as "left_simple".
+    $assert->assertVariant('left_simple', $html);
 
     // Create iframe video with aspect ration 1:1 and add it to the paragraph.
     $media = $media_storage->create([
@@ -282,6 +291,75 @@ public function testTextWithMedia(): void {
     $html = $this->renderParagraph($paragraph);
     $expected_values['video_ratio'] = '1:1';
     $assert->assertPattern($expected_values, $html);
+    $assert->assertVariant('left_simple', $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_featured', $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->assertVariant('left_featured', $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);
+
+    // Assert Link field without media.
+    $paragraph->set('field_oe_media', [])->save();
+    $expected_values = [
+      'title' => NULL,
+      'caption' => NULL,
+      'text' => NULL,
+      'link' => [
+        'label' => 'Read more',
+        'path' => '/',
+        'icon' => 'corner-arrow',
+      ],
+    ];
+    $html = $this->renderParagraph($paragraph);
+    $assert->assertPattern($expected_values, $html);
+    // Variant "right_featured" without media but with link will be determined
+    // as "left_featured".
+    $assert->assertVariant('left_featured', $html);
   }
 
   /**