testio-tailwind 0.1.0

package/src/pages/charts/gauge.haml

@@ -0,0 +1,215 @@
+---
+tags: charts
+title: Gauge
+---
+
+.div
+  %details.listitem.mb-md
+    %summary.listitem-header
+      .listitem-title
+        %span.icon.icon-format-code.mr-xs
+        Initialize 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 (target, targetData)
+      .listitem-subheadline echarts_gauge.js
+      .listitem-card
+        %pre.code.break-spaces
+          :plain
+            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);
+            }
+.row
+  .col-lg-6.col-xl-4
+    .card.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-gauge-1
+    %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.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-gauge-2
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize danger 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 dataGaugeDanger = [
+                {
+                  value: 23,
+                  name: 'Danger',
+                  itemStyle: {
+                    color: colorDanger
+                  }
+                },
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorDanger = '#FF3131';
+  .col-lg-6.col-xl-4
+    .card.bg-gray-lightest.p-md.mb-xs
+      .echarts-container#echarts-gauge-3
+    %details.listitem.mb-md
+      %summary.listitem-header
+        .listitem-title
+          %span.icon.icon-format-code.mr-xs
+          Initialize info 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 dataGaugeInfo = [
+                {
+                  value: 50,
+                  name: 'Info',
+                  itemStyle: {
+                    color: colorInfo
+                  }
+                },
+              ];
+        .listitem-subheadline colors.js
+        .listitem-card
+          %pre.code.break-spaces
+            :plain
+              export const colorInfo = '#326dd1';

package/src/pages/charts/index.njk

@@ -0,0 +1,7 @@
+---
+layout: base
+permalink: charts/
+---
+
+{% set collection = collections.charts %}
+{% include "page-with-sidebar-nocode.njk" %}

package/src/pages/ci.pug

@@ -0,0 +1,8 @@
+---
+layout: base
+permalink: "|/ci/"
+---
+
+main.main-content.main-content-padding
+
+  h1.mb-heading-lg Corporate identity

package/src/pages/colors.pug

@@ -0,0 +1,147 @@
+---
+layout: base
+permalink: "|/colors/"
+---
+
+main.main-content.main-content-padding
+
+  h1.mb-8 Colors
+
+  .grid.gap-5(class='md:grid-cols-4')
+    .flex.flex-col
+      .color-cell.bg-appbody
+        p appbody
+        p #FFFFFF
+      .color-cell.bg-primary.text-white
+        p Primary
+        p #236a84
+      .color-cell.bg-link.text-white
+        p link
+        p #236a84
+      .color-cell.bg-link-hover.text-white
+        p link-hover
+        p #4860E5
+      .color-cell.bg-header.text-white
+        p header
+        p #1d1d1d
+      .color-cell.bg-actionbar.text-white
+        p header
+        p #236a84
+      .color-cell.bg-bordercolor
+        p bordercolor
+        p #e6e6e6
+      .color-cell.bg-bordercolor-dark
+        p bordercolor-dark
+        p #D4D6DC
+      .color-cell.bg-success
+        p success
+        p #8cbd24
+      .color-cell.bg-danger
+        p danger
+        p #ec0404
+      .color-cell.bg-disabled
+        p disabled
+        p #bfc1c5
+      .color-cell.bg-disabled-dark
+        p disabled-dark
+        p #5f656d
+      .color-cell.bg-placeholder
+        p placeholder
+        p #bfc1c5
+      .color-cell.bg-info
+        p info
+        p #326dd1
+      .color-cell.bg-label-color
+        p label-color
+        p #5f656d
+      .color-cell.bg-label-inverted-color
+        p label-inverted-color
+        p #bfc1c5
+
+    .flex.flex-col
+      .color-cell.bg-blue-500.text-white
+        p blue-500
+        p #4860E5
+      .color-cell.bg-blue-200.text-white
+        p blue-200
+        p #3F50B4
+      .color-cell.bg-petrol-500.text-white
+        p petrol-500
+        p #2C3252
+      .color-cell.bg-petrol-600.text-white
+        p petrol-600
+        p #2C3252
+      .color-cell.bg-petrol-700.text-white
+        p petrol-700
+        p #2C3252
+      .color-cell.bg-petrol-800.text-white
+        p petrol-800
+        p #2C3252
+      .color-cell.bg-red-500.text-white
+        p red-500
+        p #FD1525
+      .color-cell.bg-orange-500.text-white
+        p orange-500
+        p #FF9D00
+      .color-cell.bg-yellow-500.text-white
+        p yellow-500
+        p #FFCB00
+      .color-cell.bg-green-500.text-white
+        p green-500
+        p #AFB42A
+
+    .flex.flex-col
+      .color-cell.bg-black.text-white
+        p black
+        p #000000
+      .color-cell.bg-gray-darkest.text-white
+        p gray-darkest
+        p #7c8188
+      .color-cell.bg-gray-darker.text-white
+        p gray-darker
+        p #5f656d
+      .color-cell.bg-gray-dark
+        p gray-dark
+        p #7c8188
+      .color-cell.bg-gray
+        p gray
+        p #9fa2a8
+      .color-cell.bg-gray-light
+        p gray-light
+        p #bfc1c5
+      .color-cell.bg-gray-lighter
+        p gray-lighter
+        p #e6e6e6
+      .color-cell.bg-gray-lightest
+        p gray-lightest
+        p #f2f2f2
+
+
+    .flex.flex-col
+      .color-cell.bg-gray-900.text-white
+        p gray-900
+        p #222222
+      .color-cell.bg-gray-800.text-white
+        p gray-800
+        p #262626
+      .color-cell.bg-gray-700.text-white
+        p gray-700
+        p #343A40
+      .color-cell.bg-gray-600.text-white
+        p gray-600
+        p #5f656d
+      .color-cell.bg-gray-500
+        p gray-500
+        p #7c8188
+      .color-cell.bg-gray-400
+        p gray-400
+        p #9fa2a8
+      .color-cell.bg-gray-300
+        p gray-300
+        p #bfc1c5
+      .color-cell.bg-gray-200
+        p gray-200
+        p #e6e6e6
+      .color-cell.bg-gray-100
+        p gray-100
+        p #f2f2f2

package/src/pages/components/alerts.haml

@@ -0,0 +1,32 @@
+---
+tags: components
+title: Alerts
+---
+
+.alert-container
+  .alert
+    .alert-message Alert
+    %button.close
+      .icon.icon-cross
+  .alert.alert-info
+    .alert-message Info Alert with a lot of 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.
+    %button.close
+      .icon.icon-cross
+  .alert
+    .alert-message
+      Info Alert with a lot of 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.
+      %button.btn.btn-white Alert action
+    %button.close
+      .icon.icon-cross
+  .alert.alert-success
+    .alert-message Success Alert
+    %button.close
+      .icon.icon-cross
+  .alert.alert-warning
+    .alert-message Warning Alert
+    %button.close
+      .icon.icon-cross
+  .alert.alert-error
+    .alert-message Error Alert
+    %button.close
+      .icon.icon-cross

package/src/pages/components/banner_cards.haml

@@ -0,0 +1,46 @@
+---
+tags: components
+title: Banner cards
+---
+
+.banner-card.welcome
+  %img.welcome-image{src:"/assets/images/logo-testio/testio_symbol_purpleteal_square.svg"}
+  .card-content
+    %h3.card-title Welcome to Test IO!
+    %p We are glad to have you here. To get started earning money with us please complete some onboarding modules. Also check out this Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+    .card-actions
+      %a.btn.btn-inverted{href:""} Dismiss
+.banner-card
+  .card-chart
+    .piechart-example
+    .chart-value 0/3
+    .chart-label madatory modules completed
+  .card-content
+    %h5.card-title Mandatory onboarding modules available
+    %p You received mandatory onboarding modules which are required for receiving customer tasks and test invitations. Please complete them soon.
+    .card-actions
+      %a.btn.btn-primary{href:""} Go to learning portal
+.banner-card
+  .card-image
+    %img{src:"/assets/images/tester-badges/testIO-testerbadge-cybersecurity.svg"}
+  .card-content
+    %h5.card-title Mandatory cybersecurity course
+    %p.mb-xxs You received the mandatory onboarding course Cybersecurity which is required for receiving customer tasks and test invitations.
+    .text-with-icon.mb-xxs
+      .icon.icon-exclamation-circle
+      All approved testers must complete this course to achieve bronze level and above.
+    .text-with-icon
+      .icon.icon-exclamation-circle
+      All approved testers will have a one-month transition period to complete it. If they do not pass, even Diamond testers will be downgraded to copper level.
+    .card-actions
+      %a.btn.btn-primary{href:""} Go to course
+      %a.btn.btn-secondary{href:""} Remind me later
+.banner-card
+  .card-image
+    .icon-xxl.icon-bug-sad-xl.text-danger
+  .card-content
+    %h5.card-title Level downgrade
+    %p Unfortunatly you didn’t finish the onboarding course Cybersecurity in the required timeframe. As a result you have been downgraded to level 2.
+    .card-actions
+      %a.btn.btn-primary{href:""} Go to course
+      %a.btn.btn-secondary{href:""} Remind me later

package/src/pages/components/cards.haml

@@ -0,0 +1,112 @@
+---
+tags: components
+title: Cards
+---
+
+.grid-cards
+  .card
+    %details.popover-wrapper.dropright.card-info-popover
+      %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.
+    .card-header
+      %h3.card-title Card title inside card header
+    .card-body
+      %p Card-body with some example 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.
+  .card
+    %details.popover-wrapper.dropright.card-info-popover
+      %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.
+    .card-header
+      %h3.card-title Card title
+    .card-body
+      %p Card-body with some example 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.
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-explorative.mr-icon-spacing
+        Primary
+      %a.btn.btn-secondary.btn-block{href: ""}
+        Secondary
+      %details.dropdown-actions.dropright.dropup
+        %summary
+          .btn.btn-primary.btn-square
+            %span.icon.text-icon-default.icon-more
+        .listitem-more-menu.popover-menu
+          %a.popover-action
+            %span.icon.text-icon-default.icon-pencil
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-duplicate
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-remove
+            Action
+  .card
+    %details.popover-wrapper.dropright.card-info-popover
+      %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.
+    .card-body
+      %h3.card-title.mb-heading Card title
+      %p.bg-gray-light.rounded.p-xxs Card-body with some example 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.
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-explorative.mr-icon-spacing
+        Primary
+      %a.btn.btn-secondary.btn-block{href: ""}
+        Secondary
+      %details.dropdown-actions.dropright.dropup
+        %summary
+          .btn.btn-primary.btn-square
+            %span.icon.text-icon-default.icon-more
+        .listitem-more-menu.popover-menu
+          %a.popover-action
+            %span.icon.text-icon-default.icon-pencil
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-duplicate
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-remove
+            Action
+  .card.text-center
+    %details.popover-wrapper.dropright.card-info-popover
+      %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.
+    .card-body
+      %h3.card-title.mb-heading Center everything
+      %p Card-body with some example 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.
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-explorative.mr-icon-spacing
+        Primary
+      %a.btn.btn-secondary.btn-block{href: ""}
+        Secondary
+      %details.dropdown-actions.dropright.dropup
+        %summary
+          .btn.btn-primary.btn-square
+            %span.icon.text-icon-default.icon-more
+        .listitem-more-menu.popover-menu
+          %a.popover-action
+            %span.icon.text-icon-default.icon-pencil
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-duplicate
+            Action
+          %a.popover-action
+            %span.icon.text-icon-default.icon-remove
+            Action