ec-europa · yhuard · Dec 22, 2017 · Dec 21, 2017 · Dec 21, 2017 · Dec 22, 2017
diff --git a/framework/_partials/_preview-forms-file-uploads.twig b/framework/_partials/_preview-forms-file-uploads.twig
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+{% set bodyClass = '' %}
+{% if _target.context is defined and _target.context.global is defined %}
+  {% if _target.context.global.svg is defined %}
+    {% set bodyClass = 'no-svg' %}
+  {% endif %}
+{% endif %}
+<html lang="en" class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="{{ '/framework/styles/europa.css' | path }}">
+    <title>Preview Layout</title>
+    <script>document.documentElement.classList.remove('no-js');</script>
+  </head>
+  <body{% if _target.context and _target.context.global and _target.context.global.language %} class="language-{{ _target.context.global.language }}"{% endif %}>
+    {{ yield }}
+    <script src="{{ '/framework/scripts/europa.js' | path }}"></script>
+    <script type="text/javascript">document.addEventListener('DOMContentLoaded', function() { ECL.fileUploads(); });</script>
+  </body>
+</html>
diff --git a/framework/components/ecl-forms/ecl-forms-file-uploads/README.md b/framework/components/ecl-forms/ecl-forms-file-uploads/README.md
@@ -6,3 +6,13 @@ Combination of fields and buttons to add documents or media to a form.
 
 When there is a need to allow users to attach anything to a form (documents,
 pictures, videos, etc).
