testio-tailwind 0.2.0 → 0.2.1

package/src/pages/forms/toggle-buttons.haml

@@ -1,94 +1,94 @@
----
-tags: forms
-title: Toggle buttons 
----
-
-.toggle-btn-group.mb-1
-  .selectable-token
-    %input#radiotoggle1{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
-    %label{for:'radiotoggle1'} Option 1
-  .selectable-token
-    %input#radiotoggle2{type:'radio', name:'radio-togglegroup1', value:'2'}
-    %label{for:'radiotoggle2'} Option 2
-  .selectable-token
-    %input#radiotoggle3{type:'radio', name:'radio-togglegroup1', value:'3'}
-    %label{for:'radiotoggle3'} Option 3
-
-.toggle-btn-group.mb-1
-  .selectable-token
-    %input#radiotoggle_icon1{type:'radio', checked:'', name:'radio-togglegroup2', value:'1'}
-    %label{for:'radiotoggle_icon1'}
-      %span.icon.icon-critical.mr-icon-spacing
-      Critical
-  .selectable-token
-    %input#radiotoggle_icon2{type:'radio', name:'radio-togglegroup2', value:'2'}
-    %label{for:'radiotoggle_icon2'}
-      %span.icon.icon-high.mr-icon-spacing
-      High
-  .selectable-token
-    %input#radiotoggle_icon3{type:'radio', name:'radio-togglegroup2', value:'3'}
-    %label{for:'radiotoggle_icon3'}
-      %span.icon.icon-low.mr-icon-spacing
-      High
-
-.toggle-btn-group.mb-1
-  .selectable-token.success
-    %input#radiotoggle4{type:'radio', checked:'', name:'radio-togglegroup3', value:'1'}
-    %label{for:'radiotoggle4'}
-      %span.icon.icon-check-circle-filled.mr-icon-spacing  
-      Success
-  .selectable-token.danger
-    %input#radiotoggle5{type:'radio', name:'radio-togglegroup3', value:'2'}
-    %label{for:'radiotoggle5'}
-      %span.icon.icon-cross-circle-filled.mr-icon-spacing
-      Danger
-  .selectable-token.disabled
-    %input#radiotoggle6{type:'radio', name:'radio-togglegroup3', value:'4', disabled:'true'}
-    %label{for:'radiotoggle6'}
-      %span.icon.icon-blocked.mr-icon-spacing
-      Disabled
-
-.form-grid.single.narrow.bg-black.p-3
-  .toggle-btn-group.mb-1
-    .selectable-token.inverted
-      %input#radiotoggle_inv1{type:'radio', checked:'', name:'radio-togglegroup4', value:'1'}
-      %label{for:'radiotoggle_inv1'} Option 1
-    .selectable-token.inverted
-      %input#radiotoggle_inv2{type:'radio', name:'radio-togglegroup4', value:'2'}
-      %label{for:'radiotoggle_inv2'} Option 2
-    .selectable-token.inverted
-      %input#radiotoggle_inv3{type:'radio', name:'radio-togglegroup4', value:'3'}
-      %label{for:'radiotoggle_inv3'} Option 3
-  .toggle-btn-group.mb-1
-    .selectable-token.inverted
-      %input#radiotoggle_icon_inv1{type:'radio', checked:'', name:'radio-togglegroup5', value:'1'}
-      %label{for:'radiotoggle_icon_inv1'}
-        %span.icon.icon-critical.mr-icon-spacing
-        Critical
-    .selectable-token.inverted
-      %input#radiotoggle_icon_inv2{type:'radio', name:'radio-togglegroup5', value:'2'}
-      %label{for:'radiotoggle_icon_inv2'}
-        %span.icon.icon-high.mr-icon-spacing
-        High
-    .selectable-token.inverted
-      %input#radiotoggle_icon_inv3{type:'radio', name:'radio-togglegroup5', value:'3'}
-      %label{for:'radiotoggle_icon_inv3'}
-        %span.icon.icon-low.mr-icon-spacing
-        High
-  .toggle-btn-group.mb-1
-    .selectable-token.inverted.success
-      %input#radiotoggle_inv4{type:'radio', checked:'', name:'radio-togglegroup6', value:'1'}
-      %label{for:'radiotoggle_inv4'}
-        %span.icon.icon-check-circle-filled.mr-icon-spacing  
-        Success
-    .selectable-token.inverted.danger
-      %input#radiotoggle_inv5{type:'radio', name:'radio-togglegroup6', value:'2'}
-      %label{for:'radiotoggle_inv5'}
-        %span.icon.icon-cross-circle-filled.mr-icon-spacing
-        Danger
-    .selectable-token.disabled.inverted
-      %input#radiotoggle_inv6{type:'radio', name:'radio-togglegroup6', value:'4', disabled:'true'}
-      %label{for:'radiotoggle_inv6'}
-        %span.icon.icon-blocked.mr-icon-spacing
-        Disabled
-
+---
+tags: forms
+title: Toggle buttons 
+---
+
+.toggle-btn-group.mb-1
+  .selectable-token
+    %input#radiotoggle1{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
+    %label{for:'radiotoggle1'} Option 1
+  .selectable-token
+    %input#radiotoggle2{type:'radio', name:'radio-togglegroup1', value:'2'}
+    %label{for:'radiotoggle2'} Option 2
+  .selectable-token
+    %input#radiotoggle3{type:'radio', name:'radio-togglegroup1', value:'3'}
+    %label{for:'radiotoggle3'} Option 3
+
+.toggle-btn-group.mb-1
+  .selectable-token
+    %input#radiotoggle_icon1{type:'radio', checked:'', name:'radio-togglegroup2', value:'1'}
+    %label{for:'radiotoggle_icon1'}
+      %span.icon.icon-critical.mr-icon-spacing
+      Critical
+  .selectable-token
+    %input#radiotoggle_icon2{type:'radio', name:'radio-togglegroup2', value:'2'}
+    %label{for:'radiotoggle_icon2'}
+      %span.icon.icon-high.mr-icon-spacing
+      High
+  .selectable-token
+    %input#radiotoggle_icon3{type:'radio', name:'radio-togglegroup2', value:'3'}
+    %label{for:'radiotoggle_icon3'}
+      %span.icon.icon-low.mr-icon-spacing
+      High
+
+.toggle-btn-group.mb-1
+  .selectable-token.success
+    %input#radiotoggle4{type:'radio', checked:'', name:'radio-togglegroup3', value:'1'}
+    %label{for:'radiotoggle4'}
+      %span.icon.icon-check-circle-filled.mr-icon-spacing  
+      Success
+  .selectable-token.danger
+    %input#radiotoggle5{type:'radio', name:'radio-togglegroup3', value:'2'}
+    %label{for:'radiotoggle5'}
+      %span.icon.icon-cross-circle-filled.mr-icon-spacing
+      Danger
+  .selectable-token.disabled
+    %input#radiotoggle6{type:'radio', name:'radio-togglegroup3', value:'4', disabled:'true'}
+    %label{for:'radiotoggle6'}
+      %span.icon.icon-blocked.mr-icon-spacing
+      Disabled
+
+.form-grid.single.narrow.bg-black.p-3
+  .toggle-btn-group.mb-1
+    .selectable-token.inverted
+      %input#radiotoggle_inv1{type:'radio', checked:'', name:'radio-togglegroup4', value:'1'}
+      %label{for:'radiotoggle_inv1'} Option 1
+    .selectable-token.inverted
+      %input#radiotoggle_inv2{type:'radio', name:'radio-togglegroup4', value:'2'}
+      %label{for:'radiotoggle_inv2'} Option 2
+    .selectable-token.inverted
+      %input#radiotoggle_inv3{type:'radio', name:'radio-togglegroup4', value:'3'}
+      %label{for:'radiotoggle_inv3'} Option 3
+  .toggle-btn-group.mb-1
+    .selectable-token.inverted
+      %input#radiotoggle_icon_inv1{type:'radio', checked:'', name:'radio-togglegroup5', value:'1'}
+      %label{for:'radiotoggle_icon_inv1'}
+        %span.icon.icon-critical.mr-icon-spacing
+        Critical
+    .selectable-token.inverted
+      %input#radiotoggle_icon_inv2{type:'radio', name:'radio-togglegroup5', value:'2'}
+      %label{for:'radiotoggle_icon_inv2'}
+        %span.icon.icon-high.mr-icon-spacing
+        High
+    .selectable-token.inverted
+      %input#radiotoggle_icon_inv3{type:'radio', name:'radio-togglegroup5', value:'3'}
+      %label{for:'radiotoggle_icon_inv3'}
+        %span.icon.icon-low.mr-icon-spacing
+        High
+  .toggle-btn-group.mb-1
+    .selectable-token.inverted.success
+      %input#radiotoggle_inv4{type:'radio', checked:'', name:'radio-togglegroup6', value:'1'}
+      %label{for:'radiotoggle_inv4'}
+        %span.icon.icon-check-circle-filled.mr-icon-spacing  
+        Success
+    .selectable-token.inverted.danger
+      %input#radiotoggle_inv5{type:'radio', name:'radio-togglegroup6', value:'2'}
+      %label{for:'radiotoggle_inv5'}
+        %span.icon.icon-cross-circle-filled.mr-icon-spacing
+        Danger
+    .selectable-token.disabled.inverted
+      %input#radiotoggle_inv6{type:'radio', name:'radio-togglegroup6', value:'4', disabled:'true'}
+      %label{for:'radiotoggle_inv6'}
+        %span.icon.icon-blocked.mr-icon-spacing
+        Disabled
+

