Merge pull request #1275 from openeuropa/EWPP-3324

EWPP-3324: Add new fields to gallery pattern.

modules/oe_theme_helper/translations/oe_theme_helper-bg.po

@@ -626,3 +626,6 @@ msgstr "@percentage% от общия бюджет"
 
 msgid "Access item's children"
 msgstr "Достъп до поделементите"
+
+msgid "Collapse"
+msgstr "Свиване"

modules/oe_theme_helper/translations/oe_theme_helper-cs.po

@@ -626,3 +626,6 @@ msgstr "@percentage % celkového rozpočtu"
 
 msgid "Access item's children"
 msgstr "Rozbalit podkapitoly"
+
+msgid "Collapse"
+msgstr "Sbalit"

modules/oe_theme_helper/translations/oe_theme_helper-da.po

@@ -626,3 +626,6 @@ msgstr "@percentage % af det samlede budget"
 
 msgid "Access item's children"
 msgstr "Gå til fanens underemner"
+
+msgid "Collapse"
+msgstr "Skjul"

modules/oe_theme_helper/translations/oe_theme_helper-de.po

@@ -626,3 +626,6 @@ msgstr "@percentage % der Gesamtmittel"
 
 msgid "Access item's children"
 msgstr "Zu den Unterkategorien"
+
+msgid "Collapse"
+msgstr "Einklappen"

modules/oe_theme_helper/translations/oe_theme_helper-el.po

@@ -626,3 +626,6 @@ msgstr "@percentage % του συνολικού προϋπολογισμού"
 
 msgid "Access item's children"
 msgstr "Πρόσβαση στις υποκατηγορίες του θέματος"
+
+msgid "Collapse"
+msgstr "Σύμπτυξη"

modules/oe_theme_helper/translations/oe_theme_helper-es.po

@@ -626,3 +626,6 @@ msgstr "@percentage% de la dotación presupuestaria global"
 
 msgid "Access item's children"
 msgstr "Acceder a subelementos"
+
+msgid "Collapse"
+msgstr "Contraer"

modules/oe_theme_helper/translations/oe_theme_helper-et.po

@@ -626,3 +626,6 @@ msgstr "@percentage% kogueelarvest"
 
 msgid "Access item's children"
 msgstr "Juurdepääs alamelementidele"
+
+msgid "Collapse"
+msgstr "Ahenda"

modules/oe_theme_helper/translations/oe_theme_helper-fi.po

@@ -626,3 +626,6 @@ msgstr "@percentage % kokonaisbudjetista"
 
 msgid "Access item's children"
 msgstr "Avaa alivalinnat"
+
+msgid "Collapse"
+msgstr "Supista"

modules/oe_theme_helper/translations/oe_theme_helper-fr.po

@@ -626,3 +626,6 @@ msgstr "@percentage % du budget global"
 
 msgid "Access item's children"
 msgstr "Accéder aux sous-éléments"
+
+msgid "Collapse"
+msgstr "Réduire"

modules/oe_theme_helper/translations/oe_theme_helper-ga.po

@@ -626,3 +626,6 @@ msgstr "@percentage% den bhuiséad foriomlán"
 
 msgid "Access item's children"
 msgstr "Fo-ábhair an phríomhábhair"
+
+msgid "Collapse"
+msgstr "Leacaigh"

modules/oe_theme_helper/translations/oe_theme_helper-hr.po

@@ -626,3 +626,6 @@ msgstr "@percentage % ukupnog proračuna"
 
 msgid "Access item's children"
 msgstr "Pristup podelementima"
+
+msgid "Collapse"
+msgstr "Sažmi"

modules/oe_theme_helper/translations/oe_theme_helper-hu.po

@@ -626,3 +626,6 @@ msgstr "A teljes költségvetés @percentage%-a"
 
 msgid "Access item's children"
 msgstr "Hozzáférés az alelemekhez"
+
+msgid "Collapse"
+msgstr "Elrejtés"

modules/oe_theme_helper/translations/oe_theme_helper-it.po

@@ -626,3 +626,6 @@ msgstr "@percentage% del bilancio complessivo"
 
 msgid "Access item's children"
 msgstr "Accedi agli elementi figlio"
+
+msgid "Collapse"
+msgstr "Comprimi"

modules/oe_theme_helper/translations/oe_theme_helper-lt.po

@@ -626,3 +626,6 @@ msgstr "@percentage % bendro biudžeto"
 
 msgid "Access item's children"
 msgstr "Prieiga prie poskyrių"
