@ecl/gallery 5.0.0-alpha.1 → 5.0.0-alpha.10

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?

package/gallery-item.html.twig

@@ -18,7 +18,7 @@
   - "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'

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'

package/gallery-print.scss

@@ -8,6 +8,7 @@
 // Exposed variables
 $theme: null !default;
 $gallery: null !default;
+$gallery-print: null !default;
 
 .ecl-gallery {
   margin: 0;
@@ -78,8 +79,8 @@ $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');
+  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
@@ -41,7 +42,7 @@
   - "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'

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,9 @@ $_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-surface-dark, var(--c-d-80)) 55%, transparent);
   display: inline-block;
   position: absolute;
   left: 50%;
@@ -82,7 +83,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;
   }
 }
@@ -130,7 +131,7 @@ $_description-height-desktop: 108px;
   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 {
@@ -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%;
@@ -319,12 +320,12 @@ $_description-height-desktop: 108px;
 }
 
 .ecl-gallery__close-button {
-  color: map.get($theme, 'color', 'white');
+  color: #fff;
   margin: var(--s-xs);
 
   &:focus-visible {
-    border-color: map.get($theme, 'color', 'white');
-    color: map.get($theme, 'color', 'white');
+    border-color: #fff;
+    color: #fff;
   }
 }
 
@@ -390,16 +391,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 +411,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 +422,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 +456,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 +685,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.1",
+  "version": "5.0.0-alpha.10",
   "description": "ECL Gallery",
   "publishConfig": {
     "access": "public"
@@ -11,12 +11,12 @@
   "module": "gallery.js",
   "style": "gallery.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.1",
-    "@ecl/dom-utils": "5.0.0-alpha.1",
-    "@ecl/icon": "5.0.0-alpha.1",
-    "@ecl/link": "5.0.0-alpha.1",
-    "@ecl/picture": "5.0.0-alpha.1",
-    "@ecl/video": "5.0.0-alpha.1",
+    "@ecl/button": "5.0.0-alpha.10",
+    "@ecl/dom-utils": "5.0.0-alpha.10",
+    "@ecl/icon": "5.0.0-alpha.10",
+    "@ecl/link": "5.0.0-alpha.10",
+    "@ecl/picture": "5.0.0-alpha.10",
+    "@ecl/video": "5.0.0-alpha.10",
     "focus-trap": "7.6.4"
   },
   "repository": {
@@ -33,5 +33,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "f800b6d2de209fcfe182aadca5f7e45ad497b23a"
+  "gitHead": "8f085d9bbc9ebe568932bc297fdcf7f7a47da47b"
 }