feat: EC Gallery - INNO-1384

src/ec/packages/ec-component-gallery/.npmignore

@@ -0,0 +1,3 @@
+__snapshots__
+*.story.js
+*.test.js

src/ec/packages/ec-component-gallery/README.md

@@ -0,0 +1,116 @@
+# ECL Twig - EC Gallery
+
+npm package: `@ecl-twig/ec-component-gallery`
+
+```shell
+npm install --save @ecl-twig/ec-component-gallery
+```
+
+## Gallery
+
+### Parameters
+
+- **"overlay"** (object) (default: {})
+  - **"close"** (object) (default: {}): object of type button
+  - **"previous"** (object) (default: {}): object of type button
+  - **"next"** (object) (default: {}): object of type button
+  - **"counter_separator"** (string) (default: '')
+  - **"download"** (object) (default: {}): object of type link
+  - **"share"** (object) (default: {}): object of type link
+- **"items"** (array) (default: [])
+  - **"path"** (string) (default: '')
+  - **"alt"** (string) (default: '')
+  - **"description"** (string) (default: '')
+  - **"meta"** (string) (default: '')
+  - **"icon"** (object) (default: {}): object of type icon
+  - **"share_path"** (string) (default: '')
+- **"selected_item_id"** (int) (default: 0)
+- **"extra_classes"** (optional) (string) (default: '')
+- **"extra_attributes"** (optional) (array) (default: [])
+  - **"name"** (string) Attribute name, eg. 'data-test'
+  - **"value"** (string) Attribute value, eg: 'data-test-1'
+
+### Example :
+
+<!-- prettier-ignore -->
+```twig
+{% include 'path/to/gallery.html.twig' with {  
+  items: [ 
+    { 
+      path: 'path/to/image.jpg', 
+      alt: 'Image 1', 
+      description: 
+        'The EU in brief, institutions and bodies, countries, symbols, history, facts and figures', 
+      meta: 'Copyright, Author, Licence for image 1', 
+      share_href: '/share#example-image.jpg', 
+    }, 
+    { 
+      path: 'path/to/image2.jpg', 
+      alt: 'Image 2', 
+      description: 'Living, working, travelling in the EU', 
+      meta: 'Copyright, Author, Licence for image 2', 
+      icon: { 
+        path: 'path/to/icons.svg', 
+        type: 'general', 
+        name: 'audio', 
+      }, 
+      share_href: '/share#example-image2.jpg', 
+    }, 
+    ... 
+  ], 
+  overlay: { 
+    close: { 
+      variant: 'ghost', 
+      label: 'Close', 
+      icon: { 
+        path: 'path/to/icons.svg', 
+        type: 'ui', 
+        name: 'close', 
+        size: 's', 
+      }, 
+    }, 
+    previous: { 
+      variant: 'ghost', 
+      label: 'Previous', 
+      icon: { 
+        path: 'path/to/icons.svg', 
+        type: 'ui', 
+        name: 'corner-arrow', 
+        transform: 'rotate-270', 
+        size: 'l', 
+      }, 
+      icon_position: 'before', 
+    }, 
+    next: { 
+      variant: 'ghost', 
+      label: 'Next', 
+      icon: { 
+        path: 'path/to/icons.svg', 
+        type: 'ui', 
+        name: 'corner-arrow', 
+        transform: 'rotate-90', 
+        size: 'l', 
+      }, 
+    }, 
+    counter_separator: 'of', 
+    download: { 
+      label: 'Download', 
+      icon: { 
+        path: 'path/to/icons.svg', 
+        type: 'ui', 
+        name: 'download', 
+        size: 'fluid', 
+      }, 
+    }, 
+    share: { 
+      label: 'Share', 
+      icon: { 
+        path: 'path/to/icons.svg', 
+        type: 'general', 
+        name: 'share', 
+        size: 'fluid', 
+      }, 
+    }, 
+  }, 
+} %}
+```