testio-tailwind 3.18.0 → 3.20.0

package/src/pages/agenticqa/tables-grid.haml

@@ -0,0 +1,125 @@
+---
+tags: ['agenticqa']
+title: Tables - Grid
+---
+
+.table-grid.table-rowgroups{style:"grid-template-columns: repeat(2, auto) repeat(2, minmax(12rem, 1fr)) repeat(5, auto);"}
+  .thead
+    .tr
+      .th
+        .form-check.sm
+          %input#check1sm{type:'checkbox'}
+      .th status
+      .th title
+      .th urls
+      .th check suite
+      .th results
+      .th executions
+      .th executed
+      .th
+  .tbody
+    .tr
+      .btn.btn-sm.btn-block.btn-subtile.mb-xxs.col-span-9{style:""}
+        .icon.icon-plus.mr-icon-spacing
+        Add new check
+    .tr
+      .td.checkbox-column
+        .form-check.sm
+          %input#check1sm{type:'checkbox'}
+      .td status
+      .td
+        %a.white.font-normal{href:"#"} Short Title with a bit of Lorem ipsum
+      .td
+        %details.url-collapsable
+          %summary
+            %p https://url.com
+            .trigger
+              .text-closed Show 3 more
+              .text-open Show less
+          %p https://url.com/1
+          %p https://url.com/2
+          %p https://url.com/3
+      .td
+        %a.white.font-normal{href:"#"} Check suite title
+      .td
+        .flex.flex-row
+          .text-with-icon.mr-sm
+            .icon.icon-check-circle-filled.text-success
+            999
+          .text-with-icon.mr-sm
+            .icon.icon-cross-circle-filled.text-danger
+            999
+          .text-with-icon
+            .icon.icon-blocked.text-blocked
+            999
+      .td 6
+      .td 13h ago
+      .td.action-column
+        %a.btn.btn-square{href:'#'}
+          .icon.icon-pencil
+        %details.dropdown-actions.dropright
+          %summary
+            .btn.btn-square
+              .icon.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
+    .tr
+      .td.checkbox-column
+        .form-check.sm
+          %input#check1sm{type:'checkbox'}
+      .td status
+      .td
+        %a.white.font-normal{href:"#"} Title with a lot of 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.
+      .td
+        %details.url-collapsable
+          %summary
+            %p https://example.url/with-long/text/sets/long-format/experimental/phase-2/results/compiled/overview/report-final
+            .trigger
+              .text-closed Show 6 more
+              .text-open Show less
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/1
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/2wordforbreaking
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/3
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/4
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/5
+          %p https://example.url/with-long/text/data/sets/long-format/experimental/6
+      .td
+        %a.white.font-normal{href:"#"} Check suite title
+      .td
+        .flex.flex-row
+          .text-with-icon.mr-sm
+            .icon.icon-check-circle-filled.text-success
+            999
+          .text-with-icon.mr-sm
+            .icon.icon-cross-circle-filled.text-danger
+            999
+          .text-with-icon
+            .icon.icon-blocked.text-blocked
+            999
+      .td 6
+      .td 13h ago
+      .td.action-column
+        %a.btn.btn-square{href:'#'}
+          .icon.icon-pencil
+        %details.dropdown-actions.dropright
+          %summary
+            .btn.btn-square
+              .icon.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

package/src/pages/agenticqa/url_collapsable.haml

@@ -0,0 +1,17 @@
+---
+tags: ['agenticqa']
+title: URL collapsable
+---
+
+%details.url-collapsable
+  %summary
+    %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/phase-2/results/compiled/overview/report-final
+    .trigger
+      .text-closed Show 6 more
+      .text-open Show less
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/1
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/2wordforbreaking
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/3
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/4
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/5
+  %p https://example.invalid/nebula-saffron/research/data/sets/long-format/experimental/6

package/src/pages/components/drawer_filter.haml

@@ -34,7 +34,7 @@ title: Drawer for filtering
             %input#check_drawer4{type:'checkbox'}
             %label{for:'check_drawer4'}
               %span.icon.icon-low.mr-icon-spacing
-              Checkbox label
+              Checkbox label with a lot of lorem ipsum to break into several lines and check if the layout still looks good
           .form-check.sm.inverted
             %input#check_drawer5{type:'checkbox'}
             %label{for:'check_drawer5'}

package/src/pages/components/modal_details.haml

@@ -26,8 +26,8 @@ title: Modal - based on details tag
       .modal-footer
         %a.btn.btn-primary{href:''} Primary
         %a.btn.btn-secondary{href:''} Secondary
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-success{href:''} Yes
+        %a.btn.btn-danger{href:''} No
         %a.btn.btn-primary.disabled{href:''} Disabled
         %a.btn.btn-secondary.close-btn{href:''} Close
 %details.modal-wrapper.mb-md