package/src/pages/forms/toggle-switch.haml

@@ -1,31 +1,31 @@
----
-tags: forms
-title: Toggle switch
----
-
-.form-grid.single.narrow
-  .form-toggle
-    %label.toggle-switch{for:'toggle1active'}
-      %input#toggle1active{type:'checkbox', checked:"true"}
-      %span.slider
-    %label.toggle-switch-label{for:'toggle1active'} Toggle Switch
-  .form-toggle
-    %label.toggle-switch{for:'toggle1'}
-      %input#toggle1{type:'checkbox'}
-      %span.slider
-    %label.toggle-switch-label{for:'toggle1'} Toggle Switch
-  .form-toggle
-    %label.toggle-switch.disabled{for:'toggle2'}
-      %input#toggle2{type:'checkbox', disabled:'disabled'}
-      %span.slider
-    %label.toggle-switch-label{for:'toggle2'} Toggle Switch disabled
-  .form-toggle
-    %label.toggle-switch.disabled{for:'toggle3'}
-      %input#toggle3{type:'checkbox', checked:"true", disabled:'disabled'}
-      %span.slider
-    %label.toggle-switch-label{for:'toggle3'} Toggle Switch disabled
-  .form-toggle.sm
-    %label.toggle-switch{for:'toggleSM'}
-      %input#toggleSM{type:'checkbox'}
-      %span.slider
-    %label.toggle-switch-label{for:'toggleSM'} Toggle Switch SM
+---
+tags: forms
+title: Toggle switch
+---
+
+.form-grid.single.narrow
+  .form-toggle
+    %label.toggle-switch{for:'toggle1active'}
+      %input#toggle1active{type:'checkbox', checked:"true"}
+      %span.slider
+    %label.toggle-switch-label{for:'toggle1active'} Toggle Switch
+  .form-toggle
+    %label.toggle-switch{for:'toggle1'}
+      %input#toggle1{type:'checkbox'}
+      %span.slider
+    %label.toggle-switch-label{for:'toggle1'} Toggle Switch
+  .form-toggle
+    %label.toggle-switch.disabled{for:'toggle2'}
+      %input#toggle2{type:'checkbox', disabled:'disabled'}
+      %span.slider
+    %label.toggle-switch-label{for:'toggle2'} Toggle Switch disabled
+  .form-toggle
+    %label.toggle-switch.disabled{for:'toggle3'}
+      %input#toggle3{type:'checkbox', checked:"true", disabled:'disabled'}
+      %span.slider
+    %label.toggle-switch-label{for:'toggle3'} Toggle Switch disabled
+  .form-toggle.sm
+    %label.toggle-switch{for:'toggleSM'}
+      %input#toggleSM{type:'checkbox'}
+      %span.slider
+    %label.toggle-switch-label{for:'toggleSM'} Toggle Switch SM

