testio-tailwind 3.20.5 → 3.22.0

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

@@ -0,0 +1,45 @@
+---
+layout: page-example.njk
+title: "Actionbar"
+tags: "layouts"
+---
+
+%main.main-content.main-content-padding
+  %h1.mb-heading Layout with actionbar
+  %p.mb-heading This is a layout with an actionbar at the bottom of the page. The actionbar typically contains primary actions that the user can take, such as saving changes or submitting a form. This layout is useful for pages where you want to keep important actions easily accessible to the user.
+  %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

package/src/pages/{examples → layouts}/layout-basic.haml

@@ -1,11 +1,12 @@
 ---
 layout: page-example.njk
-title: "Layout basic"
-tags: "examples"
+title: "Basic"
+tags: "layouts"
 ---
 
 %main.main-content.main-content-padding
   %h1.mb-heading Basic layout
+  %p.mb-heading This is the basic layout structure used throughout the application. It consists of a header and a main content area.
   %section.section
     %h4.mb-heading Structure
     .grid.gap-1px.p-xs.bg-gray-lightest.rounded.text-black

package/src/pages/{examples → layouts}/layout-chat.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example-tester.njk
-title: "Layout chat page"
-tags: "examples"
+title: "Chat page"
+tags: "layouts"
 ---
 
 %nav.sidebar.tester{arialabel:'Sidebar'}
@@ -54,6 +54,7 @@ tags: "examples"
     .navlink.disabled{href:""} Disabled
 %main.main-content.main-content-padding
   %h1.mb-heading Layout chat page
+  %p.mb-heading This is the layout for a chat page within the tester UI. In addition to other basic layout elements it contains a floating chat input at the bottom of the main content area.
   %section.section
     %section
       .section-header

package/src/pages/{examples/layout-sidebar-actionbar-metasidebar.haml → layouts/layout-chatwindow.haml}

@@ -1,7 +1,7 @@
 ---
 layout: page-example.njk
-title: "Layout with sidebar, metasidebar and actionbar"
-tags: "examples"
+title: "Full layout plus chat window"
+tags: "layouts"
 ---
 
 %nav.sidebar{arialabel:'Sidebar'}
@@ -33,6 +33,7 @@ tags: "examples"
     Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
 %main.main-content.main-content-padding
   %h1.mb-heading Layout with sidebar, metasidebar and actionbar
+  %p.mb-heading This is a layout that includes a sidebar for navigation, a metasidebar for additional information or actions, and an actionbar at the bottom for primary actions. In addition to these elements, it also features a chat container for real-time communication. This layout is ideal for applications that require multiple interactive components while maintaining a clean and organized interface.
   %section.section
     .grid.gap-1px.p-xs.bg-gray-lightest.rounded
       %p .app-body

package/src/pages/{examples → layouts}/layout-customer.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example-customer.njk
-title: "Layout Customer UI"
-tags: "examples"
+title: "Customer UI"
+tags: "layouts"
 ---
 
 %nav.sidebar.customer.ds-removethisclass-flex{arialabel:'Sidebar'}
@@ -139,6 +139,7 @@ tags: "examples"
 
 %main.main-content.main-content-padding
   %h1.mb-heading Layout Customer UI
+  %p.mb-heading This is a layout for the Customer UI. It includes a sidebar for navigation, a metasidebar for additional information or actions, and an actionbar at the bottom for primary actions. 
   %section.section
     .grid.gap-1px.p-xs.bg-gray-lightest.rounded
       %p .app-body

package/src/pages/{examples → layouts}/layout-form-sidebar-actionbar-metasidebar.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example.njk
-title: "Form layout with sidebar, metasidebar and actionbar"
-tags: "examples"
+title: "Form page"
+tags: "layouts"
 ---
 
 %nav.sidebar{arialabel:'Sidebar'}
@@ -34,6 +34,7 @@ tags: "examples"
 %form.form-page-wrapper
   .main-content
     %h1.mb-heading Form layout with sidebar, metasidebar and actionbar
+    %p.mb-heading This is a layout for the case when your whole page is a form. It includes a sidebar for navigation, a metasidebar for additional information or actions, and an actionbar at the bottom for form submission and other actions.
     %section.section
       .grid.gap-1px.p-xs.bg-gray-lightest.rounded
         %p .app-body
@@ -70,8 +71,8 @@ tags: "examples"
         %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
-    %input.btn.btn-default.btn-primary{type:"submit", value:"Submit"}
-    %button.btn.btn-default.btn-secondary
+    %input.btn.btn-inverted{type:"submit", value:"Submit"}
+    %button.btn.btn-secondary
       %span.icon.icon-check-circle-filled.mr-icon-spacing
       Secondary action
     %button.btn-intercom
@@ -87,227 +88,3 @@ tags: "examples"
       %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
-.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/{examples → layouts}/layout-manager.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example-manager.njk
-title: "Layout Team Leader UI"
-tags: "examples"
+title: "Manager UI"
+tags: "layouts"
 ---
 
 %nav.sidebar.manager.ds-removethisclass-flex{arialabel:'Sidebar'}
