testio-tailwind 3.21.0 → 3.22.0

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

package/src/pages/navigation/tabnavigation.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Tab navigation
 ---
 
+%p.mb-heading Tab navigation component showcasing different states.
 %nav.nav-tabs
   .navlink.active{href:""} Navlink active
   .navlink{href:""} Navlink

package/src/pages/navigation/tabnavigation_actions.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Tab navigation with actions
 ---
 
+%p.mb-heading Tab navigation component with action links showcasing different states.
 %nav.nav-tabs
   .navlinks
     .navlink.active{href:""} Navlink active

package/src/pages/navigation/tabnavigation_pills.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Tab pill navigation
 ---
 
+%p.mb-heading Tab navigation component in pill style showcasing different states.
 %nav.nav-pills
   .navlink.active{href:""} Navlink active
   .navlink{href:""} Navlink

package/src/pages/navigation/tabnavigation_sm.haml

@@ -3,6 +3,7 @@ tags: navigation
 title: Tab navigation SM
 ---
 
+%p.mb-heading Tab navigation component in small size showcasing different states.
 %nav.nav-tabs.sm
   .navlinks
     .navlink.active{href:""} Navlink active

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

@@ -2,6 +2,8 @@
 tags: navigation
 title: Test Header - Tester
 ---
+
+%p.mb-heading Test cycle header component for the Tester UI showcasing different states.
 %p.mb-xs
   %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester
   Invitation, not joined yet 

package/src/pages/tables/index.njk

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

package/src/pages/tables/tables-cellstyle.haml

@@ -0,0 +1,38 @@
+---
+tags: tables
+title: Cell style
+---
+
+%p.mb-heading
+  Adding the class
+  %code.tag .table-cellstyle
+  %span  will give cells a background color. This is used to visually separate rows and columns. You can also use additional classes to communicate status information.
+.overflow-x-auto
+  %table.table-standard.table-cellstyle
+    %thead
+      %tr
+        %th Header
+        %th Header
+        %th Header
+        %th Header
+        %th Header
+        %th Header
+    %tbody
+      %tr
+        %td Example content
+        %td Example content
+        %td Example content
+        %td Example content
+        %td Example content
+        %td Example content
+      %tr
+        %td Example content
+        %td.wrap
+          Add 
+          %code.tag.bg-gray-light .wrap
+          %span  to allow line breaks within a cell.
+          %span Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+        %td.missing Status Missing
+        %td.inprogress Status In progress
+        %td.completed Status Completed
+        %td Example content

package/src/pages/tables/tables-grid.haml

@@ -0,0 +1,31 @@
+---
+tags: tables
+title: Grid tables
+---
+
+%p.mb-heading 
+  Grid tables use CSS Grid to create a table layout. This allows for more control and layout possibilities compared to traditional HTML tables.
+  However you need to define the number of columns manually:
+  %code.tag.mb-heading grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));
+.overflow-x-auto
+  %table.table-cellstyle.table-grid{style: "grid-template-columns: repeat(5, minmax(12rem, 1fr));"}
+    %thead
+      %tr
+        %th Header
+        %th Header
+        %th Header
+        %th Header
+        %th Header
+    %tbody
+      %tr
+        %td Example content
+        %td Example content
+        %td Example content
+        %td Example content
+        %td Example content
+      %tr
+        %td Cell 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.
+        %td Example content
+        %td Example content
+        %td Example content
+        %td Example content