testio-tailwind 0.1.0 → 0.2.1

package/src/pages/navigation/test-header-tester.haml

@@ -0,0 +1,178 @@
+---
+tags: navigation
+title: Test Header - Tester
+---
+%p.mb-xs
+  %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester
+  Invitation, not joined yet 
+.test-header.tester
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%p.mb-xs.mt-md
+  %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester.minimized
+  Invitation, not joined yet, minimized 
+.test-header.tester.minimized
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%p.mb-xs.mt-md
+  %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester.ready
+  Joined, ready for recording
+.test-header.tester.ready
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  .test-actions
+    %a.btn.btn-recording{href:""}
+      .icon.icon-circle-filled
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%p.mb-xs.mt-md
+  %span.tag-item.mr-xs.bg-gray-lighter .test-header.tester.ready.minimized
+  Joined, ready for recording, minimized
+.test-header.tester.ready.minimized
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  .test-actions
+    %a.btn.btn-recording{href:""}
+      .icon.icon-circle-filled
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%p.mb-xs.mt-md
+  %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester.recording
+  Session active
+.test-header.tester.recording
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  .session-info
+    .session-label Session active
+    .session-timer
+      30:00
+      .session-addon left
+  .test-actions
+    %a.btn{href:""}
+      .icon.icon-clock
+    %a.btn{href:""}
+      .icon.icon-stop
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%p.mb-xs.mt-md
+  %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester.recording.minimized
+  Session active, minimized
+.test-header.tester.recording.minimized
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  .session-info
+    .session-label Session active
+    .session-timer
+      30:00
+      .session-addon left
+  .test-actions
+    %a.btn{href:""}
+      .icon.icon-clock
+    %a.btn{href:""}
+      .icon.icon-stop
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%p.mb-xs.mt-md
+  %span.tag-item.mr-xs.bg-gray-lighter .test-header.tester.recording.danger
+  Danger, session time running out
+.test-header.tester.recording.danger
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  .session-info
+    .session-label Session will end in 1 min
+    .session-timer
+      01:00
+      .session-addon left
+  .test-actions
+    %a.btn{href:""}
+      .icon.icon-clock
+    %a.btn{href:""}
+      .icon.icon-stop
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled
+%p.mb-xs.mt-md
+  %span.tag-item.mr-xs.bg-gray-lighter .test-header.tester.recording.danger.minimized
+  Danger, session time running out, minimized
+.test-header.tester.recording.danger.minimized
+  %h1.test-title Customer name
+  .test-progress-wrapper
+    .meta-info #123321 | Focused Test | Ends in 8 hours
+    %progress.test-progress{value:"32", max:"100"} 32%
+  .session-info
+    .session-label Session will end in 1 min
+    .session-timer
+      01:00
+      .session-addon left
+  .test-actions
+    %a.btn{href:""}
+      .icon.icon-clock
+    %a.btn{href:""}
+      .icon.icon-stop
+  %nav.nav-tabs
+    .navlink.active{href:""} Navlink active
+    .navlink{href:""} Navlink
+    .navlink{href:""} Navlink
+    .navlink{href:""}
+      Counter
+      .counter 99
+    .navlink.disabled{href:""} Disabled

package/src/pages/typography/index.njk

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

package/src/pages/typography/link_with_icon.haml

@@ -1,12 +1,12 @@
----
-tags: typography
-title: Link with icon
----
-
-%a.link-with-icon{href:""}
-  .icon.icon-exclamation-circle
-  All approved testers must complete this course to achieve bronze level and above.
-.pt-xs
-%a.link-with-icon{href:""}
-  .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.
+---
+tags: typography
+title: Link with icon
+---
+
+%a.link-with-icon{href:""}
+  .icon.icon-exclamation-circle
+  All approved testers must complete this course to achieve bronze level and above.
+.pt-xs
+%a.link-with-icon{href:""}
+  .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.

package/src/pages/typography/linked_icon.haml

@@ -1,10 +1,10 @@
----
-tags: typography
-title: Linked icon
----
-
-%a.linked-icon{href:""}
-  .icon.icon-exclamation-circle
-.pt-xs
-%a.linked-icon{href:""}
-  .icon.icon-exclamation-circle-filled
+---
+tags: typography
+title: Linked icon
+---
+
+%a.linked-icon{href:""}
+  .icon.icon-exclamation-circle
+.pt-xs
+%a.linked-icon{href:""}
+  .icon.icon-exclamation-circle-filled

