testio-tailwind 3.2.0 → 3.4.0

package/src/pages/charts/colors.haml

@@ -0,0 +1,28 @@
+---
+tags: charts
+title: Colors JS
+---
+
+.card
+  .card-body
+    %pre.code.break-spaces
+      :plain
+        export const colorCritical = '#FF3131';
+        export const colorHigh = '#d8ce0d';
+        export const colorLow = '#9fa2a8';
+        export const colorVisual = '#f48d21';
+        export const colorContent = '#326dd1';
+        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';

package/src/pages/charts/donut.haml

@@ -21,7 +21,7 @@ title: Donut chart
         %pre.code.break-spaces
           :plain
             import { createChartDonut } from './modules/echarts_donut';
-            createChartDonut (target, targetData, valueText, labelText, showLegend);
+            createChartDonut (target, targetData, valueText, labelText, showLegend, labelColor, valueColor)
       .listitem-subheadline echarts_donuts.js
       .listitem-card
         %pre.code.break-spaces
@@ -29,12 +29,26 @@ title: Donut chart
             import * as echarts from 'echarts';
             import { echartsLegend, legendHeight } from './echarts_legend';
             var legendOptions;
-            export function createChartDonut (target, targetData, valueText, labelText, showLegend) {
+            export function createChartDonut (target, targetData, valueText, labelText, showLegend, labelColor, valueColor) {
               var chartHeight = 190;
               var chartPlusLegendHeight;
               if (showLegend) {
                 chartPlusLegendHeight = chartHeight + legendHeight,
-                legendOptions = echartsLegend
+                legendOptions = {
+                  type: echartsLegend.type,
+                  orient: echartsLegend.orient,
+                  padding: echartsLegend.padding,
+                  icon: echartsLegend.icon,
+                  itemGap: echartsLegend.itemGap,
+                  itemHeight: echartsLegend.itemHeight,
+                  itemWidth: echartsLegend.itemWidth,
+                  height: echartsLegend.height,
+                  left: echartsLegend.left,
+                  bottom: echartsLegend.bottom,
+                  textStyle:{
+                  color:labelColor
+                  },
+                }
               } else {
                 chartPlusLegendHeight = chartHeight,
                 legendOptions = null
@@ -62,14 +76,16 @@ title: Donut chart
                   textStyle: {
                     fontSize: 60,
                     lineHeight: 60,
-                    fontWeight: "lighter"
+                    fontWeight: "lighter",
+                    color: valueColor
                   },
                   subtextStyle: {
                     overflow: "break",
                     width: 100,
                     top: 50,
                     fontSize: 11,
-                    lineHeight: 12
+                    lineHeight: 12,
+                    color: labelColor
                   }
                 },
                 tooltips: {
@@ -123,15 +139,15 @@ title: Donut chart
               left: 'center',
               bottom: 'bottom'
             };
-.row
-  .col-lg-6.col-xl-4
+.grid.gap-spacing{class:"lg:grid-cols-2"}
+  .col
     .card.p-md.mb-xs
-      .echarts-container#echarts-donut-1
+      .echarts-container#echarts-donut-2
     %details.listitem.mb-md
       %summary.listitem-header
         .listitem-title
           %span.icon.icon-format-code.mr-xs
-          Initialize donut chart without legend
+          Initialize donut chart with legend
         .listitem-metrics
         .listitem-actions
           .btn.collapse-btn
@@ -144,7 +160,7 @@ title: Donut chart
           %pre.code.break-spaces
             :plain
               import { createChartDonut } from './modules/echarts_donut';
-              createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false);
+              createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelBright, colorValueBright);
         .listitem-subheadline data.js
         .listitem-card
           %pre.code.break-spaces
@@ -173,9 +189,9 @@ title: Donut chart
               export const colorNeutral = '#e6e6e6';
               export const colorInfo = '#326dd1';
               export const colorBlueLight = '#21bef4';
