From bb03410458f9ddbab20692c42113ddf11170c3c9 Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Fri, 11 Sep 2020 16:14:44 +0200 Subject: [PATCH 01/17] EWPP-230: Use media container for item lists. --- .../list_item/pattern-list-item.html.twig | 37 ++++++------------- 1 file changed, 12 insertions(+), 25 deletions(-) diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index 34e3107ab..2baec64ce 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -14,29 +14,19 @@ - "additional_information" (array): Additional information to be displayed right below the 'Detail' field. #} -{# Create macro #} - -{% macro image(src, alt, position) %} - -{% endmacro %} - -
- {% if image and image_position == 'before' %} - {{ _self.image(image.src, image.alt, image_position) }} - {% endif %} + ecl-u-order-first + ecl-u-order-md-{{ image_position == 'before' ? 'first' : 'last' }} + ecl-u-{{ image_position == 'before' ? 'mr' : 'ml' }}-md-l + ecl-content-item__image__{{ image_position }} + ecl-u-mb-m + ecl-u-mb-md-none" + > + {{ image.alt }} +
{% if meta is not empty %}
{{ meta|safe_join(" | ") }}
@@ -63,8 +53,5 @@ {% endfor %} {% endif %}
- {% if image and image_position == 'after' %} - {{ _self.image(image.src, image.alt, image_position) }} - {% endif %}
{% endspaceless %} From 9555129656f47d810685875d3a4acd0ec2475cab Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Fri, 11 Sep 2020 16:44:40 +0200 Subject: [PATCH 02/17] EWPP-230: Add SASS styling. --- sass/components/_list_items.scss | 17 +++++++++++++++++ sass/style-ec.scss | 1 + sass/style-eu.scss | 1 + .../list_item/pattern-list-item.html.twig | 7 +++---- 4 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 sass/components/_list_items.scss diff --git a/sass/components/_list_items.scss b/sass/components/_list_items.scss new file mode 100644 index 000000000..688bb074b --- /dev/null +++ b/sass/components/_list_items.scss @@ -0,0 +1,17 @@ +.ecl-content-item-date, +.ecl-content-item { + .ecl-media-container { + background-color: transparent; + @include ecl-media-breakpoint-up('md') { + width: 180px; + } + } + &__meta { + text-transform: uppercase; + } + &__description { + p { + margin: 0; + } + } +} diff --git a/sass/style-ec.scss b/sass/style-ec.scss index 92987d22d..e5edcdf32 100644 --- a/sass/style-ec.scss +++ b/sass/style-ec.scss @@ -8,6 +8,7 @@ @import "./components/form"; @import "./components/toolbar"; @import "./components/banner"; +@import "./components/list_items"; @import "./components/wysiwyg"; @import "./components/content_project"; @import "./components/description-list"; diff --git a/sass/style-eu.scss b/sass/style-eu.scss index 4c1de1ba2..fdd820f6c 100644 --- a/sass/style-eu.scss +++ b/sass/style-eu.scss @@ -12,6 +12,7 @@ @import "./components/form"; @import "./components/toolbar"; @import "./components/banner"; +@import "./components/list_items"; @import "./components/wysiwyg"; @import "./components/content_project"; @import "./components/description-list"; diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index 2baec64ce..2ee8fe636 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -16,7 +16,6 @@
- {{ image.alt }} + {{ image.alt }}
{% if meta is not empty %} -
{{ meta|safe_join(" | ") }}
+
{{ meta|safe_join(" | ") }}
{% endif %} -
+
{%- if url %} {% include '@ecl-twig/link' with { link: { From c09219361e9e553bf91d1501a20fd212a3ae97ac Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Fri, 11 Sep 2020 17:27:45 +0200 Subject: [PATCH 03/17] EWPP-230: Adjust images and sizes. --- sass/components/_list_items.scss | 22 +++++++++++++++++++ .../list_item/pattern-list-item.html.twig | 3 +-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/sass/components/_list_items.scss b/sass/components/_list_items.scss index 688bb074b..44fba404a 100644 --- a/sass/components/_list_items.scss +++ b/sass/components/_list_items.scss @@ -5,6 +5,9 @@ @include ecl-media-breakpoint-up('md') { width: 180px; } + @include ecl-media-breakpoint-up('lg') { + width: 220px; + } } &__meta { text-transform: uppercase; @@ -15,3 +18,22 @@ } } } + +.ecl-content-item { + &__image__before { + @include ecl-media-breakpoint-up('md') { + margin-right: $ecl-spacing-l; + } + @include ecl-media-breakpoint-up('lg') { + margin-right: $ecl-spacing-xl; + } + } + &__image__after { + @include ecl-media-breakpoint-up('md') { + margin-left: $ecl-spacing-l; + } + @include ecl-media-breakpoint-up('lg') { + margin-left: $ecl-spacing-xl; + } + } +} diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index 2ee8fe636..ae980c51f 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -16,11 +16,10 @@
From a25fc0ce7f028c1aa48c235a7b5be2c6e90186b6 Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sat, 12 Sep 2020 13:26:25 +0200 Subject: [PATCH 04/17] EWPP-249: Refactor list item pattern into. --- package.json | 3 + sass/components/_list_items.scss | 38 +++++++--- sass/style-ec.scss | 16 ++-- sass/style-eu.scss | 20 +++-- .../list_item/list_item.ui_patterns.yml | 10 +-- .../pattern-list-item--variant-date.html.twig | 35 +-------- .../list_item/pattern-list-item.html.twig | 74 ++++++++++--------- 7 files changed, 95 insertions(+), 101 deletions(-) diff --git a/package.json b/package.json index 569736814..e5f563d2e 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,15 @@ "@ecl/ec-component-fact-figures": "2.31.0", "@ecl/ec-component-form-help-block": "2.31.0", "@ecl/ec-component-media-container": "2.31.0", + "@ecl/ec-utility-typography": "2.31.0", "@ecl/ec-preset-editor": "2.31.0", "@ecl/ec-preset-legacy-website": "2.31.0", "@ecl/ec-theme-default": "2.31.0", "@ecl/ec-utility-background": "^2.31.0", "@ecl/ec-utility-border": "^2.31.0", "@ecl/eu-component-form-help-block": "2.31.0", + "@ecl/eu-component-media-container": "2.31.0", + "@ecl/eu-utility-typography": "2.31.0", "@ecl/eu-preset-legacy-website": "2.31.0", "@ecl/eu-theme-default": "2.31.0", "@ecl/eu-utility-background": "^2.31.0", diff --git a/sass/components/_list_items.scss b/sass/components/_list_items.scss index 44fba404a..676037a07 100644 --- a/sass/components/_list_items.scss +++ b/sass/components/_list_items.scss @@ -1,38 +1,54 @@ -.ecl-content-item-date, -.ecl-content-item { - .ecl-media-container { +.list-item-date, +.list-item { + margin-bottom: $ecl-spacing-l; + &__title { + @extend .ecl-u-type-heading-4; + margin-top: 0; + margin-bottom: $ecl-spacing-xs; + } + &__image { + @extend .ecl-media-container; + margin-bottom: $ecl-spacing-m; background-color: transparent; - @include ecl-media-breakpoint-up('md') { + img { + @extend .ecl-media-container__media; + } + @include ecl-media-breakpoint-up("md") { width: 180px; + margin-bottom: 0; } - @include ecl-media-breakpoint-up('lg') { + @include ecl-media-breakpoint-up("lg") { width: 220px; } } &__meta { + @extend .ecl-u-type-s; + @extend .ecl-u-type-color-grey-75; + margin-bottom: $ecl-spacing-xs; text-transform: uppercase; } &__description { + @extend .ecl-u-type-paragraph; + @extend .ecl-u-type-color-grey-100; p { margin: 0; } } } - -.ecl-content-item { +.list-item { &__image__before { - @include ecl-media-breakpoint-up('md') { + @include ecl-media-breakpoint-up("md") { margin-right: $ecl-spacing-l; } - @include ecl-media-breakpoint-up('lg') { + @include ecl-media-breakpoint-up("lg") { margin-right: $ecl-spacing-xl; } } &__image__after { - @include ecl-media-breakpoint-up('md') { + @include ecl-media-breakpoint-up("md") { margin-left: $ecl-spacing-l; } - @include ecl-media-breakpoint-up('lg') { + @include ecl-media-breakpoint-up("lg") { margin-left: $ecl-spacing-xl; } } diff --git a/sass/style-ec.scss b/sass/style-ec.scss index e5edcdf32..4dbfa8ff2 100644 --- a/sass/style-ec.scss +++ b/sass/style-ec.scss @@ -1,10 +1,12 @@ -@import '@ecl/ec-theme-default/exports/all'; -@import '@ecl/ec-theme-default/exports/colors'; -@import '@ecl/ec-theme-default/exports/colors-bg'; -@import '@ecl/ec-theme-default/exports/spacing'; -@import '@ecl/ec-utility-border/ec-utility-border'; -@import '@ecl/ec-utility-background/ec-utility-background'; -@import '@ecl/ec-component-form-help-block/ec-component-form-help-block'; +@import "@ecl/ec-theme-default/exports/all"; +@import "@ecl/ec-theme-default/exports/colors"; +@import "@ecl/ec-theme-default/exports/colors-bg"; +@import "@ecl/ec-theme-default/exports/spacing"; +@import "@ecl/ec-utility-border/ec-utility-border"; +@import "@ecl/ec-utility-background/ec-utility-background"; +@import "@ecl/ec-utility-typography/ec-utility-typography"; +@import "@ecl/ec-component-form-help-block/ec-component-form-help-block"; +@import "@ecl/ec-component-media-container/ec-component-media-container"; @import "./components/form"; @import "./components/toolbar"; @import "./components/banner"; diff --git a/sass/style-eu.scss b/sass/style-eu.scss index fdd820f6c..d07ad49b5 100644 --- a/sass/style-eu.scss +++ b/sass/style-eu.scss @@ -1,14 +1,12 @@ -@import '@ecl/eu-theme-default/exports/all'; -@import '@ecl/eu-theme-default/exports/colors'; -@import '@ecl/eu-theme-default/exports/colors-bg'; -@import '@ecl/eu-theme-default/exports/spacing'; -@import '@ecl/eu-utility-border/eu-utility-border'; -@import '@ecl/ec-utility-background/ec-utility-background'; -@import '@ecl/eu-component-form-help-block/eu-component-form-help-block'; -// Facts and Figure component is missing from EU family so we add it here. -// @todo remove this after the above will be fixed upstream. -@import '@ecl/ec-component-fact-figures/ec-component-fact-figures'; -@import '@ecl/ec-component-media-container/ec-component-media-container'; +@import "@ecl/eu-theme-default/exports/all"; +@import "@ecl/eu-theme-default/exports/colors"; +@import "@ecl/eu-theme-default/exports/colors-bg"; +@import "@ecl/eu-theme-default/exports/spacing"; +@import "@ecl/eu-utility-border/eu-utility-border"; +@import "@ecl/eu-utility-background/eu-utility-background"; +@import "@ecl/eu-utility-typography/eu-utility-typography"; +@import "@ecl/eu-component-form-help-block/eu-component-form-help-block"; +@import "@ecl/eu-component-media-container/eu-component-media-container"; @import "./components/form"; @import "./components/toolbar"; @import "./components/banner"; diff --git a/templates/patterns/list_item/list_item.ui_patterns.yml b/templates/patterns/list_item/list_item.ui_patterns.yml index 9da13b124..2a7866222 100644 --- a/templates/patterns/list_item/list_item.ui_patterns.yml +++ b/templates/patterns/list_item/list_item.ui_patterns.yml @@ -37,7 +37,7 @@ list_item: type: "Url" label: "URL" description: "List item link URL (A Drupal Url object)" - preview: "#" + preview: "http://example.com" title: type: "text" label: "Title" @@ -84,9 +84,9 @@ list_item: end: 1546250400 timezone: "Europe/Brussels" image: - type: "array" + type: "renderable" label: "Primary image" - description: "Attributes of the image to render" + description: "The image provided as the actual tag. It accepts a Drupal renderable array or any other renderable markup. To keep backwards compatibility it also accepts an array with the following keys: 'src', 'alt'." preview: - src: "https://placeimg.com/1200/900/arch" - alt: "Alternative text for image" + '#theme': "image" + '#uri': "http://lorempixel.com/800/600/city/2" diff --git a/templates/patterns/list_item/pattern-list-item--variant-date.html.twig b/templates/patterns/list_item/pattern-list-item--variant-date.html.twig index b8989d4a6..633063ee2 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-date.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-date.html.twig @@ -1,4 +1,3 @@ -{% spaceless %} {# @file Default event list item component. @@ -12,8 +11,9 @@ - "length" (int) (default: 0): Max length of detail field. - "additional_information" (array): Additional information to be displayed right below the 'Detail' field. #} -
-
+{% extends '@oe_theme/patterns/list_item/pattern-list-item.html.twig' %} +{% block secondary %} +
{% include '@oe_theme/compositions/ec-component-date-block/date-block.html.twig' with { variant: variant|replace({'_':'-'})|to_date_status, week_day: date.week_day, @@ -24,31 +24,4 @@ year: date.year } only %}
-
- {% if meta is not empty %} -
{{ meta|safe_join(" | ") }}
- {% endif %} -
- {%- if url %} - {% include '@ecl-twig/link' with { - link: { - type: 'standalone', - label: title, - path: url - } - } only %} - {% else %} - {{ title }} - {%- endif -%} -
- {% if detail is not empty %} -
{{ detail|smart_trim(length) }}
- {% endif %} - {% if additional_information is not empty %} - {% for item in additional_information %} -
{{ item }}
- {% endfor %} - {% endif %} -
-
-{% endspaceless %} +{% endblock %} diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index ae980c51f..2bae93322 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -13,43 +13,45 @@ - "length" (int) (default: 0): Max length of detail field. - "additional_information" (array): Additional information to be displayed right below the 'Detail' field. #} - -
-
- {{ image.alt }} -
-
- {% if meta is not empty %} -
{{ meta|safe_join(" | ") }}
- {% endif %} -
- {%- if url %} - {% include '@ecl-twig/link' with { - link: { - type: 'standalone', - label: title, - path: url - } - } only %} +{# In order to keep the pattern's backward compatibility, we conver the deprecated input hash into an image tag. #} +{% if image.src is not empty %} + {% set image %} + ' + img.alt + ' + {% endset %} +{% endif %} +
+ {# Seconday information block. #} + {% block secondary %} +
+ {% if url %} + {{ image }} {% else %} - {{ title }} - {%- endif -%} + {{ image }} + {% endif %} +
+ {% endblock %} + {# Primary information block. #} + {% block primary %} +
+ {% if meta is not empty %} +
{{ meta|safe_join(" | ") }}
+ {% endif %} +

+ {% if url %} + {{ title }} + {% else %} + {{ title }} + {% endif %} +

+ {% if detail is not empty %} +
{{ detail|smart_trim(length) }}
+ {% endif %} + {% if additional_information is not empty %} + {% for item in additional_information %} +
{{ item }}
+ {% endfor %} + {% endif %}
- {% if detail is not empty %} -
{{ detail|smart_trim(length) }}
- {% endif %} - {% if additional_information is not empty %} - {% for item in additional_information %} -
{{ item }}
- {% endfor %} - {% endif %} -
+ {% endblock %}
{% endspaceless %} From 0c30f807af865267546421695e0841d6d3137b8f Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sat, 12 Sep 2020 13:27:49 +0200 Subject: [PATCH 05/17] EWPP-249: Use image formatter on teasers. --- .../core.entity_view_display.node.oe_news.teaser.yml | 9 +++++---- .../core.entity_view_display.node.oe_news.teaser.yml | 9 +++++---- .../core.entity_view_display.node.oe_project.teaser.yml | 7 ++++--- templates/content/node--oe-news--teaser.html.twig | 3 +-- templates/content/node--oe-project--teaser.html.twig | 3 +-- 5 files changed, 16 insertions(+), 15 deletions(-) diff --git a/modules/oe_theme_content_news/config/overrides/core.entity_view_display.node.oe_news.teaser.yml b/modules/oe_theme_content_news/config/overrides/core.entity_view_display.node.oe_news.teaser.yml index e9c8b7e9f..d1393c2cd 100644 --- a/modules/oe_theme_content_news/config/overrides/core.entity_view_display.node.oe_news.teaser.yml +++ b/modules/oe_theme_content_news/config/overrides/core.entity_view_display.node.oe_news.teaser.yml @@ -12,11 +12,11 @@ dependencies: - field.field.node.oe_news.oe_subject - field.field.node.oe_news.oe_summary - field.field.node.oe_news.oe_teaser - - image.style.oe_theme_list_item_2x + - image.style.oe_theme_ratio_3_2_medium - node.type.oe_news module: - datetime - - oe_theme_helper + - media - text - user id: node.oe_news.teaser @@ -30,12 +30,13 @@ content: settings: { } third_party_settings: { } oe_news_featured_media: - type: oe_theme_helper_media_thumbnail_url + type: media_thumbnail weight: 2 region: content label: hidden settings: - image_style: oe_theme_list_item_2x + image_style: oe_theme_ratio_3_2_medium + image_link: '' third_party_settings: { } oe_publication_date: type: datetime_default diff --git a/modules/oe_theme_content_news/config/post_updates/00002_override_teaser_view_display/core.entity_view_display.node.oe_news.teaser.yml b/modules/oe_theme_content_news/config/post_updates/00002_override_teaser_view_display/core.entity_view_display.node.oe_news.teaser.yml index e9c8b7e9f..d1393c2cd 100644 --- a/modules/oe_theme_content_news/config/post_updates/00002_override_teaser_view_display/core.entity_view_display.node.oe_news.teaser.yml +++ b/modules/oe_theme_content_news/config/post_updates/00002_override_teaser_view_display/core.entity_view_display.node.oe_news.teaser.yml @@ -12,11 +12,11 @@ dependencies: - field.field.node.oe_news.oe_subject - field.field.node.oe_news.oe_summary - field.field.node.oe_news.oe_teaser - - image.style.oe_theme_list_item_2x + - image.style.oe_theme_ratio_3_2_medium - node.type.oe_news module: - datetime - - oe_theme_helper + - media - text - user id: node.oe_news.teaser @@ -30,12 +30,13 @@ content: settings: { } third_party_settings: { } oe_news_featured_media: - type: oe_theme_helper_media_thumbnail_url + type: media_thumbnail weight: 2 region: content label: hidden settings: - image_style: oe_theme_list_item_2x + image_style: oe_theme_ratio_3_2_medium + image_link: '' third_party_settings: { } oe_publication_date: type: datetime_default diff --git a/modules/oe_theme_content_project/config/overrides/core.entity_view_display.node.oe_project.teaser.yml b/modules/oe_theme_content_project/config/overrides/core.entity_view_display.node.oe_project.teaser.yml index ecf2f0221..7a9389c29 100644 --- a/modules/oe_theme_content_project/config/overrides/core.entity_view_display.node.oe_project.teaser.yml +++ b/modules/oe_theme_content_project/config/overrides/core.entity_view_display.node.oe_project.teaser.yml @@ -24,7 +24,7 @@ dependencies: - field.field.node.oe_project.oe_subject - field.field.node.oe_project.oe_summary - field.field.node.oe_project.oe_teaser - - image.style.oe_theme_list_item_2x + - image.style.oe_theme_ratio_3_2_medium - node.type.oe_project module: - field_group @@ -51,12 +51,13 @@ bundle: oe_project mode: teaser content: oe_featured_media: - type: oe_theme_helper_featured_media_thumbnail_url_formatter + type: oe_theme_helper_featured_media_thumbnail_formatter weight: 2 region: content label: above settings: - image_style: oe_theme_list_item_2x + image_style: oe_theme_ratio_3_2_medium + image_link: '' third_party_settings: { } oe_project_locations: type: oe_theme_helper_address_inline diff --git a/templates/content/node--oe-news--teaser.html.twig b/templates/content/node--oe-news--teaser.html.twig index bcb479e1d..441cecef2 100644 --- a/templates/content/node--oe-news--teaser.html.twig +++ b/templates/content/node--oe-news--teaser.html.twig @@ -4,7 +4,6 @@ * Theme override to display a node of bundle news in the teaser view mode. */ #} -{% set image_url = content.oe_news_featured_media|field_value|render %} {{ pattern('list_item', { 'variant': 'thumbnail_primary', 'url': url, @@ -13,5 +12,5 @@ content.oe_publication_date|field_value ], 'detail': content.oe_teaser|field_value, - 'image': image_url ? { 'src': image_url } + 'image': content.oe_news_featured_media|field_value }) }} diff --git a/templates/content/node--oe-project--teaser.html.twig b/templates/content/node--oe-project--teaser.html.twig index 614635c89..ae0a02d8c 100644 --- a/templates/content/node--oe-project--teaser.html.twig +++ b/templates/content/node--oe-project--teaser.html.twig @@ -4,7 +4,6 @@ * Theme override to display a node of bundle project in the teaser view mode. */ #} -{% set image_url = content.oe_featured_media|field_value|render %} {{ pattern('list_item', { 'variant': 'thumbnail_secondary', 'url': url, @@ -13,5 +12,5 @@ 'additional_information': [ content.group_details, ], - 'image': image_url ? { 'src': image_url } + 'image': content.oe_featured_media|field_value }) }} From 611ed0c43cf81d58f8c2d14828806e4503f685a0 Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sat, 12 Sep 2020 13:29:50 +0200 Subject: [PATCH 06/17] EWPP-249: Add thumbnail formatter to featured media field type. --- .../FeaturedMediaThumbnailFormatter.php | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/FeaturedMediaThumbnailFormatter.php diff --git a/modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/FeaturedMediaThumbnailFormatter.php b/modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/FeaturedMediaThumbnailFormatter.php new file mode 100644 index 000000000..f3e5848f4 --- /dev/null +++ b/modules/oe_theme_helper/src/Plugin/Field/FieldFormatter/FeaturedMediaThumbnailFormatter.php @@ -0,0 +1,23 @@ + Date: Sat, 12 Sep 2020 13:30:10 +0200 Subject: [PATCH 07/17] EWPP-249: Add formatter theme suggestions. --- oe_theme.theme | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/oe_theme.theme b/oe_theme.theme index 596e16ebf..dbb584e52 100644 --- a/oe_theme.theme +++ b/oe_theme.theme @@ -152,6 +152,11 @@ function oe_theme_theme_suggestions_field_alter(array &$suggestions, array $vari $suggestions[] = 'field__' . $element['#entity_type'] . '__' . $element['#field_name'] . '__' . $element['#view_mode']; $suggestions[] = 'field__' . $element['#entity_type'] . '__' . $element['#field_name'] . '__' . $element['#bundle'] . '__' . $element['#view_mode']; } + + // Generate formatter-specific suggestions. + foreach ($suggestions as $key => $suggestion) { + $suggestions[] = $suggestion . '__formatter__' . $element['#formatter']; + } } /** From 85030c73c3a5447e5e0a1ca41824168086610c66 Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sat, 12 Sep 2020 16:51:03 +0200 Subject: [PATCH 08/17] EWPP-249: Re-arrange list item templates and deprecate obsolete list item pattern variants. --- sass/components/_list_items.scss | 54 +++++++++++-------- .../list_item/list_item.ui_patterns.yml | 10 ++-- .../pattern-list-item--variant-date.html.twig | 11 +++- ...ern-list-item--variant-highlight.html.twig | 11 +--- ...rn-list-item--variant-navigation.html.twig | 6 +-- ...-item--variant-thumbnail-primary.html.twig | 36 +++++++++---- ...tem--variant-thumbnail-secondary.html.twig | 29 ++++++---- .../list_item/pattern-list-item.html.twig | 21 ++------ 8 files changed, 98 insertions(+), 80 deletions(-) diff --git a/sass/components/_list_items.scss b/sass/components/_list_items.scss index 676037a07..7a6112440 100644 --- a/sass/components/_list_items.scss +++ b/sass/components/_list_items.scss @@ -1,4 +1,3 @@ -.list-item-date, .list-item { margin-bottom: $ecl-spacing-l; &__title { @@ -6,21 +5,6 @@ margin-top: 0; margin-bottom: $ecl-spacing-xs; } - &__image { - @extend .ecl-media-container; - margin-bottom: $ecl-spacing-m; - background-color: transparent; - img { - @extend .ecl-media-container__media; - } - @include ecl-media-breakpoint-up("md") { - width: 180px; - margin-bottom: 0; - } - @include ecl-media-breakpoint-up("lg") { - width: 220px; - } - } &__meta { @extend .ecl-u-type-s; @extend .ecl-u-type-color-grey-75; @@ -28,28 +12,52 @@ text-transform: uppercase; } &__description { - @extend .ecl-u-type-paragraph; @extend .ecl-u-type-color-grey-100; + font: $ecl-font-prolonged-m; p { margin: 0; } } } .list-item { - &__image__before { + &__image { + @extend .ecl-media-container; + margin-bottom: $ecl-spacing-m; + background-color: transparent; + img { + @extend .ecl-media-container__media; + } @include ecl-media-breakpoint-up("md") { - margin-right: $ecl-spacing-l; + width: 180px; + margin-bottom: 0; } @include ecl-media-breakpoint-up("lg") { - margin-right: $ecl-spacing-xl; + width: 220px; + } + &__before { + @include ecl-media-breakpoint-up("md") { + margin-right: $ecl-spacing-l; + } + @include ecl-media-breakpoint-up("lg") { + margin-right: $ecl-spacing-l; + } + } + &__after { + @include ecl-media-breakpoint-up("md") { + margin-left: $ecl-spacing-l; + } + @include ecl-media-breakpoint-up("lg") { + margin-left: $ecl-spacing-l; + } } } - &__image__after { + &__date { @include ecl-media-breakpoint-up("md") { - margin-left: $ecl-spacing-l; + margin-right: $ecl-spacing-l; } @include ecl-media-breakpoint-up("lg") { - margin-left: $ecl-spacing-xl; + margin-right: $ecl-spacing-l; } } } + diff --git a/templates/patterns/list_item/list_item.ui_patterns.yml b/templates/patterns/list_item/list_item.ui_patterns.yml index 2a7866222..1c2ca3fe6 100644 --- a/templates/patterns/list_item/list_item.ui_patterns.yml +++ b/templates/patterns/list_item/list_item.ui_patterns.yml @@ -9,11 +9,11 @@ list_item: label: "List item: block" description: "Block list item, contains a linked title and standfirst." highlight: - label: "List item: highlight" - description: "Highlight list item, contains a primary image and a linked title." + label: "List item: highlight (deprecated)" + description: "Deprecated pattern variant. Please use 'featured_item' pattern instead." navigation: - label: "List item: navigation" - description: "Navigation list item, contains a linked title and stand first." + label: "List item: navigation (deprecated)" + description: "Deprecated pattern variant. Please use 'list_item' pattern, variant 'default'." thumbnail_primary: label: "List item: thumbnail " description: "Thumbnail list item, contains a primary image, metadata information and a linked title." @@ -42,7 +42,7 @@ list_item: type: "text" label: "Title" description: "List item title" - preview: "Citizens' Dialogue in Kraków with Commissioner Elżbieta Bieńkowska" + preview: "Nec vero alia sunt quaerenda contra Carneadeam illam sententiam is es profecto tu quidem vestra sic cogit" detail: type: "text" label: "Detail" diff --git a/templates/patterns/list_item/pattern-list-item--variant-date.html.twig b/templates/patterns/list_item/pattern-list-item--variant-date.html.twig index 633063ee2..ae9173074 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-date.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-date.html.twig @@ -12,8 +12,10 @@ - "additional_information" (array): Additional information to be displayed right below the 'Detail' field. #} {% extends '@oe_theme/patterns/list_item/pattern-list-item.html.twig' %} -{% block secondary %} -
+{# Main content block. #} +{% block content %} +
+
{% include '@oe_theme/compositions/ec-component-date-block/date-block.html.twig' with { variant: variant|replace({'_':'-'})|to_date_status, week_day: date.week_day, @@ -24,4 +26,9 @@ year: date.year } only %}
+ {# Primary block. #} + {% block primary %} + {{ parent() }} + {% endblock %} +
{% endblock %} diff --git a/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig b/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig index 5e3677826..33d7f484c 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-highlight.html.twig @@ -4,13 +4,4 @@ * Default implementation for the highlight list item component. */ #} -{% include '@ecl-twig/card' with { - card: { - title: { - label: title, - path: url, - type: "standalone" - }, - image: image - } -} only %} +{# Deprecated pattern variant. Please use 'featured_item' pattern instead. #} diff --git a/templates/patterns/list_item/pattern-list-item--variant-navigation.html.twig b/templates/patterns/list_item/pattern-list-item--variant-navigation.html.twig index b1a005a4f..d76913555 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-navigation.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-navigation.html.twig @@ -4,8 +4,4 @@ * Default implementation for the navigation list item component. */ #} -{% include '@oe_theme/patterns/list_item/pattern-list-item.html.twig' with { - title: title, - url: url, - detail: detail, -} only %} +{# Deprecated pattern variant. Please use 'list_item' pattern, variant 'default'. #} diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig index 8bbd1e4a0..bfb9264a2 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig @@ -4,12 +4,30 @@ * Default theme implementation for a ECL thumbnail list item component. */ #} -{% include '@oe_theme/patterns/list_item/pattern-list-item.html.twig' with { - title: title, - url: url, - detail: detail, - image: image, - image_position: 'before', - additional_information: additional_information, - meta: meta -} only %} +{% extends '@oe_theme/patterns/list_item/pattern-list-item.html.twig' %} +{# In order to keep backward compatibility, we convert the deprecated input hash into an image tag. #} +{% if image.src is not empty %} + {% set image %} + ' + img.alt + ' + {% endset %} +{% endif %} + +{# Main content block. #} +{% block content %} +
+ {# Seconday block. #} + {% block secondary %} +
+ {% if url %} + {{ image }} + {% else %} + {{ image }} + {% endif %} +
+ {% endblock %} + {# Primary block. #} + {% block primary %} + {{ parent() }} + {% endblock %} +
+{% endblock %} diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig index d711c90f6..c77840970 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig @@ -4,12 +4,23 @@ * Default theme implementation for a ECL thumbnail list item component. */ #} -{% include '@oe_theme/patterns/list_item/pattern-list-item.html.twig' with { - title: title, - url: url, - detail: detail, - image: image, - image_position: 'after', - additional_information: additional_information, - meta: meta -} only %} +{% extends '@oe_theme/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig' %} +{# Main content block. #} +{% block content %} +
+ {# Seconday block. #} + {% block secondary %} +
+ {% if url %} + {{ image }} + {% else %} + {{ image }} + {% endif %} +
+ {% endblock %} + {# Primary block. #} + {% block primary %} + {{ parent() }} + {% endblock %} +
+{% endblock %} diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index 2bae93322..2e048ec49 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -13,24 +13,10 @@ - "length" (int) (default: 0): Max length of detail field. - "additional_information" (array): Additional information to be displayed right below the 'Detail' field. #} -{# In order to keep the pattern's backward compatibility, we conver the deprecated input hash into an image tag. #} -{% if image.src is not empty %} - {% set image %} - ' + img.alt + ' - {% endset %} -{% endif %} +{# Main content block. #} +{% block content %}
- {# Seconday information block. #} - {% block secondary %} -
- {% if url %} - {{ image }} - {% else %} - {{ image }} - {% endif %} -
- {% endblock %} - {# Primary information block. #} + {# Primary block. #} {% block primary %}
{% if meta is not empty %} @@ -54,4 +40,5 @@
{% endblock %}
+{% endblock %} {% endspaceless %} From cfb5ff91b960a7206d8800b37a283048b9d47f6a Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sat, 12 Sep 2020 17:16:10 +0200 Subject: [PATCH 09/17] EWPP-249: Fix tests. --- .../list_item/pattern-list-item.html.twig | 2 +- tests/Kernel/fixtures/rendering.yml | 304 ++++++++---------- tests/PatternAssertions/ListItemAssert.php | 15 +- 3 files changed, 142 insertions(+), 179 deletions(-) diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index 2e048ec49..694e92dd4 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -24,7 +24,7 @@ {% endif %}

{% if url %} - {{ title }} + {{ title }} {% else %} {{ title }} {% endif %} diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml index 35e1bb11d..90e7f086a 100644 --- a/tests/Kernel/fixtures/rendering.yml +++ b/tests/Kernel/fixtures/rendering.yml @@ -708,14 +708,14 @@ - "Meta 2" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div[role="img"].ecl-u-d-lg-block': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': "Item text" + 'article.list-item div.list-item__meta': "Meta 1 | Meta 2" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': "Item text" - array: '#type': pattern '#id': list_item @@ -728,14 +728,14 @@ - "Meta 1" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div[role="img"].ecl-u-d-lg-block': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': "Item..." + 'article.list-item div.list-item__meta': "Meta 1" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': "Item..." - array: '#type': pattern '#id': list_item @@ -754,19 +754,19 @@ body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 - 'div.ecl-content-item__additional_information .ecl-description-list.ecl-description-list--horizontal': 1 - 'div.ecl-content-item__additional_information .ecl-description-list__term': 2 - 'div.ecl-content-item__additional_information .ecl-description-list__definition': 2 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div[role="img"].ecl-u-d-lg-block': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 + 'div.list-item__additional_information .ecl-description-list.ecl-description-list--horizontal': 1 + 'div.list-item__additional_information .ecl-description-list__term': 2 + 'div.list-item__additional_information .ecl-description-list__definition': 2 equals: - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(1)': "When" - 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November" - 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(3)': "Where" - 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'div.list-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(1)': "When" + 'div.list-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November" + 'div.list-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(3)': "Where" + 'div.list-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium" - array: '#type': pattern '#id': list_item @@ -781,14 +781,14 @@ - "Meta 2" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div[role="img"].ecl-u-d-lg-block': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': "
This is the detail. It...
" + 'article.list-item div.list-item__meta': "Meta 1 | Meta 2" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': "
This is the detail. It...
" - array: '#type': pattern '#id': list_item @@ -803,14 +803,14 @@ - "Meta 2" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div[role="img"].ecl-u-d-lg-block': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': '
This is the detail with a link...
' + 'article.list-item div.list-item__meta': "Meta 1 | Meta 2" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': '
This is the detail with a link...
' - array: '#type': pattern '#id': list_item @@ -825,14 +825,14 @@ - "Meta 2" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div[role="img"].ecl-u-d-lg-block': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': '<div>This is the detail...' + 'article.list-item div.list-item__meta': "Meta 1 | Meta 2" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': '<div>This is the detail...' - array: '#type': pattern '#id': list_item @@ -849,14 +849,14 @@ - "Meta 2" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div[role="img"].ecl-u-d-lg-block': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': '

<div>This is the detail...

' + 'article.list-item div.list-item__meta': "Meta 1 | Meta 2" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': '

<div>This is the detail...

' - array: '#type': pattern '#id': list_item @@ -873,15 +873,15 @@ - "Meta 2" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div[role="img"].ecl-u-d-lg-block': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 'article > div .ecl-description-list': 0 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': '

<div>This is the detail...

' + 'article.list-item div.list-item__meta': "Meta 1 | Meta 2" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': '

<div>This is the detail...

' - array: '#type': pattern '#id': list_item @@ -898,14 +898,14 @@ - "Meta 2" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[aria-label="Alternate text for primary image"].ecl-u-d-lg-block': 1 - 'article.ecl-content-item div.ecl-content-item__image__before': 1 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div.list-item__image img[alt="Alternate text for primary image"]': 1 + 'article.list-item div.list-item__image__before': 1 + 'article.list-item div.list-item__image__after': 0 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': "Item text" + 'article.list-item div.list-item__meta': "Meta 1 | Meta 2" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': "Item text" - array: '#type': pattern '#id': list_item @@ -922,33 +922,14 @@ - "Meta 2" assertions: count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[aria-label="Alternate text for secondary image"].ecl-u-d-lg-block': 1 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 1 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div.list-item__image img[alt="Alternate text for secondary image"]': 1 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 1 equals: - 'article.ecl-content-item div.ecl-content-item__meta': "Meta 1 | Meta 2" - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': "Item text" -- array: - '#type': pattern - '#id': list_item - '#variant': "highlight" - '#fields': - title: "Item title" - url: "http://example.com" - image: - src: "http://via.placeholder.com/300x300" - alt: "Alternate text for secondary image" - assertions: - count: - article.ecl-card header.ecl-card__header h1.ecl-card__title a.ecl-link--standalone[href="http://example.com"]: 1 - article.ecl-card header.ecl-card__header div.ecl-card__image[aria-label="Alternate text for secondary image"]: 1 - article.ecl-card header.ecl-card__header div.ecl-card__image[style="background-image:url('http://via.placeholder.com/300x300')"]: 1 - article.ecl-card header.ecl-card__header div.ecl-card__meta: 0 - article.ecl-card div.ecl-card__body div.ecl-card__description: 0 - equals: - article.ecl-card header.ecl-card__header h1.ecl-card__title .ecl-link: "Item title" + 'article.list-item div.list-item__meta': "Meta 1 | Meta 2" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': "Item text" - array: '#type': pattern '#id': list_item @@ -984,16 +965,16 @@ - "6 July 2015" assertions: count: - 'article.ecl-content-item-date div.ecl-content-item-date__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item-date div.ecl-content-item-date__date': 1 - 'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month[title="July"]': 1 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div.list-item__date': 1 + 'article.list-item div.list-item__date abbr.ecl-date-block__month[title="July"]': 1 equals: - 'article.ecl-content-item-date div.ecl-content-item-date__meta': "News article | 6 July 2015" - 'article.ecl-content-item-date div.ecl-content-item-date__title .ecl-link': "Item title" - 'article.ecl-content-item-date div.ecl-content-item-date__description': "Item text" - 'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__day': '14' - 'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month': 'Jul' - 'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__year': '2021' + 'article.list-item div.list-item__meta': "News article | 6 July 2015" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': "Item text" + 'article.list-item div.list-item__date span.ecl-date-block__day': '14' + 'article.list-item div.list-item__date abbr.ecl-date-block__month': 'Jul' + 'article.list-item div.list-item__date span.ecl-date-block__year': '2021' - array: '#type': pattern '#id': list_item @@ -1023,23 +1004,23 @@ body: "The EGG, Rue Barra 175, 1070 Brussels, Belgium" assertions: count: - 'article.ecl-content-item-date div.ecl-content-item-date__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item-date div.ecl-content-item-date__date': 1 - 'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month[title="July"]': 1 - 'div.ecl-content-item__additional_information .ecl-description-list.ecl-description-list--horizontal': 1 - 'div.ecl-content-item__additional_information .ecl-description-list__term': 2 - 'div.ecl-content-item__additional_information .ecl-description-list__definition': 2 + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div.list-item__date': 1 + 'article.list-item div.list-item__date abbr.ecl-date-block__month[title="July"]': 1 + 'div.list-item__additional_information .ecl-description-list.ecl-description-list--horizontal': 1 + 'div.list-item__additional_information .ecl-description-list__term': 2 + 'div.list-item__additional_information .ecl-description-list__definition': 2 equals: - 'article.ecl-content-item-date div.ecl-content-item-date__meta': "News article | 6 July 2015" - 'article.ecl-content-item-date div.ecl-content-item-date__title .ecl-link': "Item title" - 'article.ecl-content-item-date div.ecl-content-item-date__description': "Item text" - 'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__day': '14' - 'article.ecl-content-item-date div.ecl-content-item-date__date abbr.ecl-date-block__month': 'Jul' - 'article.ecl-content-item-date div.ecl-content-item-date__date span.ecl-date-block__year': '2021' - 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(1)': "When" - 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November" - 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(3)': "Where" - 'div.ecl-content-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium" + 'article.list-item div.list-item__meta': "News article | 6 July 2015" + 'article.list-item h3.list-item__title .ecl-link': "Item title" + 'article.list-item div.list-item__description': "Item text" + 'article.list-item div.list-item__date span.ecl-date-block__day': '14' + 'article.list-item div.list-item__date abbr.ecl-date-block__month': 'Jul' + 'article.list-item div.list-item__date span.ecl-date-block__year': '2021' + 'div.list-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(1)': "When" + 'div.list-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(2)': "Thursday 15 November, 08:00 AM to Friday 16 November" + 'div.list-item__additional_information .ecl-description-list .ecl-description-list__term:nth-child(3)': "Where" + 'div.list-item__additional_information .ecl-description-list .ecl-description-list__definition:nth-child(4)': "The EGG, Rue Barra 175, 1070 Brussels, Belgium" - array: '#type': pattern '#id': list_item @@ -1082,23 +1063,6 @@ assertions: count: 'time.ecl-date-block.ecl-date-block--past': 1 -- array: - '#type': pattern - '#id': list_item - '#variant': "navigation" - '#fields': - title: "Item title" - url: "http://example.com" - detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs." - assertions: - count: - 'article.ecl-content-item div.ecl-content-item__title a.ecl-link[href="http://example.com"]': 1 - 'article.ecl-content-item div[role="img"].ecl-u-d-lg-block': 0 - 'article.ecl-content-item div.ecl-content-item__image__before': 0 - 'article.ecl-content-item div.ecl-content-item__image__after': 0 - equals: - 'article.ecl-content-item div.ecl-content-item__title .ecl-link': "Item title" - 'article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." - array: '#type': pattern '#id': list_item_block_one_column @@ -1120,15 +1084,15 @@ 'div.ecl-content-item-block__item.ecl-col-12': 1 'div.ecl-content-item-block__item.ecl-col-md-6': 0 'div.ecl-content-item-block__item.ecl-col-md-4': 0 - 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1 - 'div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item': 0 - 'div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item': 0 + 'div.ecl-content-item-block__item.ecl-col-12 article.list-item': 1 + 'div.ecl-content-item-block__item.ecl-col-md-6 article.list-item': 0 + 'div.ecl-content-item-block__item.ecl-col-md-4 article.list-item': 0 'div.ecl-content-item-block__button': 1 'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 1 equals: 'div.ecl-content-item-block__title h3.ecl-u-type-heading-3': "Block title" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." + 'div.ecl-content-item-block__item:nth-child(1) article.list-item h3.list-item__title': "Business, Economy, Euro" + 'div.ecl-content-item-block__item:nth-child(1) article.list-item div.list-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." 'a.ecl-link': "View all" - array: '#type': pattern @@ -1150,14 +1114,14 @@ 'div.ecl-content-item-block__item.ecl-col-12': 1 'div.ecl-content-item-block__item.ecl-col-md-6': 0 'div.ecl-content-item-block__item.ecl-col-md-4': 0 - 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1 - 'div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item': 0 - 'div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item': 0 + 'div.ecl-content-item-block__item.ecl-col-12 article.list-item': 1 + 'div.ecl-content-item-block__item.ecl-col-md-6 article.list-item': 0 + 'div.ecl-content-item-block__item.ecl-col-md-4 article.list-item': 0 'div.ecl-content-item-block__button': 1 'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 1 equals: - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." + 'div.ecl-content-item-block__item:nth-child(1) article.list-item h3.list-item__title': "Business, Economy, Euro" + 'div.ecl-content-item-block__item:nth-child(1) article.list-item div.list-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." 'a.ecl-link': "View all" - array: '#type': pattern @@ -1178,15 +1142,15 @@ 'div.ecl-content-item-block__item.ecl-col-12': 1 'div.ecl-content-item-block__item.ecl-col-md-6': 0 'div.ecl-content-item-block__item.ecl-col-md-4': 0 - 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1 - 'div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item': 0 - 'div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item': 0 + 'div.ecl-content-item-block__item.ecl-col-12 article.list-item': 1 + 'div.ecl-content-item-block__item.ecl-col-md-6 article.list-item': 0 + 'div.ecl-content-item-block__item.ecl-col-md-4 article.list-item': 0 'div.ecl-content-item-block__button': 0 'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0 equals: 'div.ecl-content-item-block__title h3.ecl-u-type-heading-3': "Block title" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." + 'div.ecl-content-item-block__item:nth-child(1) article.list-item h3.list-item__title': "Business, Economy, Euro" + 'div.ecl-content-item-block__item:nth-child(1) article.list-item div.list-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." - array: '#type': pattern '#id': list_item_block_one_column @@ -1205,14 +1169,14 @@ 'div.ecl-content-item-block__item.ecl-col-12': 1 'div.ecl-content-item-block__item.ecl-col-md-6': 0 'div.ecl-content-item-block__item.ecl-col-md-4': 0 - 'div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item': 1 - 'div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item': 0 - 'div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item': 0 + 'div.ecl-content-item-block__item.ecl-col-12 article.list-item': 1 + 'div.ecl-content-item-block__item.ecl-col-md-6 article.list-item': 0 + 'div.ecl-content-item-block__item.ecl-col-md-4 article.list-item': 0 'div.ecl-content-item-block__button': 0 'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0 equals: - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "Business, Economy, Euro" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." + 'div.ecl-content-item-block__item:nth-child(1) article.list-item h3.list-item__title': "Business, Economy, Euro" + 'div.ecl-content-item-block__item:nth-child(1) article.list-item div.list-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." - array: '#type': pattern '#id': list_item_block_two_columns @@ -1235,15 +1199,15 @@ 'div.ecl-content-item-block__item': 2 'div.ecl-content-item-block__item.ecl-col-md-6': 2 'div.ecl-content-item-block__item.ecl-col-md-4': 0 - 'div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item': 2 - 'div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item': 0 + 'div.ecl-content-item-block__item.ecl-col-md-6 article.list-item': 2 + 'div.ecl-content-item-block__item.ecl-col-md-4 article.list-item': 0 'div.ecl-content-item-block__button': 0 'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0 equals: - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "List item 1" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "Description for list item 1." - 'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__title': "List item 2" - 'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2." + 'div.ecl-content-item-block__item:nth-child(1) article.list-item h3.list-item__title': "List item 1" + 'div.ecl-content-item-block__item:nth-child(1) article.list-item div.list-item__description': "Description for list item 1." + 'div.ecl-content-item-block__item:nth-child(2) article.list-item h3.list-item__title': "List item 2" + 'div.ecl-content-item-block__item:nth-child(2) article.list-item div.list-item__description': "Description for list item 2." - array: '#type': pattern '#id': list_item_block_three_columns @@ -1271,17 +1235,17 @@ 'div.ecl-content-item-block__item': 3 'div.ecl-content-item-block__item.ecl-col-md-6': 0 'div.ecl-content-item-block__item.ecl-col-md-4': 3 - 'div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item': 0 - 'div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item': 3 + 'div.ecl-content-item-block__item.ecl-col-md-6 article.list-item': 0 + 'div.ecl-content-item-block__item.ecl-col-md-4 article.list-item': 3 'div.ecl-content-item-block__button': 0 'div.ecl-content-item-block__button a.ecl-link[href="http://example.com"]': 0 equals: - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__title': "List item 1" - 'div.ecl-content-item-block__item:nth-child(1) article.ecl-content-item div.ecl-content-item__description': "Description for list item 1." - 'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__title': "List item 2" - 'div.ecl-content-item-block__item:nth-child(2) article.ecl-content-item div.ecl-content-item__description': "Description for list item 2." - 'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__title': "List item 3" - 'div.ecl-content-item-block__item:nth-child(3) article.ecl-content-item div.ecl-content-item__description': "Description for list item 3." + 'div.ecl-content-item-block__item:nth-child(1) article.list-item h3.list-item__title': "List item 1" + 'div.ecl-content-item-block__item:nth-child(1) article.list-item div.list-item__description': "Description for list item 1." + 'div.ecl-content-item-block__item:nth-child(2) article.list-item h3.list-item__title': "List item 2" + 'div.ecl-content-item-block__item:nth-child(2) article.list-item div.list-item__description': "Description for list item 2." + 'div.ecl-content-item-block__item:nth-child(3) article.list-item h3.list-item__title': "List item 3" + 'div.ecl-content-item-block__item:nth-child(3) article.list-item div.list-item__description': "Description for list item 3." - array: '#type': pattern '#id': list_item_block_four_columns diff --git a/tests/PatternAssertions/ListItemAssert.php b/tests/PatternAssertions/ListItemAssert.php index fbf69e152..a2bcc1df0 100644 --- a/tests/PatternAssertions/ListItemAssert.php +++ b/tests/PatternAssertions/ListItemAssert.php @@ -94,11 +94,11 @@ protected function getPatternVariant(string $html): string { } // Check whether it is a primary or secondaty thumbnail. - $primary_thumbnail = $crawler->filter('div.ecl-content-item__image__before'); + $primary_thumbnail = $crawler->filter('div.list-item__image__before'); if ($primary_thumbnail->count()) { return 'thumbnail_primary'; } - $primary_secondary = $crawler->filter('div.ecl-content-item__image__after'); + $primary_secondary = $crawler->filter('div.list-item__image__after'); if ($primary_secondary->count()) { return 'thumbnail_secondary'; } @@ -134,7 +134,7 @@ protected function assertDate($expected_date, string $variant, Crawler $crawler) $variant_class = 'ecl-date-block--canceled'; break; } - $date_block_selector = 'div.ecl-content-item-date__date time.' . $variant_class; + $date_block_selector = 'div.list-item__date time.' . $variant_class; if (!$expected_date) { $this->assertElementNotExists($date_block_selector, $crawler); return; @@ -159,7 +159,7 @@ protected function assertDate($expected_date, string $variant, Crawler $crawler) * The DomCrawler where to check the element. */ protected function assertImage($expected_image, string $variant, Crawler $crawler): void { - $variant_class = $variant === 'thumbnail_primary' ? 'ecl-content-item__image__before' : 'ecl-content-item__image__after'; + $variant_class = $variant === 'thumbnail_primary' ? 'list-item__image__before' : 'list-item__image__after'; $image_div_selector = 'div.' . $variant_class; if (!$expected_image) { $this->assertElementNotExists($image_div_selector, $crawler); @@ -203,10 +203,9 @@ protected function assertDescription($expected, string $variant, Crawler $crawle * The base selector for the variant. */ protected function getBaseItemClass(string $variant): string { - if (strpos($variant, 'date') !== FALSE) { - return '.ecl-content-item-date'; - } - return '.ecl-content-item'; + // This method will be expanded as soon as this assert class will cover + // other variants, such as 'block'. + return '.list-item'; } } From 3dfce62b3522d2d3bfa41a3c1aacad84a8f43239 Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sun, 13 Sep 2020 11:44:48 +0200 Subject: [PATCH 10/17] EWPP-249: Fix project tests. --- behat.yml.dist | 4 ++-- .../config/schema/oe_theme_helper.schema.yml | 3 +++ .../field--node--oe-project-calls--oe-project.html.twig | 5 +---- ...de--oe-project-funding-programme--oe-project.html.twig | 5 +---- ...pattern-list-item--variant-thumbnail-primary.html.twig | 2 +- templates/patterns/list_item/pattern-list-item.html.twig | 2 +- tests/Functional/ContentProjectRenderTest.php | 8 ++++---- 7 files changed, 13 insertions(+), 16 deletions(-) diff --git a/behat.yml.dist b/behat.yml.dist index 11a0d5946..b62099206 100644 --- a/behat.yml.dist +++ b/behat.yml.dist @@ -28,8 +28,8 @@ default: language switcher: ".ecl-language-list" language switcher link: ".ecl-site-header__selector" language switcher links: ".ecl-language-list--overlay" - list item: ".ecl-content-item" - list item image: ".ecl-content-item__image__before" + list item: ".list-item" + list item image: ".list-item__image__before" logo: ".ecl-site-header__logo-image" media container: ".ecl-media-container" page header: ".ecl-page-header" diff --git a/modules/oe_theme_helper/config/schema/oe_theme_helper.schema.yml b/modules/oe_theme_helper/config/schema/oe_theme_helper.schema.yml index 8bc6c0f4a..3ff9174ce 100644 --- a/modules/oe_theme_helper/config/schema/oe_theme_helper.schema.yml +++ b/modules/oe_theme_helper/config/schema/oe_theme_helper.schema.yml @@ -71,3 +71,6 @@ field.formatter.settings.oe_theme_helper_featured_media_thumbnail_url_formatter: field.formatter.settings.oe_theme_helper_social_media_icons_list_formatter: type: field.formatter.settings.link label: 'Social media icons list formatter settings' + +field.formatter.settings.oe_theme_helper_featured_media_thumbnail_formatter: + type: field.formatter.settings.image diff --git a/templates/field/field--node--oe-project-calls--oe-project.html.twig b/templates/field/field--node--oe-project-calls--oe-project.html.twig index d412f2def..c1e6d218c 100644 --- a/templates/field/field--node--oe-project-calls--oe-project.html.twig +++ b/templates/field/field--node--oe-project-calls--oe-project.html.twig @@ -6,14 +6,11 @@ * @see ./core/themes/stable/templates/field/field.html.twig */ #} -{% set uppercase_label %} - {{ label }} -{% endset %}
    {% for item in items %}
  • {{ pattern('list_item', { - meta: [ uppercase_label ], + meta: [ label ], url: item.content['#url'], title: item.content['#title'] }) }} diff --git a/templates/field/field--node--oe-project-funding-programme--oe-project.html.twig b/templates/field/field--node--oe-project-funding-programme--oe-project.html.twig index 9d46064f1..1725ecd85 100644 --- a/templates/field/field--node--oe-project-funding-programme--oe-project.html.twig +++ b/templates/field/field--node--oe-project-funding-programme--oe-project.html.twig @@ -6,14 +6,11 @@ * @see ./core/themes/stable/templates/field/field.html.twig */ #} -{% set uppercase_label %} - {{ label }} -{% endset %}
      {% for item in items %}
    • {{ pattern('list_item', { - meta: [ uppercase_label ], + meta: [ label ], title: item.content }) }}
      • diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig index bfb9264a2..0791f4165 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig @@ -8,7 +8,7 @@ {# In order to keep backward compatibility, we convert the deprecated input hash into an image tag. #} {% if image.src is not empty %} {% set image %} - ' + img.alt + ' + ' + image.alt + ' {% endset %} {% endif %} diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index 694e92dd4..df9a0b247 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -24,7 +24,7 @@ {% endif %}

      {% if url %} - {{ title }} + {{ title }} {% else %} {{ title }} {% endif %} diff --git a/tests/Functional/ContentProjectRenderTest.php b/tests/Functional/ContentProjectRenderTest.php index 5ac392b6f..92ac766f7 100644 --- a/tests/Functional/ContentProjectRenderTest.php +++ b/tests/Functional/ContentProjectRenderTest.php @@ -256,16 +256,16 @@ public function testProjectRendering(): void { $this->assertContains('Funding', $title->getText()); $item = $project_funding->findAll('css', '.ecl-unordered-list__item'); $this->assertCount(3, $item); - $meta = $item[0]->find('css', '.ecl-content-item__meta span.ecl-u-type-uppercase'); + $meta = $item[0]->find('css', '.list-item__meta'); $this->assertEquals('Funding programme', $meta->getText()); - $title = $item[0]->find('css', '.ecl-content-item__title'); + $title = $item[0]->find('css', '.list-item__title'); $this->assertContains('Anti Fraud Information System (AFIS)', $title->getText()); - $meta = $item[1]->find('css', '.ecl-content-item__meta span.ecl-u-type-uppercase'); + $meta = $item[1]->find('css', '.list-item__meta'); $this->assertEquals('Call for proposals', $meta->getText()); $link = $item[1]->find('css', '.ecl-link'); $this->assertContains('Test call for proposal', $link->getText()); $this->assertContains('http://proposal-call.com', $link->getAttribute('href')); - $meta = $item[2]->find('css', '.ecl-content-item__meta span.ecl-u-type-uppercase'); + $meta = $item[2]->find('css', '.list-item__meta'); $this->assertEquals('Call for proposals', $meta->getText()); $link = $item[2]->find('css', '.ecl-link'); $this->assertContains('http://proposal-call-no-title.com', $link->getText()); From 254ba83054fccac41df4f7cbd99a2d2332a8c110 Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sun, 13 Sep 2020 12:46:44 +0200 Subject: [PATCH 11/17] EWPP-249: Fix list item paragraph rendering. --- .../paragraph--oe-list-item.html.twig | 37 ++++-- ...-item--variant-thumbnail-primary.html.twig | 4 +- ...tem--variant-thumbnail-secondary.html.twig | 2 +- tests/Kernel/Paragraphs/ParagraphsTest.php | 114 +++++++++--------- 4 files changed, 87 insertions(+), 70 deletions(-) diff --git a/templates/paragraphs/paragraph--oe-list-item.html.twig b/templates/paragraphs/paragraph--oe-list-item.html.twig index f69e161b8..f98fabb26 100644 --- a/templates/paragraphs/paragraph--oe-list-item.html.twig +++ b/templates/paragraphs/paragraph--oe-list-item.html.twig @@ -6,13 +6,30 @@ * @see ./modules/contrib/paragraphs/templates/paragraph.html.twig */ #} -{{ pattern('list_item', { - 'variant': variant, - 'url': url, - 'title': content.field_oe_title, - 'detail': content.field_oe_text_long, - 'meta': meta, - 'date': date, - 'image': image, - 'secondary_image': image -}) }} +{% if variant == 'highlight' %} + {# Use featured_item pattern as the highlight variant has been deprecated in 2.9.0 #} + {{ pattern('featured_item', { + 'variant': 'default', + 'image': image, + 'title': content.field_oe_title, + 'link': { 'href': url }, + }) }} +{% elseif variant == 'navigation' %} + {# Use list_item pattern as the navigation variant has been deprecated in 2.9.0 #} + {{ pattern('list_item', { + 'url': url, + 'title': content.field_oe_title, + 'detail': content.field_oe_text_long, + }) }} +{% else %} + {{ pattern('list_item', { + 'variant': variant, + 'url': url, + 'title': content.field_oe_title, + 'detail': content.field_oe_text_long, + 'meta': meta, + 'date': date, + 'image': image, + 'secondary_image': image + }) }} +{% endif %} diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig index 0791f4165..66d22f9c2 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig @@ -8,7 +8,7 @@ {# In order to keep backward compatibility, we convert the deprecated input hash into an image tag. #} {% if image.src is not empty %} {% set image %} - ' + image.alt + ' + {% endset %} {% endif %} @@ -19,7 +19,7 @@ {% block secondary %}
      {% if url %} - {{ image }} + {{ image }} {% else %} {{ image }} {% endif %} diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig index c77840970..03901e21c 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig @@ -12,7 +12,7 @@ {% block secondary %}
      {% if url %} - {{ image }} + {{ image }} {% else %} {{ image }} {% endif %} diff --git a/tests/Kernel/Paragraphs/ParagraphsTest.php b/tests/Kernel/Paragraphs/ParagraphsTest.php index 06b029434..566048567 100644 --- a/tests/Kernel/Paragraphs/ParagraphsTest.php +++ b/tests/Kernel/Paragraphs/ParagraphsTest.php @@ -166,20 +166,20 @@ public function testListItem(): void { $html = $this->renderParagraph($paragraph); $crawler = new Crawler($html); - $this->assertCount(1, $crawler->filter('article.ecl-content-item')); - $this->assertEquals('Item title', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__title')->text())); - $this->assertEquals('Item description', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__description')->text())); + $this->assertCount(1, $crawler->filter('article.list-item')); + $this->assertEquals('Item title', trim($crawler->filter('article.list-item h3.list-item__title')->text())); + $this->assertEquals('Item description', trim($crawler->filter('article.list-item div.list-item__description')->text())); - $link_element = $crawler->filter('article.ecl-content-item div.ecl-content-item__title a.ecl-link'); + $link_element = $crawler->filter('article.list-item h3.list-item__title a.ecl-link'); $this->assertCount(1, $link_element); $this->assertEquals('http://www.example.com/', $link_element->attr('href')); - $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__meta')->text())); + $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.list-item div.list-item__meta')->text())); // No images should be rendered in this variant. - $this->assertCount(0, $crawler->filter('article.ecl-content-item > div[role="img"]')); - $this->assertCount(0, $crawler->filter('article.ecl-content-item > div.ecl-content-item__image__before')); - $this->assertCount(0, $crawler->filter('article.ecl-content-item > div.ecl-content-item__image__after')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image img')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__before')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__after')); // No date should be rendered neither. $this->assertCount(0, $crawler->filter('time.ecl-date-block')); @@ -254,26 +254,26 @@ public function testListItem(): void { $html = $this->renderParagraph($paragraph); $crawler = new Crawler($html); - $this->assertEquals('Item title', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__title')->text())); - $this->assertEquals('Item description', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__description')->text())); + $this->assertEquals('Item title', trim($crawler->filter('article.list-item h3.list-item__title')->text())); + $this->assertEquals('Item description', trim($crawler->filter('article.list-item div.list-item__description')->text())); - $link_element = $crawler->filter('article.ecl-content-item div.ecl-content-item__title a.ecl-link'); + $link_element = $crawler->filter('article.list-item h3.list-item__title a.ecl-link'); $this->assertCount(1, $link_element); $this->assertEquals('http://www.example.com/', $link_element->attr('href')); - $this->assertCount(2, $crawler->filter('article.ecl-content-item > div')); + $this->assertCount(2, $crawler->filter('article.list-item > div')); - $this->assertCount(1, $crawler->filter('article.ecl-content-item > div.ecl-content-item__image__before')); - $this->assertCount(0, $crawler->filter('article.ecl-content-item > div.ecl-content-item__image__after')); - $image_element = $crawler->filter('article.ecl-content-item > div[role="img"].ecl-u-d-lg-block'); + $this->assertCount(1, $crawler->filter('article.list-item > div.list-item__image__before')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__after')); + $image_element = $crawler->filter('article.list-item > div.list-item__image img'); $this->assertCount(1, $image_element); $this->assertContains( file_url_transform_relative(file_create_url($image->getFileUri())), - $image_element->attr('style') + $image_element->attr('src') ); - $this->assertEquals('Druplicon', $image_element->attr('aria-label')); + $this->assertEquals('Druplicon', $image_element->attr('alt')); - $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__meta')->text())); + $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.list-item div.list-item__meta')->text())); // No date should be rendered neither. $this->assertCount(0, $crawler->filter('time.ecl-date-block')); @@ -288,26 +288,26 @@ public function testListItem(): void { $html = $this->renderParagraph($paragraph); $crawler = new Crawler($html); - $this->assertEquals('Item title', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__title')->text())); - $this->assertEquals('Item description', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__description')->text())); + $this->assertEquals('Item title', trim($crawler->filter('article.list-item h3.list-item__title')->text())); + $this->assertEquals('Item description', trim($crawler->filter('article.list-item div.list-item__description')->text())); - $link_element = $crawler->filter('article.ecl-content-item div.ecl-content-item__title a.ecl-link'); + $link_element = $crawler->filter('article.list-item h3.list-item__title a.ecl-link'); $this->assertCount(1, $link_element); $this->assertEquals('http://www.example.com/', $link_element->attr('href')); - $this->assertCount(2, $crawler->filter('article.ecl-content-item > div')); + $this->assertCount(2, $crawler->filter('article.list-item > div')); - $this->assertCount(0, $crawler->filter('article.ecl-content-item > div.ecl-content-item__image__before')); - $this->assertCount(1, $crawler->filter('article.ecl-content-item > div.ecl-content-item__image__after')); - $image_element = $crawler->filter('article.ecl-content-item > div[role="img"].ecl-u-d-lg-block'); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__before')); + $this->assertCount(1, $crawler->filter('article.list-item > div.list-item__image__after')); + $image_element = $crawler->filter('article.list-item > div.list-item__image img'); $this->assertCount(1, $image_element); $this->assertContains( file_url_transform_relative(file_create_url($image->getFileUri())), - $image_element->attr('style') + $image_element->attr('src') ); - $this->assertEquals('Druplicon', $image_element->attr('aria-label')); + $this->assertEquals('Druplicon', $image_element->attr('alt')); - $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__meta')->text())); + $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.list-item div.list-item__meta')->text())); // No date should be rendered neither. $this->assertCount(0, $crawler->filter('time.ecl-date-block')); @@ -322,22 +322,22 @@ public function testListItem(): void { $html = $this->renderParagraph($paragraph); $crawler = new Crawler($html); - $this->assertEquals('Item title', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__title')->text())); - $this->assertEquals('Item description', trim($crawler->filter('article.ecl-content-item div.ecl-content-item__description')->text())); + $this->assertEquals('Item title', trim($crawler->filter('article.list-item h3.list-item__title')->text())); + $this->assertEquals('Item description', trim($crawler->filter('article.list-item div.list-item__description')->text())); - $link_element = $crawler->filter('article.ecl-content-item div.ecl-content-item__title a.ecl-link'); + $link_element = $crawler->filter('article.list-item h3.list-item__title a.ecl-link'); $this->assertCount(1, $link_element); $this->assertEquals('http://www.example.com/', $link_element->attr('href')); - $this->assertCount(1, $crawler->filter('article.ecl-content-item > div')); + $this->assertCount(1, $crawler->filter('article.list-item > div')); // No images should be rendered in this variant. - $this->assertCount(0, $crawler->filter('article.ecl-content-item > div[role="img"]')); - $this->assertCount(0, $crawler->filter('article.ecl-content-item > div.ecl-content-item__image__before')); - $this->assertCount(0, $crawler->filter('article.ecl-content-item > div.ecl-content-item__image__after')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image img')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__before')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__after')); // Neither the metas. - $this->assertCount(0, $crawler->filter('article.ecl-content-item div.ecl-content-item__meta')); + $this->assertCount(0, $crawler->filter('article.list-item div.list-item__meta')); // Change the variant to date. $paragraph->get('oe_paragraphs_variant')->setValue('date'); @@ -346,26 +346,26 @@ public function testListItem(): void { $html = $this->renderParagraph($paragraph); $crawler = new Crawler($html); - $this->assertCount(1, $crawler->filter('article.ecl-content-item-date')); - $this->assertEquals('Item title', trim($crawler->filter('article.ecl-content-item-date div.ecl-content-item-date__title')->text())); - $this->assertEquals('Item description', trim($crawler->filter('article.ecl-content-item-date div.ecl-content-item-date__description')->text())); + $this->assertCount(1, $crawler->filter('article.list-item')); + $this->assertEquals('Item title', trim($crawler->filter('article.list-item h3.list-item__title')->text())); + $this->assertEquals('Item description', trim($crawler->filter('article.list-item div.list-item__description')->text())); - $link_element = $crawler->filter('article.ecl-content-item-date div.ecl-content-item-date__title a.ecl-link'); + $link_element = $crawler->filter('article.list-item h3.list-item__title a.ecl-link'); $this->assertCount(1, $link_element); $this->assertEquals('http://www.example.com/', $link_element->attr('href')); - $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.ecl-content-item-date div.ecl-content-item-date__meta')->text())); + $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.list-item div.list-item__meta')->text())); - $this->assertCount(1, $crawler->filter('article.ecl-content-item-date time.ecl-date-block')); - $this->assertEquals('24', trim($crawler->filter('article.ecl-content-item-date span.ecl-date-block__day')->text())); - $this->assertEquals('Sep', trim($crawler->filter('article.ecl-content-item-date abbr.ecl-date-block__month')->text())); - $this->assertEquals('1981', trim($crawler->filter('article.ecl-content-item-date span.ecl-date-block__year')->text())); - $this->assertCount(1, $crawler->filter('article.ecl-content-item-date abbr.ecl-date-block__month[title="September"]')); + $this->assertCount(1, $crawler->filter('article.list-item time.ecl-date-block')); + $this->assertEquals('24', trim($crawler->filter('article.list-item span.ecl-date-block__day')->text())); + $this->assertEquals('Sep', trim($crawler->filter('article.list-item abbr.ecl-date-block__month')->text())); + $this->assertEquals('1981', trim($crawler->filter('article.list-item span.ecl-date-block__year')->text())); + $this->assertCount(1, $crawler->filter('article.list-item abbr.ecl-date-block__month[title="September"]')); // No images should be rendered in this variant. - $this->assertCount(0, $crawler->filter('article.ecl-content-item-date > div[role="img"]')); - $this->assertCount(0, $crawler->filter('article.ecl-content-item-date > div.ecl-content-item-date__image__before')); - $this->assertCount(0, $crawler->filter('article.ecl-content-item-date > div.ecl-content-item-date__image__after')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image img')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__before')); + $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__after')); } /** @@ -405,30 +405,30 @@ public function testListItemBlock() { // Verify that the referenced paragraphs are being rendered. $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item')); - $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item article.ecl-content-item')); + $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item article.list-item')); // Verify that the one column variant is being rendered. No class is added // to this variant, so we check that neither the two or three columns class // modifiers are there. - $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item.ecl-col-12 article.ecl-content-item')); - $this->assertCount(0, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item')); - $this->assertCount(0, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item')); + $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item.ecl-col-12 article.list-item')); + $this->assertCount(0, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-6 article.list-item')); + $this->assertCount(0, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-4 article.list-item')); // Change the variant to two columns. $paragraph->get('field_oe_list_item_block_layout')->setValue('two_columns'); $paragraph->save(); $crawler = new Crawler($this->renderParagraph($paragraph)); - $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item')); - $this->assertCount(0, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item')); + $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-6 article.list-item')); + $this->assertCount(0, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-4 article.list-item')); // Change the variant to three columns. $paragraph->get('field_oe_list_item_block_layout')->setValue('three_columns'); $paragraph->save(); $crawler = new Crawler($this->renderParagraph($paragraph)); - $this->assertCount(0, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-6 article.ecl-content-item')); - $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-4 article.ecl-content-item')); + $this->assertCount(0, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-6 article.list-item')); + $this->assertCount(3, $crawler->filter('div.ecl-content-item-block__item.ecl-col-md-4 article.list-item')); } /** From e0c77eb2321e9af1ccac83fdc7c1db39d3430326 Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sun, 13 Sep 2020 12:55:52 +0200 Subject: [PATCH 12/17] EWPP-249: Fix event teaser test. --- tests/PatternAssertions/BasePatternAssert.php | 10 +++++----- tests/PatternAssertions/ListItemAssert.php | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/tests/PatternAssertions/BasePatternAssert.php b/tests/PatternAssertions/BasePatternAssert.php index c9519b5de..e413b594b 100644 --- a/tests/PatternAssertions/BasePatternAssert.php +++ b/tests/PatternAssertions/BasePatternAssert.php @@ -93,7 +93,7 @@ protected function assertElementAttribute($expected, string $selector, string $a } $this->assertElementExists($selector, $crawler); $element = $crawler->filter($selector); - self::assertEquals($expected, $element->attr($attribute)); + self::assertEquals($expected, $element->attr($attribute), "Attribute of element with selector '{$selector}' does match expected value."); } /** @@ -113,7 +113,7 @@ protected function assertElementText($expected, string $selector, Crawler $crawl } $this->assertElementExists($selector, $crawler); $element = $crawler->filter($selector); - self::assertEquals($expected, $element->text()); + self::assertEquals($expected, $element->text(), "Text of element with selector '{$selector}' does match expected value."); } /** @@ -133,7 +133,7 @@ protected function assertElementHtml($expected, string $selector, Crawler $crawl } $this->assertElementExists($selector, $crawler); $element = $crawler->filter($selector); - self::assertEquals($expected, $element->html()); + self::assertEquals($expected, $element->html(), "Element with selector '{$selector}' does match expected value."); } /** @@ -146,7 +146,7 @@ protected function assertElementHtml($expected, string $selector, Crawler $crawl */ protected function assertElementExists(string $selector, Crawler $crawler): void { $element = $crawler->filter($selector); - self::assertCount(1, $element); + self::assertCount(1, $element, "Element with selector '{$selector}' does not exits."); } /** @@ -159,7 +159,7 @@ protected function assertElementExists(string $selector, Crawler $crawler): void */ protected function assertElementNotExists(string $selector, Crawler $crawler): void { $element = $crawler->filter($selector); - self::assertCount(0, $element); + self::assertCount(0, $element, "Element with selector '{$selector}' does exits but is should not."); } } diff --git a/tests/PatternAssertions/ListItemAssert.php b/tests/PatternAssertions/ListItemAssert.php index a2bcc1df0..e7b30a4ac 100644 --- a/tests/PatternAssertions/ListItemAssert.php +++ b/tests/PatternAssertions/ListItemAssert.php @@ -17,20 +17,20 @@ class ListItemAssert extends BasePatternAssert { * {@inheritdoc} */ protected function getAssertions($variant): array { - $base_selector = 'div' . $this->getBaseItemClass($variant); + $base_selector = $this->getBaseItemClass($variant); return [ 'title' => [ [$this, 'assertElementText'], - $base_selector . '__title', + 'h3' . $base_selector . '__title', ], 'url' => [ [$this, 'assertElementAttribute'], - $base_selector . '__title a.ecl-link.ecl-link--standalone', + 'h3' . $base_selector . '__title a.ecl-link.ecl-link--standalone', 'href', ], 'meta' => [ [$this, 'assertElementText'], - $base_selector . '__meta', + 'div' . $base_selector . '__meta', ], 'date' => [ [$this, 'assertDate'], @@ -38,7 +38,7 @@ protected function getAssertions($variant): array { ], 'description' => [ [$this, 'assertDescription'], - $base_selector . '__description', + 'div' . $base_selector . '__description', ], 'image' => [ [$this, 'assertImage'], From c25c3b5eb81485c9c0fc0927c4fb786551784c7a Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sun, 13 Sep 2020 13:05:10 +0200 Subject: [PATCH 13/17] EWPP-249: Hide image if not present on list item pattern. --- ...ist-item--variant-thumbnail-primary.html.twig | 16 +++++++++------- ...t-item--variant-thumbnail-secondary.html.twig | 16 +++++++++------- tests/features/news.feature | 2 +- 3 files changed, 19 insertions(+), 15 deletions(-) diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig index 66d22f9c2..e283a1fec 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig @@ -17,13 +17,15 @@
      {# Seconday block. #} {% block secondary %} -
      - {% if url %} - {{ image }} - {% else %} - {{ image }} - {% endif %} -
      + {% if image %} +
      + {% if url %} + {{ image }} + {% else %} + {{ image }} + {% endif %} +
      + {% endif %} {% endblock %} {# Primary block. #} {% block primary %} diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig index 03901e21c..166b84bd2 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig @@ -10,13 +10,15 @@
      {# Seconday block. #} {% block secondary %} -
      - {% if url %} - {{ image }} - {% else %} - {{ image }} - {% endif %} -
      + {% if image %} +
      + {% if url %} + {{ image }} + {% else %} + {{ image }} + {% endif %} +
      + {% endif %} {% endblock %} {# Primary block. #} {% block primary %} diff --git a/tests/features/news.feature b/tests/features/news.feature index d10192bb3..14cf7d282 100644 --- a/tests/features/news.feature +++ b/tests/features/news.feature @@ -3,7 +3,7 @@ Feature: News content type. As a user I want to access the content of a news So I can find the information I'm looking for. - +@run Scenario: News information is shown in teasers. Given I am logged in as a user with the "create oe_news content, access content, edit any oe_news content, view published skos concept entities" permission And "oe_news" content: From 39b5158fbfe05a66209334f6e3bcc4c3f8dd1f42 Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sun, 13 Sep 2020 13:29:47 +0200 Subject: [PATCH 14/17] EWPP-249: Fix project teaser test and optimize list item thumbnail variants. --- ...-item--variant-thumbnail-primary.html.twig | 23 ++++++++----------- ...tem--variant-thumbnail-secondary.html.twig | 23 ++----------------- tests/Kernel/ProjectRenderTest.php | 4 ++-- tests/PatternAssertions/ListItemAssert.php | 12 +++++----- 4 files changed, 20 insertions(+), 42 deletions(-) diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig index e283a1fec..be8efcc09 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig @@ -14,19 +14,16 @@ {# Main content block. #} {% block content %} -
      - {# Seconday block. #} - {% block secondary %} - {% if image %} -
      - {% if url %} - {{ image }} - {% else %} - {{ image }} - {% endif %} -
      - {% endif %} - {% endblock %} +
      + {% if image %} +
      + {% if url %} + {{ image }} + {% else %} + {{ image }} + {% endif %} +
      + {% endif %} {# Primary block. #} {% block primary %} {{ parent() }} diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig index 166b84bd2..fd2c703a6 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-secondary.html.twig @@ -5,24 +5,5 @@ */ #} {% extends '@oe_theme/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig' %} -{# Main content block. #} -{% block content %} -
      - {# Seconday block. #} - {% block secondary %} - {% if image %} -
      - {% if url %} - {{ image }} - {% else %} - {{ image }} - {% endif %} -
      - {% endif %} - {% endblock %} - {# Primary block. #} - {% block primary %} - {{ parent() }} - {% endblock %} -
      -{% endblock %} +{% set list_item_classes = 'list-item__thumbnail_secondary' %} +{% set image_classes = 'list-item__image__after ecl-u-order-md-last' %} diff --git a/tests/Kernel/ProjectRenderTest.php b/tests/Kernel/ProjectRenderTest.php index 751291df9..723255273 100644 --- a/tests/Kernel/ProjectRenderTest.php +++ b/tests/Kernel/ProjectRenderTest.php @@ -165,7 +165,7 @@ public function testProjectTeaser(): void { 'meta' => NULL, 'image' => [ 'src' => 'example_1.jpeg', - 'alt' => '', + 'alt' => 'Alt', ], 'date' => NULL, ]; @@ -174,7 +174,7 @@ public function testProjectTeaser(): void { // Project teaser description should contain a field list pattern. $crawler = new Crawler($html); - $html = $crawler->filter('div.ecl-content-item__description')->parents()->html(); + $html = $crawler->filter('div.list-item__description')->parents()->html(); $assert = new FieldListAssert(); $expected_values = [ 'items' => [ diff --git a/tests/PatternAssertions/ListItemAssert.php b/tests/PatternAssertions/ListItemAssert.php index e7b30a4ac..1c84f21bd 100644 --- a/tests/PatternAssertions/ListItemAssert.php +++ b/tests/PatternAssertions/ListItemAssert.php @@ -160,15 +160,15 @@ protected function assertDate($expected_date, string $variant, Crawler $crawler) */ protected function assertImage($expected_image, string $variant, Crawler $crawler): void { $variant_class = $variant === 'thumbnail_primary' ? 'list-item__image__before' : 'list-item__image__after'; - $image_div_selector = 'div.' . $variant_class; + $image_selector = 'div.list-item__image.' . $variant_class . ' img'; if (!$expected_image) { - $this->assertElementNotExists($image_div_selector, $crawler); + $this->assertElementNotExists($image_selector, $crawler); return; } - $this->assertElementExists($image_div_selector, $crawler); - $image_div = $crawler->filter($image_div_selector); - self::assertEquals($expected_image['alt'], $image_div->attr('aria-label')); - self::assertContains($expected_image['src'], $image_div->attr('style')); + $this->assertElementExists($image_selector, $crawler); + $image = $crawler->filter($image_selector); + self::assertEquals($expected_image['alt'], $image->attr('alt')); + self::assertContains($expected_image['src'], $image->attr('src')); } /** From c16138280c67caa0d4b64c4ac1118896bd914a1a Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sun, 13 Sep 2020 13:44:25 +0200 Subject: [PATCH 15/17] EWPP-249: Fix margin and spacing. --- sass/components/_list_items.scss | 12 ++---------- ...rn-list-item--variant-thumbnail-primary.html.twig | 2 +- .../patterns/list_item/pattern-list-item.html.twig | 2 +- 3 files changed, 4 insertions(+), 12 deletions(-) diff --git a/sass/components/_list_items.scss b/sass/components/_list_items.scss index 7a6112440..94a02f66f 100644 --- a/sass/components/_list_items.scss +++ b/sass/components/_list_items.scss @@ -3,7 +3,7 @@ &__title { @extend .ecl-u-type-heading-4; margin-top: 0; - margin-bottom: $ecl-spacing-xs; + margin-bottom: 0; } &__meta { @extend .ecl-u-type-s; @@ -38,26 +38,18 @@ @include ecl-media-breakpoint-up("md") { margin-right: $ecl-spacing-l; } - @include ecl-media-breakpoint-up("lg") { - margin-right: $ecl-spacing-l; - } } &__after { @include ecl-media-breakpoint-up("md") { margin-left: $ecl-spacing-l; } - @include ecl-media-breakpoint-up("lg") { - margin-left: $ecl-spacing-l; - } } } &__date { + margin-right: $ecl-spacing-m; @include ecl-media-breakpoint-up("md") { margin-right: $ecl-spacing-l; } - @include ecl-media-breakpoint-up("lg") { - margin-right: $ecl-spacing-l; - } } } diff --git a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig index be8efcc09..dfabdb6f0 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-thumbnail-primary.html.twig @@ -14,7 +14,7 @@ {# Main content block. #} {% block content %} -
      +
      {% if image %}
      {% if url %} diff --git a/templates/patterns/list_item/pattern-list-item.html.twig b/templates/patterns/list_item/pattern-list-item.html.twig index df9a0b247..f90f24ddd 100644 --- a/templates/patterns/list_item/pattern-list-item.html.twig +++ b/templates/patterns/list_item/pattern-list-item.html.twig @@ -22,7 +22,7 @@ {% if meta is not empty %}
      {{ meta|safe_join(" | ") }}
      {% endif %} -

      +

      {% if url %} {{ title }} {% else %} From 3469e79510964abef17f2f207b99a320b1ea37df Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sun, 13 Sep 2020 14:22:55 +0200 Subject: [PATCH 16/17] EWPP-249: Use list item navigation variant on project content type. --- sass/components/_list_items.scss | 5 +++++ ...node--oe-project-calls--oe-project.html.twig | 1 + ...ject-funding-programme--oe-project.html.twig | 1 + .../paragraph--oe-list-item.html.twig | 7 ------- .../list_item/list_item.ui_patterns.yml | 4 ++-- ...tern-list-item--variant-navigation.html.twig | 16 +++++++++++++++- tests/Kernel/fixtures/rendering.yml | 17 +++++++++++++++++ 7 files changed, 41 insertions(+), 10 deletions(-) diff --git a/sass/components/_list_items.scss b/sass/components/_list_items.scss index 94a02f66f..97c957cc3 100644 --- a/sass/components/_list_items.scss +++ b/sass/components/_list_items.scss @@ -18,6 +18,11 @@ margin: 0; } } + &__navigation { + .list-item__title { + @extend .ecl-u-type-heading-5; + } + } } .list-item { &__image { diff --git a/templates/field/field--node--oe-project-calls--oe-project.html.twig b/templates/field/field--node--oe-project-calls--oe-project.html.twig index c1e6d218c..e067284e3 100644 --- a/templates/field/field--node--oe-project-calls--oe-project.html.twig +++ b/templates/field/field--node--oe-project-calls--oe-project.html.twig @@ -10,6 +10,7 @@ {% for item in items %}
    • {{ pattern('list_item', { + variant: 'navigation', meta: [ label ], url: item.content['#url'], title: item.content['#title'] diff --git a/templates/field/field--node--oe-project-funding-programme--oe-project.html.twig b/templates/field/field--node--oe-project-funding-programme--oe-project.html.twig index 1725ecd85..bfa4c5945 100644 --- a/templates/field/field--node--oe-project-funding-programme--oe-project.html.twig +++ b/templates/field/field--node--oe-project-funding-programme--oe-project.html.twig @@ -10,6 +10,7 @@ {% for item in items %}
    • {{ pattern('list_item', { + variant: 'navigation', meta: [ label ], title: item.content }) }} diff --git a/templates/paragraphs/paragraph--oe-list-item.html.twig b/templates/paragraphs/paragraph--oe-list-item.html.twig index f98fabb26..0601ece7d 100644 --- a/templates/paragraphs/paragraph--oe-list-item.html.twig +++ b/templates/paragraphs/paragraph--oe-list-item.html.twig @@ -14,13 +14,6 @@ 'title': content.field_oe_title, 'link': { 'href': url }, }) }} -{% elseif variant == 'navigation' %} - {# Use list_item pattern as the navigation variant has been deprecated in 2.9.0 #} - {{ pattern('list_item', { - 'url': url, - 'title': content.field_oe_title, - 'detail': content.field_oe_text_long, - }) }} {% else %} {{ pattern('list_item', { 'variant': variant, diff --git a/templates/patterns/list_item/list_item.ui_patterns.yml b/templates/patterns/list_item/list_item.ui_patterns.yml index 1c2ca3fe6..80619821f 100644 --- a/templates/patterns/list_item/list_item.ui_patterns.yml +++ b/templates/patterns/list_item/list_item.ui_patterns.yml @@ -12,8 +12,8 @@ list_item: label: "List item: highlight (deprecated)" description: "Deprecated pattern variant. Please use 'featured_item' pattern instead." navigation: - label: "List item: navigation (deprecated)" - description: "Deprecated pattern variant. Please use 'list_item' pattern, variant 'default'." + label: "List item: navigation" + description: "Navigation list item, contains a linked title, meta and description." thumbnail_primary: label: "List item: thumbnail " description: "Thumbnail list item, contains a primary image, metadata information and a linked title." diff --git a/templates/patterns/list_item/pattern-list-item--variant-navigation.html.twig b/templates/patterns/list_item/pattern-list-item--variant-navigation.html.twig index d76913555..511334eb6 100644 --- a/templates/patterns/list_item/pattern-list-item--variant-navigation.html.twig +++ b/templates/patterns/list_item/pattern-list-item--variant-navigation.html.twig @@ -4,4 +4,18 @@ * Default implementation for the navigation list item component. */ #} -{# Deprecated pattern variant. Please use 'list_item' pattern, variant 'default'. #} +
      + {% if meta is not empty %} +
      {{ meta|safe_join(" | ") }}
      + {% endif %} +

      + {% if url %} + {{ title }} + {% else %} + {{ title }} + {% endif %} +

      + {% if detail is not empty %} +
      {{ detail }}
      + {% endif %} +
      diff --git a/tests/Kernel/fixtures/rendering.yml b/tests/Kernel/fixtures/rendering.yml index 90e7f086a..dd8354891 100644 --- a/tests/Kernel/fixtures/rendering.yml +++ b/tests/Kernel/fixtures/rendering.yml @@ -1063,6 +1063,23 @@ assertions: count: 'time.ecl-date-block.ecl-date-block--past': 1 +- array: + '#type': pattern + '#id': list_item + '#variant': "navigation" + '#fields': + title: "Item title" + url: "http://example.com" + detail: "EU economy, the euro, and practical information for EU businesses and entrepreneurs." + assertions: + count: + 'article.list-item h3.list-item__title a.ecl-link[href="http://example.com"]': 1 + 'article.list-item div.list-item__image img': 0 + 'article.list-item div.list-item__image__before': 0 + 'article.list-item div.list-item__image__after': 0 + equals: + 'article.list-item h3.list-item__title a.ecl-link': "Item title" + 'article.list-item div.list-item__description': "EU economy, the euro, and practical information for EU businesses and entrepreneurs." - array: '#type': pattern '#id': list_item_block_one_column From 8fe67cd16341afc937a2630e192f1dfc128c7d9c Mon Sep 17 00:00:00 2001 From: Antonio De Marco Date: Sun, 13 Sep 2020 14:59:31 +0200 Subject: [PATCH 17/17] EWPP-249: Fix tests. --- tests/Kernel/Paragraphs/ParagraphsTest.php | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tests/Kernel/Paragraphs/ParagraphsTest.php b/tests/Kernel/Paragraphs/ParagraphsTest.php index 566048567..9fa9e528c 100644 --- a/tests/Kernel/Paragraphs/ParagraphsTest.php +++ b/tests/Kernel/Paragraphs/ParagraphsTest.php @@ -329,15 +329,16 @@ public function testListItem(): void { $this->assertCount(1, $link_element); $this->assertEquals('http://www.example.com/', $link_element->attr('href')); - $this->assertCount(1, $crawler->filter('article.list-item > div')); + $this->assertCount(2, $crawler->filter('article.list-item > div')); // No images should be rendered in this variant. $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image img')); $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__before')); $this->assertCount(0, $crawler->filter('article.list-item > div.list-item__image__after')); - // Neither the metas. - $this->assertCount(0, $crawler->filter('article.list-item div.list-item__meta')); + // Metas should be shown. + $this->assertCount(1, $crawler->filter('article.list-item div.list-item__meta')); + $this->assertEquals('Meta 1 | Meta 2 | Meta 3', trim($crawler->filter('article.list-item div.list-item__meta')->text())); // Change the variant to date. $paragraph->get('oe_paragraphs_variant')->setValue('date');