From 15cfbc924be6f4d9e6db5c938d36e0f386cd5510 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Thu, 23 Jan 2020 10:48:40 +0100
Subject: [PATCH 1/4] feat(select): (almost) green diff with ECL - TWIG-240

---
 .../ecl-accordion.html.twig                   |  1 -
 src/ec/packages/ec-component-select/README.md |  2 --
 .../__snapshots__/select.test.js.snap         | 35 ++++++++++++++++---
 .../packages/ec-component-select/demo/data.js | 14 ++++++--
 .../ec-component-select/ecl-select.html.twig  |  6 ++--
 .../ec-component-select/select.story.js       |  3 +-
 6 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/src/ec/packages/ec-component-accordion/ecl-accordion.html.twig b/src/ec/packages/ec-component-accordion/ecl-accordion.html.twig
index d39b90b39..bcd94e49b 100644
--- a/src/ec/packages/ec-component-accordion/ecl-accordion.html.twig
+++ b/src/ec/packages/ec-component-accordion/ecl-accordion.html.twig
@@ -66,7 +66,6 @@
             { name: 'data-ecl-accordion-toggle' },
           ]
         } only %}
-        
       </h{{ _item.level|default(3) }}>
       <div
         class="ecl-accordion__content"
diff --git a/src/ec/packages/ec-component-select/README.md b/src/ec/packages/ec-component-select/README.md
index 950ac4463..24d24ac09 100644
--- a/src/ec/packages/ec-component-select/README.md
+++ b/src/ec/packages/ec-component-select/README.md
@@ -15,7 +15,6 @@ npm install --save @ecl-twig/ec-component-select
 - **"disabled"** (boolean) (default: false)
 - **"invalid"** (boolean) (default: false)
 - **"required"** (boolean) (default: false)
-- **"name"** (string) (default: '')
 - **"width"** (string) (default: '') Input width size (s, m or l)
 - **"icon_path"** (string) (default: ''): file containing the svg icons
 - **"extra_group_classes"** (optional) (string) (default: '') Extra classes (space separated) for the select group
@@ -50,7 +49,6 @@ npm install --save @ecl-twig/ec-component-select
   helper_text: 'Help message', 
   disabled: false, 
   id: 'example-id', 
-  name: 'example-name', 
   width: 'm', 
   icon_path: '/static/icons.svg', 
   extra_classes: 'my-extra-class-1 my-extra-class-2', 
diff --git a/src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap b/src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap
index 11ce0919c..92d12fa30 100644
--- a/src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap
+++ b/src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap
@@ -9,6 +9,11 @@ exports[`EC - Select Default renders correctly 1`] = `
     for="example-id"
   >
     Select a country
+    <span
+      class="ecl-form-label__required"
+    >
+      *
+    </span>
   </label>
   <div
     class="ecl-help-block"
@@ -21,7 +26,7 @@ exports[`EC - Select Default renders correctly 1`] = `
     <select
       class="ecl-select"
       id="example-id"
-      name="example-name"
+      required=""
     >
       <option
         value="1"
@@ -75,6 +80,11 @@ exports[`EC - Select Disabled renders correctly 1`] = `
     for="example-id"
   >
     Select a country
+    <span
+      class="ecl-form-label__required"
+    >
+      *
+    </span>
   </label>
   <div
     class="ecl-help-block ecl-help-block--disabled"
@@ -88,7 +98,7 @@ exports[`EC - Select Disabled renders correctly 1`] = `
       class="ecl-select"
       disabled=""
       id="example-id"
-      name="example-name"
+      required=""
     >
       <option
         value="1"
@@ -142,6 +152,11 @@ exports[`EC - Select With error renders correctly 1`] = `
     for="example-id"
   >
     Select a country
+    <span
+      class="ecl-form-label__required"
+    >
+      *
+    </span>
   </label>
   <div
     class="ecl-help-block"
@@ -159,7 +174,7 @@ exports[`EC - Select With error renders correctly 1`] = `
     <select
       class="ecl-select ecl-select--invalid"
       id="example-id"
