EWPP-3815: Add fields for extra_attributes in banner, carousel and news ticker patterns.

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"

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 %}
 

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"

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 = [] %}

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"

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 %}

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'