@ecl/gallery 5.0.0-alpha.2 → 5.0.0-alpha.21

package/README.md

@@ -9,6 +9,7 @@ npm install --save @ecl/gallery
 ### Parameters
 
 - **"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?
@@ -35,7 +36,6 @@ npm install --save @ecl/gallery
   - "share_path" (optional) (string) (default: '')
 - **"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
@@ -95,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', 
@@ -109,7 +108,6 @@ npm install --save @ecl/gallery
       aria_label: "View all link aria-label value" 
     }, 
     icon: { 
-      path: "/icons.svg", 
       name: "external", 
       size: "s" 
     } 
@@ -119,7 +117,6 @@ npm install --save @ecl/gallery
       variant: 'ghost', 
       label: 'Close', 
       icon: { 
-        path: 'path/to/icons.svg', 
         name: 'close', 
         size: 's', 
       }, 
@@ -128,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', 
@@ -139,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', 
@@ -150,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,11 +14,10 @@
     - "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?
-  - "extra_classes" (optional) (string) (default: '')
+  - "extra_classes" (string) (default: '')
   - "extra_attributes" (optional) (array) (default: [])
     - "name" (string) Attribute name, eg. 'data-test'
     - "value" (string) Attribute value, eg: 'data-test-1'
@@ -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) %}
@@ -118,19 +116,16 @@
         {% set _image_alt = _image_alt ~ ' - ' ~ _sr_video_label %}
       {% endif %}
 
-      {% if _icon_path is not empty %}
-        <div class="ecl-gallery__item-icon-wrapper">
-        {%- 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 %}
-        </div>
-      {% endif %}
+      <div class="ecl-gallery__item-icon-wrapper">
+      {%- include '@ecl/icon/icon.html.twig' with {
+        icon: {
+          name: 'play-filled',
+          size: 'l',
+          color: 'inverted',
+        },
+        extra_classes: 'ecl-gallery__item-icon',
+      } only %}
+      </div>
     {% endif %}
 
     {% set _thumbnail_markup %}

package/gallery-overlay.html.twig

@@ -8,10 +8,11 @@
     - "next" (object) (default: {}): object of type button
     - "counter_separator" (string) (default: '')
     - "full_screen_label" (string) (default: '')
+    - "download" (object) (default: {}): object of type link
     - "share" (object) (default: {}): object of type link
     - "sr_overlay_label" (string) (default: '') aria-label for the overlay
   - "item" (object) (default: {}): object of type gallery-item
-  - "extra_classes" (optional) (string) (default: '')
+  - "extra_classes" (string) (default: '')
   - "extra_attributes" (optional) (array) (default: [])
     - "name" (string) Attribute name, eg. 'data-test'
     - "value" (string) Attribute value, eg: 'data-test-1'
@@ -23,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({}) %}
 
@@ -56,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' },
@@ -130,7 +131,6 @@
             icon: {
               name: 'fullscreen',
               size: 'fluid',
-              path: icon_path|default('')
             },
             extra_classes: 'ecl-gallery__download',
             extra_attributes: [

package/gallery-print.scss

@@ -8,6 +8,7 @@
 // Exposed variables
 $theme: null !default;
 $gallery: null !default;
+$gallery-print: null !default;
 
 .ecl-gallery {
   margin: 0;
@@ -77,9 +78,9 @@ $gallery: null !default;
 
 .ecl-gallery__description {
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.7);
-  color: map.get($theme, 'color', 'white');
-  font: map.get($theme, 'font-print', 's');
+  background-color: rgb(0, 0, 0, 0.7);
+  color: #fff;
+  font: map.get($gallery-print, 'description-font');
   padding: map.get($theme, 'spacing-print', '2xs')
     map.get($theme, 'spacing-print', 'xs');
   text-decoration: none;
@@ -163,7 +164,7 @@ $gallery: null !default;
     padding: map.get($theme, 'spacing-print', 'm');
 
     * {
-      color: map.get($theme, 'color', 'white');
+      color: #fff;
     }
   }
 

package/gallery.html.twig

@@ -22,6 +22,7 @@
     - "next" (object) (default: {}): object of type button
     - "counter_separator" (string) (default: '')
     - "full_screen_label" (string) (default: '')
+    - "download" (object) (default: {}): object of type link
     - "share" (object) (default: {}): object of type link
     - "sr_overlay_label" (string) (default: '') aria-label for the overlay
   - "footer" (object) (default: {}): object of type link
@@ -36,12 +37,11 @@
     - "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
   - "selected_item_id" (int) (default: 0)
-  - "extra_classes" (optional) (string) (default: '')
+  - "extra_classes" (string) (default: '')
   - "extra_attributes" (optional) (array) (default: [])
     - "name" (string) Attribute name, eg. 'data-test'
     - "value" (string) Attribute value, eg: 'data-test-1'
@@ -66,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 %}
@@ -151,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,
@@ -170,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 },
@@ -209,7 +207,6 @@
     extra_attributes: _overlay_attrs,
     extra_classes: _overlay_class,
     item: _selected_item,
-    icon_path: _icon_path,
   } only %}
 </section>
 

package/gallery.js

@@ -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

@@ -12,7 +12,7 @@ $theme: null !default;
 $gallery: null !default;
 
 // Internal variables
-$_description-color: map.get($theme, 'color', 'white');
+$_description-color: #fff;
 $_image-height: 192px;
 $_image-height-mobile: 260px;
 $_description-height-mobile: 132px;
