testio-tailwind 0.1.0

package/src/pages/examples/splitview.haml

@@ -0,0 +1,390 @@
+---
+layout: page-example.njk
+title: "Splitview Layout"
+tags: "examples"
+---
+%nav.sidebar{arialabel:'Sidebar'}
+  %a.navlink.active{href:'#'}
+    %span.navlink-badge.icon.icon-home
+    Navlink active
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug
+    Navlink
+  %details
+    %summary.navlink-container
+      .navlink
+        %span.navlink-badge.icon.icon-product
+        Navlink collapsable
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug-reproduction
+    Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
+
+%main.splitview-layout#ds-splitview-demo
+  .splitview-header
+    %h1 Splitview layout
+    %p This is the header which will be independent from the 2 columns.
+  .splitview-list-header
+    .form-check.sm
+      %input{type:'checkbox'}
+    %h3.splitview-list-header-title 18 Bugs
+    .splitview-list-header-actions
+      %details.dropdown-actions.dropright
+        %summary
+          %a.link-with-icon{href:""}
+            .icon.icon-sort-descending
+            Severity (desc)
+        .popover-menu
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-descending
+            Severity (desc)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-ascending
+            Severity (asc)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-number-ascending
+            Age (old to new)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-number-descending
+            Age (new to old)
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-az
+            Title A-Z
+          %a.popover-action{href:'#'}
+            %span.icon.icon-sort-za
+            Title Z-A
+      %a.linked-icon{href:""}
+        .icon.icon-filter
+      %a.linked-icon{href:""}
+        .icon.icon-search
+  .splitview-list
+    .splitview-item#ds-splitview-demo-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Select this splitscreen item to view a demo of the behavior
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-submitted
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Selected splitview item title 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.
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-submitted
+        .status-icon.status-manager-question
+        .status-icon.status-reproduction
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-manager-approved
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title 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.
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-customer-approved
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-customer-rejected 
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title 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.
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+        .list-tags
+          .tag-item.focus-group Focus-group tag
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title 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.
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Selected splitview item title 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.
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-submitted
+        .status-icon.status-manager-question
+        .status-icon.status-reproduction
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-manager-approved
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title 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.
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-customer-approved
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+      .splitview-item-status
+        .status-icon.status-customer-rejected 
+    .splitview-item
+      .splitview-item-checkbox.form-check.sm
+        %input{type:'checkbox'}
+      .splitview-item-icon.icon.icon-critical
+      .splitview-item-text
+        .splitview-item-title Splitview item title 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.
+        .splitview-item-metainfo
+          = "#123321321 | Product Detail Page"
+          %br
+          = "by ÜberTester | Submitted"
+        .list-tags
+          .tag-item.focus-group Focus-group tag
+  .splitview-details
+    .splitview-details-emptystate.empty-state-message.search Please select an item from the list to view its details.
+    .splitview-details-content
+      .splitview-details-header
+        .icon.icon-critical
+        %h3.splitview-details-title Error page is shown if Project Owner reject review after Automator left the project
+        %a.btn.btn-sm.btn-square.btn-close-detailview#ds-demo-close-splitview{href: "#"}
+          .icon.icon-cross
+      .splitview-details-meta
+        %dl.list-splitview-meta
+          %dt Status
+          %dd
+            .text-with-icon
+              .status-icon.status-submitted
+              Submitted
+          %dt Bug ID
+          %dd #1799709
+        %details.meta-collapsable
+          %summary
+            .summary-closed Show more
+            .summary-open Show less
+          %dl.list-splitview-meta
+            %dt Bug Type
+            %dd
+              .text-with-icon
+                .icon.icon-bug
+                Functional
+            %dt Reported on
+            %dd October 5, 2021 11:48 AM
+            %dt Severity
+            %dd
+              .text-with-icon
+                .icon.icon-critical
+                Critical
+            %dt Feature
+            %dd
+              %a{href: ""} Feature name
+            %dt Known Bug
+            %dd
+              .text-with-icon
+                .icon.icon-bug-known
+                No
+            %dt Test ID
+            %dd #88219
+            %dt Tester
+            %dd
+              %details.dropdown-actions
+                %summary
+                  .user-item.linked.sm
+                    %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                    User item with actions
+                .popover-menu
+                  %a.popover-action{href:'#'}
+                    %span.icon.text-icon-default.icon-user-story-test
+                    Tester profile
+                  %a.popover-action{href:'#'}
+                    %span.icon.text-icon-default.icon-review-exclamation
+                    Report tester
+        .gallery-single-line
+          .gallery-nav-left
+            %span.icon-arrow-left
+          .gallery-nav-right
+            %span.icon-arrow-right
+          %ul.slides
+            %li.list-inline-item.active
+              %a{href: ""}
+                %img{src:"/assets/images/placeholders/Approaches-desktop.png"}
+        %section.splitview-details-content-grid
+          .label URL
+          %a{href: ""} https://www.url.com
+          .label Steps
+          .markdown
+            %ol
+              %li
+                Go to
+                %a{href: ""} https://www.url.com
+                and login as crowd AUTOMATOR (
+                %a{href: ""} email@qa.team
+                \/ abc123 was in my case)
+              %li Join a project, complete some automation task, and LEAVE the project
+              %li
+                Login
+                %a{href: ""} https://www.url.com
+                as project owner to perform review (
+                %a{href: ""} email@qa.team
+                \/ abc123 was in my case)
+              %li Start to review the automated task and reject it approval
+          .label Actual result
+          .markdown
+            %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+          .label Expected result
+          .markdown
+            %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+        %section
+          .section-header
+            %h5.section-title Attachments
+          .attachments
+            .attachment
+              %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+                %img{src:'/assets/images/placeholders/bugdetails.png'}
+              %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'}
+              %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+            .attachment
+              %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                .attachment-icon.icon-xl.icon-review-xl
+              %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+        %section
+          .section-header
+            %h5.section-title Reported on
+          .list-devices.mb-sm
+            .device
+              .device-icon.icon-lg.icon-computer-windows-lg
+              .device-info
+                Desktop | Windows 11
+                %ul.browser-list
+                  %li.icon.icon-chrome
+                  %li.icon.icon-edge-chromium
+        %section
+          .section-header
+            %h5.section-title Comments
+          .empty-state-message.chat No comments yet
+  %footer.splitview-list-actionbar
+    %button.btn.btn-default.btn-primary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+    %button.btn.btn-default.btn-secondary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary
+    %button.btn.btn-default.btn-info
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Info
+    %details.dropdown-actions.dropup.dropright
+      %summary
+        .btn.btn-square.btn-secondary
+          .icon.text-icon-default.icon-more
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+    %button.btn-intercom
+      %span.icon.icon-intercom
+  %footer.splitview-details-actionbar
+    %button.btn.btn-default.btn-primary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Primary
+    %button.btn.btn-default.btn-secondary
+      %span.icon.icon-check-circle-filled.mr-icon-spacing
+      Secondary
+    %details.dropdown-actions.dropup.dropright
+      %summary
+        .btn.btn-square.btn-secondary
+          .icon.text-icon-default.icon-more
+      .popover-menu
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-pencil
+          Edit
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-duplicate
+          Duplicate
+        %a.popover-action{href:'#'}
+          %span.icon.text-icon-default.icon-remove
+          Delete
+    %button.btn-intercom
+      %span.icon.icon-intercom