-      name="example-name"
+      required=""
     >
       <option
         value="1"
@@ -213,6 +228,11 @@ exports[`EC - Select With error renders correctly with extra attributes 1`] = `
     for="example-id"
   >
     Select a country
+    <span
+      class="ecl-form-label__required"
+    >
+      *
+    </span>
   </label>
   <div
     class="ecl-help-block"
@@ -232,7 +252,7 @@ exports[`EC - Select With error renders correctly with extra attributes 1`] = `
       data-test="data-test-value"
       data-test-1="data-test-value-1"
       id="example-id"
-      name="example-name"
+      required=""
     >
       <option
         value="1"
@@ -286,6 +306,11 @@ exports[`EC - Select With error renders correctly with extra class names 1`] = `
     for="example-id"
   >
     Select a country
+    <span
+      class="ecl-form-label__required"
+    >
+      *
+    </span>
   </label>
   <div
     class="ecl-help-block"
@@ -303,7 +328,7 @@ exports[`EC - Select With error renders correctly with extra class names 1`] = `
     <select
       class="ecl-select ecl-select--invalid custom-class custom-class--test"
       id="example-id"
-      name="example-name"
+      required=""
     >
       <option
         value="1"
diff --git a/src/ec/packages/ec-component-select/demo/data.js b/src/ec/packages/ec-component-select/demo/data.js
index e5dd6e2c4..be638b01a 100644
--- a/src/ec/packages/ec-component-select/demo/data.js
+++ b/src/ec/packages/ec-component-select/demo/data.js
@@ -1,5 +1,15 @@
 import specs from '@ecl/ec-specs-select/demo/data';
+import merge from 'deepmerge';
 
-specs.icon_path = '/icons.svg';
+const fullSpecs = merge(specs, {
+  icon_path: '/icons.svg',
+  invalid_text: 'This is the error message',
+  helper_text: "This is the input's helper text.",
+  optional_text: '(optional)',
+  width: 'm',
+  required: true,
+  required_text: '*',
+  id: 'select-id',
+});
 
-export default specs;
+export default fullSpecs;
diff --git a/src/ec/packages/ec-component-select/ecl-select.html.twig b/src/ec/packages/ec-component-select/ecl-select.html.twig
index 27b9ade00..92fcde15b 100644
--- a/src/ec/packages/ec-component-select/ecl-select.html.twig
+++ b/src/ec/packages/ec-component-select/ecl-select.html.twig
@@ -9,7 +9,6 @@
   - "disabled" (boolean) (default: false)
   - "invalid" (boolean) (default: false)
   - "required" (boolean) (default: false)
-  - "name" (string) (default: '')
   - "width" (string) (default: '')
   - "icon_path" (string) (default: ''): file containing the svg icons
   - "extra_group_classes" (optional) (string) (default: '') Extra classes (space separated) for the select group
@@ -32,7 +31,6 @@
 {% set _disabled = disabled|default(false) %}
 {% set _invalid = invalid|default(false) %}
 {% set _required = required|default(false) %}
-{% set _name = name|default('') %}
 {% set _icon_path = icon_path|default(false) %}
 {% set _width = width|default('m') %}
 
@@ -112,10 +110,12 @@
     {% if _id %}
       id="{{ _id }}"
     {% endif %}
-      name="{{ _name }}"
       class="{{ _css_class }}"
     {% if _disabled %}
       disabled
+    {% endif %}
+    {% if _required %}
+      required
     {% endif %}
       {{ _extra_attributes|raw }}
     >
diff --git a/src/ec/packages/ec-component-select/select.story.js b/src/ec/packages/ec-component-select/select.story.js
index 61ebddb83..865270f0f 100644
--- a/src/ec/packages/ec-component-select/select.story.js
+++ b/src/ec/packages/ec-component-select/select.story.js
@@ -36,11 +36,10 @@ storiesOf('Components/Forms/Select', module)
         optional_text: text('Optional text', '(optional)'),
         width: inputWidthSelect,
         id: 'example-id',
-        name: 'example-name',
         icon_path: defaultSprite,
       });
     },
     {
-      notes: { markdown: notes },
+      notes: { markdown: notes, json: specData },
     }
   );