+
+msgid "Collapse"
+msgstr "Suskleisti"

modules/oe_theme_helper/translations/oe_theme_helper-lv.po

@@ -626,3 +626,6 @@ msgstr "@percentage % no kopējā budžeta"
 
 msgid "Access item's children"
 msgstr "Piekļūt pakārtotajiem elementiem"
+
+msgid "Collapse"
+msgstr "Sakļaut"

modules/oe_theme_helper/translations/oe_theme_helper-mt.po

@@ -626,3 +626,6 @@ msgstr "@percentage% tal-baġit globali"
 
 msgid "Access item's children"
 msgstr "Aċċessa s-sottoelement tat-tfal"
+
+msgid "Collapse"
+msgstr "Ikkollassa"

modules/oe_theme_helper/translations/oe_theme_helper-nl.po

@@ -626,3 +626,6 @@ msgstr "@percentage% van de totale begroting"
 
 msgid "Access item's children"
 msgstr "Onderliggende elementen tonen"
+
+msgid "Collapse"
+msgstr "Inklappen"

modules/oe_theme_helper/translations/oe_theme_helper-pl.po

@@ -626,3 +626,6 @@ msgstr "@percentage% łącznego budżetu"
 
 msgid "Access item's children"
 msgstr "Rozwiń podpunkty"
+
+msgid "Collapse"
+msgstr "Zwiń"

modules/oe_theme_helper/translations/oe_theme_helper-pt-pt.po

@@ -626,3 +626,6 @@ msgstr "@percentage% do orçamento global"
 
 msgid "Access item's children"
 msgstr "Aceder a sub-elementos"
+
+msgid "Collapse"
+msgstr "Fechar"

modules/oe_theme_helper/translations/oe_theme_helper-ro.po

@@ -626,3 +626,6 @@ msgstr "@percentage% din bugetul total"
 
 msgid "Access item's children"
 msgstr "Accesați submeniul"
+
+msgid "Collapse"
+msgstr "Restrângeți"

modules/oe_theme_helper/translations/oe_theme_helper-sk.po

@@ -626,3 +626,6 @@ msgstr "@percentage% celkového rozpočtu"
 
 msgid "Access item's children"
 msgstr "Rozbaliť podkapitoly"
+
+msgid "Collapse"
+msgstr "Zbaliť"

modules/oe_theme_helper/translations/oe_theme_helper-sl.po

@@ -626,3 +626,6 @@ msgstr "@percentage % celotnega proračuna"
 
 msgid "Access item's children"
 msgstr "Dostop do podelementov"
+
+msgid "Collapse"
+msgstr "Skrči"

modules/oe_theme_helper/translations/oe_theme_helper-sv.po

@@ -626,3 +626,6 @@ msgstr "@percentage % av den totala budgeten"
 
 msgid "Access item's children"
 msgstr "Gå till undersidorna"
+
+msgid "Collapse"
+msgstr "Dölj"

templates/patterns/gallery/gallery.ui_patterns.yml

@@ -109,3 +109,36 @@ gallery:
           meta: 'Copyright © 2021, Author and Licence'
           source: 'https://loremflickr.com/800/600/vilnius'
           media_type: 'image'
+    disable_overlay:
+      type: "boolean"
+      label: "Disable overlay"
+      description: "Disables the overlay functionality."
+      preview: true
+      escape: false
+    expandable:
+      type: "boolean"
+      label: "Expandable"
+      description: "Whether the 'See all' link is shown or all items are shown."
+      preview: true
+      escape: false
+    footer_link_url:
+      type: "Url"
+      label: "URL"
+      description: "Footer link URL."
+      preview: "http://example.com"
+    footer_link_label:
+      type: "text"
+      label: "Link text"
+      description: "Footer link text."
+      preview: "Further media items"
+    footer_link_external:
+      type: "boolean"
+      label: "External link"
+      description: "Whether the footer URL is external or not."
+      preview: true
+    visible_items:
+      type: "numeric"
+      label: "Visible items"
+      description: "Number of visible items in an expandable gallery."
+      preview: 3
+      escape: false

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

@@ -18,6 +18,17 @@
   {% set _items = _items|merge([_item]) %}
 {% endfor %}
 