@@ -51,8 +51,13 @@ $_description-height-desktop: 108px;
 }
 
 .ecl-gallery__item-icon-wrapper {
-  background: var(--c-d);
-  box-shadow: 0 0 15px 6px color-mix(in srgb, var(--c-d-80) 55%, transparent);
+  background: var(--cm-on-surface-dark, var(--c-d));
+  box-shadow: 0 0 15px 6px
+    color-mix(
+      in srgb,
+      var(--cm-on-surface-neutral-highest, var(--c-d-80)) 55%,
+      transparent
+    );
   display: inline-block;
   position: absolute;
   left: 50%;
@@ -82,7 +87,7 @@ $_description-height-desktop: 108px;
   outline: none;
 
   .ecl-gallery__image-container {
-    outline: 2px solid var(--c-p);
+    outline: 2px solid var(--cm-border-primary, var(--c-p));
     outline-offset: 2px;
   }
 }
@@ -120,17 +125,13 @@ $_description-height-desktop: 108px;
   }
 }
 
-.ecl-gallery__image-icon {
-  display: none;
-}
-
 .ecl-gallery__description {
   align-items: center;
   bottom: 0;
   background-color: map.get($gallery, 'description-background');
   color: $_description-color;
   display: none;
-  font: var(--f-s);
+  font: map.get($gallery, 'description-font');
   left: 0;
   overflow: hidden;
   padding: var(--s-2xs) var(--s-xs);
@@ -161,7 +162,7 @@ $_description-height-desktop: 108px;
   color: map.get($gallery, 'gallery-info-color');
   display: flex;
   flex-direction: row;
-  font: var(--f-s);
+  font: map.get($gallery, 'gallery-info-font');
 }
 
 .ecl-gallery__info-total {
@@ -177,7 +178,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);
 }
 
@@ -193,7 +194,7 @@ $_description-height-desktop: 108px;
 }
 
 .ecl-gallery__footer-divider {
-  background: var(--c-n-100);
+  background: var(--cm-border-neutral, (--c-n-100));
   border: none;
   height: 1px;
   width: 100%;
@@ -218,16 +219,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;
@@ -319,13 +310,7 @@ $_description-height-desktop: 108px;
 }
 
 .ecl-gallery__close-button {
-  color: map.get($theme, 'color', 'white');
   margin: var(--s-xs);
-
-  &:focus-visible {
-    border-color: map.get($theme, 'color', 'white');
-    color: map.get($theme, 'color', 'white');
-  }
 }
 
 .ecl-gallery__controls {
@@ -390,16 +375,16 @@ $_description-height-desktop: 108px;
 
 .ecl-gallery__slider-previous,
 .ecl-gallery__slider-next {
-  background: map.get($theme, 'color', 'white');
+  background-color: #fff;
   flex-shrink: 0;
 
   &:hover {
-    background-color: var(--c-p-20);
+    background-color: var(--cm-surface-neutral-lowest, var(--c-p-20));
   }
 
   &:focus-visible {
-    background-color: map.get($theme, 'color', 'white');
-    outline: 2px solid map.get($theme, 'color', 'white');
+    background-color: #fff;
+    outline: 2px solid #fff;
     outline-offset: 0;
   }
 }
@@ -410,6 +395,7 @@ $_description-height-desktop: 108px;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
+  font: var(--f-m);
   padding: var(--s-xl) var(--s-xs);
 
   .ecl-container {
@@ -420,10 +406,9 @@ $_description-height-desktop: 108px;
 
 .ecl-gallery__detail-counter {
   align-self: center;
-  border-left: 1px solid map.get($theme, 'color', 'white');
-  border-right: 1px solid map.get($theme, 'color', 'white');
+  border-left: 1px solid #fff;
+  border-right: 1px solid #fff;
   display: inline-flex;
-  font: var(--f-m);
   margin: 0;
   padding: 0 var(--s-xs);
   white-space: pre-wrap;
@@ -455,18 +440,18 @@ $_description-height-desktop: 108px;
 }
 
 .ecl-gallery__detail-description {
-  font: var(--f-m);
   height: $_description-height-mobile;
   margin-top: var(--s-s);
   overflow: auto;
 
   .ecl-gallery__title {
     display: block;
-    font-weight: map.get($theme, 'font-weight', 'bold');
+    font-weight: map.get($gallery, 'overlay-title-font-weight');
   }
 
   .ecl-gallery__meta {
     display: block;
+    font: map.get($gallery, 'overlay-meta-font');
     margin-top: var(--s-s);
   }
 }
@@ -684,5 +669,5 @@ $_description-height-desktop: 108px;
 .ecl-gallery__video-title {
   @include screen-reader.sr-only;
 
-  background-color: map.get($theme, 'color', 'white');
+  background-color: #fff;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/gallery",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.2",
+  "version": "5.0.0-alpha.21",
   "description": "ECL Gallery",
   "publishConfig": {
     "access": "public"
@@ -11,13 +11,13 @@
   "module": "gallery.js",
   "style": "gallery.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.2",
-    "@ecl/dom-utils": "5.0.0-alpha.2",
-    "@ecl/icon": "5.0.0-alpha.2",
-    "@ecl/link": "5.0.0-alpha.2",
-    "@ecl/picture": "5.0.0-alpha.2",
-    "@ecl/video": "5.0.0-alpha.2",
-    "focus-trap": "7.6.4"
+    "@ecl/button": "5.0.0-alpha.21",
+    "@ecl/dom-utils": "5.0.0-alpha.21",
+    "@ecl/icon": "5.0.0-alpha.21",
+    "@ecl/link": "5.0.0-alpha.21",
+    "@ecl/picture": "5.0.0-alpha.21",
+    "@ecl/video": "5.0.0-alpha.21",
+    "focus-trap": "7.6.5"
   },
   "repository": {
     "type": "git",
@@ -33,5 +33,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "3c10f74e78b7c3891917c075fa3868eb7c4f3d7a"
+  "gitHead": "e3828f07421db8fa2a610b445bc178ff26903c95"
 }