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

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

@@ -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,23 +25,22 @@ 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',
-        name: 'example-name',
-        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 },
+      notes: { markdown: notes, json: specData },
     }
   );