package/src/pages/forms/tomselect.haml

@@ -1,76 +1,76 @@
----
-tags: forms
-title: Tom Select
----
-
-%p.mb-heading
-  %span These selects use the 
-  %a{href:"https://tom-select.js.org/"} Tom Select Library
-  %span .
-.form-grid.single
-  .form-group.form-select
-    %label.form-label Select
-    %select.tom-select{placeholder: "Please select"}
-      %option{value: ""}
-      %option{value:"Option 1"} Option 1
-      %option{value:"Option 2"} Option 2
-      %option{value:"Option 3"} Option 3
-      %option{value:"Option 4"} ABC
-      %option{value:"Option 5"} DEF
-      %option{value:"Option 6"} WHY
-      %option{value:"Option 7"} XYZ
-  %p.mt-3 If you have some errors on the field
-  .form-group.form-select
-    .field_with_errors
-      %label.form-label Select
-    .field_with_errors
-      %select.tom-select{placeholder: "Please select"}
-        %option{value: ""}
-        %option{value:"Option 1"} Option 1
-        %option{value:"Option 2"} Option 2
-        %option{value:"Option 3"} Option 3
-        %option{value:"Option 4"} ABC
-        %option{value:"Option 5"} DEF
-        %option{value:"Option 6"} WHY
-        %option{value:"Option 7"} XYZ
-      .form-hint.error
-        You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-  %p.mt-3 Use opt-groups to display hints inside the select
-  .form-group.form-select
-    %label.form-label Optgroup select
-    %select.tom-select{placeholder: "Please select"}
-      %optgroup{label: "Here's a helper text that explains further information about the options of this dropdown"}
-        %option{value: ""}
-        %option Option 1
-        %option Option 2
-        %option Option 3
-        %option ABC
-        %option DEF
-        %option WHY
-        %option XYZ
-  %p.mt-3 Disabled select example
-  .form-group.form-select
-    %label.form-label Disabled
-    %select.tom-select{placeholder: "Please select", disabled:"true"}
-      %option{value: ""}
-      %option Option 1
-      %option Option 2
-      %option Option 3
-      %option ABC
-      %option DEF
-      %option WHY
-      %option XYZ
-  %p.mt-3 Multi selects display the selected options as removable tags.
-  .form-group.multi-select
-    %label.form-label Select multiple
-    %select.tom-select-multi{multiple: 'true', placeholder: "Please select"}
-      %option Option 1
-      %option Option 2
-      %option Option 3
-      %option Option 4
-      %option Option 5
-      %option ABC
-      %option DEF
-      %option WHY
-      %option XYZ
-
+---
+tags: forms
+title: Tom Select
+---
+
+%p.mb-heading
+  %span These selects use the 
+  %a{href:"https://tom-select.js.org/"} Tom Select Library
+  %span .
+.form-grid.single
+  .form-group.form-select
+    %label.form-label Select
+    %select.tom-select{placeholder: "Please select"}
+      %option{value: ""}
+      %option{value:"Option 1"} Option 1
+      %option{value:"Option 2"} Option 2
+      %option{value:"Option 3"} Option 3
+      %option{value:"Option 4"} ABC
+      %option{value:"Option 5"} DEF
+      %option{value:"Option 6"} WHY
+      %option{value:"Option 7"} XYZ
+  %p.mt-3 If you have some errors on the field
+  .form-group.form-select
+    .field_with_errors
+      %label.form-label Select
+    .field_with_errors
+      %select.tom-select{placeholder: "Please select"}
+        %option{value: ""}
+        %option{value:"Option 1"} Option 1
+        %option{value:"Option 2"} Option 2
+        %option{value:"Option 3"} Option 3
+        %option{value:"Option 4"} ABC
+        %option{value:"Option 5"} DEF
+        %option{value:"Option 6"} WHY
+        %option{value:"Option 7"} XYZ
+      .form-hint.error
+        You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  %p.mt-3 Use opt-groups to display hints inside the select
+  .form-group.form-select
+    %label.form-label Optgroup select
+    %select.tom-select{placeholder: "Please select"}
+      %optgroup{label: "Here's a helper text that explains further information about the options of this dropdown"}
+        %option{value: ""}
+        %option Option 1
+        %option Option 2
+        %option Option 3
+        %option ABC
+        %option DEF
+        %option WHY
+        %option XYZ
+  %p.mt-3 Disabled select example
+  .form-group.form-select
+    %label.form-label Disabled
+    %select.tom-select{placeholder: "Please select", disabled:"true"}
+      %option{value: ""}
+      %option Option 1
+      %option Option 2
+      %option Option 3
+      %option ABC
+      %option DEF
+      %option WHY
+      %option XYZ
+  %p.mt-3 Multi selects display the selected options as removable tags.
+  .form-group.multi-select
+    %label.form-label Select multiple
+    %select.tom-select-multi{multiple: 'true', placeholder: "Please select"}
+      %option Option 1
+      %option Option 2
+      %option Option 3
+      %option Option 4
+      %option Option 5
+      %option ABC
+      %option DEF
+      %option WHY
+      %option XYZ
+

