Merge pull request #20 from ec-europa/chore-3.8

chore: Updating components to ECL 3.8.3

.eslintignore

@@ -11,3 +11,5 @@ src/plugins/
 ckeditor5
 playground/editor
 playground/ecl-webcomponents
+packages/ecl-webcomponents-react-consumer/src/assets/
+packages/ecl-webcomponents-angular-workspace/server.js

.github/workflows/ci.yml

@@ -58,7 +58,7 @@ jobs:
       - name: Package application
         run: yarn build
       - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@v1.2.1
+        uses: nwtgck/actions-netlify@v2.0.0
         with:
           alias: preview-${{ github.event.number }}
           publish-dir: 'build'

.storybook/main.js

@@ -27,6 +27,9 @@ if (!isProd) {
     path.resolve(`${__dirname}/../src/components/ecl-gallery`),
     path.resolve(`${__dirname}/../src/components/ecl-range`),
     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}/../static`),
   ];
 }
 

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="shortcut icon" href="/favicon.ico" />

.storybook/manager.js

@@ -0,0 +1,47 @@
+import { addons } from '@storybook/addons';
+import browserUpdate from 'browser-update';
+import { create } from '@storybook/theming';
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  sidebarAnimations: true,
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: create({
+    base: 'light',
+    brandTitle: `ECL Webcomponents`,
+    brandUrl: 'https://github.com/ec-europa/ecl-webcomponents',
+    brandImage: undefined,
+  }),
+  initialActive: 'sidebar',
+  sidebar: {
+    showRoots: false,
+  },
+});
+
+browserUpdate({
+  required: {
+    i: 999,
+    e: 79,
+    f: -4,
+    c: -4,
+    s: -2,
+  },
+  text: {
+    msg: 'This websites uses <a href="http://storybook.js.org" title="storybook ui">storybook<a> which doesn\'t fully support <b>{brow_name}</b>.',
+    msgmore: '(supported browsers are: chrome latest 5, firefox latest 5, safari latest 3, Edge latest 5)',
+  },
+  text_for_i: {
+    msg: 'Sorry, Internet Explorer is not supported on this website.',
+    msgmore: '',
+  },
+  text_for_e: {
+    msg: 'Sorry, Microsoft Edge is only supported starting from version 79 on this website.',
+    msgmore: '',
+  },
+  noclose: false,
+  no_permanent_hide: false,
+});

.storybook/preview-head.html

@@ -1,3 +1,4 @@
+<link rel="shortcut icon" href="/favicon.ico" />
 <meta data-ecl-asset-path="/" />
 <style>
   .sbdocs-content {

docs/README.md

@@ -7,7 +7,7 @@ The components are written in typescript, using [stencil](https://stenciljs.com)
 
 ## Where can i find the source code of ECL webcomponents?
 
-ECL webcomponents is on [github](https://github.com/planctus/ecl-webcomponents), at the moment as a private repository, will be then moved in the ec-europa organisation in github and it will be public.
+ECL webcomponents is on [github](https://github.com/ec-europa/ecl-webcomponents) as a public repository.
 
 ## What is the ECL webcomponents website?
 
@@ -21,14 +21,17 @@ The library is distributed on npm, in the `@ecl` organisation, as a single packa
 The distributed package contains all that is needed, including resources like images, icons, scripts, styles.
 The main entrypoint for the library is a single js, in `dist/ecl-webcomponents/ecl-webcomponents.esm.js` which enables
 the usage of any of the custom elements exported, but only the ones really used will be loaded.
-**This distribution might not be ideal for angular, since it would probably expect all the js to be statically defined**
 
 ## Where can ECL webcomponents be used?
 
 Everywhere the ECL visual identity needs to be used and there is javascript available, basically.
 Vanilla web-components are widely supported, only old browser might not be capable of using them, for this polyfills exists,
 but at the moment there is no clear definition of the browsers to support.
 
+## React and Angular
+
+We release two packages which are meant to offer a seamless usage of the library in React and Angular.
+
 ## Doc pages
 
 - [decisions](./decisions.md)

docs/components.md

@@ -11,11 +11,10 @@ Examples:
 - `@ecl/webcomponents-menu` - name of the package
 
 - `/src/components/ecl-menu/ecl-menu.tsx` - Component in typescript
-- `/src/components/ecl-menu/ecl-menu-ec.scss` - Source sass file for EC
-- `/src/components/ecl-menu/src/scss/ecl-menu-ec.scss` - Source sass file for EC
-- `/src/components/ecl-menu/src/scss/ecl-menu-eu.scss` - Source sass file for EU
+- `/src/components/ecl-menu/src/styles/ecl-menu-ec.scss` - Source sass file for EC
+- `/src/components/ecl-menu/src/styles/ecl-menu-eu.scss` - Source sass file for EU
 
-There will be only one (or more if the component requires that) source file for EC and EU, stencil is capable of dynamically loading a css file based on a prop, which is called in ECL webcomponent "theme", and it can have `ec` or `eu` as values.
+There will be only one css file built for EC and EU, stencil is capable of dynamically loading a css file based on a prop, which is called in ECL webcomponent "theme", and it can have `ec` or `eu` as values.
 The configuration for this is in `/src/globals/global.ts`
 
 This file system can be automatically generated (with additional files) by running:
@@ -25,7 +24,7 @@ yarn generate ecl-{component}
 yarn generate:template ecl-{component}
 ```
 
