From ebcc621f9f339a55300fd0221b81ed2b21fdb94c Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Wed, 7 Feb 2024 19:30:13 +0200 Subject: [PATCH 1/9] EWPP-4032: Add Highlighted list pattern and composition. --- sass/compositions/_highlighted_news.scss | 8 + sass/style-eu.scss | 4 + .../highlighted-news-block.html.twig | 44 +++++ .../highlighted_list.ui_patterns.yml | 83 +++++++++ .../pattern-highlighted-list.html.twig | 164 ++++++++++++++++++ 5 files changed, 303 insertions(+) create mode 100644 sass/compositions/_highlighted_news.scss create mode 100644 templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig create mode 100644 templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml create mode 100644 templates/patterns/highlighted_list/pattern-highlighted-list.html.twig diff --git a/sass/compositions/_highlighted_news.scss b/sass/compositions/_highlighted_news.scss new file mode 100644 index 000000000..8388c25fe --- /dev/null +++ b/sass/compositions/_highlighted_news.scss @@ -0,0 +1,8 @@ +$color: var(--ecl-color-neutral) !default; +$margin: var(--ecl-spacing-xl) !default; + +.highlighted-news-divider { + border-bottom: 1px solid $color; + margin-bottom: $margin; +} + diff --git a/sass/style-eu.scss b/sass/style-eu.scss index 1f42c5b3d..ce90305a8 100644 --- a/sass/style-eu.scss +++ b/sass/style-eu.scss @@ -29,3 +29,7 @@ $border_right: 1px solid var(--ecl-color-dark-60), $font-family: map.get(theme.$theme, 'font-family', 'default'), ); +@use "./compositions/highlighted_news" with ( + $color: var(--ecl-color-primary-20), + $margin: var(--ecl-spacing-l), +); diff --git a/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig b/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig new file mode 100644 index 000000000..a727394c2 --- /dev/null +++ b/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig @@ -0,0 +1,44 @@ +{% apply spaceless %} +{# + @file + Theme implementation for the Highlighted News Block + Parameters: + - "title" (string) (default: ''): The Highlighted News Block title. + - "highlighted" (array) (default: []): The main item of the list compatible with the ECL Content Item component. + - "items" (array) (default: []): Highlighted News items compatible with the ECL Content Item component. + - "see_more" (array) (default: []): Predefined structure compatible with Link component. + - "detail" (string) (default: ''): Additional information to be displayed below the 'See more' link. + - "ecl_component_library" (string) (default: ''): Current ECL component library (used for internal logic in order to determine the border color). +#} +
+ {% if title is not empty %} +
+
+

{{ title }}

+
+
+ {% endif %} + {% if highlighted is not empty and items is not empty %} +
+
+ {% include '@ecl-twig/content-item' with highlighted only %} +
+
+ {% for item in items %} +
+ {% include '@ecl-twig/content-item' with item only %} +
+ {% endfor %} +
+
+ {% endif %} + {% if see_more is not empty %} + {% include '@ecl-twig/link' with see_more %} + {% endif %} + {% if detail is not empty %} +
+ {{ detail }} +
+ {% endif %} +
+{% endapply %} diff --git a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml new file mode 100644 index 000000000..3ad2243b5 --- /dev/null +++ b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml @@ -0,0 +1,83 @@ +highlighted_list: + label: "Highlighted list" + description: "A list of 4 highlighted content items. The image is only displayed for the first two items and the description for the first item. If more than 4 items are provided, only the first 4 will be displayed." + fields: + title: + type: "text" + label: "Title" + description: "Highlighted list title" + preview: "Highlighted News" + highlighted_item: + type: "array" + label: "Highlighted item" + description: "The main item of the highlighted list." + preview: + title: "Item 1" + url: "#" + description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus" + primary_meta: + - "Item 1 primary meta" + - "DD Month Year" + secondary_meta: "3 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + items: + type: "array" + label: "Items" + description: "List of items compatible with the ECL Content item component." + preview: + - title: "Item 2" + description: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + primary_meta: + - "Item 2 primary meta" + - "DD Month Year" + secondary_meta: "5 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + - title: "Item 3" + url: "https://external.com" + description: "In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam" + primary_meta: + - "Item 3 primary meta" + - "DD Month Year" + secondary_meta: "2 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + - title: "Item 4" + url: "#" + description: "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam" + primary_meta: + - "Item 4 primary meta" + - "DD Month Year" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + - title: "Item 5" + url: "#" + description: "Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe" + primary_meta: + - "Item 5 primary meta" + - "DD Month Year" + secondary_meta: "3 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + see_more_label: + type: "text" + label: "See more label" + description: "The label for the See more link." + preview: "Read more news" + see_more_url: + type: "Url" + label: "See more URL" + description: "See more link URL (A Drupal Url object)" + preview: "https://example.com" + detail: + type: "text" + label: "Detail" + description: "List's additional information displayed below the See more link." + preview: + '#markup': "

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; A mene tu? Quid, quod res alia tota est? Duo Reges: constructio interrete.

" diff --git a/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig b/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig new file mode 100644 index 000000000..00ff9daa8 --- /dev/null +++ b/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig @@ -0,0 +1,164 @@ +{# +/** + * @file + * Highlighted list pattern. + */ +#} + +{# Prepare the items array. #} +{% set _items = [] %} +{% if items is defined and items is not empty %} + {% for item in items|slice(0,3) %} + {% set _item = [] %} + {% set _primary_meta = [] %} + {% set _secondary_meta = [] %} + + {# Prepare the title as a link or simple string. #} + {% if item.url is defined and item.url is not empty %} + {% set _title = { + link: { + type: 'standalone', + label: item.title, + path: item.url, + external: item.url|is_external_url, + icon_path: ecl_icon_path + } + } %} + {% else %} + {% set _title = item.title %} + {% endif %} + {% set _item = _item|merge({ + title: _title|default([]), + }) %} + + {# If it's the first item, we add the image. #} + {% if loop.index == 1 and item.picture is not empty %} + {# Prepare the picture array. #} + {% set _item = _item|merge({ + picture: { + position: 'top', + size: 'medium', + img: { + src: item.picture.src, + alt: item.picture.alt, + }, + sources: [], + } + }) %} + {% endif %} + + {# Prepare the Primary meta items. #} + {% if item.primary_meta is not empty and item.primary_meta is iterable %} + {% for item in item.primary_meta %} + {% if item is not empty %} + {% set _primary_meta = _primary_meta|merge([item]) %} + {% endif %} + {% endfor %} + {% endif %} + {% set _item = _item|merge({ + primary_meta: _primary_meta + }) %} + + {# Prepare the Secondary meta item. #} + {% if item.secondary_meta is not empty and item.secondary_meta is defined %} + {% set _secondary_meta = _secondary_meta|merge([ + { + 'label': item.secondary_meta, + 'icon': { + 'name': 'information', + 'path': ecl_icon_path, + } + } + ]) %} + {% endif %} + {% set _item = _item|merge({ + secondary_meta: _secondary_meta + }) %} + + {# Enable the divider if it's not the last item. #} + {% if not loop.last %} + {% set _item = _item|merge({ + divider: true + }) %} + {% endif %} + + {# Add the formed _item to the _items array. #} + {% set _items = _items|merge([_item]) %} + {% endfor %} +{% endif %} + +{# Prepare the title as a link or simple string for the highlighted_item. #} +{% if highlighted_item.url is defined and highlighted_item.url is not empty %} + {% set highlighted_item_title = { + link: { + type: 'standalone', + label: highlighted_item.title, + path: highlighted_item.url, + external: highlighted_item.url|is_external_url, + icon_path: ecl_icon_path + } + } %} +{% else %} + {% set highlighted_item_title = highlighted_item.title %} +{% endif %} + +{# Prepare the Primary meta items of the highlighted item. #} +{% set _primary_meta = [] %} +{% if highlighted_item.primary_meta is not empty and highlighted_item.primary_meta is iterable %} + {% for highlighted_item in highlighted_item.primary_meta %} + {% if highlighted_item is not empty %} + {% set _primary_meta = _primary_meta|merge([highlighted_item]) %} + {% endif %} + {% endfor %} +{% endif %} + +{# Prepare the Secondary meta item of the highlighted item. #} +{% set _secondary_meta = [] %} +{% if highlighted_item.secondary_meta is not empty and highlighted_item.secondary_meta is defined %} + {% set _secondary_meta = _secondary_meta|merge([ + { + 'label': highlighted_item.secondary_meta, + 'icon': { + 'name': 'information', + 'path': ecl_icon_path, + } + } + ]) %} +{% endif %} + +{# Prepare the see more link. #} +{% if see_more_url is defined and see_more_url is not empty %} + {% set _see_more = { + link: { + type: 'standalone', + label: see_more_label|default(see_more_url), + path: see_more_url, + external: see_more_url|is_external_url, + icon_path: ecl_icon_path + } + } %} +{% endif %} + +{% include '@oe_theme/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig' with { + 'title': title|default(''), + 'highlighted': { + 'title': highlighted_item_title, + 'picture': { + 'position': 'top', + 'size': 'large', + 'img': { + 'src': highlighted_item.picture.src, + 'alt': highlighted_item.picture.alt, + }, + 'sources': [], + }, + 'description': highlighted_item.description|default(''), + 'primary_meta': _primary_meta, + 'secondary_meta': _secondary_meta, + }, + 'items': _items, + 'see_more': _see_more, + 'detail': detail|default(''), + 'ecl_component_library': ecl_component_library, +} only %} + From 24a7c72e43e35ce966833ef042831d9688b87f39 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Thu, 8 Feb 2024 11:31:12 +0200 Subject: [PATCH 2/9] EWPP-4032: Add test coverage for the pattern. --- tests/src/Kernel/fixtures/rendering.yml | 160 ++++++++++++++++++++++++ 1 file changed, 160 insertions(+) diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index d99d4fdcc..f9ee4888d 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3681,3 +3681,163 @@ div.ecl-carousel__slide section.ecl-banner--plain-background:nth-child(2).ecl-banner--l div.ecl-banner__content p.ecl-banner__description: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur' div.ecl-carousel__slide section.ecl-banner--plain-background:nth-child(2).ecl-banner--l div.ecl-banner__content div.ecl-banner__cta a span.ecl-link__label: 'CTA 3' div.ecl-carousel__pagination: 'in 3' +- array: + '#type': pattern + '#id': highlighted_list + '#fields': + title: "Highlighted News" + highlighted_item: + title: "Item 1" + url: "#" + description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus" + primary_meta: + - "Item 1 primary meta" + - "DD Month Year" + secondary_meta: "3 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Highlighted item image" + items: + - title: "Item 2" + description: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + primary_meta: + - "Item 2 primary meta" + - "DD Month Year" + secondary_meta: "5 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Item 2 image" + - title: "Item 3" + url: "https://external.com" + description: "In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam" + primary_meta: + - "Item 3 primary meta" + - "DD Month Year" + secondary_meta: "2 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + - title: "Item 4" + url: "#" + description: "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam" + primary_meta: + - "Item 4 primary meta" + - "DD Month Year" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + - title: "Item 5" + url: "#" + description: "Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe" + primary_meta: + - "Item 5 primary meta" + - "DD Month Year" + secondary_meta: "3 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + see_more_label: "Read more news" + see_more_url: "https://example.com" + detail: + '#markup': '
This is the detail rich text field which contains a link.
' + assertions: + count: + 'div#highlighted-news-block': 1 + 'div#highlighted-news-block h2.ecl-u-type-heading-2': 1 + 'div div.ecl-row': 2 + 'div div.ecl-row.highlighted-news-divider': 1 + 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-8': 1 + 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start': 1 + 'div.ecl-u-mb-m': 3 + 'div.ecl-u-mb-m article.ecl-content-item--divider': 2 + 'div.ecl-content-block__title': 4 + 'div.ecl-content-block__title a': 3 + 'picture.ecl-content-item__picture': 2 + 'div.ecl-col-12.ecl-col-l-8 picture.ecl-content-item__picture--large img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Highlighted item image"]': 1 + 'div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start picture.ecl-content-item__picture--medium img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Item 2 image"]': 1 + 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-8 a': 1 + 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start a': 2 + 'ul.ecl-content-block__primary-meta-container': 4 + 'div.ecl-content-block__description': 1 + 'ul.ecl-content-block__secondary-meta-container': 3 + 'div#highlighted-news-block div.ecl.ecl-u-mt-s': 1 + equals: + 'div#highlighted-news-block h2.ecl-u-type-heading-2': 'Highlighted News' + 'div.ecl-col-12.ecl-col-l-8 ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 1 primary meta' + 'div.ecl-col-12.ecl-col-l-8 ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' + 'div.ecl-col-12.ecl-col-l-8 .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"]': 'Item 1' + 'div.ecl-col-12.ecl-col-l-8 .ecl-content-block__description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus' + 'div.ecl-col-12.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-12.ecl-col-l-8 li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 2 primary meta' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) .ecl-content-block__title': 'Item 2' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"] .ecl-link__label': 'Item 3' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"] svg.ecl-icon--2xs': '' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '2 minutes read' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(3) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 4 primary meta' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(3) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(3) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"]': 'Item 4' + 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] .ecl-link__label': 'Read more news' + 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] svg.ecl-icon--2xs': '' + 'div#highlighted-news-block div.ecl.ecl-u-mt-s': '
This is the detail rich text field which contains a link.
' +- array: + '#type': pattern + '#id': highlighted_list + '#fields': + highlighted_item: + title: "Item 1" + secondary_meta: "3 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Highlighted item image" + items: + - title: "Item 2" + description: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + primary_meta: + - "Item 2 primary meta" + - "DD Month Year" + secondary_meta: "5 minutes read" + picture: + src: "https://loremflickr.com/1200/900/arch" + alt: "Item 2 image" + - title: "Item 3" + url: "https://external.com" + see_more_url: "https://example.com" + assertions: + count: + 'div#highlighted-news-block': 1 + 'div#highlighted-news-block h2.ecl-u-type-heading-2': 0 + 'div div.ecl-row': 1 + 'div div.ecl-row.highlighted-news-divider': 1 + 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-8': 1 + 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start': 1 + 'div.ecl-u-mb-m': 2 + 'div.ecl-u-mb-m article.ecl-content-item--divider': 1 + 'div.ecl-content-block__title': 3 + 'div.ecl-content-block__title a': 1 + 'picture.ecl-content-item__picture': 2 + 'div.ecl-col-12.ecl-col-l-8 picture.ecl-content-item__picture--large img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Highlighted item image"]': 1 + 'div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start picture.ecl-content-item__picture--medium img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Item 2 image"]': 1 + 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-8 a': 0 + 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start a': 1 + 'ul.ecl-content-block__primary-meta-container': 1 + 'div.ecl-content-block__description': 0 + 'ul.ecl-content-block__secondary-meta-container': 2 + 'div#highlighted-news-block div.ecl.ecl-u-mt-s': 0 + equals: + 'div.ecl-col-12.ecl-col-l-8 .ecl-content-block__title': 'Item 1' + 'div.ecl-col-12.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-12.ecl-col-l-8 li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 2 primary meta' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) .ecl-content-block__title': 'Item 2' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"] .ecl-link__label': 'Item 3' + 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"] svg.ecl-icon--2xs': '' + 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] .ecl-link__label': 'https://example.com' + 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] svg.ecl-icon--2xs': '' From 83212150afa14061785ceb1186c496c0ebce2260 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Thu, 8 Feb 2024 12:26:11 +0200 Subject: [PATCH 3/9] EWPP-4032: Add pattern assertions. --- .../HighlightedListAssert.php | 219 ++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 tests/src/PatternAssertions/HighlightedListAssert.php diff --git a/tests/src/PatternAssertions/HighlightedListAssert.php b/tests/src/PatternAssertions/HighlightedListAssert.php new file mode 100644 index 000000000..a1165f764 --- /dev/null +++ b/tests/src/PatternAssertions/HighlightedListAssert.php @@ -0,0 +1,219 @@ + [ + [$this, 'assertElementText'], + 'div#highlighted-news-block h2.ecl-u-type-heading-2', + ], + 'highlighted_item' => [ + [$this, 'assertHighlightedItem'], + 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-8', + ], + 'items' => [ + [$this, 'assertItems'], + 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start', + ], + 'see_more_label' => [ + [$this, 'assertElementText'], + 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone .ecl-link__label', + ], + 'see_more_url' => [ + [$this, 'assertElementAttribute'], + 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone', + 'href', + ], + 'detail' => [ + [$this, 'assertDetail'], + 'div#highlighted-news-block div.ecl.ecl-u-mt-s', + ], + ]; + } + + /** + * {@inheritdoc} + */ + protected function assertBaseElements(string $html, string $variant): void { + $crawler = new Crawler($html); + $highlighted_list = $crawler->filter('div#highlighted-news-block'); + self::assertCount(1, $highlighted_list); + } + + /** + * Asserts the Highlighted item of the list. + * + * @param array|null $expected_highlighted_item + * The expected item array (image array, title, url, primary meta array + * and secondary meta). + * @param string $selector + * The CSS selector to find the item. + * @param \Symfony\Component\DomCrawler\Crawler $crawler + * The DomCrawler where to check the element. + */ + protected function assertHighlightedItem(?array $expected_highlighted_item, string $selector, Crawler $crawler) { + if (is_null($expected_highlighted_item)) { + $this->assertElementNotExists($selector, $crawler); + return; + } + $this->assertElementExists($selector, $crawler); + $highlighted_wrapper = $crawler->filter($selector); + // Assert title. + if (isset($expected_highlighted_item['title'])) { + // Assert url, if available. + if (isset($expected_highlighted_item['url'])) { + $this->assertElementText($expected_highlighted_item['title'], '.ecl-content-block__title a.ecl-link.ecl-link--standalone', $highlighted_wrapper); + $this->assertElementAttribute($expected_highlighted_item['url'], '.ecl-content-block__title a.ecl-link.ecl-link--standalone', 'href', $highlighted_wrapper); + } + else { + $this->assertElementNotExists('.ecl-content-block__title a.ecl-link.ecl-link--standalone', $highlighted_wrapper); + $this->assertElementText($expected_highlighted_item['title'], '.ecl-content-block__title', $highlighted_wrapper); + } + } + // Assert image. + if (isset($expected_highlighted_item['image'])) { + $this->assertElementAttribute($expected_highlighted_item['image']['src'], 'picture.ecl-content-item__picture--large img.ecl-content-item__image', 'src', $highlighted_wrapper); + $this->assertElementAttribute($expected_highlighted_item['image']['alt'], 'picture.ecl-content-item__picture--large img.ecl-content-item__image', 'alt', $highlighted_wrapper); + } + else { + $this->assertElementNotExists('picture', $highlighted_wrapper); + } + // Assert primary meta. + if (isset($expected_highlighted_item['primary_meta'])) { + $actual_items = $highlighted_wrapper->filter('li.ecl-content-block__primary-meta-item'); + self::assertCount(count($expected_highlighted_item['primary_meta']), $actual_items); + foreach ($expected_highlighted_item['primary_meta'] as $index => $expected_item) { + self::assertEquals($expected_item, trim($actual_items->eq($index)->text())); + } + } + else { + $this->assertElementNotExists('ul.ecl-content-block__primary-meta-container', $highlighted_wrapper); + } + // Assert secondary meta. + if (isset($expected_highlighted_item['secondary_meta'])) { + $actual_item = $highlighted_wrapper->filter('li.ecl-content-block__secondary-meta-item'); + self::assertCount(1, $actual_item); + self::assertEquals($expected_highlighted_item['secondary_meta'], trim($actual_item->text())); + } + else { + $this->assertElementNotExists('li.ecl-content-block__secondary-meta-item', $highlighted_wrapper); + } + // Assert description. + if (isset($expected_highlighted_item['description'])) { + $this->assertElementText($expected_highlighted_item['description'], '.ecl-content-block__description', $highlighted_wrapper); + } + else { + $this->assertElementNotExists('.ecl-content-block__description', $highlighted_wrapper); + } + } + + /** + * Asserts the items on the right side of the highlighted list. + * + * @param array|null $expected_items + * The expected items. + * @param string $selector + * The CSS selector to find the items' wrapper. + * @param \Symfony\Component\DomCrawler\Crawler $crawler + * The DomCrawler where to check the element. + * + * @SuppressWarnings(PHPMD.CyclomaticComplexity) + */ + protected function assertItems(?array $expected_items, string $selector, Crawler $crawler): void { + if (is_null($expected_items)) { + $this->assertElementNotExists($selector, $crawler); + return; + } + $this->assertElementExists($selector, $crawler); + $items_wrapper = $crawler->filter($selector); + // Assert the number of items. + $items = $items_wrapper->filter('div.ecl-u-mb-m'); + self::assertCount(count($expected_items), $items, 'The expected number of items does not correspond with the actual number of items in the list.'); + // Assert there is no description element for any of the items. + $this->assertElementNotExists('.ecl-content-block__description', $items_wrapper); + + // Assert each item's info. + foreach ($expected_items as $index => $expected_item) { + // Assert title. + if (isset($expected_item['title'])) { + // Assert url, if available. + if (isset($expected_item['url'])) { + $this->assertElementText($expected_item['title'], '.ecl-content-block__title a.ecl-link.ecl-link--standalone', $items->eq($index)); + $this->assertElementAttribute($expected_item['url'], '.ecl-content-block__title a.ecl-link.ecl-link--standalone', 'href', $items->eq($index)); + } + else { + $this->assertElementNotExists('.ecl-content-block__title a.ecl-link.ecl-link--standalone', $items->eq($index)); + $this->assertElementText($expected_item['title'], '.ecl-content-block__title', $items->eq($index)); + } + } + // Assert primary meta. + if (isset($expected_item['primary_meta'])) { + $actual_items = $items->eq($index)->filter('li.ecl-content-block__primary-meta-item'); + self::assertCount(count($expected_item['primary_meta']), $actual_items); + foreach ($expected_item['primary_meta'] as $key => $primary_item) { + self::assertEquals($primary_item, trim($actual_items->eq($key)->text())); + } + } + else { + $this->assertElementNotExists('ul.ecl-content-block__primary-meta-container', $items->eq($index)); + } + // Assert secondary meta. + if (isset($expected_item['secondary_meta'])) { + $actual_item = $items->eq($index)->filter('li.ecl-content-block__secondary-meta-item'); + self::assertCount(1, $actual_item); + self::assertEquals($expected_item['secondary_meta'], trim($actual_item->text())); + } + else { + $this->assertElementNotExists('li.ecl-content-block__secondary-meta-item', $items->eq($index)); + } + // Assert image if it's the first item. + if (isset($expected_item['image']) && $index === 0) { + $this->assertElementAttribute($expected_item['image']['src'], 'picture.ecl-content-item__picture--medium img.ecl-content-item__image', 'src', $highlighted_wrapper); + $this->assertElementAttribute($expected_item['image']['alt'], 'picture.ecl-content-item__picture--medium img.ecl-content-item__image', 'alt', $highlighted_wrapper); + } + else { + $this->assertElementNotExists('picture', $items->eq($index)); + } + } + } + + /** + * Asserts the detail text from the footer of the highlighted list. + * + * @param array|null $expected + * The expected description values. + * @param string $selector + * The CSS selector to find the detail. + * @param \Symfony\Component\DomCrawler\Crawler $crawler + * The DomCrawler where to check the element. + */ + protected function assertDescription($expected, string $selector, Crawler $crawler): void { + if (is_null($expected)) { + $this->assertElementNotExists($selector, $crawler); + return; + } + $this->assertElementExists($selector, $crawler); + $detail_element = $crawler->filter($selector); + if ($expected instanceof PatternAssertStateInterface) { + $expected->assert($detail_element->html()); + return; + } + self::assertEquals($expected, $detail_element->filter('p')->html()); + } + +} From 061ca6aa54be0186c271f52b169e19770e309bb3 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Fri, 9 Feb 2024 14:53:17 +0200 Subject: [PATCH 4/9] EWPP-4032: Add image position and extra_classes to list_item pattern. --- sass/compositions/_highlighted_news.scss | 8 -------- templates/patterns/list_item/list_item.ui_patterns.yml | 10 ++++++++++ .../patterns/list_item/pattern-list-item.html.twig | 2 ++ 3 files changed, 12 insertions(+), 8 deletions(-) delete mode 100644 sass/compositions/_highlighted_news.scss diff --git a/sass/compositions/_highlighted_news.scss b/sass/compositions/_highlighted_news.scss deleted file mode 100644 index 8388c25fe..000000000 --- a/sass/compositions/_highlighted_news.scss +++ /dev/null @@ -1,8 +0,0 @@ -$color: var(--ecl-color-neutral) !default; -$margin: var(--ecl-spacing-xl) !default; - -.highlighted-news-divider { - border-bottom: 1px solid $color; - margin-bottom: $margin; -} - diff --git a/templates/patterns/list_item/list_item.ui_patterns.yml b/templates/patterns/list_item/list_item.ui_patterns.yml index da5547665..f1560b9dd 100644 --- a/templates/patterns/list_item/list_item.ui_patterns.yml +++ b/templates/patterns/list_item/list_item.ui_patterns.yml @@ -101,6 +101,11 @@ list_item: src: "https://loremflickr.com/1200/900/arch" alt: "Alternative text for image" size: "large" + image_position: + type: "text" + label: "Image position" + description: "The image position: left (default), right, top." + preview: "left" icon: type: "text" label: "Icon (deprecated - to be removed in 4.x)" @@ -168,3 +173,8 @@ list_item: label: "Lists variant" description: "An optional parameter for the layout of the lists (vertical or horizontal). It defaults to horizontal." preview: "vertical" + extra_classes: + type: 'text' + label: 'Extra classes string' + description: 'Extra classes string' + preview: '' diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index 6169549e4..7d45fd1b4 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -16,6 +16,7 @@ - "external_link" (bool) (default: false): Whether the link is external or not. - "lists" (array) (default: []): Array of lists compatible with ECL Description list component. - "divider" (bool) (default: false): Whether to set a divider below the item. + - "extra_classes" (string) (default: '') #} {# Prepare the picture array. #} @@ -163,4 +164,5 @@ divider: divider|default(false), secondary_meta: _secondary_meta|default([]), date: _date|default([]), + extra_classes: extra_classes|default(''), } only %} From bb26cc4af6ac82ca8786c6d255b12f7c40e2c674 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Fri, 9 Feb 2024 14:54:36 +0200 Subject: [PATCH 5/9] EWPP-4032: Use list_item pattern in highlighted_list pattern. --- oe_theme.theme | 63 ++++++++ sass/style-eu.scss | 4 - .../highlighted-news-block.html.twig | 17 +-- .../highlighted_list.ui_patterns.yml | 125 ++++++++++------ .../pattern-highlighted-list.html.twig | 140 +----------------- 5 files changed, 150 insertions(+), 199 deletions(-) diff --git a/oe_theme.theme b/oe_theme.theme index 82cd4f140..68a2d5557 100644 --- a/oe_theme.theme +++ b/oe_theme.theme @@ -2518,3 +2518,66 @@ function oe_theme_page_attachments_alter(array &$attachments) { function _oe_theme_sanitize_url($url): mixed { return $url instanceof Url ? $url : UrlHelper::filterBadProtocol($url); } + +/** + * Implements hook_preprocess_HOOK(). + */ +function oe_theme_preprocess_pattern_highlighted_list(array &$variables): void { + if (!isset($variables['highlighted_item'])) { + // If we don't have a highlighted item for the list, we bail out. + return; + } + // Override highlighted item information. + if (isset($variables['highlighted_item']['#fields']['secondary_meta'])) { + // We display only the first secondary meta. + $variables['highlighted_item']['#fields']['secondary_meta'] = [reset($variables['highlighted_item']['#fields']['secondary_meta'])]; + $variables['highlighted_item']['#fields']['secondary_meta'][0]['icon'] = 'information'; + } + if (isset($variables['highlighted_item']['#fields']['image'])) { + $variables['highlighted_item']['#fields']['image']['size'] = 'large'; + if (!isset($variables['highlighted_item']['#fields']['image_position']) || + $variables['highlighted_item']['#fields']['image_position'] !== 'top') { + $variables['highlighted_item']['#fields']['image_position'] = 'top'; + } + } + $variables['highlighted_item']['#fields']['divider'] = TRUE; + $variables['highlighted_item']['#fields']['extra_classes'] = 'ecl-u-flex-grow-1'; + if (!isset($variables['items'])) { + // If we don't have items, we bail out. + return; + } + + // We only display the first four items in the list. + $variables['items'] = array_slice($variables['items'], 0, 3); + foreach ($variables['items'] as $key => &$item) { + $item['#fields']['divider'] = TRUE; + if ($key === 0) { + // We only display the image for the first item. + if (isset($item['#fields']['image'])) { + // It always has the medium 'size' and position 'top'. + $item['#fields']['image']['size'] = 'medium'; + $item['#fields']['image_position'] = 'top'; + } + if (isset($item['#fields']['detail'])) { + $item['#fields']['detail'] = NULL; + } + } + else { + // We don't display the image and detail for the rest of the items. + $item['#fields']['image'] = NULL; + $item['#fields']['detail'] = NULL; + } + if (!isset($item['#fields']['secondary_meta'])) { + continue; + } + // We display only the first secondary meta. + $item['#fields']['secondary_meta'] = [reset($item['#fields']['secondary_meta'])]; + $item['#fields']['secondary_meta'][0]['icon'] = 'information'; + if ($key !== 2) { + $item['#fields']['extra_classes'] = 'ecl-u-flex-grow-1 ecl-u-mb-m'; + } + else { + $item['#fields']['extra_classes'] = 'ecl-u-flex-grow-1'; + } + } +} diff --git a/sass/style-eu.scss b/sass/style-eu.scss index ce90305a8..1f42c5b3d 100644 --- a/sass/style-eu.scss +++ b/sass/style-eu.scss @@ -29,7 +29,3 @@ $border_right: 1px solid var(--ecl-color-dark-60), $font-family: map.get(theme.$theme, 'font-family', 'default'), ); -@use "./compositions/highlighted_news" with ( - $color: var(--ecl-color-primary-20), - $margin: var(--ecl-spacing-l), -); diff --git a/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig b/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig index a727394c2..da81cca23 100644 --- a/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig +++ b/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig @@ -8,7 +8,6 @@ - "items" (array) (default: []): Highlighted News items compatible with the ECL Content Item component. - "see_more" (array) (default: []): Predefined structure compatible with Link component. - "detail" (string) (default: ''): Additional information to be displayed below the 'See more' link. - - "ecl_component_library" (string) (default: ''): Current ECL component library (used for internal logic in order to determine the border color). #}
{% if title is not empty %} @@ -19,21 +18,21 @@
{% endif %} {% if highlighted is not empty and items is not empty %} -
-
- {% include '@ecl-twig/content-item' with highlighted only %} +
+
+ {{ highlighted }}
-
+
{% for item in items %} -
- {% include '@ecl-twig/content-item' with item only %} -
+ {{ item }} {% endfor %}
{% endif %} {% if see_more is not empty %} - {% include '@ecl-twig/link' with see_more %} +
+ {% include '@ecl-twig/link' with see_more %} +
{% endif %} {% if detail is not empty %}
diff --git a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml index 3ad2243b5..be23ed611 100644 --- a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml +++ b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml @@ -12,59 +12,88 @@ highlighted_list: label: "Highlighted item" description: "The main item of the highlighted list." preview: - title: "Item 1" - url: "#" - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus" - primary_meta: - - "Item 1 primary meta" - - "DD Month Year" - secondary_meta: "3 minutes read" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Alternative text for image" + type: pattern + id: list_item + variant: default + fields: + title: "Item 1" + url: "#" + external_link: true + detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus" + meta: + - "Item 1 primary meta" + - "DD Month Year" + secondary_meta: + - label: "3 minutes read" + - label: "5 minutes read" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" items: type: "array" label: "Items" description: "List of items compatible with the ECL Content item component." preview: - - title: "Item 2" - description: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." - primary_meta: - - "Item 2 primary meta" - - "DD Month Year" - secondary_meta: "5 minutes read" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Alternative text for image" - - title: "Item 3" - url: "https://external.com" - description: "In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam" - primary_meta: - - "Item 3 primary meta" - - "DD Month Year" - secondary_meta: "2 minutes read" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Alternative text for image" - - title: "Item 4" - url: "#" - description: "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam" - primary_meta: - - "Item 4 primary meta" - - "DD Month Year" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Alternative text for image" - - title: "Item 5" - url: "#" - description: "Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe" - primary_meta: - - "Item 5 primary meta" - - "DD Month Year" - secondary_meta: "3 minutes read" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Alternative text for image" + - type: pattern + id: list_item + variant: default + fields: + title: "Item 2" + detail: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + meta: + - "Item 2 primary meta" + - "DD Month Year" + secondary_meta: + - label: "5 minutes read" + icon: "information" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + - type: pattern + id: list_item + variant: default + fields: + title: "Item 3" + url: "https://external.com" + detail: "In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam" + meta: + - "Item 3 primary meta" + - "DD Month Year" + secondary_meta: + - label: "2 minutes read" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + image_position: "top" + - type: pattern + id: list_item + variant: default + fields: + title: "Item 4" + url: "#" + detail: "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam" + meta: + - "Item 4 primary meta" + - "DD Month Year" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + secondary_meta: + - label: "3 minutes read" + - label: "5 minutes read" + - type: pattern + id: list_item + variant: default + fields: + title: "Item 5" + url: "#" + detail: "Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe" + meta: + - "Item 5 primary meta" + - "DD Month Year" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" see_more_label: type: "text" label: "See more label" diff --git a/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig b/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig index 00ff9daa8..41b838d28 100644 --- a/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig +++ b/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig @@ -5,127 +5,6 @@ */ #} -{# Prepare the items array. #} -{% set _items = [] %} -{% if items is defined and items is not empty %} - {% for item in items|slice(0,3) %} - {% set _item = [] %} - {% set _primary_meta = [] %} - {% set _secondary_meta = [] %} - - {# Prepare the title as a link or simple string. #} - {% if item.url is defined and item.url is not empty %} - {% set _title = { - link: { - type: 'standalone', - label: item.title, - path: item.url, - external: item.url|is_external_url, - icon_path: ecl_icon_path - } - } %} - {% else %} - {% set _title = item.title %} - {% endif %} - {% set _item = _item|merge({ - title: _title|default([]), - }) %} - - {# If it's the first item, we add the image. #} - {% if loop.index == 1 and item.picture is not empty %} - {# Prepare the picture array. #} - {% set _item = _item|merge({ - picture: { - position: 'top', - size: 'medium', - img: { - src: item.picture.src, - alt: item.picture.alt, - }, - sources: [], - } - }) %} - {% endif %} - - {# Prepare the Primary meta items. #} - {% if item.primary_meta is not empty and item.primary_meta is iterable %} - {% for item in item.primary_meta %} - {% if item is not empty %} - {% set _primary_meta = _primary_meta|merge([item]) %} - {% endif %} - {% endfor %} - {% endif %} - {% set _item = _item|merge({ - primary_meta: _primary_meta - }) %} - - {# Prepare the Secondary meta item. #} - {% if item.secondary_meta is not empty and item.secondary_meta is defined %} - {% set _secondary_meta = _secondary_meta|merge([ - { - 'label': item.secondary_meta, - 'icon': { - 'name': 'information', - 'path': ecl_icon_path, - } - } - ]) %} - {% endif %} - {% set _item = _item|merge({ - secondary_meta: _secondary_meta - }) %} - - {# Enable the divider if it's not the last item. #} - {% if not loop.last %} - {% set _item = _item|merge({ - divider: true - }) %} - {% endif %} - - {# Add the formed _item to the _items array. #} - {% set _items = _items|merge([_item]) %} - {% endfor %} -{% endif %} - -{# Prepare the title as a link or simple string for the highlighted_item. #} -{% if highlighted_item.url is defined and highlighted_item.url is not empty %} - {% set highlighted_item_title = { - link: { - type: 'standalone', - label: highlighted_item.title, - path: highlighted_item.url, - external: highlighted_item.url|is_external_url, - icon_path: ecl_icon_path - } - } %} -{% else %} - {% set highlighted_item_title = highlighted_item.title %} -{% endif %} - -{# Prepare the Primary meta items of the highlighted item. #} -{% set _primary_meta = [] %} -{% if highlighted_item.primary_meta is not empty and highlighted_item.primary_meta is iterable %} - {% for highlighted_item in highlighted_item.primary_meta %} - {% if highlighted_item is not empty %} - {% set _primary_meta = _primary_meta|merge([highlighted_item]) %} - {% endif %} - {% endfor %} -{% endif %} - -{# Prepare the Secondary meta item of the highlighted item. #} -{% set _secondary_meta = [] %} -{% if highlighted_item.secondary_meta is not empty and highlighted_item.secondary_meta is defined %} - {% set _secondary_meta = _secondary_meta|merge([ - { - 'label': highlighted_item.secondary_meta, - 'icon': { - 'name': 'information', - 'path': ecl_icon_path, - } - } - ]) %} -{% endif %} - {# Prepare the see more link. #} {% if see_more_url is defined and see_more_url is not empty %} {% set _see_more = { @@ -141,24 +20,9 @@ {% include '@oe_theme/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig' with { 'title': title|default(''), - 'highlighted': { - 'title': highlighted_item_title, - 'picture': { - 'position': 'top', - 'size': 'large', - 'img': { - 'src': highlighted_item.picture.src, - 'alt': highlighted_item.picture.alt, - }, - 'sources': [], - }, - 'description': highlighted_item.description|default(''), - 'primary_meta': _primary_meta, - 'secondary_meta': _secondary_meta, - }, - 'items': _items, + 'highlighted': highlighted_item, + 'items': items, 'see_more': _see_more, 'detail': detail|default(''), - 'ecl_component_library': ecl_component_library, } only %} From faa9105ccb3d5ebb299ef79fa35faf25eaa628c6 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Sun, 11 Feb 2024 13:07:13 +0200 Subject: [PATCH 6/9] EWPP-4032: Adapt tests. --- tests/src/Kernel/fixtures/rendering.yml | 271 ++++++++++-------- .../HighlightedListAssert.php | 105 +------ 2 files changed, 171 insertions(+), 205 deletions(-) diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index f9ee4888d..47837347b 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3687,55 +3687,84 @@ '#fields': title: "Highlighted News" highlighted_item: - title: "Item 1" - url: "#" - description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus" - primary_meta: - - "Item 1 primary meta" - - "DD Month Year" - secondary_meta: "3 minutes read" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Highlighted item image" - items: - - title: "Item 2" - description: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." - primary_meta: - - "Item 2 primary meta" - - "DD Month Year" - secondary_meta: "5 minutes read" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Item 2 image" - - title: "Item 3" - url: "https://external.com" - description: "In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam" - primary_meta: - - "Item 3 primary meta" - - "DD Month Year" - secondary_meta: "2 minutes read" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Alternative text for image" - - title: "Item 4" - url: "#" - description: "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam" - primary_meta: - - "Item 4 primary meta" - - "DD Month Year" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Alternative text for image" - - title: "Item 5" + '#type': "pattern" + '#id': "list_item" + '#variant': "default" + '#fields': + title: "Item 1" url: "#" - description: "Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe" - primary_meta: - - "Item 5 primary meta" + external_link: true + detail: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus" + meta: + - "Item 1 primary meta" - "DD Month Year" - secondary_meta: "3 minutes read" - picture: + secondary_meta: + - label: "3 minutes read" + - label: "5 minutes read" + image: src: "https://loremflickr.com/1200/900/arch" - alt: "Alternative text for image" + alt: "Highlighted item image" + items: + - '#type': "pattern" + '#id': "list_item" + '#variant': "default" + '#fields': + title: "Item 2" + detail: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + meta: + - "Item 2 primary meta" + - "DD Month Year" + secondary_meta: + - label: "5 minutes read" + icon: "information" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Item 2 image" + - '#type': "pattern" + '#id': "list_item" + '#variant': "default" + '#fields': + title: "Item 3" + url: "https://external.com" + detail: "In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam" + meta: + - "Item 3 primary meta" + - "DD Month Year" + secondary_meta: + - label: "2 minutes read" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + image_position: "top" + - '#type': "pattern" + '#id': "list_item" + '#variant': "default" + '#fields': + title: "Item 4" + url: "#" + detail: "Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam" + meta: + - "Item 4 primary meta" + - "DD Month Year" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + secondary_meta: + - label: "3 minutes read" + - label: "5 minutes read" + - '#type': "pattern" + '#id': "list_item" + '#variant': "default" + '#fields': + title: "Item 5" + url: "#" + detail: "Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorpe" + meta: + - "Item 5 primary meta" + - "DD Month Year" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" see_more_label: "Read more news" see_more_url: "https://example.com" detail: @@ -3745,99 +3774,115 @@ 'div#highlighted-news-block': 1 'div#highlighted-news-block h2.ecl-u-type-heading-2': 1 'div div.ecl-row': 2 - 'div div.ecl-row.highlighted-news-divider': 1 - 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-8': 1 - 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start': 1 - 'div.ecl-u-mb-m': 3 - 'div.ecl-u-mb-m article.ecl-content-item--divider': 2 + 'div.ecl-row div.ecl-col-l-8.ecl-u-d-flex.ecl-u-flex-column': 1 + 'div.ecl-row div.ecl-col-l-4.ecl-u-d-flex.ecl-u-flex-column': 1 + 'div.ecl-row article.ecl-content-item--divider.ecl-u-flex-grow-1': 4 + 'div.ecl-row article.ecl-content-item--divider.ecl-u-flex-grow-1.ecl-u-mb-m': 2 'div.ecl-content-block__title': 4 'div.ecl-content-block__title a': 3 'picture.ecl-content-item__picture': 2 - 'div.ecl-col-12.ecl-col-l-8 picture.ecl-content-item__picture--large img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Highlighted item image"]': 1 - 'div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start picture.ecl-content-item__picture--medium img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Item 2 image"]': 1 - 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-8 a': 1 - 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start a': 2 + 'div.ecl-col-l-8 picture.ecl-content-item__picture--large img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Highlighted item image"]': 1 + 'div.ecl-col-l-4 picture.ecl-content-item__picture--medium img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Item 2 image"]': 1 + 'div#highlighted-news-block div.ecl-col-l-8 a': 1 + 'div#highlighted-news-block div.ecl-col-l-4 a': 2 'ul.ecl-content-block__primary-meta-container': 4 'div.ecl-content-block__description': 1 - 'ul.ecl-content-block__secondary-meta-container': 3 + 'ul.ecl-content-block__secondary-meta-container': 4 + 'ul.ecl-content-block__secondary-meta-container li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': 4 + 'div#highlighted-news-block div.ecl-u-mt-s:not(.ecl)': 1 'div#highlighted-news-block div.ecl.ecl-u-mt-s': 1 equals: 'div#highlighted-news-block h2.ecl-u-type-heading-2': 'Highlighted News' - 'div.ecl-col-12.ecl-col-l-8 ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 1 primary meta' - 'div.ecl-col-12.ecl-col-l-8 ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' - 'div.ecl-col-12.ecl-col-l-8 .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"]': 'Item 1' - 'div.ecl-col-12.ecl-col-l-8 .ecl-content-block__description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus' - 'div.ecl-col-12.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' - 'div.ecl-col-12.ecl-col-l-8 li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 2 primary meta' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) .ecl-content-block__title': 'Item 2' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"] .ecl-link__label': 'Item 3' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"] svg.ecl-icon--2xs': '' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '2 minutes read' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(3) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 4 primary meta' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(3) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(3) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"]': 'Item 4' - 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] .ecl-link__label': 'Read more news' - 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] svg.ecl-icon--2xs': '' + 'div.ecl-col-l-8 ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 1 primary meta' + 'div.ecl-col-l-8 ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' + 'div.ecl-col-l-8 .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"] .ecl-link__label': 'Item 1' + 'div.ecl-col-l-8 .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"] svg.ecl-icon--2xs': '' + 'div.ecl-col-l-8 .ecl-content-block__description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div.ecl-col-l-4 article:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 2 primary meta' + 'div.ecl-col-l-4 article:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' + 'div.ecl-col-l-4 article:nth-child(1) .ecl-content-block__title': 'Item 2' + 'div.ecl-col-l-4 article:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' + 'div.ecl-col-l-4 article:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"]': 'Item 3' + 'div.ecl-col-l-4 article:nth-child(2) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article:nth-child(2) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '2 minutes read' + 'div.ecl-col-l-4 article:nth-child(3) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 4 primary meta' + 'div.ecl-col-l-4 article:nth-child(3) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' + 'div.ecl-col-l-4 article:nth-child(3) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"]': 'Item 4' + 'div.ecl-col-l-4 article:nth-child(3) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article:nth-child(3) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] .ecl-link__label': 'Read more news' + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] svg.ecl-icon--2xs': '' 'div#highlighted-news-block div.ecl.ecl-u-mt-s': '
This is the detail rich text field which contains a link.
' - array: '#type': pattern '#id': highlighted_list '#fields': highlighted_item: - title: "Item 1" - secondary_meta: "3 minutes read" - picture: - src: "https://loremflickr.com/1200/900/arch" - alt: "Highlighted item image" - items: - - title: "Item 2" - description: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." - primary_meta: - - "Item 2 primary meta" - - "DD Month Year" - secondary_meta: "5 minutes read" - picture: + '#type': "pattern" + '#id': "list_item" + '#variant': "default" + '#fields': + title: "Item 1" + secondary_meta: + - label: "3 minutes read" + - label: "5 minutes read" + image: src: "https://loremflickr.com/1200/900/arch" - alt: "Item 2 image" - - title: "Item 3" - url: "https://external.com" + alt: "Highlighted item image" + items: + - '#type': "pattern" + '#id': "list_item" + '#variant': "default" + '#fields': + title: "Item 2" + detail: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." + meta: + - "Item 2 primary meta" + - "DD Month Year" + secondary_meta: + - label: "5 minutes read" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Item 2 image" + - '#type': "pattern" + '#id': "list_item" + '#variant': "default" + '#fields': + title: "Item 3" + url: "https://external.com" see_more_url: "https://example.com" assertions: count: 'div#highlighted-news-block': 1 'div#highlighted-news-block h2.ecl-u-type-heading-2': 0 'div div.ecl-row': 1 - 'div div.ecl-row.highlighted-news-divider': 1 - 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-8': 1 - 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start': 1 - 'div.ecl-u-mb-m': 2 - 'div.ecl-u-mb-m article.ecl-content-item--divider': 1 + 'div.ecl-row div.ecl-col-l-8.ecl-u-d-flex.ecl-u-flex-column': 1 + 'div.ecl-row div.ecl-col-l-4.ecl-u-d-flex.ecl-u-flex-column': 1 + 'div.ecl-row article.ecl-content-item--divider.ecl-u-flex-grow-1': 2 + 'div.ecl-row article.ecl-content-item--divider.ecl-u-flex-grow-1.ecl-u-mb-m': 1 'div.ecl-content-block__title': 3 'div.ecl-content-block__title a': 1 'picture.ecl-content-item__picture': 2 - 'div.ecl-col-12.ecl-col-l-8 picture.ecl-content-item__picture--large img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Highlighted item image"]': 1 - 'div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start picture.ecl-content-item__picture--medium img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Item 2 image"]': 1 - 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-8 a': 0 - 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start a': 1 + 'div.ecl-col-l-8 picture.ecl-content-item__picture--large img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Highlighted item image"]': 1 + 'div.ecl-col-l-4 picture.ecl-content-item__picture--medium img.ecl-content-item__image[src="https://loremflickr.com/1200/900/arch"][alt="Item 2 image"]': 1 + 'div#highlighted-news-block div.ecl-col-l-8 a': 0 + 'div#highlighted-news-block div.ecl-col-l-4 a': 1 'ul.ecl-content-block__primary-meta-container': 1 'div.ecl-content-block__description': 0 'ul.ecl-content-block__secondary-meta-container': 2 'div#highlighted-news-block div.ecl.ecl-u-mt-s': 0 equals: - 'div.ecl-col-12.ecl-col-l-8 .ecl-content-block__title': 'Item 1' - 'div.ecl-col-12.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' - 'div.ecl-col-12.ecl-col-l-8 li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 2 primary meta' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) .ecl-content-block__title': 'Item 2' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"] .ecl-link__label': 'Item 3' - 'div.ecl-u-align-self-start div.ecl-u-mb-m:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"] svg.ecl-icon--2xs': '' - 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] .ecl-link__label': 'https://example.com' - 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] svg.ecl-icon--2xs': '' + 'div.ecl-col-l-8 .ecl-content-block__title': 'Item 1' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 2 primary meta' + 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' + 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) .ecl-content-block__title': 'Item 2' + 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' + 'div.ecl-col-l-4 article:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"]': 'Item 3' + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] .ecl-link__label': 'https://example.com' + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] svg.ecl-icon--2xs': '' diff --git a/tests/src/PatternAssertions/HighlightedListAssert.php b/tests/src/PatternAssertions/HighlightedListAssert.php index a1165f764..0ac5c2adc 100644 --- a/tests/src/PatternAssertions/HighlightedListAssert.php +++ b/tests/src/PatternAssertions/HighlightedListAssert.php @@ -24,19 +24,19 @@ protected function getAssertions($variant): array { ], 'highlighted_item' => [ [$this, 'assertHighlightedItem'], - 'div#highlighted-news-block div.ecl-col-12.ecl-col-l-8', + 'div#highlighted-news-block div.ecl-row div.ecl-col-l-8.ecl-u-d-flex.ecl-u-flex-column', ], 'items' => [ [$this, 'assertItems'], - 'div.highlighted-news-divider div.ecl-col-12.ecl-col-l-4.ecl-u-align-self-start', + 'div.highlighted-news-divider div.ecl-row div.ecl-col-l-4.ecl-u-d-flex.ecl-u-flex-column', ], 'see_more_label' => [ [$this, 'assertElementText'], - 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone .ecl-link__label', + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone .ecl-link__label', ], 'see_more_url' => [ [$this, 'assertElementAttribute'], - 'div#highlighted-news-block > a.ecl-link.ecl-link--standalone', + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone', 'href', ], 'detail' => [ @@ -73,53 +73,10 @@ protected function assertHighlightedItem(?array $expected_highlighted_item, stri } $this->assertElementExists($selector, $crawler); $highlighted_wrapper = $crawler->filter($selector); - // Assert title. - if (isset($expected_highlighted_item['title'])) { - // Assert url, if available. - if (isset($expected_highlighted_item['url'])) { - $this->assertElementText($expected_highlighted_item['title'], '.ecl-content-block__title a.ecl-link.ecl-link--standalone', $highlighted_wrapper); - $this->assertElementAttribute($expected_highlighted_item['url'], '.ecl-content-block__title a.ecl-link.ecl-link--standalone', 'href', $highlighted_wrapper); - } - else { - $this->assertElementNotExists('.ecl-content-block__title a.ecl-link.ecl-link--standalone', $highlighted_wrapper); - $this->assertElementText($expected_highlighted_item['title'], '.ecl-content-block__title', $highlighted_wrapper); - } - } - // Assert image. - if (isset($expected_highlighted_item['image'])) { - $this->assertElementAttribute($expected_highlighted_item['image']['src'], 'picture.ecl-content-item__picture--large img.ecl-content-item__image', 'src', $highlighted_wrapper); - $this->assertElementAttribute($expected_highlighted_item['image']['alt'], 'picture.ecl-content-item__picture--large img.ecl-content-item__image', 'alt', $highlighted_wrapper); - } - else { - $this->assertElementNotExists('picture', $highlighted_wrapper); - } - // Assert primary meta. - if (isset($expected_highlighted_item['primary_meta'])) { - $actual_items = $highlighted_wrapper->filter('li.ecl-content-block__primary-meta-item'); - self::assertCount(count($expected_highlighted_item['primary_meta']), $actual_items); - foreach ($expected_highlighted_item['primary_meta'] as $index => $expected_item) { - self::assertEquals($expected_item, trim($actual_items->eq($index)->text())); - } - } - else { - $this->assertElementNotExists('ul.ecl-content-block__primary-meta-container', $highlighted_wrapper); - } - // Assert secondary meta. - if (isset($expected_highlighted_item['secondary_meta'])) { - $actual_item = $highlighted_wrapper->filter('li.ecl-content-block__secondary-meta-item'); - self::assertCount(1, $actual_item); - self::assertEquals($expected_highlighted_item['secondary_meta'], trim($actual_item->text())); - } - else { - $this->assertElementNotExists('li.ecl-content-block__secondary-meta-item', $highlighted_wrapper); - } - // Assert description. - if (isset($expected_highlighted_item['description'])) { - $this->assertElementText($expected_highlighted_item['description'], '.ecl-content-block__description', $highlighted_wrapper); - } - else { - $this->assertElementNotExists('.ecl-content-block__description', $highlighted_wrapper); - } + $list_item_assert = new ListItemAssert(); + $html = $highlighted_wrapper->html(); + $list_item_assert->assertPattern($expected_highlighted_item, $html); + $list_item_assert->assertVariant('default', $html); } /** @@ -142,53 +99,17 @@ protected function assertItems(?array $expected_items, string $selector, Crawler $this->assertElementExists($selector, $crawler); $items_wrapper = $crawler->filter($selector); // Assert the number of items. - $items = $items_wrapper->filter('div.ecl-u-mb-m'); + $items = $items_wrapper->filter('article'); self::assertCount(count($expected_items), $items, 'The expected number of items does not correspond with the actual number of items in the list.'); // Assert there is no description element for any of the items. $this->assertElementNotExists('.ecl-content-block__description', $items_wrapper); // Assert each item's info. + $list_item_assert = new ListItemAssert(); foreach ($expected_items as $index => $expected_item) { - // Assert title. - if (isset($expected_item['title'])) { - // Assert url, if available. - if (isset($expected_item['url'])) { - $this->assertElementText($expected_item['title'], '.ecl-content-block__title a.ecl-link.ecl-link--standalone', $items->eq($index)); - $this->assertElementAttribute($expected_item['url'], '.ecl-content-block__title a.ecl-link.ecl-link--standalone', 'href', $items->eq($index)); - } - else { - $this->assertElementNotExists('.ecl-content-block__title a.ecl-link.ecl-link--standalone', $items->eq($index)); - $this->assertElementText($expected_item['title'], '.ecl-content-block__title', $items->eq($index)); - } - } - // Assert primary meta. - if (isset($expected_item['primary_meta'])) { - $actual_items = $items->eq($index)->filter('li.ecl-content-block__primary-meta-item'); - self::assertCount(count($expected_item['primary_meta']), $actual_items); - foreach ($expected_item['primary_meta'] as $key => $primary_item) { - self::assertEquals($primary_item, trim($actual_items->eq($key)->text())); - } - } - else { - $this->assertElementNotExists('ul.ecl-content-block__primary-meta-container', $items->eq($index)); - } - // Assert secondary meta. - if (isset($expected_item['secondary_meta'])) { - $actual_item = $items->eq($index)->filter('li.ecl-content-block__secondary-meta-item'); - self::assertCount(1, $actual_item); - self::assertEquals($expected_item['secondary_meta'], trim($actual_item->text())); - } - else { - $this->assertElementNotExists('li.ecl-content-block__secondary-meta-item', $items->eq($index)); - } - // Assert image if it's the first item. - if (isset($expected_item['image']) && $index === 0) { - $this->assertElementAttribute($expected_item['image']['src'], 'picture.ecl-content-item__picture--medium img.ecl-content-item__image', 'src', $highlighted_wrapper); - $this->assertElementAttribute($expected_item['image']['alt'], 'picture.ecl-content-item__picture--medium img.ecl-content-item__image', 'alt', $highlighted_wrapper); - } - else { - $this->assertElementNotExists('picture', $items->eq($index)); - } + $html = $expected_item->html(); + $list_item_assert->assertPattern($expected_item, $html); + $list_item_assert->assertVariant('default', $html); } } From 09cbc9ea9b056a90da36d2ee182b90336011d055 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Mon, 12 Feb 2024 18:51:52 +0200 Subject: [PATCH 7/9] EWPP-4032: Make sure no extra list_item pattern info is used. --- oe_theme.theme | 24 ++++++++--- .../highlighted-news-block.html.twig | 2 +- .../highlighted_list.ui_patterns.yml | 14 ++++++- .../pattern-highlighted-list.html.twig | 6 +++ tests/src/Kernel/fixtures/rendering.yml | 42 +++++++++++++++---- .../HighlightedListAssert.php | 8 ++-- .../src/PatternAssertions/ListItemAssert.php | 25 +++++++++-- 7 files changed, 97 insertions(+), 24 deletions(-) diff --git a/oe_theme.theme b/oe_theme.theme index 68a2d5557..193729410 100644 --- a/oe_theme.theme +++ b/oe_theme.theme @@ -2542,6 +2542,12 @@ function oe_theme_preprocess_pattern_highlighted_list(array &$variables): void { } $variables['highlighted_item']['#fields']['divider'] = TRUE; $variables['highlighted_item']['#fields']['extra_classes'] = 'ecl-u-flex-grow-1'; + // It should always use the default variant. + $variables['highlighted_item']['#variant'] = 'default'; + // Make sure no other list_item pattern info is used. + $variables['highlighted_item']['#fields']['date'] = NULL; + $variables['highlighted_item']['#fields']['badges'] = NULL; + $variables['highlighted_item']['#fields']['lists'] = NULL; if (!isset($variables['items'])) { // If we don't have items, we bail out. return; @@ -2550,7 +2556,13 @@ function oe_theme_preprocess_pattern_highlighted_list(array &$variables): void { // We only display the first four items in the list. $variables['items'] = array_slice($variables['items'], 0, 3); foreach ($variables['items'] as $key => &$item) { + // It should always use the default variant. + $item['#variant'] = 'default'; $item['#fields']['divider'] = TRUE; + // Make sure no other list_item pattern info is used. + $item['#fields']['date'] = NULL; + $item['#fields']['badges'] = NULL; + $item['#fields']['lists'] = NULL; if ($key === 0) { // We only display the image for the first item. if (isset($item['#fields']['image'])) { @@ -2567,17 +2579,17 @@ function oe_theme_preprocess_pattern_highlighted_list(array &$variables): void { $item['#fields']['image'] = NULL; $item['#fields']['detail'] = NULL; } - if (!isset($item['#fields']['secondary_meta'])) { - continue; - } - // We display only the first secondary meta. - $item['#fields']['secondary_meta'] = [reset($item['#fields']['secondary_meta'])]; - $item['#fields']['secondary_meta'][0]['icon'] = 'information'; if ($key !== 2) { $item['#fields']['extra_classes'] = 'ecl-u-flex-grow-1 ecl-u-mb-m'; } else { $item['#fields']['extra_classes'] = 'ecl-u-flex-grow-1'; } + if (!isset($item['#fields']['secondary_meta'])) { + continue; + } + // We display only the first secondary meta. + $item['#fields']['secondary_meta'] = [reset($item['#fields']['secondary_meta'])]; + $item['#fields']['secondary_meta'][0]['icon'] = 'information'; } } diff --git a/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig b/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig index da81cca23..e2173190c 100644 --- a/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig +++ b/templates/compositions/ec-component-highlighted-news-block/highlighted-news-block.html.twig @@ -9,7 +9,7 @@ - "see_more" (array) (default: []): Predefined structure compatible with Link component. - "detail" (string) (default: ''): Additional information to be displayed below the 'See more' link. #} -
+
{% if title is not empty %}
diff --git a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml index be23ed611..bc891e763 100644 --- a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml +++ b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml @@ -29,6 +29,9 @@ highlighted_list: image: src: "https://loremflickr.com/1200/900/arch" alt: "Alternative text for image" + badges: + - label: "Highlighted" + variant: "highlight" items: type: "array" label: "Items" @@ -36,7 +39,7 @@ highlighted_list: preview: - type: pattern id: list_item - variant: default + variant: thumbnail_primary fields: title: "Item 2" detail: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." @@ -49,6 +52,15 @@ highlighted_list: image: src: "https://loremflickr.com/1200/900/arch" alt: "Alternative text for image" + badges: + - label: "Highlighted" + variant: "highlight" + lists: + - + - term: "When" + definition: "Thursday 15 November, 08:00 AM to Friday 16 November" + - term: "Where" + definition: "The EGG, Rue Barra 175, 1070 Brussels, Belgium" - type: pattern id: list_item variant: default diff --git a/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig b/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig index 41b838d28..69fd27a12 100644 --- a/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig +++ b/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig @@ -14,6 +14,12 @@ path: see_more_url, external: see_more_url|is_external_url, icon_path: ecl_icon_path + }, + icon: { + path: ecl_icon_path, + name: 'back', + size: 'xs', + transform: 'rotate-180' } } %} {% endif %} diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index 47837347b..dd31b21cc 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3823,7 +3823,7 @@ highlighted_item: '#type': "pattern" '#id': "list_item" - '#variant': "default" + '#variant': "thumbnail_primary" '#fields': title: "Item 1" secondary_meta: @@ -3832,10 +3832,21 @@ image: src: "https://loremflickr.com/1200/900/arch" alt: "Highlighted item image" + badges: + - label: "Highlighted" + variant: "highlight" + - label: "Status: Open" + variant: "high" + lists: + - + - term: "When" + definition: "Thursday 15 November, 08:00 AM to Friday 16 November" + - term: "Where" + definition: "The EGG, Rue Barra 175, 1070 Brussels, Belgium" items: - '#type': "pattern" '#id': "list_item" - '#variant': "default" + '#variant': "highlight" '#fields': title: "Item 2" detail: "Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem." @@ -3849,11 +3860,23 @@ alt: "Item 2 image" - '#type': "pattern" '#id': "list_item" - '#variant': "default" + '#variant': "thumbnail_primary" '#fields': title: "Item 3" url: "https://external.com" - see_more_url: "https://example.com" + image: + src: "https://loremflickr.com/1200/900/arch" + alt: "Alternative text for image" + badges: + - label: "Highlighted" + variant: "highlight" + lists: + - + - term: "When" + definition: "Thursday 15 November, 08:00 AM to Friday 16 November" + - term: "Where" + definition: "The EGG, Rue Barra 175, 1070 Brussels, Belgium" + see_more_url: "#" assertions: count: 'div#highlighted-news-block': 1 @@ -3861,8 +3884,8 @@ 'div div.ecl-row': 1 'div.ecl-row div.ecl-col-l-8.ecl-u-d-flex.ecl-u-flex-column': 1 'div.ecl-row div.ecl-col-l-4.ecl-u-d-flex.ecl-u-flex-column': 1 - 'div.ecl-row article.ecl-content-item--divider.ecl-u-flex-grow-1': 2 - 'div.ecl-row article.ecl-content-item--divider.ecl-u-flex-grow-1.ecl-u-mb-m': 1 + 'div.ecl-row article.ecl-content-item--divider.ecl-u-flex-grow-1': 3 + 'div.ecl-row article.ecl-content-item--divider.ecl-u-flex-grow-1.ecl-u-mb-m': 2 'div.ecl-content-block__title': 3 'div.ecl-content-block__title a': 1 'picture.ecl-content-item__picture': 2 @@ -3874,6 +3897,9 @@ 'div.ecl-content-block__description': 0 'ul.ecl-content-block__secondary-meta-container': 2 'div#highlighted-news-block div.ecl.ecl-u-mt-s': 0 + 'article.ecl-card': 0 + 'ul.ecl-content-block__label-container': 0 + 'div.ecl-content-block__list-container': 0 equals: 'div.ecl-col-l-8 .ecl-content-block__title': 'Item 1' 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' @@ -3884,5 +3910,5 @@ 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' 'div.ecl-col-l-4 article:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"]': 'Item 3' - 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] .ecl-link__label': 'https://example.com' - 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] svg.ecl-icon--2xs': '' + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="#"] .ecl-link__label': '#' + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="#"] svg.ecl-icon--xs.ecl-icon--rotate-180': '' diff --git a/tests/src/PatternAssertions/HighlightedListAssert.php b/tests/src/PatternAssertions/HighlightedListAssert.php index 0ac5c2adc..9b546b599 100644 --- a/tests/src/PatternAssertions/HighlightedListAssert.php +++ b/tests/src/PatternAssertions/HighlightedListAssert.php @@ -1,6 +1,6 @@ [ [$this, 'assertItems'], - 'div.highlighted-news-divider div.ecl-row div.ecl-col-l-4.ecl-u-d-flex.ecl-u-flex-column', + 'div#highlighted-news-block div.ecl-row div.ecl-col-l-4.ecl-u-d-flex.ecl-u-flex-column', ], 'see_more_label' => [ [$this, 'assertElementText'], @@ -107,7 +107,7 @@ protected function assertItems(?array $expected_items, string $selector, Crawler // Assert each item's info. $list_item_assert = new ListItemAssert(); foreach ($expected_items as $index => $expected_item) { - $html = $expected_item->html(); + $html = $items->eq($index)->outerHtml(); $list_item_assert->assertPattern($expected_item, $html); $list_item_assert->assertVariant('default', $html); } @@ -123,7 +123,7 @@ protected function assertItems(?array $expected_items, string $selector, Crawler * @param \Symfony\Component\DomCrawler\Crawler $crawler * The DomCrawler where to check the element. */ - protected function assertDescription($expected, string $selector, Crawler $crawler): void { + protected function assertDetail($expected, string $selector, Crawler $crawler): void { if (is_null($expected)) { $this->assertElementNotExists($selector, $crawler); return; diff --git a/tests/src/PatternAssertions/ListItemAssert.php b/tests/src/PatternAssertions/ListItemAssert.php index 4b7dfdf2f..198ec617f 100644 --- a/tests/src/PatternAssertions/ListItemAssert.php +++ b/tests/src/PatternAssertions/ListItemAssert.php @@ -182,19 +182,36 @@ protected function assertDate(?array $expected_date, string $variant, Crawler $c * The DomCrawler where to check the element. */ protected function assertThumbnailImage(?array $expected_image, string $variant, Crawler $crawler): void { - $variant_class = $variant === 'thumbnail_primary' ? 'picture.ecl-content-item__picture--large.ecl-content-item__picture--left' : 'picture.ecl-content-item__picture--large.ecl-content-item__picture--right'; - $image_div_selector = $variant_class . ' img.ecl-content-item__image'; if (is_null($expected_image)) { - $this->assertElementNotExists($image_div_selector, $crawler); + $this->assertElementNotExists('picture', $crawler); return; } + + $picture_class = isset($expected_image['size']) ? 'picture.ecl-content-item__picture--' . $expected_image['size'] : 'picture.ecl-content-item__picture--large'; + if (isset($expected_image['image_position'])) { + $picture_class = $picture_class . '.ecl-content-item__picture--' . $expected_image['image_position']; + } + else { + switch ($variant) { + case 'default': + case 'highlight': + case 'thumbnail_primary': + $picture_class = '.ecl-content-item__picture--left'; + break; + + case 'thumbnail_secondary': + $picture_class = '.ecl-content-item__picture--right'; + break; + } + } + $image_div_selector = $picture_class . ' img.ecl-content-item__image'; $this->assertElementExists($image_div_selector, $crawler); $image_div = $crawler->filter($image_div_selector); self::assertEquals($expected_image['alt'], $image_div->attr('alt')); self::assertStringContainsString($expected_image['src'], $image_div->attr('src')); // Thumbnail should always be clickable by ECL. - $this->assertElementAttribute('', $variant_class, 'data-ecl-picture-link', $crawler); + $this->assertElementAttribute('', $picture_class, 'data-ecl-picture-link', $crawler); } /** From dd3e4ab3357dff0a4d385acd47f35e25c029e7e0 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Mon, 19 Feb 2024 09:14:05 +0200 Subject: [PATCH 8/9] EWPP-4032: Allow multiple secondary meta items. --- oe_theme.theme | 11 ------ .../highlighted_list.ui_patterns.yml | 9 +++-- tests/src/Kernel/fixtures/rendering.yml | 34 ++++++++++++------- 3 files changed, 29 insertions(+), 25 deletions(-) diff --git a/oe_theme.theme b/oe_theme.theme index 193729410..2f1e83473 100644 --- a/oe_theme.theme +++ b/oe_theme.theme @@ -2528,11 +2528,6 @@ function oe_theme_preprocess_pattern_highlighted_list(array &$variables): void { return; } // Override highlighted item information. - if (isset($variables['highlighted_item']['#fields']['secondary_meta'])) { - // We display only the first secondary meta. - $variables['highlighted_item']['#fields']['secondary_meta'] = [reset($variables['highlighted_item']['#fields']['secondary_meta'])]; - $variables['highlighted_item']['#fields']['secondary_meta'][0]['icon'] = 'information'; - } if (isset($variables['highlighted_item']['#fields']['image'])) { $variables['highlighted_item']['#fields']['image']['size'] = 'large'; if (!isset($variables['highlighted_item']['#fields']['image_position']) || @@ -2585,11 +2580,5 @@ function oe_theme_preprocess_pattern_highlighted_list(array &$variables): void { else { $item['#fields']['extra_classes'] = 'ecl-u-flex-grow-1'; } - if (!isset($item['#fields']['secondary_meta'])) { - continue; - } - // We display only the first secondary meta. - $item['#fields']['secondary_meta'] = [reset($item['#fields']['secondary_meta'])]; - $item['#fields']['secondary_meta'][0]['icon'] = 'information'; } } diff --git a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml index bc891e763..b3d5d52e6 100644 --- a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml +++ b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml @@ -25,7 +25,9 @@ highlighted_list: - "DD Month Year" secondary_meta: - label: "3 minutes read" + icon: "information" - label: "5 minutes read" + icon: "clock" image: src: "https://loremflickr.com/1200/900/arch" alt: "Alternative text for image" @@ -48,7 +50,7 @@ highlighted_list: - "DD Month Year" secondary_meta: - label: "5 minutes read" - icon: "information" + icon: "clock" image: src: "https://loremflickr.com/1200/900/arch" alt: "Alternative text for image" @@ -73,6 +75,7 @@ highlighted_list: - "DD Month Year" secondary_meta: - label: "2 minutes read" + icon: "clock" image: src: "https://loremflickr.com/1200/900/arch" alt: "Alternative text for image" @@ -92,7 +95,9 @@ highlighted_list: alt: "Alternative text for image" secondary_meta: - label: "3 minutes read" - - label: "5 minutes read" + icon: "clock" + - label: "Brussels" + icon: "location" - type: pattern id: list_item variant: default diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index dd31b21cc..c9ec11625 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3700,7 +3700,9 @@ - "DD Month Year" secondary_meta: - label: "3 minutes read" + icon: "information" - label: "5 minutes read" + icon: "clock" image: src: "https://loremflickr.com/1200/900/arch" alt: "Highlighted item image" @@ -3716,7 +3718,7 @@ - "DD Month Year" secondary_meta: - label: "5 minutes read" - icon: "information" + icon: "clock" image: src: "https://loremflickr.com/1200/900/arch" alt: "Item 2 image" @@ -3732,6 +3734,7 @@ - "DD Month Year" secondary_meta: - label: "2 minutes read" + icon: "clock" image: src: "https://loremflickr.com/1200/900/arch" alt: "Alternative text for image" @@ -3751,7 +3754,9 @@ alt: "Alternative text for image" secondary_meta: - label: "3 minutes read" - - label: "5 minutes read" + icon: "clock" + - label: "Brussels" + icon: "location" - '#type': "pattern" '#id': "list_item" '#variant': "default" @@ -3788,7 +3793,7 @@ 'ul.ecl-content-block__primary-meta-container': 4 'div.ecl-content-block__description': 1 'ul.ecl-content-block__secondary-meta-container': 4 - 'ul.ecl-content-block__secondary-meta-container li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': 4 + 'ul.ecl-content-block__secondary-meta-container li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': 6 'div#highlighted-news-block div.ecl-u-mt-s:not(.ecl)': 1 'div#highlighted-news-block div.ecl.ecl-u-mt-s': 1 equals: @@ -3798,21 +3803,25 @@ 'div.ecl-col-l-8 .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"] .ecl-link__label': 'Item 1' 'div.ecl-col-l-8 .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"] svg.ecl-icon--2xs': '' 'div.ecl-col-l-8 .ecl-content-block__description': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida ipsum ut lorem cursus' - 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' - 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item:nth-child(1) svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item:nth-child(1) span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item:nth-child(2) svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item:nth-child(2) span.ecl-content-block__secondary-meta-label': '5 minutes read' 'div.ecl-col-l-4 article:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 2 primary meta' 'div.ecl-col-l-4 article:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' 'div.ecl-col-l-4 article:nth-child(1) .ecl-content-block__title': 'Item 2' - 'div.ecl-col-l-4 article:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' 'div.ecl-col-l-4 article:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' 'div.ecl-col-l-4 article:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"]': 'Item 3' - 'div.ecl-col-l-4 article:nth-child(2) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article:nth-child(2) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' 'div.ecl-col-l-4 article:nth-child(2) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '2 minutes read' 'div.ecl-col-l-4 article:nth-child(3) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 4 primary meta' 'div.ecl-col-l-4 article:nth-child(3) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' 'div.ecl-col-l-4 article:nth-child(3) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="#"]': 'Item 4' - 'div.ecl-col-l-4 article:nth-child(3) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' - 'div.ecl-col-l-4 article:nth-child(3) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div.ecl-col-l-4 article:nth-child(3) li.ecl-content-block__secondary-meta-item:nth-child(1) svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article:nth-child(3) li.ecl-content-block__secondary-meta-item:nth-child(1) span.ecl-content-block__secondary-meta-label': '3 minutes read' + 'div.ecl-col-l-4 article:nth-child(3) li.ecl-content-block__secondary-meta-item:nth-child(2) svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article:nth-child(3) li.ecl-content-block__secondary-meta-item:nth-child(2) span.ecl-content-block__secondary-meta-label': 'Brussels' 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] .ecl-link__label': 'Read more news' 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="https://example.com"] svg.ecl-icon--2xs': '' 'div#highlighted-news-block div.ecl.ecl-u-mt-s': '
This is the detail rich text field which contains a link.
' @@ -3828,7 +3837,7 @@ title: "Item 1" secondary_meta: - label: "3 minutes read" - - label: "5 minutes read" + icon: "clock" image: src: "https://loremflickr.com/1200/900/arch" alt: "Highlighted item image" @@ -3855,6 +3864,7 @@ - "DD Month Year" secondary_meta: - label: "5 minutes read" + icon: "clock" image: src: "https://loremflickr.com/1200/900/arch" alt: "Item 2 image" @@ -3902,12 +3912,12 @@ 'div.ecl-content-block__list-container': 0 equals: 'div.ecl-col-l-8 .ecl-content-block__title': 'Item 1' - 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' 'div.ecl-col-l-8 li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '3 minutes read' 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': 'Item 2 primary meta' 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': 'DD Month Year' 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) .ecl-content-block__title': 'Item 2' - 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' + 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item svg.ecl-content-block__secondary-meta-icon': '' 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' 'div.ecl-col-l-4 article:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"]': 'Item 3' 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="#"] .ecl-link__label': '#' From 0aba32413a0cdbcbf08b6e150643ff4f90c56901 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Mon, 19 Feb 2024 09:28:11 +0200 Subject: [PATCH 9/9] EWPP-4032: Fix see more link icon. --- .../patterns/highlighted_list/highlighted_list.ui_patterns.yml | 2 +- .../highlighted_list/pattern-highlighted-list.html.twig | 2 +- tests/src/Kernel/fixtures/rendering.yml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml index b3d5d52e6..d7231f5b4 100644 --- a/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml +++ b/templates/patterns/highlighted_list/highlighted_list.ui_patterns.yml @@ -120,7 +120,7 @@ highlighted_list: type: "Url" label: "See more URL" description: "See more link URL (A Drupal Url object)" - preview: "https://example.com" + preview: "#" detail: type: "text" label: "Detail" diff --git a/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig b/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig index 69fd27a12..e8113078e 100644 --- a/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig +++ b/templates/patterns/highlighted_list/pattern-highlighted-list.html.twig @@ -17,7 +17,7 @@ }, icon: { path: ecl_icon_path, - name: 'back', + name: 'arrow-left', size: 'xs', transform: 'rotate-180' } diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index c9ec11625..3a1f667f6 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3921,4 +3921,4 @@ 'div.ecl-col-l-4 article.ecl-u-mb-m:nth-child(1) li.ecl-content-block__secondary-meta-item span.ecl-content-block__secondary-meta-label': '5 minutes read' 'div.ecl-col-l-4 article:nth-child(2) .ecl-content-block__title a.ecl-link.ecl-link--standalone[href="https://external.com"]': 'Item 3' 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="#"] .ecl-link__label': '#' - 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="#"] svg.ecl-icon--xs.ecl-icon--rotate-180': '' + 'div#highlighted-news-block > div.ecl-u-mt-s a.ecl-link.ecl-link--standalone.ecl-link--icon[href="#"] svg.ecl-icon--xs.ecl-icon--rotate-180': ''