Merge pull request #1380 from openeuropa/EWPP-3882

EWPP-3882: Update Text with featured media pattern.
openeuropa · Jan 23, 2024 · 73d49fb · 73d49fb
2 parents f13e8c5 + 0406504
commit 73d49fb
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 84 deletions.
diff --git a/sass/components/_contextual_navigation_print.scss b/sass/components/_contextual_navigation_print.scss
@@ -1,16 +1,13 @@
-@use "sass:map";
-@use '@ecl/theme-dev/theme';
-
 .ecl-contextual-navigation {
   display: flex;
   flex-direction: row;
   margin: 0;
 }
 
 .ecl-contextual-navigation__label {
-  color: map.get(theme.$color, 'black-100');
-  font: map.get(theme.$font-print, 'm');
-  margin-right: map.get(theme.$spacing-print, 'xl');
+  color: var(--ecl-color-dark-100);
+  font: var(--ecl-font-m);
+  margin-right: var(--ecl-spacing-xl);
 }
 
 .ecl-contextual-navigation__list {

diff --git a/sass/components/_description_list.scss b/sass/components/_description_list.scss
@@ -2,14 +2,12 @@
  * @file
  * Add a featured modifier to ECL description list style.
  */
-@use "sass:map";
 @use '@ecl/vanilla-utility-border/border' as *;
-$spacing: null !default;
 
 .ecl-description-list--featured {
   @extend .ecl-u-border-all !optional;
   @extend .ecl-u-border-width-2 !optional;
   @extend .ecl-u-border-color-blue-25 !optional;
   @extend .ecl-u-bg-blue-5 !optional;
-  padding: map.get($spacing, 's');
+  padding: var(--ecl-spacing-s);
 }
diff --git a/sass/components/_expandable.scss b/sass/components/_expandable.scss
@@ -2,14 +2,14 @@
  * @file
  * Apply styling of 'dropdown-legacy' component to 'expandable'.
  */
-@use "sass:map";
-@use '@ecl/theme-dev/theme';
+$background-color: var(--ecl-color-neutral-20) !default;
+$border-color: var(--ecl-color-neutral-60) !default;
 .ecl-expandable-dropdown__content {
-  background-color: map.get(theme.$color, 'grey-5');
-  border: 1px solid map.get(theme.$color, 'grey-25');
+  background-color: $background-color;
+  border: 1px solid $border-color;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   position: absolute;
-  padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm');
+  padding: var(--ecl-spacing-s) var(--ecl-spacing-m);
 }
 
 .no-js .ecl-expandable-dropdown__content {

diff --git a/sass/components/_form.scss b/sass/components/_form.scss
@@ -1,18 +1,16 @@
-@use "sass:map";
-@use '@ecl/theme-dev/theme';
 .main-content {
   .password-strength {
     .is-weak {
-      background-color: map.get(theme.$color, 'red-100');
+      background-color: var(--ecl-color-error);
     }
 
     .is-fair {
-      background-color: map.get(theme.$color, 'orange-100');
+      background-color: var(--ecl-color-warning);
     }
 
     .is-good,
     .is-strong {
-      background-color: map.get(theme.$color, 'green-100')
+      background-color: var(--ecl-color-success);
     }
   }
 

diff --git a/sass/components/_global.scss b/sass/components/_global.scss
@@ -1,9 +1,7 @@
-@use "sass:map";
-@use '@ecl/theme-dev/theme';
 // Apply global css.
 
 body {
-  font-family: #{map.get(theme.$font-family, 'default')};
+  font-family: arial, sans-serif;
   margin: 0;
   padding: 0;
 }
@@ -14,7 +12,7 @@ a {
   &:focus {
     text-decoration: underline;
   }
-  color: map.get(theme.$color, 'blue');
+  color: var(--ecl-color-primary-100);
 }
 
 .ecl {

diff --git a/sass/components/_wysiwyg.scss b/sass/components/_wysiwyg.scss
@@ -1,9 +1,7 @@
-@use "sass:map";
-@use '@ecl/theme-dev/theme';
 .ecl {
   article,
   .ecl-file {
-    margin-top: map.get(theme.$spacing, 'xs');
-    margin-bottom: map.get(theme.$spacing, 'xs');
+    margin-top: var(--ecl-spacing-xs);
+    margin-bottom: var(--ecl-spacing-xs);
   }
 }
diff --git a/sass/compositions/_content_item.scss b/sass/compositions/_content_item.scss
@@ -1,5 +1,4 @@
-@use "sass:map";
-@use '@ecl/theme-dev/theme';
+$color: var(--ecl-color-dark-140) !default;
 
 .ecl-content-item-date,
 .ecl-content-item {
@@ -17,13 +16,11 @@
 .ecl-content-item__title,
 .ecl-content-item-date__title {
   a {
-    color: map.get(theme.$color, 'blue-100');
-    font-weight: map.get(theme.$font-weight, 'bold')!important;
-    font: map.get(theme.$font-prolonged, 'xl');
+    color: var(--ecl-color-primary-100);
   }
 }
 
 .ecl-content-item__description,
 .ecl-content-item-date__description {
-  color: map.get(theme.$color, 'grey-140')!important;
+  color: $color;
 }
diff --git a/sass/style-ec.scss b/sass/style-ec.scss
@@ -1,4 +1,3 @@
-@use "sass:map";
 @use '@ecl/theme-ec';
 @use '@ecl/theme-ec/theme';
 @use '@ecl/vanilla-layout-grid/mixins/breakpoints'  with (
@@ -12,14 +11,14 @@
 );
 // TODO: The help form component is not available on ECL v3.
 //@use '@ecl/ec-component-form-help-block/ec-component-form-help-block';
-@use "./compositions/content_item";
+@use "./compositions/content_item" with (
+  $color: var(--ecl-color-dark-100),
+);
 @use "./components/form";
 @use "./components/toolbar";
 @use "./components/wysiwyg";
 @use "./components/global";
-@use "./components/description_list" with (
-  $spacing: map.get(theme.$theme, 'spacing')
-);
+@use "./components/description_list";
 @use "./components/media_iframe";
 @use "./components/expandable";
 @use "./components/contextual_navigation";
diff --git a/sass/style-eu.scss b/sass/style-eu.scss
@@ -12,17 +12,17 @@
 );
 // TODO: The help form component is not available on ECL v3.
 //@use '@ecl/eu-component-form-help-block/eu-component-form-help-block';
-@use '@ecl/theme-dev/maps/color';
-@use "./compositions/content_item";
+//@use "./compositions/content_item";
 @use "./components/form";
 @use "./components/toolbar";
 @use "./components/wysiwyg";
 @use "./components/global";
-@use "./components/description_list" with (
-  $spacing: map.get(theme.$theme, 'spacing')
-);
+@use "./components/description_list";
 @use "./components/media_iframe";
-@use "./components/expandable";
+@use "./components/expandable" with (
+  $background-color: var(--ecl-color-dark-10),
+  $border-color: var(--ecl-color-dark-40),
+);
 @use "./components/contextual_navigation" with (
   $outline-width: 2px,
   $border_right: 1px solid var(--ecl-color-dark-60),

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
@@ -32,7 +32,7 @@
       path: link.path,
       icon_position: 'after'
     },
-    icon: get_link_icon(link.path)
+    icon: get_link_icon(link.path, 'xs')
   }%}
 {% endif %}
 
@@ -93,7 +93,7 @@
 {% endif %}
 
 {% include '@ecl-twig/featured-item' with {
-  type: highlighted == true ? 'extended' : '',
+  type: highlighted == true ? 'highlight' : '',
   title: text_title|default(''),
   description: text|default(''),
   link: call_to_action_link,

diff --git a/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php b/tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
@@ -84,7 +84,6 @@ protected function setUp(): void {
    * Test text with featured media paragraph rendering.
    */
   public function testTextWithMedia(): void {
-    $this->markTestSkipped('Must be re-enabled before considering migration to ECL 4 as complete.');
     // Create a paragraph without the media.
     $paragraph = $this->container
       ->get('entity_type.manager')

diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml
@@ -682,9 +682,9 @@
       'dl.ecl-description-list': 1
       'dt.ecl-description-list__term': 3
       'dd.ecl-description-list__definition.ecl-description-list__definition--taxonomy': 3
-      'span.ecl-description-list__definition-item': 7
-      'span.ecl-description-list__definition-item a.ecl-link.ecl-link--standalone': 3
-      'span.ecl-description-list__definition-item a.ecl-link.ecl-link--standalone.ecl-link--icon': 2
+      'li.ecl-description-list__definition-item': 7
+      'li.ecl-description-list__definition-item a.ecl-link.ecl-link--standalone': 3
+      'li.ecl-description-list__definition-item a.ecl-link.ecl-link--standalone.ecl-link--icon': 2
       'div.ecl-file__label span.ecl-label.ecl-label--highlight': 0
     equals:
       'div.ecl-file__info div.ecl-file__title': "Example document"
@@ -704,15 +704,15 @@
       'dt.ecl-description-list__term:nth-of-type(1)': 'Keywords'
       'dt.ecl-description-list__term:nth-of-type(2)': 'Country'
       'dt.ecl-description-list__term:nth-of-type(3)': 'External links'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(1) span.ecl-description-list__definition-item:nth-of-type(1)': 'Apple'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(1) span.ecl-description-list__definition-item:nth-of-type(2)': 'Orange'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(2) span.ecl-description-list__definition-item:nth-of-type(1)': 'Belgium'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(2) span.ecl-description-list__definition-item:nth-of-type(2)': 'Hungary'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(1) a[href="https://example.com/1"]': 'First external link'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(2) a[href="https://example.com/2"] .ecl-link__label': 'Second external link'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(2) a svg.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(3) a[href="https://example.com/3"] .ecl-link__label': 'https://example.com/3'
-      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) span.ecl-description-list__definition-item:nth-of-type(3) a svg.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(1) li.ecl-description-list__definition-item:nth-of-type(1)': 'Apple'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(1) li.ecl-description-list__definition-item:nth-of-type(2)': 'Orange'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(2) li.ecl-description-list__definition-item:nth-of-type(1)': 'Belgium'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(2) li.ecl-description-list__definition-item:nth-of-type(2)': 'Hungary'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) li.ecl-description-list__definition-item:nth-of-type(1) a[href="https://example.com/1"]': 'First external link'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) li.ecl-description-list__definition-item:nth-of-type(2) a[href="https://example.com/2"] .ecl-link__label': 'Second external link'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) li.ecl-description-list__definition-item:nth-of-type(2) a svg.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) li.ecl-description-list__definition-item:nth-of-type(3) a[href="https://example.com/3"] .ecl-link__label': 'https://example.com/3'
+      'dd.ecl-description-list__definition--taxonomy:nth-of-type(3) li.ecl-description-list__definition-item:nth-of-type(3) a svg.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
 - array:
     '#type': pattern
     '#id': file_image
@@ -2723,7 +2723,7 @@
       highlighted: false
   assertions:
     count:
-      'article.ecl-featured-item.ecl-featured-item--extended': 0
+      'article.ecl-featured-item.ecl-featured-item--highlight': 0
       'div.ecl-featured-item__container.ecl-featured-item__container--right': 1
       'div.ecl-featured-item__item': 2
       'div.ecl-featured-item__title': 1
@@ -2732,15 +2732,15 @@
       'iframe': 0
       'figcaption.ecl-media-container__caption': 1
       'a.ecl-link.ecl-link--standalone[href="http://example.com"]': 1
-      'svg.ecl-icon.ecl-icon--s.ecl-icon--primary.ecl-link__icon': 1
+      'svg.ecl-icon.ecl-icon--xs.ecl-icon--primary.ecl-link__icon': 1
       'div.ecl-expandable.ecl-media-container__expandable': 0
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
-      'div.ecl-featured-item__title': "Title"
+      'div.ecl-featured-item__title span.ecl-featured-item__title-content': "Title"
       'figcaption.ecl-media-container__caption': "Some caption text for the image"
       'div.ecl-featured-item__item div.ecl-featured-item__description': "Some more text"
       'a.ecl-link span.ecl-link__label': "Call to action"
-      'svg.ecl-icon.ecl-icon--s.ecl-icon--primary.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
+      'svg.ecl-icon.ecl-icon--xs.ecl-icon--primary.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
 - array:
     '#type': pattern
     '#id': text_featured_media
@@ -2760,7 +2760,7 @@
             '#markup': "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis;<b>A mene tu?</b></p>"
   assertions:
     count:
-      'article.ecl-featured-item.ecl-featured-item--extended': 1
+      'article.ecl-featured-item.ecl-featured-item--highlight': 1
       'h2.ecl-u-type-heading-2': 0
       'div.ecl-featured-item__container': 1
       'div.ecl-featured-item__title': 1
@@ -2769,15 +2769,15 @@
       'iframe': 0
       'figcaption.ecl-media-container__caption': 1
       'a.ecl-link.ecl-link--standalone[href="https://european-union.europa.eu/index_en"]': 1
-      'svg.ecl-icon.ecl-icon--s.ecl-icon--primary.ecl-link__icon': 1
+      'svg.ecl-icon.ecl-icon--xs.ecl-icon--primary.ecl-link__icon': 1
       'div.ecl-expandable.ecl-media-container__expandable': 1
       'button[data-ecl-label-expanded="Expanded"][data-ecl-label-collapsed="Collapsed"]': 1
     equals:
-      'div.ecl-featured-item__title': "Title"
+      'div.ecl-featured-item__title span.ecl-featured-item__title-content': "Title"
       'figcaption.ecl-media-container__caption': "Some caption text for the image"
       'div.ecl-featured-item__item div.ecl-featured-item__description': "Some more text"
       'a.ecl-link span.ecl-link__label': "Call to action"
-      'svg.ecl-icon.ecl-icon--s.ecl-icon--primary.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#corner-arrow"></use>'
+      'svg.ecl-icon.ecl-icon--xs.ecl-icon--primary.ecl-link__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#corner-arrow"></use>'
       'span.ecl-button__container svg.ecl-icon.ecl-icon--fluid.ecl-icon--rotate-180.ecl-button__icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#corner-arrow"></use>'
       'div.ecl-expandable__content': "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non enim iam stirpis bonum quaeret, sed animalis;<b>A mene tu?</b></p>"
 - array:
@@ -2801,10 +2801,10 @@
         content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
   assertions:
     count:
-      'article.ecl-featured-item.ecl-featured-item--extended': 1
+      'article.ecl-featured-item.ecl-featured-item--highlight': 1
       'h2.ecl-u-type-heading-2': 1
       'div.ecl-featured-item__container': 1
-      'div.ecl-featured-item__title': 0
+      'div.ecl-featured-item__title span.ecl-featured-item__title-content': 0
       '.ecl-featured-item__media_container figure.ecl-media-container__figure': 1
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
       'iframe': 0
@@ -2833,10 +2833,10 @@
         content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
   assertions:
     count:
-      'article.ecl-featured-item.ecl-featured-item--extended': 0
+      'article.ecl-featured-item.ecl-featured-item--highlight': 0
       'div.ecl-featured-item__container': 1
       'div.ecl-col-md-6': 0
-      'div.ecl-featured-item__title': 1
+      'div.ecl-featured-item__title span.ecl-featured-item__title-content': 1
       '.ecl-featured-item__media_container figure.ecl-media-container__figure': 0
       'div.ecl-featured-item__item.ecl': 0
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
@@ -2847,7 +2847,7 @@
       'div#text-featured-media-1.text-featured-media-hidden-content': 1
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
-      'div.ecl-featured-item__title': "Title"
+      'div.ecl-featured-item__title span.ecl-featured-item__title-content': "Title"
       'div.ecl-featured-item__item div.ecl-featured-item__description': "Some more text"
       'div#text-featured-media-1.text-featured-media-hidden-content': "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 - array:
@@ -2865,9 +2865,9 @@
         path: "http://example.com"
   assertions:
     count:
-      'article.ecl-featured-item.ecl-featured-item--extended': 0
+      'article.ecl-featured-item.ecl-featured-item--highlight': 0
       'div.ecl-featured-item__container': 1
-      'div.ecl-featured-item__title': 1
+      'div.ecl-featured-item__title span.ecl-featured-item__title-content': 1
       '.ecl-featured-item__media_container figure.ecl-media-container__figure': 1
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 1
       'iframe': 0
@@ -2876,7 +2876,7 @@
       'div.ecl-expandable.ecl-media-container__expandable': 0
     equals:
       'h2.ecl-u-type-heading-2': "Heading"
-      'div.ecl-featured-item__title': "Title"
+      'div.ecl-featured-item__title span.ecl-featured-item__title-content': "Title"
       'div.ecl-featured-item__item div.ecl-featured-item__description': "Some more text"
       'a.ecl-link span.ecl-link__label': "Call to action"
 - array:
@@ -2887,7 +2887,7 @@
       caption: "Some caption"
   assertions:
     count:
-      'article.ecl-featured-item.ecl-featured-item--extended': 0
+      'article.ecl-featured-item.ecl-featured-item--highlight': 0
       'article.ecl-featured-item': 1
       'div.ecl-featured-item__container': 1
       '.ecl-featured-item__media_container figure.ecl-media-container__figure': 0
@@ -2918,7 +2918,7 @@
         path: "http://example.com"
   assertions:
     count:
-      'article.ecl-featured-item.ecl-featured-item--extended': 0
+      'article.ecl-featured-item.ecl-featured-item--highlight': 0
       'div.ecl-featured-item__container.ecl-featured-item__container--right': 1
       '.ecl-featured-item__media_container figure.ecl-media-container__figure': 1
       'img.ecl-media-container__media[src="http://via.placeholder.com/150x150"]': 0
@@ -3578,8 +3578,8 @@
           centered: false
   assertions:
     count:
-      div.ecl-carousel.ecl-carousel--full-width: 0
-      div.ecl-carousel: 1
+      section.ecl-carousel.ecl-carousel--full-width: 0
+      section.ecl-carousel: 1
       div.ecl-carousel__container: 1
       div.ecl-carousel__slides: 1
       div.ecl-carousel__slide: 6
@@ -3647,7 +3647,7 @@
       size: 'l'
   assertions:
     count:
-      div.ecl-carousel.ecl-carousel--full-width: 1
+      section.ecl-carousel.ecl-carousel--full-width: 1
       div.ecl-carousel__slide: 3
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--l.ecl-banner--text-box.ecl-banner--centered: 1
       div.ecl-carousel__slide section.ecl-banner.ecl-banner--l.ecl-banner--plain-background: 2