OEL-1912: Revamp carousel pattern.

patches/npm/@openeuropa+bcl-theme-default+0.24.1.patch

@@ -0,0 +1,26 @@
+diff --git a/node_modules/@openeuropa/bcl-theme-default/templates/bcl-carousel/carousel.html.twig b/node_modules/@openeuropa/bcl-theme-default/templates/bcl-carousel/carousel.html.twig
+index 6e08be9..ddc41ad 100644
+--- a/node_modules/@openeuropa/bcl-theme-default/templates/bcl-carousel/carousel.html.twig
++++ b/node_modules/@openeuropa/bcl-theme-default/templates/bcl-carousel/carousel.html.twig
+@@ -111,7 +111,7 @@
+     {% if _item.image is defined and _item.image is not empty %}
+       {{ _item.image }}
+     {% endif %}
+-    {% if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) %}
++    {% if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty)  or (_item.caption_title is defined and _item.caption_title is not empty) %}
+       {% set _caption_classes = 'carousel-caption' %}
+       {% if _item.caption is not empty and _item.link is empty %}
+         {% set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
+diff --git a/node_modules/@openeuropa/bcl-theme-default/templates/bcl-pagination/pagination.html.twig b/node_modules/@openeuropa/bcl-theme-default/templates/bcl-pagination/pagination.html.twig
+index d33f381..ed77687 100644
+--- a/node_modules/@openeuropa/bcl-theme-default/templates/bcl-pagination/pagination.html.twig
++++ b/node_modules/@openeuropa/bcl-theme-default/templates/bcl-pagination/pagination.html.twig
+@@ -57,7 +57,7 @@
+ {% set _alignment = alignment|default('') %}
+ {% set _aria_label = aria_label|default('') %}
+ {% set _enable_prev_next_icon = enable_prev_next_icon|default(false) %}
+-{% set _enable_first_last_icon = enable_first_last_icon|default(true) %}
++{% set _enable_first_last_icon = enable_first_last_icon ?? true %}
+ {% set _items = items|default([]) %}
+ {% set _first = first|default({}) %}
+ {% set _next = next|default({}) %}

templates/patterns/carousel/carousel.ui_patterns.yml

@@ -42,13 +42,21 @@ carousel:
       label: 'Slides'
       description: 'Each slide is an image, a caption and interval of slide movement.'
       preview:
-        - caption: 'First slide label'
+        - caption: 'First slide caption'
+          caption_title: 'First slide title'
           interval: 0
           image:
             src: 'https://placeimg.com/1000/500/arch'
             alt: 'alt image 1'
-        - caption: 'Second slide label'
+          link:
+            label: First link
+            path: https://link.one
+        - caption: 'Second slide caption'
+          caption_title: 'Second slide title'
           interval: 0
           image:
             src: 'https://placeimg.com/1000/500/people'
             alt: 'alt image 1'
+          link:
+            label: Second link
+            path: https://link.two

templates/patterns/carousel/pattern-carousel.html.twig

@@ -12,22 +12,33 @@
     {% endblock %}
   {% endset %}
   {% set _item = slide|merge({
-    'image': _image
+    'image': _image,
   }) %}
+  {% if slide.link %}
+    {% set _item = _item|merge({
+      'link': slide.link|merge({
+        'icon_position': 'before',
+        'icon': {
+          'name': 'link',
+          'path': bcl_icon_path,
+        },
+      }),
+    }) %}
+  {% endif %}
   {% set _slides = _slides|merge([_item]) %}
 {% endfor %}
 {% include '@oe-bcl/carousel' with {
   'id': carousel_id,
-  'autoplay': autoplay,
-  'autoinit': autoinit,
+  'autoplay': autoplay ?? true,
+  'autoinit': autoinit ?? true,
   'dark': dark_mode,
   'active_item': active_item,
   'items': _slides,
-  'fade': fade,
-  'with_controls': show_controls,
+  'fade': fade ?? false,
+  'with_controls': show_controls ?? true,
   'prev_label': 'Previous'|t,
   'next_label': 'Next'|t,
-  'with_indicators': show_indicators,
-  'disable_touch': disable_touch,
+  'with_indicators': show_indicators ?? false,
+  'disable_touch': disable_touch ?? false,
   'attributes': attributes,
 } only %}