@@ -48,6 +48,7 @@ tags: "examples"
 
 %main.main-content.main-content-padding
   %h1.mb-heading Layout Team Leader UI
+  %h1.mb-heading This is a layout for the Manger, CSM and Team Leader UI. It includes a sidebar for navigation, a metasidebar for additional information or actions, and an actionbar at the bottom for primary actions.
   %section.section
     .grid.gap-1px.p-xs.bg-gray-lightest.rounded
       %p .app-body

package/src/pages/{examples → layouts}/layout-metasidebar.haml

@@ -1,11 +1,12 @@
 ---
 layout: page-example.njk
-title: "Layout with metasidebar"
-tags: "examples"
+title: "Metasidebar"
+tags: "layouts"
 ---
 
 %main.main-content.main-content-padding
   %h1.mb-heading Layout with metasidebar
+  %p.mb-heading This is a layout that includes a metasidebar alongside the main content area. The metasidebar is typically used to display additional information, tools, or actions related to the main content. This layout is useful for pages where you want to provide users with supplementary content without cluttering the main content area.
   %section.section
     .grid.gap-1px.p-xs.bg-gray-lightest.rounded
       %p .app-body

package/src/pages/{examples → layouts}/layout-sidebar.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example.njk
-title: "Layout with sidebar"
-tags: "examples"
+title: "Sidebar"
+tags: "layouts"
 ---
 
 %nav.sidebar{arialabel:'Sidebar'}
@@ -33,6 +33,7 @@ tags: "examples"
     Navlink with a long title to see how things are breaking into several lines and don't cause a broken layout
 %main.main-content.main-content-padding
   %h1.mb-heading Layout with sidebar
+  %p.mb-heading This is a layout that includes a sidebar for navigation alongside the main content area. The sidebar typically contains links to different sections or pages within the application, allowing users to easily navigate through the interface. 
   %section.section
     .grid.gap-1px.p-xs.bg-gray-lightest.rounded.text-black
       %p .app-body

package/src/pages/{examples → layouts}/layout-tester.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example-tester.njk
-title: "Layout Tester UI"
-tags: "examples"
+title: "Tester UI"
+tags: "layouts"
 ---
 
 %nav.sidebar.tester{arialabel:'Sidebar'}
@@ -54,6 +54,7 @@ tags: "examples"
     .navlink.disabled{href:""} Disabled
 %main.main-content.main-content-padding
   %h1.mb-heading Layout Tester UI
+  %p.mb-heading This is a layout for the Tester UI. It includes a sidebar for navigation, a header with test information and actions, a metasidebar for additional information or actions, and an actionbar at the bottom for primary actions.
   %section.section
     .grid.gap-1px.p-xs.bg-gray-lightest.rounded
       %p .app-body

package/src/pages/{examples → layouts}/splitview-metasidebar.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example.njk
-title: "Splitview Layout with metasidebar"
-tags: "examples"
+title: "Splitview with metasidebar"
+tags: "layouts"
 ---
 %nav.sidebar{arialabel:'Sidebar'}
   %a.navlink.active{href:'#'}
@@ -34,7 +34,7 @@ tags: "examples"
 %main.splitview-layout#ds-splitview-demo
   .splitview-header
     %h1 Splitview layout
-    %p This is the header which will be independent from the 2 columns.
+    %p This is a splitview layout with an additional metaside bar, allowing for secondary content related to the selected item. 
   .splitview-list-header
     .form-check.sm
       %input{type:'checkbox'}

package/src/pages/{examples → layouts}/splitview-testcases.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example.njk
 title: "Splitview Test Case Executions"
-tags: "examples"
+tags: "layouts"
 ---
 %nav.sidebar{arialabel:'Sidebar'}
   %a.navlink.active{href:'#'}
@@ -33,7 +33,7 @@ tags: "examples"
 %main.splitview-layout#ds-splitview-demo
   .splitview-header
     %h1 Splitview layout
-    %p This is the header which will be independent from the 2 columns.
+    %p This is a specialized splitview layout with nested elements, designed specifically for displaying test case executions. The left panel features a list of test case executions, while the right panel provides detailed information about the selected execution. Both panel includes nested list items allowing for multiple levels of hierarchy. Both panels have their own dedicated actionbars for context-specific actions, enhancing user interaction and workflow efficiency.
   .splitview-list-header
     %h3.splitview-list-header-title 4 Executions
     .splitview-list-header-actions

package/src/pages/{examples → layouts}/splitview.haml

@@ -1,7 +1,7 @@
 ---
 layout: page-example.njk
-title: "Splitview Layout"
-tags: "examples"
+title: "Splitview"
+tags: "layouts"
 ---
 %nav.sidebar{arialabel:'Sidebar'}
   %a.navlink.active{href:'#'}
@@ -33,7 +33,7 @@ tags: "examples"
 %main.splitview-layout#ds-splitview-demo
   .splitview-header
     %h1 Splitview layout
