Merge branch 'v3.7.0-dev' of github.com:ec-europa/europa-component-li…

…brary into FRONT-3542-optgroup

.size-limit.json

@@ -22,7 +22,7 @@
   {
     "path": "dist/packages/eu/styles/ecl-eu.css",
     "webpack": false,
-    "limit": "37 KB"
+    "limit": "38 KB"
   },
   {
     "path": "dist/packages/eu/styles/ecl-eu-print.css",

lerna.json

@@ -7,6 +7,7 @@
     "labels": {
       "tag: new feature": ":rocket: New Feature",
       "tag: breaking change": ":boom: Breaking Change",
+      "tag: markup changes": ":warning: Markup Changes",
       "tag: bug fix": ":bug: Bug Fix",
       "tag: enhancement": ":nail_care: Enhancement",
       "tag: documentation": ":memo: Documentation",

package.json

@@ -36,38 +36,38 @@
     "@babel/plugin-proposal-export-default-from": "7.18.10",
     "@babel/plugin-transform-runtime": "7.19.6",
     "@prettier/plugin-xml": "2.2.0",
-    "@size-limit/preset-big-lib": "8.1.0",
-    "babel-jest": "29.3.1",
+    "@size-limit/preset-big-lib": "8.1.2",
+    "babel-jest": "29.4.0",
     "classnames": "2.3.2",
-    "eslint": "8.29.0",
+    "eslint": "8.32.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-config-prettier": "8.6.0",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jest": "26.8.7",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react": "7.32.1",
     "eslint-plugin-react-hooks": "4.6.0",
     "glob": "7.2.0",
-    "husky": "8.0.2",
-    "jest": "29.3.1",
+    "husky": "8.0.3",
+    "jest": "29.4.0",
     "jest-axe": "6.0.0",
-    "jest-environment-jsdom": "29.3.1",
+    "jest-environment-jsdom": "29.4.0",
     "lerna": "5.5.4",
     "lerna-changelog": "2.2.0",
     "lint-staged": "13.1.0",
     "npm-run-all": "4.1.5",
-    "patch-package": "6.5.0",
+    "patch-package": "6.5.1",
     "postinstall-postinstall": "2.1.0",
-    "prettier": "2.8.1",
+    "prettier": "2.8.3",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "rimraf": "3.0.2",
-    "size-limit": "8.1.0",
+    "rimraf": "4.1.2",
+    "size-limit": "8.1.2",
     "ssri": "9.0.1",
-    "stylelint": "14.16.0",
+    "stylelint": "14.16.1",
     "stylelint-config-css-modules": "4.1.0",
     "stylelint-config-prettier": "9.0.4",
     "stylelint-config-standard": "26.0.0",
@@ -95,7 +95,9 @@
     "portscanner": ">=2.2.0",
     "parse-path": ">=5.0.0",
     "parse-url": ">=8.1.0",
-    "qs": ">=6.2.4"
+    "qs": ">=6.2.4",
+    "json5": ">=2.2.2",
+    "ua-parser-js": ">=1.0.33"
   },
   "engines": {
     "node": ">=12.0.0",

src/implementations/twig/components/banner/README.md

@@ -0,0 +1,47 @@
+# ECL Banner
+
+npm package: `@ecl/twig-component-banner`
+
+```shell
+npm install --save @ecl/twig-component-banner
+```
+
+### Parameters
+
+- **"variant"** (string) (default: 'primary') Variant of banner (can be 'primary', 'image','image-shade','image-gradient')
+- **"size"** (string) (default: 'm') Size of the banner (can be 's', 'm', 'l')
+- **"title"** (string) (default: '') Title of banner
+- **"image"** (string) (default: '') Image for banner (required for image banner type)
+- **"credit"** (string) (default: '') Credit for the image
+- **"description"** (string) (default: '') Description of banner
+- **"centered"** (bool) (default: true) Define if banner should be centered
+- **"full_width"** (bools) (default: false) Extends the banner to whole viewport when used inside the grid
+- **"link"** (associative array) (default: predefined structure) predefined structure for the Link component
+- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
+- **"extra_attributes"** (optional) (array) (default: []) Extra attributes
+  - "name" (string) Attribute name, eg. 'data-test'
+  - "value" (string) Attribute value, eg: 'data-test-1'
+
+### Example:
+
+<!-- prettier-ignore -->
+```twig
+{% include '@ecl/banner/banner.html.twig' with {  
+  title: 'EU Budget for the future',  
+  description: 'Innovation, economy, environment and geopolitics',  
+  centered: true,  
+  variant: 'image',  
+  image: 'url/path-to-image',  
+  credit: '© Copyright',
+  link: {  
+    link: {  
+      label: 'Subscribe',  
+      icon_position: 'after',  
+    },  
+    icon: {  
+      path: 'path-to-the-icon-file',  
+      ...  
+    },  
+  },  
+} %}
+```