Merge pull request #44 from ec-europa/FRONT-4128-ECL-3.11

chore: ECL 3.11.0

.storybook/main.js

@@ -29,6 +29,7 @@ if (!isProd) {
     path.resolve(`${__dirname}/../src/components/ecl-menu`),
     path.resolve(`${__dirname}/../src/components/ecl-modal`),
     path.resolve(`${__dirname}/../src/components/ecl-description-list`),
+    path.resolve(`${__dirname}/../src/components/ecl-content-block`),
     path.resolve(`${__dirname}/../static`),
   ];
 }

package.json

@@ -80,7 +80,7 @@
     "@babel/preset-react": "7.22.15",
     "@babel/preset-typescript": "7.23.2",
     "@prettier/plugin-xml": "3.2.2",
-    "@stencil/angular-output-target": "0.8.2",
+    "@stencil/angular-output-target": "0.8.3",
     "@stencil/react-output-target": "0.5.3",
     "@storybook/addon-essentials": "7.5.1",
     "@storybook/addon-links": "7.5.1",

packages/ecl-webcomponents/package.json

@@ -30,7 +30,7 @@
     "@stencil/core": "4.6.0"
   },
   "devDependencies": {
-    "@stencil/angular-output-target": "0.8.2",
+    "@stencil/angular-output-target": "0.8.3",
     "@stencil/react-output-target": "0.5.3"
   }
 }

