@ecl/gallery 5.0.0-alpha.9 → 5.0.0

package/README.md

@@ -11,9 +11,9 @@ npm install --save @ecl/gallery
 - **"grid"** (boolean) (default: false) Display gallery as a grid
 - **"grid_template"** (int) (default: 0) Id of the template to be used. Grid display only
 - **"column"** (int) (default: 3) Number of columns. Grid display only
-- **"ratio"** (string) (default: '3-2') Image aspect ratio. Grid dipslay only
-- **"picture_zoom"** (bool) (default: false): Should the thumbnail pictures be animated?
-- **"id"**: (string) (default: random): Unique id for the gallery
+- **"ratio"** (string) (default: '3-2') Image aspect ratio. Grid display only
+- **"picture_zoom"** (boolean) (default: false) Should the thumbnail pictures have a zoom animation?
+- **"id"** (string) (default: random) Unique id for the gallery
 - **"overlay"** (object) (default: {})
   - "close" (object) (default: {}): object of type button
   - "previous" (object) (default: {}): object of type button
@@ -28,15 +28,14 @@ npm install --save @ecl/gallery
   - "description" (string) (default: '')
   - "meta" (string) (default: '')
   - "icon" (object) (default: {}): object of type icon
-  - "thumbnail" (optional) (object) (default: {}) Picture to the thumbnail, type Picture; uses "picture" if empty
-  - "picture" (optional) (object) (default: {}) object of type Picture; always needed, even for video
-  - "video" (optional) (object) (default: {})
-  - "embedded_video" (optional) (object) (default: {})
+  - "thumbnail" (object) (default: {}) Thumbnail picture, following ECL Picture structure; falls back to "picture" if empty
+  - "picture" (object) (default: {}) Full-size picture, following ECL Picture structure; always required, even for video items
+  - "video" (object) (default: {}) Video object for video items
+  - "embedded_video" (object) (default: {}) Embedded video object (iframe-based)
   - "sr_video_audio" (string) (default: ''): additional text to indicate if there is an audio description; for screen readers
-  - "share_path" (optional) (string) (default: '')
+  - "share_path" (string) (default: '') URL for the share button in the overlay
 - **"visible_items"** (integer) (default: 8) Number of visible items in an expandable gallery
 - **"expandable"** (boolean) (default: true) collapsible/expandable gallery
-- **"icon_path"** (string) (default: '') Path to the icon sprite
 - **"sr_gallery_label"** (string) (default: ''): additional label for the gallery, providing instruction; for screen readers
 - **"sr_video_label"** (string) (default: ''): additional label for the video items; for screen readers
 - **"sr_video_player"** (string) (default: ''): additional label for the video player; for screen readers
@@ -48,8 +47,8 @@ npm install --save @ecl/gallery
 - **"disable_overlay"** (boolean) (default: false) Disables the overlay functionality
 - **"full_width"** (boolean) (default: false) Full width gallery for desktop and tablet viewports
 - **"selected_item_id"** (int) (default: 0)
-- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
-- **"extra_attributes"** (optional) (array) (default: []) Extra attributes
+- **"extra_classes"** (string) (default: '') Extra classes (space separated)
+- **"extra_attributes"** (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'
   - "value" (string) Attribute value, eg: 'data-test-1'
 
@@ -96,7 +95,6 @@ npm install --save @ecl/gallery
       description: 'Living, working, travelling in the EU', 
       meta: 'Copyright, Author, Licence for image 2', 
       icon: { 
-        path: 'path/to/icons.svg', 
         name: 'audio', 
       }, 
       share_href: '/share#example-image2.jpg', 
@@ -110,7 +108,6 @@ npm install --save @ecl/gallery
       aria_label: "View all link aria-label value" 
     }, 
     icon: { 
-      path: "/icons.svg", 
       name: "external", 
       size: "s" 
     } 
@@ -120,7 +117,6 @@ npm install --save @ecl/gallery
       variant: 'ghost', 
       label: 'Close', 
       icon: { 
-        path: 'path/to/icons.svg', 
         name: 'close', 
         size: 's', 
       }, 