From acd617662b3b57bf70f2f6b7fd4d156806ae05c8 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Thu, 23 Jan 2020 11:31:34 +0100
Subject: [PATCH 2/4] feat(select): Improving tests - TWIG-240

---
 src/ec/packages/ec-component-select/README.md |   2 +
 .../__snapshots__/select.test.js.snap         | 150 ++++++++++++------
 .../ec-component-select/ecl-select.html.twig  |  11 +-
 .../ec-component-select/select.test.js        |  69 ++++----
 4 files changed, 150 insertions(+), 82 deletions(-)

diff --git a/src/ec/packages/ec-component-select/README.md b/src/ec/packages/ec-component-select/README.md
index 24d24ac09..950ac4463 100644
--- a/src/ec/packages/ec-component-select/README.md
+++ b/src/ec/packages/ec-component-select/README.md
@@ -15,6 +15,7 @@ npm install --save @ecl-twig/ec-component-select
 - **"disabled"** (boolean) (default: false)
 - **"invalid"** (boolean) (default: false)
 - **"required"** (boolean) (default: false)
+- **"name"** (string) (default: '')
 - **"width"** (string) (default: '') Input width size (s, m or l)
 - **"icon_path"** (string) (default: ''): file containing the svg icons
 - **"extra_group_classes"** (optional) (string) (default: '') Extra classes (space separated) for the select group
@@ -49,6 +50,7 @@ npm install --save @ecl-twig/ec-component-select
   helper_text: 'Help message', 
   disabled: false, 
   id: 'example-id', 
+  name: 'example-name', 
   width: 'm', 
   icon_path: '/static/icons.svg', 
   extra_classes: 'my-extra-class-1 my-extra-class-2', 
diff --git a/src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap b/src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap
index 92d12fa30..25f38fe98 100644
--- a/src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap
+++ b/src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap
@@ -6,27 +6,26 @@ exports[`EC - Select Default renders correctly 1`] = `
 >
   <label
     class="ecl-form-label"
-    for="example-id"
+    for="select-id"
   >
     Select a country
     <span
-      class="ecl-form-label__required"
+      class="ecl-form-label__optional"
     >
-      *
+       (optional)
     </span>
   </label>
   <div
     class="ecl-help-block"
   >
-    Help message
+    This is the input's helper text.
   </div>
   <div
     class="ecl-select__container ecl-select__container--m"
   >
     <select
       class="ecl-select"
-      id="example-id"
-      required=""
+      id="select-id"
     >
       <option
         value="1"
@@ -71,13 +70,13 @@ exports[`EC - Select Default renders correctly 1`] = `
 </div>
 `;
 
-exports[`EC - Select Disabled renders correctly 1`] = `
+exports[`EC - Select Default renders correctly with extra attributes 1`] = `
 <div
   class="ecl-form-group ecl-form-group--select"
 >
   <label
-    class="ecl-form-label ecl-form-label--disabled"
-    for="example-id"
+    class="ecl-form-label"
+    for="select-id"
   >
     Select a country
     <span
@@ -87,17 +86,18 @@ exports[`EC - Select Disabled renders correctly 1`] = `
     </span>
   </label>
   <div
-    class="ecl-help-block ecl-help-block--disabled"
+    class="ecl-help-block"
   >
-    Help message
+    This is the input's helper text.
   </div>
   <div
-    class="ecl-select__container ecl-select__container--disabled ecl-select__container--m"
+    class="ecl-select__container ecl-select__container--m"
   >
     <select
       class="ecl-select"
-      disabled=""
-      id="example-id"
+      data-test="data-test-value"
+      data-test-1="data-test-value-1"
+      id="select-id"
       required=""
     >
       <option
@@ -143,13 +143,13 @@ exports[`EC - Select Disabled renders correctly 1`] = `
 </div>
 `;
 
-exports[`EC - Select With error renders correctly 1`] = `
+exports[`EC - Select Default renders correctly with extra class names 1`] = `
 <div
   class="ecl-form-group ecl-form-group--select"
 >
   <label
