✨ feat(select): ajout exemple <optgroup> [DS-3374] (#734)

- ajout d'un example de select avec groupe d'options

src/component/select/example/index.ejs

@@ -9,3 +9,5 @@
 <%- sample('Liste déroulante valide', './sample/select', {select: { id:'select-valid', valid: true}}, true); %>
 
 <%- sample('Liste déroulante erreur', './sample/select', {select: { id:'select-error', error: true}}, true); %>
+
+<%- sample('Liste déroulante avec groupe d\'options', './sample/option-group', {select: { id:'select-group'}}, true); %>

src/component/select/example/sample/option-group.ejs

@@ -0,0 +1,30 @@
+<%
+  let select = locals.select || {};
+  select.valid = validData(select.valid);
+  select.error = errorData(select.error);
+  select.hint = hintData(select.hint);
+  select.placeholder = select.placeholder || 'Selectionnez une option';
+  select.label = select.label ||  'Label pour liste déroulante';
+
+  select.optionGroups = [
+    {
+      label: 'Groupe 1',
+      options: [
+        {value:'1', label:'Option 1'},
+        {value:'2', label:'Option 2'},
+        {value:'3', label:'Option 3'},
+        {value:'4', label:'Option 4'}
+      ]
+    },
+    {
+      label: 'Groupe 2',
+      options: [
+        {value:'5', label:'Option 5'},
+        {value:'6', label:'Option 6'},
+        {value:'7', label:'Option 7'},
+      ]
+    }
+  ];
+%>
+
+<%- include('../../template/ejs/select-group', {select: select}); %>

src/component/select/template/ejs/select.ejs

@@ -5,7 +5,13 @@
 
 * select.label (string, required) : label
 
-* select.options (array, required) : options du select, un array d'objets avec :
+* select.optionGroups (array) : groupes d'options du select, un array d'objets avec :
+  * label : label du groupe d'options
+  * options (array) : options du select, un array d'objets avec :
+    * value : attribut value de l'option
+    * label : label de l'option
+
+* select.options (array) : options du select, un array d'objets avec :
   * value : attribut value de l'option
   * label : label de l'option
 
@@ -77,11 +83,27 @@ if (select.disabled === true) attributes['disabled'] = '';
   <option value="" selected disabled hidden><%= select.placeholder %></option>
   <% } %>
 
-  <%
-  for (let i = 0; i < select.options.length; i++) {
-    let option = select.options[i];
-  %>
-  <option value="<%= option.value %>"><%= option.label %></option>
+  <% if (select.optionGroups != undefined) { %>
+    <%
+    for (let i = 0; i < select.optionGroups.length; i++) {
+      let optionGroup = select.optionGroups[i];
+    %>
+      <optgroup label="<%= optionGroup.label %>">
+      <%
+      for (let i = 0; i < optionGroup.options.length; i++) {
+        let option = optionGroup.options[i];
+      %>
+        <option value="<%= option.value %>"><%= option.label %></option>
+      <% } %>
+      </optgroup>
+    <% } %>
+  <% } else { %>
+    <%
+    for (let i = 0; i < select.options.length; i++) {
+      let option = select.options[i];
+    %>
+    <option value="<%= option.value %>"><%= option.label %></option>
+    <% } %>
   <% } %>
 </select>