testio-tailwind 0.1.0

package/src/pages/components/cards_customer.haml

@@ -0,0 +1,487 @@
+---
+tags: components
+title: Cards Customer Dashboard
+---
+
+.grid-productcards
+  .card.product-card.product-website
+    .card-header
+      %a.card-icon{href:""}
+        .icon.icon-website-lg
+      .card-info
+        %a.card-title{href:""}
+          %h5 Product title
+        %p No tests have been run yet
+      .badge-producttype
+        .icon-sm.icon-website
+    .card-content
+      %p We couldn't find any tests here yet
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-explorative.mr-icon-spacing
+        Card action primary
+      %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.product-card.product-ios
+    .card-header
+      %a.card-icon{href:""}
+        .icon.icon-devices-ios-lg
+      .card-info
+        %a.card-title{href:""}
+          %h5 Slightly longer Product title
+        .label-sm
+          %a{href:""} 1 running tests
+          %span &nbsp|&nbsp
+          %a{href:""} 9 open bugs
+      .badge-producttype
+        .icon-sm.icon-apple
+    .card-content
+      .card-test-item
+        %a.link-with-icon{href:""}
+          .icon.icon-test-running
+          Running test
+          %span.test-label Coverage
+        %progress.progress.test-progress{value:"32", max:"100"} 32%
+        .metrics
+          %a.link-with-icon{href:""}
+            .icon.icon-bug
+            9
+      .card-test-item
+        %a.link-with-icon{href:""}
+          .icon.icon-test-archived
+          Archived test
+          %span.test-label Coverage
+        .metrics
+          %a.link-with-icon{href:""}
+            .icon.icon-bug
+            99
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-explorative.mr-icon-spacing
+        Card action primary
+      %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.product-card.product-android
+    .card-header
+      %a.card-icon{href:""}
+        .icon.icon-devices-android-lg
+      .card-info
+        %a.card-title{href:""}
+          %h5 Product title with more characters than this product card element can handle with grace and honor while riding a well fed horse into the sunset
+        .label-sm
+          %a{href:""} 2 running tests
+          %span &nbsp|&nbsp
+          %a{href:""} 18 open bugs
+      .badge-producttype
+        .icon-sm.icon-android
+    .card-content
+      .card-test-item
+        %a.link-with-icon{href:""}
+          .icon.icon-test-running
+          Running test
+          %span.test-label Coverage
+        %progress.progress.test-progress{value:"32", max:"100"} 32%
+        .metrics
+          %a.link-with-icon{href:""}
+            .icon.icon-bug
+            9
+      .card-test-item
+        %a.link-with-icon{href:""}
+          .icon.icon-test-running
+          Running test
+          %span.test-label Coverage
+        %progress.progress.test-progress{value:"32", max:"100"} 32%
+        .metrics
+          %a.link-with-icon{href:""}
+            .icon.icon-bug
+            9
+      .card-test-item
+        %a.link-with-icon{href:""}
+          .icon.icon-test-archived
+          Archived test
+          %span.test-label Coverage
+        .metrics
+          %a.link-with-icon{href:""}
+            .icon.icon-bug
+            99
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-explorative.mr-icon-spacing
+        Card action primary
+      %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.product-card.product-streaming
+    .card-header
+      %a.card-icon{href:""}
+        .icon.icon-streaming-lg
+      .card-info
+        %a.card-title{href:""}
+          %h5 Product with 1 section
+        .label-sm
+          %a{href:""} 1 running tests
+          %span &nbsp|&nbsp
+          %a{href:""} 9 open bugs
+      .badge-producttype
+        .icon-sm.icon-streaming
+    .card-section
+      .card-section-header
+        .section-info
+          %a.card-section-title{href:""} Section title
+          .label-sm
+            %a{href:""} 1 running tests
+            %span &nbsp|&nbsp
+            %a{href:""} 9 open bugs
+        .card-section-actions
+          %details.dropdown-actions.dropright
+            %summary.btn
+              %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-section-content
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-running
+            Running test
+            %span.test-label Coverage
+          %progress.progress.test-progress{value:"32", max:"100"} 32%
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              9
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-archived
+            Archived test
+            %span.test-label Coverage
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              99
+  .card.product-card.product-gaming
+    .card-header
+      %a.card-icon{href:""}
+        .icon.icon-gaming-lg
+      .card-info
+        %a.card-title{href:""}
+          %h5 Product with 2 sections
+        .label-sm
+          %a{href:""} 2 running tests
+          %span &nbsp|&nbsp
+          %a{href:""} 9 open bugs
+      .badge-producttype
+        .icon-sm.icon-gaming
+    %details.card-section.green
+      %summary.card-section-header
+        .section-info
+          %a.card-section-title{href:""} Section green
+          .label-sm
+            %a{href:""} 1 running tests
+            %span &nbsp|&nbsp
+            %a{href:""} 9 open bugs
+        .card-section-actions
+          .btn.btn-collapse
+          %details.dropdown-actions.dropright
+            %summary.btn
+              %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-section-content
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-running
+            Running test
+            %span.test-label Coverage
+          %progress.progress.test-progress{value:"32", max:"100"} 32%
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              9
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-archived
+            Archived test
+            %span.test-label Coverage
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              99
+    %details.card-section.orange
+      %summary.card-section-header
+        .section-info
+          %a.card-section-title{href:""} Section orange
+          .label-sm
+            %a{href:""} 2 running tests
+            %span &nbsp|&nbsp
+            %a{href:""} 9 open bugs
+        .card-section-actions
+          .btn.btn-collapse
+          %details.dropdown-actions.dropright
+            %summary.btn
+              %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-section-content
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-running
+            Running test
+            %span.test-label Coverage
+          %progress.progress.test-progress{value:"32", max:"100"} 32%
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              9
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-archived
+            Archived test
+            %span.test-label Coverage
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              99
+  .card.product-card
+    .card-header
+      %a.card-icon{href:""}
+        .icon.icon-website-lg
+      .card-info
+        %a.card-title{href:""}
+          %h5 Product with 4 sections
+        .label-sm
+          %a{href:""} 1 running tests
+          %span &nbsp|&nbsp
+          %a{href:""} 9 open bugs
+      .badge-producttype
+        .icon-sm.icon-website
+    %details.card-section.yellow
+      %summary.card-section-header
+        .section-info
+          %a.card-section-title{href:""} Section yellow
+          .label-sm
+            %a{href:""} 1 running tests
+            %span &nbsp|&nbsp
+            %a{href:""} 9 open bugs
+        .card-section-actions
+          .btn.btn-collapse
+          %details.dropdown-actions.dropright
+            %summary.btn
+              %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-section-content
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-running
+            Running test
+            %span.test-label Coverage
+          %progress.progress.test-progress{value:"32", max:"100"} 32%
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              9
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-archived
+            Archived test
+            %span.test-label Coverage
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              99
+    %details.card-section.red
+      %summary.card-section-header
+        .section-info
+          %a.card-section-title{href:""} Section red
+          .label-sm
+            %a{href:""} 1 running tests
+            %span &nbsp|&nbsp
+            %a{href:""} 9 open bugs
+        .card-section-actions
+          .btn.btn-collapse
+          %details.dropdown-actions.dropright
+            %summary.btn
+              %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-section-content
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-running
+            Running test
+            %span.test-label Coverage
+          %progress.progress.test-progress{value:"32", max:"100"} 32%
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              9
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-archived
+            Archived test
+            %span.test-label Coverage
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              99
+    %details.card-section.pink
+      %summary.card-section-header
+        .section-info
+          %a.card-section-title{href:""} Section pink
+          .label-sm
+            %a{href:""} 1 running tests
+            %span &nbsp|&nbsp
+            %a{href:""} 9 open bugs
+        .card-section-actions
+          .btn.btn-collapse
+          %details.dropdown-actions.dropright
+            %summary.btn
+              %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-section-content
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-running
+            Running test
+            %span.test-label Coverage
+          %progress.progress.test-progress{value:"32", max:"100"} 32%
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              9
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-archived
+            Archived test
+            %span.test-label Coverage
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              99
+    %details.card-section.purple
+      %summary.card-section-header
+        .section-info
+          %a.card-section-title{href:""} Section purple
+          .label-sm
+            %a{href:""} 1 running tests
+            %span &nbsp|&nbsp
+            %a{href:""} 9 open bugs
+        .card-section-actions
+          .btn.btn-collapse
+          %details.dropdown-actions.dropright
+            %summary.btn
+              %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-section-content
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-running
+            Running test
+            %span.test-label Coverage
+          %progress.progress.test-progress{value:"32", max:"100"} 32%
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              9
+        .card-test-item
+          %a.link-with-icon{href:""}
+            .icon.icon-test-archived
+            Archived test
+            %span.test-label Coverage
+          .metrics
+            %a.link-with-icon{href:""}
+              .icon.icon-bug
+              99

