diff --git a/.size-limit.json b/.size-limit.json index 6bffd89fe1b..96830fbd57c 100644 --- a/.size-limit.json +++ b/.size-limit.json @@ -13,13 +13,13 @@ }, { "path": "dist/packages/ec/scripts/ecl-ec.js", - "limit": "198 KB", + "limit": "200 KB", "webpack": false, "gzip": false }, { "path": "dist/packages/eu/scripts/ecl-eu.js", - "limit": "198 KB", + "limit": "200 KB", "webpack": false, "gzip": false }, diff --git a/src/implementations/twig/components/gallery/README.md b/src/implementations/twig/components/gallery/README.md index 4885899d622..2a1217455d3 100644 --- a/src/implementations/twig/components/gallery/README.md +++ b/src/implementations/twig/components/gallery/README.md @@ -25,8 +25,11 @@ npm install --save @ecl/twig-component-gallery - "video" (optional) (object) (default: {}) - "embedded_video" (optional) (object) (default: {}) - "share_path" (optional) (string) (default: '') +- **"expandable"** (boolean) (default: true) collapsible/expandable gallery +- **"icon_path"** (string) (default: '') Path to the icon sprite - **"footer"** (object) (default: {}) Footer link - **"view_all_label"** (string) (default: '') Label of the view all button +- **"view_all_expanded_label"** (string) (default: '') Label when the gallery is expanded - **"counter_label"** (string) (default: '') Label of the counter - **"selected_item_id"** (int) (default: 0) - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated) 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 b233aedd8bf..90c7b40469d 100644 --- a/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap +++ b/src/implementations/twig/components/gallery/__snapshots__/gallery.test.js.snap @@ -32,7 +32,7 @@ exports[`Gallery Default renders correctly 1`] = ` class="ecl-gallery__description" data-ecl-gallery-description="" > - 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 +
+ +
New digital strategy -
- New digital strategy + New digital strategy - Information on agriculture, business, culture, health, etc. + Information on agriculture, business, culture, health, etc. - Living, working, travelling in the EU + Living, working, travelling in the EU - Information on taxes, customs, importing and exporting goods, financial support for businesses + Information on taxes, customs, importing and exporting goods, financial support for businesses +
+ +
-
- EU law + EU law - Find official documents, publications, statistics, open data and more resources + Find official documents, publications, statistics, open data and more resources - Teaching material about the EU, including books and maps + Teaching material about the EU, including books and maps +
+ +
Climate change and protect nature -
- Climate change and protect nature + Climate change and protect nature - About the EU + About the EU - EU by topic + EU by topic -
- - 0 - - Media files in this gallery -
-
- - - Link to further media items - -
+
+ - - - + + Further media items + + + +
- - @@ -700,7 +727,7 @@ exports[`Gallery Default renders correctly with extra attributes 1`] = ` class="ecl-gallery__description" data-ecl-gallery-description="" > - 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 +
+ +
New digital strategy -
- New digital strategy + New digital strategy - Information on agriculture, business, culture, health, etc. + Information on agriculture, business, culture, health, etc. - Living, working, travelling in the EU + Living, working, travelling in the EU - Information on taxes, customs, importing and exporting goods, financial support for businesses + Information on taxes, customs, importing and exporting goods, financial support for businesses +
+ +
-
- EU law + EU law - Find official documents, publications, statistics, open data and more resources + Find official documents, publications, statistics, open data and more resources - Teaching material about the EU, including books and maps + Teaching material about the EU, including books and maps +
+ +
Climate change and protect nature -
- Climate change and protect nature + Climate change and protect nature - About the EU + About the EU - EU by topic + EU by topic -
- - 0 - - Media files in this gallery -
-
- - + 0 + + Media files in this gallery +
+
+ - - - + + Further media items + + + +
- - +
- Next - - + 0 + +
+ - - @@ -1366,7 +1420,7 @@ exports[`Gallery Default renders correctly with extra class names 1`] = ` class="ecl-gallery__description" data-ecl-gallery-description="" > - 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 +
+ +
New digital strategy -
- New digital strategy + New digital strategy - Information on agriculture, business, culture, health, etc. + Information on agriculture, business, culture, health, etc. - Living, working, travelling in the EU + Living, working, travelling in the EU - Information on taxes, customs, importing and exporting goods, financial support for businesses + Information on taxes, customs, importing and exporting goods, financial support for businesses +
+ +
-
- EU law + EU law - Find official documents, publications, statistics, open data and more resources + Find official documents, publications, statistics, open data and more resources - Teaching material about the EU, including books and maps + Teaching material about the EU, including books and maps +
+ +
Climate change and protect nature -
- Climate change and protect nature + Climate change and protect nature - About the EU + About the EU - EU by topic + EU by topic -
- - 0 - - Media files in this gallery -
-
- - - Link to further media items - - - + See more + +
+
+ + + Further media items + + + +
- - diff --git a/src/implementations/twig/components/gallery/gallery-item.html.twig b/src/implementations/twig/components/gallery/gallery-item.html.twig index a8cf59466b7..db35ca930ae 100644 --- a/src/implementations/twig/components/gallery/gallery-item.html.twig +++ b/src/implementations/twig/components/gallery/gallery-item.html.twig @@ -11,6 +11,7 @@ - "video" (optional) (object) (default: {}) - "embedded_video" (optional) (object) (default: {}) - "share_path" (optional) (string) (default: '') + - "icon_path": (string) (default '') - "extra_classes" (optional) (string) (default: '') - "extra_attributes" (optional) (array) (default: []) - "name" (string) Attribute name, eg. 'data-test' @@ -26,6 +27,7 @@ {% set _media_share_path = '' %} {% set _media_iframe_href = '' %} {% set _image_alt = '' %} +{% set _icon_path = icon_path|default('') %} {% set _item = item|default({}) %} {% set _has_icon = (_item.icon is defined and _item.icon is not empty) and @@ -86,35 +88,40 @@ > {% if _item is not empty %}
- {% if _item.video is defined and _item.video is not empty %} - {% include '@ecl/gallery/gallery-video.html.twig' %} - {% else %} - {{ _image_alt }} - {% endif %} - {% if _has_icon %} - {% include '@ecl/icon/icon.html.twig' with { - icon: _item.icon|merge({ - size: "l", - }), - extra_classes: 'ecl-gallery__image-icon', - } only %} - {% endif %} + {% if (_item.video is not empty or _item.embedded_video is not empty) and _icon_path is not empty %} +
+ {%- include '@ecl/icon/icon.html.twig' with { + icon: { + name: 'play-filled', + size: 'l', + path: _icon_path, + color: 'inverted', + }, + extra_classes: 'ecl-gallery__item-icon', + } only %} +
+ {% endif %} + {% if _item.video is defined and _item.video is not empty %} + {% include '@ecl/gallery/gallery-video.html.twig' %} + {% else %} + {{ _image_alt }} + {% endif %}
+ {%- if _has_icon -%} + {%- include '@ecl/icon/icon.html.twig' with { + icon: _item.icon, + extra_classes: 'ecl-gallery__description-icon', + } only %} + {%- endif -%} {{- _item.description -}} - {% if _has_icon %} - {%- include '@ecl/icon/icon.html.twig' with { - icon: _item.icon, - extra_classes: 'ecl-gallery__description-icon', - } only %} - {% endif %} - {% if _item.meta is defined and _item.meta is not empty %} + {%- if _item.meta is defined and _item.meta is not empty -%} {{- _item.meta -}} - {% endif %} + {%- endif -%}
{% endif %} diff --git a/src/implementations/twig/components/gallery/gallery-overlay.html.twig b/src/implementations/twig/components/gallery/gallery-overlay.html.twig index a2d44a41cc0..d323c7e5ae7 100644 --- a/src/implementations/twig/components/gallery/gallery-overlay.html.twig +++ b/src/implementations/twig/components/gallery/gallery-overlay.html.twig @@ -58,98 +58,104 @@
- {% 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: _button_variant, - icon_position: 'before', - icon: _overlay.previous.icon|merge({ - size: 's', - 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: _button_variant, - icon: _overlay.next.icon|merge({ - size: 's', - transform: 'rotate-90', - name: 'corner-arrow', - }), - extra_attributes: [ - { name: 'data-ecl-gallery-overlay-next' }, - ], - }) only %} - {% endif %}
- {% if _overlay.counter_separator is defined and _overlay.counter_separator is not empty %} -
- 0{{- ' ' -}} - {{- _overlay.counter_separator }}{{- ' ' -}} - 0 -
- {% endif %} -
- {% if (_overlay.download is defined and _overlay.download is not empty) and - (_overlay.download.link is defined and _overlay.download.link is not empty) %} - {% include '@ecl/link/link.html.twig' with _overlay.download|merge({ - link: _overlay.download.link|merge({ - icon_position: 'after', - type: 'standalone', - }), - icon: _overlay.download.icon|merge({ - name: 'download', - size: 'fluid', - }), - extra_classes: 'ecl-gallery__download', - extra_attributes: [ - { name: 'data-ecl-gallery-overlay-download' }, - { name: 'download' }, - ], - }) only %} +
+
+ {% 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: _button_variant, + 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 +
+ {% 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: _button_variant, + 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 _item.meta is defined and _item.meta is not empty %} +
+ {{- _item.meta -}} +
{% 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', - }), - icon: _overlay.share.icon|merge({ - name: 'share', - size: 'fluid', - }), - extra_classes: 'ecl-gallery__share', - extra_attributes: [ - { name: 'data-ecl-gallery-overlay-share' }, - ], - }) only %} + {% if _item.description is defined and _item.description is not empty %} +
+ {{- _item.description -}} +
{% endif %} +
+ {% if (_overlay.download is defined and _overlay.download is not empty) and + (_overlay.download.link is defined and _overlay.download.link is not empty) %} + {% include '@ecl/link/link.html.twig' with _overlay.download|merge({ + link: _overlay.download.link|merge({ + icon_position: 'after', + type: 'standalone', + }), + icon: _overlay.download.icon|merge({ + name: 'download', + size: 'fluid', + }), + extra_classes: 'ecl-gallery__download', + extra_attributes: [ + { name: 'data-ecl-gallery-overlay-download' }, + { name: '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', + }), + 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 %} -
- {{- _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.html.twig b/src/implementations/twig/components/gallery/gallery.html.twig index 45f8d6b3fc7..57ebf350bf6 100644 --- a/src/implementations/twig/components/gallery/gallery.html.twig +++ b/src/implementations/twig/components/gallery/gallery.html.twig @@ -4,6 +4,8 @@ Parameters: - "counter_label" (string) (default: '') Label of the counter - "view_all_label" (string) (default: '') Label of the view all button + - "view_all_expanded_label" (string) (default: '') Label of the view all button when expanded + - "expandable": (boolean) (default: true) If false all items will be visible by default - "overlay" (object) (default: {}) - "close" (object) (default: {}): object of type button - "previous" (object) (default: {}): object of type button @@ -22,6 +24,7 @@ - "video" (optional) (object) (default: {}) - "embedded_video" (optional) (object) (default: {}) - "share_path" (optional) (string) (default: '') + - "icon_path": (string) (default: '') - "selected_item_id" (int) (default: 0) - "extra_classes" (optional) (string) (default: '') - "extra_attributes" (optional) (array) (default: []) @@ -36,8 +39,11 @@ {% set _overlay = overlay|default({}) %} {% set _counter_label = counter_label|default('') %} {% set _view_all_label = view_all_label|default('') %} +{% set _view_all_expanded_label = view_all_expanded_label|default('') %} {% set _items = items|default([]) %} {% set _footer = footer|default({}) %} +{% set _icon_path = icon_path|default('') %} +{% set _expandable = expandable ?? true %} {% set _selected_item_id = selected_item_id|default(0) %} {% set _extra_attributes = 'data-ecl-auto-init="Gallery"' %} {% set _overlay_class = '' %} @@ -49,6 +55,10 @@ {% set _css_class = _css_class ~ ' ' ~ extra_classes %} {% endif %} +{% if not _expandable %} + {% set _extra_attributes = _extra_attributes ~ ' data-ecl-gallery-not-expandable' %} +{% endif %} + {% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %} {% for attr in extra_attributes %} {% if attr.value is defined %} @@ -74,34 +84,41 @@ {% endif %} {% include '@ecl/gallery/gallery-item.html.twig' with { item: _item, + icon_path: _icon_path, extra_attributes: _item_attrs, extra_classes: _item_class, } only %} {% endfor %} -
- 0 {{ _counter_label -}} -
- - {% include '@ecl/button/button.html.twig' with { - label: _view_all_label, - type: 'submit', - variant: 'ghost', - extra_attributes: [{ name: 'data-ecl-gallery-all' }], - extra_classes: 'ecl-gallery__view-all', - } only %} - -{% if _footer is not empty and _footer.link is defined and _footer.link is not empty %}
- {% include '@ecl/link/link.html.twig' with { - link: _footer.link|merge({ - type: 'standalone', - icon_position: 'after', - }), - icon: _footer.icon - } only %} +
+ 0 {{- _counter_label -}} + {%- if _expandable -%} + {% include '@ecl/button/button.html.twig' with { + label: _view_all_label, + type: 'submit', + variant: 'ghost', + extra_attributes: [ + { 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 }, + ], + extra_classes: 'ecl-gallery__view-all', + } only %} + {%- endif -%} +
+ {% if _footer.link is defined and _footer.link is not empty %} +
+ {% include '@ecl/link/link.html.twig' with { + link: _footer.link|merge({ + type: 'standalone', + icon_position: 'after', + }), + icon: _footer.icon + } only %} +
+ {% endif %}
-{% endif %} {% set _selected_item = {} %} {% if _items[_selected_item_id] is defined and _items[_selected_item_id] is not empty %} {% set _selected_item = _items[_selected_item_id] %} @@ -117,6 +134,7 @@ extra_attributes: _overlay_attrs, extra_classes: _overlay_class, item: _selected_item, + icon_path: _icon_path, } only %} diff --git a/src/implementations/twig/components/gallery/gallery.story.js b/src/implementations/twig/components/gallery/gallery.story.js index c7a5d30d823..2e9a569407b 100644 --- a/src/implementations/twig/components/gallery/gallery.story.js +++ b/src/implementations/twig/components/gallery/gallery.story.js @@ -10,12 +10,26 @@ export default { title: 'Components/Gallery', decorators: [withNotes, withCode], parameters: { - controls: { disable: true }, layout: 'fullscreen', }, }; -export const Default = () => gallery(correctPaths(specs)); +const prepareData = (data, args) => Object.assign(correctPaths(data), args); + +export const Default = (args) => gallery(prepareData(specs, args)); Default.storyName = 'default'; Default.parameters = { notes: { markdown: notes, json: specs } }; +Default.args = { + expandable: true, +}; +Default.argTypes = { + expandable: { + control: { type: 'boolean' }, + description: 'expandable gallery', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'true' }, + }, + }, +}; diff --git a/src/implementations/vanilla/components/gallery/_gallery.scss b/src/implementations/vanilla/components/gallery/_gallery.scss index 80bbf1ad09f..039763666dc 100644 --- a/src/implementations/vanilla/components/gallery/_gallery.scss +++ b/src/implementations/vanilla/components/gallery/_gallery.scss @@ -14,7 +14,8 @@ $_description-icon: null !default; $_description-icon-mobile: null !default; $_gallery-info-color: null !default; $_gallery-info-font: null !default; -$_image-height: 185px; +$_image-height: 192px; +$_image-height-mobile: 260px; $_item-outline: null !default; $_item-outline-offset: null !default; @@ -32,8 +33,10 @@ $_item-outline-offset: null !default; .ecl-gallery__item { display: block; + height: $_image-height-mobile; margin-bottom: 0; margin-top: map.get(theme.$spacing, 'xs'); + position: relative; } .ecl-gallery__item--hidden { @@ -44,7 +47,27 @@ $_item-outline-offset: null !default; text-decoration: none; } +.ecl-gallery__item-icon-wrapper { + background: map.get(theme.$color, 'grey-100'); + box-shadow: 0 0 15px 6px rgba(map.get(theme.$color, 'grey-100'), 0.55); + display: inline-block; + position: absolute; + left: 50%; + top: 50%; + border-radius: 50%; + width: 2rem; + height: 2rem; + transform: translate(-50%, -50%); +} + +.ecl-gallery__item-icon { + transform: scale(1.2); +} + .ecl-gallery__image-container { + display: flex; + height: $_image-height-mobile; + position: relative; background-color: map.get(theme.$color, 'black-100'); flex-grow: 1; margin: 0; @@ -54,8 +77,8 @@ $_item-outline-offset: null !default; outline: none; .ecl-gallery__image-container { - outline: 4px $_description-background solid; - outline-offset: -4px; + outline: 2px solid map.get(theme.$color, 'blue-100'); + outline-offset: 2px; } } @@ -86,17 +109,36 @@ $_item-outline-offset: null !default; align-items: center; background-color: $_description-background; color: $_description-color; - display: flex; - font: map.get(theme.$font, 's'); - justify-content: space-between; - padding: map.get(theme.$spacing, 's'); + font: map.get(theme.$font-prolonged, 's'); + padding: map.get(theme.$spacing, '2xs') map.get(theme.$spacing, 'xs'); text-decoration: none; - width: calc(100% - (#{map.get(theme.$spacing, 's')} * 2)); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: text-bottom; + width: calc(100% - (#{map.get(theme.$spacing, 'xs')} * 2)); + bottom: 0; + display: none; + left: 0; + position: absolute; +} + +.ecl-gallery__item-link:hover, +.ecl-gallery__item-link:focus-visible { + .ecl-gallery__description { + display: block; + } + + .ecl-gallery__image-icon { + display: none; + } } .ecl-gallery__description-icon { flex-shrink: 0; height: $_description-icon-mobile; + margin-inline-end: map.get(theme.$spacing, 'xs'); + vertical-align: text-top; width: $_description-icon-mobile; } @@ -111,18 +153,33 @@ $_item-outline-offset: null !default; .ecl-gallery__info { color: $_gallery-info-color; - float: end; font: $_gallery-info-font; - padding: map.get(theme.$spacing, 'm') map.get(theme.$spacing, 's'); + text-align: right; } -.ecl-gallery__view-all { - margin: map.get(theme.$spacing, '2xs'); +.ecl-gallery__info-total { + margin-inline-end: map.get(theme.$spacing, '2xs'); } .ecl-gallery__footer { - border-top: 1px solid map.get(theme.$color, 'grey-10'); - padding-top: map.get(theme.$spacing, 'm'); + display: flex; + flex-direction: column; + align-items: flex-end; + padding-top: map.get(theme.$spacing, 'xs'); + text-align: right; +} + +.ecl-gallery__view-all { + margin-bottom: -#{map.get(theme.$spacing, '2xs')}; + margin-inline-start: map.get(theme.$spacing, 'xs'); +} + +.ecl-gallery__footer-link { + border-top: 1px solid map.get(theme.$color, 'grey-15'); + text-align: right; + margin-top: map.get(theme.$spacing, 's'); + padding-top: map.get(theme.$spacing, 'xs'); + width: 100%; } /* stylelint-disable-next-line order/order */ @@ -131,24 +188,17 @@ $_item-outline-offset: null !default; display: flex; flex-direction: row; flex-wrap: wrap; + margin-bottom: map.get(theme.$spacing, 'xs'); margin-inline-start: -#{map.get(theme.$spacing, 'xs')}; } .ecl-gallery__item { flex-grow: 1; - height: $_image-height; margin-inline-start: map.get(theme.$spacing, 'xs'); - min-width: $_image-height; - position: relative; - } - - .ecl-gallery__image-container { - display: flex; - position: relative; + min-width: $_image-height-mobile; } .ecl-gallery__image { - height: $_image-height; margin: 0 auto; width: auto; } @@ -163,30 +213,48 @@ $_item-outline-offset: null !default; right: 0; } - .ecl-gallery__description { - bottom: 0; - display: none; - left: 0; - max-height: $_image-height; - padding: map.get(theme.$spacing, 'xs'); - position: absolute; - width: calc(100% - (#{map.get(theme.$spacing, 'xs')} * 2)); - } - .ecl-gallery__description-icon { height: $_description-icon; width: $_description-icon; } - .ecl-gallery__item-link:hover, - .ecl-gallery__item-link:focus-visible { - .ecl-gallery__description { - display: flex; - } + .ecl-gallery__footer { + flex-direction: row; + align-items: flex-start; + } + + .ecl-gallery__info { + align-self: flex-end; + margin-inline-start: auto; + order: 2; + } + + .ecl-gallery__footer-link { + border-top: none; + order: 1; + margin-top: 0; + padding-top: 0; + text-align: left; + width: auto; + } - .ecl-gallery__image-icon { - display: none; - } + .ecl-gallery__view-all { + margin-top: -#{map.get(theme.$spacing, 's')}; + } +} + +@include breakpoints.up('l') { + .ecl-gallery__item, + .ecl-gallery__image { + height: $_image-height; + } + + .ecl-gallery__image { + min-width: $_image-height; + } + + .ecl-gallery__image-container { + height: $_image-height; } } @@ -199,7 +267,7 @@ $_arrow-margin: null !default; $_arrow-margins: null !default; $_close-button-color: null !default; $_description-margin-desktop: null !default; -$_overlay-background: map.get(theme.$color, 'black-100'); +$_overlay-background: rgba(map.get(theme.$color, 'black'), 0.7); $_overlay-description-color: null !default; $_overlay-radius: null !default; $_overlay-shadow: null !default; @@ -212,6 +280,7 @@ $_overlay-links-hover-color: null !default; .ecl-gallery__overlay { background-color: $_overlay-background; + backdrop-filter: blur(50px); border-radius: $_overlay-radius; border-width: 0; box-shadow: $_overlay-shadow; @@ -235,7 +304,6 @@ $_overlay-links-hover-color: null !default; } .ecl-gallery__close { - background-color: $_detail-background; display: flex; flex-shrink: 0; justify-content: flex-end; @@ -244,16 +312,18 @@ $_overlay-links-hover-color: null !default; .ecl-gallery__close-button { color: $_close-button-color; font-weight: map.get(theme.$font-weight, 'regular'); - margin: map.get(theme.$spacing, '2xs'); + margin: map.get(theme.$spacing, 'xs'); &:hover, &:focus-visible { - color: $_overlay-links-hover-color; + color: map.get(theme.$color, 'white-100'); + outline: 2px solid map.get(theme.$color, 'white-100'); } } .ecl-gallery__slider { align-items: center; + background: map.get(theme.$color, 'grey-15'); display: flex; flex-direction: column; flex-grow: 1; @@ -286,43 +356,65 @@ $_overlay-links-hover-color: null !default; width: calc(100% - map.get(theme.$spacing, 'l')); } -.ecl-gallery__slider-previous { - align-self: flex-start; - color: map.get(theme.$color, 'white'); - flex-shrink: 0; - margin: $_arrow-margins; - - &:hover, - &:focus-visible { - color: map.get(theme.$color, 'yellow-25'); - } +.ecl-gallery__pager { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; } +.ecl-gallery__slider-previous, .ecl-gallery__slider-next { align-self: flex-end; - bottom: 0; color: map.get(theme.$color, 'white'); flex-shrink: 0; - margin: $_arrow-margins; - position: absolute; + padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'xs') + map.get(theme.$spacing, 's') map.get(theme.$spacing, 's'); +} - &:hover, - &:focus-visible { - color: map.get(theme.$color, 'yellow-25'); +.ecl-gallery__slider-next { + padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 's') + map.get(theme.$spacing, 's') map.get(theme.$spacing, 'xs'); +} + +.ecl-gallery__slider-next:hover, +.ecl-gallery__slider-previous:hover { + background: map.get(theme.$color, 'white-100'); + + .ecl-icon { + fill: map.get(theme.$color, 'grey-100'); + } +} + +.ecl-gallery__slider-next:focus-visible, +.ecl-gallery__slider-previous:focus-visible { + outline: 2px solid map.get(theme.$color, 'white-100'); + outline-offset: -4px; + + .ecl-icon { + fill: map.get(theme.$color, 'white-100'); } } .ecl-gallery__detail { - background-color: $_detail-background; color: $_detail_color; + display: flex; + flex-direction: column; flex-shrink: 0; - padding: map.get(theme.$spacing, 'm'); + padding: map.get(theme.$spacing, '2xs') 0 map.get(theme.$spacing, 'xl'); + + .ecl-container { + position: static; + width: 100%; + } } .ecl-gallery__detail-counter { + align-self: center; display: inline-flex; - font: map.get(theme.$font, 'm'); + font: map.get(theme.$font, 's'); font-weight: map.get(theme.$font-weight, 'bold'); + margin: 0 map.get(theme.$spacing, 'xs'); white-space: pre-wrap; } @@ -338,13 +430,17 @@ $_overlay-links-hover-color: null !default; .ecl-gallery__share { color: $_overlay-links-color; - &:visited { - color: $_overlay-links-color; + &:hover { + color: $_overlay-links-hover-color; } - &:hover, &:focus-visible { - color: $_overlay-links-hover-color; + outline-color: map.get(theme.$color, 'white-100'); + outline-offset: 4px; + } + + &:visited { + color: $_overlay-links-color; } &[hidden] { @@ -354,8 +450,7 @@ $_overlay-links-hover-color: null !default; .ecl-gallery__detail-description { font: map.get(theme.$font-prolonged, 'm'); - margin-top: map.get(theme.$spacing, 's'); - min-height: 5rem; + margin-top: map.get(theme.$spacing, 'xs'); } .ecl-gallery__overlay .ecl-gallery__description-icon { @@ -364,18 +459,13 @@ $_overlay-links-hover-color: null !default; .ecl-gallery__detail-meta { color: $_gallery-meta-color; - font: map.get(theme.$font, 'm'); - margin-top: map.get(theme.$spacing, 'm'); + font: map.get(theme.$font, 's'); + margin-top: map.get(theme.$spacing, '2xs'); } /* stylelint-disable-next-line order/order */ @include breakpoints.up('m') { - .ecl-gallery__detail { - padding: map.get(theme.$spacing, 'l') map.get(theme.$spacing, 'xl'); - } - .ecl-gallery__detail-description { - margin-top: $_description-margin-desktop; min-height: 0; } @@ -383,28 +473,44 @@ $_overlay-links-hover-color: null !default; flex-direction: row; justify-content: space-between; } +} + +@include breakpoints.up('xl') { + .ecl-gallery__slider-previous, + .ecl-gallery__slider-next { + background: $_overlay-background; + margin: 0; + position: absolute; + top: 40%; + transform: translateY(-50%); + z-index: 1; + } .ecl-gallery__slider-previous { - align-self: initial; - margin-bottom: 0; - margin-inline-start: $_arrow-margin; - margin-inline-end: map.get(theme.$spacing, '2xs'); - margin-top: 0; - order: -1; + left: map.get(theme.$spacing, 'xs'); } .ecl-gallery__slider-next { - align-self: initial; - bottom: auto; - margin-bottom: 0; - margin-inline-start: map.get(theme.$spacing, '2xs'); - margin-inline-end: $_arrow-margin; - margin-top: 0; - position: relative; - right: auto; + margin: 0; + right: map.get(theme.$spacing, 'xs'); + } + + .ecl-gallery__slider-previous:focus-visible, + .ecl-gallery__slider-next:focus-visible { + outline: 2px solid map.get(theme.$color, 'white-100'); + outline-offset: -4px; + } + + .ecl-gallery__detail .ecl-container { + width: 1140px; + } + + .ecl-gallery__detail { + padding: map.get(theme.$spacing, 's') map.get(theme.$spacing, 'm') + map.get(theme.$spacing, 'xl'); } - .ecl-gallery__detail-actions { - margin-top: $_actions-margin-desktop; + .ecl-gallery__detail-meta { + margin-top: map.get(theme.$spacing, 's'); } } diff --git a/src/implementations/vanilla/components/gallery/gallery-ec.scss b/src/implementations/vanilla/components/gallery/gallery-ec.scss index e7c34e4c4b7..66542f7b3fc 100644 --- a/src/implementations/vanilla/components/gallery/gallery-ec.scss +++ b/src/implementations/vanilla/components/gallery/gallery-ec.scss @@ -6,11 +6,11 @@ $_arrow-margin: map.get(theme.$spacing, 'm'), $_arrow-margins: map.get(theme.$spacing, 'xs') map.get(theme.$spacing, '2xs'), $_close-button-color: map.get(theme.$color, 'white-100'), - $_description-background: map.get(theme.$color, 'grey-100'), + $_description-background: rgba(map.get(theme.$color, 'black'), 0.65), $_description-icon: map.get(theme.$icon, 'xs'), $_description-icon-mobile: map.get(theme.$icon, 'xs'), $_description-margin-desktop: map.get(theme.$spacing, 'm'), - $_detail-background: map.get(theme.$color, 'grey-100'), + $_detail-background: rgba(map.get(theme.$color, 'black'), 0.7), $_detail-color: map.get(theme.$color, 'white-100'), $_gallery-info-color: map.get(theme.$color, 'grey'), $_gallery-info-font: map.get(theme.$font, 'xs'), diff --git a/src/implementations/vanilla/components/gallery/gallery-eu.scss b/src/implementations/vanilla/components/gallery/gallery-eu.scss index 43b387c89a9..16db23225f7 100644 --- a/src/implementations/vanilla/components/gallery/gallery-eu.scss +++ b/src/implementations/vanilla/components/gallery/gallery-eu.scss @@ -1,23 +1,23 @@ @use 'sass:map'; @use '@ecl/theme-dev/theme'; @use 'gallery' with ( - $_actions-margin: map.get(theme.$spacing, 's'), - $_actions-margin-desktop: map.get(theme.$spacing, 's'), + $_actions-margin: map.get(theme.$spacing, 'xs'), + $_actions-margin-desktop: map.get(theme.$spacing, 'xs'), $_arrow-margin: map.get(theme.$spacing, 'xs'), $_arrow-margins: map.get(theme.$spacing, '2xs'), - $_close-button-color: map.get(theme.$color, 'blue'), - $_description-background: map.get(theme.$color, 'blue'), + $_close-button-color: map.get(theme.$color, 'white-100'), + $_description-background: rgba(map.get(theme.$color, 'black'), 0.65), $_description-icon: map.get(theme.$icon, 's'), $_description-icon-mobile: map.get(theme.$icon, 'm'), $_description-margin-desktop: map.get(theme.$spacing, 'm'), $_detail-background: map.get(theme.$color, 'white'), - $_detail-color: map.get(theme.$color, 'grey-140'), + $_detail-color: map.get(theme.$color, 'white-100'), $_gallery-info-color: map.get(theme.$color, 'grey-140'), $_gallery-info-font: map.get(theme.$font, 's'), - $_gallery-meta-color: map.get(theme.$color, 'grey-60'), + $_gallery-meta-color: map.get(theme.$color, 'white-100'), $_overlay-description-color: map.get(theme.$color, 'black'), - $_overlay_links_color: map.get(theme.$color, 'blue'), - $_overlay-links-hover-color: map.get(theme.$color, 'blue-140'), + $_overlay_links_color: map.get(theme.$color, 'white-100'), + $_overlay-links-hover-color: map.get(theme.$color, 'yellow-25'), $_overlay-radius: 8px, $_overlay-shadow: map.get(theme.$shadow, '3') ); diff --git a/src/implementations/vanilla/components/gallery/gallery.js b/src/implementations/vanilla/components/gallery/gallery.js index 7b5d63162eb..664b39b7adf 100644 --- a/src/implementations/vanilla/components/gallery/gallery.js +++ b/src/implementations/vanilla/components/gallery/gallery.js @@ -43,11 +43,14 @@ export class Gallery { constructor( element, { + expandableSelector = 'data-ecl-gallery-not-expandable', galleryItemSelector = '[data-ecl-gallery-item]', descriptionSelector = '[data-ecl-gallery-description]', metaSelector = '[data-ecl-gallery-meta]', closeButtonSelector = '[data-ecl-gallery-close]', viewAllSelector = '[data-ecl-gallery-all]', + viewAllLabelSelector = 'data-ecl-gallery-collapsed-label', + viewAllExpandedLabelSelector = 'data-ecl-gallery-expanded-label', countSelector = '[data-ecl-gallery-count]', overlaySelector = '[data-ecl-gallery-overlay]', overlayHeaderSelector = '[data-ecl-gallery-overlay-header]', @@ -97,6 +100,9 @@ export class Gallery { this.attachClickListener = attachClickListener; this.attachKeyListener = attachKeyListener; this.attachResizeListener = attachResizeListener; + this.viewAllLabelSelector = viewAllLabelSelector; + this.viewAllExpandedLabelSelector = viewAllExpandedLabelSelector; + this.expandableSelector = expandableSelector; // Private variables this.galleryItems = null; @@ -121,7 +127,9 @@ export class Gallery { this.isDesktop = false; this.resizeTimer = null; this.breakpointMd = 768; + this.breakpointLg = 996; this.imageHeight = 185; + this.imageHeightBig = 260; // Bind `this` for use in callbacks this.handleClickOnCloseButton = this.handleClickOnCloseButton.bind(this); @@ -140,9 +148,19 @@ export class Gallery { */ init() { // Query elements + this.expandable = !this.element.hasAttribute(this.expandableSelector); this.galleryItems = queryAll(this.galleryItemSelector, this.element); this.closeButton = queryOne(this.closeButtonSelector, this.element); - this.viewAll = queryOne(this.viewAllSelector, this.element); + if (this.expandable) { + this.viewAll = queryOne(this.viewAllSelector, this.element); + this.viewAllLabel = + this.viewAll.getAttribute(this.viewAllLabelSelector) || + this.viewAll.innerText; + this.viewAllLabelExpanded = + this.viewAll.getAttribute(this.viewAllExpandedLabelSelector) || + this.viewAllLabel; + this.viewAll.setAttribute('data-more', 0); + } this.count = queryOne(this.countSelector, this.element); this.overlay = queryOne(this.overlaySelector, this.element); this.overlayHeader = queryOne(this.overlayHeaderSelector, this.overlay); @@ -227,8 +245,10 @@ export class Gallery { } // Init display of gallery items - this.checkScreen(); - this.hideItems(); + if (this.expandable) { + this.checkScreen(); + this.hideItems(); + } // Add number to gallery items this.galleryItems.forEach((galleryItem, key) => { @@ -301,21 +321,27 @@ export class Gallery { checkScreen() { if (window.innerWidth > this.breakpointMd) { this.isDesktop = true; - return; + } else { + this.isDesktop = false; + } + if (window.innerWidth > this.breakpointLg) { + this.isLarge = true; } - - this.isDesktop = false; } /** + * @param {Int} rows/item number + * * Hide several gallery items by default * - 2 "lines" of items on desktop - * - only 3 items on mobile + * - only 3 items on mobile or the desired rows or items + * when using the view more button. */ - hideItems() { - if (!this.viewAll) return; + hideItems(plus = 0) { + if (!this.viewAll || this.viewAll.expanded) return; if (this.isDesktop) { + const rowHeight = this.isLarge ? this.imageHeight : this.imageHeightBig; const galleryY = this.element.getBoundingClientRect().top; let hiddenItemIds = []; // We should browse the list first to mark the items to be hidden, and hide them later @@ -324,7 +350,7 @@ export class Gallery { galleryItem.parentNode.classList.remove('ecl-gallery__item--hidden'); if ( galleryItem.getBoundingClientRect().top - galleryY > - this.imageHeight * 2 + rowHeight * (2 + Number(plus)) ) { hiddenItemIds = [...hiddenItemIds, key]; } @@ -338,7 +364,7 @@ export class Gallery { } this.galleryItems.forEach((galleryItem, key) => { - if (key > 2) { + if (key > 2 + Number(plus)) { galleryItem.parentNode.classList.add('ecl-gallery__item--hidden'); } else { galleryItem.parentNode.classList.remove('ecl-gallery__item--hidden'); @@ -536,22 +562,29 @@ export class Gallery { */ handleClickOnViewAll(e) { e.preventDefault(); + if (!this.viewAll) return; - // Disable scroll on body - document.body.classList.add('ecl-u-disablescroll'); - - // Display overlay - if (this.isDialogSupported) { - this.overlay.showModal(); + if (this.viewAll.expanded) { + delete this.viewAll.expanded; + this.checkScreen(); + this.hideItems(); + this.viewAll.textContent = this.viewAllLabel; } else { - this.overlay.setAttribute('open', ''); + this.checkScreen(); + // Two rows in desktop, three items in mobile. + const more = this.isDesktop ? 2 : 3; + // Get the multiplier updated value. + this.viewAll.setAttribute( + 'data-more', + Number(this.viewAll.getAttribute('data-more')) + Number(more) + ); + this.hideItems(Number(this.viewAll.getAttribute('data-more'))); + } + if (!this.element.querySelector('.ecl-gallery__item--hidden')) { + this.viewAll.expanded = true; + this.viewAll.setAttribute('data-more', 0); + this.viewAll.textContent = this.viewAllLabelExpanded; } - - // Update overlay - this.updateOverlay(this.galleryItems[0]); - - // Trap focus - this.focusTrap.activate(); } /** diff --git a/src/resources/icons-ec/src/all/audio.svg b/src/resources/icons-ec/src/all/audio.svg index 2bcb9a90649..47c1e099155 100644 --- a/src/resources/icons-ec/src/all/audio.svg +++ b/src/resources/icons-ec/src/all/audio.svg @@ -1,21 +1,18 @@ - - EC/Icons/General/2XL_48x48px/Icon-Audio - - - - + diff --git a/src/resources/icons-ec/src/all/calendar.svg b/src/resources/icons-ec/src/all/calendar.svg index 7171d68204c..6948e9bdc7a 100644 --- a/src/resources/icons-ec/src/all/calendar.svg +++ b/src/resources/icons-ec/src/all/calendar.svg @@ -1,8 +1,6 @@ .cls-2{fill-rule:evenodd;} diff --git a/src/resources/icons-ec/src/all/check.svg b/src/resources/icons-ec/src/all/check.svg index 6ce3a7c18a8..89ec72b44d9 100644 --- a/src/resources/icons-ec/src/all/check.svg +++ b/src/resources/icons-ec/src/all/check.svg @@ -1,5 +1,6 @@ + >.cls-2{fill-rule:evenodd;} diff --git a/src/resources/icons-ec/src/all/video.svg b/src/resources/icons-ec/src/all/video.svg index bdba13ce2d4..d336588a151 100644 --- a/src/resources/icons-ec/src/all/video.svg +++ b/src/resources/icons-ec/src/all/video.svg @@ -1,6 +1,17 @@ - - + + + + + + + diff --git a/src/resources/icons-eu/src/all/audio.svg b/src/resources/icons-eu/src/all/audio.svg index 048f48884dc..7ea341c8a71 100644 --- a/src/resources/icons-eu/src/all/audio.svg +++ b/src/resources/icons-eu/src/all/audio.svg @@ -1,25 +1,22 @@ - - - - - - - + + diff --git a/src/resources/icons-eu/src/all/video.svg b/src/resources/icons-eu/src/all/video.svg index f7fa0808489..6e91e159909 100644 --- a/src/resources/icons-eu/src/all/video.svg +++ b/src/resources/icons-eu/src/all/video.svg @@ -1,21 +1,11 @@ - - - - - - - + + diff --git a/src/specs/components/gallery/demo/data.js b/src/specs/components/gallery/demo/data.js index c6144b3ec3a..59258291d19 100644 --- a/src/specs/components/gallery/demo/data.js +++ b/src/specs/components/gallery/demo/data.js @@ -2,6 +2,7 @@ const publicUrl = process.env.PUBLIC_URL || ''; const exampleLink = `${publicUrl}/example`; module.exports = { + icon_path: '/icons.svg', items: [ { // Image @@ -62,6 +63,7 @@ module.exports = { }, { // Video + playable: true, video: { poster: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg', @@ -120,6 +122,7 @@ module.exports = { }, { // Embedded AV Portal video + playable: true, image: { src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image8.jpg', alt: 'Climate change and protect nature', @@ -208,16 +211,17 @@ module.exports = { }, }, }, - view_all_label: 'View all', + view_all_label: 'See more', + view_all_expanded_label: 'Collapse all', footer: { link: { path: exampleLink, aria_label: 'View all link aria-label value', - label: 'Link to further media items', + label: 'Further media items', }, icon: { name: 'external', - size: 's', + size: 'xs', path: '/icons.svg', }, },