@@ -129,7 +125,6 @@ npm install --save @ecl/gallery
       variant: 'ghost', 
       label: 'Previous', 
       icon: { 
-        path: 'path/to/icons.svg', 
         name: 'corner-arrow', 
         transform: 'rotate-270', 
         size: 'l', 
@@ -140,7 +135,6 @@ npm install --save @ecl/gallery
       variant: 'ghost', 
       label: 'Next', 
       icon: { 
-        path: 'path/to/icons.svg', 
         name: 'corner-arrow', 
         transform: 'rotate-90', 
         size: 'l', 
@@ -151,7 +145,6 @@ npm install --save @ecl/gallery
     share: { 
       label: 'Share', 
       icon: { 
-        path: 'path/to/icons.svg', 
         name: 'share', 
         size: 'fluid', 
       }, 

package/gallery-item.html.twig

@@ -14,7 +14,6 @@
     - "embedded_video" (optional) (object) (default: {})
     - "sr_video_audio" (string) (default: ''): additional text to indicate if there is an audio description; for screen readers
     - "share_path" (optional) (string) (default: '')
-  - "icon_path": (string) (default '')
   - "sr_video_label" (string) (default: ''): additional label for the video items; for screen readers
   - "sr_video_player" (string) (default: ''): additional label for the video player; for screen readers
   - "picture_zoom" (bool) (default: false): Should the thumbnail pictures be animated?
@@ -36,7 +35,6 @@
 {% set _item = item|default({}) %}
 {% set _picture = item.picture|default({}) %}
 {% set _thumbnail = item.thumbnail|default({}) %}
-{% set _icon_path = icon_path|default('') %}
 {% set _sr_video_label = sr_video_label|default('') %}
 {% set _sr_video_player = sr_video_player|default('') %}
 {% set _picture_zoom = picture_zoom|default(false) %}
@@ -51,6 +49,17 @@
   {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
 {% endif %}
 
+{# Process image alt #}
+{% set _image_alt = '' %}
+{% if _thumbnail.img is defined and _thumbnail.img.alt is defined %}
+  {% set _image_alt = _thumbnail.img.alt %}
+{% endif %}
+{% if _image_alt is not empty and _item is not empty %}
+  {% if (_item.video is not empty or _item.embedded_video is not empty) and _sr_video_label is not empty %}
+    {% set _image_alt = _image_alt ~ ' - ' ~ _sr_video_label %}
+  {% endif %}
+{% endif %}
+
 {# Setting up Video and image variables #}
 {% set _video_title = '' %}
 {% if _item and _item is not empty %}
@@ -95,6 +104,9 @@
     data-ecl-gallery-item
     class="ecl-gallery__item-link"
     id="{{ _id }}"
+  {%- if _image_alt is not empty -%}
+    aria-label="{{ _image_alt }}"
+  {%- endif -%}
   {%- if _media_share_path is not empty -%}
     data-ecl-gallery-item-share="{{ _media_share_path }}"
   {%- endif -%}
@@ -109,28 +121,30 @@
   {% endif %}
   >
   {% if _item is not empty %}
-    {% set _image_alt = _thumbnail.img.alt|default('') %}
+    
     <figure class="ecl-gallery__image-container">
-
-    {% if _item.video is not empty or _item.embedded_video is not empty %}
-      {# Display video icon #}
-      {% if _sr_video_label is not empty %}
-        {% set _image_alt = _image_alt ~ ' - ' ~ _sr_video_label %}
-      {% endif %}
-
-      {% if _icon_path is not empty %}
-        <div class="ecl-gallery__item-icon-wrapper">
+      {# Zoom icon #}
+      <div class="ecl-gallery__icon-zoom-wrapper">
         {%- include '@ecl/icon/icon.html.twig' with {
           icon: {
-            name: 'play-filled',
-            size: 'l',
-            path: _icon_path,
-            color: 'inverted',
+            name: 'fullscreen',
+            size: 's',
           },
-          extra_classes: 'ecl-gallery__item-icon',
+          extra_classes: 'ecl-gallery__icon-zoom',
         } only %}
-        </div>
-      {% endif %}
+      </div>
+
+    {% if _item.video is not empty or _item.embedded_video is not empty %}
+      {# Display video icon #}
+      <div class="ecl-gallery__item-icon-wrapper">
+      {%- include '@ecl/icon/icon.html.twig' with {
+        icon: {
+          name: 'play',
+          size: 's',
+        },
+        extra_classes: 'ecl-gallery__item-icon',
+      } only %}
+      </div>
     {% endif %}
 
     {% set _thumbnail_markup %}

package/gallery-overlay.html.twig

@@ -24,7 +24,6 @@
 {% set _css_media_class = 'ecl-gallery__slider-media-container' %}
 {% set _extra_attributes = '' %}
 {% set _button_type = 'button' %}
-{% set _button_variant = 'ghost' %}
 {% set _overlay = overlay|default({}) %}
 {% set _item = item|default({}) %}
 
@@ -57,7 +56,8 @@
   <header class="ecl-gallery__close" data-ecl-gallery-overlay-header>
     {% include '@ecl/button/button.html.twig' with _overlay.close|merge({
       extra_classes: 'ecl-gallery__close-button',
-      variant: _button_variant,
+      variant: 'tertiary',
+      style: 'inverted',
       type: 'submit',
       extra_attributes: [
         { name: 'data-ecl-gallery-close' },
@@ -131,7 +131,6 @@
             icon: {
               name: 'fullscreen',
               size: 'fluid',
-              path: icon_path|default('')
             },
             extra_classes: 'ecl-gallery__download',
             extra_attributes: [

package/gallery-print.scss

@@ -78,7 +78,7 @@ $gallery-print: null !default;
 
 .ecl-gallery__description {
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: rgb(0, 0, 0, 0.7);
   color: #fff;
   font: map.get($gallery-print, 'description-font');
   padding: map.get($theme, 'spacing-print', '2xs')
@@ -90,7 +90,7 @@ $gallery-print: null !default;
   vertical-align: text-bottom;
   width: calc(100% - (#{map.get($theme, 'spacing-print', 'xs')} * 2));
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   position: absolute;
 }
 
@@ -121,7 +121,7 @@ $gallery-print: null !default;
   display: none;
   flex-direction: column;
   height: 100%;
-  left: 0;
+  inset-inline-start: 0;
   margin: 0;
   max-height: 100vh;
   max-width: 100%;

package/gallery.html.twig

@@ -37,7 +37,6 @@
     - "embedded_video" (optional) (object) (default: {})
     - "sr_video_audio" (string) (default: ''): additional text to indicate if there is an audio description; for screen readers
     - "share_path" (optional) (string) (default: '')
-  - "icon_path": (string) (default: '')
   - "sr_gallery_label" (string) (default: ''): additional label for the gallery, providing instruction; for screen readers
   - "sr_video_label" (string) (default: ''): additional label for the video items; for screen readers
   - "sr_video_player" (string) (default: ''): additional label for the video player; for screen readers
@@ -67,7 +66,6 @@
 {% set _visible_items = visible_items|default(8) %}
 {% set _disable_hover = disable_hover|default(false) %}
 {% set _disable_overlay = disable_overlay|default(false) %}
-{% set _icon_path = icon_path|default('') %}
 {% set _sr_gallery_label = sr_gallery_label|default('') %}
 {% set _sr_video_label = sr_video_label|default('') %}
 {% set _expandable = expandable ?? true %}
@@ -152,7 +150,6 @@
       {% include '@ecl/gallery/gallery-item.html.twig' with {
         id: "ecl-gallery-item-" ~ _id ~ '-' ~ _key,
         item: _item,
-        icon_path: _icon_path,
         sr_video_label: _sr_video_label,
         sr_video_player: _sr_video_player,
         disable_overlay: _disable_overlay,
@@ -171,7 +168,7 @@
         {% include '@ecl/button/button.html.twig' with {
           label: _view_all_label,
           type: 'submit',
-          variant: 'ghost',
+          variant: 'tertiary',
           extra_attributes: [
             { name: 'data-ecl-gallery-all' },
             { name: 'data-ecl-gallery-collapsed-label', value: _view_all_label },
@@ -210,7 +207,6 @@
     extra_attributes: _overlay_attrs,
     extra_classes: _overlay_class,
     item: _selected_item,
-    icon_path: _icon_path,
   } only %}
 </section>
 

package/gallery.js

@@ -595,7 +595,7 @@ export class Gallery {
     if (description) {
       this.overlayDescription.innerHTML = description.innerHTML;
     }
-    if (actionMobile.childNodes.length > 0) {
+    if (actionMobile.children.length > 0) {
       this.overlayDescription.prepend(actionMobile);
     }
   }
@@ -721,7 +721,7 @@ export class Gallery {
    *
    * @param {Event} e
    */
-  // eslint-disable-next-line class-methods-use-this
+
   preventClickOnItem(e) {
     e.preventDefault();
     e.stopPropagation();

package/gallery.scss

@@ -48,28 +48,52 @@ $_description-height-desktop: 108px;
 
 .ecl-gallery__item-link {
   text-decoration: none;
+
+  .ecl-gallery:not(.ecl-gallery--no-overlay):hover & {
+    cursor: zoom-in;
+  }
+}
+
+.ecl-gallery__icon-zoom-wrapper {
+  align-items: center;
+  background: var(--c-w-600, rgb(255 255 255 / 0.6));
+  color: var(--cm-on-surface-brand, var(--c-d-140));
+  display: none;
+  justify-content: center;
+  position: absolute;
+  inset-inline-end: 0.25rem;
+  top: 0.25rem;
+  border-radius: map.get($theme, 'border-radius', 's');
+  width: 2rem;
+  height: 2rem;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.ecl-gallery:not(.ecl-gallery--no-overlay)
+  .ecl-gallery__item-link:focus-visible
+  .ecl-gallery__icon-zoom-wrapper {
+  display: inline-flex;
 }
 
 .ecl-gallery__item-icon-wrapper {
-  background: var(--cm-on-surface-dark, var(--c-d));
-  box-shadow: 0 0 15px 6px
-    color-mix(in srgb, var(--cm-surface-dark, var(--c-d-80)) 55%, transparent);
-  display: inline-block;
+  align-items: center;
+  background: var(--c-w-600, rgb(255 255 255 / 0.6));
+  box-shadow: var(--sh-2);
+  color: var(--cm-on-surface-brand, var(--c-d-140));
+  display: inline-flex;
+  justify-content: center;
   position: absolute;
   left: 50%;
   top: 50%;
   border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
+  width: 3rem;
+  height: 3rem;
   pointer-events: none;
   transform: translate(-50%, -50%);
   z-index: 1;
 }
 
-.ecl-gallery__item-icon {
-  transform: scale(1.2);
-}
-
 .ecl-gallery__image-container {
   display: flex;
   height: $_image-height-mobile;
@@ -79,6 +103,7 @@ $_description-height-desktop: 108px;
   overflow: hidden;
 }
 
+// stylelint-disable-next-line no-descending-specificity
 .ecl-gallery__item-link:focus-visible {
   outline: none;
 
@@ -121,18 +146,13 @@ $_description-height-desktop: 108px;
   }
 }
 
-.ecl-gallery__image-icon {
-  display: none;
-}
-
 .ecl-gallery__description {
   align-items: center;
-  bottom: 0;
+  bottom: -100%;
   background-color: map.get($gallery, 'description-background');
   color: $_description-color;
-  display: none;
   font: map.get($gallery, 'description-font');
-  left: 0;
+  inset-inline-start: 0;
   overflow: hidden;
   padding: var(--s-2xs) var(--s-xs);
   pointer-events: none;
@@ -148,14 +168,14 @@ $_description-height-desktop: 108px;
   .ecl-gallery__item-link:hover,
   .ecl-gallery__item-link:focus-visible {
     .ecl-gallery__description {
-      display: block;
+      bottom: 0;
     }
   }
 }
 
 .ecl-gallery__list .ecl-gallery__caption,
 .ecl-gallery__list .ecl-gallery__meta {
-  @include screen-reader.sr-only;
+  display: none;
 }
 
 .ecl-gallery__info {
@@ -178,7 +198,7 @@ $_description-height-desktop: 108px;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 1140px;
+  max-width: map.get($theme, 'container', 'xxl');
   padding-top: var(--s-xs);
 }
 
@@ -188,7 +208,7 @@ $_description-height-desktop: 108px;
 }
 
 .ecl-gallery__footer-link {
-  text-align: right;
+  text-align: end;
   margin-top: var(--s-s);
   width: 100%;
 }
@@ -219,16 +239,6 @@ $_description-height-desktop: 108px;
     margin: 0 auto;
   }
 
-  .ecl-gallery__image-icon {
-    background-color: map.get($gallery, 'description-background');
-    bottom: 0;
-    display: block;
-    fill: $_description-color;
-    padding: var(--s-s);
-    position: absolute;
-    right: 0;
-  }
-
   .ecl-gallery__footer {
     align-items: center;
     flex-direction: row;
@@ -256,17 +266,16 @@ $_description-height-desktop: 108px;
 
   .ecl-gallery--full-width {
     border-radius: 0;
-    left: 50%;
-    margin-inline-start: -50vw;
+    margin-inline: calc(50% - 50vw);
     position: relative;
     width: 100vw;
 
     .ecl-gallery__footer-link {
-      margin-inline-start: ar(--s-m);
+      margin-inline-start: var(--s-m);
     }
 
     .ecl-gallery__view-all {
-      margin-inline-end: ar(--s-m);
+      margin-inline-end: var(--s-m);
     }
   }
 }
@@ -297,7 +306,7 @@ $_description-height-desktop: 108px;
   display: none;
   flex-direction: column;
   height: 100%;
-  left: 0;
+  inset-inline-start: 0;
   margin: 0;
   max-height: 100vh;
   max-width: 100%;
@@ -320,13 +329,7 @@ $_description-height-desktop: 108px;
 }
 
 .ecl-gallery__close-button {
-  color: #fff;
   margin: var(--s-xs);
-
-  &:focus-visible {
-    border-color: #fff;
-    color: #fff;
-  }
 }
 
 .ecl-gallery__controls {
@@ -422,8 +425,7 @@ $_description-height-desktop: 108px;
 
 .ecl-gallery__detail-counter {
   align-self: center;
-  border-left: 1px solid #fff;
-  border-right: 1px solid #fff;
+  border-inline: 1px solid #fff;
   display: inline-flex;
   margin: 0;
   padding: 0 var(--s-xs);

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/gallery",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0",
   "description": "ECL Gallery",
   "publishConfig": {
     "access": "public"
@@ -11,13 +11,17 @@
   "module": "gallery.js",
   "style": "gallery.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.9",
-    "@ecl/dom-utils": "5.0.0-alpha.9",
-    "@ecl/icon": "5.0.0-alpha.9",
-    "@ecl/link": "5.0.0-alpha.9",
-    "@ecl/picture": "5.0.0-alpha.9",
-    "@ecl/video": "5.0.0-alpha.9",
-    "focus-trap": "7.6.4"
+    "@ecl/button": "5.0.0",
+    "@ecl/dom-utils": "5.0.0",
+    "@ecl/icon": "5.0.0",
+    "@ecl/link": "5.0.0",
+    "@ecl/picture": "5.0.0",
+    "@ecl/video": "5.0.0",
+    "focus-trap": "8.2.1"
+  },
+  "devDependencies": {
+    "@ecl/grid": "5.0.0",
+    "@ecl/utility-screen-reader": "5.0.0"
   },
   "repository": {
     "type": "git",
@@ -33,5 +37,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "9ce8853975dc4e5c768598fbecddf3646608bce1"
+  "gitHead": "70ad1f5d6ae8b6e11c7d2422c3d5e7a1a74adf57"
 }