-The generated files are currently empty, only the ones generated by stencil will contain a
+The generated files are currently empty, except those created by stencil
 
 ```js
   styleUrls: {

docs/developing.md

@@ -2,7 +2,7 @@
 
 ## Software requirements
 
-- Node.js = 14
+- Node.js = 18
 - yarn >= 1.10.1
 
 ## How to start?

package.json

@@ -74,22 +74,23 @@
     "@stencil/core": "3.3.1"
   },
   "devDependencies": {
-    "@babel/core": "7.22.1",
-    "@babel/eslint-parser": "7.21.8",
-    "@babel/plugin-transform-runtime": "7.22.4",
-    "@babel/preset-react": "7.22.3",
-    "@babel/preset-typescript": "7.21.5",
+    "@babel/core": "7.22.5",
+    "@babel/eslint-parser": "7.22.5",
+    "@babel/plugin-transform-runtime": "7.22.5",
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
     "@prettier/plugin-xml": "2.2.0",
     "@stencil/angular-output-target": "0.7.1",
-    "@stencil/react-output-target": "0.5.1",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-links": "7.0.18",
-    "@storybook/builder-webpack5": "7.0.18",
-    "@storybook/cli": "7.0.18",
-    "@storybook/html": "7.0.18",
-    "@storybook/html-webpack5": "7.0.18",
+    "@stencil/react-output-target": "0.5.3",
+    "@storybook/addon-essentials": "7.0.20",
+    "@storybook/addon-links": "7.0.20",
+    "@storybook/builder-webpack5": "7.0.20",
+    "@storybook/cli": "7.0.20",
+    "@storybook/html": "7.0.20",
+    "@storybook/html-webpack5": "7.0.20",
     "@types/jest": "27.0.3",
     "babel-loader": "9.1.2",
+    "browser-update": "3.3.44",
     "build-number-generator": "2.0.4",
     "copyfiles": "2.4.1",
     "core-js": "3.30.2",
@@ -120,7 +121,7 @@
     "react-dom": "18.2.0",
     "replace-in-file": "6.3.5",
     "rimraf": "5.0.1",
-    "stylelint": "15.6.3",
+    "stylelint": "15.7.0",
     "stylelint-config-css-modules": "4.2.0",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-standard": "33.0.0",

patches/@ecl+theme-dev+3.7.1.patch → patches/@ecl+theme-dev+3.8.2.patch

@@ -1,20 +1,19 @@
 diff --git a/node_modules/@ecl/theme-dev/maps/color.scss b/node_modules/@ecl/theme-dev/maps/color.scss
-index 867d310..6061473 100644
+index 0c6ca02..42ecd0b 100644
 --- a/node_modules/@ecl/theme-dev/maps/color.scss
 +++ b/node_modules/@ecl/theme-dev/maps/color.scss
-@@ -10,6 +10,7 @@ $color: (
+@@ -32,12 +32,14 @@ $color: (
    'blue-120': #003776,
    'blue-110': #003d84,
    'blue-100': #004494,
 +  'blue-80': #3e6cd5,
    'blue-75': #4073af,
    'blue-50': #7fa1c9,
    'blue-25': #bfd0e4,
-@@ -20,6 +21,7 @@ $color: (
-   'yellow-75': #ffde39,
-   'yellow-50': #ffe879,
-   'yellow-25': #fff4bb,
-+  'grey-140': #171a22,
+   'blue-5': #f2f5f9,
+   'green-100': #467a39,
    'grey-100': #404040,
++  'grey-140': #171a22,
    'grey-75': #707070,
    'grey-50': #9f9f9f,
+   'grey-25': #cfcfcf,

patches/@ecl+vanilla-component-button+3.8.2.patch

@@ -0,0 +1,15 @@
+diff --git a/node_modules/@ecl/vanilla-component-button/_button.scss b/node_modules/@ecl/vanilla-component-button/_button.scss
+index 4531e25..8698461 100644
+--- a/node_modules/@ecl/vanilla-component-button/_button.scss
++++ b/node_modules/@ecl/vanilla-component-button/_button.scss
+@@ -67,10 +67,6 @@ $_shadow-hover: null !default;
+   margin-inline-start: map.get(theme.$spacing, 'xs');
+ }
+
+-.ecl-button__icon:only-child {
+-  margin: 0;
+-}
+-
+ /**
+ * Primary
+ */

patches/@ecl+vanilla-component-carousel+3.7.1.patch → patches/@ecl+vanilla-component-carousel+3.8.2.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/@ecl/vanilla-component-carousel/carousel.js b/node_modules/@ecl/vanilla-component-carousel/carousel.js
-index bc7a38a..3947657 100644
+index 92f99d9..aab581c 100644
 --- a/node_modules/@ecl/vanilla-component-carousel/carousel.js
 +++ b/node_modules/@ecl/vanilla-component-carousel/carousel.js
-@@ -126,6 +126,8 @@ export class Carousel {
+@@ -131,6 +131,8 @@ export class Carousel {
      this.direction = getComputedStyle(this.element).direction;
 
      this.slides = queryAll(this.slideClass, this.element);

patches/@ecl+vanilla-component-description-list+3.8.2.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/@ecl/vanilla-component-description-list/description-list.js b/node_modules/@ecl/vanilla-component-description-list/description-list.js
+index 5bd1846..29c6ff3 100644
+--- a/node_modules/@ecl/vanilla-component-description-list/description-list.js
++++ b/node_modules/@ecl/vanilla-component-description-list/description-list.js
+@@ -141,7 +141,8 @@ export class DescriptionList {
+
+     const parent = e.target.parentNode;
+     if (this.element.contains(parent)) {
+-      [...parent.children].forEach((item) => {
++      const parentChildren = Array.from(parent.children);
++      parentChildren.forEach((item) => {
+         item.classList.remove('ecl-description-list__definition-item--hidden');
+         item.classList.remove(
+           'ecl-description-list__definition-item--last-visible'

playground/index.html

@@ -86,7 +86,7 @@ <h2>PREVIEW</h2>
   </body>
   <footer>
     <ecl-grid container="true">
-      <ecl-text is-bold tag="span" level="5">Build number: {####}</ecl-text> | <ecl-text is-bold tag="span" level="5">Ckeditor: {!!!!}</ecl-text> |
+      <ecl-text is-bold tag="span" level="5">Build number: {####}</ecl-text> | <ecl-text is-bold tag="span" level="5">Ckeditor: 36.0.1</ecl-text> |
       <ecl-text is-bold tag="span" level="5">Ecl Webcomponents: {----}</ecl-text>
     </ecl-grid>
   </footer>

scripts/copy-assets.sh

@@ -36,3 +36,6 @@ cp -r ./src/components/ecl-site-header/build ./build
 cp -r ./src/components/ecl-gallery/build ./build
 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 -a ./static/* ./build