From 3d38efbb3d4028898e070e3becc6d81f825e46c2 Mon Sep 17 00:00:00 2001
From: Alexis Gaillard <a@bypopcorn.com>
Date: Tue, 31 May 2022 15:17:50 +0200
Subject: [PATCH 1/4] fix(forms): Add invalid icons for EC and fix them for EU
 - FRONT-3651

---
 .../twig/components/checkbox/README.md        |   1 +
 .../__snapshots__/checkbox.test.js.snap       | 528 +-----------------
 .../checkbox/checkbox-group.html.twig         |   1 +
 .../components/checkbox/checkbox.story.js     |   7 +-
 .../twig/components/checkbox/checkbox.test.js |  50 +-
 .../__snapshots__/datepicker.test.js.snap     | 427 +-------------
 .../components/datepicker/datepicker.story.js |   7 +-
 .../components/datepicker/datepicker.test.js  |  17 +-
 .../twig/components/file-upload/README.md     |   1 +
 .../__snapshots__/file-upload.test.js.snap    |  11 +-
 .../file-upload/file-upload.html.twig         |  10 +-
 .../file-upload/file-upload.story.js          |   4 +-
 .../twig/components/radio/README.md           |   1 +
 .../select/__snapshots__/select.test.js.snap  |  11 +-
 .../twig/components/select/select.story.js    |  11 +-
 .../twig/components/select/select.test.js     |   4 +-
 .../__snapshots__/text-area.test.js.snap      | 274 +--------
 .../components/text-area/text-area.story.js   |   7 +-
 .../components/text-area/text-area.test.js    |  17 +-
 .../__snapshots__/text-input.test.js.snap     | 270 +--------
 .../components/text-input/text-input.story.js |   7 +-
 .../components/text-input/text-input.test.js  |  15 +-
 .../vanilla/components/form/_form.scss        |   3 +-
 .../components/checkbox/demo/data--ec.js      |  47 --
 .../checkbox/demo/{data--eu.js => data.js}    |   0
 .../components/datepicker/demo/data--ec.js    |  14 -
 .../datepicker/demo/{data--eu.js => data.js}  |   0
 .../file-upload/demo/data--multiple.js        |   5 +
 src/specs/components/file-upload/demo/data.js |   5 +
 .../select/demo/data-multiple--ec.js          |  60 --
 ...{data-multiple--eu.js => data-multiple.js} |   2 +-
 .../components/select/demo/data-single--ec.js |  55 --
 .../{data-single--eu.js => data-single.js}    |   0
 .../components/text-area/demo/data--ec.js     |  13 -
 .../text-area/demo/{data--eu.js => data.js}   |   0
 .../components/text-input/demo/data--ec.js    |  12 -
 .../text-input/demo/{data--eu.js => data.js}  |   0
 37 files changed, 136 insertions(+), 1761 deletions(-)
 delete mode 100644 src/specs/components/checkbox/demo/data--ec.js
 rename src/specs/components/checkbox/demo/{data--eu.js => data.js} (100%)
 delete mode 100644 src/specs/components/datepicker/demo/data--ec.js
 rename src/specs/components/datepicker/demo/{data--eu.js => data.js} (100%)
 delete mode 100644 src/specs/components/select/demo/data-multiple--ec.js
 rename src/specs/components/select/demo/{data-multiple--eu.js => data-multiple.js} (98%)
 delete mode 100644 src/specs/components/select/demo/data-single--ec.js
 rename src/specs/components/select/demo/{data-single--eu.js => data-single.js} (100%)
 delete mode 100644 src/specs/components/text-area/demo/data--ec.js
 rename src/specs/components/text-area/demo/{data--eu.js => data.js} (100%)
 delete mode 100644 src/specs/components/text-input/demo/data--ec.js
 rename src/specs/components/text-input/demo/{data--eu.js => data.js} (100%)

diff --git a/src/implementations/twig/components/checkbox/README.md b/src/implementations/twig/components/checkbox/README.md
index 6f4f8c24606..db45e021976 100644
--- a/src/implementations/twig/components/checkbox/README.md
+++ b/src/implementations/twig/components/checkbox/README.md
@@ -23,6 +23,7 @@ npm install --save @ecl/twig-component-checkbox
 - **"name"** (string) (default: '')
 - **"helper_id"** (string) (default: '')
 - **"invalid"** (boolean) (default: false)
+- **"invalid_icon"** (object of type "icon") (default: {})
 - **"required"** (boolean) (default: false)
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
diff --git a/src/implementations/twig/components/checkbox/__snapshots__/checkbox.test.js.snap b/src/implementations/twig/components/checkbox/__snapshots__/checkbox.test.js.snap
index 84276044c12..395c5939941 100644
--- a/src/implementations/twig/components/checkbox/__snapshots__/checkbox.test.js.snap
+++ b/src/implementations/twig/components/checkbox/__snapshots__/checkbox.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Checkbox EC default renders correctly 1`] = `
+exports[`Checkbox Default renders correctly 1`] = `
 <jest>
   <fieldset
     aria-describedby="checkbox-default-helper"
@@ -195,399 +195,7 @@ exports[`Checkbox EC default renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Checkbox EC default renders correctly with extra attributes 1`] = `
-<jest>
-  <fieldset
-    aria-describedby="checkbox-default-helper"
-    class="ecl-form-group"
-    data-test="data-test-value"
-    data-test-1="data-test-value-1"
-  >
-    <legend
-      class="ecl-form-label"
-      id="checkbox-default-label"
-    >
-      Select your preferred destinations
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </legend>
-    <div
-      class="ecl-help-block"
-      id="checkbox-default-helper"
-    >
-      Helper text for the group
-    </div>
-    <div
-      class="ecl-checkbox"
-    >
-      <input
-        checked=""
-        class="ecl-checkbox__input"
-        id="checkbox-default-1"
-        name="checkbox-default"
-        type="checkbox"
-        value="es"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-1"
-      >
-        <span
-          class="ecl-checkbox__box"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          Spain
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help"
-        id="helper-default-1"
-      >
-        Helper text for an option
-      </div>
-    </div>
-    <div
-      class="ecl-checkbox"
-    >
-      <input
-        class="ecl-checkbox__input"
-        id="checkbox-default-2"
-        name="checkbox-default"
-        type="checkbox"
-        value="be"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-2"
-      >
-        <span
-          class="ecl-checkbox__box"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          Belgium
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help"
-        id="helper-default-2"
-      >
-        Helper text for an option
-      </div>
-    </div>
-    <div
-      class="ecl-checkbox ecl-checkbox--disabled"
-    >
-      <input
-        class="ecl-checkbox__input"
-        disabled=""
-        id="checkbox-default-3"
-        name="checkbox-default"
-        type="checkbox"
-        value="fr"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-3"
-      >
-        <span
-          class="ecl-checkbox__box ecl-checkbox__box--disabled"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          France (disabled)
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help ecl-checkbox__help--disabled"
-        id="helper-default-3"
-      >
-        Helper text for an option
-      </div>
-    </div>
-    <div
-      class="ecl-checkbox"
-    >
-      <input
-        class="ecl-checkbox__input"
-        id="checkbox-default-4"
-        name="checkbox-default"
-        type="checkbox"
-        value="lorem"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-4"
-      >
-        <span
-          class="ecl-checkbox__box"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          Lorem ipsum dolor sit amet, 
-          <a
-            href="#"
-          >
-            consectetur adipiscing elit
-          </a>
-          . Nullam suscipit eros gravida arcu aliquet, sed finibus nisl egestas. Cras sed purus nec turpis eleifend dignissim a in massa.
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help"
-        id="helper-default-4"
-      >
-        Helper text for an option
-      </div>
-    </div>
-  </fieldset>
-</jest>
-`;
-
-exports[`Checkbox EC default renders correctly with extra class names 1`] = `
-<jest>
-  <fieldset
-    aria-describedby="checkbox-default-helper"
-    class="ecl-form-group custom-class custom-class--test"
-  >
-    <legend
-      class="ecl-form-label"
-      id="checkbox-default-label"
-    >
-      Select your preferred destinations
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </legend>
-    <div
-      class="ecl-help-block"
-      id="checkbox-default-helper"
-    >
-      Helper text for the group
-    </div>
-    <div
-      class="ecl-checkbox"
-    >
-      <input
-        checked=""
-        class="ecl-checkbox__input"
-        id="checkbox-default-1"
-        name="checkbox-default"
-        type="checkbox"
-        value="es"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-1"
-      >
-        <span
-          class="ecl-checkbox__box"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          Spain
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help"
-        id="helper-default-1"
-      >
-        Helper text for an option
-      </div>
-    </div>
-    <div
-      class="ecl-checkbox"
-    >
-      <input
-        class="ecl-checkbox__input"
-        id="checkbox-default-2"
-        name="checkbox-default"
-        type="checkbox"
-        value="be"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-2"
-      >
-        <span
-          class="ecl-checkbox__box"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          Belgium
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help"
-        id="helper-default-2"
-      >
-        Helper text for an option
-      </div>
-    </div>
-    <div
-      class="ecl-checkbox ecl-checkbox--disabled"
-    >
-      <input
-        class="ecl-checkbox__input"
-        disabled=""
-        id="checkbox-default-3"
-        name="checkbox-default"
-        type="checkbox"
-        value="fr"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-3"
-      >
-        <span
-          class="ecl-checkbox__box ecl-checkbox__box--disabled"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          France (disabled)
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help ecl-checkbox__help--disabled"
-        id="helper-default-3"
-      >
-        Helper text for an option
-      </div>
-    </div>
-    <div
-      class="ecl-checkbox"
-    >
-      <input
-        class="ecl-checkbox__input"
-        id="checkbox-default-4"
-        name="checkbox-default"
-        type="checkbox"
-        value="lorem"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-4"
-      >
-        <span
-          class="ecl-checkbox__box"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          Lorem ipsum dolor sit amet, 
-          <a
-            href="#"
-          >
-            consectetur adipiscing elit
-          </a>
-          . Nullam suscipit eros gravida arcu aliquet, sed finibus nisl egestas. Cras sed purus nec turpis eleifend dignissim a in massa.
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help"
-        id="helper-default-4"
-      >
-        Helper text for an option
-      </div>
-    </div>
-  </fieldset>
-</jest>
-`;
-
-exports[`Checkbox EC renders correctly when invalid 1`] = `
+exports[`Checkbox Default renders correctly when invalid 1`] = `
 <jest>
   <fieldset
     aria-describedby="checkbox-default-helper"
@@ -613,8 +221,16 @@ exports[`Checkbox EC renders correctly when invalid 1`] = `
     <div
       class="ecl-feedback-message"
     >
