testio-tailwind 3.9.0 → 3.10.0

package/package.json

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

package/src/_includes/header.njk

@@ -61,8 +61,7 @@
   </details>
 
   <div class="navlinks right">
-    <button onclick="(() => document.body.classList.toggle('dark'))()"
-          class="navlink">
+    <button onclick="(() => document.body.classList.toggle('dark'))()" class="navlink">
           <svg class="w-icon h-icon fill-purple hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
               <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
           </svg>

package/src/_includes/page-with-sidebar-dark.njk

@@ -9,6 +9,12 @@
 </nav>
 
 <main tabindex="-1" id="main-content" class="main-content main-content-padding">
+  <section class="mb-section-margin">
+    <h1 class="mb-heading">Agentic QA</h1>
+    <p class="mb-heading">The Agentic QA / Testinator components shold always be used with the dark theme.</p>
+    <h5 class="mb-xs">Example layouts:</h5>
+    <a class="btn btn-primary" href="/pages/examples/agenticqa_splitview/">Show splitview layout</a>
+  </section>
   <article class="">
 
     {% for item in navigation.items %}
@@ -44,5 +50,14 @@
   </article>
 </main>
 
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    var appBody = document.querySelector('.app-body');
+    if (appBody) {
+      appBody.classList.add('dark');
+    }
+  });
+</script>
+
 
 

package/src/assets/scripts/app.js

@@ -131,26 +131,76 @@ import { createChartLine } from './modules/echarts_line';
 
 import { echartsSeriesFew, echartsSeriesMany } from './modules/echarts_exampleseries';
 