package/src/pages/forms/trix_editor.pug

@@ -1,10 +1,10 @@
----
-tags: "forms"
-title: Trix Editor
----
-
-.form-group.trix-editor
-  label.form-label(for='space_branding_full_description') Full description
-  input#space_branding_full_description_trix_input_space_branding_8(type='hidden', name='space_branding[full_description]', value='<h1><strong>Some text before image</strong></h1><div><br><i>some italic text after</i><br><br>LIst&nbsp;</div><ul><li>1<ul><li>2</li></ul></li><li>3<ul><li>4<br><br><br></li></ul></li></ul><div>Numbered list</div><div><br></div><ol><li>one<ol><li>two</li></ol></li><li>three<ol><li>four<br><br></li></ol></li></ol><div>Little bit of code<br><br></div><pre>def add(b, c)\b + c\end</pre>', autocomplete='off')
-  trix-editor#space_branding_full_description.form-control.trix-content
-
+---
+tags: "forms"
+title: Trix Editor
+---
+
+.form-group.trix-editor
+  label.form-label(for='space_branding_full_description') Full description
+  input#space_branding_full_description_trix_input_space_branding_8(type='hidden', name='space_branding[full_description]', value='<h1><strong>Some text before image</strong></h1><div><br><i>some italic text after</i><br><br>LIst&nbsp;</div><ul><li>1<ul><li>2</li></ul></li><li>3<ul><li>4<br><br><br></li></ul></li></ul><div>Numbered list</div><div><br></div><ol><li>one<ol><li>two</li></ol></li><li>three<ol><li>four<br><br></li></ol></li></ol><div>Little bit of code<br><br></div><pre>def add(b, c)\b + c\end</pre>', autocomplete='off')
+  trix-editor#space_branding_full_description.form-control.trix-content
+

