Merge pull request #345 from openeuropa/OPENEUROPA-2431

OPENEUROPA-2431: Add pattern for text with featured media.
openeuropa · Oct 25, 2019 · 129a2bd · 129a2bd
2 parents 44a15f5 + 8dcc6c8
commit 129a2bd
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 0 deletions.
diff --git 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
@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Text with featured media.
+ */
+#}
+
+{% 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 or text %}
+  <div class="ecl-row">
+    {% 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 }}">
+          {% if caption %}
+            <figcaption class="ecl-media-container__caption">{{ caption }}</figcaption>
+          {% endif %}
+        </figure>
+      </div>
+    {% endif %}
+    {% if text %}
+      <div class="ecl-col-12{{ image is not empty ? ' ecl-col-md-6' }} 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
@@ -0,0 +1,26 @@
+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."
+  fields:
+    title:
+      type: "text"
+      label: "Title"
+      description: "The title, displayed above text and media."
+      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
@@ -1371,3 +1371,88 @@
       '.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-col-md-6.ecl-editor': "Some more text"
+- array:
+    '#type': pattern
+    '#id': text_featured_media
+    '#fields':
+      image:
+        src: "http://via.placeholder.com/150x150"
+      caption: "Some caption text for the image"
+      text: "Some more text"
+  assertions:
+    count:
+      '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
+    '#fields':
+      title: "Heading"
+      caption: "Some caption text for the image"
+      text: "Some more text"
+  assertions:
+    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-col-12.ecl-editor': "Some more text"
+- array:
+    '#type': pattern
+    '#id': text_featured_media
+    '#fields':
+      title: "Heading"
+      image:
+        src: "http://via.placeholder.com/150x150"
+      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-col-md-6.ecl-editor': "Some more text"
+- array:
+    '#type': pattern
+    '#id': text_featured_media
+    '#fields':
+      title: "Heading"
+      caption: "Some caption"
+  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"