+{% if footer_link_url is not empty %}
+  {% set footer_link = {
+    'link': {
+      'label': footer_link_label|default('Further media items'|t),
+      'path': footer_link_url,
+      'icon_path': ecl_icon_path,
+      'external': footer_link_external,
+    },
+  } %}
+{% endif %}
+
 {% set _gallery = {
   'overlay': {
     'counter_separator': ' / ',
@@ -56,9 +67,13 @@
     },
   },
   'view_all_label': "See all"|t,
-  'view_all_expanded_label': "Back"|t,
+  'view_all_expanded_label': "Collapse"|t,
   'counter_label': "media items"|t,
-  'items': _items
+  'items': _items,
+  'disable_overlay': disable_overlay ?? false,
+  'expandable': expandable ?? true,
+  'visible_items': visible_items|default(8),
+  'footer': footer_link|default([]),
 } %}
 
 {% if _items|length > 1 %}

tests/src/Kernel/fixtures/rendering.yml

@@ -889,9 +889,11 @@
           caption: 'A picture of a cat'
           meta: 'Copyright © 2021, Author and Licence'
           media_type: 'image'
+      expandable: false
+      disable_overlay: true
   assertions:
     count:
-      '.ecl-gallery': 1
+      '.ecl-gallery[data-ecl-gallery][data-ecl-gallery-not-expandable]': 1
       '.ecl-gallery .ecl-gallery__list': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__image[src="https://loremflickr.com/320/240/cat"]': 1
@@ -901,6 +903,7 @@
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item figcaption.ecl-gallery__description svg.ecl-icon': 1
       '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-previous': 0
       '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-next': 0
+      '.ecl-gallery__footer-link': 0
     equals:
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item .ecl-gallery__meta': 'Copyright © 2021, Author and Licence'
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#image"></use>'
@@ -925,11 +928,22 @@
           caption: "Energy, let's save it!"
           meta: 'Copyright © 2021 EC'
           type: 'video'
+        - thumbnail:
+            src: 'https://loremflickr.com/800/600/lisbon'
+            alt: 'Example alt text'
+          caption: 'Meanwhile in Lisbon, the capital of Portugal'
+          meta: 'Copyright © 2021, Author and Licence'
+          source: 'https://loremflickr.com/800/600/lisbon'
+          media_type: 'image'
+      footer_link_url: 'http://example.com'
+      footer_link_label: 'Further media items'
+      footer_link_external: true
+      visible_items: 1
   assertions:
     count:
-      '.ecl-gallery': 1
+      '.ecl-gallery[data-ecl-gallery-visible-items="1"]': 1
       '.ecl-gallery .ecl-gallery__list': 1
-      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 2
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item': 3
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image[src="https://loremflickr.com/320/240/cat"]': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image[alt="Example alt text cat"]': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) figcaption.ecl-gallery__description': 1
@@ -941,15 +955,27 @@
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) figcaption.ecl-gallery__description': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 1
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': 1
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__image[src="https://loremflickr.com/800/600/lisbon"]': 1
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__image[alt="Example alt text"]': 1
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) figcaption.ecl-gallery__description': 1
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__meta': 1
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': 1
       '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-previous': 1
       '.ecl-gallery .ecl-button.ecl-button--ghost.ecl-gallery__slider-next': 1
+      'dialog.ecl-gallery__overlay[data-ecl-gallery-overlay]': 1
+      'button.ecl-gallery__view-all[data-ecl-gallery-collapsed-label="See all"][data-ecl-gallery-expanded-label="Collapse"]': 1
+      '.ecl-gallery__footer-link': 1
     equals:
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(1) .ecl-gallery__image-container svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#image"></use>'
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__meta': 'Copyright © 2021 EC'
       '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(2) .ecl-gallery__image-container figcaption.ecl-gallery__description svg.ecl-icon': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#video"></use>'
+      '.ecl-gallery .ecl-gallery__list .ecl-gallery__item:nth-child(3) .ecl-gallery__meta': 'Copyright © 2021, Author and Licence'
+      '.ecl-gallery__footer-link a.ecl-link.ecl-link--standalone.ecl-link--icon.ecl-link--icon-after[href="http://example.com"] .ecl-link__label': 'Further media items'
+      '.ecl-gallery__footer-link a svg': '<use xlink:href="/themes/custom/oe_theme/dist/ec/images/icons/sprites/icons.svg#external"></use>'
     contains:
       - 'A picture of a cat'
       - 'Energy, let&#039;s save it!'
+      - 'Meanwhile in Lisbon, the capital of Portugal'
 - array:
     '#type': pattern
     '#id': list_item