+
+## Implementation
+
+In order to automatically attach event listeners on your file upload forms, add the following script to your page:
+
+```js
+document.addEventListener('DOMContentLoaded', function() {
+  ECL.fileUploads();
+});
+```
diff --git a/framework/components/ecl-forms/ecl-forms-file-uploads/ecl-forms-file-uploads.config.js b/framework/components/ecl-forms/ecl-forms-file-uploads/ecl-forms-file-uploads.config.js
@@ -1,8 +1,9 @@
 module.exports = {
   title: 'File uploads',
   label: 'File uploads',
+  preview: '@preview-forms-file-uploads',
   status: 'ready',
-  collated: false,
+  collated: true,
   collator(markup, item) {
     return `
       <!-- Start: @${item.handle} -->\n
@@ -18,11 +19,6 @@ module.exports = {
       context: {
         id: 'example-input-id-1',
         name: 'example-input-name-1',
-        _demo: {
-          scripts: `document.addEventListener('DOMContentLoaded', function () {
-            ECL.fileUploads();
-          });`,
-        },
       },
     },
     {
@@ -32,11 +28,6 @@ module.exports = {
         id: 'example-input-id-2',
         name: 'example-input-name-2',
         is_disabled: true,
-        _demo: {
-          scripts: `document.addEventListener('DOMContentLoaded', function () {
-            ECL.fileUploads();
-          });`,
-        },
       },
     },
     {
@@ -46,11 +37,6 @@ module.exports = {
         id: 'example-input-id-3',
         name: 'example-input-name-3',
         is_multiple: true,
-        _demo: {
-          scripts: `document.addEventListener('DOMContentLoaded', function () {
-            ECL.fileUploads();
-          });`,
-        },
       },
     },
     {
@@ -60,11 +46,6 @@ module.exports = {
         id: 'example-input-id-4',
         name: 'example-input-name-4',
         has_error: true,
-        _demo: {
-          scripts: `document.addEventListener('DOMContentLoaded', function () {
-            ECL.fileUploads();
-          });`,
-        },
       },
     },
   ],

diff --git a/framework/components/ecl-forms/ecl-forms-file-uploads/test/spec/file-uploads.js b/framework/components/ecl-forms/ecl-forms-file-uploads/test/spec/file-uploads.js
@@ -1,39 +1,31 @@
-const variants = ['default', 'is-disabled', 'is-multiple', 'has-error'];
-
 describe('ecl-forms-file-uploads', () => {
   before(() => {
     // Set viewport size
     browser.setViewportSize({
       width: 600,
       height: 300,
     });
-  });
-
-  variants.forEach(variant => {
-    describe(`--${variant}`, () => {
-      before(() => {
-        // Go to url
-        browser.url(`ecl-forms-file-uploads--${variant}.html`);
 
-        // Inject axe-core (for accessibility tests)
-        browser.injectAxeCore();
+    // Go to url
+    browser.url(`ecl-forms-file-uploads.html`);
 
-        // Make sure the browser has finished painting
-        browser.pause(500);
-      });
+    // Inject axe-core (for accessibility tests)
+    browser.injectAxeCore();
 
-      // Normal state
-      it('should match the reference screenshot', () => {
-        const screenshots = browser.checkDocument({
-          name: `forms/file-uploads/${variant}`,
-        });
-        expect(screenshots).to.matchReference();
-      });
+    // Make sure the browser has finished painting
+    browser.pause(500);
+  });
 
-      it('should be accessible', () => {
-        const a11yReport = browser.runAxeCore('ecl-file-upload').value;
-        expect(a11yReport).to.be.accessible;
-      });
+  // Normal state
+  it('should match the reference screenshot', () => {
+    const screenshots = browser.checkDocument({
+      name: `forms/file-uploads`,
     });
+    expect(screenshots).to.matchReference();
+  });
+
+  it('should be accessible', () => {
+    const a11yReport = browser.runAxeCore('ecl-file-upload').value;
+    expect(a11yReport).to.be.accessible;
   });
 });
diff --git a/...ds/test/spec/screenshots/reference/forms/file-uploads/Windows 10_Chrome_v60.png b/...ds/test/spec/screenshots/reference/forms/file-uploads/Windows 10_Chrome_v60.png
diff --git a/...ds/test/spec/screenshots/reference/forms/file-uploads/Windows 7_Firefox_v54.png b/...ds/test/spec/screenshots/reference/forms/file-uploads/Windows 7_Firefox_v54.png
diff --git a/...uploads/test/spec/screenshots/reference/forms/file-uploads/Windows 7_IE_v11.png b/...uploads/test/spec/screenshots/reference/forms/file-uploads/Windows 7_IE_v11.png
diff --git a/...spec/screenshots/reference/forms/file-uploads/default/Windows 10_Chrome_v60.png b/...spec/screenshots/reference/forms/file-uploads/default/Windows 10_Chrome_v60.png
diff --git a/...spec/screenshots/reference/forms/file-uploads/default/Windows 7_Firefox_v54.png b/...spec/screenshots/reference/forms/file-uploads/default/Windows 7_Firefox_v54.png
diff --git a/...test/spec/screenshots/reference/forms/file-uploads/default/Windows 7_IE_v11.png b/...test/spec/screenshots/reference/forms/file-uploads/default/Windows 7_IE_v11.png
diff --git a/...pec/screenshots/reference/forms/file-uploads/default/macOS 10.12_Safari_v11.png b/...pec/screenshots/reference/forms/file-uploads/default/macOS 10.12_Safari_v11.png
diff --git a/...ec/screenshots/reference/forms/file-uploads/has-error/Windows 10_Chrome_v60.png b/...ec/screenshots/reference/forms/file-uploads/has-error/Windows 10_Chrome_v60.png
diff --git a/...ec/screenshots/reference/forms/file-uploads/has-error/Windows 7_Firefox_v54.png b/...ec/screenshots/reference/forms/file-uploads/has-error/Windows 7_Firefox_v54.png
diff --git a/...st/spec/screenshots/reference/forms/file-uploads/has-error/Windows 7_IE_v11.png b/...st/spec/screenshots/reference/forms/file-uploads/has-error/Windows 7_IE_v11.png
diff --git a/...c/screenshots/reference/forms/file-uploads/has-error/macOS 10.12_Safari_v11.png b/...c/screenshots/reference/forms/file-uploads/has-error/macOS 10.12_Safari_v11.png
diff --git a/.../screenshots/reference/forms/file-uploads/is-disabled/Windows 10_Chrome_v60.png b/.../screenshots/reference/forms/file-uploads/is-disabled/Windows 10_Chrome_v60.png
diff --git a/.../screenshots/reference/forms/file-uploads/is-disabled/Windows 7_Firefox_v54.png b/.../screenshots/reference/forms/file-uploads/is-disabled/Windows 7_Firefox_v54.png
diff --git a/.../spec/screenshots/reference/forms/file-uploads/is-disabled/Windows 7_IE_v11.png b/.../spec/screenshots/reference/forms/file-uploads/is-disabled/Windows 7_IE_v11.png
diff --git a/...screenshots/reference/forms/file-uploads/is-disabled/macOS 10.12_Safari_v11.png b/...screenshots/reference/forms/file-uploads/is-disabled/macOS 10.12_Safari_v11.png
diff --git a/.../screenshots/reference/forms/file-uploads/is-multiple/Windows 10_Chrome_v60.png b/.../screenshots/reference/forms/file-uploads/is-multiple/Windows 10_Chrome_v60.png
diff --git a/.../screenshots/reference/forms/file-uploads/is-multiple/Windows 7_Firefox_v54.png b/.../screenshots/reference/forms/file-uploads/is-multiple/Windows 7_Firefox_v54.png
diff --git a/.../spec/screenshots/reference/forms/file-uploads/is-multiple/Windows 7_IE_v11.png b/.../spec/screenshots/reference/forms/file-uploads/is-multiple/Windows 7_IE_v11.png
diff --git a/...screenshots/reference/forms/file-uploads/is-multiple/macOS 10.12_Safari_v11.png b/...screenshots/reference/forms/file-uploads/is-multiple/macOS 10.12_Safari_v11.png
diff --git a/...s/test/spec/screenshots/reference/forms/file-uploads/macOS 10.12_Safari_v11.png b/...s/test/spec/screenshots/reference/forms/file-uploads/macOS 10.12_Safari_v11.png
diff --git a/framework/components/ecl-navigation/ecl-navigation-lists/ecl-navigation-lists.config.js b/framework/components/ecl-navigation/ecl-navigation-lists/ecl-navigation-lists.config.js
@@ -22,6 +22,15 @@ module.exports = {
   title: 'Navigation lists',
   label: 'Lists',
   status: 'ready',
+  collated: true,
+  collator(markup, item) {
+    return `
+      <!-- Start: @${item.handle} -->\n
+      <h3 class="ecl-heading ecl-heading--h3">${item.label}\n</h3>\n
+      ${markup}\n
+      <!-- End: @${item.handle} -->\n
+    `;
+  },
   tags: ['organism'],
   variants: [
     {

diff --git a/framework/components/ecl-navigation/ecl-navigation-lists/test/spec/lists.js b/framework/components/ecl-navigation/ecl-navigation-lists/test/spec/lists.js
@@ -1,5 +1,3 @@
-const variants = ['default', 'tabs', 'small'];
-
 describe('navigation-lists', () => {
   before(() => {
     // Set viewport size
@@ -8,33 +6,26 @@ describe('navigation-lists', () => {
       height: 600,
     });
 
-    browser.pause(500);
-  });
+    // Go to url
+    browser.url(`ecl-navigation-lists.html`);
 
-  variants.forEach(variant => {
-    describe(`--${variant}`, () => {
-      before(() => {
-        // Go to url
-        browser.url(`ecl-navigation-lists--${variant}.html`);
-        // Make sure the browser has finished painting
-        browser.pause(500);
-        // Inject axe-core (for accessibility tests)
-        browser.injectAxeCore();
-      });
+    // Inject axe-core (for accessibility tests)
+    browser.injectAxeCore();
 
-      // Normal state
-      it('should match the reference screenshot', () => {
-        const screenshots = browser.checkDocument({
-          name: `navigation/lists/${variant}`,
-        });
-        expect(screenshots).to.matchReference();
-      });
+    // Make sure the browser has finished painting
+    browser.pause(500);
+  });
 
-      it('should be accessible', () => {
-        const a11yReport = browser.runAxeCore('ecl-navigation-list-wrapper')
-          .value;
-        expect(a11yReport).to.be.accessible;
-      });
+  // Normal state
+  it('should match the reference screenshot', () => {
+    const screenshots = browser.checkDocument({
+      name: `navigation/lists`,
     });
+    expect(screenshots).to.matchReference();
+  });
+
+  it('should be accessible', () => {
+    const a11yReport = browser.runAxeCore('ecl-navigation-list-wrapper').value;
+    expect(a11yReport).to.be.accessible;
   });
 });
diff --git a/...ists/test/spec/screenshots/reference/navigation/lists/Windows 10_Chrome_v60.png b/...ists/test/spec/screenshots/reference/navigation/lists/Windows 10_Chrome_v60.png
diff --git a/...ists/test/spec/screenshots/reference/navigation/lists/Windows 7_Firefox_v54.png b/...ists/test/spec/screenshots/reference/navigation/lists/Windows 7_Firefox_v54.png
diff --git a/...ion-lists/test/spec/screenshots/reference/navigation/lists/Windows 7_IE_v11.png b/...ion-lists/test/spec/screenshots/reference/navigation/lists/Windows 7_IE_v11.png
diff --git a/...t/spec/screenshots/reference/navigation/lists/default/Windows 10_Chrome_v60.png b/...t/spec/screenshots/reference/navigation/lists/default/Windows 10_Chrome_v60.png
diff --git a/...t/spec/screenshots/reference/navigation/lists/default/Windows 7_Firefox_v54.png b/...t/spec/screenshots/reference/navigation/lists/default/Windows 7_Firefox_v54.png
diff --git a/...s/test/spec/screenshots/reference/navigation/lists/default/Windows 7_IE_v11.png b/...s/test/spec/screenshots/reference/navigation/lists/default/Windows 7_IE_v11.png
diff --git a/.../spec/screenshots/reference/navigation/lists/default/macOS 10.12_Safari_v11.png b/.../spec/screenshots/reference/navigation/lists/default/macOS 10.12_Safari_v11.png
diff --git a/...sts/test/spec/screenshots/reference/navigation/lists/macOS 10.12_Safari_v11.png b/...sts/test/spec/screenshots/reference/navigation/lists/macOS 10.12_Safari_v11.png
diff --git a/...est/spec/screenshots/reference/navigation/lists/small/Windows 10_Chrome_v60.png b/...est/spec/screenshots/reference/navigation/lists/small/Windows 10_Chrome_v60.png
diff --git a/...est/spec/screenshots/reference/navigation/lists/small/Windows 7_Firefox_v54.png b/...est/spec/screenshots/reference/navigation/lists/small/Windows 7_Firefox_v54.png
diff --git a/...sts/test/spec/screenshots/reference/navigation/lists/small/Windows 7_IE_v11.png b/...sts/test/spec/screenshots/reference/navigation/lists/small/Windows 7_IE_v11.png
diff --git a/...st/spec/screenshots/reference/navigation/lists/small/macOS 10.12_Safari_v11.png b/...st/spec/screenshots/reference/navigation/lists/small/macOS 10.12_Safari_v11.png
diff --git a/...test/spec/screenshots/reference/navigation/lists/tabs/Windows 10_Chrome_v60.png b/...test/spec/screenshots/reference/navigation/lists/tabs/Windows 10_Chrome_v60.png
diff --git a/...test/spec/screenshots/reference/navigation/lists/tabs/Windows 7_Firefox_v54.png b/...test/spec/screenshots/reference/navigation/lists/tabs/Windows 7_Firefox_v54.png
diff --git a/...ists/test/spec/screenshots/reference/navigation/lists/tabs/Windows 7_IE_v11.png b/...ists/test/spec/screenshots/reference/navigation/lists/tabs/Windows 7_IE_v11.png
diff --git a/...est/spec/screenshots/reference/navigation/lists/tabs/macOS 10.12_Safari_v11.png b/...est/spec/screenshots/reference/navigation/lists/tabs/macOS 10.12_Safari_v11.png
diff --git a/framework/content/ecl-icons/_icons.scss b/framework/content/ecl-icons/_icons.scss
@@ -55,7 +55,7 @@
   %ecl-icon--#{$modifier} {
     /* stylelint-disable-next-line */
     &::before {
-      @include ecl-icon($modifier);
+      @include ecl-icon($modifier); /* stylelint-disable-line scss/percent-placeholder-pattern */
     }
   }
 }

diff --git a/package.json b/package.json
@@ -27,18 +27,18 @@
     "watch": "npm-run-all --parallel watch:* -ln"
   },
   "devDependencies": {
-    "@ec-europa/ecl-builder": "0.12.3",
-    "@ec-europa/ecl-fractal-theme": "0.11.4",
-    "@ec-europa/ecl-qa": "0.3.6",
-    "@ec-europa/eslint-config-ecl": "0.4.6",
-    "@ec-europa/stylelint-config-ecl": "0.7.0",
+    "@ec-europa/ecl-builder": "0.12.4",
+    "@ec-europa/ecl-fractal-theme": "0.12.0",
+    "@ec-europa/ecl-qa": "0.3.7",
+    "@ec-europa/eslint-config-ecl": "0.4.7",
+    "@ec-europa/stylelint-config-ecl": "0.7.1",
     "@frctl/fractal": "1.1.7",
     "@frctl/twig": "1.0.0-beta.2",
     "chai": "4.1.2",
     "chokidar-cli": "1.2.0",
     "cross-env": "5.1.1",
     "dotenv": "4.0.0",
-    "eslint": "4.12.1",
+    "eslint": "4.13.1",
     "gh-pages": "1.1.0",
     "glob": "7.1.2",
     "husky": "0.14.3",
@@ -49,7 +49,7 @@
     "npmlog": "4.1.2",
     "prettier": "1.9.2",
     "rimraf": "2.6.2",
-    "stylelint": "8.3.1",
+    "stylelint": "8.4.0",
     "stylelint-config-prettier": "2.0.0",
     "wdio-mocha-framework": "0.5.11",
     "wdio-sauce-service": "0.4.4",