testio-tailwind 0.1.0

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

@@ -0,0 +1,85 @@
+////// Donut chart
+
+import * as echarts from 'echarts';
+import { echartsLegend, legendHeight } from './echarts_legend';
+
+var legendOptions;
+export function createChartDonut (target, targetData, valueText, labelText, showLegend) {
+  var chartHeight = 190;
+  var chartPlusLegendHeight;
+  if (showLegend) {
+    chartPlusLegendHeight = chartHeight + legendHeight,
+    legendOptions = echartsLegend
+  } else {
+    chartPlusLegendHeight = chartHeight,
+    legendOptions = null
+  }
+  var dom = document.getElementById(target);
+  var myChartDonut = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+    height: chartPlusLegendHeight
+  });
+  var optionDonut;
+  var optionDonut = {
+    tooltip: {
+      trigger: 'item'
+    },
+    layout: {
+    },
+    title: {
+      text: valueText,
+      subtext: labelText,
+      left: "center",
+      top: 60,
+      textVerticalAlign: "top",
+      itemGap: 0,
+      textStyle: {
+        fontSize: 60,
+        lineHeight: 60,
+        fontWeight: "lighter"
+      },
+      subtextStyle: {
+        overflow: "break",
+        width: 100,
+        top: 50,
+        fontSize: 11,
+        lineHeight: 12
+      }
+    },
+    tooltips: {
+      enabled: false
+    },
+    aspectRatio: 1,
+    legend: legendOptions,
+    series: [
+      {
+        type: 'pie',
+        radius: ['80', '90'],
+        avoidLabelOverlap: false,
+        height: chartHeight,
+        top: 0,
+        center: ['50%', '50%'],
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          label: {
+            show: false
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        data: targetData
+      }
+    ]
+  };
+  
+  if (optionDonut && typeof optionDonut === 'object') {
+    myChartDonut.setOption(optionDonut);
+  }
+  
+  window.addEventListener('resize', myChartDonut.resize);
+}

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

