testio-tailwind 3.21.0 → 3.23.0

package/src/pages/components/tables_formrow.haml

@@ -1,55 +0,0 @@
----
-tags: ['components']
-title: Table within form
----
-
-%p.mb-xs Tables cannot contain form elements directly, instead wrap the whole table with a form element.
-
-%form
-  %table.table.table-bordered.align-top
-    %thead
-      %th Table header
-      %th Table header
-      %th Table header
-      %th
-    %tbody
-      %tr
-        %td Cell content
-        %td Cell content
-        %td Cell content
-        %td.text-right
-          %details.dropdown-actions.dropright.ml-auto
-            %summary
-              .btn.btn-square
-                %span.icon.text-icon-default.icon-more
-            .popover-menu
-              %a.popover-action{href:'#'}
-                %span.icon.text-icon-default.icon-pencil
-                Edit
-              %a.popover-action{href:'#'}
-                %span.icon.text-icon-default.icon-duplicate
-                Duplicate
-              %a.popover-action{href:'#'}
-                %span.icon.text-icon-default.icon-remove
-                Delete
-      %tr
-        %td
-          %select.tom-select.min-w-spacing-4xl{placeholder: "Please select"}
-            %option{value: ""}
-            %option{value:"Option 1"} Option 1
-            %option{value:"Option 2"} Option 2
-            %option{value:"Option 3"} Option 3
-            %option{value:"Option 4"} ABC
-            %option{value:"Option 5"} DEF
-            %option{value:"Option 6"} WHY
-            %option{value:"Option 7"} XYZ
-        %td
-          %input.form-control.min-w-spacing-4xl{type:'text', placeholder:"Add min-w to avoid squishing"}
-        %td
-          %textarea.form-control.min-w-spacing-4xl{rows:'1', placeholder:"Text area with min-w"}
-        %td.text-right
-          .btn-group.ml-auto
-            %button.btn.btn-primary.btn-square
-              .icon.icon-check
-            %button.btn.btn-danger.btn-square
-              .icon.icon-cross

package/src/pages/examples/layout-actionbar.haml

@@ -1,268 +0,0 @@
----
-layout: page-example.njk
-title: "Layout with actionbar"
-tags: "examples"
----
-
-%main.main-content.main-content-padding
-  %h1.mb-heading Layout with actionbar
-  %section.section
-    %h4.mb-heading Structure
-    .grid.gap-1px.p-xs.bg-gray-lightest.rounded.text-black
-      %p .app-body
-      .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
-      .bg-white.p-xs.pl-md.h-xxl .main-content
-      .bg-info.text-white.p-xs.pl-md.rounded-br .chat-container
-      .bg-petrol.text-white.p-xs.pl-md.rounded-bottom footer.actionbar
-    %h5.mt-md HTML structure
-    %code
-      &#60body class=&quotapp-body&quot&#62
-      %br
-      .ml-md &#60header class=&quotheader&quot&#62
-      .ml-md &#60main class=&quotmain-content&quot&#62
-      .ml-md &#60div class=&quotchat-container&quot&#62
-      .ml-md &#60footer class=&quotactionbar&quot&#62
-      &#60/body&quot&#62
-  %section.section
-    %h2.mb-heading Dummy Content
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-    %p Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
-%footer.actionbar
-  %button.btn.btn-default.btn-primary
-    %span.icon.icon-check-circle-filled.mr-icon-spacing
-    Primary
-  %button.btn.btn-default.btn-secondary
-    %span.icon.icon-check-circle-filled.mr-icon-spacing
-    Secondary
-  %button.btn.btn-default.btn-info
-    %span.icon.icon-check-circle-filled.mr-icon-spacing
-    Info
-  %button.btn-intercom
-    %span.icon.icon-intercom
-.chat-container
-  %details.chat-window
-    %summary.chat-window-header
-      .chat-message-counter 999
-      %a{href:""} #123321
-      .chat-title Chat title
-      %button.btn.btn-xs.btn-ghost-inverted.btn-square
-        .icon.icon-xs.icon-cross
-    .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
-          %span 2 hours by 
-          %span.chat-author Message sender
-        .chat-message
-          Here's a short message.
-        .chat-actions
-          .btn
-            .icon.icon-heart
-      .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
-          %span 2 hours by 
-          %span.chat-author Message sender with a much much longer name
-        .chat-message
-          Here's a short message which you liked.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                1
-              .popover-menu.info
-                .popover-title 1 person likes this
-                .popover-content You
-        .chat-actions
-          .btn
-            .icon.icon-heart-filled
-      .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
-          %span 2 hours by 
-          %span.chat-author Message sender
-        .chat-message
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-        .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
-      .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
-          %span 2 hours by 
-          %span.chat-author Message sender with a much much longer name
-        .chat-message
-          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. 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.
-        .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
-      .chat-message-item.your-message
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by 
-          %span.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
-      .chat-message-item.your-message
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by 
-          %span.chat-author You
-        .chat-message
-          Another message by you with a lot ofLorem 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. 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.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-      .chat-message-item.announcement
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by 
-          %span.chat-author Team Leader
-        .chat-message
-          .message-banner.announcement Announcement
-          %span.text-mentioned @All
-          here's an announcement 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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
-          .chat-message-addons
-            %a.btn{href:""} Show in chat
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-      .chat-message-item
-        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
-        .chat-header
-          %span 2 hours by 
-          %span.chat-author Team Leader
-        .chat-message
-          .message-banner.mentioned You were mentioned
-          %span.text-mentioned @You
-          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-          .chat-message-addons
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-heart-filled
-                10
-              .popover-menu.info
-                .popover-title 10 people like this
-                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
-            %details.popover-wrapper.dropup
-              %summary.btn
-                .icon.icon-verify-check
-                TL
-              .popover-menu.info
-                .popover-title Verified by Team Leader
-                .popover-content Team Leader name
-    %form.chat-window-actions
-      %textarea.form-control{rows:'1', placeholder:"Enter your message"}
-      .btn.btn-sm.btn-square.btn-primary.btn-send-message
-        %input{type:"submit", value:""}

