From 6cdcbb4cddc8716bcad129d734ff83bc7fab7b8d Mon Sep 17 00:00:00 2001 From: Romain Emery Date: Thu, 13 Jun 2024 10:19:31 +0200 Subject: [PATCH] feat(gallery): design update - FRONT-4387 (#3390) --- .../__snapshots__/gallery.test.js.snap | 1160 +++++++++-------- .../components/gallery/gallery-item.html.twig | 10 +- .../gallery/gallery-overlay.html.twig | 173 +-- .../twig/components/gallery/gallery.html.twig | 3 +- .../vanilla/components/button/button.scss | 5 +- .../components/gallery/gallery-print.scss | 5 + .../vanilla/components/gallery/gallery.js | 13 - .../vanilla/components/gallery/gallery.scss | 127 +- .../vanilla/components/gallery/package.json | 1 + src/themes/ec/theme.scss | 3 + src/themes/ec/variables/_button.scss | 1 + src/themes/ec/variables/_gallery.scss | 4 +- src/themes/eu/theme.scss | 15 +- src/themes/eu/variables/_button.scss | 1 + src/themes/eu/variables/_gallery.scss | 2 - 15 files changed, 807 insertions(+), 716 deletions(-) diff --git a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap index 3650c8746f1..2f911c51b74 100644 --- a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap +++ b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap @@ -40,15 +40,17 @@ exports[`Gallery Default renders correctly 1`] = ` > EU in brief - The EU in brief, institutions and bodies, countries, symbols, history, facts and figures + + The EU in brief, institutions and bodies, countries, symbols, history, facts and figures + Copyright, Author, Licence for image 1 @@ -97,15 +99,17 @@ exports[`Gallery Default renders correctly 1`] = ` > New digital strategy - Digital technologies have greatly changed our daily life. Therefore, Europe wants to make sure, that the digital transformation works for all its citizens. + + Digital technologies have greatly changed our daily life. Therefore, Europe wants to make sure, that the digital transformation works for all its citizens. + Copyright, Author, Licence for embedded media @@ -141,15 +145,17 @@ exports[`Gallery Default renders correctly 1`] = ` > Agriculture and culture - Information on agriculture, business, culture, health, etc. + + Information on agriculture, business, culture, health, etc. + Copyright, Author, Licence for image 2 @@ -199,15 +205,17 @@ exports[`Gallery Default renders correctly 1`] = ` > In the EU - Living, working, travelling in the EU + + Living, working, travelling in the EU + Copyright, Author, Licence for image 3 @@ -257,15 +265,17 @@ exports[`Gallery Default renders correctly 1`] = ` > Taxes and business - Information on taxes, customs, importing and exporting goods, financial support for businesses + + Information on taxes, customs, importing and exporting goods, financial support for businesses + Copyright, Author, Licence for image 4 @@ -330,15 +340,17 @@ exports[`Gallery Default renders correctly 1`] = ` > EU law - EU law + + EU law + Copyright, Author, Licence for image 5 @@ -388,15 +400,17 @@ exports[`Gallery Default renders correctly 1`] = ` > Lorem ipsum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl suscipit ac. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl suscipit ac. + Copyright, Author, Licence for image 6 @@ -432,15 +446,17 @@ exports[`Gallery Default renders correctly 1`] = ` > Teaching material - Teaching material about the EU, including books and maps + + Teaching material about the EU, including books and maps + Copyright, Author, Licence for image 7 @@ -489,15 +505,17 @@ exports[`Gallery Default renders correctly 1`] = ` > Climate change - Climate change and protect nature + + Climate change and protect nature + Copyright, Author, Licence for embedded media @@ -533,15 +551,17 @@ exports[`Gallery Default renders correctly 1`] = ` > About the EU - About the EU + + About the EU + Copyright, Author, Licence for image 9 @@ -577,15 +597,17 @@ exports[`Gallery Default renders correctly 1`] = ` > EU by topic - EU by topic + + EU by topic + Copyright, Author, Licence for image 10 @@ -602,6 +624,7 @@ exports[`Gallery Default renders correctly 1`] = ` >
-
- - 0 - - of - - 0 - +
+
+ + +
- - -
- - - View original - - - - + + Share + + + +
The EU in brief, institutions and bodies, countries, symbols, history, facts and figures
-
- Copyright, Author, Licence for image 1 -
@@ -879,15 +905,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > EU in brief - The EU in brief, institutions and bodies, countries, symbols, history, facts and figures + + The EU in brief, institutions and bodies, countries, symbols, history, facts and figures + Copyright, Author, Licence for image 1 @@ -936,15 +964,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > New digital strategy - Digital technologies have greatly changed our daily life. Therefore, Europe wants to make sure, that the digital transformation works for all its citizens. + + Digital technologies have greatly changed our daily life. Therefore, Europe wants to make sure, that the digital transformation works for all its citizens. + Copyright, Author, Licence for embedded media @@ -980,15 +1010,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > Agriculture and culture - Information on agriculture, business, culture, health, etc. + + Information on agriculture, business, culture, health, etc. + Copyright, Author, Licence for image 2 @@ -1038,15 +1070,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > In the EU - Living, working, travelling in the EU + + Living, working, travelling in the EU + Copyright, Author, Licence for image 3 @@ -1096,15 +1130,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > Taxes and business - Information on taxes, customs, importing and exporting goods, financial support for businesses + + Information on taxes, customs, importing and exporting goods, financial support for businesses + Copyright, Author, Licence for image 4 @@ -1169,15 +1205,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > EU law - EU law + + EU law + Copyright, Author, Licence for image 5 @@ -1227,15 +1265,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > Lorem ipsum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl suscipit ac. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl suscipit ac. + Copyright, Author, Licence for image 6 @@ -1271,15 +1311,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > Teaching material - Teaching material about the EU, including books and maps + + Teaching material about the EU, including books and maps + Copyright, Author, Licence for image 7 @@ -1328,15 +1370,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > Climate change - Climate change and protect nature + + Climate change and protect nature + Copyright, Author, Licence for embedded media @@ -1372,15 +1416,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > About the EU - About the EU + + About the EU + Copyright, Author, Licence for image 9 @@ -1416,15 +1462,17 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` > EU by topic - EU by topic + + EU by topic + Copyright, Author, Licence for image 10 @@ -1441,6 +1489,7 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` >
-
- - 0 - - of - - 0 - +
+
+ + +
- - -
- - - View original - - - - + + Share + + + +
The EU in brief, institutions and bodies, countries, symbols, history, facts and figures
-
- Copyright, Author, Licence for image 1 -
@@ -1716,15 +1768,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > EU in brief - The EU in brief, institutions and bodies, countries, symbols, history, facts and figures + + The EU in brief, institutions and bodies, countries, symbols, history, facts and figures + Copyright, Author, Licence for image 1 @@ -1773,15 +1827,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > New digital strategy - Digital technologies have greatly changed our daily life. Therefore, Europe wants to make sure, that the digital transformation works for all its citizens. + + Digital technologies have greatly changed our daily life. Therefore, Europe wants to make sure, that the digital transformation works for all its citizens. + Copyright, Author, Licence for embedded media @@ -1817,15 +1873,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > Agriculture and culture - Information on agriculture, business, culture, health, etc. + + Information on agriculture, business, culture, health, etc. + Copyright, Author, Licence for image 2 @@ -1875,15 +1933,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > In the EU - Living, working, travelling in the EU + + Living, working, travelling in the EU + Copyright, Author, Licence for image 3 @@ -1933,15 +1993,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > Taxes and business - Information on taxes, customs, importing and exporting goods, financial support for businesses + + Information on taxes, customs, importing and exporting goods, financial support for businesses + Copyright, Author, Licence for image 4 @@ -2006,15 +2068,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > EU law - EU law + + EU law + Copyright, Author, Licence for image 5 @@ -2064,15 +2128,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > Lorem ipsum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl suscipit ac. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl suscipit ac. + Copyright, Author, Licence for image 6 @@ -2108,15 +2174,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > Teaching material - Teaching material about the EU, including books and maps + + Teaching material about the EU, including books and maps + Copyright, Author, Licence for image 7 @@ -2165,15 +2233,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > Climate change - Climate change and protect nature + + Climate change and protect nature + Copyright, Author, Licence for embedded media @@ -2209,15 +2279,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > About the EU - About the EU + + About the EU + Copyright, Author, Licence for image 9 @@ -2253,15 +2325,17 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` > EU by topic - EU by topic + + EU by topic + Copyright, Author, Licence for image 10 @@ -2278,6 +2352,7 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` >
-
- - 0 - - of - - 0 - +
+
+ + +
- - -
- - - View original - - - - + + Share + + + +
The EU in brief, institutions and bodies, countries, symbols, history, facts and figures
-
- Copyright, Author, Licence for image 1 -
@@ -2553,15 +2631,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > EU in brief - The EU in brief, institutions and bodies, countries, symbols, history, facts and figures + + The EU in brief, institutions and bodies, countries, symbols, history, facts and figures + Copyright, Author, Licence for image 1 @@ -2610,15 +2690,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > New digital strategy - Digital technologies have greatly changed our daily life. Therefore, Europe wants to make sure, that the digital transformation works for all its citizens. + + Digital technologies have greatly changed our daily life. Therefore, Europe wants to make sure, that the digital transformation works for all its citizens. + Copyright, Author, Licence for embedded media @@ -2654,15 +2736,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > Agriculture and culture - Information on agriculture, business, culture, health, etc. + + Information on agriculture, business, culture, health, etc. + Copyright, Author, Licence for image 2 @@ -2712,15 +2796,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > In the EU - Living, working, travelling in the EU + + Living, working, travelling in the EU + Copyright, Author, Licence for image 3 @@ -2770,15 +2856,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > Taxes and business - Information on taxes, customs, importing and exporting goods, financial support for businesses + + Information on taxes, customs, importing and exporting goods, financial support for businesses + Copyright, Author, Licence for image 4 @@ -2843,15 +2931,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > EU law - EU law + + EU law + Copyright, Author, Licence for image 5 @@ -2901,15 +2991,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > Lorem ipsum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl suscipit ac. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a diam dignissim, suscipit augue in, fermentum nibh. Donec vestibulum justo cursus quam luctus, quis maximus nisi feugiat. Nullam lobortis tellus libero, vitae lobortis nisl suscipit ac. + Copyright, Author, Licence for image 6 @@ -2945,15 +3037,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > Teaching material - Teaching material about the EU, including books and maps + + Teaching material about the EU, including books and maps + Copyright, Author, Licence for image 7 @@ -3002,15 +3096,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > Climate change - Climate change and protect nature + + Climate change and protect nature + Copyright, Author, Licence for embedded media @@ -3046,15 +3142,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > About the EU - About the EU + + About the EU + Copyright, Author, Licence for image 9 @@ -3090,15 +3188,17 @@ exports[`Gallery Default renders correctly with old data 1`] = ` > EU by topic - EU by topic + + EU by topic + Copyright, Author, Licence for image 10 @@ -3115,6 +3215,7 @@ exports[`Gallery Default renders correctly with old data 1`] = ` >
-
- - 0 - - of - - 0 - +
+
+ + +
- - -
- - - View original - - - - + + Share + + + +
The EU in brief, institutions and bodies, countries, symbols, history, facts and figures
-
- Copyright, Author, Licence for image 1 -
diff --git a/src/implementations/twig/components/gallery/gallery-item.html.twig b/src/implementations/twig/components/gallery/gallery-item.html.twig index 52e908c4f89..4833b84c5f1 100644 --- a/src/implementations/twig/components/gallery/gallery-item.html.twig +++ b/src/implementations/twig/components/gallery/gallery-item.html.twig @@ -118,13 +118,17 @@ data-ecl-gallery-description > {%- if _item.title is defined and _item.title is not empty -%} - + {{- _item.title -}} {%- endif -%} - {{- _item.description -}} + {%- if _item.description is defined and _item.description is not empty -%} + + {{- _item.description -}} + + {%- endif -%} {%- if _item.meta is defined and _item.meta is not empty -%} - + {{- _item.meta -}} {%- endif -%} diff --git a/src/implementations/twig/components/gallery/gallery-overlay.html.twig b/src/implementations/twig/components/gallery/gallery-overlay.html.twig index 2fe41b65a4b..cb452bec2e9 100644 --- a/src/implementations/twig/components/gallery/gallery-overlay.html.twig +++ b/src/implementations/twig/components/gallery/gallery-overlay.html.twig @@ -62,88 +62,94 @@
-
- {% if _overlay.previous is defined and _overlay.previous is not empty %} - {% include '@ecl/button/button.html.twig' with _overlay.previous|merge({ - extra_classes: 'ecl-gallery__slider-previous', - type: _button_type, - variant: 'tertiary', - icon_position: 'before', - hide_label: true, - icon: _overlay.previous.icon|merge({ - size: 'm', - transform: 'rotate-270', - name: 'corner-arrow', - }), - extra_attributes: [ - { name: 'data-ecl-gallery-overlay-previous' }, - ], - }) only %} - {% endif %} - {% if _overlay.counter_separator is defined and _overlay.counter_separator is not empty %} -
- 0{{- ' ' -}} - {{- _overlay.counter_separator }}{{- ' ' -}} - 0 +
+
+ {% if _overlay.counter_separator is defined and _overlay.counter_separator is not empty %} +
+ 0{{- ' ' -}} + {{- _overlay.counter_separator }}{{- ' ' -}} + 0 +
+ {% endif %} + {% if _overlay.previous is not empty or _overlay.next is not empty %} +
+ {% if _overlay.previous is defined and _overlay.previous is not empty %} + {% include '@ecl/button/button.html.twig' with _overlay.previous|merge({ + extra_classes: 'ecl-gallery__slider-previous', + type: _button_type, + variant: 'tertiary', + icon_position: 'before', + hide_label: true, + icon: _overlay.previous.icon|merge({ + size: 'm', + transform: 'rotate-270', + name: 'corner-arrow', + }), + extra_attributes: [ + { name: 'data-ecl-gallery-overlay-previous' }, + ], + }) only %} + {% endif %} + {% if (_overlay.next is defined and _overlay.next is not empty) and + (_overlay.next.icon is defined and _overlay.next.icon is not empty) %} + {% include '@ecl/button/button.html.twig' with _overlay.next|merge({ + extra_classes: 'ecl-gallery__slider-next', + type: _button_type, + variant: 'tertiary', + hide_label: true, + icon: _overlay.next.icon|merge({ + size: 'm', + transform: 'rotate-90', + name: 'corner-arrow', + }), + extra_attributes: [ + { name: 'data-ecl-gallery-overlay-next' }, + ], + }) only %} + {% endif %} +
+ {% endif %} +
+
+ {% if _overlay.full_screen_label is not empty %} + {% include '@ecl/link/link.html.twig' with { + link: { + icon_position: 'after', + type: 'standalone', + inverted: true, + label: _overlay.full_screen_label ?: _overlay.download.link.label|default(''), + }, + icon: { + name: 'fullscreen', + size: 'fluid', + path: icon_path|default('') + }, + extra_classes: 'ecl-gallery__download', + extra_attributes: [ + { name: 'target', value: '_blank' }, + { name: 'data-ecl-gallery-overlay-download' }, + ], + } only %} + {% endif %} + {% if (_overlay.share is defined and _overlay.share is not empty) and + (_overlay.share.link is defined and _overlay.share.link is not empty) %} + {% include '@ecl/link/link.html.twig' with _overlay.share|merge({ + link: _overlay.share.link|merge({ + icon_position: 'after', + type: 'standalone', + inverted: true, + }), + icon: _overlay.share.icon|merge({ + name: 'share', + size: 'fluid', + }), + extra_classes: 'ecl-gallery__share', + extra_attributes: [ + { name: 'data-ecl-gallery-overlay-share' }, + ], + }) only %} + {% endif %}
- {% endif %} - {% if (_overlay.next is defined and _overlay.next is not empty) and - (_overlay.next.icon is defined and _overlay.next.icon is not empty) %} - {% include '@ecl/button/button.html.twig' with _overlay.next|merge({ - extra_classes: 'ecl-gallery__slider-next', - type: _button_type, - variant: 'tertiary', - hide_label: true, - icon: _overlay.next.icon|merge({ - size: 'm', - transform: 'rotate-90', - name: 'corner-arrow', - }), - extra_attributes: [ - { name: 'data-ecl-gallery-overlay-next' }, - ], - }) only %} - {% endif %} -
-
- {% if _overlay.full_screen_label is not empty %} - {% include '@ecl/link/link.html.twig' with { - link: { - icon_position: 'after', - type: 'standalone', - inverted: true, - label: _overlay.full_screen_label ?: _overlay.download.link.label|default(''), - }, - icon: { - name: 'fullscreen', - size: 'fluid', - path: icon_path|default('') - }, - extra_classes: 'ecl-gallery__download', - extra_attributes: [ - { name: 'target', value: '_blank' }, - { name: 'data-ecl-gallery-overlay-download' }, - ], - } only %} - {% endif %} - {% if (_overlay.share is defined and _overlay.share is not empty) and - (_overlay.share.link is defined and _overlay.share.link is not empty) %} - {% include '@ecl/link/link.html.twig' with _overlay.share|merge({ - link: _overlay.share.link|merge({ - icon_position: 'after', - type: 'standalone', - inverted: true, - }), - icon: _overlay.share.icon|merge({ - name: 'share', - size: 'fluid', - }), - extra_classes: 'ecl-gallery__share', - extra_attributes: [ - { name: 'data-ecl-gallery-overlay-share' }, - ], - }) only %} - {% endif %}
{% if _item.description is defined and _item.description is not empty %}
{% endif %} - {% if _item.meta is defined and _item.meta is not empty %} -
- {{- _item.meta -}} -
- {% endif %}
diff --git a/src/implementations/twig/components/gallery/gallery.html.twig b/src/implementations/twig/components/gallery/gallery.html.twig index 9cf176fbec1..3a1ec8d0be8 100644 --- a/src/implementations/twig/components/gallery/gallery.html.twig +++ b/src/implementations/twig/components/gallery/gallery.html.twig @@ -116,7 +116,7 @@
{%- if _expandable -%}
-
+
0 {{- _counter_label -}}
{% include '@ecl/button/button.html.twig' with { @@ -127,6 +127,7 @@ { name: 'data-ecl-gallery-all' }, { name: 'data-ecl-gallery-collapsed-label', value: _view_all_label }, { name: 'data-ecl-gallery-expanded-label', value: _view_all_expanded_label }, + { name: 'aria-describedby', value: _id ~ '-info' }, ], extra_classes: 'ecl-gallery__view-all', } only %} diff --git a/src/implementations/vanilla/components/button/button.scss b/src/implementations/vanilla/components/button/button.scss index ebe099a6fd1..32ca8118021 100644 --- a/src/implementations/vanilla/components/button/button.scss +++ b/src/implementations/vanilla/components/button/button.scss @@ -77,9 +77,8 @@ $min-width: 44px; // According to COMM every interactive element should be at le // Icon only $size-icon-only: calc( #{map.get($button, 'padding-vertical')} * 2 + #{map.get( - $theme, - 'line-height', - 'm' + $button, + 'line-height-icon' )} - #{map.get($button, 'border-width')} * 2 ); diff --git a/src/implementations/vanilla/components/gallery/gallery-print.scss b/src/implementations/vanilla/components/gallery/gallery-print.scss index 5be888a15ec..bd992464034 100644 --- a/src/implementations/vanilla/components/gallery/gallery-print.scss +++ b/src/implementations/vanilla/components/gallery/gallery-print.scss @@ -91,6 +91,11 @@ $gallery: null !default; display: none; } +.ecl-gallery__list .ecl-gallery__caption, +.ecl-gallery__list .ecl-gallery__meta { + display: none; +} + .ecl-gallery__footer { display: none; } diff --git a/src/implementations/vanilla/components/gallery/gallery.js b/src/implementations/vanilla/components/gallery/gallery.js index 43d9fe0c889..a82c2f762c0 100644 --- a/src/implementations/vanilla/components/gallery/gallery.js +++ b/src/implementations/vanilla/components/gallery/gallery.js @@ -6,7 +6,6 @@ import { createFocusTrap } from 'focus-trap'; * @param {Object} options * @param {String} options.galleryItemSelector Selector for gallery element * @param {String} options.descriptionSelector Selector for gallery description element - * @param {String} options.metaSelector Selector for gallery meta info element * @param {String} options.closeButtonSelector Selector for close button element * @param {String} options.allButtonSelector Selector for view all button element * @param {String} options.overlaySelector Selector for gallery overlay element @@ -18,7 +17,6 @@ import { createFocusTrap } from 'focus-trap'; * @param {String} options.overlayDownloadSelector Selector for gallery overlay download element * @param {String} options.overlayShareSelector Selector for gallery overlay share element * @param {String} options.overlayDescriptionSelector Selector for gallery overlay description element - * @param {String} options.overlayMetaSelector Selector for gallery overlay meta info element * @param {String} options.overlayPreviousSelector Selector for gallery overlay previous link element * @param {String} options.overlayNextSelector Selector for gallery overlay next link element * @param {String} options.videoPlayerLabelSelector Selector for video player label @@ -48,7 +46,6 @@ export class Gallery { galleryItemSelector = '[data-ecl-gallery-item]', descriptionSelector = '[data-ecl-gallery-description]', noOverlaySelector = 'data-ecl-gallery-no-overlay', - metaSelector = '[data-ecl-gallery-meta]', itemsLimitSelector = 'data-ecl-gallery-visible-items', closeButtonSelector = '[data-ecl-gallery-close]', viewAllSelector = '[data-ecl-gallery-all]', @@ -64,7 +61,6 @@ export class Gallery { overlayDownloadSelector = '[data-ecl-gallery-overlay-download]', overlayShareSelector = '[data-ecl-gallery-overlay-share]', overlayDescriptionSelector = '[data-ecl-gallery-overlay-description]', - overlayMetaSelector = '[data-ecl-gallery-overlay-meta]', overlayPreviousSelector = '[data-ecl-gallery-overlay-previous]', overlayNextSelector = '[data-ecl-gallery-overlay-next]', videoPlayerLabelSelector = 'data-ecl-gallery-player-label', @@ -85,7 +81,6 @@ export class Gallery { // Options this.galleryItemSelector = galleryItemSelector; this.descriptionSelector = descriptionSelector; - this.metaSelector = metaSelector; this.closeButtonSelector = closeButtonSelector; this.viewAllSelector = viewAllSelector; this.countSelector = countSelector; @@ -100,7 +95,6 @@ export class Gallery { this.overlayDownloadSelector = overlayDownloadSelector; this.overlayShareSelector = overlayShareSelector; this.overlayDescriptionSelector = overlayDescriptionSelector; - this.overlayMetaSelector = overlayMetaSelector; this.overlayPreviousSelector = overlayPreviousSelector; this.overlayNextSelector = overlayNextSelector; this.attachClickListener = attachClickListener; @@ -113,7 +107,6 @@ export class Gallery { // Private variables this.galleryItems = null; - this.meta = null; this.closeButton = null; this.viewAll = null; this.count = null; @@ -126,7 +119,6 @@ export class Gallery { this.overlayDownload = null; this.overlayShare = null; this.overlayDescription = null; - this.overlayMeta = null; this.overlayPrevious = null; this.overlayNext = null; this.selectedItem = null; @@ -207,7 +199,6 @@ export class Gallery { this.overlayDescriptionSelector, this.overlay, ); - this.overlayMeta = queryOne(this.overlayMetaSelector, this.overlay); this.overlayPrevious = queryOne( this.overlayPreviousSelector, this.overlay, @@ -575,10 +566,6 @@ export class Gallery { this.overlayDownload.hidden = true; } - // Update meta - const meta = queryOne(this.metaSelector, selectedItem); - this.overlayMeta.innerHTML = meta.innerHTML; - // Update description const description = queryOne(this.descriptionSelector, selectedItem); this.overlayDescription.innerHTML = description.innerHTML; diff --git a/src/implementations/vanilla/components/gallery/gallery.scss b/src/implementations/vanilla/components/gallery/gallery.scss index 0dd308ddd95..b87590649d7 100644 --- a/src/implementations/vanilla/components/gallery/gallery.scss +++ b/src/implementations/vanilla/components/gallery/gallery.scss @@ -5,6 +5,7 @@ @use 'sass:map'; @use '@ecl/vanilla-layout-grid/mixins/breakpoints'; +@use '@ecl/vanilla-utility-screen-reader/screen-reader'; // Exposed variables $theme: null !default; @@ -14,6 +15,8 @@ $gallery: null !default; $_description-color: map.get($theme, 'color', 'white'); $_image-height: 192px; $_image-height-mobile: 260px; +$_description-height-mobile: 132px; +$_description-height-desktop: 108px; .ecl-gallery { margin: 0; @@ -148,14 +151,9 @@ $_image-height-mobile: 260px; } } -.ecl-gallery__meta, -.ecl-gallery__title { - height: 1px; - left: -10000px; - overflow: hidden; - position: absolute; - top: auto; - width: 1px; +.ecl-gallery__list .ecl-gallery__caption, +.ecl-gallery__list .ecl-gallery__meta { + @include screen-reader.sr-only; } .ecl-gallery__info { @@ -184,7 +182,6 @@ $_image-height-mobile: 260px; .ecl-gallery__view-all { justify-self: flex-end; - margin-bottom: calc(-1 * var(--s-2xs)); margin-inline-start: var(--s-m); } @@ -231,19 +228,23 @@ $_image-height-mobile: 260px; } .ecl-gallery__footer { - align-items: baseline; + align-items: center; flex-direction: row; justify-content: flex-start; } .ecl-gallery__info { - margin-inline-start: auto; - order: 2; + flex-grow: 1; + } + + .ecl-gallery__info-total { + flex-grow: 0; } .ecl-gallery__footer-link { - order: 1; - padding-top: 0; + align-items: center; + display: flex; + margin-top: 0; width: auto; } @@ -289,7 +290,6 @@ $_image-height-mobile: 260px; .ecl-gallery__overlay { background-color: map.get($gallery, 'overlay-background'); backdrop-filter: blur(25px); - border-radius: map.get($gallery, 'overlay-radius'); border-width: 0; box-shadow: map.get($gallery, 'overlay-shadow'); display: none; @@ -327,6 +327,10 @@ $_image-height-mobile: 260px; } } +.ecl-gallery__controls { + display: inline-flex; +} + .ecl-gallery__slider { align-items: center; display: flex; @@ -371,9 +375,16 @@ $_image-height-mobile: 260px; justify-content: space-between; } +.ecl-gallery__slider-previous { + margin-inline-start: var(--s-xl); +} + +.ecl-gallery__slider-next { + margin-inline-start: var(--s-m); +} + .ecl-gallery__slider-previous, .ecl-gallery__slider-next { - align-self: flex-end; background: map.get($theme, 'color', 'white'); flex-shrink: 0; @@ -394,7 +405,6 @@ $_image-height-mobile: 260px; display: flex; flex-direction: column; flex-shrink: 0; - height: 240px; padding: var(--s-xl) var(--s-xs); .ecl-container { @@ -410,8 +420,8 @@ $_image-height-mobile: 260px; display: inline-flex; font: var(--f-m); font-weight: map.get($gallery, 'counter-font-weight'); - margin: 0 var(--s-xs); - padding: 0 var(--s-m); + margin: 0; + padding: 0 var(--s-xs); white-space: pre-wrap; } @@ -430,36 +440,32 @@ $_image-height-mobile: 260px; } } +.ecl-gallery__detail-container { + display: flex; + flex-direction: column; +} + .ecl-gallery__detail-description { font: var(--f-m); + height: $_description-height-mobile; margin-top: var(--s-s); - max-width: var(--max-w); - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} + overflow: auto; -.ecl-gallery__detail-meta { - color: map.get($theme, 'color', 'white'); - font: var(--f-m); - max-width: var(--max-w); - display: -webkit-box; - -webkit-line-clamp: 1; - -webkit-box-orient: vertical; - overflow: hidden; -} + .ecl-gallery__title { + display: block; + font-weight: map.get($theme, 'font-weight', 'bold'); + } -@include breakpoints.up('s') { - .ecl-gallery__pager { - margin-top: 0; + .ecl-gallery__meta { + display: block; + margin-top: var(--s-s); } } /* stylelint-disable-next-line order/order */ @include breakpoints.up('m') { .ecl-gallery__detail-description { - min-height: 0; + height: $_description-height-desktop; } .ecl-gallery__slider { @@ -469,51 +475,26 @@ $_image-height-mobile: 260px; align-items: center; overflow: hidden; } -} - -@include breakpoints.up('xl') { - .ecl-gallery__slider-previous, - .ecl-gallery__slider-next { - margin: 0; - position: absolute; - top: 40%; - transform: translateY(-50%); - z-index: 1; - } - - .ecl-gallery__pager { - justify-content: flex-end; - } - .ecl-gallery__slider-previous { - left: var(--s-m); + .ecl-gallery__detail-actions { + margin-top: 0; } - .ecl-gallery__slider-next { - margin: 0; - right: var(--s-m); + .ecl-gallery__detail-container { + align-items: center; + flex-direction: row-reverse; } - .ecl-gallery__detail { - height: 200px; + .ecl-gallery__pager { + flex-grow: 1; + justify-content: flex-end; } +} +@include breakpoints.up('xl') { .ecl-gallery__detail .ecl-container { display: flex; flex-direction: column; width: 1140px; } - - .ecl-gallery__detail-actions { - margin-top: map.get($gallery, 'actions-margin-desktop'); - order: 2; - } - - .ecl-gallery__detail-description { - order: 3; - } - - .ecl-gallery__detail-meta { - order: 4; - } } diff --git a/src/implementations/vanilla/components/gallery/package.json b/src/implementations/vanilla/components/gallery/package.json index 4e2722f82c1..9a549f4aadf 100644 --- a/src/implementations/vanilla/components/gallery/package.json +++ b/src/implementations/vanilla/components/gallery/package.json @@ -11,6 +11,7 @@ "dependencies": { "@ecl/dom-utils": "4.2.3", "@ecl/vanilla-layout-grid": "4.2.3", + "@ecl/vanilla-utility-screen-reader": "4.2.3", "focus-trap": "7.5.4" }, "publishConfig": { diff --git a/src/themes/ec/theme.scss b/src/themes/ec/theme.scss index a66f7ea031a..6c3294ccd41 100644 --- a/src/themes/ec/theme.scss +++ b/src/themes/ec/theme.scss @@ -21,9 +21,12 @@ $theme: ( spacing-print: index.$spacing-print, font-family: index.$font-family, font-size: index.$font-size, + font-size-ui: index.$font-size-ui, line-height: index.$line-height, + line-height-ui: index.$line-height-ui, font-weight: index.$font-weight, font: index.$font, + font-ui: index.$font-ui, font-family-print: index.$font-family-print, font-size-print: index.$font-size-print, line-height-print: index.$line-height-print, diff --git a/src/themes/ec/variables/_button.scss b/src/themes/ec/variables/_button.scss index 57b1be35525..b0613db9ab6 100644 --- a/src/themes/ec/variables/_button.scss +++ b/src/themes/ec/variables/_button.scss @@ -9,6 +9,7 @@ $button: ( outline-width: 1px, padding-horizontal: var(--s-m), padding-vertical: var(--s-xs), + line-height-icon: map.get($line-height-ui, 'm'), primary: ( background: var(--c-p), color: map.get($color, 'white'), diff --git a/src/themes/ec/variables/_gallery.scss b/src/themes/ec/variables/_gallery.scss index b4164affbbe..39b7866641b 100644 --- a/src/themes/ec/variables/_gallery.scss +++ b/src/themes/ec/variables/_gallery.scss @@ -2,13 +2,11 @@ @use '../index' as *; $gallery: ( - actions-margin: var(--s-xl), - actions-margin-desktop: var(--s-xs), + actions-margin: var(--s-s), counter-font-weight: map.get($font-weight, 'regular'), detail-color: map.get($color, 'white'), description-background: var(--c-ov-l), gallery-info-color: var(--c-d), overlay-background: var(--c-ov-d), - overlay-radius: 0, overlay-shadow: none, ); diff --git a/src/themes/eu/theme.scss b/src/themes/eu/theme.scss index 7fca919201a..7516a228e76 100644 --- a/src/themes/eu/theme.scss +++ b/src/themes/eu/theme.scss @@ -25,17 +25,24 @@ $theme: ( spacing-print: index.$spacing-print, font-family: index.$font-family, font-size: index.$font-size, + font-size-ui: index.$font-size-ui, line-height: index.$line-height, - line-height-prolonged: index.$line-height-prolonged, + line-height-ui: index.$line-height-ui, font-weight: index.$font-weight, font: index.$font, - font-prolonged: index.$font-prolonged, + font-ui: index.$font-ui, font-family-print: index.$font-family-print, font-size-print: index.$font-size-print, + font-size-ui-print: index.$font-size-print, line-height-print: index.$line-height-print, - line-height-prolonged-print: index.$line-height-prolonged-print, + line-height-ui-print: index.$line-height-print, font-weight-print: index.$font-weight-print, font-print: index.$font-print, - font-prolonged-print: index.$font-prolonged-print, + font-ui-print: index.$font-print, z-index: index.$z-index, + // DEPRECATED + line-height-prolonged: index.$line-height-prolonged, + font-prolonged: index.$font-prolonged, + line-height-prolonged-print: index.$line-height-prolonged-print, + font-prolonged-print: index.$font-prolonged-print, ); diff --git a/src/themes/eu/variables/_button.scss b/src/themes/eu/variables/_button.scss index a42e2610714..ec02839b66a 100644 --- a/src/themes/eu/variables/_button.scss +++ b/src/themes/eu/variables/_button.scss @@ -9,6 +9,7 @@ $button: ( outline-width: 1px, padding-horizontal: var(--s-m), padding-vertical: var(--s-s), + line-height-icon: map.get($line-height, 's'), primary: ( background: var(--c-p), color: map.get($color, 'white'), diff --git a/src/themes/eu/variables/_gallery.scss b/src/themes/eu/variables/_gallery.scss index 9a4599d507f..5c1bcc874f5 100644 --- a/src/themes/eu/variables/_gallery.scss +++ b/src/themes/eu/variables/_gallery.scss @@ -3,12 +3,10 @@ $gallery: ( actions-margin: var(--s-m), - actions-margin-desktop: var(--s-m), counter-font-weight: map.get($font-weight, 'bold'), description-background: color-mix(in srgb, var(--c-d) 65%, transparent), detail-color: map.get($color, 'white'), gallery-info-color: var(--c-d-140), overlay-background: color-mix(in srgb, var(--c-d) 90%, transparent), - overlay-radius: 8px, overlay-shadow: var(--sh-3), );