testio-tailwind 0.2.0 → 0.2.1

package/src/pages/components/listitem_with_footer.haml

@@ -1,209 +1,209 @@
----
-tags: components
-title: List-item with footer
----
-
-.list-listitems
-  .listitem-with-footer
-    %details.listitem
-      %summary.listitem-header
-        .listitem-title List item collapsable with footer
-        .listitem-actions
-          .btn.collapse-btn
-      .listitem-content
-        .listitem-subheadline Subheadline
-        .listitem-card
-          %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
-        .listitem-subheadline Subheadline
-        .listitem-card
-          %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
-          %img{src:"/assets/images/placeholders/security-jira-server.png"}
-    .listitem-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
-  .listitem-with-footer
-    %details.listitem
-      %summary.listitem-header
-        .listitem-badge
-          .icon.icon-feature
-        %a.issue-item.listitem-title{href: ""}
-          .issue-icon.icon.icon-bug-reproduction.critical
-          .issue-title Add an issue item in the header to receive an collapsable bug item with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-          .issue-info issue info | issue ID | issue type
-        .listitem-actions
-          .btn.collapse-btn
-      .listitem-content
-        %details.section-collapsable
-          %summary.section-header
-            %h5.section-title Meta info
-          %dl.list-inline
-            %dt.label Status
-            %dd
-              .text-with-icon
-                .status-icon.status-submitted
-                Submitted
-            %dt.label Bug Type
-            %dd
-              .text-with-icon
-                .icon.icon-bug
-                Functional
-            %dt.label Severity
-            %dd
-              .text-with-icon
-                .icon.icon-critical
-                Critical
-            %dt.label Known Bug
-            %dd
-              .text-with-icon
-                .icon.icon-bug-known
-                No
-            %dt.label Bug ID
-            %dd #1799709
-            %dt.label Reported on
-            %dd October 5, 2021 11:48 AM
-            %dt.label Feature
-            %dd
-              %a{href: ""} Feature name
-            %dt.label Test ID
-            %dd #88219
-            %dt.label Tester
-            %dd
-              %details.dropdown-actions
-                %summary
-                  .user-item.linked.sm
-                    %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-                    User item with actions
-                .popover-menu
-                  %a.popover-action{href:'#'}
-                    %span.icon.text-icon-default.icon-user-story-test
-                    Tester profile
-                  %a.popover-action{href:'#'}
-                    %span.icon.text-icon-default.icon-review-exclamation
-                    Report tester
-        %details.section-collapsable
-          %summary.section-header
-            %h5.section-title Details
-          %dl.list-inline.responsive
-            %dt.label URL
-            %dd
-              %a{href: ""} https://www.url.com
-            %dt.label Steps
-            %dd
-              .markdown
-                %ol
-                  %li
-                    Go to
-                    %a{href: ""} https://www.url.com
-                    and login as crowd AUTOMATOR (
-                    %a{href: ""} email@qa.team
-                    \/ abc123 was in my case)
-                  %li Join a project, complete some automation task, and LEAVE the project
-                  %li
-                    Login
-                    %a{href: ""} https://www.url.com
-                    as project owner to perform review (
-                    %a{href: ""} email@qa.team
-                    \/ abc123 was in my case)
-                  %li Start to review the automated task and reject it approval
-            %dt.label Actual result
-            %dd
-              .markdown
-                %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-            %dt.label Expected result
-            %dd
-              .markdown
-                %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
-        %section
-          .section-header
-            %h5.section-title Attachments
-          .attachments
-            .attachment
-              %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
-                %img{src:'/assets/images/placeholders/bugdetails.png'}
-              %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
-            .attachment
-              %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
-                %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
-              %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-            .attachment
-              %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
-                .attachment-icon.icon-xl.icon-review-xl
-              %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-        %section
-          .section-header
-            %h5.section-title Reported on
-          .list-devices.mb-sm
-            .device
-              .device-icon.icon-lg.icon-computer-windows-lg
-              .device-info
-                Desktop | Windows 11
-                %ul.browser-list
-                  %li.icon.icon-chrome
-                  %li.icon.icon-edge-chromium
-        %section
-          .section-header
-            %h5.section-title Comments
-          .list-chat-messages
-            .chat-message-item
-              %details.dropdown-actions.chat-avatar
-                %summary
-                  .user-item.linked
-                    %img{src:"/assets/images/placeholders/profile_supergirl.png"}
-                .popover-menu
-                  %a.popover-action{href:'#'}
-                    %span.icon.icon-user-story-test
-                    Tester profile
-                  %a.popover-action{href:'#'}
-                    %span.icon.icon-review-exclamation
-                    Report tester
-              .chat-header
-                2 hours by 
-                .chat-author Message sender
-              .chat-message
-                Here's a commment, chat message or however else you want to call this kind of message.
-              .chat-actions
-                .btn
-                  .icon.icon-heart
-            .chat-message-item.your-message
-              %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-              .chat-header
-                2 hours by 
-                .chat-author You
-              .chat-message
-                Your short chat message with no lorem ipsum.
-              .chat-actions
-                %details.dropdown-actions.chat-message-actions
-                  %summary
-                    .btn
-                      .icon.icon-more
-                  .popover-menu
-                    %a.popover-action{href:'#'}
-                      %span.icon.icon-pencil
-                      Action
-                    %a.popover-action{href:'#'}
-                      %span.icon.icon-remove
-                      Action
-    .listitem-footer
-      %a.btn.btn-primary.btn-block{href: ""}
-        %span.icon.icon-check.mr-icon-spacing
-        Accept
-      %a.btn.btn-primary.btn-block{href: ""}
-        %span.icon.icon-cross.mr-icon-spacing
+---
+tags: components
+title: List-item with footer
+---
+
+.list-listitems
+  .listitem-with-footer
+    %details.listitem
+      %summary.listitem-header
+        .listitem-title List item collapsable with footer
+        .listitem-actions
+          .btn.collapse-btn
+      .listitem-content
+        .listitem-subheadline Subheadline
+        .listitem-card
+          %p This is a listitem-card with some Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
+        .listitem-subheadline Subheadline
+        .listitem-card
+          %p Another listitem-card with some Lorem Ipsum and a nice placeholder image.
+          %img{src:"/assets/images/placeholders/security-jira-server.png"}
+    .listitem-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
+  .listitem-with-footer
+    %details.listitem
+      %summary.listitem-header
+        .listitem-badge
+          .icon.icon-feature
+        %a.issue-item.listitem-title{href: ""}
+          .issue-icon.icon.icon-bug-reproduction.critical
+          .issue-title Add an issue item in the header to receive an collapsable bug item with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+          .issue-info issue info | issue ID | issue type
+        .listitem-actions
+          .btn.collapse-btn
+      .listitem-content
+        %details.section-collapsable
+          %summary.section-header
+            %h5.section-title Meta info
+          %dl.list-inline
+            %dt.label Status
+            %dd
+              .text-with-icon
+                .status-icon.status-submitted
+                Submitted
+            %dt.label Bug Type
+            %dd
+              .text-with-icon
+                .icon.icon-bug
+                Functional
+            %dt.label Severity
+            %dd
+              .text-with-icon
+                .icon.icon-critical
+                Critical
+            %dt.label Known Bug
+            %dd
+              .text-with-icon
+                .icon.icon-bug-known
+                No
+            %dt.label Bug ID
+            %dd #1799709
+            %dt.label Reported on
+            %dd October 5, 2021 11:48 AM
+            %dt.label Feature
+            %dd
+              %a{href: ""} Feature name
+            %dt.label Test ID
+            %dd #88219
+            %dt.label Tester
+            %dd
+              %details.dropdown-actions
+                %summary
+                  .user-item.linked.sm
+                    %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                    User item with actions
+                .popover-menu
+                  %a.popover-action{href:'#'}
+                    %span.icon.text-icon-default.icon-user-story-test
+                    Tester profile
+                  %a.popover-action{href:'#'}
+                    %span.icon.text-icon-default.icon-review-exclamation
+                    Report tester
+        %details.section-collapsable
+          %summary.section-header
+            %h5.section-title Details
+          %dl.list-inline.responsive
+            %dt.label URL
+            %dd
+              %a{href: ""} https://www.url.com
+            %dt.label Steps
+            %dd
+              .markdown
+                %ol
+                  %li
+                    Go to
+                    %a{href: ""} https://www.url.com
+                    and login as crowd AUTOMATOR (
+                    %a{href: ""} email@qa.team
+                    \/ abc123 was in my case)
+                  %li Join a project, complete some automation task, and LEAVE the project
+                  %li
+                    Login
+                    %a{href: ""} https://www.url.com
+                    as project owner to perform review (
+                    %a{href: ""} email@qa.team
+                    \/ abc123 was in my case)
+                  %li Start to review the automated task and reject it approval
+            %dt.label Actual result
+            %dd
+              .markdown
+                %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+            %dt.label Expected result
+            %dd
+              .markdown
+                %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
+        %section
+          .section-header
+            %h5.section-title Attachments
+          .attachments
+            .attachment
+              %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
+                %img{src:'/assets/images/placeholders/bugdetails.png'}
+              %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
+            .attachment
+              %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
+              %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+            .attachment
+              %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
+                .attachment-icon.icon-xl.icon-review-xl
+              %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
+        %section
+          .section-header
+            %h5.section-title Reported on
+          .list-devices.mb-sm
+            .device
+              .device-icon.icon-lg.icon-computer-windows-lg
+              .device-info
+                Desktop | Windows 11
+                %ul.browser-list
+                  %li.icon.icon-chrome
+                  %li.icon.icon-edge-chromium
+        %section
+          .section-header
+            %h5.section-title Comments
+          .list-chat-messages
+            .chat-message-item
+              %details.dropdown-actions.chat-avatar
+                %summary
+                  .user-item.linked
+                    %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+                .popover-menu
+                  %a.popover-action{href:'#'}
+                    %span.icon.icon-user-story-test
+                    Tester profile
+                  %a.popover-action{href:'#'}
+                    %span.icon.icon-review-exclamation
+                    Report tester
+              .chat-header
+                2 hours by 
+                .chat-author Message sender
+              .chat-message
+                Here's a commment, chat message or however else you want to call this kind of message.
+              .chat-actions
+                .btn
+                  .icon.icon-heart
+            .chat-message-item.your-message
+              %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+              .chat-header
+                2 hours by 
+                .chat-author You
+              .chat-message
+                Your short chat message with no lorem ipsum.
+              .chat-actions
+                %details.dropdown-actions.chat-message-actions
+                  %summary
+                    .btn
+                      .icon.icon-more
+                  .popover-menu
+                    %a.popover-action{href:'#'}
+                      %span.icon.icon-pencil
+                      Action
+                    %a.popover-action{href:'#'}
+                      %span.icon.icon-remove
+                      Action
+    .listitem-footer
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-check.mr-icon-spacing
+        Accept
+      %a.btn.btn-primary.btn-block{href: ""}
+        %span.icon.icon-cross.mr-icon-spacing
         Reject