-  .col-lg-6.col-xl-4
-    .card.p-md.mb-xs
-      .echarts-container#echarts-donut-2
+  .col
+    .card.p-md.mb-xs.bg-gray-800
+      .echarts-container#echarts-donut-2-dark
     %details.listitem.mb-md
       %summary.listitem-header
         .listitem-title
@@ -193,7 +209,56 @@ title: Donut chart
           %pre.code.break-spaces
             :plain
               import { createChartDonut } from './modules/echarts_donut';
-              createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true);
+              createChartDonut("echarts-donut-2-dark", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelDark, colorValueDark);
+        .listitem-subheadline data.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
+              export let dataBugs = [
+                { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
+                { value: 37, name: 'High', itemStyle: {color: colorHigh}},
+                { value: 19, name: 'Low', itemStyle: {color: colorLow}},
+                { value: 99, name: 'Visual', itemStyle: {color: colorVisual}},
+                { value: 53, name: 'Content', itemStyle: {color: colorContent}},
+                { value: 53, name: 'UX', itemStyle: {color: colorUX}},
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorCritical = '#FF3131';
+              export const colorHigh = '#d8ce0d';
+              export const colorLow = '#9fa2a8';
+              export const colorVisual = '#f48d21';
+              export const colorContent = '#326dd1';
+              export const colorUX = '#263340';
+              export const colorSuccess = '#8cbd24';
+              export const colorDanger = '#FF3131';
+              export const colorNeutral = '#e6e6e6';
+              export const colorInfo = '#326dd1';
+              export const colorBlueLight = '#21bef4';
+  .col
+    .card.p-md.mb-xs
+      .echarts-container#echarts-donut-1
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize donut chart without legend
+        .listitem-metrics
+        .listitem-actions
+          .btn.collapse-btn
+      .listitem-content
+        .listitem-subheadline HTML
+        .listitem-card
+          %code .echarts-container#element-id
+        .listitem-subheadline app.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              import { createChartDonut } from './modules/echarts_donut';
+              createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false,  colorLabelBright, colorValueBright);
         .listitem-subheadline data.js
         .listitem-card
           %pre.code.break-spaces
@@ -222,7 +287,7 @@ title: Donut chart
               export const colorNeutral = '#e6e6e6';
               export const colorInfo = '#326dd1';
               export const colorBlueLight = '#21bef4';
-  .col-lg-6.col-xl-4
+  .col
     .card.p-md.mb-xs
       .echarts-container#echarts-donut-testcases
     %details.listitem.mb-md
@@ -242,7 +307,7 @@ title: Donut chart
           %pre.code.break-spaces
             :plain
               import { createChartDonut } from './modules/echarts_donut';
-              createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false);
+              createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false,  colorLabelBright, colorValueBright);
         .listitem-subheadline data.js
         .listitem-card
           %pre.code.break-spaces

package/src/pages/charts/gauge.haml

@@ -95,7 +95,7 @@ title: Gauge
               }
               window.addEventListener('resize', myChartGauge.resize);
             }
-.row
+.grid.gap-spacing{class:"lg:grid-cols-3"}
   .col-lg-6.col-xl-4
     .card.p-md.mb-xs
       .echarts-container#echarts-gauge-1
@@ -135,6 +135,45 @@ title: Gauge
           %pre.code.break-spaces
             :plain
               export const colorSuccess = '#8cbd24';