package/src/pages/typography/markdown.md

@@ -1,113 +1,113 @@
----
-tags: typography
-title: Markdown styles
----
-
-{% tag %}
-
-These styles are scope with the class `markdown`
-
-___
-
-# This is a heading level 1
-## This is a heading level 2
-### This is a heading level 3
-#### This is a heading level 4
-##### Heading level 5
-###### Heading level 6
-___
-
-
-### Emphasis
-
-**This is bold text**
-
-__This is bold text__
-
-*This is emphasized text*
-
-_This is emphasized text_
-
-~~Strikethrough~~
-___
-
-
-### Links
-
-[link text](http://test.io)
-[link with title](http://test.io "title text!")
-___
-
-
-### Blockquotes
-
-> Here's a block quote by a famous Test IO employee
-
-> Blockquotes can also be nested
->> ... by using additional greater-than signs right next to each other...
-> > > ...or with spaces between arrows.
-___
-
-### Lists
-
-#### Unordered
-
-+ Create a list by starting a line with `+`, `-`, or `*`
-+ Sub-lists are made by indenting 2 spaces:
-  - Marker character change forces new list start:
-    * This is a new list with started with the character `*`
-    * Ac tristique libero volutpat at
-    + This is a new list with started with the character `+`
-    + Facilisis in pretium nisl aliquet
-    - This is a new list with started with the character `-`
-    - Nulla volutpat aliquam velit
-+ Very easy!
-
-#### Ordered
-
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
--
-1. You can use sequential numbers...
-2. ...or keep all the numbers as `1.`
-
-___
-
-### Code
-
-Inline `code`
-
-Block code "fences"
-
-```
-Sample text here...
-```
-
-Syntax highlighting
-
-``` js
-var foo = function (bar) {
-  return bar++;
-};
-
-console.log(foo(5));
-```
-
-### Horizontal Rules
-___
-
----
-
-***
-
-
-### Tables
-
-| Option | Description |
-| ------ | ----------- |
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
-
+---
+tags: typography
+title: Markdown styles
+---
+
+{% tag %}
+
+These styles are scope with the class `markdown`
+
+___
+
+# This is a heading level 1
+## This is a heading level 2
+### This is a heading level 3
+#### This is a heading level 4
+##### Heading level 5
+###### Heading level 6
+___
+
+
+### Emphasis
+
+**This is bold text**
+
+__This is bold text__
+
+*This is emphasized text*
+
+_This is emphasized text_
+
+~~Strikethrough~~
+___
+
+
+### Links
+
+[link text](http://test.io)
+[link with title](http://test.io "title text!")
+___
+
+
+### Blockquotes
+
+> Here's a block quote by a famous Test IO employee
+
+> Blockquotes can also be nested
+>> ... by using additional greater-than signs right next to each other...
+> > > ...or with spaces between arrows.
+___
+
+### Lists
+
+#### Unordered
+
++ Create a list by starting a line with `+`, `-`, or `*`
++ Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    * This is a new list with started with the character `*`
+    * Ac tristique libero volutpat at
+    + This is a new list with started with the character `+`
+    + Facilisis in pretium nisl aliquet
+    - This is a new list with started with the character `-`
+    - Nulla volutpat aliquam velit
++ Very easy!
+
+#### Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+-
+1. You can use sequential numbers...
+2. ...or keep all the numbers as `1.`
+
+___
+
+### Code
+
+Inline `code`
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+``` js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+### Horizontal Rules
+___
+
+---
+
+***
+
+
+### Tables
+
+| Option | Description |
+| ------ | ----------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default. |
+| ext    | extension to be used for dest files. |
+
 {% endtag %}

package/src/pages/typography/section_header.haml

@@ -1,25 +1,25 @@
----
-tags: typography
-title: Section header
----
-
-%section
-  .section-header
-    %h1.section-title Section header with h1
-    .section-label Section label
-%section
-  .section-header
-    %h2.section-title Section header with h2
-    .section-label Section label
-%section
-  .section-header
-    %h3.section-title Section header with h3
-    .section-label Section label
-%section
-  .section-header
-    %h4.section-title Section header with h4
-    .section-label Section label
-%section
-  .section-header
-    %h5.section-title Section header with h5
-    .section-label Section label
+---
+tags: typography
+title: Section header
+---
+
+%section
+  .section-header
+    %h1.section-title Section header with h1
+    .section-label Section label
+%section
+  .section-header
+    %h2.section-title Section header with h2
+    .section-label Section label
+%section
+  .section-header
+    %h3.section-title Section header with h3
+    .section-label Section label
+%section
+  .section-header
+    %h4.section-title Section header with h4
+    .section-label Section label
+%section
+  .section-header
+    %h5.section-title Section header with h5
+    .section-label Section label

package/src/pages/typography/section_header_actions.haml

@@ -1,60 +1,60 @@
----
-tags: typography
-title: Section header with actions
----
-
-%section
-  .section-header
-    %h1.section-title Section with action h1
-    .section-actions
-      %a.link-with-icon{href:""}
-        .icon.icon-sort-descending
-        Severity (desc)
-      %a.linked-icon{href:""}
-        .icon.icon-filter
-      %a.linked-icon{href:""}
-        .icon.icon-search
-%section
-  .section-header
-    %h2.section-title Section header with action h2
-    .section-actions
-      %a.link-with-icon{href:""}
-        .icon.icon-sort-descending
-        Severity (desc)
-      %a.linked-icon{href:""}
-        .icon.icon-filter
-      %a.linked-icon{href:""}
-        .icon.icon-search
-%section
-  .section-header
-    %h3.section-title Section header with action h3
-    .section-actions
-      %a.link-with-icon{href:""}
-        .icon.icon-sort-descending
-        Severity (desc)
-      %a.linked-icon{href:""}
-        .icon.icon-filter
-      %a.linked-icon{href:""}
-        .icon.icon-search
-%section
-  .section-header
-    %h4.section-title Section header with action h4
-    .section-actions
-      %a.link-with-icon{href:""}
-        .icon.icon-sort-descending
-        Severity (desc)
-      %a.linked-icon{href:""}
-        .icon.icon-filter
-      %a.linked-icon{href:""}
-        .icon.icon-search
-%section
-  .section-header
-    %h5.section-title Section header with action h5
-    .section-actions
-      %a.link-with-icon{href:""}
-        .icon.icon-sort-descending
-        Severity (desc)
-      %a.linked-icon{href:""}
-        .icon.icon-filter
-      %a.linked-icon{href:""}
+---
+tags: typography
+title: Section header with actions
+---
+
+%section
+  .section-header
+    %h1.section-title Section with action h1
+    .section-actions
+      %a.link-with-icon{href:""}
+        .icon.icon-sort-descending
+        Severity (desc)
+      %a.linked-icon{href:""}
+        .icon.icon-filter
+      %a.linked-icon{href:""}
+        .icon.icon-search
+%section
+  .section-header
+    %h2.section-title Section header with action h2
+    .section-actions
+      %a.link-with-icon{href:""}
+        .icon.icon-sort-descending
+        Severity (desc)
+      %a.linked-icon{href:""}
+        .icon.icon-filter
+      %a.linked-icon{href:""}
+        .icon.icon-search
+%section
+  .section-header
+    %h3.section-title Section header with action h3
+    .section-actions
+      %a.link-with-icon{href:""}
+        .icon.icon-sort-descending
+        Severity (desc)
+      %a.linked-icon{href:""}
+        .icon.icon-filter
+      %a.linked-icon{href:""}
+        .icon.icon-search
+%section
+  .section-header
+    %h4.section-title Section header with action h4
+    .section-actions
+      %a.link-with-icon{href:""}
+        .icon.icon-sort-descending
+        Severity (desc)
+      %a.linked-icon{href:""}
+        .icon.icon-filter
+      %a.linked-icon{href:""}
+        .icon.icon-search
+%section
+  .section-header
+    %h5.section-title Section header with action h5
+    .section-actions
+      %a.link-with-icon{href:""}
+        .icon.icon-sort-descending
+        Severity (desc)
+      %a.linked-icon{href:""}
+        .icon.icon-filter
+      %a.linked-icon{href:""}
         .icon.icon-search

package/src/pages/typography/text_with_icon.haml

@@ -1,12 +1,12 @@
----
-tags: typography
-title: Text with icon
----
-
-.text-with-icon
-  .icon.icon-exclamation-circle
-  All approved testers must complete this course to achieve bronze level and above.
-.pt-xs
-.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.
+---
+tags: typography
+title: Text with icon
+---
+
+.text-with-icon
+  .icon.icon-exclamation-circle
+  All approved testers must complete this course to achieve bronze level and above.
+.pt-xs
+.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.