testio-tailwind 0.1.0

package/src/pages/buttons/info_popover.haml

@@ -0,0 +1,33 @@
+---
+tags: button
+title: Info popover
+---
+
+.flex.justify-between
+  .popover-menu.info
+    .popover-title Popover title
+    .popover-content Popover content 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.
+    .text-with-icon.mt-xs
+      .icon.icon-lock.text-disabled.mr-icon-spacing
+      .text-sm 0/100 Pushups completed
+    .text-with-icon.mt-xs
+      .icon.icon-unlock.text-success.mr-icon-spacing
+      .text-sm 50/50 Squats completed
+    .popover-actions
+      .btn.btn-sm.btn-inverted Action
+.py-xs
+%details.popover-wrapper
+  %summary
+    .btn.btn-sm.btn-square
+      .icon.icon-info
+  .popover-menu.info
+    .popover-title Popover title
+    .popover-content Popover content 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.
+    .text-with-icon.mt-xs
+      .icon.icon-lock.text-disabled.mr-icon-spacing
+      .text-sm 0/100 Pushups completed
+    .text-with-icon.mt-xs
+      .icon.icon-unlock.text-success.mr-icon-spacing
+      .text-sm 50/50 Squats completed
+    .popover-actions
+      .btn.btn-sm.btn-inverted Action

package/src/pages/buttons/link-with-icon.haml

@@ -0,0 +1,13 @@
+---
+title: Link with Icon
+tags: button
+---
+
+.grid.grid-cols-auto.gap-2
+  %a.link-with-icon{href:""}
+    %span.icon.icon-filter.mr-icon-spacing
+    Filter
+  %a.link-with-icon{href:""}
+    %span.icon.icon-clock.mr-icon-spacing
+    All Time
+

package/src/pages/buttons/square-buttons.haml

@@ -0,0 +1,55 @@
+---
+title: Square Buttons
+tags: button
+---
+
+%ul.list-inline
+  %li
+    %button.btn.btn-primary.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-secondary.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-success.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-danger.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-warning.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-info.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-dashed.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-link.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-ghost.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-primary.btn-square{disabled: "disabled"}
+      .icon.icon-check-circle
+
+.bg-dark.p-2
+  %ul.list-inline
+    %li
+      %button.btn.btn-primary-inverted.btn-square
+        .icon.icon-check-circle
+    %li
+      %button.btn.btn-inverted.btn-square
+        .icon.icon-check-circle
+    %li
+      %button.btn.btn-secondary-inverted.btn-square
+        .icon.icon-check-circle
+    %li
+      %button.btn.btn-outline-primary-inverted.btn-square
+        .icon.icon-check-circle
+    %li
+      %button.btn.btn-inverted.btn-square{disabled: "disabled"}
+        .icon.icon-check-circle
+

package/src/pages/charts/area.haml

@@ -0,0 +1,215 @@
+---
+tags: charts
+title: Area
+---
+
+%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';
+          createChartArea (target, targetDataX, targetDataY, chartColor);
+    .listitem-subheadline echarts_area.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          import * as echarts from 'echarts';
+          export function createChartArea (target, targetDataX, targetDataY, chartColor) {
+            var chartHeight = 190;
+            var dom = document.getElementById(target);
+            var myChartArea = echarts.init(dom, null, {
+              renderer: 'canvas',
+              useDirtyRect: false,
+              height: chartHeight
+            });
+            var optionArea;
+            var optionArea = {
+              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
+                },
+                axisTick: {
+                  show: false
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    type: 'dashed'
+                  }
+                }
+              },
+              yAxis: {
+                show: false,
+                min: 0,
+                max: targetDataY
+              },
+              series: [
+                {
+                  data: targetDataY,
+                  type: 'line',
+                  lineStyle: {
+                    width: 1,
+                    color: chartColor
+                  },
+                  areaStyle: {
+                    opacity: 1,
+                    color: chartColor
+                  },
+                  zlevel: 1
+                },
+                {
+                  data: targetDataY,
+                  type: 'line',
+                  lineStyle: {
+                    width: 0
+                  },
+                  symbol: 'circle',
+                  symbolSize: 10,
+                  itemStyle: {
+                    borderWidth: 2,
+                    color: chartColor,
+                    borderColor: '#ffffff'
+                  },
+                  label: {
+                    show: true
+                  },
+                  areaStyle: {
+                    opacity: 0
+                  },
+                  zlevel: 3
+                }
+              ]
+            };
+            if (optionArea && typeof optionArea === 'object') {
+              myChartArea.setOption(optionArea);
+            }
+            window.addEventListener('resize', myChartArea.resize);
+          }
+.row
+  .col-xl-6
+    .card.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-area-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';
+              createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight);
+        .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-xl-6
+    .card.bg-gray-lightest.mb-xs.p-xs
+      .echarts-container#echarts-area-2
+    %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';
+              createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorInfo);
+        .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 colorInfo = '#326dd1';

package/src/pages/charts/bar_horizontal.haml

@@ -0,0 +1,336 @@
+---
+tags: charts
+title: Bar chart horizontal
+---
+
+%details.listitem.mb-md
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Initialize horizontal bar 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 { createChartHorizontal } from './modules/echarts_horizontal';
+          createChartHorizontal("element-id", data, series, showLegend);
+    .listitem-subheadline echarts_horizontal.js
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          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);
+          }
+    .listitem-subheadline echarts_legend.js
+    .listitem-card
+      %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'
+          };
+.card.bg-gray-lightest.p-md.mb-xs
+  .echarts-container#echarts-bar-horizontal-1
+%details.listitem.mb-lg
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Horizontal chart, 3 Features, some bugs, no 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 { createChartHorizontal } from './modules/echarts_horizontal';
+          createChartHorizontal("element-id", dataFeaturesFew, echartsSeriesFew, false);
+    .listitem-subheadline Data
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          export let dataFeaturesFew = [
+            'Feature A', 
+            'Feature B', 
+            'ABC'
+          ]
+    .listitem-subheadline Series, Javascript
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          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]
+            }
+          ];
+%p.mt-md.mb-xs With legend and long feature names
+.card.bg-gray-lightest.p-md.mb-xs
+  .echarts-container#echarts-bar-horizontal-2
+%details.listitem.mb-lg
+  %summary.listitem-header
+    .listitem-title
+      %span.icon.icon-format-code.mr-xs
+      Horizontal chart, 8 Features, many bugs, 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 { createChartHorizontal } from './modules/echarts_horizontal';
+          createChartHorizontal("element-id", dataFeaturesMany, echartsSeriesMany, true);
+    .listitem-subheadline Data
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          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'
+          ];
+    .listitem-subheadline Series, Javascript
+    .listitem-card
+      %pre.code.break-spaces
+        :plain
+          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 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]
+            }
+          ];