Merge branch 'v4-dev' into FRONT-4607-banner-corner

package.json

@@ -37,17 +37,17 @@
     "@babel/plugin-proposal-export-default-from": "7.24.7",
     "@babel/plugin-transform-runtime": "7.25.4",
     "@prettier/plugin-xml": "3.4.1",
-    "@size-limit/preset-big-lib": "11.1.4",
+    "@size-limit/preset-big-lib": "11.1.5",
     "babel-jest": "29.7.0",
     "classnames": "2.5.1",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-plugin-import": "2.30.0",
     "eslint-plugin-jest": "27.9.0",
-    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-jsx-a11y": "6.10.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.1",
+    "eslint-plugin-react": "7.35.2",
     "eslint-plugin-react-hooks": "4.6.2",
     "glob": "11.0.0",
     "husky": "9.1.5",
@@ -65,7 +65,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "size-limit": "11.1.4",
+    "size-limit": "11.1.5",
     "ssri": "10.0.6",
     "stylelint": "16.9.0",
     "stylelint-config-css-modules": "4.4.0",
@@ -111,7 +111,10 @@
     "axios": ">=1.7.4",
     "ip": ">=2.0.1",
     "ws": ">=8.17.1",
-    "micromatch": ">=4.0.8"
+    "micromatch": ">=4.0.8",
+    "serve-static": ">=1.16.0",
+    "send": ">=0.19.0",
+    "path-to-regexp": "0.1.10"
   },
   "engines": {
     "node": ">=12.0.0",

src/implementations/twig/components/checkbox/checkbox-item.html.twig

@@ -89,7 +89,7 @@
   {% if _required %}
     required
   {% endif %}
-  />
+  >
   <label
     {% if _id %}
       for="{{ _id }}"

src/implementations/twig/components/content-item/content-item.html.twig

@@ -117,7 +117,7 @@
           <source srcset="{{ _source.src }}" media="{{ _source.media|default('') }}" type="{{ _source.type|default('') }}">
         {% endfor %}
       {% endif %}
-      <img class="ecl-content-item__image" src="{{ _picture.img.src }}" alt="{{ _picture.img.alt|default('') }}" />
+      <img class="ecl-content-item__image" src="{{ _picture.img.src }}" alt="{{ _picture.img.alt|default('') }}">
     </picture>
   {% endif %}
   {% if _date is not empty %}

src/implementations/twig/components/file-upload/file-upload.html.twig

@@ -92,7 +92,7 @@
   {% if _extra_attributes is not empty %}
     {{- _extra_attributes -}}
   {% endif %}
-  />
+  >
 
   <label
     class="ecl-file-upload__button-container"

src/implementations/twig/components/picture/picture.html.twig

@@ -89,7 +89,7 @@
     {% if _lazy %}
       loading="lazy"
     {% endif %}
-  />
+  >
   {% endif %}
 </picture> 
 

src/implementations/twig/components/radio/radio-button.html.twig

@@ -91,7 +91,7 @@
   {% if _required %}
     required
   {% endif %}
-  />
+  >
 
   <label
     class="{{ _label_css_class }}"

src/implementations/twig/components/range/range.html.twig

@@ -100,7 +100,7 @@
   required
 {% endif %}
   {{ _extra_attributes|raw }}
-/>
+>
 
 <div class="ecl-range__bubble" data-ecl-range-bubble>
   <span class="ecl-range__value-bubble" data-ecl-range-value-current></span>

src/implementations/twig/components/rating-field/rating-field.html.twig

@@ -68,7 +68,7 @@
       {% if _disabled %}
         disabled
       {% endif %}
-    />
+    >
     <label 
       class="ecl-rating-field__label" 
       for="{{ _item_id }}">

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

@@ -0,0 +1,21 @@
+# ECL separator component
+
+npm package: `@ecl/twig-component-separator`
+
+### Parameters:
+
+- **"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'
+
+```shell
+npm install --save @ecl/twig-component-separator
+```
+
+### Example:
+
+<!-- prettier-ignore -->
+```twig
+{% include '@ecl/separator/separator.html.twig'  %}
+```

src/implementations/twig/components/separator/__snapshots__/separator.test.js.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Separator Default renders correctly 1`] = `
+<jest>
+  <hr
+    class="ecl-separator"
+  />
+</jest>
+`;
+
+exports[`Separator Default renders correctly with extra attributes 1`] = `
+<jest>
+  <hr
+    class="ecl-separator"
+    data-test="data-test-value"
+    data-test-1="data-test-value-1"
+  />
+</jest>
+`;
+
+exports[`Separator Default renders correctly with extra class names 1`] = `
+<jest>
+  <hr
+    class="ecl-separator custom-class custom-class--test"
+  />
+</jest>
+`;

src/implementations/twig/components/separator/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@ecl/twig-component-separator",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "4.6.3",
+  "description": "ECL Separator",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@ecl/vanilla-component-separator": "4.6.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ec-europa/europa-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ec-europa/europa-component-library/issues"
+  },
+  "homepage": "https://github.com/ec-europa/europa-component-library",
+  "keywords": [
+    "ecl",
+    "europa-component-library",
+    "design-system",
+    "twig"
+  ]
+}

src/implementations/twig/components/separator/separator.html.twig

@@ -0,0 +1,39 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the icon
+  - "extra_attributes" (optional) (array) (default: []) Extra attributes for icon
+    - "name" (string) Attribute name, eg. 'data-test'
+    - "value" (optional) (string) Attribute value, eg: 'data-test-1'
+#}
+
+{# Internal properties #}
+
+{% set _css_class = 'ecl-separator' %}
+{% set _extra_attributes = '' %}
+
+{# Internal logic - Process properties #}
+
+{% if extra_classes is defined and extra_classes is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
+{% endif %}
+
+{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
+  {% for attr in extra_attributes %}
+    {% if attr.value is defined %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') ~ '="' ~ attr.value|e('html_attr') ~ '"' %}
+    {% else %}
+      {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name|e('html_attr') %}
+    {% endif %}
+  {% endfor %}
+{% endif %}
+
+{# Print the result #}
+
+<hr
+  class="{{ _css_class }}"
+  {{ _extra_attributes|raw }}
+>
+
+{% endapply %}

src/implementations/twig/components/separator/separator.story.js

@@ -0,0 +1,50 @@
+import { withNotes } from '@ecl/storybook-addon-notes';
+import withCode from '@ecl/storybook-addon-code';
+
+import separator from './separator.html.twig';
+import notes from './README.md';
+
+export default {
+  title: 'Components/Separator',
+  decorators: [withNotes, withCode],
+  parameters: {
+    controls: { disable: true },
+    parameters: { layout: 'fullscreen' },
+  },
+};
+
+export const Default = (_, { loaded: { component } }) => component;
+
+Default.render = async () => {
+  const renderedSeparator = `<ul class="ecl-unordered-list">
+      <li class="ecl-unordered-list__item">Unordered list</li>
+      <li class="ecl-unordered-list__item">Unordered list 
+        <ul class="ecl-unordered-list">
+          <li class="ecl-unordered-list__item">Nested unordered list</li>
+          <li class="ecl-unordered-list__item">Nested unordered list</li>
+        </ul>
+      </li>
+    </ul>
+    ${await separator()}
+    <ol class="ecl-ordered-list">
+      <li class="ecl-ordered-list__item">Ordered list</li>
+      <li class="ecl-ordered-list__item">Ordered list <ol>
+        <ol class="ecl-ordered-list">
+          <li class="ecl-ordered-list__item">Nested ordered list</li>
+          <li class="ecl-ordered-list__item">Nested ordered list</li>
+        </ol>
+      </li>
+    </ol>
+    ${await separator()}
+    <dl class="ecl-description-list">
+      <dt class="ecl-description-list__term">Description term</dt>
+      <dd class="ecl-description-list__definition">Description definition</dd>
+      <dt class="ecl-description-list__term">Description term</dt>
+      <dd class="ecl-description-list__definition">Description definition</dd>
+    </dl>${await separator()}`;
+
+  return renderedSeparator;
+};
+
+Default.storyName = 'default';
+Default.parameters = { notes: { markdown: notes } };

src/implementations/twig/components/separator/separator.test.js

@@ -0,0 +1,46 @@
+import { renderTwigFileAsNode, renderTwigFileAsHtml } from '@ecl/test-utils';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+describe('Separator', () => {
+  const template = '@ecl/separator/separator.html.twig';
+  const render = (params) => renderTwigFileAsNode(template, params);
+
+  describe('Default', () => {
+    test('renders correctly', () => {
+      expect.assertions(1);
+
+      return expect(render()).resolves.toMatchSnapshot();
+    });
+
+    test('renders correctly with extra class names', () => {
+      expect.assertions(1);
+
+      const withExtraClasses = {
+        extra_classes: 'custom-class custom-class--test',
+      };
+
+      return expect(render(withExtraClasses)).resolves.toMatchSnapshot();
+    });
+
+    test('renders correctly with extra attributes', () => {
+      expect.assertions(1);
+
+      const withExtraAttributes = {
+        extra_attributes: [
+          { name: 'data-test', value: 'data-test-value' },
+          { name: 'data-test-1', value: 'data-test-value-1' },
+        ],
+      };
+
+      return expect(render(withExtraAttributes)).resolves.toMatchSnapshot();
+    });
+
+    test(`passes the accessibility tests`, async () => {
+      expect(
+        await axe(await renderTwigFileAsHtml(template, {}, true)),
+      ).toHaveNoViolations();
+    });
+  });
+});

src/implementations/twig/components/text-input/text-input.html.twig

@@ -75,6 +75,6 @@
     required
   {% endif %}
     {{ _extra_attributes|raw }}
-  />
+  >
 
 {% endapply %}

src/implementations/twig/components/video/video.html.twig

@@ -83,7 +83,7 @@
   {% if _source.src is defined and _source.src is not empty %}
     src="{{ _source.src }}"
   {% endif %}
-  />
+  >
   {% endfor %}
 {% endif %}
 
@@ -102,7 +102,7 @@
   {% if _track.src_lang is defined and _track.src_lang is not empty %}
     srclang="{{ _track.src_lang }}"
   {% endif %}
-  />
+  >
 
   {% endfor %}
 {% endif %}

src/implementations/twig/utilities/background/index.story.js

@@ -58,7 +58,7 @@ export const Custom = (args) => {
   }
   return `<p class='ecl-u-type-paragraph ${background}'>
       Sample text regular
-      <br />
+      <br>
       <strong>Sample text bold</strong>
     </p>
   `;