From 993dbf65a6abb3a963515e4cc851bbe2eed00632 Mon Sep 17 00:00:00 2001 From: 22Alexandra Date: Mon, 25 Nov 2024 13:08:44 +0200 Subject: [PATCH] EWPP-4953: Add support for lists in featured item pattern. --- .../featured_item.ui_patterns.yml | 43 ++++++++++++++ .../pattern-featured-item.html.twig | 59 +++++++++++++++++++ tests/src/Kernel/fixtures/rendering.yml | 28 +++++++++ 3 files changed, 130 insertions(+) diff --git a/templates/patterns/featured_item/featured_item.ui_patterns.yml b/templates/patterns/featured_item/featured_item.ui_patterns.yml index ad4606f55..7d1504aa2 100644 --- a/templates/patterns/featured_item/featured_item.ui_patterns.yml +++ b/templates/patterns/featured_item/featured_item.ui_patterns.yml @@ -83,6 +83,49 @@ featured_item: label: "Contextual links" description: "Render array of contextual links" preview: ~ + lists: + type: "array" + label: "Additional information" + description: "Array of lists compatible with the ECL Description list component. For 'link', 'link-inline' and 'taxonomy' variants of the list, the list_type is mandatory. If an iterable definition has at least one path provided, all the other items need to provide a path as well." + preview: + - + - term: "When" + definition: "Thursday 15 November, 08:00 AM to Friday 16 November" + - term: "Where" + definition: + - "The EGG, Rue Barra 175, 1070 Brussels, Belgium" + - "Rue Belliard 28, 1000 Brussels, Belgium" + - term: "Standalone links" + list_type: "link" + definition: + - label: "First link" + path: "https://example.com/1" + icon: "copy" + - path: "https://example.com/2" + icon: "download" + - label: "Third link" + path: "https://example.com/3" + external_link: TRUE + - term: "Inline links" + definition: + - label: "First inline-link" + path: "https://example.com/1" + external_link: TRUE + - label: "Second inline-link" + path: "https://example.com/2" + - path: "https://example.com/3" + list_type: "link-inline" + - term: "Taxonomy list" + list_type: "taxonomy" + definition: + - label: "Taxonomy item 1" + - "Taxonomy item 2" + - "Taxonomy item 3" + lists_variant: + type: "string" + label: "Lists variant" + description: "An optional parameter for the layout of the lists (vertical or horizontal). It defaults to vertical." + preview: "vertical" extra_attributes: type: "array" label: "Extra attributes" diff --git a/templates/patterns/featured_item/pattern-featured-item.html.twig b/templates/patterns/featured_item/pattern-featured-item.html.twig index f94f98e30..49c953d0e 100644 --- a/templates/patterns/featured_item/pattern-featured-item.html.twig +++ b/templates/patterns/featured_item/pattern-featured-item.html.twig @@ -70,6 +70,64 @@ } } %} {% endif %} + +{# Prepare the lists array. #} +{% if lists is not empty %} + {% set _lists = [] %} + {% for list in lists %} + {% set items = [] %} + {% for item in list %} + {# Item definition can be either an array or a simple string. #} + {% if item.definition is iterable %} + {% set _definitions = [] %} + {% for _definition in item.definition %} + {% if _definition.path is defined %} + {% set link = { + link: { + 'type': 'standalone', + 'label': _definition.label|default(_definition.path), + 'path': _definition.path, + 'external': _definition.external_link|default(false), + 'icon_path': ecl_icon_path, + } + } %} + {% if _definition.icon is defined %} + {% set link = link|merge({ + icon: { + name: _definition.icon, + path: ecl_icon_path, + size: "xs", + } + }) %} + {% endif %} + {# For arrays we need to consider separatly which parameters have been provided. #} + {% set _definitions = _definitions|merge([link]) %} + {% elseif _definition.label is defined and _definition.path is not defined %} + {% set _definitions = _definitions|merge([_definition.label]) %} + {% elseif _definition.label is not defined and _definition.path is not defined %} + {% set _definitions = _definitions|merge([_definition]) %} + {% endif %} + {% endfor %} + {% set items = items|merge([{ + term: item.term, + definition: _definitions, + type: item.list_type|default(''), + }]) %} + {% elseif item.definition is not empty %} + {% set items = items|merge([{ + term: item.term, + definition: item.definition, + type: item.list_type|default(''), + }]) %} + {% endif %} + {% endfor %} + {% set _lists = _lists|merge([{ + variant: lists_variant|default("vertical"), + items: items, + }]) %} + {% endfor %} +{% endif %} + {{ contextual_links }} {% include '@ecl-twig/card' with { 'description': _description|default(description|smart_trim(_length)), @@ -79,5 +137,6 @@ 'picture': _picture, 'picture_zoom': picture_zoom|default(false), 'labels': badges, + 'lists': _lists|default([]), 'extra_attributes': extra_attributes|default([]), } %} diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index af614d88d..480f7d2de 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -3368,6 +3368,7 @@ 'ul.ecl-content-block__secondary-meta-container': 0 'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0 'div.ecl-content-block__title a.ecl-link.ecl-link--standalone': 0 + 'div.ecl-content-block__list-container': 0 equals: 'div.ecl-content-block__title': "Example title" - array: @@ -3385,6 +3386,7 @@ 'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0 'span.ecl-button__container a.ecl-button .ecl-button__label': 0 'div.ecl-content-block__title a.ecl-link.ecl-link--standalone': 0 + 'div.ecl-content-block__list-container': 0 equals: 'div.ecl-content-block__title': "Example title" - array: @@ -3408,6 +3410,20 @@ 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" + - "Rue Belliard 28, 1000 Brussels, Belgium" + - term: "Taxonomy list" + list_type: "taxonomy" + definition: + - label: "Taxonomy item 1" + - "Taxonomy item 2" + - "Taxonomy item 3" extra_attributes: - name: "extra-attr" value: "extra value" @@ -3421,6 +3437,8 @@ 'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 1 'ul.ecl-content-block__label-container li.ecl-content-block__label-item': 2 'ul.ecl-content-block__primary-meta-container': 1 + 'div.ecl-content-block__list-container': 1 + 'dl.ecl-description-list.ecl-description-list--vertical.ecl-content-block__list': 1 equals: 'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': "Breaking news article" 'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': "Brussels" @@ -3428,6 +3446,14 @@ 'div.ecl-content-block__description': "Example description" 'ul.ecl-content-block__label-container li.ecl-content-block__label-item:nth-child(1) span.ecl-label.ecl-label--highlight': "Highlighted" 'ul.ecl-content-block__label-container li.ecl-content-block__label-item:nth-child(2) span.ecl-label.ecl-label--high': "Status: Open" + 'div.ecl-content-block__list-container dt.ecl-description-list__term:nth-child(1)': "When" + 'div.ecl-content-block__list-container dd.ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November" + 'div.ecl-content-block__list-container dt.ecl-description-list__term:nth-child(3)': "Where" + 'div.ecl-content-block__list-container dd.ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, BelgiumRue Belliard 28, 1000 Brussels, Belgium" + 'div.ecl-content-block__list-container dt.ecl-description-list__term:nth-child(5)': "Taxonomy list" + 'div.ecl-content-block__list-container dd.ecl-description-list__definition.ecl-description-list__definition--taxonomy li.ecl-description-list__definition-item:nth-child(1)': "Taxonomy item 1" + 'div.ecl-content-block__list-container dd.ecl-description-list__definition.ecl-description-list__definition--taxonomy li.ecl-description-list__definition-item:nth-child(2)': "Taxonomy item 2" + 'div.ecl-content-block__list-container dd.ecl-description-list__definition.ecl-description-list__definition--taxonomy li.ecl-description-list__definition-item:nth-child(3)': "Taxonomy item 3" - array: '#type': pattern '#id': featured_item @@ -3455,6 +3481,7 @@ 'article.ecl-card picture.ecl-picture--zoom': 1 'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0 'ul.ecl-content-block__primary-meta-container': 1 + 'div.ecl-content-block__list-container': 0 equals: 'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': "Breaking news article" 'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': "Brussels" @@ -3487,6 +3514,7 @@ 'article.ecl-card picture.ecl-picture--zoom': 0 'article.ecl-card div.ecl-card__body ul.ecl-content-block__label-container': 0 'ul.ecl-content-block__primary-meta-container': 1 + 'div.ecl-content-block__list-container': 0 equals: 'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(1)': "Breaking news article" 'ul.ecl-content-block__primary-meta-container li.ecl-content-block__primary-meta-item:nth-child(2)': "Brussels"