From 7a4e56eafefcb1dad6f8a6fc909eb0aedb227154 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Wed, 6 Apr 2022 14:16:34 +0300 Subject: [PATCH] EWPP-2126: Fix text with featured media spacing issue between items. --- .../pattern-text-featured-media.html.twig | 12 +++++++++-- tests/src/Kernel/fixtures/rendering.yml | 20 +++++++++++-------- .../TextFeaturedMediaAssert.php | 10 +++++----- 3 files changed, 27 insertions(+), 15 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 bd3813fa7..65be5cc47 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 @@ -16,7 +16,15 @@ {% endif %} {% set text = text|render %} -{% set media_position_class = 'right' in variant ? '' : ' ecl-u-order-m-last' %} +{% if 'right' in variant %} + {% if highlighted == true %} + {% set media_class = 'ecl-u-pr-l ecl-u-pl-none' %} + {% else %} + {% set media_class = 'ecl-u-pl-none' %} + {% endif %} +{% else %} + {% set media_class = 'ecl-u-order-m-last ecl-u-pr-none' %} +{% endif %} {% set call_to_action_link = '' %} {% if link %} @@ -43,7 +51,7 @@ {% endif %}
{% if image or video %} -
+
{% if image %} {% include '@ecl-twig/media-container' with { 'image': image.src, diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index a239b9c6d..ce57135cc 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -2541,8 +2541,8 @@ 'div.ecl-featured-item': 1 'div.ecl-featured-item.ecl-featured-item--extended': 0 'article.ecl-featured-item__container': 1 - 'div.ecl-featured-item__item': 2 - 'div.ecl-featured-item__item.ecl-u-order-m-last': 1 + 'div.ecl-featured-item__item': 1 + 'div.ecl-col-m-6.ecl-u-order-m-last': 1 'div.ecl-featured-item__title': 1 'figure.ecl-media-container': 1 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1 @@ -2574,7 +2574,8 @@ 'div.ecl-featured-item.ecl-featured-item--extended': 1 'div.ecl-featured-item__heading': 0 'article.ecl-featured-item__container': 1 - 'div.ecl-featured-item__item.ecl-u-order-m-last': 0 + 'div.ecl-col-m-6.ecl-u-order-m-last': 0 + 'div.ecl-col-m-6.ecl-u-pr-l.ecl-u-pl-none': 1 'div.ecl-featured-item__title': 1 'figure.ecl-media-container': 1 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1 @@ -2605,7 +2606,8 @@ 'div.ecl-featured-item.ecl-featured-item--extended': 1 'div.ecl-featured-item__heading': 1 'article.ecl-featured-item__container': 1 - 'div.ecl-featured-item__item.ecl-u-order-m-last': 0 + 'div.ecl-col-m-6.ecl-u-order-m-last': 0 + 'div.ecl-col-m-6.ecl-u-pr-l.ecl-u-pl-none': 1 'div.ecl-featured-item__title': 0 'figure.ecl-media-container': 1 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1 @@ -2630,7 +2632,7 @@ 'div.ecl-featured-item': 1 'div.ecl-featured-item.ecl-featured-item--extended': 0 'article.ecl-featured-item__container': 1 - 'div.ecl-col-md-6.ecl-u-mb-m.ecl-u-mb-md-none': 0 + 'div.ecl-col-md-6': 0 'div.ecl-featured-item__title': 1 'figure.ecl-media-container': 0 'div.ecl-featured-item__item.ecl': 0 @@ -2660,7 +2662,8 @@ 'div.ecl-featured-item': 1 'div.ecl-featured-item.ecl-featured-item--extended': 0 'article.ecl-featured-item__container': 1 - 'div.ecl-featured-item__item.ecl-u-order-m-last': 0 + 'div.ecl-col-m-6.ecl-u-order-m-last': 0 + 'div.ecl-col-m-6.ecl-u-pl-none': 1 'div.ecl-featured-item__title': 1 'figure.ecl-media-container': 1 'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1 @@ -2683,6 +2686,7 @@ 'div.ecl-featured-item': 0 'div.ecl-featured-item.ecl-featured-item--extended': 0 'article.ecl-featured-item__container': 0 + 'div.ecl-col-m-6': 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 @@ -2712,7 +2716,7 @@ 'div.ecl-featured-item': 1 'div.ecl-featured-item.ecl-featured-item--extended': 0 'article.ecl-featured-item__container': 1 - 'div.ecl-featured-item__item.ecl-u-order-m-last': 1 + 'div.ecl-col-m-6.ecl-u-order-m-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 @@ -2753,7 +2757,7 @@ assertions: count: 'div.ecl-media-container__media--ratio-1-1 iframe[src="//ec.europa.eu/avservices/play.cfm?ref=I-181645"]': 1 - 'div.ecl-featured-item__item.ecl-u-order-m-last': 1 + 'div.ecl-col-m-6.ecl-u-order-m-last': 1 'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1 - array: '#type': pattern diff --git a/tests/src/PatternAssertions/TextFeaturedMediaAssert.php b/tests/src/PatternAssertions/TextFeaturedMediaAssert.php index bf7b77cea..a4f2a3a72 100644 --- a/tests/src/PatternAssertions/TextFeaturedMediaAssert.php +++ b/tests/src/PatternAssertions/TextFeaturedMediaAssert.php @@ -131,11 +131,11 @@ protected function getPatternVariant(string $html): string { $crawler = new Crawler($html); $position_variant = 'left'; - $items = $crawler->filter('article.ecl-featured-item__container div.ecl-featured-item__item'); - $media_position = $crawler->filter('.ecl-u-order-m-last'); - if ($items->count() === 2 && !$media_position->count()) { - // If we have 2 items rendered but the media position class is not set, - // then we have one of the right variants. + $media_wrapper = $crawler->filter('.ecl-col-m-6'); + $media_position = $media_wrapper->filter('.ecl-u-order-m-last'); + if ($media_wrapper->count() && !$media_position->count()) { + // If the media item is rendered but the position class is not set, then + // we have one of the right variants. $position_variant = 'right'; }