-      
-  Error message for the group
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
+        focusable="false"
+      >
+        <use
+          xlink:href="/icons.svg#error"
+        />
+      </svg>
+        Error message for the group
     </div>
     <div
       class="ecl-checkbox ecl-checkbox--invalid"
@@ -792,7 +408,7 @@ exports[`Checkbox EC renders correctly when invalid 1`] = `
 </jest>
 `;
 
-exports[`Checkbox EC renders correctly when required 1`] = `
+exports[`Checkbox Default renders correctly when required 1`] = `
 <jest>
   <fieldset
     aria-describedby="checkbox-default-helper"
@@ -991,86 +607,13 @@ exports[`Checkbox EC renders correctly when required 1`] = `
 </jest>
 `;
 
-exports[`Checkbox EC single checkbox renders correctly when invalid 1`] = `
-<jest>
-  <fieldset
-    aria-describedby="checkbox-default-helper"
-    class="ecl-form-group"
-  >
-    <legend
-      class="ecl-form-label ecl-form-label--invalid"
-      id="checkbox-default-label"
-    >
-      Select your preferred destinations
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </legend>
-    <div
-      class="ecl-help-block"
-      id="checkbox-default-helper"
-    >
-      Helper text for the group
-    </div>
-    <div
-      class="ecl-checkbox ecl-checkbox--invalid ecl-checkbox--single"
-    >
-      <input
-        checked=""
-        class="ecl-checkbox__input"
-        id="checkbox-default-1"
-        name="checkbox-default"
-        required=""
-        type="checkbox"
-        value="es"
-      />
-      <label
-        class="ecl-checkbox__label"
-        for="checkbox-default-1"
-      >
-        <span
-          class="ecl-checkbox__box ecl-checkbox__box--invalid"
-        >
-          <svg
-            aria-hidden="true"
-            class="ecl-icon ecl-icon--m ecl-checkbox__icon"
-            focusable="false"
-          >
-            <use
-              xlink:href="/icons.svg#check"
-            />
-          </svg>
-        </span>
-        <span
-          class="ecl-checkbox__text"
-        >
-          Spain
-        </span>
-      </label>
-      <div
-        class="ecl-checkbox__help"
-        id="helper-default-1"
-      >
-        Helper text for an option
-      </div>
-    </div>
-    <div
-      class="ecl-feedback-message"
-    >
-      
-  Error message for the group
-    </div>
-  </fieldset>
-</jest>
-`;
-
-exports[`Checkbox EU default renders correctly 1`] = `
+exports[`Checkbox Default renders correctly with extra attributes 1`] = `
 <jest>
   <fieldset
     aria-describedby="checkbox-default-helper"
     class="ecl-form-group"
+    data-test="data-test-value"
+    data-test-1="data-test-value-1"
   >
     <legend
       class="ecl-form-label"
@@ -1261,14 +804,14 @@ exports[`Checkbox EU default renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Checkbox EU invalid renders correctly 1`] = `
+exports[`Checkbox Default renders correctly with extra class names 1`] = `
 <jest>
   <fieldset
     aria-describedby="checkbox-default-helper"
-    class="ecl-form-group"
+    class="ecl-form-group custom-class custom-class--test"
   >
     <legend
-      class="ecl-form-label ecl-form-label--invalid"
+      class="ecl-form-label"
       id="checkbox-default-label"
     >
       Select your preferred destinations
@@ -1285,21 +828,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
       Helper text for the group
     </div>
     <div
-      class="ecl-feedback-message"
-    >
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#error"
-        />
-      </svg>
-        Error message for the group
-    </div>
-    <div
-      class="ecl-checkbox ecl-checkbox--invalid"
+      class="ecl-checkbox"
     >
       <input
         checked=""
@@ -1314,7 +843,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
         for="checkbox-default-1"
       >
         <span
-          class="ecl-checkbox__box ecl-checkbox__box--invalid"
+          class="ecl-checkbox__box"
         >
           <svg
             aria-hidden="true"
@@ -1340,7 +869,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="ecl-checkbox ecl-checkbox--invalid"
+      class="ecl-checkbox"
     >
       <input
         class="ecl-checkbox__input"
@@ -1354,7 +883,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
         for="checkbox-default-2"
       >
         <span
-          class="ecl-checkbox__box ecl-checkbox__box--invalid"
+          class="ecl-checkbox__box"
         >
           <svg
             aria-hidden="true"
@@ -1380,7 +909,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="ecl-checkbox ecl-checkbox--invalid ecl-checkbox--disabled"
+      class="ecl-checkbox ecl-checkbox--disabled"
     >
       <input
         class="ecl-checkbox__input"
@@ -1395,7 +924,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
         for="checkbox-default-3"
       >
         <span
-          class="ecl-checkbox__box ecl-checkbox__box--invalid ecl-checkbox__box--disabled"
+          class="ecl-checkbox__box ecl-checkbox__box--disabled"
         >
           <svg
             aria-hidden="true"
@@ -1421,7 +950,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="ecl-checkbox ecl-checkbox--invalid"
+      class="ecl-checkbox"
     >
       <input
         class="ecl-checkbox__input"
@@ -1435,7 +964,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
         for="checkbox-default-4"
       >
         <span
-          class="ecl-checkbox__box ecl-checkbox__box--invalid"
+          class="ecl-checkbox__box"
         >
           <svg
             aria-hidden="true"
@@ -1470,7 +999,7 @@ exports[`Checkbox EU invalid renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Checkbox EU single checkbox renders correctly when invalid 1`] = `
+exports[`Checkbox Default single checkbox renders correctly when invalid 1`] = `
 <jest>
   <fieldset
     aria-describedby="checkbox-default-helper"