@@ -48,8 +48,8 @@ title: Modal - based on details tag
       .modal-footer
         %a.btn.btn-primary{href:''} Primary
         %a.btn.btn-secondary{href:''} Secondary
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-success{href:''} Yes
+        %a.btn.btn-danger{href:''} No
         %a.btn.btn-primary.disabled{href:''} Disabled
         %a.btn.btn-secondary.close-btn{href:''} Close
 %details.modal-wrapper
@@ -64,8 +64,8 @@ title: Modal - based on details tag
       .modal-content
         %p.mb-xs Some cool modal content going on here: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
       .modal-footer
-        %a.btn.btn-success{href:''} Success
-        %a.btn.btn-danger{href:''} Danger
+        %a.btn.btn-success{href:''} Yes
+        %a.btn.btn-danger{href:''} No
         %a.btn.btn-secondary.close-btn{href:''} Close
 %p.mb-heading.mt-md
   If you want a modal that doesn't close automatically when clicking on the fade background, then add the class  
@@ -89,6 +89,6 @@ title: Modal - based on details tag
             %label.form-label Input
             %input.form-control{type:'text', placeholder:''}
       .modal-footer
-        %a.btn.btn-primary{href:''} Primary
-        %a.btn.btn-secondary{href:''} Secondary
+        %a.btn.btn-primary{href:''} Yes
+        %a.btn.btn-secondary{href:''} No
         %a.btn.btn-secondary.close-btn{href:''} Close

package/src/pages/forms/radiobuttons.haml

@@ -20,19 +20,32 @@ title: Radiobuttons
 .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
+      %input#radio11{type:'radio', name:'radio-group', value:'1'}
+    %label{for:'radio11'} Option in error state
   .form-radio
     .field_with_errors
-      %input#radio2{type:'radio', name:'radio-group', value:'2'}
-    %label{for:'radio2'} Option 2
+      %input#radio12{type:'radio', name:'radio-group', value:'2'}
+    %label{for:'radio12'} Option 2
   .form-radio.disabled
     .field_with_errors
-      %input#radio4{type:'radio', name:'radio-group', value:'4', disabled:'true'}
-    %label{for:'radio4'} Disabled
+      %input#radio14{type:'radio', name:'radio-group', value:'4', disabled:'true'}
+    %label{for:'radio14'} 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.mb-3
+  .form-radio.sm
+    %input#radio1sm{type:'radio', checked:'true', name:'radio-groupsm', value:'1'}
+    %label{for:'radio1sm'} SM Option 1
+  .form-radio.sm
+    %input#radio2sm{type:'radio', name:'radio-groupsm', value:'2'}
+    %label{for:'radio2sm'} SM Option 2
+  .form-radio.sm
+    %input#radio3sm{type:'radio', name:'radio-groupsm', value:'3'}
+    %label{for:'radio3sm'} SM Option 3
+  .form-radio.disabled.sm
+    %input#radio4sm{type:'radio', name:'radio-groupsm', value:'4', disabled:'true'}
+    %label{for:'radio4sm'} Disabled
 
 
 .form-grid.single.narrow.bg-black.p-3
@@ -48,3 +61,16 @@ title: Radiobuttons
   .form-radio.inverted.disabled
     %input#radio9{type:'radio', name:'radio-group2', value:'4', disabled:'true'}
     %label{for:'radio9'} Disabled
+  .p-xs
+  .form-radio.inverted.sm
+    %input#radio6sm{type:'radio', checked:'true', name:'radio-group2sm', value:'1'}
+    %label{for:'radio6sm'} SM Option 1
+  .form-radio.inverted.sm
+    %input#radio7sm{type:'radio', name:'radio-group2sm', value:'2'}
+    %label{for:'radio7sm'} SM Option 2
+  .form-radio.inverted.sm
+    %input#radio8sm{type:'radio', name:'radio-group2sm', value:'3'}
+    %label{for:'radio8sm'} SM Option 3
+  .form-radio.inverted.disabled.sm
+    %input#radio9sm{type:'radio', name:'radio-group2sm', value:'4', disabled:'true'}
+    %label{for:'radio9sm'} SM Disabled

package/src/pages/forms/uploads.pug

@@ -17,7 +17,7 @@ title: Uploads and attachments
     |  });
 
 .form-grid-single
-  form.form-group.dropzone(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
+  form.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
@@ -65,7 +65,7 @@ title: Uploads and attachments
 
 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")
+  form.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
@@ -74,7 +74,7 @@ p.mt-3 Form errors example
 
 .bg-black.p-md.mt-3
   .form-grid-single
-    form.form-group.inverted(action="/file-upload" class="dropzone" id="my-awesome-dropzone-inverted")
+    form.dropzone.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