testio-tailwind 0.1.0

package/src/pages/forms/rating_scale.haml

@@ -0,0 +1,62 @@
+---
+tags: forms
+title: Rating scale
+---
+
+.form-grid
+  .rating-wrapper
+    .rating-labels
+      .label-min Minimum
+      .label-max Maximum
+    .rating-scale
+      .selectable-token
+        %input#rating1{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
+        %label{for:'rating1'} 1
+      .selectable-token
+        %input#rating2{type:'radio', name:'radio-togglegroup1', value:'2'}
+        %label{for:'rating2'} 2
+      .selectable-token
+        %input#rating3{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating3'} 3
+      .selectable-token
+        %input#rating4{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating4'} 4
+      .selectable-token
+        %input#rating5{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating5'} 5
+  .rating-wrapper
+    .rating-labels
+      .label-min Minimum label with a lot of redundant text showing how things break
+      .label-max Maximum label with a lot of redundant text showing how things break
+    .rating-scale
+      .selectable-token
+        %input#rating11{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
+        %label{for:'rating11'} 1
+      .selectable-token
+        %input#rating12{type:'radio', name:'radio-togglegroup1', value:'2'}
+        %label{for:'rating12'} 2
+      .selectable-token
+        %input#rating13{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating13'} 3
+      .selectable-token
+        %input#rating14{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating14'} 4
+      .selectable-token
+        %input#rating15{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating15'} 5
+      .selectable-token
+        %input#rating16{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}
+        %label{for:'rating16'} 6
+      .selectable-token
+        %input#rating17{type:'radio', name:'radio-togglegroup1', value:'2'}
+        %label{for:'rating17'} 7
+      .selectable-token
+        %input#rating18{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating18'} 8
+      .selectable-token
+        %input#rating19{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating19'} 9
+      .selectable-token
+        %input#rating20{type:'radio', name:'radio-togglegroup1', value:'3'}
+        %label{for:'rating20'} 10
+

package/src/pages/forms/search.haml

@@ -0,0 +1,71 @@
+---
+tags: "forms"
+title: Search
+---
+
+.form-grid
+  .form-group
+    %label.form-label Search, direct input
+    %form.form-search.direct-input
+      %input.form-control{type:'Search', placeholder:"Type to search"}
+      %button.btn.btn-clear{type:'reset'}
+  .form-group
+    %label.form-label Search with submit
+    %form.form-search
+      %input.form-control{type:'Search', placeholder:"Search for something"}
+      %button.btn.btn-clear{type:'reset'}
+      %button.btn.btn-submit{type:'submit'}
+  .form-group
+    %label.form-label Search popover
+    %details.popover-wrapper.dropright
+      %summary
+        .btn.btn-square
+          .icon.icon-search
+      .popover-menu.search
+        %form.form-search.inverted
+          %input.form-control{type:'Search', placeholder:"Search for something"}
+          %button.btn.btn-clear{type:'reset'}
+          %button.btn.btn-submit{type:'submit'}
+  .form-group
+    %label.form-label Search popover with result selection
+    %details.popover-wrapper.dropright
+      %summary
+        .btn.btn-square
+          .icon.icon-search
+      .popover-menu.search
+        %form.form-search.inverted
+          %input.form-control{type:'Search', placeholder:"Search for something"}
+          %button.btn.btn-clear{type:'reset'}
+          %button.btn.btn-submit{type:'submit'}
+        .list-searchresults
+          %a.issue-item{href:""}
+            .issue-icon.icon.icon-critical
+            .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+            .issue-info issue info | issue ID | issue type
+          %a.issue-item{href:""}
+            .issue-icon.icon.icon-high
+            .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+            .issue-info Cirro | #123321 | High
+          %a.issue-item{href:""}
+            .issue-icon.icon.icon-low
+            .issue-title issue title with endless 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. 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.
+            .issue-info issue info with endless 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. 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.
+          %a.issue-item{href:""}
+            .issue-icon.icon.icon-bug-reproduction.critical
+            .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+            .issue-info issue info | issue ID | issue type
+          %a.issue-item{href:""}
+            .issue-icon.icon.icon-bug-fix-confirmation.high
+            .issue-title issue title with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+            .issue-info Cirro | #123321 | Bug Fix Confirmation
+          %a.issue-item{href:""}
+            .issue-icon.icon.icon-bug-reproduction 
+            .issue-title issue title with endless 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. 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.
+            .issue-info issue info with endless 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. 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.
+.form-grid.bg-black.p-3.mt-xs
+  .form-group.inverted
+    %label.form-label Inverted
+    %form.form-search.inverted
+      %input.form-control{type:'Search', placeholder:"Search for something"}
+      %button.btn.btn-clear{type:'reset'}
+      %button.btn.btn-submit{type:'submit'}

