From e390cf95a838e6db922a0600b0d217e4183b2ca0 Mon Sep 17 00:00:00 2001
From: nagyad <joevagyok@gmail.com>
Date: Wed, 23 Oct 2019 13:15:56 +0200
Subject: [PATCH 1/5] OPENEUROPA-2431: Add pattern for text with featured
 media.

---
 oe_theme.theme                                |  8 ++++++
 .../pattern-text-featured-media.html.twig     | 23 ++++++++++++++++
 .../text_featured_media.ui_patterns.yml       | 26 +++++++++++++++++++
 tests/Kernel/fixtures/rendering.yml           | 19 ++++++++++++++
 4 files changed, 76 insertions(+)
 create mode 100644 templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
 create mode 100644 templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml

diff --git a/oe_theme.theme b/oe_theme.theme
index b5e56ec22..dc5b089d0 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -16,6 +16,7 @@ use Drupal\Core\Url;
 use Drupal\oe_theme\ValueObject\FileValueObject;
 use Drupal\oe_theme\ValueObject\DateValueObject;
 use Drupal\oe_theme\ValueObject\GalleryItemValueObject;
+use Drupal\oe_theme\ValueObject\ImageValueObject;
 use Drupal\oe_theme_helper\EuropeanUnionLanguages;
 
 /**
@@ -932,6 +933,13 @@ function oe_theme_preprocess_pattern_date_block__preview(array &$variables): voi
   $variables['date'] = DateValueObject::fromArray($variables['date']);
 }
 
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function oe_theme_preprocess_pattern_text_featured_media__preview(array &$variables): void {
+  $variables['image'] = ImageValueObject::fromArray($variables['image']);
+}
+
 /**
  * Implements hook_theme_suggestions_HOOK_alter().
  */
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
new file mode 100644
index 000000000..6ebdf3fc8
--- /dev/null
+++ b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
@@ -0,0 +1,23 @@
+{#
+/**
+ * @file
+ * Text with featured media.
+ */
+#}
+
+{% if title is not empty and text is not empty %}
+  <h2 class="ecl-u-type-heading-2 ecl-u-mt-2xl ecl-u-mt-md-3xl ecl-u-mb-l">{{ title }}</h2>
+  <div class="ecl-row">
+    {% if image is not empty %}
+      <div class="ecl-col-12 ecl-col-md-6 ecl-u-order-md-last ecl-u-mb-l ecl-u-mb-md-none">
+        <figure class="ecl-media-container">
+          <img class="ecl-media-container__media" src="{{ image.src }}" alt="{{ image.alt }}">
+          {% if caption is not empty %}
+            <figcaption class="ecl-media-container__caption">{{ caption }}</figcaption>
+          {% endif %}
+        </figure>
+      </div>
+    {% endif %}
+    <div class="ecl-col-12 ecl-col-md-6 ecl-editor">{{ text }}</div>
+  </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
new file mode 100644
index 000000000..fb55ff805
--- /dev/null
+++ b/templates/patterns/text_featured_media/text_featured_media.ui_patterns.yml
@@ -0,0 +1,26 @@
+text_featured_media:
+  label: "Text with Featured media"
+  description: "Shows a rich text with featured media on the right."
+  fields:
+    title:
+      type: "text"
+      label: "Title"
+      description: "The heading of the text."
+      preview: "Lorem ipsum"
+    image:
+      type: "ImageValueObject"
+      label: "Image"
+      description: "Image on the right of the text."
+      preview:
+        src: "https://placeimg.com/1000/500/arch"
+        alt: "Alternative text for featured item image"
+    caption:
+      type: "text"
+      label: "Caption"
+      description: "Description of the image."
+      preview: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit."
+    text:
+      type: "text"
+      label: "Full text"
+      description: "The full rich text."
+      preview: "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."
diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml
index 09cfc9df6..66ae6840d 100644
--- a/tests/Kernel/fixtures/rendering.yml
+++ b/tests/Kernel/fixtures/rendering.yml
@@ -1371,3 +1371,22 @@
       '.ecl-timeline2__item:nth-child(4) .ecl-timeline2__content': "Lorem Ipsum 4"
       '.ecl-timeline2__item:nth-child(5) .ecl-timeline2__content': "Lorem Ipsum 5"
       '.ecl-timeline2__item:nth-child(6) .ecl-timeline2__content': "Lorem Ipsum 6"
+- array:
+    '#type': pattern
+    '#id': text_featured_media
+    '#fields':
+      title: "Heading"
+      image:
+        src: "http://via.placeholder.com/150x150"
+      caption: "Some caption text for the image"
+      text: "Some more text"
+  assertions:
+    count:
+      'div.ecl-row': 1
+      'figure.ecl-media-container': 1
+      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
+      'figcaption.ecl-media-container__caption': 1
+    equals:
+      'h2.ecl-u-type-heading-2': "Heading"
+      'figcaption.ecl-media-container__caption': "Some caption text for the image"
+      'div.ecl-editor': "Some more text"

From 681e5e7722f896750b124340ddec8783dbfc456a Mon Sep 17 00:00:00 2001
From: nagyad <joevagyok@gmail.com>
Date: Thu, 24 Oct 2019 10:53:35 +0200
Subject: [PATCH 2/5] OPENEUROPA-2431: Extend rendering test and improve twig.

---
 .../pattern-text-featured-media.html.twig     | 19 ++++---
 tests/Kernel/fixtures/rendering.yml           | 50 +++++++++++++++++++
 2 files changed, 62 insertions(+), 7 deletions(-)

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
index 6ebdf3fc8..e8d5591d6 100644
--- a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
+++ b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
@@ -5,19 +5,24 @@
  */
 #}
 
-{% if title is not empty and text is not empty %}
-  <h2 class="ecl-u-type-heading-2 ecl-u-mt-2xl ecl-u-mt-md-3xl ecl-u-mb-l">{{ title }}</h2>
+{% set _title = title|default('') %}
+{% set _image = image|default('') %}
+{% set _caption = caption|default('') %}
+{% set _text = text|default('') %}
+
+{% if _title is not empty and _text is not empty %}
+  <h2 class="ecl-u-type-heading-2 ecl-u-mt-2xl ecl-u-mt-md-3xl ecl-u-mb-l">{{ _title }}</h2>
   <div class="ecl-row">
-    {% if image is not empty %}
+    {% if _image is not empty %}
       <div class="ecl-col-12 ecl-col-md-6 ecl-u-order-md-last ecl-u-mb-l ecl-u-mb-md-none">
         <figure class="ecl-media-container">
-          <img class="ecl-media-container__media" src="{{ image.src }}" alt="{{ image.alt }}">
-          {% if caption is not empty %}
-            <figcaption class="ecl-media-container__caption">{{ caption }}</figcaption>
+          <img class="ecl-media-container__media" src="{{ _image.src }}" alt="{{ _image.alt }}">
+          {% if _caption is not empty %}
+            <figcaption class="ecl-media-container__caption">{{ _caption }}</figcaption>
           {% endif %}
         </figure>
       </div>
     {% endif %}
-    <div class="ecl-col-12 ecl-col-md-6 ecl-editor">{{ text }}</div>
+    <div class="ecl-col-12 ecl-col-md-6 ecl-editor">{{ _text }}</div>
   </div>
 {% endif %}
diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml
index 66ae6840d..d62131484 100644
--- a/tests/Kernel/fixtures/rendering.yml
+++ b/tests/Kernel/fixtures/rendering.yml
@@ -1390,3 +1390,53 @@
       'h2.ecl-u-type-heading-2': "Heading"
       'figcaption.ecl-media-container__caption': "Some caption text for the image"
       'div.ecl-editor': "Some more text"
+- array:
+    '#type': pattern
+    '#id': text_featured_media
+    '#fields':
+      title: ""
+      image:
+        src: "http://via.placeholder.com/150x150"
+      caption: "Some caption text for the image"
+      text: "Some more text"
+  assertions:
+    count:
+      'div.ecl-row': 0
+      'figure.ecl-media-container': 0
+      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
+      'figcaption.ecl-media-container__caption': 0
+- array:
+    '#type': pattern
+    '#id': text_featured_media
+    '#fields':
+      title: "Heading"
+      image: ""
+      caption: "Some caption text for the image"
+      text: "Some more text"
+  assertions:
+    count:
+      'div.ecl-row': 1
+      'figure.ecl-media-container': 0
+      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
+      'figcaption.ecl-media-container__caption': 0
+    equals:
+      'h2.ecl-u-type-heading-2': "Heading"
+      'div.ecl-editor': "Some more text"
+- array:
+    '#type': pattern
+    '#id': text_featured_media
+    '#fields':
+      title: "Heading"
+      image:
+        src: "http://via.placeholder.com/150x150"
+      caption: ""
+      text: "Some more text"
+  assertions:
+    count:
+      'div.ecl-row': 1
+      'figure.ecl-media-container': 1
+      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
+      'figcaption.ecl-media-container__caption': 0
+    equals:
+      'h2.ecl-u-type-heading-2': "Heading"
+      'div.ecl-editor': "Some more text"

From 8c5d5bf1e859c796d4ebac00ffc4caa51c881fdc Mon Sep 17 00:00:00 2001
From: nagyad <joevagyok@gmail.com>
Date: Thu, 24 Oct 2019 14:00:29 +0200
Subject: [PATCH 3/5] OPENEUROPA-2431: Add more twig logic and test.

---
 .../pattern-text-featured-media.html.twig     | 27 ++++++++------
 .../text_featured_media.ui_patterns.yml       |  4 +--
 tests/Kernel/fixtures/rendering.yml           | 36 +++++++++++++++----
 3 files changed, 47 insertions(+), 20 deletions(-)

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
index e8d5591d6..610784eb1 100644
--- a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
+++ b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
@@ -5,24 +5,29 @@
  */
 #}
 
-{% set _title = title|default('') %}
-{% set _image = image|default('') %}
-{% set _caption = caption|default('') %}
-{% set _text = text|default('') %}
+{% set _column_css = ' ecl-col-md-6' %}
 
-{% if _title is not empty and _text is not empty %}
-  <h2 class="ecl-u-type-heading-2 ecl-u-mt-2xl ecl-u-mt-md-3xl ecl-u-mb-l">{{ _title }}</h2>
+{% if image.src is empty %}
+  {% set _column_css = '' %}
+{% endif %}
+
+{% 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 %}
+{% if image.src or text %}
   <div class="ecl-row">
-    {% if _image is not empty %}
+    {% if image.src %}
       <div class="ecl-col-12 ecl-col-md-6 ecl-u-order-md-last ecl-u-mb-l ecl-u-mb-md-none">
         <figure class="ecl-media-container">
-          <img class="ecl-media-container__media" src="{{ _image.src }}" alt="{{ _image.alt }}">
-          {% if _caption is not empty %}
-            <figcaption class="ecl-media-container__caption">{{ _caption }}</figcaption>
+          <img class="ecl-media-container__media" src="{{ image.src }}" alt="{{ image.alt }}">
+          {% if caption %}
+            <figcaption class="ecl-media-container__caption">{{ caption }}</figcaption>
           {% endif %}
         </figure>
       </div>
     {% endif %}
-    <div class="ecl-col-12 ecl-col-md-6 ecl-editor">{{ _text }}</div>
+    {% if text %}
+      <div class="ecl-col-12{{ _column_css }} ecl-editor">{{ text }}</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
index fb55ff805..b2fd47329 100644
--- 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,11 +1,11 @@
 text_featured_media:
   label: "Text with Featured media"
-  description: "Shows a rich text with featured media on the right."
+  description: "Shows a rich text with a title and a featured media on the right, if any."
   fields:
     title:
       type: "text"
       label: "Title"
-      description: "The heading of the text."
+      description: "The title, displayed above text and media."
       preview: "Lorem ipsum"
     image:
       type: "ImageValueObject"
diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml
index d62131484..d2622d81d 100644
--- a/tests/Kernel/fixtures/rendering.yml
+++ b/tests/Kernel/fixtures/rendering.yml
@@ -1389,7 +1389,7 @@
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
       'figcaption.ecl-media-container__caption': "Some caption text for the image"
-      'div.ecl-editor': "Some more text"
+      'div.ecl-col-md-6.ecl-editor': "Some more text"
 - array:
     '#type': pattern
     '#id': text_featured_media
@@ -1401,10 +1401,14 @@
       text: "Some more text"
   assertions:
     count:
-      'div.ecl-row': 0
-      'figure.ecl-media-container': 0
-      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
-      'figcaption.ecl-media-container__caption': 0
+      'h2.ecl-u-type-heading-2': 0
+      'div.ecl-row': 1
+      'figure.ecl-media-container': 1
+      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
+      'figcaption.ecl-media-container__caption': 1
+    equals:
+      'figcaption.ecl-media-container__caption': "Some caption text for the image"
+      'div.ecl-col-md-6.ecl-editor': "Some more text"
 - array:
     '#type': pattern
     '#id': text_featured_media
@@ -1417,11 +1421,12 @@
     count:
       'div.ecl-row': 1
       '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
       'figcaption.ecl-media-container__caption': 0
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
-      'div.ecl-editor': "Some more text"
+      'div.ecl-col-12.ecl-editor': "Some more text"
 - array:
     '#type': pattern
     '#id': text_featured_media
@@ -1439,4 +1444,21 @@
       'figcaption.ecl-media-container__caption': 0
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
-      'div.ecl-editor': "Some more text"
+      'div.ecl-col-md-6.ecl-editor': "Some more text"
+- array:
+    '#type': pattern
+    '#id': text_featured_media
+    '#fields':
+      title: "Heading"
+      image:
+        src: ""
+      caption: "Some caption"
+      text: ""
+  assertions:
+    count:
+      'div.ecl-row': 0
+      'figure.ecl-media-container': 0
+      'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
+      'figcaption.ecl-media-container__caption': 0
+    equals:
+      'h2.ecl-u-type-heading-2': "Heading"

From b6c6ba956d8ce5689fd22dee684e41cdcfaa5c09 Mon Sep 17 00:00:00 2001
From: nagyad <joevagyok@gmail.com>
Date: Thu, 24 Oct 2019 15:11:04 +0200
Subject: [PATCH 4/5] OPENEUROPA-2431: Improvements.

---
 oe_theme.theme                                       |  4 +++-
 .../pattern-text-featured-media.html.twig            | 12 +++---------
 tests/Kernel/fixtures/rendering.yml                  |  6 ------
 3 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index dc5b089d0..92bf07141 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -937,7 +937,9 @@ function oe_theme_preprocess_pattern_date_block__preview(array &$variables): voi
  * Implements hook_preprocess_HOOK().
  */
 function oe_theme_preprocess_pattern_text_featured_media__preview(array &$variables): void {
-  $variables['image'] = ImageValueObject::fromArray($variables['image']);
+  if (is_array($variables['image'])) {
+    $variables['image'] = ImageValueObject::fromArray($variables['image']);
+  }
 }
 
 /**
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
index 610784eb1..0b8e9688f 100644
--- a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
+++ b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
@@ -5,18 +5,12 @@
  */
 #}
 
-{% set _column_css = ' ecl-col-md-6' %}
-
-{% if image.src is empty %}
-  {% set _column_css = '' %}
-{% endif %}
-
 {% 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 %}
-{% if image.src or text %}
+{% if image or text %}
   <div class="ecl-row">
-    {% if image.src %}
+    {% if image %}
       <div class="ecl-col-12 ecl-col-md-6 ecl-u-order-md-last ecl-u-mb-l ecl-u-mb-md-none">
         <figure class="ecl-media-container">
           <img class="ecl-media-container__media" src="{{ image.src }}" alt="{{ image.alt }}">
@@ -27,7 +21,7 @@
       </div>
     {% endif %}
     {% if text %}
-      <div class="ecl-col-12{{ _column_css }} ecl-editor">{{ text }}</div>
+      <div class="ecl-col-12{{ (image is empty) ? '' : ' ecl-col-md-6' }} ecl-editor">{{ text }}</div>
     {% endif %}
   </div>
 {% endif %}
diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml
index d2622d81d..660d25c82 100644
--- a/tests/Kernel/fixtures/rendering.yml
+++ b/tests/Kernel/fixtures/rendering.yml
@@ -1394,7 +1394,6 @@
     '#type': pattern
     '#id': text_featured_media
     '#fields':
-      title: ""
       image:
         src: "http://via.placeholder.com/150x150"
       caption: "Some caption text for the image"
@@ -1414,7 +1413,6 @@
     '#id': text_featured_media
     '#fields':
       title: "Heading"
-      image: ""
       caption: "Some caption text for the image"
       text: "Some more text"
   assertions:
@@ -1434,7 +1432,6 @@
       title: "Heading"
       image:
         src: "http://via.placeholder.com/150x150"
-      caption: ""
       text: "Some more text"
   assertions:
     count:
@@ -1450,10 +1447,7 @@
     '#id': text_featured_media
     '#fields':
       title: "Heading"
-      image:
-        src: ""
       caption: "Some caption"
-      text: ""
   assertions:
     count:
       'div.ecl-row': 0

From 8dcc6c80e03bd7fe1b983b253091fbc8c955aabe Mon Sep 17 00:00:00 2001
From: nagyad <joevagyok@gmail.com>
Date: Fri, 25 Oct 2019 08:27:09 +0200
Subject: [PATCH 5/5] OPENEUROPA-2431: Simplify logic.

---
 oe_theme.theme                                                | 4 +---
 .../text_featured_media/pattern-text-featured-media.html.twig | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/oe_theme.theme b/oe_theme.theme
index 92bf07141..dc5b089d0 100644
--- a/oe_theme.theme
+++ b/oe_theme.theme
@@ -937,9 +937,7 @@ function oe_theme_preprocess_pattern_date_block__preview(array &$variables): voi
  * Implements hook_preprocess_HOOK().
  */
 function oe_theme_preprocess_pattern_text_featured_media__preview(array &$variables): void {
-  if (is_array($variables['image'])) {
-    $variables['image'] = ImageValueObject::fromArray($variables['image']);
-  }
+  $variables['image'] = ImageValueObject::fromArray($variables['image']);
 }
 
 /**
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
index 0b8e9688f..177a966dc 100644
--- a/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
+++ b/templates/patterns/text_featured_media/pattern-text-featured-media.html.twig
@@ -21,7 +21,7 @@
       </div>
     {% endif %}
     {% if text %}
-      <div class="ecl-col-12{{ (image is empty) ? '' : ' ecl-col-md-6' }} ecl-editor">{{ text }}</div>
+      <div class="ecl-col-12{{ image is not empty ? ' ecl-col-md-6' }} ecl-editor">{{ text }}</div>
     {% endif %}
   </div>
 {% endif %}