-    class="ecl-form-label ecl-form-label--invalid"
-    for="example-id"
+    class="ecl-form-label"
+    for="select-id"
   >
     Select a country
     <span
@@ -161,20 +161,86 @@ exports[`EC - Select With error renders correctly 1`] = `
   <div
     class="ecl-help-block"
   >
-    Help message
+    This is the input's helper text.
   </div>
   <div
-    class="ecl-feedback-message"
+    class="ecl-select__container ecl-select__container--m"
+  >
+    <select
+      class="ecl-select custom-class custom-class--test"
+      id="select-id"
+      required=""
+    >
+      <option
+        value="1"
+      >
+        Belgium
+      </option>
+      <option
+        value="2"
+      >
+        France
+      </option>
+      <option
+        value="3"
+      >
+        Luxembourg
+      </option>
+      <option
+        value="4"
+      >
+        Germany
+      </option>
+      <option
+        value="5"
+      >
+        Bulgaria
+      </option>
+    </select>
+    <div
+      class="ecl-select__icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="ecl-icon ecl-icon--s ecl-icon--rotate-180 ecl-select__icon-shape"
+        focusable="false"
+      >
+        <use
+          xlink:href="/icons.svg#ui--corner-arrow"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EC - Select Disabled renders correctly 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--select"
+>
+  <label
+    class="ecl-form-label ecl-form-label--disabled"
+    for="select-id"
+  >
+    Select a country
+    <span
+      class="ecl-form-label__optional"
+    >
+       (optional)
+    </span>
+  </label>
+  <div
+    class="ecl-help-block ecl-help-block--disabled"
   >
-    Error message
+    This is the input's helper text.
   </div>
   <div
-    class="ecl-select__container ecl-select__container--m"
+    class="ecl-select__container ecl-select__container--disabled ecl-select__container--m"
   >
     <select
-      class="ecl-select ecl-select--invalid"
-      id="example-id"
-      required=""
+      class="ecl-select"
+      disabled=""
+      id="select-id"
     >
       <option
         value="1"
@@ -219,13 +285,13 @@ exports[`EC - Select With error renders correctly 1`] = `
 </div>
 `;
 
-exports[`EC - Select With error renders correctly with extra attributes 1`] = `
+exports[`EC - Select Required renders correctly 1`] = `
 <div
   class="ecl-form-group ecl-form-group--select"
 >
   <label
-    class="ecl-form-label ecl-form-label--invalid"
-    for="example-id"
+    class="ecl-form-label"
+    for="select-id"
   >
     Select a country
     <span
@@ -237,21 +303,14 @@ exports[`EC - Select With error renders correctly with extra attributes 1`] = `
   <div
     class="ecl-help-block"
   >
-    Help message
-  </div>
-  <div
-    class="ecl-feedback-message"
-  >
-    Error message
+    This is the input's helper text.
   </div>
   <div
     class="ecl-select__container ecl-select__container--m"
   >
     <select
-      class="ecl-select ecl-select--invalid"
-      data-test="data-test-value"
-      data-test-1="data-test-value-1"
-      id="example-id"
+      class="ecl-select"
+      id="select-id"
       required=""
     >
       <option
@@ -297,38 +356,37 @@ exports[`EC - Select With error renders correctly with extra attributes 1`] = `
 </div>
 `;
 
-exports[`EC - Select With error renders correctly with extra class names 1`] = `
+exports[`EC - Select With error renders correctly 1`] = `
 <div
   class="ecl-form-group ecl-form-group--select"
 >
   <label
     class="ecl-form-label ecl-form-label--invalid"
-    for="example-id"
+    for="select-id"
   >
     Select a country
     <span
-      class="ecl-form-label__required"
+      class="ecl-form-label__optional"
     >
-      *
+       (optional)
     </span>
   </label>
   <div
     class="ecl-help-block"
   >
-    Help message
+    This is the input's helper text.
   </div>
   <div
     class="ecl-feedback-message"
   >
-    Error message
+    This is the error message
   </div>
   <div
     class="ecl-select__container ecl-select__container--m"
   >
     <select
