testio-tailwind 0.2.0 → 0.2.1

package/src/pages/buttons/info_popover.haml

@@ -1,33 +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
+---
+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

@@ -1,13 +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
-
+---
+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

@@ -1,55 +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
-
+---
+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

@@ -1,215 +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';
+---
+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';