-import { dataFeaturesFew, dataFeaturesMany, dataBugs, dataBugsFew, dataBugsCategories, dataBugsCategoriesFew, dataTestCases, dataGaugeSuccess, dataGaugeDanger, dataGaugeInfo, dataAreaValues, dataAreaMonths, dataFeaturesManyNumbers } from './modules/echarts_exampledata';
-
-createChartVertical("echarts-bar-vertical-1", dataBugs, dataBugsCategories, colorLabelBright, colorValueBright);
-createChartVertical("echarts-bar-vertical-1-dark", dataBugs, dataBugsCategories, colorLabelDark, colorValueDark);
-createChartVertical("echarts-bar-vertical-2", dataBugsFew, dataBugsCategoriesFew, colorLabelBright, colorValueBright);
-createChartVertical("echarts-bar-vertical-3", dataFeaturesManyNumbers, dataFeaturesMany, colorLabelBright, colorValueBright);
-createChartVertical("echarts-bar-vertical-2-fixed", dataBugsFew, dataBugsCategoriesFew, colorLabelBright, colorValueBright, 10);
-createChartVertical("echarts-bar-vertical-3-fixed", dataFeaturesManyNumbers, dataFeaturesMany, colorLabelBright, colorValueBright,10);
-createChartHorizontal("echarts-bar-horizontal-1", dataFeaturesFew, echartsSeriesFew, false, colorLabelBright, colorValueBright);
-createChartHorizontal("echarts-bar-horizontal-2", dataFeaturesMany, echartsSeriesMany, true, colorLabelBright, colorValueBright);
-createChartHorizontal("echarts-bar-horizontal-2-dark", dataFeaturesMany, echartsSeriesMany, true, colorLabelDark, colorValueDark);
-createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false,  colorLabelBright, colorValueBright);
-createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelBright, colorValueBright);
-createChartDonut("echarts-donut-2-dark", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelDark, colorValueDark);
-createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false,  colorLabelBright, colorValueBright);
-createChartGauge("echarts-gauge-1", dataGaugeSuccess, colorLabelBright, colorValueBright, colorNeutralBright);
-createChartGauge("echarts-gauge-1-dark", dataGaugeSuccess, colorLabelDark, colorValueDark, colorNeutralDark);
-createChartGauge("echarts-gauge-2", dataGaugeDanger, colorLabelBright, colorValueBright, colorNeutralBright);
-createChartGauge("echarts-gauge-3", dataGaugeInfo, colorLabelBright, colorValueBright, colorNeutralBright);
-createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
-createChartArea("echarts-area-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
-createChartLine("echarts-line-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
-createChartLine("echarts-line-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
+import { dataFeaturesFew, dataFeaturesMany, dataBugs, dataBugsFew, dataBugsCategories, dataBugsCategoriesFew, dataTestCases, dataGaugeSuccess, dataGaugeDanger, dataGaugeInfo, dataAreaValues, dataAreaMonths, dataFeaturesManyNumbers, dataTestinator, dataTestinatorEmpty } from './modules/echarts_exampledata';
+
+if (document.getElementById("echarts-bar-vertical-1")) {
+  createChartVertical("echarts-bar-vertical-1", dataBugs, dataBugsCategories, colorLabelBright, colorValueBright);
+}
+if (document.getElementById("echarts-bar-vertical-1-dark")) {
+  createChartVertical("echarts-bar-vertical-1-dark", dataBugs, dataBugsCategories, colorLabelDark, colorValueDark);
+}
+if (document.getElementById("echarts-bar-vertical-2")) {
+  createChartVertical("echarts-bar-vertical-2", dataBugsFew, dataBugsCategoriesFew, colorLabelBright, colorValueBright);
+}
+if (document.getElementById("echarts-bar-vertical-3")) {
+  createChartVertical("echarts-bar-vertical-3", dataFeaturesManyNumbers, dataFeaturesMany, colorLabelBright, colorValueBright);
+}
+if (document.getElementById("echarts-bar-vertical-2-fixed")) {
+  createChartVertical("echarts-bar-vertical-2-fixed", dataBugsFew, dataBugsCategoriesFew, colorLabelBright, colorValueBright, 10);
+}
+if (document.getElementById("echarts-bar-vertical-3-fixed")) {
+  createChartVertical("echarts-bar-vertical-3-fixed", dataFeaturesManyNumbers, dataFeaturesMany, colorLabelBright, colorValueBright, 10);
+}
+if (document.getElementById("echarts-bar-horizontal-1")) {
+  createChartHorizontal("echarts-bar-horizontal-1", dataFeaturesFew, echartsSeriesFew, false, colorLabelBright, colorValueBright);
+}
+if (document.getElementById("echarts-bar-horizontal-2")) {
+  createChartHorizontal("echarts-bar-horizontal-2", dataFeaturesMany, echartsSeriesMany, true, colorLabelBright, colorValueBright);
+}
+if (document.getElementById("echarts-bar-horizontal-2-dark")) {
+  createChartHorizontal("echarts-bar-horizontal-2-dark", dataFeaturesMany, echartsSeriesMany, true, colorLabelDark, colorValueDark);
+}
+if (document.getElementById("echarts-donut-1")) {
+  createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false, colorLabelBright, colorValueBright);
+}
+if (document.getElementById("echarts-donut-2")) {
+  createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelBright, colorValueBright);
+}
+if (document.getElementById("echarts-donut-2-dark")) {
+  createChartDonut("echarts-donut-2-dark", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelDark, colorValueDark);
+}
+if (document.getElementById("echarts-donut-testcases")) {
+  createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false, colorLabelBright, colorValueBright);
+}
+if (document.getElementById("echarts-gauge-1")) {
+  createChartGauge("echarts-gauge-1", dataGaugeSuccess, colorLabelBright, colorValueBright, colorNeutralBright);
+}
+if (document.getElementById("echarts-gauge-1-dark")) {
+  createChartGauge("echarts-gauge-1-dark", dataGaugeSuccess, colorLabelDark, colorValueDark, colorNeutralDark);
+}
+if (document.getElementById("echarts-gauge-2")) {
+  createChartGauge("echarts-gauge-2", dataGaugeDanger, colorLabelBright, colorValueBright, colorNeutralBright);
+}
+if (document.getElementById("echarts-gauge-3")) {
+  createChartGauge("echarts-gauge-3", dataGaugeInfo, colorLabelBright, colorValueBright, colorNeutralBright);
+}
+if (document.getElementById("echarts-area-1")) {
+  createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
+}
+if (document.getElementById("echarts-area-2")) {
+  createChartArea("echarts-area-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
+}
+if (document.getElementById("echarts-line-1")) {
+  createChartLine("echarts-line-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
+}
+if (document.getElementById("echarts-line-2")) {
+  createChartLine("echarts-line-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
+}
+
+if (document.getElementById("echarts-testinator")) {
+  createChartDonut("echarts-testinator", dataTestinator, "100", "Total check executions", true,  colorLabelDark, colorValueDark);
+}
+
+if (document.getElementById("echarts-testinator-empty")) {
+  createChartDonut("echarts-testinator-empty", dataTestinatorEmpty, "100", "Total check executions", true,  colorLabelDark, colorValueDark);
+}

package/src/assets/scripts/modules/colors.js

@@ -7,13 +7,16 @@ export const colorUX = '#263340';
 export const colorSuccess = '#8cbd24';
 export const colorDanger = '#FF3131';
 export const colorNeutralBright = '#bfc1c5';
-export const colorNeutralDark = '#343A40';
 export const colorInfo = '#326dd1';
 export const colorBlueLight = '#21bef4';
 export const colorBorderBright = '#e6e6e6';
-export const colorBorderDark = '#262626';
 export const colorLabelBright = '#5f656d';
-export const colorLabelDark = '#bfc1c5';
 export const colorValueBright = '#1d1d1d';
-export const colorValueDark = '#ffffff';
 export const colorTealLight = '#6ddeba';
+export const colorValueDark = '#ffffff';
+export const colorLabelDark = '#888888';
+export const colorNeutralDark = '#2E2E2E';
+export const colorSuccessDark = '#33BA9E';
+export const colorDangerDark = '#FF3131';
+export const colorBlockedDark = '#F48D21';
+export const colorBorderDark = '#2E2E2E';

package/src/assets/scripts/modules/echarts_exampledata.js

@@ -1,4 +1,6 @@
-import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutralBright } from './colors';
+import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutralBright
+, colorSuccessDark, colorDangerDark, colorBlockedDark, colorNeutralDark
+ } from './colors';
 
 export let dataAreaValues = [
   { value: 79, name: 'Critical'},
@@ -103,4 +105,15 @@ export let dataTestCases = [
   { value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
   { value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
   { value: 27, name: 'Open', itemStyle: {color: colorNeutralBright}},
+];
+
+export let dataTestinator = [
+  { value: 20, name: 'Failed', itemStyle: {color: colorDangerDark}},
+  { value: 20, name: 'Blocked', itemStyle: {color: colorBlockedDark}},
+  { value: 30, name: 'Passed', itemStyle: {color: colorSuccessDark}},
+  { value: 30, name: 'Open', itemStyle: {color: colorNeutralDark}},
+];
+
+export let dataTestinatorEmpty = [
+  { value: 100, name: 'Open', itemStyle: {color: colorNeutralDark}},
 ];

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

@@ -1,10 +1,18 @@
 
 .page-header {
-  @apply grid lg:grid-cols-5 gap-xs lg:gap-grid-gutter mb-grid-gutter;
+  @apply grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-md xl:gap-grid-gutter mb-grid-gutter;
 }
 
 .page-header .page-maincard {
-  @apply lg:col-span-4;
+  @apply 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;
+} 
+
+.page-header.with-chart .page-actions {
+  @apply sm:col-span-2 md:col-span-1;
 }
 
 .page-session-title {
@@ -32,17 +40,23 @@
 }
 
 .page-actions {
-  @apply flex flex-row lg:flex-col h-full;
+  @apply flex flex-row md:flex-col h-full;
 }
 
 .page-actions .btn {
-  @apply justify-center text-center ml-xxs first:ml-0 mr-xxs last:mr-0 lg:mx-0 lg:mb-xs lg:last:mb-0 w-full border-bordercolor;
+  @apply justify-center w-full text-center ml-xxs first:ml-0 mr-xxs last:mr-0 border-bordercolor
+  md:mx-0 md:mb-xs md:last:mb-0;
 }
 
 .page-actions .btn-main {
-  @apply flex-grow lg:flex-col;
+  @apply flex-grow md:flex-col;
+}
+
+.page-actions .btn-xl {
+  @apply h-auto md:h-btn-xl;
 }
 
-.page-actions .btn-main .icon {
+.page-actions .btn-main .icon,
+.page-actions .btn-xl .icon {
   @apply hidden lg:block lg:mb-sm lg:h-icon-xl lg:text-icon-xl;
 }

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

@@ -1,5 +1,5 @@
 .form-group {
-  @apply relative grid grid-cols-1 md:grid-cols-1-3 md:gap-xs md:gap-grid-gutter;
+  @apply relative grid grid-cols-1 md:grid-cols-1-3 md:gap-xs lg:gap-grid-gutter;
 }
 
 .form-label {

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

@@ -393,7 +393,7 @@ body:not(.dark) .splitview-item.selected {
 /*///// Grid split /////*/
 
 .grid-splitview {
-  @apply grid md:grid-cols-2 lg:grid-cols-5 gap-grid-gutter;
+  @apply grid md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-md xl:gap-grid-gutter;
   grid-template-areas: "splitview-list"
                        "splitview-details";
 
@@ -408,5 +408,5 @@ body:not(.dark) .splitview-item.selected {
 }
 
 .grid-splitview .splitview-details {
-  @apply block lg:col-span-3 h-auto min-h-auto overflow-y-visible;
+  @apply block lg:col-span-2 xl:col-span-3 h-auto min-h-auto overflow-y-visible;
 }

package/src/assets/stylesheets/tailwind_config.css

@@ -304,7 +304,9 @@
 
   /*//// Breakpoints ////*/
   --breakpoint-xs: 30rem;
-  --breakpoint-2xl: 1600px;
+  --breakpoint-lg: 70rem;
+  --breakpoint-xl: 90rem;
+  --breakpoint-2xl: 100rem;
   --breakpoint-3xl: 1930px;
 }
 

package/src/pages/agenticqa/pageheader.haml

@@ -49,7 +49,7 @@ title: Pageheader
     %a.btn.btn-primary.btn-main{href:""}
       %span.icon.icon-test-running-xl
       Start test
-.page-header
+.page-header.with-chart
   .card.page-maincard.p-card-padding
     %h1.text-card-header Session details
     %h2.page-session-title Test Session title
@@ -65,13 +65,15 @@ title: Pageheader
         %a.label{href:""} Test Suite name
       %dt.label Status:
       %dd.text-white Status
+  .page-chart.card.p-card-padding
+    .echarts-container#echarts-testinator
   .page-actions
     %a.btn.btn-primary.btn-main{href:""}
       %span.icon.icon-review-xl
       Show report
     %a.btn.btn-secondary{href:""}
       Re-run all checks
-.page-header
+.page-header.with-chart
   .card.page-maincard.p-card-padding
     %h1.text-card-header Session details
     %h2.page-session-title Test Session title
@@ -87,6 +89,8 @@ title: Pageheader
         %a.label{href:""} Test Suite name
       %dt.label Status:
       %dd.text-white Status
+  .page-chart.card.p-card-padding
+    .echarts-container#echarts-testinator-empty
   .page-actions
     %a.btn.btn-secondary.btn-main.disabled{href:""}
       %span.icon.icon-review-xl

package/src/pages/examples/{agenticqa.haml → agenticqa_splitview.haml}

@@ -1,12 +1,12 @@
 ---
 layout: page-example-agenticqa.njk
-title: "Agentic QA"
+title: "Agentic QA - Splitview"
 tags: "examples"
 ---
 
 %main.main-content.centered#ds-splitview-demo
   .centered-content
-    .page-header
+    .page-header.with-chart
       .card.page-maincard.p-card-padding
         %h1.text-card-header Session details
         %h2.page-session-title Test Session title
@@ -17,11 +17,13 @@ tags: "examples"
           %dd 2025-07-23 19:11 10:45 AM
           %dt.label ID:
           %dd 321456987
-          %dt.label URL:
+          %dt.label Test Suite:
           %dd.row-testsuite
             %a.label{href:""} Test Suite name
           %dt.label Status:
           %dd.text-white Status
+      .page-chart.card.p-card-padding
+        .echarts-container#echarts-testinator
       .page-actions
         %a.btn.btn-primary.btn-main{href:""}
           %span.icon.icon-review-xl