-      class="ecl-select ecl-select--invalid custom-class custom-class--test"
-      id="example-id"
-      required=""
+      class="ecl-select ecl-select--invalid"
+      id="select-id"
     >
       <option
         value="1"
diff --git a/src/ec/packages/ec-component-select/ecl-select.html.twig b/src/ec/packages/ec-component-select/ecl-select.html.twig
index 92fcde15b..46cec191c 100644
--- a/src/ec/packages/ec-component-select/ecl-select.html.twig
+++ b/src/ec/packages/ec-component-select/ecl-select.html.twig
@@ -9,6 +9,7 @@
   - "disabled" (boolean) (default: false)
   - "invalid" (boolean) (default: false)
   - "required" (boolean) (default: false)
+  - "name" (string) (default: '')
   - "width" (string) (default: '')
   - "icon_path" (string) (default: ''): file containing the svg icons
   - "extra_group_classes" (optional) (string) (default: '') Extra classes (space separated) for the select group
@@ -31,6 +32,7 @@
 {% set _disabled = disabled|default(false) %}
 {% set _invalid = invalid|default(false) %}
 {% set _required = required|default(false) %}
+{% set _name = name|default('') %}
 {% set _icon_path = icon_path|default(false) %}
 {% set _width = width|default('m') %}
 
@@ -107,15 +109,18 @@
     {{- ' ecl-select__container--' ~ _width }}"
   >
     <select
+      class="{{ _css_class }}"
     {% if _id %}
       id="{{ _id }}"
     {% endif %}
-      class="{{ _css_class }}"
-    {% if _disabled %}
-      disabled
+    {% if _name is not empty %}
+      name="{{ _name }}"
     {% endif %}
     {% if _required %}
       required
+    {% endif %}
+    {% if _disabled %}
+      disabled
     {% endif %}
       {{ _extra_attributes|raw }}
     >
diff --git a/src/ec/packages/ec-component-select/select.test.js b/src/ec/packages/ec-component-select/select.test.js
index cf807cbc3..355c8f945 100644
--- a/src/ec/packages/ec-component-select/select.test.js
+++ b/src/ec/packages/ec-component-select/select.test.js
@@ -13,13 +13,44 @@ describe('EC - Select', () => {
       return expect(
         render(
           merge(specData, {
-            helper_text: 'Help message',
-            id: 'example-id',
-            name: 'example-name',
+            required: false,
           })
         )
       ).resolves.toMatchSnapshot();
     });