@@ -1501,6 +1030,7 @@ exports[`Checkbox EU single checkbox renders correctly when invalid 1`] = `
         class="ecl-checkbox__input"
         id="checkbox-default-1"
         name="checkbox-default"
+        required=""
         type="checkbox"
         value="es"
       />
diff --git a/src/implementations/twig/components/checkbox/checkbox-group.html.twig b/src/implementations/twig/components/checkbox/checkbox-group.html.twig
index ca83e6e86fa..baa899f74f7 100644
--- a/src/implementations/twig/components/checkbox/checkbox-group.html.twig
+++ b/src/implementations/twig/components/checkbox/checkbox-group.html.twig
@@ -7,6 +7,7 @@
   - "name" (string) (default: '')
   - "helper_id" (string) (default: '')
   - "invalid" (boolean) (default: false)
+  - "invalid_icon" (object of type "icon") (default: {})
   - "required" (boolean) (default: false)
   - "extra_classes" (optional) (string) (default: '')
   - "extra_attributes" (optional) (array) (default: [])
diff --git a/src/implementations/twig/components/checkbox/checkbox.story.js b/src/implementations/twig/components/checkbox/checkbox.story.js
index 7b928188f2c..826f8457549 100644
--- a/src/implementations/twig/components/checkbox/checkbox.story.js
+++ b/src/implementations/twig/components/checkbox/checkbox.story.js
@@ -1,17 +1,12 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
 import { correctSvgPath, getFormControls } from '@ecl/story-utils';
-import getSystem from '@ecl/builder/utils/getSystem';
 
-import dataEc from '@ecl/specs-component-checkbox/demo/data--ec';
-import dataEu from '@ecl/specs-component-checkbox/demo/data--eu';
+import dataDefault from '@ecl/specs-component-checkbox/demo/data';
 
 import checkboxGroup from './checkbox-group.html.twig';
 import notes from './README.md';
 
-const system = getSystem();
-
-const dataDefault = system === 'eu' ? { ...dataEu } : { ...dataEc };
 const itemClone = { ...dataDefault.items[0] };
 
 const getArgs = (data) => ({
diff --git a/src/implementations/twig/components/checkbox/checkbox.test.js b/src/implementations/twig/components/checkbox/checkbox.test.js
index 5b8b280f101..8436b45c03f 100644
--- a/src/implementations/twig/components/checkbox/checkbox.test.js
+++ b/src/implementations/twig/components/checkbox/checkbox.test.js
@@ -1,39 +1,36 @@
 import { merge, renderTwigFileAsNode } from '@ecl/test-utils';
 
 // Import data for tests
-import dataEc from '@ecl/specs-component-checkbox/demo/data--ec';
-import dataEu from '@ecl/specs-component-checkbox/demo/data--eu';
+import data from '@ecl/specs-component-checkbox/demo/data';
 
-const dataSingleEc = { ...dataEc, items: [dataEc.items[0]], invalid: true };
-const dataSingleEu = { ...dataEu, items: [dataEu.items[0]], invalid: true };
-const dataInvalidEc = { ...dataEc, invalid: true };
-const dataInvalidEu = { ...dataEu, invalid: true };
+const dataSingle = { ...data, items: [data.items[0]], invalid: true };
+const dataInvalid = { ...data, invalid: true };
 
 describe('Checkbox', () => {
   const template = '@ecl/checkbox/checkbox-group.html.twig';
   const render = (params) => renderTwigFileAsNode(template, params);
 
-  describe('EC', () => {
-    test('default renders correctly', () => {
+  describe('Default', () => {
+    test('renders correctly', () => {
       expect.assertions(1);
 
-      return expect(render(dataEc)).resolves.toMatchSnapshot();
+      return expect(render(data)).resolves.toMatchSnapshot();
     });
 
-    test('default renders correctly with extra class names', () => {
+    test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
-      const withExtraClasses = merge(dataEc, {
+      const withExtraClasses = merge(data, {
         extra_classes: 'custom-class custom-class--test',
       });
 
       return expect(render(withExtraClasses)).resolves.toMatchSnapshot();
     });
 
-    test('default renders correctly with extra attributes', () => {
+    test('renders correctly with extra attributes', () => {
       expect.assertions(1);
 
-      const withExtraAttributes = merge(dataEc, {
+      const withExtraAttributes = merge(data, {
         extra_attributes: [
           { name: 'data-test', value: 'data-test-value' },
           { name: 'data-test-1', value: 'data-test-value-1' },
@@ -46,42 +43,23 @@ describe('Checkbox', () => {
     test('renders correctly when required', () => {
       expect.assertions(1);
 
-      dataEc.items.forEach((item) => {
+      data.items.forEach((item) => {
         item.required = true; // eslint-disable-line no-param-reassign
       });
 
-      return expect(render(dataEc)).resolves.toMatchSnapshot();
+      return expect(render(data)).resolves.toMatchSnapshot();
     });
 
     test('renders correctly when invalid', () => {
       expect.assertions(1);
 
-      return expect(render(dataInvalidEc)).resolves.toMatchSnapshot();
+      return expect(render(dataInvalid)).resolves.toMatchSnapshot();
     });
 
     test('single checkbox renders correctly when invalid', () => {
       expect.assertions(1);
 
-      return expect(render(dataSingleEc)).resolves.toMatchSnapshot();
-    });
-  });
-
-  describe('EU', () => {
-    test('default renders correctly', () => {
-      expect.assertions(1);
-
-      return expect(render(dataEu)).resolves.toMatchSnapshot();
-    });
-    test('invalid renders correctly', () => {
-      expect.assertions(1);
-
-      return expect(render(dataInvalidEu)).resolves.toMatchSnapshot();
-    });
-
-    test('single checkbox renders correctly when invalid', () => {
-      expect.assertions(1);
-
-      return expect(render(dataSingleEu)).resolves.toMatchSnapshot();
+      return expect(render(dataSingle)).resolves.toMatchSnapshot();
     });
   });
 });
diff --git a/src/implementations/twig/components/datepicker/__snapshots__/datepicker.test.js.snap b/src/implementations/twig/components/datepicker/__snapshots__/datepicker.test.js.snap
index 9b59348396c..515e4150670 100644
--- a/src/implementations/twig/components/datepicker/__snapshots__/datepicker.test.js.snap
+++ b/src/implementations/twig/components/datepicker/__snapshots__/datepicker.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Date picker EC Disabled renders correctly 1`] = `
+exports[`Date picker Disabled renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -51,418 +51,7 @@ exports[`Date picker EC Disabled renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Date picker EC Invalid renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      ecl-form-label--invalid=""
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-feedback-message"
-    >
-      
-    This is the error message
-    </div>
-    <div
-      class="ecl-datepicker ecl-datepicker--invalid"
-    >
-      <input
-        autocomplete="off"
-        class="ecl-datepicker__field ecl-text-input ecl-text-input--s ecl-text-input--invalid"
-        data-ecl-auto-init="Datepicker"
-        data-ecl-datepicker-toggle=""
-        id="example-input-id-1"
-        name="example-input-id-1"
-        placeholder="DD-MM-YYYY"
-        required=""
-        type="text"
-        value="11-10-2021"
-      />
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--s ecl-datepicker__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#calendar"
-        />
-      </svg>
-    </div>
-  </div>
-</jest>
-`;
-
-exports[`Date picker EC Optional renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-datepicker"
-    >
-      <input
-        autocomplete="off"
-        class="ecl-datepicker__field ecl-text-input ecl-text-input--s"
-        data-ecl-auto-init="Datepicker"
-        data-ecl-datepicker-toggle=""
-        id="example-input-id-1"
-        name="example-input-id-1"
-        placeholder="DD-MM-YYYY"
-        required=""
-        type="text"
-        value="11-10-2021"
-      />
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--s ecl-datepicker__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#calendar"
-        />
-      </svg>
-    </div>
-  </div>
-</jest>
-`;
-
-exports[`Date picker EC Optional renders correctly with extra attributes 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-datepicker"
-      data-test="data-test-value"
-      data-test-1="data-test-value-1"
-      null=""
-    >
-      <input
-        autocomplete="off"
-        class="ecl-datepicker__field ecl-text-input ecl-text-input--s"
-        data-ecl-auto-init="Datepicker"
-        data-ecl-datepicker-toggle=""
-        id="example-input-id-1"
-        name="example-input-id-1"
-        placeholder="DD-MM-YYYY"
-        required=""
-        type="text"
-        value="11-10-2021"
-      />
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--s ecl-datepicker__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#calendar"
-        />
-      </svg>
-    </div>
-  </div>
-</jest>
-`;
-
-exports[`Date picker EC Optional renders correctly with extra class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-datepicker custom-class custom-class--test"
-    >
-      <input
-        autocomplete="off"
-        class="ecl-datepicker__field ecl-text-input ecl-text-input--s"
-        data-ecl-auto-init="Datepicker"
-        data-ecl-datepicker-toggle=""
-        id="example-input-id-1"
-        name="example-input-id-1"
-        placeholder="DD-MM-YYYY"
-        required=""
-        type="text"
-        value="11-10-2021"
-      />
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--s ecl-datepicker__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#calendar"
-        />
-      </svg>
-    </div>
-  </div>
-</jest>
-`;
-
-exports[`Date picker EC Optional renders correctly with extra group class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-datepicker"
-    >
-      <input
-        autocomplete="off"
-        class="ecl-datepicker__field ecl-text-input ecl-text-input--s"
-        data-ecl-auto-init="Datepicker"
-        data-ecl-datepicker-toggle=""
-        id="example-input-id-1"
-        name="example-input-id-1"
-        placeholder="DD-MM-YYYY"
-        required=""
-        type="text"
-        value="11-10-2021"
-      />
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--s ecl-datepicker__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#calendar"
-        />
-      </svg>
-    </div>
-  </div>
-</jest>
-`;
-
-exports[`Date picker EC Optional renders correctly with extra label class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-datepicker"
-    >
-      <input
-        autocomplete="off"
-        class="ecl-datepicker__field ecl-text-input ecl-text-input--s"
-        data-ecl-auto-init="Datepicker"
-        data-ecl-datepicker-toggle=""
-        id="example-input-id-1"
-        name="example-input-id-1"
-        placeholder="DD-MM-YYYY"
-        required=""
-        type="text"
-        value="11-10-2021"
-      />
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--s ecl-datepicker__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#calendar"
-        />
-      </svg>
-    </div>
-  </div>
-</jest>
-`;
-
-exports[`Date picker EC Required renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-datepicker"
-    >
-      <input
-        autocomplete="off"
-        class="ecl-datepicker__field ecl-text-input ecl-text-input--s"
-        data-ecl-auto-init="Datepicker"
-        data-ecl-datepicker-toggle=""
-        id="example-input-id-1"
-        name="example-input-id-1"
-        placeholder="DD-MM-YYYY"
-        required=""
-        type="text"
-        value="11-10-2021"
-      />
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--s ecl-datepicker__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#calendar"
-        />
-      </svg>
-    </div>
-  </div>
-</jest>
-`;
-
-exports[`Date picker EU Disabled renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block ecl-help-block--disabled"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-datepicker"
-    >
-      <input
-        autocomplete="off"
-        class="ecl-datepicker__field ecl-text-input ecl-text-input--s"
-        data-ecl-auto-init="Datepicker"
-        data-ecl-datepicker-toggle=""
-        disabled=""
-        id="example-input-id-1"
-        name="example-input-id-1"
-        placeholder="DD-MM-YYYY"
-        required=""
-        type="text"
-        value="11-10-2021"
-      />
-      <svg
-        aria-hidden="true"
-        class="ecl-icon ecl-icon--s ecl-datepicker__icon"
-        focusable="false"
-      >
-        <use
-          xlink:href="/icons.svg#calendar"
-        />
-      </svg>
-    </div>
-  </div>
-</jest>
-`;
-
-exports[`Date picker EU Invalid renders correctly 1`] = `
+exports[`Date picker Invalid renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -527,7 +116,7 @@ exports[`Date picker EU Invalid renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Date picker EU Optional renders correctly 1`] = `
+exports[`Date picker Optional renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -577,7 +166,7 @@ exports[`Date picker EU Optional renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Date picker EU Optional renders correctly with extra attributes 1`] = `
+exports[`Date picker Optional renders correctly with extra attributes 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -630,7 +219,7 @@ exports[`Date picker EU Optional renders correctly with extra attributes 1`] = `
 </jest>
 `;
 
-exports[`Date picker EU Optional renders correctly with extra class names 1`] = `
+exports[`Date picker Optional renders correctly with extra class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -680,7 +269,7 @@ exports[`Date picker EU Optional renders correctly with extra class names 1`] =
 </jest>
 `;
 
-exports[`Date picker EU Optional renders correctly with extra group class names 1`] = `
+exports[`Date picker Optional renders correctly with extra group class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -730,7 +319,7 @@ exports[`Date picker EU Optional renders correctly with extra group class names
 </jest>
 `;
 
-exports[`Date picker EU Optional renders correctly with extra label class names 1`] = `
+exports[`Date picker Optional renders correctly with extra label class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -780,7 +369,7 @@ exports[`Date picker EU Optional renders correctly with extra label class names
 </jest>
 `;
 
-exports[`Date picker EU Required renders correctly 1`] = `
+exports[`Date picker Required renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
diff --git a/src/implementations/twig/components/datepicker/datepicker.story.js b/src/implementations/twig/components/datepicker/datepicker.story.js
index 7006b073e26..7451fefdbf3 100644
--- a/src/implementations/twig/components/datepicker/datepicker.story.js
+++ b/src/implementations/twig/components/datepicker/datepicker.story.js
@@ -1,17 +1,12 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
 import { getFormControls, correctSvgPath } from '@ecl/story-utils';
-import getSystem from '@ecl/builder/utils/getSystem';
 
-import specsEc from '@ecl/specs-component-datepicker/demo/data--ec';
-import specsEu from '@ecl/specs-component-datepicker/demo/data--eu';
+import dataDefault from '@ecl/specs-component-datepicker/demo/data';
 
 import datepicker from './datepicker.html.twig';
 import notes from './README.md';
 
-const system = getSystem();
-const dataDefault = system === 'eu' ? specsEu : specsEc;
-
 const dataTranslated = {
   ...dataDefault,
   autoinit: false,
diff --git a/src/implementations/twig/components/datepicker/datepicker.test.js b/src/implementations/twig/components/datepicker/datepicker.test.js
index 1d96e79a0a8..66098a7bfb6 100644
--- a/src/implementations/twig/components/datepicker/datepicker.test.js
+++ b/src/implementations/twig/components/datepicker/datepicker.test.js
@@ -1,12 +1,9 @@
 import { merge, renderTwigFileAsNode } from '@ecl/test-utils';
 
-import specDefaultEc from '@ecl/specs-component-datepicker/demo/data--ec';
-import specDefaultEu from '@ecl/specs-component-datepicker/demo/data--eu';
+import specDefault from '@ecl/specs-component-datepicker/demo/data';
 
-const specInvalidEc = { ...specDefaultEc, invalid: true };
-const specDisabledEc = { ...specDefaultEc, disabled: true };
-const specInvalidEu = { ...specDefaultEu, invalid: true };
-const specDisabledEu = { ...specDefaultEu, disabled: true };
+const specInvalid = { ...specDefault, invalid: true };
+const specDisabled = { ...specDefault, disabled: true };
 
 const datePickerField = (dataDefault, dataInvalid, dataDisabled) => {
   const template = '@ecl/datepicker/datepicker.html.twig';
@@ -93,10 +90,6 @@ const datePickerField = (dataDefault, dataInvalid, dataDisabled) => {
   });
 };
 
-describe('Date picker EC', () => {
-  datePickerField(specDefaultEc, specInvalidEc, specDisabledEc);
-});
-
-describe('Date picker EU', () => {
-  datePickerField(specDefaultEu, specInvalidEu, specDisabledEu);
+describe('Date picker', () => {
+  datePickerField(specDefault, specInvalid, specDisabled);
 });
diff --git a/src/implementations/twig/components/file-upload/README.md b/src/implementations/twig/components/file-upload/README.md
index 60711168c3c..8234acc2c77 100644
--- a/src/implementations/twig/components/file-upload/README.md
+++ b/src/implementations/twig/components/file-upload/README.md
@@ -12,6 +12,7 @@ npm install --save @ecl/twig-component-file-upload
 - **"name"** (string) (default: '') - Input id
 - **"invalid"** (boolean) (default: false) - When an error is found
 - **"invalid_text"** (string) (default: '') - Error message
+- **"invalid_icon"** (object of type "icon") (default: {})
 - **"disabled"** (boolean) (default: false) - Disables the input field
 - **"multiple"** (boolean) (default: false) - Multiple uploads
 - **"required"** (boolean) (default: false) - Makes the input required
diff --git a/src/implementations/twig/components/file-upload/__snapshots__/file-upload.test.js.snap b/src/implementations/twig/components/file-upload/__snapshots__/file-upload.test.js.snap
index 10664cee131..c5e1251203f 100644
--- a/src/implementations/twig/components/file-upload/__snapshots__/file-upload.test.js.snap
+++ b/src/implementations/twig/components/file-upload/__snapshots__/file-upload.test.js.snap
@@ -176,7 +176,16 @@ exports[`File Upload  Default renders correctly when invalid 1`] = `
     <div
       class="ecl-feedback-message"
     >
-      Invalid text
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
+        focusable="false"
+      >
+        <use
+          xlink:href="/icons.svg#error"
+        />
+      </svg>
+          Invalid text
     </div>
     <label
       class="ecl-file-upload__button-container"
diff --git a/src/implementations/twig/components/file-upload/file-upload.html.twig b/src/implementations/twig/components/file-upload/file-upload.html.twig
index 5ed4d37ebf9..18854898ea5 100644
--- a/src/implementations/twig/components/file-upload/file-upload.html.twig
+++ b/src/implementations/twig/components/file-upload/file-upload.html.twig
@@ -10,6 +10,7 @@
   - "name" (string) (default: '')
   - "invalid" (boolean) (default: false)
   - "invalid_text" (string) (default: '')
+  - "invalid_icon" (object of type "icon") (default: {})
   - "multiple" (boolean) (default: false)
   - "disabled" (boolean) (default: false)
   - "required" (boolean) (default: false)
@@ -35,6 +36,7 @@
 {% set _name = name|default('') %}
 {% set _invalid = invalid|default(false) %}
 {% set _invalid_text = invalid_text|default('') %}
+{% set _invalid_icon = invalid_icon|default({}) %}
 {% set _disabled = disabled|default(false) %}
 {% set _multiple = multiple|default(false) %}
 {% set _required = required|default(false) %}
@@ -134,7 +136,13 @@
 
 {% if _invalid and _invalid_text is not empty %}
   <div class="ecl-feedback-message">
-    {%- block invalid_text _invalid_text -%}
+    {% if _invalid_icon is not empty %}
+      {% include '@ecl/icon/icon.html.twig' with {
+        icon: _invalid_icon,
+        extra_classes: 'ecl-feedback-message__icon',
+      } only %}
+    {% endif %}
+    {{- invalid_text -}}
   </div>
 {% endif %}
 
diff --git a/src/implementations/twig/components/file-upload/file-upload.story.js b/src/implementations/twig/components/file-upload/file-upload.story.js
index 0d8122fde2c..0b0eb78469e 100644
--- a/src/implementations/twig/components/file-upload/file-upload.story.js
+++ b/src/implementations/twig/components/file-upload/file-upload.story.js
@@ -1,6 +1,6 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
-import { getFormControls } from '@ecl/story-utils';
+import { getFormControls, correctSvgPath } from '@ecl/story-utils';
 
 import dataDefault from '@ecl/specs-component-file-upload/demo/data';
 import dataMulti from '@ecl/specs-component-file-upload/demo/data--multiple';
@@ -58,6 +58,8 @@ const prepareData = (data, args) => {
     data.helper_text = '';
   }
 
+  correctSvgPath(data);
+
   return data;
 };
 
diff --git a/src/implementations/twig/components/radio/README.md b/src/implementations/twig/components/radio/README.md
index 66c23388dcb..bd78dbb869d 100644
--- a/src/implementations/twig/components/radio/README.md
+++ b/src/implementations/twig/components/radio/README.md
@@ -21,6 +21,7 @@ npm install --save @ecl/twig-component-radio
 - **"name"** (string) (default: '')
 - **"helper_id"** (string) (default: '')
 - **"invalid"** (boolean) (default: false)
+- **"invalid_icon"** (object of type "icon") (default: {})
 - **"binary"** (boolean) (default: false)
 - **"required"** (boolean) (default: false)
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
diff --git a/src/implementations/twig/components/select/__snapshots__/select.test.js.snap b/src/implementations/twig/components/select/__snapshots__/select.test.js.snap
index 8b8210d05ff..77e69aad713 100644
--- a/src/implementations/twig/components/select/__snapshots__/select.test.js.snap
+++ b/src/implementations/twig/components/select/__snapshots__/select.test.js.snap
@@ -632,7 +632,16 @@ exports[`Select With error renders correctly 1`] = `
     <div
       class="ecl-feedback-message"
     >
-      This is the error message
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--m ecl-feedback-message__icon"
+        focusable="false"
+      >
+        <use
+          xlink:href="/icons.svg#error"
+        />
+      </svg>
+            This is the error message
     </div>
     <div
       class="ecl-select__container ecl-select__container--invalid ecl-select__container--m"
diff --git a/src/implementations/twig/components/select/select.story.js b/src/implementations/twig/components/select/select.story.js
index b6a829e391d..1780a602641 100644
--- a/src/implementations/twig/components/select/select.story.js
+++ b/src/implementations/twig/components/select/select.story.js
@@ -1,20 +1,13 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
 import { correctSvgPath, getFormControls } from '@ecl/story-utils';
-import getSystem from '@ecl/builder/utils/getSystem';
 
-import dataSingleEC from '@ecl/specs-component-select/demo/data-single--ec';
-import dataMultipleEC from '@ecl/specs-component-select/demo/data-multiple--ec';
-import dataSingleEU from '@ecl/specs-component-select/demo/data-single--eu';
-import dataMultipleEU from '@ecl/specs-component-select/demo/data-multiple--eu';
+import dataSingle from '@ecl/specs-component-select/demo/data-single';
+import dataMultiple from '@ecl/specs-component-select/demo/data-multiple';
 
 import selectBox from './select.html.twig';
 import notes from './README.md';
 
-const system = getSystem();
-const dataSingle = system === 'eu' ? dataSingleEU : dataSingleEC;
-const dataMultiple = system === 'eu' ? dataMultipleEU : dataMultipleEC;
-
 const getArgs = (data) => ({
   show_label: true,
   show_helper: true,
diff --git a/src/implementations/twig/components/select/select.test.js b/src/implementations/twig/components/select/select.test.js
index 0a2cba23a3e..eeb9a5a95db 100644
--- a/src/implementations/twig/components/select/select.test.js
+++ b/src/implementations/twig/components/select/select.test.js
@@ -1,7 +1,7 @@
 import { merge, renderTwigFileAsNode } from '@ecl/test-utils';
 
-import dataSingle from '@ecl/specs-component-select/demo/data-single--ec';
-import dataMultiple from '@ecl/specs-component-select/demo/data-multiple--ec';
+import dataSingle from '@ecl/specs-component-select/demo/data-single';
+import dataMultiple from '@ecl/specs-component-select/demo/data-multiple';
 
 describe('Select', () => {
   const template = '@ecl/select/select.html.twig';
diff --git a/src/implementations/twig/components/text-area/__snapshots__/text-area.test.js.snap b/src/implementations/twig/components/text-area/__snapshots__/text-area.test.js.snap
index 71ffa440235..d4a894cec34 100644
--- a/src/implementations/twig/components/text-area/__snapshots__/text-area.test.js.snap
+++ b/src/implementations/twig/components/text-area/__snapshots__/text-area.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Text area EC Disabled renders correctly 1`] = `
+exports[`Text area Disabled renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -32,265 +32,7 @@ exports[`Text area EC Disabled renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Text area EC Invalid renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label ecl-form-label--invalid"
-      for="example-textarea-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-feedback-message"
-    >
-      
-      This is the error message
-    </div>
-    <textarea
-      class="ecl-text-area ecl-text-area--invalid ecl-text-area--m"
-      id="example-textarea-id-1"
-      placeholder="Placeholder text"
-      rows="4"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text area EC Optional renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-textarea-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <textarea
-      class="ecl-text-area ecl-text-area--m"
-      id="example-textarea-id-1"
-      placeholder="Placeholder text"
-      rows="4"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text area EC Optional renders correctly with extra attributes 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-textarea-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <textarea
-      class="ecl-text-area ecl-text-area--m"
-      data-test="data-test-value"
-      data-test-1="data-test-value-1"
-      id="example-textarea-id-1"
-      placeholder="Placeholder text"
-      rows="4"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text area EC Optional renders correctly with extra class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-textarea-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <textarea
-      class="ecl-text-area ecl-text-area--m custom-class custom-class--test"
-      id="example-textarea-id-1"
-      placeholder="Placeholder text"
-      rows="4"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text area EC Optional renders correctly with extra group class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group custom-group-class custom-group-class--test"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-textarea-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <textarea
-      class="ecl-text-area ecl-text-area--m"
-      id="example-textarea-id-1"
-      placeholder="Placeholder text"
-      rows="4"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text area EC Optional renders correctly with extra label class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label custom-label-class custom-label-class--test"
-      for="example-textarea-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <textarea
-      class="ecl-text-area ecl-text-area--m"
-      id="example-textarea-id-1"
-      placeholder="Placeholder text"
-      rows="4"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text area EC Required renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-textarea-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <textarea
-      class="ecl-text-area ecl-text-area--m"
-      id="example-textarea-id-1"
-      placeholder="Placeholder text"
-      required=""
-      rows="4"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text area EU Disabled renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label ecl-form-label--disabled"
-      for="example-textarea-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block ecl-help-block--disabled"
-    >
-      This is the input's helper text.
-    </div>
-    <textarea
-      class="ecl-text-area ecl-text-area--m"
-      disabled=""
-      id="example-textarea-id-1"
-      placeholder="Placeholder text"
-      rows="4"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text area EU Invalid renders correctly 1`] = `
+exports[`Text area Invalid renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -335,7 +77,7 @@ exports[`Text area EU Invalid renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Text area EU Optional renders correctly 1`] = `
+exports[`Text area Optional renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -366,7 +108,7 @@ exports[`Text area EU Optional renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Text area EU Optional renders correctly with extra attributes 1`] = `
+exports[`Text area Optional renders correctly with extra attributes 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -399,7 +141,7 @@ exports[`Text area EU Optional renders correctly with extra attributes 1`] = `
 </jest>
 `;
 
-exports[`Text area EU Optional renders correctly with extra class names 1`] = `
+exports[`Text area Optional renders correctly with extra class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -430,7 +172,7 @@ exports[`Text area EU Optional renders correctly with extra class names 1`] = `
 </jest>
 `;
 
-exports[`Text area EU Optional renders correctly with extra group class names 1`] = `
+exports[`Text area Optional renders correctly with extra group class names 1`] = `
 <jest>
   <div
     class="ecl-form-group custom-group-class custom-group-class--test"
@@ -461,7 +203,7 @@ exports[`Text area EU Optional renders correctly with extra group class names 1`
 </jest>
 `;
 
-exports[`Text area EU Optional renders correctly with extra label class names 1`] = `
+exports[`Text area Optional renders correctly with extra label class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -492,7 +234,7 @@ exports[`Text area EU Optional renders correctly with extra label class names 1`
 </jest>
 `;
 
-exports[`Text area EU Required renders correctly 1`] = `
+exports[`Text area Required renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
diff --git a/src/implementations/twig/components/text-area/text-area.story.js b/src/implementations/twig/components/text-area/text-area.story.js
index dd8e00c5f9f..90429f25866 100644
--- a/src/implementations/twig/components/text-area/text-area.story.js
+++ b/src/implementations/twig/components/text-area/text-area.story.js
@@ -1,17 +1,12 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import { getFormControls, correctSvgPath } from '@ecl/story-utils';
 import withCode from '@ecl/storybook-addon-code';
-import getSystem from '@ecl/builder/utils/getSystem';
 
-import specsEc from '@ecl/specs-component-text-area/demo/data--ec';
-import specsEu from '@ecl/specs-component-text-area/demo/data--eu';
+import dataDefault from '@ecl/specs-component-text-area/demo/data';
 
 import textArea from './text-area.html.twig';
 import notes from './README.md';
 
-const system = getSystem();
-const dataDefault = system === 'eu' ? specsEu : specsEc;
-
 const getArgs = (data) => ({
   show_label: true,
   show_helper: true,
diff --git a/src/implementations/twig/components/text-area/text-area.test.js b/src/implementations/twig/components/text-area/text-area.test.js
index ec98a031bb6..2252a7f7a95 100644
--- a/src/implementations/twig/components/text-area/text-area.test.js
+++ b/src/implementations/twig/components/text-area/text-area.test.js
@@ -1,11 +1,8 @@
 import { merge, renderTwigFileAsNode } from '@ecl/test-utils';
-import specDefaultEc from '@ecl/specs-component-text-area/demo/data--ec';
-import specDefaultEu from '@ecl/specs-component-text-area/demo/data--eu';
+import specDefault from '@ecl/specs-component-text-area/demo/data';
 
-const specInvalidEc = { ...specDefaultEc, invalid: true };
-const specDisabledEc = { ...specDefaultEc, disabled: true };
-const specInvalidEu = { ...specDefaultEu, invalid: true };
-const specDisabledEu = { ...specDefaultEu, disabled: true };
+const specInvalid = { ...specDefault, invalid: true };
+const specDisabled = { ...specDefault, disabled: true };
 
 const testTextArea = (dataDefault, dataInvalid, dataDisabled) => {
   const template = '@ecl/text-area/text-area.html.twig';
@@ -92,10 +89,6 @@ const testTextArea = (dataDefault, dataInvalid, dataDisabled) => {
   });
 };
 
-describe('Text area EC', () => {
-  testTextArea(specDefaultEc, specInvalidEc, specDisabledEc);
-});
-
-describe('Text area EU', () => {
-  testTextArea(specDefaultEu, specInvalidEu, specDisabledEu);
+describe('Text area', () => {
+  testTextArea(specDefault, specInvalid, specDisabled);
 });
diff --git a/src/implementations/twig/components/text-input/__snapshots__/text-input.test.js.snap b/src/implementations/twig/components/text-input/__snapshots__/text-input.test.js.snap
index 3fc723b5e4d..b2623c671a2 100644
--- a/src/implementations/twig/components/text-input/__snapshots__/text-input.test.js.snap
+++ b/src/implementations/twig/components/text-input/__snapshots__/text-input.test.js.snap
@@ -33,264 +33,6 @@ exports[`Text field EC Disabled renders correctly 1`] = `
 `;
 
 exports[`Text field EC Invalid renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label ecl-form-label--invalid"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <div
-      class="ecl-feedback-message"
-    >
-      
-      This is the error message
-    </div>
-    <input
-      class="ecl-text-input ecl-text-input--invalid ecl-text-input--m"
-      id="example-input-id-1"
-      placeholder="Placeholder text"
-      type="text"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text field EC Optional renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <input
-      class="ecl-text-input ecl-text-input--m"
-      id="example-input-id-1"
-      placeholder="Placeholder text"
-      type="text"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text field EC Optional renders correctly with extra attributes 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <input
-      class="ecl-text-input ecl-text-input--m"
-      data-test="data-test-value"
-      data-test-1="data-test-value-1"
-      id="example-input-id-1"
-      placeholder="Placeholder text"
-      type="text"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text field EC Optional renders correctly with extra class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <input
-      class="ecl-text-input ecl-text-input--m custom-class custom-class--test"
-      id="example-input-id-1"
-      placeholder="Placeholder text"
-      type="text"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text field EC Optional renders correctly with extra group class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group custom-group-class custom-group-class--test"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <input
-      class="ecl-text-input ecl-text-input--m"
-      id="example-input-id-1"
-      placeholder="Placeholder text"
-      type="text"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text field EC Optional renders correctly with extra label class names 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label custom-label-class custom-label-class--test"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <input
-      class="ecl-text-input ecl-text-input--m"
-      id="example-input-id-1"
-      placeholder="Placeholder text"
-      type="text"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text field EC Required renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__required"
-      >
-        *
-      </span>
-    </label>
-    <div
-      class="ecl-help-block"
-    >
-      This is the input's helper text.
-    </div>
-    <input
-      class="ecl-text-input ecl-text-input--m"
-      id="example-input-id-1"
-      placeholder="Placeholder text"
-      required=""
-      type="text"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text field EU Disabled renders correctly 1`] = `
-<jest>
-  <div
-    class="ecl-form-group"
-  >
-    <label
-      class="ecl-form-label ecl-form-label--disabled"
-      for="example-input-id-1"
-    >
-      Label
-      <span
-        class="ecl-form-label__optional"
-      >
-         (optional)
-      </span>
-    </label>
-    <div
-      class="ecl-help-block ecl-help-block--disabled"
-    >
-      This is the input's helper text.
-    </div>
-    <input
-      class="ecl-text-input ecl-text-input--m"
-      disabled=""
-      id="example-input-id-1"
-      placeholder="Placeholder text"
-      type="text"
-    />
-  </div>
-</jest>
-`;
-
-exports[`Text field EU Invalid renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -335,7 +77,7 @@ exports[`Text field EU Invalid renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Text field EU Optional renders correctly 1`] = `
+exports[`Text field EC Optional renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -366,7 +108,7 @@ exports[`Text field EU Optional renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Text field EU Optional renders correctly with extra attributes 1`] = `
+exports[`Text field EC Optional renders correctly with extra attributes 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -399,7 +141,7 @@ exports[`Text field EU Optional renders correctly with extra attributes 1`] = `
 </jest>
 `;
 
-exports[`Text field EU Optional renders correctly with extra class names 1`] = `
+exports[`Text field EC Optional renders correctly with extra class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -430,7 +172,7 @@ exports[`Text field EU Optional renders correctly with extra class names 1`] = `
 </jest>
 `;
 
-exports[`Text field EU Optional renders correctly with extra group class names 1`] = `
+exports[`Text field EC Optional renders correctly with extra group class names 1`] = `
 <jest>
   <div
     class="ecl-form-group custom-group-class custom-group-class--test"
@@ -461,7 +203,7 @@ exports[`Text field EU Optional renders correctly with extra group class names 1
 </jest>
 `;
 
-exports[`Text field EU Optional renders correctly with extra label class names 1`] = `
+exports[`Text field EC Optional renders correctly with extra label class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -492,7 +234,7 @@ exports[`Text field EU Optional renders correctly with extra label class names 1
 </jest>
 `;
 
-exports[`Text field EU Required renders correctly 1`] = `
+exports[`Text field EC Required renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
diff --git a/src/implementations/twig/components/text-input/text-input.story.js b/src/implementations/twig/components/text-input/text-input.story.js
index 5abea6a8736..acc23aee73d 100644
--- a/src/implementations/twig/components/text-input/text-input.story.js
+++ b/src/implementations/twig/components/text-input/text-input.story.js
@@ -1,17 +1,12 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import { getFormControls, correctSvgPath } from '@ecl/story-utils';
 import withCode from '@ecl/storybook-addon-code';
-import getSystem from '@ecl/builder/utils/getSystem';
 
-import specsEc from '@ecl/specs-component-text-input/demo/data--ec';
-import specsEu from '@ecl/specs-component-text-input/demo/data--eu';
+import dataDefault from '@ecl/specs-component-text-input/demo/data';
 
 import textInput from './text-input.html.twig';
 import notes from './README.md';
 
-const system = getSystem();
-const dataDefault = system === 'eu' ? specsEu : specsEc;
-
 const getArgs = (data) => ({
   show_label: true,
   show_helper: true,
diff --git a/src/implementations/twig/components/text-input/text-input.test.js b/src/implementations/twig/components/text-input/text-input.test.js
index 9307bdc6689..4b373113906 100644
--- a/src/implementations/twig/components/text-input/text-input.test.js
+++ b/src/implementations/twig/components/text-input/text-input.test.js
@@ -1,11 +1,8 @@
 import { merge, renderTwigFileAsNode } from '@ecl/test-utils';
-import specDefaultEc from '@ecl/specs-component-text-input/demo/data--ec';
-import specDefaultEu from '@ecl/specs-component-text-input/demo/data--eu';
+import specDefault from '@ecl/specs-component-text-input/demo/data';
 
-const specInvalidEc = { ...specDefaultEc, invalid: true };
-const specDisabledEc = { ...specDefaultEc, disabled: true };
-const specInvalidEu = { ...specDefaultEu, invalid: true };
-const specDisabledEu = { ...specDefaultEu, disabled: true };
+const specInvalid = { ...specDefault, invalid: true };
+const specDisabled = { ...specDefault, disabled: true };
 
 const testTextField = (dataDefault, dataInvalid, dataDisabled) => {
   const template = '@ecl/text-input/text-input.html.twig';
@@ -93,9 +90,5 @@ const testTextField = (dataDefault, dataInvalid, dataDisabled) => {
 };
 
 describe('Text field EC', () => {
-  testTextField(specDefaultEc, specInvalidEc, specDisabledEc);
-});
-
-describe('Text field EU', () => {
-  testTextField(specDefaultEu, specInvalidEu, specDisabledEu);
+  testTextField(specDefault, specInvalid, specDisabled);
 });
diff --git a/src/implementations/vanilla/components/form/_form.scss b/src/implementations/vanilla/components/form/_form.scss
index 4749235519d..942bd72fe68 100644
--- a/src/implementations/vanilla/components/form/_form.scss
+++ b/src/implementations/vanilla/components/form/_form.scss
@@ -75,6 +75,7 @@ $_margin-invalid: null !default;
 
 // stylelint-disable no-descending-specificity
 .ecl-feedback-message {
+  align-items: center;
   box-sizing: border-box;
   color: $_color-invalid;
   display: flex;
@@ -84,7 +85,7 @@ $_margin-invalid: null !default;
 }
 
 .ecl-feedback-message__icon {
-  margin-inline-start: map.get(theme.$spacing, 'xs');
+  margin-inline-end: map.get(theme.$spacing, 'xs');
 }
 
 .ecl-help-block {
diff --git a/src/specs/components/checkbox/demo/data--ec.js b/src/specs/components/checkbox/demo/data--ec.js
deleted file mode 100644
index b35c34357ac..00000000000
--- a/src/specs/components/checkbox/demo/data--ec.js
+++ /dev/null
@@ -1,47 +0,0 @@
-module.exports = {
-  helper_id: 'checkbox-default-helper',
-  helper_text: 'Helper text for the group',
-  invalid_text: 'Error message for the group',
-  label: 'Select your preferred destinations',
-  label_id: 'checkbox-default-label',
-  optional_text: '(optional)',
-  required_text: '*',
-  name: 'checkbox-default',
-  items: [
-    {
-      checked: true,
-      helper_id: 'helper-default-1',
-      helper_text: 'Helper text for an option',
-      id: 'checkbox-default-1',
-      label: 'Spain',
-      value: 'es',
-      icon_path: '/icons.svg',
-    },
-    {
-      helper_id: 'helper-default-2',
-      id: 'checkbox-default-2',
-      label: 'Belgium',
-      value: 'be',
-      helper_text: 'Helper text for an option',
-      icon_path: '/icons.svg',
-    },
-    {
-      disabled: true,
-      helper_id: 'helper-default-3',
-      helper_text: 'Helper text for an option',
-      id: 'checkbox-default-3',
-      label: 'France (disabled)',
-      value: 'fr',
-      icon_path: '/icons.svg',
-    },
-    {
-      helper_id: 'helper-default-4',
-      id: 'checkbox-default-4',
-      label:
-        'Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam suscipit eros gravida arcu aliquet, sed finibus nisl egestas. Cras sed purus nec turpis eleifend dignissim a in massa.',
-      value: 'lorem',
-      helper_text: 'Helper text for an option',
-      icon_path: '/icons.svg',
-    },
-  ],
-};
diff --git a/src/specs/components/checkbox/demo/data--eu.js b/src/specs/components/checkbox/demo/data.js
similarity index 100%
rename from src/specs/components/checkbox/demo/data--eu.js
rename to src/specs/components/checkbox/demo/data.js
diff --git a/src/specs/components/datepicker/demo/data--ec.js b/src/specs/components/datepicker/demo/data--ec.js
deleted file mode 100644
index 0ce4c59efc3..00000000000
--- a/src/specs/components/datepicker/demo/data--ec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-module.exports = {
-  id: 'example-input-id-1',
-  name: 'example-input-id-1',
-  label: 'Label',
-  placeholder: 'DD-MM-YYYY',
-  autoinit: true,
-  default_value: '11-10-2021',
-  helper_text: "This is the input's helper text.",
-  invalid_text: 'This is the error message',
-  optional_text: ' (optional)',
-  required_text: '*',
-  icons_path: '/icons.svg',
-  required: true,
-};
diff --git a/src/specs/components/datepicker/demo/data--eu.js b/src/specs/components/datepicker/demo/data.js
similarity index 100%
rename from src/specs/components/datepicker/demo/data--eu.js
rename to src/specs/components/datepicker/demo/data.js
diff --git a/src/specs/components/file-upload/demo/data--multiple.js b/src/specs/components/file-upload/demo/data--multiple.js
index 6c1d9235d4c..b2627a68ec7 100644
--- a/src/specs/components/file-upload/demo/data--multiple.js
+++ b/src/specs/components/file-upload/demo/data--multiple.js
@@ -5,6 +5,11 @@ module.exports = {
   helper_text:
     "This is the input's helper text.<div class='ecl-u-mt-xs ecl-u-type-color-grey-75'>Only <strong>txt doc docx pdf odt rtf</strong> files. Maximum size is <strong>5 MB</strong>.<br />Encrypted documents and those containing macros are not accepted.</div>",
   invalid_text: 'This is the error message',
+  invalid_icon: {
+    path: '/icons.svg',
+    name: 'error',
+    size: 'm',
+  },
   required_text: '*',
   optional_text: ' (optional)',
   button_choose_label: 'Choose files',
diff --git a/src/specs/components/file-upload/demo/data.js b/src/specs/components/file-upload/demo/data.js
index 1a1761abfc5..ff02c55b019 100644
--- a/src/specs/components/file-upload/demo/data.js
+++ b/src/specs/components/file-upload/demo/data.js
@@ -6,6 +6,11 @@ module.exports = {
   helper_text:
     "This is the input's helper text.<div class='ecl-u-mt-xs ecl-u-type-color-grey-75'>Only <strong>txt doc docx pdf odt rtf</strong> files. Maximum size is <strong>5 MB</strong>.<br />Encrypted documents and those containing macros are not accepted.</div>",
   invalid_text: 'This is the error message',
+  invalid_icon: {
+    path: '/icons.svg',
+    name: 'error',
+    size: 'm',
+  },
   required_text: '*',
   optional_text: ' (optional)',
   button_choose_label: 'Choose file',
diff --git a/src/specs/components/select/demo/data-multiple--ec.js b/src/specs/components/select/demo/data-multiple--ec.js
deleted file mode 100644
index 508f9a23775..00000000000
--- a/src/specs/components/select/demo/data-multiple--ec.js
+++ /dev/null
@@ -1,60 +0,0 @@
-module.exports = {
-  id: 'select-multiple',
-  label: 'Select a country',
-  helper_text: "This is the input's helper text.",
-  invalid_text: 'This is the error message',
-  required_text: '*',
-  optional_text: ' (optional)',
-  icon_path: '/icons.svg',
-  required: true,
-  width: 'm',
-  options: [
-    {
-      value: '1',
-      label: 'Belgium',
-    },
-    {
-      value: '2',
-      label: 'France',
-    },
-    {
-      value: '3',
-      label: 'Luxembourg',
-      disabled: true,
-    },
-    {
-      value: '4',
-      label: 'Germany',
-    },
-    {
-      value: '5',
-      label: 'Bulgaria',
-      selected: true,
-    },
-    {
-      value: '6',
-      label: 'Italy',
-    },
-    {
-      value: '7',
-      label: 'Romania',
-    },
-    {
-      value: '8',
-      label: 'Greece',
-    },
-    {
-      value: '9',
-      label: 'Hungary',
-    },
-    {
-      value: '10',
-      label: 'Portugal',
-    },
-  ],
-  multiple: true,
-  multiple_placeholder: 'Select an item',
-  multiple_search_text: 'Search',
-  multiple_search_no_results_text: 'No results found',
-  multiple_all_text: 'Select all',
-};
diff --git a/src/specs/components/select/demo/data-multiple--eu.js b/src/specs/components/select/demo/data-multiple.js
similarity index 98%
rename from src/specs/components/select/demo/data-multiple--eu.js
rename to src/specs/components/select/demo/data-multiple.js
index 46cc526ec3a..42bfadcd405 100644
--- a/src/specs/components/select/demo/data-multiple--eu.js
+++ b/src/specs/components/select/demo/data-multiple.js
@@ -6,7 +6,7 @@ module.exports = {
   invalid_icon: {
     path: '/icons.svg',
     name: 'error',
-    size: 's',
+    size: 'm',
   },
   required_text: '*',
   optional_text: ' (optional)',
diff --git a/src/specs/components/select/demo/data-single--ec.js b/src/specs/components/select/demo/data-single--ec.js
deleted file mode 100644
index 6d1381a8495..00000000000
--- a/src/specs/components/select/demo/data-single--ec.js
+++ /dev/null
@@ -1,55 +0,0 @@
-module.exports = {
-  id: 'select-default',
-  label: 'Select a country',
-  helper_text: "This is the input's helper text.",
-  invalid_text: 'This is the error message',
-  required_text: '*',
-  optional_text: ' (optional)',
-  icon_path: '/icons.svg',
-  required: true,
-  width: 'm',
-  options: [
-    {
-      value: '1',
-      label: 'Belgium',
-    },
-    {
-      value: '2',
-      label: 'France',
-    },
-    {
-      value: '3',
-      label: 'Luxembourg',
-      disabled: true,
-    },
-    {
-      value: '4',
-      label: 'Germany',
-    },
-    {
-      value: '5',
-      label: 'Bulgaria',
-      selected: true,
-    },
-    {
-      value: '6',
-      label: 'Italy',
-    },
-    {
-      value: '7',
-      label: 'Romania',
-    },
-    {
-      value: '8',
-      label: 'Greece',
-    },
-    {
-      value: '9',
-      label: 'Hungary',
-    },
-    {
-      value: '10',
-      label: 'Portugal',
-    },
-  ],
-};
diff --git a/src/specs/components/select/demo/data-single--eu.js b/src/specs/components/select/demo/data-single.js
similarity index 100%
rename from src/specs/components/select/demo/data-single--eu.js
rename to src/specs/components/select/demo/data-single.js
diff --git a/src/specs/components/text-area/demo/data--ec.js b/src/specs/components/text-area/demo/data--ec.js
deleted file mode 100644
index 2743fc64ce9..00000000000
--- a/src/specs/components/text-area/demo/data--ec.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// Simple content for demo
-module.exports = {
-  id: 'example-textarea-id-1',
-  label: 'Label',
-  placeholder: 'Placeholder text',
-  rows: 4,
-  width: 'm',
-  invalid_text: 'This is the error message',
-  helper_text: "This is the input's helper text.",
-  required: false,
-  required_text: '*',
-  optional_text: '(optional)',
-};
diff --git a/src/specs/components/text-area/demo/data--eu.js b/src/specs/components/text-area/demo/data.js
similarity index 100%
rename from src/specs/components/text-area/demo/data--eu.js
rename to src/specs/components/text-area/demo/data.js
diff --git a/src/specs/components/text-input/demo/data--ec.js b/src/specs/components/text-input/demo/data--ec.js
deleted file mode 100644
index 53b87b4ad31..00000000000
--- a/src/specs/components/text-input/demo/data--ec.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// Simple content for demo
-module.exports = {
-  id: 'example-input-id-1',
-  label: 'Label',
-  placeholder: 'Placeholder text',
-  width: 'm',
-  invalid_text: 'This is the error message',
-  helper_text: "This is the input's helper text.",
-  optional_text: '(optional)',
-  required: false,
-  required_text: '*',
-};
diff --git a/src/specs/components/text-input/demo/data--eu.js b/src/specs/components/text-input/demo/data.js
similarity index 100%
rename from src/specs/components/text-input/demo/data--eu.js
rename to src/specs/components/text-input/demo/data.js

From ddd203ee2c6487ccef60e82149dcdd6be7aefb45 Mon Sep 17 00:00:00 2001
From: Alexis Gaillard <a@bypopcorn.com>
Date: Tue, 31 May 2022 15:36:56 +0200
Subject: [PATCH 2/4] Rename text-input test

---
 .../__snapshots__/text-input.test.js.snap        | 16 ++++++++--------
 .../components/text-input/text-input.test.js     |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/implementations/twig/components/text-input/__snapshots__/text-input.test.js.snap b/src/implementations/twig/components/text-input/__snapshots__/text-input.test.js.snap
index b2623c671a2..c21aa464e65 100644
--- a/src/implementations/twig/components/text-input/__snapshots__/text-input.test.js.snap
+++ b/src/implementations/twig/components/text-input/__snapshots__/text-input.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Text field EC Disabled renders correctly 1`] = `
+exports[`Text field Disabled renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -32,7 +32,7 @@ exports[`Text field EC Disabled renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Text field EC Invalid renders correctly 1`] = `
+exports[`Text field Invalid renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -77,7 +77,7 @@ exports[`Text field EC Invalid renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Text field EC Optional renders correctly 1`] = `
+exports[`Text field Optional renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -108,7 +108,7 @@ exports[`Text field EC Optional renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Text field EC Optional renders correctly with extra attributes 1`] = `
+exports[`Text field Optional renders correctly with extra attributes 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -141,7 +141,7 @@ exports[`Text field EC Optional renders correctly with extra attributes 1`] = `
 </jest>
 `;
 
-exports[`Text field EC Optional renders correctly with extra class names 1`] = `
+exports[`Text field Optional renders correctly with extra class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -172,7 +172,7 @@ exports[`Text field EC Optional renders correctly with extra class names 1`] = `
 </jest>
 `;
 
-exports[`Text field EC Optional renders correctly with extra group class names 1`] = `
+exports[`Text field Optional renders correctly with extra group class names 1`] = `
 <jest>
   <div
     class="ecl-form-group custom-group-class custom-group-class--test"
@@ -203,7 +203,7 @@ exports[`Text field EC Optional renders correctly with extra group class names 1
 </jest>
 `;
 
-exports[`Text field EC Optional renders correctly with extra label class names 1`] = `
+exports[`Text field Optional renders correctly with extra label class names 1`] = `
 <jest>
   <div
     class="ecl-form-group"
@@ -234,7 +234,7 @@ exports[`Text field EC Optional renders correctly with extra label class names 1
 </jest>
 `;
 
-exports[`Text field EC Required renders correctly 1`] = `
+exports[`Text field Required renders correctly 1`] = `
 <jest>
   <div
     class="ecl-form-group"
diff --git a/src/implementations/twig/components/text-input/text-input.test.js b/src/implementations/twig/components/text-input/text-input.test.js
index 4b373113906..ffb1d90ca35 100644
--- a/src/implementations/twig/components/text-input/text-input.test.js
+++ b/src/implementations/twig/components/text-input/text-input.test.js
@@ -89,6 +89,6 @@ const testTextField = (dataDefault, dataInvalid, dataDisabled) => {
   });
 };
 
-describe('Text field EC', () => {
+describe('Text field', () => {
   testTextField(specDefault, specInvalid, specDisabled);
 });

From dc1c456464cb8b1cee711d5beff52fa070451298 Mon Sep 17 00:00:00 2001
From: Alexis Gaillard <a@bypopcorn.com>
Date: Tue, 31 May 2022 15:41:26 +0200
Subject: [PATCH 3/4] Fix website forms specs path

---
 .../src/pages/ec/components/forms/checkbox/demo/index.js      | 2 +-
 .../src/pages/ec/components/forms/datepicker/demo/index.js    | 2 +-
 .../src/pages/ec/components/forms/select/demo/index.js        | 4 ++--
 .../src/pages/ec/components/forms/text-area/demo/index.js     | 2 +-
 .../src/pages/ec/components/forms/text-field/demo/index.js    | 2 +-
 .../src/pages/eu/components/forms/checkbox/demo/index.js      | 2 +-
 .../src/pages/eu/components/forms/datepicker/demo/index.js    | 2 +-
 .../src/pages/eu/components/forms/select/demo/index.js        | 4 ++--
 .../src/pages/eu/components/forms/text-area/demo/index.js     | 2 +-
 .../src/pages/eu/components/forms/text-field/demo/index.js    | 2 +-
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/website/src/pages/ec/components/forms/checkbox/demo/index.js b/src/website/src/pages/ec/components/forms/checkbox/demo/index.js
index 7642d1e7331..f2faeab4502 100644
--- a/src/website/src/pages/ec/components/forms/checkbox/demo/index.js
+++ b/src/website/src/pages/ec/components/forms/checkbox/demo/index.js
@@ -1,4 +1,4 @@
-import demoContentDefault from '@ecl/specs-component-checkbox/demo/data--ec';
+import demoContentDefault from '@ecl/specs-component-checkbox/demo/data';
 import template from '@ecl/twig-component-checkbox/checkbox-group.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
diff --git a/src/website/src/pages/ec/components/forms/datepicker/demo/index.js b/src/website/src/pages/ec/components/forms/datepicker/demo/index.js
index 9efd015806c..6b6c625072c 100644
--- a/src/website/src/pages/ec/components/forms/datepicker/demo/index.js
+++ b/src/website/src/pages/ec/components/forms/datepicker/demo/index.js
@@ -1,4 +1,4 @@
-import demoContent from '@ecl/specs-component-datepicker/demo/data--ec';
+import demoContent from '@ecl/specs-component-datepicker/demo/data';
 import template from '@ecl/twig-component-datepicker/datepicker.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
diff --git a/src/website/src/pages/ec/components/forms/select/demo/index.js b/src/website/src/pages/ec/components/forms/select/demo/index.js
index 4e6b7526f33..1a83b59468b 100644
--- a/src/website/src/pages/ec/components/forms/select/demo/index.js
+++ b/src/website/src/pages/ec/components/forms/select/demo/index.js
@@ -1,5 +1,5 @@
-import demoContentSingle from '@ecl/specs-component-select/demo/data-single--ec';
-import demoContentMultiple from '@ecl/specs-component-select/demo/data-multiple--ec';
+import demoContentSingle from '@ecl/specs-component-select/demo/data-single';
+import demoContentMultiple from '@ecl/specs-component-select/demo/data-multiple';
 import template from '@ecl/twig-component-select/select.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
diff --git a/src/website/src/pages/ec/components/forms/text-area/demo/index.js b/src/website/src/pages/ec/components/forms/text-area/demo/index.js
index db844ac98e0..980223fab49 100644
--- a/src/website/src/pages/ec/components/forms/text-area/demo/index.js
+++ b/src/website/src/pages/ec/components/forms/text-area/demo/index.js
@@ -1,4 +1,4 @@
-import demoContentDefault from '@ecl/specs-component-text-area/demo/data--ec';
+import demoContentDefault from '@ecl/specs-component-text-area/demo/data';
 import template from '@ecl/twig-component-text-area/text-area.html.twig';
 
 export const textAreaDefault = template(demoContentDefault);
diff --git a/src/website/src/pages/ec/components/forms/text-field/demo/index.js b/src/website/src/pages/ec/components/forms/text-field/demo/index.js
index e01711f3736..3aac564df46 100644
--- a/src/website/src/pages/ec/components/forms/text-field/demo/index.js
+++ b/src/website/src/pages/ec/components/forms/text-field/demo/index.js
@@ -1,4 +1,4 @@
-import demoContentDefault from '@ecl/specs-component-text-input/demo/data--ec';
+import demoContentDefault from '@ecl/specs-component-text-input/demo/data';
 import template from '@ecl/twig-component-text-input/text-input.html.twig';
 
 export const textInputDefault = template(demoContentDefault);
diff --git a/src/website/src/pages/eu/components/forms/checkbox/demo/index.js b/src/website/src/pages/eu/components/forms/checkbox/demo/index.js
index 6ed076a7eec..f2faeab4502 100644
--- a/src/website/src/pages/eu/components/forms/checkbox/demo/index.js
+++ b/src/website/src/pages/eu/components/forms/checkbox/demo/index.js
@@ -1,4 +1,4 @@
-import demoContentDefault from '@ecl/specs-component-checkbox/demo/data--eu';
+import demoContentDefault from '@ecl/specs-component-checkbox/demo/data';
 import template from '@ecl/twig-component-checkbox/checkbox-group.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
diff --git a/src/website/src/pages/eu/components/forms/datepicker/demo/index.js b/src/website/src/pages/eu/components/forms/datepicker/demo/index.js
index 56ffa8db1e0..6b6c625072c 100644
--- a/src/website/src/pages/eu/components/forms/datepicker/demo/index.js
+++ b/src/website/src/pages/eu/components/forms/datepicker/demo/index.js
@@ -1,4 +1,4 @@
-import demoContent from '@ecl/specs-component-datepicker/demo/data--eu';
+import demoContent from '@ecl/specs-component-datepicker/demo/data';
 import template from '@ecl/twig-component-datepicker/datepicker.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
diff --git a/src/website/src/pages/eu/components/forms/select/demo/index.js b/src/website/src/pages/eu/components/forms/select/demo/index.js
index 8d68c29c370..1a83b59468b 100644
--- a/src/website/src/pages/eu/components/forms/select/demo/index.js
+++ b/src/website/src/pages/eu/components/forms/select/demo/index.js
@@ -1,5 +1,5 @@
-import demoContentSingle from '@ecl/specs-component-select/demo/data-single--eu';
-import demoContentMultiple from '@ecl/specs-component-select/demo/data-multiple--eu';
+import demoContentSingle from '@ecl/specs-component-select/demo/data-single';
+import demoContentMultiple from '@ecl/specs-component-select/demo/data-multiple';
 import template from '@ecl/twig-component-select/select.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
diff --git a/src/website/src/pages/eu/components/forms/text-area/demo/index.js b/src/website/src/pages/eu/components/forms/text-area/demo/index.js
index 412d4e2d050..980223fab49 100644
--- a/src/website/src/pages/eu/components/forms/text-area/demo/index.js
+++ b/src/website/src/pages/eu/components/forms/text-area/demo/index.js
@@ -1,4 +1,4 @@
-import demoContentDefault from '@ecl/specs-component-text-area/demo/data--eu';
+import demoContentDefault from '@ecl/specs-component-text-area/demo/data';
 import template from '@ecl/twig-component-text-area/text-area.html.twig';
 
 export const textAreaDefault = template(demoContentDefault);
diff --git a/src/website/src/pages/eu/components/forms/text-field/demo/index.js b/src/website/src/pages/eu/components/forms/text-field/demo/index.js
index f3d0e27213e..3aac564df46 100644
--- a/src/website/src/pages/eu/components/forms/text-field/demo/index.js
+++ b/src/website/src/pages/eu/components/forms/text-field/demo/index.js
@@ -1,4 +1,4 @@
-import demoContentDefault from '@ecl/specs-component-text-input/demo/data--eu';
+import demoContentDefault from '@ecl/specs-component-text-input/demo/data';
 import template from '@ecl/twig-component-text-input/text-input.html.twig';
 
 export const textInputDefault = template(demoContentDefault);

From 1bf1b9bf9fb8945a8243ba5365fb5191a4cd7773 Mon Sep 17 00:00:00 2001
From: Alexis Gaillard <a@bypopcorn.com>
Date: Tue, 7 Jun 2022 11:45:57 +0200
Subject: [PATCH 4/4] Add invalid_textparameter  as block

---
 .../components/file-upload/file-upload.html.twig   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/implementations/twig/components/file-upload/file-upload.html.twig b/src/implementations/twig/components/file-upload/file-upload.html.twig
index 18854898ea5..e1864b6df03 100644
--- a/src/implementations/twig/components/file-upload/file-upload.html.twig
+++ b/src/implementations/twig/components/file-upload/file-upload.html.twig
@@ -4,12 +4,12 @@
   Blocks:
   - "label" (string) (default: '')
   - "helper_text" (string) (default: '')
+  - "invalid_text" (string) (default: '')
   
   Parameters:
   - "id" (string) (default: '')
   - "name" (string) (default: '')
   - "invalid" (boolean) (default: false)
-  - "invalid_text" (string) (default: '')
   - "invalid_icon" (object of type "icon") (default: {})
   - "multiple" (boolean) (default: false)
   - "disabled" (boolean) (default: false)
@@ -35,7 +35,6 @@
 {% set _id = id|default('') %}
 {% set _name = name|default('') %}
 {% set _invalid = invalid|default(false) %}
-{% set _invalid_text = invalid_text|default('') %}
 {% set _invalid_icon = invalid_icon|default({}) %}
 {% set _disabled = disabled|default(false) %}
 {% set _multiple = multiple|default(false) %}
@@ -47,6 +46,7 @@
 {# Blocks #}
 {% set _label = label|default('') %}
 {% set _helper_text = helper_text|default('') %}
+{% set _invalid_text = invalid_text|default('') %}
 
 {# Internal properties #}
 
@@ -137,12 +137,12 @@
 {% if _invalid and _invalid_text is not empty %}
   <div class="ecl-feedback-message">
     {% if _invalid_icon is not empty %}
-      {% include '@ecl/icon/icon.html.twig' with {
-        icon: _invalid_icon,
-        extra_classes: 'ecl-feedback-message__icon',
-      } only %}
+    {% include '@ecl/icon/icon.html.twig' with {
+      icon: _invalid_icon,
+      extra_classes: 'ecl-feedback-message__icon',
+    } only %}
     {% endif %}
-    {{- invalid_text -}}
+    {%- block invalid_text _invalid_text -%}
   </div>
 {% endif %}