package/src/pages/components/cards_fixedwidth.haml

@@ -0,0 +1,135 @@
+---
+tags: components
+title: Cards with fixed width
+---
+
+.list-cards.mb-md
+  .card.card-sm
+    .card-header
+      %h3.card-title Card SM 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-footer
+      %a.btn.btn-primary.btn-block{href: ""} Primary
+  .card.card-md
+    %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 MD 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-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        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.card-lg
+    %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 LG 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-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        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
+%h5.mb-heading Cards with image header
+.list-cards
+  .card.card-sm
+    %img.card-image{src:"/assets/images/placeholders/testio_symbol_purpleteal_square-1000px.png"}
+    .card-header
+      %h3.card-title Card SM title inside card header
+    .card-body
+      %p Card-body with some example content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
+    .card-footer
+      %a.btn.btn-primary.btn-block{href: ""} Primary
+  .card.card-md
+    %img.card-image{src:"/assets/images/placeholders/testio_symbol_purpleteal_square-1000px.png"}
+    .card-header
+      %h3.card-title Card MD 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-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        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.card-lg
+    %img.card-image{src:"/assets/images/placeholders/TESTIO-email-header-darkteal.png"}
+    .card-header
+      %h3.card-title Card LG 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-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        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

package/src/pages/components/cards_iconheader.haml

@@ -0,0 +1,58 @@
+---
+tags: components
+title: Cards with icon header
+---
+
+.grid-cards-achievements
+  .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-icon-header
+      .icon.icon-heart-lg
+    .card-body.text-center
+      .text-display-3 999
+      .text-label Metric label
+  .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-icon-header
+      .icon.icon-fivestars-lg
+    .card-body.text-center
+      .text-display-3 999
+      .text-label Metric label
+  .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-icon-header
+      .icon.icon-bug-lg
+    .card-body.text-center
+      .text-display-3 999
+      .text-label Metric label
+  .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-icon-header
+      .icon.icon-test-lg
+    .card-body.text-center
+      .text-display-3 999
+      .text-label Metric label