+
+    test('renders correctly with extra class names', () => {
+      expect.assertions(1);
+
+      const optionsWithExtraClasses = merge(specData, {
+        extra_classes: 'custom-class custom-class--test',
+      });
+
+      return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot();
+    });
+    
+    test('renders correctly with extra attributes', () => {
+      expect.assertions(1);
+
+      const optionsWithExtraAttributes = merge(specData, {
+        extra_attributes: [
+          { name: 'data-test', value: 'data-test-value' },
+          { name: 'data-test-1', value: 'data-test-value-1' },
+        ],
+      });
+
+      return expect(
+        render(optionsWithExtraAttributes)
+      ).resolves.toMatchSnapshot();
+    });
+  });
+
+  describe('Required', () => {
+    test('renders correctly', () => {
+      expect.assertions(1);
+
+      return expect(render(specData)).resolves.toMatchSnapshot();
+    });
   });
 
   describe('Disabled', () => {
@@ -30,9 +61,7 @@ describe('EC - Select', () => {
         render(
           merge(specData, {
             disabled: true,
-            helper_text: 'Help message',
-            id: 'example-id',
-            name: 'example-name',
+            required: false,
           })
         )
       ).resolves.toMatchSnapshot();
@@ -42,10 +71,7 @@ describe('EC - Select', () => {
   describe('With error', () => {
     const options = merge(specData, {
       invalid: true,
-      invalid_text: 'Error message',
-      helper_text: 'Help message',
-      id: 'example-id',
-      name: 'example-name',
+      required: false,
     });
 
     test('renders correctly', () => {
@@ -53,28 +79,5 @@ describe('EC - Select', () => {
 
       return expect(render(options)).resolves.toMatchSnapshot();
     });
-
-    test('renders correctly with extra class names', () => {
-      expect.assertions(1);
-
-      const optionsWithExtraClasses = merge(options, {
-        extra_classes: 'custom-class custom-class--test',
-      });
-
-      return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot();
-    });
-
-    test('renders correctly with extra attributes', () => {
-      expect.assertions(1);
-
-      const optionsWithExtraClasses = merge(options, {
-        extra_attributes: [
-          { name: 'data-test', value: 'data-test-value' },
-          { name: 'data-test-1', value: 'data-test-value-1' },
-        ],
-      });
-
-      return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot();
-    });
   });
 });

From 2115760b3a9a5b4a2ffc27c919957d1977fadae6 Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Thu, 23 Jan 2020 13:12:04 +0100
Subject: [PATCH 3/4] feat(select): linter - TWIG-240

---
 src/ec/packages/ec-component-select/select.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ec/packages/ec-component-select/select.test.js b/src/ec/packages/ec-component-select/select.test.js
index 355c8f945..39ff10b27 100644
--- a/src/ec/packages/ec-component-select/select.test.js
+++ b/src/ec/packages/ec-component-select/select.test.js
@@ -28,7 +28,7 @@ describe('EC - Select', () => {
 
       return expect(render(optionsWithExtraClasses)).resolves.toMatchSnapshot();
     });
-    
+
     test('renders correctly with extra attributes', () => {
       expect.assertions(1);
 

From 0c6f9ed0c303e2009b8849a587609a349dafa43c Mon Sep 17 00:00:00 2001
From: planctus <davidepuntoferrante@gmail.com>
Date: Tue, 28 Jan 2020 10:27:55 +0100
Subject: [PATCH 4/4] feat(select): Improving story file - TWIG-240

---
 .../ec-component-select/select.story.js       | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/ec/packages/ec-component-select/select.story.js b/src/ec/packages/ec-component-select/select.story.js
index 865270f0f..8ee93d968 100644
--- a/src/ec/packages/ec-component-select/select.story.js
+++ b/src/ec/packages/ec-component-select/select.story.js
@@ -2,9 +2,10 @@ import { storiesOf } from '@storybook/html';
 import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
 import { withNotes } from '@ecl-twig/storybook-addon-notes';
 import withCode from '@ecl-twig/storybook-addon-code';
+import merge from 'deepmerge';
 
-import specData from '@ecl/ec-specs-select/demo/data';
 import defaultSprite from '@ecl/ec-resources-icons/dist/sprites/icons.svg';
+import specData from './demo/data';
 
 import selectBox from './ecl-select.html.twig';
 import notes from './README.md';
@@ -24,20 +25,20 @@ storiesOf('Components/Forms/Select', module)
     () => {
       const inputWidthSelect = select('Width', inputWidthOptions, 'm');
 
-      return selectBox({
-        label: text('Label', specData.label),
-        options: specData.options,
-        invalid: boolean('Invalid', false),
-        invalid_text: text('Invalid text', 'This is the error message'),
-        helper_text: text('Help message', "This is the input's helper text."),
-        disabled: boolean('Disabled', false),
-        required: boolean('Required', false),
-        required_text: text('Required Text', '*'),
-        optional_text: text('Optional text', '(optional)'),
-        width: inputWidthSelect,
-        id: 'example-id',
-        icon_path: defaultSprite,
-      });
+      return selectBox(
+        merge(specData, {
+          label: text('Label', specData.label),
+          invalid: boolean('Invalid', false),
+          invalid_text: text('Invalid text', specData.invalid_text),
+          helper_text: text('Help message', specData.helper_text),
+          disabled: boolean('Disabled', false),
+          required: boolean('Required', specData.required),
+          required_text: text('Required Text', specData.required_text),
+          optional_text: text('Optional text', specData.optional_text),
+          width: inputWidthSelect,
+          icon_path: defaultSprite,
+        })
+      );
     },
     {
       notes: { markdown: notes, json: specData },