testio-tailwind 3.10.0 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.10.0",
+	"version": "3.12.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/assets/stylesheets/app.css

@@ -93,4 +93,5 @@
 /*//// Agentic QA components ////*/
 @import './components/agenticqa/agenticqa_header.css' layer(components);
 @import './components/agenticqa/agenticqa_sidebar.css' layer(components);
-@import './components/agenticqa/agenticqa_pageheader.css' layer(components);
+@import './components/agenticqa/agenticqa_pageheader.css' layer(components);
+@import './components/agenticqa/agenticqa_status_stepper.css' layer(components);

package/src/assets/stylesheets/components/agenticqa/agenticqa_pageheader.css

@@ -4,11 +4,11 @@
 }
 
 .page-header .page-maincard {
-  @apply md:col-span-2 lg:col-span-3 xl:col-span-4;
+  @apply sm:col-span-2 md:col-span-2 lg:col-span-3 xl:col-span-4;
 }
 
 .page-header.with-chart .page-maincard {
-  @apply md:col-span-1 lg:col-span-2 xl:col-span-3;
+  @apply sm:col-span-1 md:col-span-1 lg:col-span-2 xl:col-span-3;
 } 
 
 .page-header.with-chart .page-actions {
@@ -40,7 +40,7 @@
 }
 
 .page-actions {
-  @apply flex flex-row md:flex-col h-full;
+  @apply flex flex-row md:flex-col h-full sm:col-span-2 md:col-span-1;
 }
 
 .page-actions .btn {

package/src/assets/stylesheets/components/agenticqa/agenticqa_status_stepper.css

@@ -0,0 +1,20 @@
+
+.status-stepper {
+  @apply flex flex-row items-stretch justify-stretch w-full;
+}
+
+.status-stepper .status-step {
+  @apply flex flex-row justify-center items-center shrink-0 mr-xs last:mr-0 px-md py-xs grow-0 rounded text-label-color leading-none bg-black;
+}
+
+.status-stepper .status-step.active {
+  @apply grow-1 text-white bg-gray-750;
+}
+
+.status-step .icon {
+  @apply mr-xs text-label-color;
+}
+
+.status-step .counter {
+  @apply pr-xs text-lg font-bold text-label-color leading-none;
+}

package/src/assets/stylesheets/components/list_item.css

@@ -86,7 +86,7 @@ a.listitem:hover {
 
 
 .listitem-badge {
-  @apply flex justify-center items-start w-btn p-xxs pt-xs text-white dark:font-bold dark:text-heading-5 dark:leading-none bg-black dark:bg-gray-750 rounded-l;
+  @apply flex justify-center items-center w-btn px-xxs py-xxs text-white dark:font-bold dark:text-heading-5 dark:leading-none bg-black dark:bg-gray-750 rounded-l;
   grid-area: badge;
 }
 

package/src/assets/stylesheets/components/splitview.css

@@ -390,6 +390,18 @@ body:not(.dark) .splitview-item.selected {
   @apply rounded-br-none;
 }
 
+.splitview-group-status {
+  @apply pl-lg pr-md py-xs bg-listitem border-b border-appbody;
+}
+
+.splitview-btn {
+  @apply w-full justify-center text-label text-label-color;
+}
+
+.splitview-group .splitview-btn {
+  @apply bg-listitem rounded-t-none rounded-b;
+}
+
 /*///// Grid split /////*/
 
 .grid-splitview {

package/src/assets/stylesheets/components/tables.css

@@ -2,13 +2,20 @@
 .table {
   @apply w-full mb-spacing;
 
-  th,
+  th {
+    @apply py-xs dark:py-md px-sm align-middle border-t border-bordercolor dark:border-0 dark:bg-appbody dark:text-base dark:uppercase;
+  }
+
   td {
-    @apply py-xs px-sm align-middle border-t border-bordercolor;
+    @apply py-xs dark:py-md px-sm align-middle border-t border-bordercolor dark:border-0 dark:bg-black;
+  }
+
+  tr {
+    @apply dark:border-b-4 dark:border-appbody;
   }
 
   thead th {
-    @apply text-left align-bottom border-b border-bordercolor;
+    @apply text-left align-bottom border-b border-bordercolor dark:text-base;
   }
 
   tbody + tbody {
@@ -17,17 +24,17 @@
 }
 
 .table-bordered {
-  @apply border border-bordercolor;
+  @apply border dark:border-2 border-bordercolor dark:border-appbody;
 
   th,
   td {
-    @apply border border-bordercolor;
+    @apply border dark:border-0 border-bordercolor dark:border-appbody;
   }
 
   thead {
     th,
     td {
-      @apply border-b border-bordercolor;
+      @apply border-b border-bordercolor dark:border-appbody;
     }
   }
 }
@@ -67,7 +74,7 @@
 
 .table th,
 .table thead th {
-  @apply py-xxs text-label font-semibold border-b border-bordercolor;
+  @apply py-xxs dark:py-md text-label font-semibold border-b border-bordercolor dark:text-base dark:font-normal dark:leading-5;
 }
 
 .table tr:first-child td,
@@ -113,6 +120,10 @@
   @apply w-full;
 }
 
+.table-standard tbody {
+  @apply border-0;
+}
+
 .table-standard th, .table-standard td {
   @apply text-left w-0 md:whitespace-nowrap last:w-auto align-top;
 }
@@ -126,11 +137,11 @@
 }
 
 .table-standard tr {
-  @apply border-t first:border-0;
+  @apply border-t first:border-0 dark:border-t-0;
 }
 
 .table-standard tfoot {
-  @apply border-t;
+  @apply border-t dark:border-bordercolor;
 }
 
 .table-standard tfoot.sum {
@@ -164,7 +175,7 @@ td.action-cell,
 }
 
 .table-cellstyle th {
-  @apply relative align-middle pl-2.5 pr-0.5 py-1 text-sm font-normal;
+  @apply relative align-middle pl-2.5 pr-0.5 py-1 text-sm font-normal dark:text-base dark:uppercase;
 }
 
 .table-cellstyle th.missing,
@@ -223,7 +234,7 @@ td.action-cell,
 }
 
 .table-cellstyle td.inprogress {
-  @apply pr-9 italic bg-gray-200;
+  @apply pr-9 italic bg-gray-200 dark:bg-gray-800;
 }
 
 .table-cellstyle td.inprogress::after {

package/src/pages/agenticqa/splitview_items.haml

@@ -0,0 +1,63 @@
+---
+tags: agenticqa
+title: Splitview items
+---
+
+.card.p-card-padding
+  %nav.nav-tabs
+    .navlink.active{href:""} 11 Pages
+    .navlink{href:""} 6 Checks
+  %details.splitview-group
+    %summary.splitview-item.unread
+      .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
+      .splitview-item-text
+        .splitview-item-title https://www.bando.com/collections/writing-supplies/products/retro-pen-set
+      .splitview-item-status
+        .text-with-icon
+          .icon.icon-sync
+          executing checks
+    .splitview-group-status.status-stepper
+      .status-step.completed
+        .icon.icon-check-thick-centered
+        3 done
+      .status-step.active
+        .icon.icon-sync
+        Executing checks
+      .status-step
+        + 3 to do
+    .splitview-item.selected
+      .splitview-item-icon.icon.icon-cross-circle-filled.danger
+      .splitview-item-text Check title
+    .splitview-item.unread
+      .splitview-item-icon.icon.icon-check-circle-filled.success
+      .splitview-item-text Check title with an endless amount of really long lorem ipsum
+    .splitview-item.unread
+      .splitview-item-icon.icon.icon-blocked.blocked
+      .splitview-item-text Check title with a lot of lorem ipsum
+    .splitview-item.unread
+      .splitview-item-icon.icon.icon-sync.pending
+      .splitview-item-text Check title with a lot of lorem ipsum
+  %details.splitview-group
+    %summary.splitview-item
+      .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
+      .splitview-item-text
+        .splitview-item-title https://url.com
+    .splitview-group-status.status-stepper
+      .status-step.active
+        Pending start
+      .status-step
+        + 6 to do
+    %turbo-frame.turbo-wrapper
+      %a.splitview-item
+        .splitview-item-icon.icon.icon-check-circle-filled.success
+        .splitview-item-text Navigation Menu Hover
+    %turbo-frame.turbo-wrapper
+      %a.splitview-item
+        .splitview-item-icon.icon.icon-cross-circle-filled.danger
+        .splitview-item-text No Results Message
+    %turbo-frame.turbo-wrapper
+      %a.splitview-item
+        .splitview-item-icon.icon.icon-check-circle-filled.success
+        .splitview-item-text Main Product Image
+    %btn.btn.splitview-btn Show 99 dismissed checks
+  %btn.btn.splitview-btn Show 99 dismissed pages

package/src/pages/agenticqa/status_stepper.haml

@@ -0,0 +1,25 @@
+---
+tags: agenticqa
+title: Status stepper
+---
+
+.status-stepper
+  .status-step.completed
+    .icon.icon-check-thick-centered
+    3 done
+  .status-step.active
+    .icon.icon-sync
+    Executing checks
+  .status-step
+    + 3 to do
+.py-md
+.status-stepper
+  .status-step.completed
+    .counter 99
+    Completed
+  .status-step.active
+    .counter 99
+    Active
+  .status-step
+    .counter 99
+    Initial

package/src/pages/components/tables-cellstyle.pug

@@ -38,7 +38,7 @@ title: Tables - Cell style
           td Key
           td.wrap
             | Add 
-            code.bg-gray-200 .wrap
+            code.bg-tag .wrap
             | to allow line breaks within a cell.
             | 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.missing Missing
@@ -208,7 +208,7 @@ title: Tables - Cell style
             .cell-content-editable
               p
                 | Add 
-                code.bg-gray-200 .wrap
+                code.bg-tag .wrap
                 |  to allow line breaks within a cell.
                 | 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.missing.cell-editable.wrap

package/src/pages/components/tables-grid.pug

@@ -5,9 +5,9 @@ title: Tables - Grid
 
 .space-y-5
   p
-    | You need to set inline styles with the number of columns: <code class="bg-gray-200">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
+    | You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
     <br>
-    | Example: <code class="bg-gray-200">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
+    | Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
   .overflow-x-auto
     table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")
       thead
@@ -50,7 +50,7 @@ title: Tables - Grid
         tr
           td.pre
             | Add 
-            code.bg-gray-200 .pre
+            code.bg-tag .pre
             |  to show preformatted white space.
             | Multi 
             | Line 
@@ -65,9 +65,9 @@ title: Tables - Grid
 
   h2.pt-5 Table cellstyle, grid, with checkboxes
   p
-    | You need to set inline styles with the number of columns: <code class="bg-gray-200">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
+    | You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
     <br>
-    | Example: <code class="bg-gray-200">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
+    | Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
   .overflow-x-auto
     table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")
       thead
@@ -151,9 +151,9 @@ title: Tables - Grid
 
   h2.pt-5 Table cellstyle, grid, with editable cells
   p
-    | You need to set inline styles with the number of columns: <code class="bg-gray-200">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
+    | You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
     <br>
-    | Example: <code class="bg-gray-200">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
+    | Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
 
   .overflow-x-auto
     table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")

package/src/pages/components/tables_cells.pug

@@ -5,7 +5,7 @@ title: Table cells
 
 p.mb-heading
   | Using the class 
-  code.bg-gray-lighter.mx-xxs table-standard
+  code.bg-tag.mx-xxs table-standard
   | enables more table cell behaviors.
 
 .space-y-10
@@ -26,18 +26,18 @@ p.mb-heading
       tr
         td.cell-full-width
           | Add 
-          code.bg-gray-200 .cell-full-width
+          code.bg-tag .cell-full-width
           |  to let a cell take all the available space.
         td.wrap.min-w-12
           | Add 
-          code.bg-gray-200 .wrap
+          code.bg-tag .wrap
           |  to allow line breaks within a cell. 
         td Another cell content
         td € 40.00
       tr
         td.cell-full-width.pre
           | Add 
-          code.bg-gray-200 .pre
+          code.bg-tag .pre
           |  to show preformatted white space.
           | Multi 
           | Line 
@@ -45,7 +45,7 @@ p.mb-heading
           | Cat and dog
         td.wrap.min-w-spacing-2xl
           | Wrapping cells need a 
-          code.bg-gray-200 .min-w
+          code.bg-tag .min-w
           |  rule to not be squished. 
         td Another cell content
         td € 999.00