package/src/pages/forms/select2.haml

@@ -0,0 +1,72 @@
+---
+tags: forms
+title: Select2
+---
+
+%p.mb-heading
+  %span These selects use the 
+  %a{href:"https://select2.org/"} Select2 Library
+  %span .
+.form-grid.single
+  .form-group.form-select
+    %label.form-label Select
+    %select.select2{placeholder: "Please select"}
+      %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.select2{placeholder: "Please select"}
+        %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.select2{placeholder: "Please select"}
+      %optgroup{label: "Optgroup label for categories and such"}
+        %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.select2{placeholder: "Please select", disabled:"true"}
+      %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.select2{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/select_native.haml

@@ -0,0 +1,74 @@
+---
+tags: forms
+title: Select native
+---
+
+%p.mb-heading Styling for native selects. Using our custom themes for the libraries Tom Select or Select2 is prefered.
+.form-grid.single
+  .form-group.form-select-native
+    %label.form-label Select
+    .select-wrapper
+      %select{placeholder: "Please select"}
+        %option{value: ""} Please select
+        %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-native
+    .field_with_errors
+      %label.form-label Select
+    .field_with_errors
+      .select-wrapper
+        %select{placeholder: "Please select"}
+          %option{value: ""} Please select
+          %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-native
+    %label.form-label Optgroup select
+      .select-wrapper
+        %select{placeholder: "Please select"}
+          %optgroup{label: "Here's a helper text that explains further information about the options of this dropdown"}
+            %option{value: ""} Please select
+            %option Option 1
+            %option Option 2
+            %option Option 3
+            %option ABC
+            %option DEF
+            %option WHY
+            %option XYZ
+          %optgroup{label: "Optgroup label"}
+            %option{value: ""} Please select
+            %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-native
+    %label.form-label Disabled
+      .select-wrapper
+        %select{placeholder: "Please select", disabled:"true"}
+          %option{value: ""} Please select
+          %option Option 1
+          %option Option 2
+          %option Option 3
+          %option ABC
+          %option DEF
+          %option WHY
+          %option XYZ
+
+

package/src/pages/forms/selectable_token.haml

@@ -0,0 +1,49 @@
+---
+tags: forms
+title: Selectable token 
+---
+
+%ul.list-inline.flex.mb-3
+  %li.selectable-token
+    %input#selectabletoken1{type:"checkbox", checked:"true"}
+    %label{for:"selectabletoken1"}
+      %span.icon.icon-chrome.mr-icon-spacing
+      Selectable token
+  %li.selectable-token
+    %input#selectabletoken3{type:"checkbox"}
+    %label{for:"selectabletoken3"}
+      %span.icon.icon-chrome.mr-icon-spacing
+      Selectable token
+  %li.selectable-token.disabled
+    %input#selectabletoken4{type:'checkbox', disabled:'true', checked:'true'}
+    %label{for:'selectabletoken4'}
+      %span.icon.icon-chrome.mr-icon-spacing
+      Selectable token
+  %li.selectable-token.disabled
+    %input#selectabletoken5{type:'checkbox', disabled:'true'}
+    %label{for:'selectabletoken5'}
+      %span.icon.icon-chrome.mr-icon-spacing
+      Selectable token
+
+.form-grid.single.narrow.bg-black.p-3
+  %ul.list-inline.flex
+    %li.selectable-token.inverted
+      %input#selectabletoken5inv{type:'checkbox', checked:'true'}
+      %label{for:'selectabletoken5inv'}
+        %span.icon.icon-chrome.mr-icon-spacing
+        Selectable token
+    %li.selectable-token.inverted
+      %input#selectabletoken6inv{type:'checkbox'}
+      %label{for:'selectabletoken6inv'}
+        %span.icon.icon-chrome.mr-icon-spacing
+        Selectable token
+    %li.selectable-token.inverted.disabled
+      %input#selectabletoken7inv{type:'checkbox', disabled:'true', checked:'true'}
+      %label{for:'selectabletoken7inv'}
+        %span.icon.icon-chrome.mr-icon-spacing
+        Selectable token
+    %li.selectable-token.inverted.disabled
+      %input#selectabletoken8{type:'checkbox', disabled:'true'}
+      %label{for:'selectabletoken8'}
+        %span.icon.icon-chrome.mr-icon-spacing
+        Selectable token

package/src/pages/forms/selectable_token_browsers.haml

@@ -0,0 +1,66 @@
+---
+tags: forms
+title: Selectable token for browsers
+---
+
+%ul
+  %li
+    %p.mb-xxs Smartphone | iOS 11
+    %ul.list-inline
+      %li.icon-lg.icon-smartphone-apple-lg
+      %li.selectable-token.square
+        %input#checkbrowser1{type:"checkbox", checked:"true"}
+        %label{for:"checkbrowser1"}
+          %span.icon.icon-chrome
+      %li.selectable-token.square
+        %input#checkbrowser3{type:"checkbox"}
+        %label{for:"checkbrowser3"}
+          %span.icon.icon-chrome
+      %li.selectable-token.square.disabled
+        %input#checkbrowser4{type:'checkbox', disabled:'true', checked:'true'}
+        %label{for:'checkbrowser4'}
+          %span.icon.icon-chrome
+      %li.selectable-token.square.disabled
+        %input#checkbrowser5{type:'checkbox', disabled:'true'}
+        %label{for:'checkbrowser5'}
+          %span.icon.icon-chrome
+  %li
+    %p.mb-xxs Computer | Windows 11
+    %ul.list-inline
+      %li.icon-lg.icon-desktop-windows-lg
+      %li.selectable-token.square
+        %input#checkbrowserpc1{type:"checkbox", checked:"true"}
+        %label{for:"checkbrowserpc1"}
+          %span.icon.icon-chrome
+      %li.selectable-token.square
+        %input#checkbrowserpc3{type:"checkbox"}
+        %label{for:"checkbrowserpc3"}
+          %span.icon.icon-chrome
+      %li.selectable-token.square.disabled
+        %input#checkbrowserpc4{type:'checkbox', disabled:'true', checked:'true'}
+        %label{for:'checkbrowserpc4'}
+          %span.icon.icon-chrome
+      %li.selectable-token.square.disabled
+        %input#checkbrowserpc5{type:'checkbox', disabled:'true'}
+        %label{for:'checkbrowserpc5'}
+          %span.icon.icon-chrome
+
+.form-grid.single.narrow.bg-black.p-3.mt-sm
+  %ul.list-inline
+    %li.icon-lg.icon-smartphone-apple-lg.text-white
+    %li.selectable-token.square.inverted
+      %input#checkbrowser5inv{type:'checkbox', checked:'true'}
+      %label{for:'checkbrowser5inv'}
+        %span.icon.icon-chrome
+    %li.selectable-token.square.inverted
+      %input#checkbrowser6inv{type:'checkbox'}
+      %label{for:'checkbrowser6inv'}
+        %span.icon.icon-chrome
+    %li.selectable-token.square.inverted.disabled
+      %input#checkbrowser7inv{type:'checkbox', disabled:'true', checked:'true'}
+      %label{for:'checkbrowser7inv'}
+        %span.icon.icon-chrome
+    %li.selectable-token.square.inverted.disabled
+      %input#checkbrowser8{type:'checkbox', disabled:'true'}
+      %label{for:'checkbrowser8'}
+        %span.icon.icon-chrome

package/src/pages/forms/selectable_token_lg.haml

@@ -0,0 +1,49 @@
+---
+tags: forms
+title: Selectable token LG
+---
+
+%ul.list-inline.flex.mb-3
+  %li.selectable-token.lg
+    %input#selectabletokenlg1{type:"checkbox", checked:"true"}
+    %label{for:"selectabletokenlg1"}
+      .icon.icon-computer-lg
+      Selectable token
+  %li.selectable-token.lg
+    %input#selectabletokenlg3{type:"checkbox"}
+    %label{for:"selectabletokenlg3"}
+      .icon.icon-bug-reproduction-lg
+      Selectable token
+  %li.selectable-token.lg.disabled
+    %input#selectabletokenlg4{type:"checkbox", disabled:"true", checked:"true"}
+    %label{for:"selectabletokenlg4"}
+      .icon.icon-explorative-lg
+      Selectable token
+  %li.selectable-token.lg.disabled
+    %input#selectabletokenlg5{type:"checkbox", disabled:"true"}
+    %label{for:"selectabletokenlg5"}
+      .icon.icon-explorative-lg
+      Selectable token
+
+.form-grid.single.narrow.bg-black.p-3
+  %ul.list-inline.flex
+    %li.selectable-token.lg.inverted
+      %input#selectabletokenlg5inv{type:"checkbox", checked:"true"}
+      %label{for:"selectabletokenlg5inv"}
+        .icon.icon-computer-lg
+        Selectable token
+    %li.selectable-token.lg.inverted
+      %input#selectabletokenlg6inv{type:"checkbox"}
+      %label{for:"selectabletokenlg6inv"}
+        .icon.icon-bug-reproduction-lg
+        Selectable token
+    %li.selectable-token.lg.inverted.disabled
+      %input#selectabletokenlg7inv{type:"checkbox", disabled:"true", checked:"true"}
+      %label{for:"selectabletokenlg7inv"}
+        .icon.icon-explorative-lg
+        Selectable token
+    %li.selectable-token.lg.inverted.disabled
+      %input#selectabletokenlg8{type:"checkbox", disabled:"true"}
+      %label{for:"selectabletokenlg8"}
+        .icon.icon-explorative-lg
+        Selectable token

package/src/pages/forms/selectable_token_xl.haml

@@ -0,0 +1,49 @@
+---
+tags: forms
+title: Selectable token XL 
+---
+
+%ul.list-inline.flex.mb-3
+  %li.selectable-token.xl
+    %input#selectabletokenxl1{type:"checkbox", checked:"true"}
+    %label{for:"selectabletokenxl1"}
+      %span.icon.icon-rapid-test-xl
+      Selectable token
+  %li.selectable-token.xl
+    %input#selectabletokenxl3{type:"checkbox"}
+    %label{for:"selectabletokenxl3"}
+      %span.icon.icon-bug-reproduction-xl
+      Selectable token
+  %li.selectable-token.xl.disabled
+    %input#selectabletokenxl4{type:'checkbox', disabled:'true', checked:'true'}
+    %label{for:"selectabletokenxl4"}
+      %span.icon.icon-rapid-test-xl
+      Selectable token
+  %li.selectable-token.xl.disabled
+    %input#selectabletokenxl5{type:'checkbox', disabled:'true'}
+    %label{for:"selectabletokenxl5"}
+      %span.icon.icon-rapid-test-xl
+      Selectable token
+
+.form-grid.single.narrow.bg-black.p-3
+  %ul.list-inline.flex
+    %li.selectable-token.xl.inverted
+      %input#selectabletokenxl5inv{type:'checkbox', checked:'true'}
+      %label{for:"selectabletokenxl5inv"}
+        %span.icon.icon-rapid-test-xl
+        Selectable token
+    %li.selectable-token.xl.inverted
+      %input#selectabletokenxl6inv{type:'checkbox'}
+      %label{for:"selectabletokenxl6inv"}
+        %span.icon.icon-bug-reproduction-xl
+        Selectable token
+    %li.selectable-token.xl.inverted.disabled
+      %input#selectabletokenxl7inv{type:'checkbox', disabled:'true', checked:'true'}
+      %label{for:"selectabletokenxl7inv"}
+        %span.icon.icon-rapid-test-xl
+        Selectable token
+    %li.selectable-token.xl.inverted.disabled
+      %input#selectabletokenxl8{type:'checkbox', disabled:'true'}
+      %label{for:"selectabletokenxl8"}
+        %span.icon.icon-rapid-test-xl
+        Selectable token

package/src/pages/forms/textarea.haml

@@ -0,0 +1,24 @@
+---
+tags: forms
+title: Textarea
+---
+
+.form-grid.mb-heading
+  .form-group
+    %label.form-label Textarea
+    %textarea.form-control{rows:'1', placeholder:"Enter some long form content"}
+  .form-group
+    %label.form-label Textarea
+    %textarea.form-control{rows:'1', placeholder:"Enter some long form content"}
+      The height of this textarea grows with its content
+  .form-group
+    %label.form-label Textarea
+    %textarea.form-control{rows:'1', placeholder:"Enter some long form content"}
+      With a lot of content the textarea will be huge. Therefore: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+  .form-group
+    .field_with_errors
+      %label.form-label Textarea with errors
+    .field_with_errors
+      %textarea.form-control{rows:'1', placeholder:"Enter some long form content"}
+        With a lot of content the textarea will be huge. Therefore: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+      .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.

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

@@ -0,0 +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
+

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

@@ -0,0 +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