package/src/pages/forms/uploads.pug

@@ -1,101 +1,101 @@
----
-tags: forms
-title: Uploads and attachments
----
-
-.mb-heading
-  p.mb-xs We use <a href="https://www.dropzone.dev/">Dropzone.JS</a> for uploading files. You are viewing dropzone with the following configuration:
-  code
-    |  let dropzone = new Dropzone("#file-upload", {
-    br
-    |   addRemoveLinks: true,
-    |   uploadMultiple: true,
-    |   autoQueue: false,
-    |   dictCancelUpload: "",
-    |	  dictRemoveFile: ""
-    br
-    |  });
-
-.form-grid-single
-  form.form-group.dropzone(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
-    .dz-default.dz-message
-      p.dropzone-msg-title Click to upload a file or drag and drop
-      p.dropzone-msg-desc Files up to 10MB
-  .attachments.mt-sm
-    .attachment
-      a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
-        img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
-      a.attachment-name(href="/assets/images/placeholders/bugdetails.png") myfile-name.png
-    .attachment
-      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
-        img(src='/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt='Bug details')
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-      button.btn.btn-danger.attachment-btn
-        span.icon.text-icon-default.icon-remove
-    .attachment
-      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
-        span.attachment-icon.icon-xl.icon-review-xl
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-      button.btn.btn-danger.attachment-btn
-        span.icon.text-icon-default.icon-remove
-  .attachments.mt-sm
-    input(type='hidden', name='document[context_attributes][external_attachments_attachment_ids][]', value='', autocomplete='off')
-    .attachment.selectable
-      input#checkable-attachment1(data-checkboxes-target='checkbox', type='checkbox', value='89')
-      label(for="checkable-attachment1")
-        img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
-    .attachment.selectable
-      input#checkable-attachment2(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
-      label(for="checkable-attachment2")
-        img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
-    .attachment.selectable
-      input#checkable-attachment3(data-checkboxes-target='checkbox', type='checkbox', value='89')
-      label(for="checkable-attachment3")
-        .attachment-thumb
-          span.attachment-icon.icon-xl.icon-review-xl
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
-    .attachment.selectable
-      input#checkable-attachment4(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
-      label(for="checkable-attachment4")
-        .attachment-thumb
-          span.attachment-icon.icon-xl.icon-review-xl
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
-
-p.mt-3 Form errors example
-.form-grid-single
-  form.form-group.dropzone.field_with_errors(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
-    .dz-default.dz-message
-      p.dropzone-msg-title Click to upload a file or drag and drop
-      p.dropzone-msg-desc Files up to 10MB
-  .form-hint.error
-    You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-.bg-black.p-md.mt-3
-  .form-grid-single
-    form.form-group.inverted(action="/file-upload" class="dropzone" id="my-awesome-dropzone-inverted")
-      .dz-default.dz-message
-        p.dropzone-msg-title Click to upload a file or drag and drop
-        p.dropzone-msg-desc Files up to 10MB
-    .attachments.mt-sm
-      .attachment.inverted
-        a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
-          img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
-        a.attachment-name(href="/assets/images/placeholders/bugdetails.png") myfile-name.png
-        button.btn.btn-danger.attachment-btn
-          span.icon.text-icon-default.icon-remove
-
-      .attachment.inverted
-        a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
-          img(src='/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt='Bug details')
-        a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-        button.btn.btn-danger.attachment-btn
-          span.icon.text-icon-default.icon-remove
-
-      .attachment.inverted
-        a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
-          span.attachment-icon.icon-xl.icon-review-xl
-        a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-        button.btn.btn-danger.attachment-btn
-          span.icon.text-icon-default.icon-remove
+---
+tags: forms
+title: Uploads and attachments
+---
+
+.mb-heading
+  p.mb-xs We use <a href="https://www.dropzone.dev/">Dropzone.JS</a> for uploading files. You are viewing dropzone with the following configuration:
+  code
+    |  let dropzone = new Dropzone("#file-upload", {
+    br
+    |   addRemoveLinks: true,
+    |   uploadMultiple: true,
+    |   autoQueue: false,
+    |   dictCancelUpload: "",
+    |	  dictRemoveFile: ""
+    br
+    |  });
+
+.form-grid-single
+  form.form-group.dropzone(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+    .dz-default.dz-message
+      p.dropzone-msg-title Click to upload a file or drag and drop
+      p.dropzone-msg-desc Files up to 10MB
+  .attachments.mt-sm
+    .attachment
+      a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
+        img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/bugdetails.png") myfile-name.png
+    .attachment
+      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+        img(src='/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+      button.btn.btn-danger.attachment-btn
+        span.icon.text-icon-default.icon-remove
+    .attachment
+      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+        span.attachment-icon.icon-xl.icon-review-xl
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+      button.btn.btn-danger.attachment-btn
+        span.icon.text-icon-default.icon-remove
+  .attachments.mt-sm
+    input(type='hidden', name='document[context_attributes][external_attachments_attachment_ids][]', value='', autocomplete='off')
+    .attachment.selectable
+      input#checkable-attachment1(data-checkboxes-target='checkbox', type='checkbox', value='89')
+      label(for="checkable-attachment1")
+        img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
+    .attachment.selectable
+      input#checkable-attachment2(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
+      label(for="checkable-attachment2")
+        img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
+    .attachment.selectable
+      input#checkable-attachment3(data-checkboxes-target='checkbox', type='checkbox', value='89')
+      label(for="checkable-attachment3")
+        .attachment-thumb
+          span.attachment-icon.icon-xl.icon-review-xl
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
+    .attachment.selectable
+      input#checkable-attachment4(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
+      label(for="checkable-attachment4")
+        .attachment-thumb
+          span.attachment-icon.icon-xl.icon-review-xl
+      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
+
+p.mt-3 Form errors example
+.form-grid-single
+  form.form-group.dropzone.field_with_errors(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+    .dz-default.dz-message
+      p.dropzone-msg-title Click to upload a file or drag and drop
+      p.dropzone-msg-desc Files up to 10MB
+  .form-hint.error
+    You made a mistake, which is why you see this form validation error message with some helpful Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+.bg-black.p-md.mt-3
+  .form-grid-single
+    form.form-group.inverted(action="/file-upload" class="dropzone" id="my-awesome-dropzone-inverted")
+      .dz-default.dz-message
+        p.dropzone-msg-title Click to upload a file or drag and drop
+        p.dropzone-msg-desc Files up to 10MB
+    .attachments.mt-sm
+      .attachment.inverted
+        a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
+          img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
+        a.attachment-name(href="/assets/images/placeholders/bugdetails.png") myfile-name.png
+        button.btn.btn-danger.attachment-btn
+          span.icon.text-icon-default.icon-remove
+
+      .attachment.inverted
+        a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+          img(src='/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt='Bug details')
+        a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+        button.btn.btn-danger.attachment-btn
+          span.icon.text-icon-default.icon-remove
+
+      .attachment.inverted
+        a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
+          span.attachment-icon.icon-xl.icon-review-xl
+        a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+        button.btn.btn-danger.attachment-btn
+          span.icon.text-icon-default.icon-remove