patches/@ecl+vanilla-component-carousel+3.11.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@ecl/vanilla-component-carousel/carousel.js b/node_modules/@ecl/vanilla-component-carousel/carousel.js
+index 3e1dc99..08cdab4 100644
+--- a/node_modules/@ecl/vanilla-component-carousel/carousel.js
++++ b/node_modules/@ecl/vanilla-component-carousel/carousel.js
+@@ -131,6 +131,8 @@ export class Carousel {
+     this.direction = getComputedStyle(this.element).direction;
+
+     this.slides = queryAll(this.slideClass, this.element);
++    this.slidesContainer.innerHTML = '';
++    this.slidesContainer.append(...this.slides);
+     this.total = this.slides.length;
+
+     // If only one slide, don't initialize carousel and hide controls

patches/@ecl+vanilla-component-content-block+3.11.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/@ecl/vanilla-component-content-block/content-block.js b/node_modules/@ecl/vanilla-component-content-block/content-block.js
+index 6913470..ee23ad4 100644
+--- a/node_modules/@ecl/vanilla-component-content-block/content-block.js
++++ b/node_modules/@ecl/vanilla-component-content-block/content-block.js
+@@ -72,7 +72,7 @@ export class ContentBlock {
+     }
+
+     this.title = queryOne(this.titleSelector, this.element);
+-    this.linkEl = this.title ? queryOne('a', this.title) : false;
++    this.linkEl = this.title.nodeName === 'A' ? this.title : queryOne('a', this.title);
+     if (this.linkEl) {
+       this.picture.style.cursor = 'pointer';
+       const img = queryOne('img', this.picture);

scripts/copy-assets.sh

@@ -38,4 +38,5 @@ cp -r ./src/components/ecl-range/build ./build
 cp -r ./src/components/ecl-menu/build ./build
 cp -r ./src/components/ecl-modal/build ./build
 cp -r ./src/components/ecl-description-list/build ./build
+cp -r ./src/components/ecl-content-block/build ./build
 cp -a ./static/* ./build

src/components.d.ts

@@ -115,6 +115,7 @@ export namespace Components {
         "theme": string;
     }
     interface EclContentBlock {
+        "eclScript": boolean;
         "hasDescription": boolean;
         "hasLabels": boolean;
         "hasLinks": boolean;
@@ -492,11 +493,13 @@ export namespace Components {
         "closeLabel": string;
         "eclScript": boolean;
         "itemId": string;
+        "size": string;
         "styleClass": string;
         "theme": string;
         "toggleId": string;
         "variant": string;
         "withBody": boolean;
+        "withBodyFixed": boolean;
         "withFooter": boolean;
         "withHeader": boolean;
     }
@@ -1531,6 +1534,7 @@ declare namespace LocalJSX {
         "theme"?: string;
     }
     interface EclContentBlock {
+        "eclScript"?: boolean;
         "hasDescription"?: boolean;
         "hasLabels"?: boolean;
         "hasLinks"?: boolean;
@@ -1914,11 +1918,13 @@ declare namespace LocalJSX {
         "closeLabel"?: string;
         "eclScript"?: boolean;
         "itemId"?: string;
+        "size"?: string;
         "styleClass"?: string;
         "theme"?: string;
         "toggleId"?: string;
         "variant"?: string;
         "withBody"?: boolean;
+        "withBodyFixed"?: boolean;
         "withFooter"?: boolean;
         "withHeader"?: boolean;
     }

src/components/ecl-accordion/package.json

@@ -15,16 +15,16 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/resources-ec-icons": "3.10.0",
-    "@ecl/resources-eu-icons": "3.10.0",
-    "@ecl/specs-component-accordion": "3.10.0",
-    "@ecl/theme-ec": "3.10.0",
-    "@ecl/theme-eu": "3.10.0",
-    "@ecl/vanilla-component-accordion": "3.10.0",
-    "@ecl/vanilla-component-button": "3.10.0",
-    "@ecl/vanilla-component-icon": "3.10.0",
-    "@ecl/vanilla-layout-grid": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/resources-ec-icons": "3.11.0",
+    "@ecl/resources-eu-icons": "3.11.0",
+    "@ecl/specs-component-accordion": "3.11.0",
+    "@ecl/theme-ec": "3.11.0",
+    "@ecl/theme-eu": "3.11.0",
+    "@ecl/vanilla-component-accordion": "3.11.0",
+    "@ecl/vanilla-component-button": "3.11.0",
+    "@ecl/vanilla-component-icon": "3.11.0",
+    "@ecl/vanilla-layout-grid": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-banner/package.json

@@ -13,8 +13,8 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/vanilla-component-banner": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/vanilla-component-banner": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-blockquote/package.json

@@ -13,10 +13,10 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/theme-ec": "3.10.0",
-    "@ecl/theme-eu": "3.10.0",
-    "@ecl/vanilla-component-blockquote": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/theme-ec": "3.11.0",
+    "@ecl/theme-eu": "3.11.0",
+    "@ecl/vanilla-component-blockquote": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-breadcrumb/package.json

@@ -4,7 +4,7 @@
   "license": "EUPL-1.2",
   "version": "0.11.0",
   "description": "ECL Breadcrumb",
-  "main": "ecl-breadcrumb.js",
+  "main": "ecl-breadcrumb.tsx",
   "private": true,
   "scripts": {
     "build:scripts": "cross-env ecl-builder scripts",
@@ -14,10 +14,10 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/theme-ec": "3.10.0",
-    "@ecl/theme-eu": "3.10.0",
-    "@ecl/vanilla-component-breadcrumb": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/theme-ec": "3.11.0",
+    "@ecl/theme-eu": "3.11.0",
+    "@ecl/vanilla-component-breadcrumb": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-button/package.json

@@ -13,15 +13,15 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/resources-ec-icons": "3.10.0",
-    "@ecl/resources-eu-icons": "3.10.0",
-    "@ecl/specs-component-button": "3.10.0",
-    "@ecl/theme-ec": "3.10.0",
-    "@ecl/theme-eu": "3.10.0",
-    "@ecl/vanilla-component-button": "3.10.0",
-    "@ecl/vanilla-component-icon": "3.10.0",
-    "@ecl/vanilla-component-link": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/resources-ec-icons": "3.11.0",
+    "@ecl/resources-eu-icons": "3.11.0",
+    "@ecl/specs-component-button": "3.11.0",
+    "@ecl/theme-ec": "3.11.0",
+    "@ecl/theme-eu": "3.11.0",
+    "@ecl/vanilla-component-button": "3.11.0",
+    "@ecl/vanilla-component-icon": "3.11.0",
+    "@ecl/vanilla-component-link": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-card/ecl-card.stories.ts

@@ -17,11 +17,13 @@ const Template = (args) =>
       has-title
       has-description
       has-labels
+      ecl-script
     >
       <ecl-link
         slot="title"
         path="${randomizedLink('/example')}"
         variant="standalone"
+        data-ecl-title-link
       >
         Title
       </ecl-link>

src/components/ecl-card/ecl-card.tsx

@@ -31,6 +31,7 @@ export class EclCard {
         imageAlt={this.imageAlt}
         imgClass={`ecl-card__image sc-ecl-card-${this.theme}`}
         styleClass={`ecl-card__picture sc-ecl-picture-${this.theme}`}
+        data-ecl-picture-link
       >
         <slot name="sources"></slot>
       </ecl-picture>

src/components/ecl-card/package.json

@@ -13,8 +13,8 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/vanilla-component-card": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/vanilla-component-card": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-card/test/__snapshots__/ecl-card.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`ecl-card renders 1`] = `
 <ecl-card image="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" image-alt="Image alternative" theme="ec">
   <!---->
   <article class="ecl-card">
-    <ecl-picture image="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" imagealt="Image alternative" imgclass="ecl-card__image sc-ecl-card-ec" styleclass="ecl-card__picture sc-ecl-picture-ec"></ecl-picture>
+    <ecl-picture data-ecl-picture-link image="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" imagealt="Image alternative" imgclass="ecl-card__image sc-ecl-card-ec" styleclass="ecl-card__picture sc-ecl-picture-ec"></ecl-picture>
     <div class="ecl-card__body">
       <ecl-content-block has-description="" has-labels="" has-title="" meta-primary="[&quot;META1&quot;, &quot;Meta2&quot;]" meta-secondary="[{&quot;label&quot;: &quot;2018/10/22&quot;, &quot;icon&quot;: &quot;calendar&quot;}, {&quot;label&quot;: &quot;Luxembourg&quot;, &quot;icon&quot;: &quot;location&quot;}]" theme="ec">
         <!---->

src/components/ecl-carousel/package.json

@@ -14,9 +14,9 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/vanilla-component-carousel": "3.10.0",
-    "@ecl/vanilla-layout-grid": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/vanilla-component-carousel": "3.11.0",
+    "@ecl/vanilla-layout-grid": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-category-filter/package.json

@@ -14,8 +14,8 @@
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/vanilla-component-category-filter": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/vanilla-component-category-filter": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-content-block/ecl-builder.config.js

@@ -10,6 +10,18 @@ const includePaths = [nodeModules];
 const banner = `${pkg.name} - ${pkg.version} Built on ${new Date().toISOString()}`;
 
 module.exports = {
+  scripts: [
+    {
+      entry: path.resolve(nodeModules, '@ecl/vanilla-component-content-block/content-block.js'),
+      dest: path.resolve(outputFolder, 'scripts/ecl-content-block-vanilla.js'),
+      options: {
+        banner,
+        moduleName: 'ECL',
+        includePaths,
+        sourceMap: false,
+      },
+    },
+  ],
   styles: [
     {
       entry: path.resolve(__dirname, 'src/styles/ecl-content-block-ec.scss'),

src/components/ecl-content-block/ecl-content-block.stories.ts

@@ -48,6 +48,7 @@ const Template = (args) =>
     has-labels
     has-links
     has-secondary-links
+    ecl-script
   >
     <ecl-label
       slot="labels"

src/components/ecl-content-block/ecl-content-block.tsx

@@ -1,11 +1,14 @@
 import { Component, Prop, h, Element } from '@stencil/core';
+import getAssetPath from "../../utils/assetPath";
+declare const ECL: any;
 
 @Component({
   tag: 'ecl-content-block',
   styleUrls: {
     ec: './build/styles/ecl-content-block-ec.css',
     eu: './build/styles/ecl-content-block-eu.css',
   },
+  assetsDirs: ['build'],
   shadow: false,
   scoped: true,
 })
@@ -15,6 +18,7 @@ export class EclContentBlock {
   @Prop() styleClass: string = '';
   @Prop() theme: string = 'ec';
   @Prop() hasDescription: boolean;
+  @Prop() eclScript: boolean = false;
   @Prop() hasTitle: boolean;
   @Prop() hasLabels: boolean;
   @Prop() hasLinks: boolean;
@@ -68,6 +72,22 @@ export class EclContentBlock {
         list.classList.add('ecl-content-block__list', `sc-ecl-content-block-${this.theme}`);
       }
     }
+
+    if (this.eclScript) {
+      // Load the ECL vanilla js if not already present.
+      const src = getAssetPath('./build/scripts/ecl-content-block-vanilla.js');
+      if (document.querySelector(`script[src="${src}"]`)) {
+        document.querySelector(`script[src="${src}"]`).remove();
+      }
+      const script = document.createElement('script');
+      script.src = src;
+      script.onload = () => {
+        const contentBlock = new ECL.ContentBlock(this.el);
+        contentBlock.init();
+      };
+
+      document.body.appendChild(script);
+    }
   }
 
   render() {

src/components/ecl-content-block/package.json

@@ -8,19 +8,20 @@
   "private": true,
   "scripts": {
     "build:styles": "cross-env ecl-builder styles",
+    "build:scripts": "cross-env ecl-builder scripts",
     "build": "run-s clean build:*",
     "clean": "rimraf build",
     "prepublish": "npm run build"
   },
   "devDependencies": {
-    "@ecl/builder": "3.10.0",
-    "@ecl/theme-ec": "3.10.0",
-    "@ecl/theme-eu": "3.10.0",
-    "@ecl/vanilla-component-content-block": "3.10.0",
-    "@ecl/vanilla-component-description-list": "3.10.0",
-    "@ecl/vanilla-component-icon": "3.10.0",
-    "@ecl/vanilla-component-label": "3.10.0",
-    "@ecl/vanilla-component-link": "3.10.0",
+    "@ecl/builder": "3.11.0",
+    "@ecl/theme-ec": "3.11.0",
+    "@ecl/theme-eu": "3.11.0",
+    "@ecl/vanilla-component-content-block": "3.11.0",
+    "@ecl/vanilla-component-description-list": "3.11.0",
+    "@ecl/vanilla-component-icon": "3.11.0",
+    "@ecl/vanilla-component-label": "3.11.0",
+    "@ecl/vanilla-component-link": "3.11.0",
     "cross-env": "7.0.3"
   },
   "repository": {

src/components/ecl-content-block/readme.md

@@ -9,6 +9,7 @@
 
 | Property            | Attribute             | Description | Type      | Default     |
 | ------------------- | --------------------- | ----------- | --------- | ----------- |
+| `eclScript`         | `ecl-script`          |             | `boolean` | `false`     |
 | `hasDescription`    | `has-description`     |             | `boolean` | `undefined` |
 | `hasLabels`         | `has-labels`          |             | `boolean` | `undefined` |
 | `hasLinks`          | `has-links`           |             | `boolean` | `undefined` |

src/components/ecl-content-block/test/__snapshots__/ecl-content-block.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ecl-content-block renders 1`] = `
-<ecl-content-block has-description="" has-labels="" has-links="" has-lists="" has-secondary-links="" has-title="" meta-primary="[&quot;PRIMARY META&quot;, &quot;DD Month Year&quot;]" meta-secondary="[{&quot;label&quot;: &quot;2018/10/22&quot;, &quot;icon&quot;: &quot;calendar&quot;}, {&quot;label&quot;: &quot;Luxembourg&quot;, &quot;icon&quot;: &quot;location&quot;}]" theme="ec">
+<ecl-content-block ecl-script="" has-description="" has-labels="" has-links="" has-lists="" has-secondary-links="" has-title="" meta-primary="[&quot;PRIMARY META&quot;, &quot;DD Month Year&quot;]" meta-secondary="[{&quot;label&quot;: &quot;2018/10/22&quot;, &quot;icon&quot;: &quot;calendar&quot;}, {&quot;label&quot;: &quot;Luxembourg&quot;, &quot;icon&quot;: &quot;location&quot;}]" theme="ec">
   <!---->
   <div class="ecl-content-block">
     <ul class="ecl-content-block__label-container">