feat(select): (almost) green diff with ECL - TWIG-240

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"

src/ec/packages/ec-component-select/__snapshots__/select.test.js.snap

@@ -6,22 +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__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"
-      name="example-name"
+      id="select-id"
     >
       <option
         value="1"
@@ -66,29 +70,35 @@ 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
+      class="ecl-form-label__required"
+    >
+      *
+    </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"
-      name="example-name"
+      data-test="data-test-value"
+      data-test-1="data-test-value-1"
+      id="select-id"
+      required=""
     >
       <option
         value="1"
@@ -133,33 +143,33 @@ 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
+      class="ecl-form-label__required"
+    >
+      *
+    </span>
   </label>
   <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"
-      id="example-id"
-      name="example-name"
+      class="ecl-select custom-class custom-class--test"
+      id="select-id"
+      required=""
     >
       <option
         value="1"
@@ -204,35 +214,104 @@ exports[`EC - Select With error renders correctly 1`] = `
 </div>
 `;
 
-exports[`EC - Select With error renders correctly with extra attributes 1`] = `
+exports[`EC - Select Disabled 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 ecl-form-label--disabled"
+    for="select-id"
   >
     Select a country
+    <span
+      class="ecl-form-label__optional"
+    >
+       (optional)
+    </span>
   </label>
   <div
-    class="ecl-help-block"
+    class="ecl-help-block ecl-help-block--disabled"
   >
-    Help message
+    This is the input's helper text.
   </div>
   <div
-    class="ecl-feedback-message"
+    class="ecl-select__container ecl-select__container--disabled ecl-select__container--m"
   >
-    Error message
+    <select
+      class="ecl-select"
+      disabled=""
+      id="select-id"
+    >
+      <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 Required renders correctly 1`] = `
+<div
+  class="ecl-form-group ecl-form-group--select"
+>
+  <label
+    class="ecl-form-label"
+    for="select-id"
+  >
+    Select a country
+    <span
+      class="ecl-form-label__required"
+    >
+      *
+    </span>
+  </label>
+  <div
+    class="ecl-help-block"
+  >
+    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"
-      name="example-name"
+      class="ecl-select"
+      id="select-id"
+      required=""
     >
       <option
         value="1"
@@ -277,33 +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__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"
-      name="example-name"
+      class="ecl-select ecl-select--invalid"
+      id="select-id"
     >
       <option
         value="1"

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;

src/ec/packages/ec-component-select/ecl-select.html.twig

@@ -109,11 +109,16 @@
     {{- ' ecl-select__container--' ~ _width }}"
   >
     <select
+      class="{{ _css_class }}"
     {% if _id %}
       id="{{ _id }}"
     {% endif %}
+    {% if _name is not empty %}
       name="{{ _name }}"
-      class="{{ _css_class }}"
+    {% endif %}
+    {% if _required %}
+      required
+    {% endif %}
     {% if _disabled %}
       disabled
     {% endif %}

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 },
     }
   );