-    %p This is the header which will be independent from the 2 columns.
+    %p This is a splitview layout , allowing users to view and interact with two related sections of content side by side. The left contains a list or overview of items, while the right pane displays detailed information about the selected item from the list. Both panels have their own dedicated actionbar. This layout is particularly useful for applications that require efficient navigation and quick access to detailed information.
   .splitview-list-header
     .form-check.sm
       %input{type:'checkbox'}

package/src/pages/navigation/header-manager.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Header - Manager
 ---
 
+%p.mb-heading Header for the Manager UI.
 %nav.header.manager
   .navlinks.logo-wrapper
     %a.navlink.header-logo{href:'#'}

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

@@ -3,6 +3,7 @@ tags: navigation
 title: Header - Tester
 ---
 
+%p.mb-heading Header for the Tester UI for freelancers.
 %nav.header.tester
   .navlinks.logo-wrapper
     %a.navlink.header-logo{href:'#'}

package/src/pages/navigation/header.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Header
 ---
 
+%p.mb-heading Header component with navigation links, dropdowns, and responsive behavior.
 %nav.header
   .navlinks.logo-wrapper
     %a.navlink.header-logo{href:'#'}

package/src/pages/navigation/header_customer.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Header - Customer
 ---
 
+%p.mb-heading Header for the Customer UI.
 %nav.header.customer
   .navlinks.logo-wrapper
     %a.navlink.header-logo{href:'#'}

package/src/pages/navigation/header_tester_epam.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Header - EPAM Tester
 ---
 
+%p.mb-heading Header for the Tester UI for EPAM testers.
 %nav.header.tester
   .navlinks.logo-wrapper
     %a.navlink.header-logo{href:'#'}

package/src/pages/navigation/product_dropdown.haml

@@ -2,6 +2,8 @@
 tags: navigation
 title: Customer product dropdown
 ---
+
+%p.mb-heading Product dropdown in the Customer UI.
 .header.customer
   .navlinks.logo-wrapper
     %a.navlink.header-logo{href:'#'}

package/src/pages/navigation/radio_tabs.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Radio tabs
 ---
 
+%p.mb-heading Radio tabs allow users to switch between different views or sections within the same context. Only one tab can be active at a time.
 .radio-tabs
   %input.radio-tab#tab1{checked: "checked", name: "tabs", tabindex: "1", type: "radio"}
   %label.radio-tab-btn{for: "tab1"} Tab One

package/src/pages/navigation/sidebar-manager.haml

@@ -1,8 +1,9 @@
 ---
 tags: navigation
-title: Sidebar - Teamleader
+title: Sidebar - Manager
 ---
 
+%p.mb-heading Sidebar navigation for the Manager UI.
 %nav.sidebar.manager.ds-removethisclass-flex{arialabel:'Sidebar'}
   %a.navlink.active{href:'#'}
     %span.icon.icon-home

package/src/pages/navigation/sidebar-tester-elements.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Sidebar - Tester - Elements
 ---
 
+%p.mb-heading Sidebar navigation for the Tester UI for freelancers, showcasing various elements.
 %nav.sidebar.tester.ds-removethisclass-flex{arialabel:'Sidebar'}
   .profilepicture-wrapper
     %details.profilepicture-actions

package/src/pages/navigation/sidebar-tester-seatlimitation.haml

@@ -3,7 +3,7 @@ tags: navigation
 title: Sidebar - Tester - seat limitation
 ---
 
-%p.mb-heading Tester sidebar with seat limitation.
+%p.mb-heading Sidebar navigation for the Tester UI with seat limitation and corresponding elements.
 %nav.sidebar.tester.ds-removethisclass-flex{arialabel:'Sidebar'}
   .profilepicture-wrapper
     %details.profilepicture-actions

package/src/pages/navigation/sidebar-tester.haml

@@ -3,7 +3,7 @@ tags: navigation
 title: Sidebar - Tester
 ---
 
-%p.mb-heading Tester sidebar with no seat limitation
+%p.mb-heading Sidebar navigation for the Tester UI with no seat limitation.
 %nav.sidebar.tester.ds-removethisclass-flex{arialabel:'Sidebar'}
   .profilepicture-wrapper
     %details.profilepicture-actions

package/src/pages/navigation/sidebar.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Sidebar
 ---
 
+%p.mb-heading Sidebar navigation for the general UI.
 %nav.sidebar.ds-removethisclass-flex{arialabel:'Sidebar'}
   %a.navlink.active{href:'#'}
     %span.icon.icon-home

package/src/pages/navigation/sidebar_collapsables.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Sidebar colored collapsables
 ---
 
+%p.mb-heading Sidebar with colored collapsable sections to organize and group navigation links.
 %nav.sidebar.customer.ds-removethisclass-flex{arialabel:'Sidebar'}
   .navlinks
     %details

package/src/pages/navigation/sidebar_customer.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Sidebar - Customer
 ---
 
+%p.mb-heading Sidebar navigation for the Customer UI.
 %nav.sidebar.customer.ds-removethisclass-flex{arialabel:'Sidebar'}
   .profilepicture-wrapper
     %details.profilepicture-actions