package/src/pages/forms/checkboxes.haml

@@ -0,0 +1,64 @@
+---
+tags: forms
+title: Checkboxes
+---
+
+.form-grid.single.narrow.mb-3
+  .form-check
+    %input#check1{type:"checkbox", checked:"true"}
+    %label{for:"check1"} Checkbox
+  .form-check
+    %input#check3{type:"checkbox"}
+    %label{for:"check3"} Checkbox
+  .form-check
+    .field_with_errors
+      %input#check3{type:"checkbox"}
+    %label{for:"check3"} Checkbox with error
+  .form-check.disabled
+    %input#check4{type:'checkbox', disabled:'true', checked:'true'}
+    %label{for:'check4'} Disabled checked
+  .form-check.disabled
+    %input#check5{type:'checkbox', disabled:'true'}
+    %label{for:'check5'} Disabled
+  .form-check.sm
+    %input#check1sm{type:'checkbox'}
+    %label{for:'check1sm'} Checkbox SM
+  .form-check.sm
+    %input#check2sm{type:'checkbox', checked:'true'}
+    %label{for:'check2sm'} Checkbox SM
+  .form-check.sm
+    %input#check3sm{type:'checkbox', disabled:"true"}
+    %label{for:'check3sm'} Checkbox SM
+  .form-check.sm
+    %input#check4sm{type:'checkbox', checked:'true', disabled:"true"}
+    %label{for:'check4sm'} Checkbox SM
+
+.form-grid.single.narrow.bg-black.p-3
+  .form-check.inverted
+    %input#check5inv{type:'checkbox', checked:'true'}
+    %label{for:'check5inv'} Inverted
+  .form-check.inverted
+    %input#check6inv{type:'checkbox'}
+    %label{for:'check6inv'} Checkbox
+  .form-check.inverted.disabled
+    %input#check7inv{type:'checkbox', disabled:'true', checked:'true'}
+    %label{for:'check7inv'} Disabled checked
+  .form-check.inverted.disabled
+    %input#check7{type:'checkbox', disabled:'true'}
+    %label{for:'check7'} Disabled
+  .form-check.sm.inverted
+    %input#check7sm{type:'checkbox'}
+    %label{for:'check7sm'} Checkbox SM
+  .form-check.sm.inverted
+    %input#check10sm{type:'checkbox', checked:'true', disabled:"true"}
+    %label{for:'check10sm'} Checkbox SM
+  .form-check.sm.inverted
+    %input#check8sm{type:'checkbox'}
+    %label{for:'check8sm'}
+      %span.icon.icon-circle-filled.mr-icon-spacing
+      Checkbox SM
+  .form-check.sm.inverted
+    %input#check9sm{type:'checkbox', checked:'true', disabled:"true"}
+    %label{for:'check9sm'}
+      %span.icon.icon-circle-filled.mr-icon-spacing
+      Checkbox SM

