diff --git a/templates/patterns/banners/banner.ui_patterns.yml b/templates/patterns/banners/banner.ui_patterns.yml old mode 100644 new mode 100755 index 9cd327ff0..d31eeae14 --- a/templates/patterns/banners/banner.ui_patterns.yml +++ b/templates/patterns/banners/banner.ui_patterns.yml @@ -27,6 +27,13 @@ banner: label: "URL" description: "Banner link url." preview: "http://example.com" + link_extra_attributes: + type: "array" + label: "Link attributes" + description: "Extra attributes for link" + preview: + - name: "extra-attr" + value: "extra value" label: type: "text" label: "Link text" diff --git a/templates/patterns/banners/pattern-banner.html.twig b/templates/patterns/banners/pattern-banner.html.twig old mode 100644 new mode 100755 index c35d946df..ed61735f5 --- a/templates/patterns/banners/pattern-banner.html.twig +++ b/templates/patterns/banners/pattern-banner.html.twig @@ -17,7 +17,8 @@ 'name': external_link ? "external" : "corner-arrow", 'transform': external_link ? "" : "rotate-90", 'size': "xs" - } + }, + 'extra_attributes': link_extra_attributes } -%} {% endif %} diff --git a/templates/patterns/carousel/carousel.ui_patterns.yml b/templates/patterns/carousel/carousel.ui_patterns.yml index 9a10ba104..48d2701bd 100644 --- a/templates/patterns/carousel/carousel.ui_patterns.yml +++ b/templates/patterns/carousel/carousel.ui_patterns.yml @@ -27,6 +27,9 @@ carousel: description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies" url: "https://example.com" url_text: "CTA" + link_extra_attributes: + - name: "extra-attr" + value: "extra value" centered: false - title: "Donec maximus pharetra ex a ultricies" description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies" diff --git a/templates/patterns/carousel/pattern-carousel.html.twig b/templates/patterns/carousel/pattern-carousel.html.twig index 7c552ebb9..7be6d6db8 100644 --- a/templates/patterns/carousel/pattern-carousel.html.twig +++ b/templates/patterns/carousel/pattern-carousel.html.twig @@ -13,7 +13,8 @@ 'label': item.url_text, 'icon_position': 'after' }, - 'icon': get_link_icon(item.url) + 'icon': get_link_icon(item.url), + 'extra_attributes': item.link_extra_attributes } -%} {% endif %} {% set _picture = [] %} diff --git a/templates/patterns/news_ticker/news_ticker.ui_patterns.yml b/templates/patterns/news_ticker/news_ticker.ui_patterns.yml index 6212ef5c4..0d169fdbd 100644 --- a/templates/patterns/news_ticker/news_ticker.ui_patterns.yml +++ b/templates/patterns/news_ticker/news_ticker.ui_patterns.yml @@ -29,3 +29,10 @@ news_ticker: type: "text" label: "Counter label" description: "The counter label defaults to 'of'. For e.g. '1 of 6'." + extra_attributes: + type: "array" + label: "Extra attributes" + description: "List of extra attributes used in ECL component" + preview: + - name: "extra-attr" + value: "extra value" diff --git a/templates/patterns/news_ticker/pattern-news-ticker.html.twig b/templates/patterns/news_ticker/pattern-news-ticker.html.twig index 2e2eeb0dd..d35719ff6 100644 --- a/templates/patterns/news_ticker/pattern-news-ticker.html.twig +++ b/templates/patterns/news_ticker/pattern-news-ticker.html.twig @@ -22,4 +22,5 @@ 'sr_next': 'Next news item'|t, 'sr_pause': 'Pause news ticker'|t, 'sr_play': 'Play news ticker'|t, + 'extra_attributes': extra_attributes|default([]) } only %} diff --git a/tests/src/Kernel/fixtures/rendering.yml b/tests/src/Kernel/fixtures/rendering.yml index cd160c119..7d9d2b4da 100644 --- a/tests/src/Kernel/fixtures/rendering.yml +++ b/tests/src/Kernel/fixtures/rendering.yml @@ -232,6 +232,7 @@ count: 'section.ecl-banner.ecl-banner--text-box.ecl-banner--l.ecl-banner--centered': 1 'div.ecl-banner__content div.ecl-banner__cta a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-banner__link-cta[href="http://example.com"]': 1 + 'div.ecl-banner__content div.ecl-banner__cta a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-banner__link-cta[data-name="data value"]': 0 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1 'picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="http://via.placeholder.com/150x150"]': 1 '.ecl-banner--full-width': 0 @@ -254,10 +255,14 @@ centered: false full_width: true credit: "© Copyright or credit" + link_extra_attributes: + - name: 'data-name' + value: 'data value' assertions: count: 'section.ecl-banner.ecl-banner--plain-background.ecl-banner--m.ecl-banner--full-width': 1 'div.ecl-banner__content div.ecl-banner__cta a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-banner__link-cta[href="http://example.com"]': 1 + 'div.ecl-banner__content div.ecl-banner__cta a.ecl-link.ecl-link--cta.ecl-link--icon.ecl-banner__link-cta[data-name="data value"]': 1 'svg.ecl-icon.ecl-icon--xs.ecl-icon--rotate-90.ecl-link__icon': 1 'picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="http://via.placeholder.com/150x150"]': 0 'footer.ecl-banner__credit small': 0 @@ -3428,9 +3433,13 @@ external_link: TRUE - content: "Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed quia consequuntur magni dolores" link: "http://example.com" + extra_attributes: + - name: 'data-name' + value: 'data value' assertions: count: div.ecl-news-ticker: 1 + div.ecl-news-ticker[data-name="data value"]: 1 div.ecl-news-ticker__container: 1 div.ecl-news-ticker__content: 1 ul#news-ticker-example-content.ecl-news-ticker__slides: 1 @@ -3497,16 +3506,25 @@ variant: "text-box" centered: false credit: "© Copyright first item" + link_extra_attributes: + - name: 'data-name' + value: 'data value' - title: "Duis vitae pulvinar turpis" description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur" url: "https://example.com" url_text: "CTA 2" image: "https://picsum.photos/seed/picsum/600/300" variant: "text-overlay" + link_extra_attributes: + - name: 'data-name' + value: 'data value' - title: "Donec maximus pharetra ex a ultricies" description: "Integer quis lorem tellus." url: "https://example.com" url_text: "CTA 3" + link_extra_attributes: + - name: 'data-name' + value: 'data value' - title: "Donec maximus pharetra" centered: false - title: "Lorem ipsum dolor sit amet" @@ -3520,6 +3538,9 @@ image: "https://picsum.photos/seed/picsum/600/300" variant: "text-overlay" centered: false + link_extra_attributes: + - name: 'data-name' + value: 'data value' assertions: count: section.ecl-carousel.ecl-carousel--full-width: 0 @@ -3541,6 +3562,7 @@ div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner__content div.ecl-banner__title: 2 div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner__content p.ecl-banner__description: 1 div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner__content div.ecl-banner__cta: 1 + div.ecl-carousel__slide div.ecl-banner__content div.ecl-banner__cta a[data-name="data value"]: 4 equals: div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__content div.ecl-banner__title .ecl-banner__title-text: 'Lorem ipsum dolor sit amet' div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__content p.ecl-banner__description .ecl-banner__description-text: 'Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'