@@ -0,0 +1,106 @@
+import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
+
+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'}
+];
+
+export let dataAreaMonths = [
+  { value: 'Jun'},
+  { value: 'Jul'},
+  { value: 'Aug'},
+  { value: 'Sep'},
+  { value: 'Oct'},
+  { value: 'Nov'}
+];
+
+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}},
+];
+
+export let dataBugsFew = [
+  { value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
+  { value: 37, name: 'High', itemStyle: {color: colorHigh}},
+  { value: 19, name: 'Low', itemStyle: {color: colorLow}}
+];
+
+export let dataBugsCategories = [
+  { value:'Critical'},
+  { value: 'High'},
+  { value: 'Low'},
+  { value: 'Visual'},
+  { value: 'Content'},
+  { value: 'UX'}
+];
+
+export let dataBugsCategoriesFew = [
+  { value:'Critical'},
+  { value: 'High'},
+  { value: 'Low'}
+];
+
+export let dataFeaturesFew = [
+  'Feature A', 
+  'Feature B', 
+  'ABC'
+]
+
+export let dataFeaturesManyNumbers = [
+  8, 33, 64, 23, 55, 77, 39, 57
+];
+
+export let dataFeaturesMany = [
+  'Feature A', 
+  'Feature B', 
+  'Feature with a very long name', 
+  'Feature with an even longer name', 
+  'ABC', 
+  'ZDF', 
+  'WWW',
+  'Just another feature name'
+];
+
+export let dataGaugeSuccess = [
+  {
+    value: 89,
+    name: 'Success',
+    itemStyle: {
+      color: colorSuccess
+    }
+  },
+];
+
+export let dataGaugeDanger = [
+  {
+    value: 23,
+    name: 'Danger',
+    itemStyle: {
+      color: colorDanger
+    }
+  },
+];
+
+export let dataGaugeInfo = [
+  {
+    value: 50,
+    name: 'Info',
+    itemStyle: {
+      color: colorInfo
+    }
+  },
+];
+
+export let dataTestCases = [
+  { value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
+  { value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
+  { value: 27, name: 'Open', itemStyle: {color: colorNeutral}},
+];

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

@@ -0,0 +1,146 @@
+import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX } from './colors';
+
+var barType = 'bar';
+var stackType = 'stack';
+var barWidth = 0;
+var barMaxWidth = 10;
+var barGap = 0;
+var barCategoryGap = 0;
+
+export let echartsSeriesFew = [
+  {
+    name: 'Critical',
+    itemStyle: {color: colorCritical},
+    type: barType,
+    stack: stackType,
+    barWidth: barWidth,
+    barMaxWidth: barMaxWidth,
+    barGap: barGap,
+    barCategoryGap: barCategoryGap,
+    emphasis: {
+      focus: 'series'
+    },
+    data: [7, 22, 1]
+  },
+  {
+    name: 'High',
+    itemStyle: {color: colorHigh},
+    type: barType,
+    stack: stackType,
+    barWidth: barWidth,
+    barMaxWidth: barMaxWidth,
+    barGap: barGap,
+    barCategoryGap: barCategoryGap,
+    emphasis: {
+      focus: 'series'
+    },
+    data: [23, 21, 13]
+  },
+  {
+    name: 'Low',
+    itemStyle: {color: colorLow},
+    type: barType,
+    stack: stackType,
+    barWidth: barWidth,
+    barMaxWidth: barMaxWidth,
+    barGap: barGap,
+    barCategoryGap: barCategoryGap,
+    emphasis: {
+      focus: 'series'
+    },
+    data: [9, 15, 4]
+  }
+];
+
+export let echartsSeriesMany = [
+    {
+      name: 'Critical',
+      itemStyle: {color: colorCritical},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [7, 22, 1, 9, 15, 4, 11, 0]
+    },
+    {
+      name: 'High',
+      itemStyle: {color: colorHigh},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [23, 21, 13, 0, 1, 9, 15, 4]
+    },
+    {
+      name: 'Low',
+      itemStyle: {color: colorLow},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [9, 15, 4, 11, 23, 13, 2, 1]
+    },
+    {
+      name: 'Visual',
+      itemStyle: {color: colorVisual},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [13, 14, 1, 9, 15, 4, 11, 10]
+    },
+    {
+      name: 'Content',
+      itemStyle: {color: colorContent},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [13, 22, 1, 9, 15, 4, 8, 13]
+    },
+    {
+      name: 'UX',
+      itemStyle: {color: colorUX},
+      type: barType,
+      stack: stackType,
+      barWidth: barWidth,
+      barMaxWidth: barMaxWidth,
+      barGap: barGap,
+      barCategoryGap: barCategoryGap,
+      emphasis: {
+        focus: 'series'
+      },
+
+      data: [13, 0, 1, 9, 15, 4, 2, 3]
+    }
+  ];

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

@@ -0,0 +1,74 @@
+////// Gauge chart
+
+import * as echarts from 'echarts';
+import { colorSuccess, colorDanger, colorNeutral } from './colors';
+
+export function createChartGauge (target, targetData) {
+  var chartHeight = 190;
+  var dom = document.getElementById(target);
+  var myChartGauge = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+    height: chartHeight
+  });
+  var optionGauge;
+  var optionGauge = {
+    series: [
+      {
+        type: 'gauge',
+        radius: ['90'],
+        startAngle: 90,
+        endAngle: -270,
+        
+        pointer: {
+          show: false
+        },
+        progress: {
+          show: true,
+          overlap: false,
+          clip: false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            width: 10,
+            color: [
+              [1, colorNeutral ]
+            ]
+          }
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          show: false,
+          distance: 50
+        },
+        data: targetData,
+        title: {
+          top: 0,
+          offsetCenter: [0, 35],
+          fontSize: 11,
+          lineHeight: 12
+        },
+        detail: {
+          top: 10,
+          offsetCenter: [0, 0],
+          formatter: '{value}%',
+          fontSize: 60,
+          lineHeight: 60,
+          fontWeight: "lighter"
+        }
+      }
+    ]
+  };
+  
+  if (optionGauge && typeof optionGauge === 'object') {
+    myChartGauge.setOption(optionGauge);
+  }
+  
+  window.addEventListener('resize', myChartGauge.resize);
+}

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

@@ -0,0 +1,80 @@
+////// Horizontal chart
+
+import * as echarts from 'echarts';
+import { echartsLegend, legendHeight } from './echarts_legend';
+
+var legendOptions;
+export function createChartHorizontal (target, targetData, targetSeries, showLegend) {
+  var chartHeight = targetData.length * 20;
+  var chartPlusLegendHeight;
+  if (showLegend) {
+    chartPlusLegendHeight = chartHeight + legendHeight,
+    legendOptions = echartsLegend
+  } else {
+    chartPlusLegendHeight = chartHeight + 0,
+    legendOptions = null
+  }
+  var dom = document.getElementById(target);
+  var myChartHorizontal = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+    height: chartPlusLegendHeight
+  });
+  var optionHorizontal;
+  var optionHorizontal = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: legendOptions,
+    grid: {
+      height: chartHeight,
+      top: 0,
+      left: '12',
+      right: '10',
+      bottom: 0,
+      containLabel: true,
+      align: 'top'
+    },
+    xAxis: {
+      type: 'value',
+      axisTick: {
+        show: false
+        },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      }
+    },
+    yAxis: {
+      data: targetData,
+      scale: false,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        overflow: "truncate",
+        ellipsis: '…',
+        hideOverlap: false,
+        interval: 0
+      }
+    },
+    series: targetSeries
+  };
+  
+  if (optionHorizontal && typeof optionHorizontal === 'object') {
+    myChartHorizontal.setOption(optionHorizontal);
+  }
+  window.addEventListener('resize', myChartHorizontal.resize);
+}

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

@@ -0,0 +1,13 @@
+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/assets/scripts/modules/echarts_vertical.js