package/src/pages/forms/checkboxes_devices.haml

@@ -0,0 +1,45 @@
+---
+tags: forms
+title: Checkboxes for devices
+---
+
+.form-grid.single.narrow.mb-3
+  .form-check.sm
+    %input#devicecheck1{type:"checkbox", checked:"true"}
+    %label{for:"devicecheck1"}
+      .device
+        .device-icon.icon-lg.icon-computer-windows-lg
+        .device-info
+          Desktop | Windows 11
+          %ul.browser-list
+            %li.icon.icon-chrome
+            %li.icon.icon-edge-chromium
+  .form-check.sm
+    %input#devicecheck2{type:"checkbox"}
+    %label{for:"devicecheck2"}
+      .device
+        .device-icon.icon-lg.icon-smartphone-apple-lg
+        .device-info
+          Smartphone | iOS 11
+          %ul.browser-list
+            %li.icon.icon-chrome
+            %li.icon.icon-edge-chromium
+  .form-check.sm.disabled
+    %input#devicecheck3{type:'checkbox', disabled:'true', checked:'true'}
+    %label{for:'devicecheck3'}
+      .device
+        .device-icon.icon-lg.icon-tablet-android-lg
+        .device-info
+          Tablet | iOS 11
+          %ul.browser-list
+            %li.icon.icon-chrome
+            %li.icon.icon-edge-chromium
+  .form-check.sm.disabled
+    %input#devicecheck4{type:'checkbox', disabled:'true'}
+    %label{for:'devicecheck4'}
+      .device
+        .device-icon.icon-lg.icon-console-lg
+        .device-info
+          Console | Nintendo Switch
+
+

package/src/pages/forms/form-addon.haml

@@ -0,0 +1,16 @@
+---
+tags: "forms"
+title: Form addon
+---
+
+.form-grid
+  .form-group.with-addon
+    %label.form-label Input with addon
+    %input.form-control{type:"text", placeholder:"Placeholder"}
+    .form-addon
+      .text-label EUR
+  .form-group.with-addon
+    %label.form-label Input with icon addon
+    %input.form-control{type:"text", placeholder:"Placeholder"}
+    .form-addon
+      %span.icon.icon-check-circle-filled.text-success

package/src/pages/forms/form-card.haml

@@ -0,0 +1,36 @@
+---
+tags: forms
+title: Form card
+---
+
+.form-card
+  .form-card-heading
+    .form-card-title Form card title
+    .form-card-actions
+      %button.btn.btn-square.btn-sm.btn-primary
+        .icon.icon-arrow-upward
+      %button.btn.btn-square.btn-sm.btn-primary
+        .icon.icon-arrow-downward
+      %button.btn.btn-square.btn-sm.btn-primary
+        .icon.icon-remove
+  .form-grid
+    .form-group
+      %label.form-label Input
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+    .form-group
+      %label.form-label Input disabled
+      %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
+    .form-group
+      %label.form-label Textarea
+      %textarea.form-control{rows:'1', placeholder:"Enter some long form content"}
+    .form-group.form-select
+      %label.form-label Select
+      %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