+  .col-lg-6.col-xl-4
+    .card.p-md.mb-xs.bg-gray-800
+      .echarts-container#echarts-gauge-1-dark
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize success gauge
+        .listitem-metrics
+        .listitem-actions
+          .btn.collapse-btn
+      .listitem-content
+        .listitem-subheadline HTML
+        .listitem-card
+          %code .echarts-container#element-id
+        .listitem-subheadline app.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              import { createChartGauge } from './modules/echarts_gauge';
+              createChartGauge("echarts-gauge-1", dataGaugeSuccess);
+        .listitem-subheadline data.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataGaugeSuccess = [
+                {
+                  value: 89,
+                  name: 'Success',
+                  itemStyle: {
+                    color: colorSuccess
+                  }
+                },
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorSuccess = '#8cbd24';
   .col-lg-6.col-xl-4
     .card.p-md.mb-xs
       .echarts-container#echarts-gauge-2

package/src/pages/charts/legend.haml

@@ -0,0 +1,22 @@
+---
+tags: charts
+title: Legend JS
+---
+
+.card
+  .card-body
+    %pre.code.break-spaces
+      :plain
+        export const legendHeight = 30;
+        export const echartsLegend = {
+          type: 'scroll',
+          orient: 'horizontal',
+          padding: 0,
+          icon: 'circle',
+          itemGap: 10,
+          itemHeight: 5,
+          itemWidth: 5,
+          height: '20',
+          left: 'center',
+          bottom: 'bottom'
+        };

package/src/pages/charts/line.haml

@@ -0,0 +1,205 @@
+---
+tags: charts
+title: Line
+---
+
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Initialize area chart
+    .listitem-metrics
+    .listitem-actions
+      .btn.collapse-btn
+  .listitem-content
+    .listitem-subheadline HTML
+    .listitem-card
+      %code .echarts-container#element-id
+    .listitem-subheadline app.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import { createChartArea } from './modules/echarts_area';
+          createChartLine (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor)
+    .listitem-subheadline echarts_area.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import * as echarts from 'echarts';
+          export function createChartLine (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor) {
+            var chartHeight = 190;
+            var dom = document.getElementById(target);
+            var myChartLine = echarts.init(dom, null, {
+              renderer: 'canvas',
+              useDirtyRect: false,
+              height: chartHeight
+            });
+            var optionLine;
+            var optionLine = {
+              grid: {
+                show: false,
+                zlevel: 0,
+                top: 30,
+                right: 20,
+                left: 20,
+                bottom: 30
+              },
+              xAxis: {
+                boundaryGap: false,
+                zlevel: 2,
+                data: targetDataX,
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  show: true,
+                  margin: 15,
+                  color: labelColor,
+                },
+                axisTick: {
+                  show: false
+                },
+              },
+              yAxis: {
+                show: false,
+                min: 0,
+                max: targetDataY
+              },
+              series: [
+                {
+                  data: targetDataY,
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    color: chartColor,
+                    borderColor: borderColor
+                  },
+                  zlevel: 1
+                },
+                {
+                  data: targetDataY,
+                  type: 'line',
+                  lineStyle: {
+                    width: 1
+                  },
+                  symbol: 'circle',
+                  symbolSize: 10,
+                  itemStyle: {
+                    borderWidth: 2,
+                    color: chartColor,
+                    borderColor: borderColor
+                  },
+                  label: {
+                    show: true,
+                    color: valueColor,
+                  },
+                  zlevel: 3
+                }
+              ]
+            };
+            if (optionLine && typeof optionLine === 'object') {
+              myChartLine.setOption(optionLine);
+            }
+            window.addEventListener('resize', myChartLine.resize);
+          }
+.grid.gap-spacing{class:"lg:grid-cols-2"}
+  .col
+    .card.p-md.mb-xs
+      .echarts-container#echarts-line-1
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize area chart with blue light color
+        .listitem-metrics
+        .listitem-actions
+          .btn.collapse-btn
+      .listitem-content
+        .listitem-subheadline HTML
+        .listitem-card
+          %code .echarts-container#element-id
+        .listitem-subheadline app.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              import { createChartArea } from './modules/echarts_area';
+              createChartLine("echarts-line-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
+        .listitem-subheadline dataAreaMonths.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataAreaMonths = [
+                { value: 'Jun'},
+                { value: 'Jul'},
+                { value: 'Aug'},
+                { value: 'Sep'},
+                { value: 'Oct'},
+                { value: 'Nov'}
+              ];
+        .listitem-subheadline dataAreaValues.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataAreaValues = [
+                { value: 79, name: 'Critical'},
+                { value: 37, name: 'High'},
+                { value: 19, name: 'Low'},
+                { value: 99, name: 'Visual'},
+                { value: 53, name: 'Content'},
+                { value: 66, name: 'UX'}
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorBlueLight = '#21bef4';
+  .col
+    .card.p-md.mb-xs.bg-gray-800
+      .echarts-container#echarts-line-2
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize darkmode area chart
+        .listitem-metrics
+        .listitem-actions
+          .btn.collapse-btn
+      .listitem-content
+        .listitem-subheadline HTML
+        .listitem-card
+          %code .echarts-container#element-id
+        .listitem-subheadline app.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              import { createChartArea } from './modules/echarts_area';
+              createChartLine("echarts-line-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
+        .listitem-subheadline dataAreaMonths.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataAreaMonths = [
+                { value: 'Jun'},
+                { value: 'Jul'},
+                { value: 'Aug'},
+                { value: 'Sep'},
+                { value: 'Oct'},
+                { value: 'Nov'}
+              ];
+        .listitem-subheadline dataAreaValues.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export let dataAreaValues = [
+                { value: 79, name: 'Critical'},
+                { value: 37, name: 'High'},
+                { value: 19, name: 'Low'},
+                { value: 99, name: 'Visual'},
+                { value: 53, name: 'Content'},
+                { value: 66, name: 'UX'}
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorBlueLight = '#21bef4';

package/src/pages/colors.pug

@@ -68,7 +68,7 @@ main.main-content.main-content-padding
         p #5f656d
       .color-cell.bg-gray-dark
         p gray-dark
-        p #7c8188
+        p #888888
       .color-cell.bg-gray
         p gray
         p #9fa2a8
@@ -97,7 +97,7 @@ main.main-content.main-content-padding
         p #5f656d
       .color-cell.bg-gray-500
         p gray-500
-        p #7c8188
+        p #888888
       .color-cell.bg-gray-400
         p gray-400
         p #9fa2a8

package/src/pages/email-templates/{email_testinator.pug → email_agenticqa.pug}

@@ -1,15 +1,15 @@
 ---
 layout: pure.njk
-title: Testinator Email Template
-permalink: "|/email-testinator/"
-tags: testinatorEmail
+title: Agentic QA Email Template
+permalink: "|/email-agenticqa/"
+tags: agenticqaEmail
 ---
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 html(lang="en")
   head
     meta(content='text/html; charset=UTF-8', http-equiv='Content-Type')
-    title Testinator
+    title Agentic QA
     meta(content='width=device-width', name='viewport')
     meta(name='color-scheme', content="light dark")
     style(type='text/css').
@@ -279,8 +279,8 @@ html(lang="en")
           table.email-wrapper(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
             tr
               td.email-header(align='left')
-                a(target='_blank', href='http://testinator.ai')
-                  img.emailheader-logo(src='/assets/images/assets_testinator/testinator_email_header.png', alt='Logo')
+                a(target='_blank', href='http://agenticqa.ai')
+                  img.emailheader-logo(src='/assets/images/assets_agenticqa/agenticqa_email_header.png', alt='Logo')
     table(border='0', cellpadding='0', cellspacing='0', width='100%')
       tr
         td.mobile-padding
@@ -292,9 +292,9 @@ html(lang="en")
                   strong Strong subheadline with some lorem ipsum
                 p
                   | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat facilisis purus at scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tincidunt porttitor eros, vitae vestibulum dui facilisis eu. Cras eu ipsum lacus. Integer faucibus iaculis lorem, quis pretium leo rhoncus eget. Duis sodales tincidunt est a pretium. Nunc orci nisl, dignissim non pretium sed, fermentum vel purus. Sed quis enim rhoncus leo dapibus molestie in eu risus. Sed tincidunt tristique urna. Nullam accumsan tincidunt sem vitae fermentum. Nunc est nulla, adipiscing et laoreet nec, 
-                  a(target='_blank', href='http://testinator.ai') convallis vel ante
+                  a(target='_blank', href='http://agenticqa.ai') convallis vel ante
                   | . Quisque cursus, odio ac pharetra tristique, diam felis lobortis orci, at blandit sem mauris eget lacus. Ut placerat posuere lacus, nec suscipit libero iaculis in.
-                a.email-button(target='_blank', href='http://testinator.ai') email-button
+                a.email-button(target='_blank', href='http://agenticqa.ai') email-button
                 img(src='/assets/images/placeholders/Approaches-desktop.png')
                 h2 Here&apos;s an h2 heading for structuring the content
                 p Fusce eget augue quam. Maecenas vehicula ligula in nibh dapibus sollicitudin. Donec eget vulputate mauris. Duis fringilla nunc vitae quam euismod non interdum orci aliquet. Duis at lacus erat, sed ultricies felis. Phasellus faucibus mauris vel odio iaculis ullamcorper. In hac habitasse platea dictumst. Integer id odio justo. Ut a ligula arcu. Vestibulum nec quam justo. Suspendisse molestie neque a enim accumsan auctor ornare lacus pellentesque. Praesent vitae lectus vitae sapien scelerisque auctor.
@@ -302,33 +302,33 @@ html(lang="en")
                 h3 H3 New announcements
                 p.email-card
                   | A card containing some very important: Ut facilisis auctor dolor, et fringilla turpis suscipit et. Pellentesque ipsum risus, vehicula eu rutrum non, ornare aliquam lectus. Donec sed tortor ut quam ultrices tincidunt. Sed sagittis tincidunt pulvinar.
-                a.intercom-h2b-button(target='_blank', href='http://testinator.ai') intercom-h2b-button
+                a.intercom-h2b-button(target='_blank', href='http://agenticqa.ai') intercom-h2b-button
     table.email-footer(border='0', cellpadding='0', cellspacing='0', width='100%')
       tr
         td.mobile-padding
           table.email-wrapper(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
             tr
               td
-                a(target='_blank', href='http://testinator.ai')
-                  img.footer-logo(src='/assets/images/logo_testinator/testinator_logo_purpleteal_white_1000px.png', alt='Logo')
+                a(target='_blank', href='http://agenticqa.ai')
+                  img.footer-logo(src='/assets/images/logo_agenticqa/agenticqa_logo_purpleteal_white_1000px.png', alt='Logo')
               td(align='right')
                 p.text-poweredby Powered by Test IO | EPAM
           table.email-wrapper(align='center', border='0', cellpadding='0', cellspacing='0', width='100%')
             tr(align='center')
               td.mobile-padding
                 .footer-disclaimer
-                  | This email and its contents are intended for informational purposes only. By submitting your email address, you consented to receive communications related to your Testinator demo test. We respect your privacy and handle your data in accordance with applicable data protection laws, including the General Data Protection Regulation (GDPR). Learn more in our 
+                  | This email and its contents are intended for informational purposes only. By submitting your email address, you consented to receive communications related to your agenticqa demo test. We respect your privacy and handle your data in accordance with applicable data protection laws, including the General Data Protection Regulation (GDPR). Learn more in our 
                   a(target='_blank', href='https://test.io/dataprivacy') Privacy Policy
                   | .
             tr
               td.footer-links(align='center')
                 a(target='_blank', href='https://test.io/dataprivacy') data privacy
-                a(target='_blank', href='https://test.io/ai-in-qa/testinator') about
+                a(target='_blank', href='https://test.io/ai-in-qa/agenticqa') about
                 a(target='_blank', href='https://test.io/policies') terms
     table(width='100%', cellspacing='0', cellpadding='0', border='0')
         tr
           td
             .unsubscribe-wrapper
               | If you received this email in error or would like to request to access, update, or delete your data, you can 
-              a(target='_blank', href='mailto:testinator@test.io') contact us
+              a(target='_blank', href='mailto:agenticqa@test.io') contact us
               |  anytime.