@@ -0,0 +1,80 @@
+////// Vertical bar chart
+
+import * as echarts from 'echarts';
+
+export function createChartVertical (target, targetDataY, targetDataX, itemWidth) {
+  var chartHeight = 200;
+  var labelHeight = 20;
+  var dom = document.getElementById(target);
+  var myChartVertical = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+    height: chartHeight + labelHeight
+  });
+  var itemWidthUser; 
+  if (itemWidth) {
+    var itemWidthUser = itemWidth;
+  } else {
+    itemWidthUser = targetDataX.length -1
+  };
+  var optionVertical;
+  var optionVertical = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    grid: {
+      height: chartHeight,
+      top: '15',
+      left: '0',
+      right: '10',
+      bottom: '0',
+      containLabel: true
+    },
+    xAxis: {
+      show: true,
+      type: 'category',
+      max: itemWidthUser,
+      data: targetDataX,
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        width: 100,
+        overflow: "truncate",
+        ellipsis: '…',
+        hideOverlap: true,
+        interval: 0
+      }
+    },
+    yAxis: {
+      show: false,
+      type: 'value'
+    },
+    series: [
+      {
+        data: targetDataY,
+        type: 'bar',
+        barWidth: 15,
+        label: {
+          show: true,
+          position: 'center',
+          verticalAlign: 'top',
+          offset: [0, -15]
+        }
+      }
+    ]
+  };
+  
+  if (optionVertical && typeof optionVertical === 'object') {
+    myChartVertical.setOption(optionVertical);
+  }
+  
+  window.addEventListener('resize', myChartVertical.resize);
+}

package/src/assets/stylesheets/app.css

@@ -0,0 +1,76 @@
+@import "components/reset";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+
+@import "tom-select/dist/css/tom-select.css";
+@import "select2/dist/css/select2.css";
+@import "trix/dist/trix.css";
+
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+
+
+@import "components/actionbar";
+@import "components/buttons";
+@import "components/cards";
+@import "components/header";
+@import "components/layout";
+@import "components/sidebar";
+@import "components/icons";
+@import "components/iconfont";
+@import "components/popover";
+@import "components/typography";
+@import "components/lists";
+@import "components/sections";
+@import "components/dropdown";
+@import "components/list_item";
+@import "components/task_issue_item";
+@import "components/devices";
+@import "components/images";
+@import "components/banner_card";
+@import "components/toggleswitch";
+@import "components/selectable_token";
+@import "components/checkboxes_radiobuttons";
+@import "components/form_grid";
+@import "components/form_card";
+@import "components/forms";
+@import "components/search";
+@import "components/tom_select";
+@import "components/trix_editor";
+@import "components/uploads";
+@import "components/radio_tabs";
+@import "components/user_item";
+@import "components/alerts";
+@import "components/tags";
+@import "components/markdown_trix_styles";
+@import "components/tabs";
+@import "components/drawer";
+@import "components/modals";
+@import "components/progress";
+@import "components/loading_spinner";
+@import "components/test_item";
+@import "components/metrics";
+@import "components/resultmodule";
+@import "components/chat";
+@import "components/emptystate_message";
+@import "components/splitview";
+@import "components/tables";
+@import "components/metasidebar";
+@import "components/notifications";
+@import "components/select2";
+@import "components/select";
+
+@import "components/customer/customer_header";
+@import "components/customer/customer_sidebar";
+@import "components/customer/customer_productcards";
+
+@import "components/tester/tester_header";
+@import "components/tester/tester_sidebar";
+@import "components/tester/tester_cards";
+
+@import "components/manager/manager_header";
+@import "components/manager/manager_sidebar";
+
+@import "designsystem-styles";
+
+@import "tailwindcss/utilities";

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

@@ -0,0 +1,41 @@
+
+footer.actionbar {
+  @apply py-xs px-body-padding-mobile sm:px-body-padding-tablet xl:px-body-padding-desktop bg-actionbar;
+  grid-area: footer;
+}
+
+footer.actionbar,
+.splitview-list-actionbar,
+.splitview-details-actionbar {
+  @apply flex flex-row justify-start items-center h-actionbar;
+}
+
+footer.actionbar .btn-primary,
+.splitview-list-actionbar .btn-primary,
+.splitview-details-actionbar .btn-primary {
+  @apply text-primary bg-white border-white hover:text-white hover:bg-link-hover hover:border-link-hover;
+}
+
+footer.actionbar .btn-secondary,
+.splitview-list-actionbar .btn-secondary,
+.splitview-details-actionbar .btn-secondary {
+  @apply text-white bg-transparent border-white hover:text-white hover:bg-link-hover hover:border-link-hover;
+}
+
+footer.actionbar .btn,
+.splitview-list-actionbar .btn,
+.splitview-details-actionbar .btn {
+  @apply h-btn mr-xs;
+}
+
+footer.actionbar .btn-intercom,
+.splitview-list-actionbar .btn-intercom,
+.splitview-details-actionbar .btn-intercom {
+  @apply ml-auto;
+}
+
+footer.actionbar summary > .btn,
+.splitview-list-actionbar  summary > .btn,
+.splitview-details-actionbar summary > .btn {
+  @apply mr-0;
+}