package/src/pages/forms/form-grid.haml

@@ -0,0 +1,17 @@
+---
+tags: "forms"
+title: Form grid
+---
+
+.form-grid
+  .bg-gray-lighter.p-sm.rounded
+  .bg-gray-lighter.p-sm.rounded
+  .bg-gray-lighter.p-sm.rounded
+.p-xs
+.form-grid
+  .form-group
+    .form-label.bg-gray-lightest.p-xs.rounded form-label
+    .form-control.bg-gray-lighter.p-xs.rounded form-control
+  .form-group
+    .form-label.bg-gray-lightest.p-xs.rounded form-label
+    .form-control.bg-gray-lighter.p-xs.rounded form-control

package/src/pages/forms/form_grid_narrow.haml

@@ -0,0 +1,19 @@
+---
+tags: "forms"
+title: Form grid narrow
+---
+
+%p.mb-heading Use the narrow version of form-grid for checkboxes and radio buttons to get a tighter spacing.
+
+.form-grid.narrow
+  .bg-gray-lighter.p-sm.rounded
+  .bg-gray-lighter.p-sm.rounded
+  .bg-gray-lighter.p-sm.rounded
+.p-xs
+.form-grid.narrow
+  .form-group
+    .form-label.bg-gray-lightest.p-xs.rounded form-label
+    .form-control.bg-gray-lighter.p-xs.rounded form-control
+  .form-group
+    .form-label.bg-gray-lightest.p-xs.rounded form-label
+    .form-control.bg-gray-lighter.p-xs.rounded form-control

package/src/pages/forms/forms.haml

@@ -0,0 +1,23 @@
+---
+tags: "forms"
+title: Forms
+---
+
+.form-grid
+  .form-group
+    %label.form-label Input
+    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+  .form-group
+    %label.form-label Input disabled
+    %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
+  .form-group
+    %label.form-label Input with form hint
+    %div
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+      .form-hint Form-hint 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.
+  .form-group
+    .field_with_errors
+      %label.form-label Input with errors
+    .field_with_errors
+      %input.form-control{type:'text', value:""}
+      .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/index.njk

@@ -0,0 +1,7 @@
+---
+layout: base
+permalink: forms/
+---
+
+{% set collection = collections.forms %}
+{% include "page-with-sidebar.njk" %}

package/src/pages/forms/radiobuttons.haml

@@ -0,0 +1,50 @@
+---
+tags: forms
+title: Radiobuttons
+---
+
+.form-grid.single.narrow.mb-3
+  .form-radio
+    %input#radio1{type:'radio', checked:'true', name:'radio-group', value:'1'}
+    %label{for:'radio1'} Option 1
+  .form-radio
+    %input#radio2{type:'radio', name:'radio-group', value:'2'}
+    %label{for:'radio2'} Option 2
+  .form-radio
+    %input#radio3{type:'radio', name:'radio-group', value:'3'}
+    %label{for:'radio3'} Option 3
+  .form-radio.disabled
+    %input#radio4{type:'radio', name:'radio-group', value:'4', disabled:'true'}
+    %label{for:'radio4'} Disabled
+
+.form-grid.single.narrow.mb-3
+  .form-radio
+    .field_with_errors
+      %input#radio1{type:'radio', name:'radio-group', value:'1'}
+    %label{for:'radio1'} Option 1
+  .form-radio
+    .field_with_errors
+      %input#radio2{type:'radio', name:'radio-group', value:'2'}
+    %label{for:'radio2'} Option 2
+  .form-radio.disabled
+    .field_with_errors
+      %input#radio4{type:'radio', name:'radio-group', value:'4', disabled:'true'}
+    %label{for:'radio4'} Disabled
+  .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.
+
+
+
+.form-grid.single.narrow.bg-black.p-3
+  .form-radio.inverted
+    %input#radio6{type:'radio', checked:'true', name:'radio-group2', value:'1'}
+    %label{for:'radio6'} Option 1
+  .form-radio.inverted
+    %input#radio7{type:'radio', name:'radio-group2', value:'2'}
+    %label{for:'radio7'} Option 2
+  .form-radio.inverted
+    %input#radio8{type:'radio', name:'radio-group2', value:'3'}
+    %label{for:'radio8'} Option 3
+  .form-radio.inverted.disabled
+    %input#radio9{type:'radio', name:'radio-group2', value:'4', disabled:'true'}
+    %label{for:'radio9'} Disabled