package/src/pages/forms/uploads.pug

@@ -1,101 +0,0 @@
----
-tags: forms
-title: Uploads and attachments
----
-
-.mb-heading
-  p.mb-xs We use <a href="https://www.dropzone.dev/">Dropzone.JS</a> for uploading files. You are viewing dropzone with the following configuration:
-  code
-    |  let dropzone = new Dropzone("#file-upload", {
-    br
-    |   addRemoveLinks: true,
-    |   uploadMultiple: true,
-    |   autoQueue: false,
-    |   dictCancelUpload: "",
-    |	  dictRemoveFile: ""
-    br
-    |  });
-
-.form-grid-single
-  form.dropzone(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
-    .dz-default.dz-message
-      p.dropzone-msg-title Click to upload a file or drag and drop
-      p.dropzone-msg-desc Files up to 10MB
-  .attachments.mt-sm
-    .attachment
-      a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
-        img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
-      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', alt='Bug details')
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-      button.btn.btn-danger.attachment-btn
-        span.icon.text-icon-default.icon-remove
-    .attachment
-      a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
-        span.attachment-icon.icon-xl.icon-review-xl
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-      button.btn.btn-danger.attachment-btn
-        span.icon.text-icon-default.icon-remove
-  .attachments.mt-sm
-    input(type='hidden', name='document[context_attributes][external_attachments_attachment_ids][]', value='', autocomplete='off')
-    .attachment.selectable
-      input#checkable-attachment1(data-checkboxes-target='checkbox', type='checkbox', value='89')
-      label(for="checkable-attachment1")
-        img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
-    .attachment.selectable
-      input#checkable-attachment2(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
-      label(for="checkable-attachment2")
-        img.attachment-thumb(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") 1.png
-    .attachment.selectable
-      input#checkable-attachment3(data-checkboxes-target='checkbox', type='checkbox', value='89')
-      label(for="checkable-attachment3")
-        .attachment-thumb
-          span.attachment-icon.icon-xl.icon-review-xl
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
-    .attachment.selectable
-      input#checkable-attachment4(data-checkboxes-target='checkbox', type='checkbox', value='89', checked='checked')
-      label(for="checkable-attachment4")
-        .attachment-thumb
-          span.attachment-icon.icon-xl.icon-review-xl
-      a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") another-file-type.docx
-
-p.mt-3 Form errors example
-.form-grid-single
-  form.dropzone.field_with_errors(action="/file-upload" class="dropzone" id="my-awesome-dropzone")
-    .dz-default.dz-message
-      p.dropzone-msg-title Click to upload a file or drag and drop
-      p.dropzone-msg-desc Files up to 10MB
-  .form-hint.error
-    You made a mistake, which is why you see this form validation error message with some helpful 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.
-
-.bg-black.p-md.mt-3
-  .form-grid-single
-    form.dropzone.inverted(action="/file-upload" class="dropzone" id="my-awesome-dropzone-inverted")
-      .dz-default.dz-message
-        p.dropzone-msg-title Click to upload a file or drag and drop
-        p.dropzone-msg-desc Files up to 10MB
-    .attachments.mt-sm
-      .attachment.inverted
-        a.attachment-thumb(href="/assets/images/placeholders/bugdetails.png")
-          img(src='/assets/images/placeholders/bugdetails.png', alt='Bug details')
-        a.attachment-name(href="/assets/images/placeholders/bugdetails.png") myfile-name.png
-        button.btn.btn-danger.attachment-btn
-          span.icon.text-icon-default.icon-remove
-
-      .attachment.inverted
-        a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
-          img(src='/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt='Bug details')
-        a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-        button.btn.btn-danger.attachment-btn
-          span.icon.text-icon-default.icon-remove
-
-      .attachment.inverted
-        a.attachment-thumb(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png")
-          span.attachment-icon.icon-xl.icon-review-xl
-        a.attachment-name(href="/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png") myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
-        button.btn.btn-danger.attachment-btn
-          span.icon.text-icon-default.icon-remove