testio-tailwind 3.9.1 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.9.1",
+	"version": "3.11.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,19 +40,20 @@
 }
 
 .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 lg:h-btn-xl;
+  @apply h-auto md:h-btn-xl;
 }
 
 .page-actions .btn-main .icon,

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/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/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/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

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