Add multiselect/tom-select to Design Guide's form page (decidim#12961)

decidim-design/app/packs/stylesheets/design.scss

@@ -1,3 +1,5 @@
+@import "tom-select/dist/scss/tom-select";
+
 .design__layout {
   @apply grid md:grid-cols-12 container min-h-screen before:content-[''] before:absolute before:-z-10 before:w-1/2 before:h-full before:inset-0 before:bg-background;
 

decidim-design/app/views/decidim/design/components/forms.html.erb

@@ -10,6 +10,7 @@
   <a href="#error"><%= t(".errors") %></a>
   <a href="#length"><%= t(".min_max_length") %></a>
   <a href="#emoji"><%= t(".emojis") %></a>
+  <a href="#multiselect"><%= t(".multiselect") %></a>
 <% end %>
 
 <%
@@ -233,3 +234,16 @@
     </label>
   </div>
 </section>
+
+<section id="multiselect" class="design__section">
+  <h2 class="h2"><%= t(".multiselect") %></h2>
+
+  <div class="form__wrapper">
+    <p><%= t(".multiselect_description_html") %></p>
+
+    <label>
+      input type="text" class="js-tags-container" value="abc, 123"
+      <input type="text" class="js-tags-container" value="abc, 123">
+    </label>
+  </div>
+</section>

decidim-design/config/locales/en.yml

@@ -55,6 +55,8 @@ en:
           html_regular_inputs: HTML regular inputs
           min_max_length: Min/Max length
           min_max_length_description: Only works for input type='text' and textarea
+          multiselect: Multiselect
+          multiselect_description_html: Multiselects are a javascript feature available thanks to an external library called <a href="https://tom-select.js.org/" target="_blank" rel="noopener noreferrer">Tom Select</a>.
           regular_inputs_description: 'Only displays common types, full available list: date, datetime-local, email, month, number, password, search, tel, text, time, url, week'
           textarea_required: textarea required
           title: Forms