testio-tailwind 3.21.0 → 3.23.0

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

@@ -0,0 +1,77 @@
+---
+tags: navigation
+title: Centered header
+---
+
+%p.mb-heading Header component with centered elements.
+%nav.header.centered
+  .header-wrapper
+    .navlinks.logo-wrapper
+      %a.navlink.header-logo{href:'#'}
+    .navlinks.left
+      %a.navlink.active{href:'#'} Navlink active
+      %a.navlink{href:'#'} Navlink
+      %a.navlink{href:'#'}
+        %span.icon.icon-check-circle-filled 
+        %span Navlink
+      %details.header-dropdown
+        %summary.navlink Collapsable
+        .dropdown-menu
+          %a.navlink{href:'#', role:'menuitem'}
+            %span.icon.icon-user  
+            Dropdown-item
+          %a.navlink{href:'#', role:'menuitem'}
+            %span.icon.icon-cog  
+            Dropdown-item
+          %a.navlink{href:'#', role:'menuitem'}
+            %span.icon.icon-shutdown 
+            Dropdown-item with a longer text to see how things break and behave
+      %a.navlink.responsive-label{href:'#'}
+        %span.icon.icon-check-circle-filled 
+        %span Responsive label
+    %details.mobile-links
+      %summary.mobile-menu-btn
+        .navlink
+          %span.sr-only Open main menu
+          %span.icon.icon-menu{ariahidden:'true'}
+      .mobile-menu.sidebar
+        %a.navlink.active{href:'#'}
+          %span.navlink-badge.icon.icon-home
+          Navlink active
+        %a.navlink{href:'#'}
+          %span.navlink-badge.icon.icon-plus
+          Add project
+        %details
+          %summary.navlink
+            %span.icon.icon-product
+            Collapsable
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink{href:'#'}
+            %span.icon.icon-test
+            Navlink child
+          %a.navlink.active{href:'#'}
+            %span.icon.icon-test
+            Active child
+    .navlinks.right
+      %details.header-dropdown.user-menu
+        %summary.btn-profile.navlink
+          %span.sr-only Open user menu
+          %img.user-profile{src:'/assets/images/placeholders/profile_supergirl.png', alt:''}
+          .user-details
+            .profile-role Admin
+            .profile-name Anja Berger
+        .dropdown-menu.profile-dropdown{role:'menu', ariaorientation:'vertical', arialabelledby:'user-menu'}
+          %a.dropdown-link{href:'#', role:'menuitem'}
+            %span.icon.icon-user  
+            Your Profile
+          %a.dropdown-link{href:'#', role:'menuitem'}
+            %span.icon.icon-cog  
+            Settings
+          %a.dropdown-link{href:'#', role:'menuitem'}
+            %span.icon.icon-shutdown
+            Sign out

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

package/src/pages/tables/tables.haml

@@ -0,0 +1,16 @@
+---
+tags: tables
+title: Standard table
+---
+
+%p.mb-heading A standard table with basic styling and a cell with buttons.
+%table.table
+  %tr
+    %td Cell content
+    %td Cell content
+    %td Cell content
+  %tr
+    %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing.
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action

package/src/pages/tables/tables_alternating.haml

@@ -0,0 +1,27 @@
+---
+tags: tables
+title: Striped rows
+---
+
+%p.mb-heading Table with alternating background colors for rows
+%table.table.table-striped
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %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. 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.
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action

package/src/pages/tables/tables_borders.haml

@@ -0,0 +1,22 @@
+---
+tags: tables
+title: Borders
+---
+
+%p.mb-heading Table with borders
+%table.table.table-bordered
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %tr
+    %td Cell content
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action
+  %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. 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.
+    %td Cell content
+    %td.cell-with-buttons
+      %button.btn.btn-primary action

package/src/pages/tables/tables_cells.haml

@@ -0,0 +1,50 @@
+---
+tags: tables
+title: Cell behavior
+---
+
+%p.mb-heading
+  Using the class 
+  %code.tag table-standard
+  will make the last cell in a row take up all the available space. All previous cells will be as wide as their content.
+
+%table.table-standard.table-cellstyle
+  %tbody
+    %tr
+      %td A cell with some lorem ipsum
+      %td Cell content
+      %td A small cell
+    %tr
+      %td This cell will take as much space as it's content
+      %td Cell content
+      %td The last cell will take up all the free space
+.py-sm
+%table.table-standard.table-cellstyle
+  %tbody
+    %tr
+      %td.cell-full-width
+        Add 
+        %code.tag.bg-gray-light .cell-full-width
+        to let a cell take all the available space.
+      %td.wrap.min-w-12
+        Add 
+        %code.tag.bg-gray-light .wrap
+        to allow line breaks within a cell. 
+      %td Another cell content
+      %td € 40.00
+    %tr
+      %td.cell-full-width.pre
+        %p Add 
+        %code.tag.bg-gray-light .pre
+        %br
+        to show preformatted white space.
+        | Multi 
+        | Line 
+        | textbox
+        | Cat and dog
+      %td.wrap.min-w-spacing-2xl
+        Wrapping cells need a 
+        %code.tag.bg-gray-light .min-w
+        rule to not be squished. 
+      %td Another cell content
+      %td € 999.00

package/src/pages/tables/tables_footer.haml

@@ -0,0 +1,27 @@
+---
+tags: tables
+title: Footer
+---
+
+%p.mb-heading Table with header and footer
+%table.table.table-bordered.table-striped
+  %thead
+    %th Table header
+    %th Table header
+    %th Table header
+  %tbody
+    %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. 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.
+      %td Cell content
+      %td.cell-with-buttons
+        %button.btn.btn-primary action
+    %tr
+      %td Cell content
+      %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. 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.
+      %td.cell-with-buttons
+        %button.btn.btn-primary action
+  %tfoot
+    %tr
+      %td Table footer
+      %td Table footer
+      %td Table footer

package/src/pages/tables/tables_formrow.haml

@@ -0,0 +1,31 @@
+---
+tags: tables
+title: Table within form
+---
+
+%p.mb-xs Tables cannot contain form elements, instead wrap the whole table with a form element.
+
+%form
+  %table.table.table-bordered.align-top
+    %tbody
+      %tr
+        %td
+          %select.tom-select.min-w-spacing-3xl{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-3xl{type:'text', placeholder:"Add min-w to avoid squishing"}
+        %td
+          %textarea.form-control.min-w-spacing-3xl{rows:'1', placeholder:"Text area with min-w"}
+        %td.text-right
+          .btn-group.ml-auto
+            %button.btn.btn-success.btn-square
+              .icon.icon-check
+            %button.btn.btn-danger.btn-square
+              .icon.icon-cross

package/src/pages/tables/tables_header.haml

@@ -0,0 +1,22 @@
+---
+tags: tables
+title: Header
+---
+
+%p.mb-heading Table with header
+%table.table.table-bordered.table-striped
+  %thead
+    %th Table header
+    %th Table header
+    %th Table header
+  %tbody
+    %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. 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.
+      %td Cell content
+      %td
+        %button.btn.btn-primary action
+    %tr
+      %td Cell content
+      %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. 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.
+      %td
+        %button.btn.btn-primary action

package/src/pages/{components → tables}/tables_linked.haml

@@ -1,23 +1,24 @@
 ---
-tags: components
-title: Tables with linked content
+tags: tables
+title: Linked cells and rows
 ---
 
 %p.mb-heading
-  Individual cells can be linked with JS. Add the class .linked-cell to highlight it on hover.
-  %br
-  If you want to highlight a whole row, but still have action buttons, use the class .highlight-parent-row.
-%table.table.table-bordered.table-striped
-  %thead
-    %th Table header
-    %th Table header
-    %th Table header
+  %span Individual cells can be linked with Javascript. Add the class 
+  %code.tag .linked-cell 
+  %span to highlight it on hover.
+%table.table.table-bordered
   %tbody
     %tr
       %td.linked-cell{onclick: "location.href='https://test.io'"} Linked cell
       %td.linked-cell{onclick: "location.href='https://test.io'"} Linked cell
       %td.cell-with-buttons
         %a.btn.btn-primary{href:"#"} action
+%p.mb-heading
+  %span If you want to highlight a whole row, but still have action buttons, use the class 
+  %code.tag .highlight-parent-row.
+%table.table.table-bordered
+  %tbody
     %tr
       %td.highlight-parent-row{onclick: "location.href='https://test.io'"} Highlight parent
       %td.highlight-parent-row{onclick: "location.href='https://test.io'"} Highlight parent

package/src/pages/typography/link_with_icon.haml

@@ -3,10 +3,18 @@ tags: typography
 title: Link with icon
 ---
 
+%p.mb-heading This component provides a solution for the common usecase to have links with icons.
 %a.link-with-icon{href:""}
   .icon.icon-exclamation-circle
-  All approved testers must complete this course to achieve bronze level and above.
+  Link text
 .pt-xs
 %a.link-with-icon{href:""}
   .icon.icon-exclamation-circle
-  All approved testers will have a one-month transition period to complete it. If they do not pass, even Diamond testers will be downgraded to copper level.
+  A longer link text that might wrap onto multiple lines to demonstrate proper alignment of the icon with the text content.
+%p.my-heading As an alternative consider the use of ghost buttons.
+%a.btn.btn-ghost{href:""}
+  .icon.icon-exclamation-circle.mr-icon-spacing
+  Button
+%a.btn.btn-ghost.btn-sm{href:""}
+  .icon.icon-exclamation-circle.mr-icon-spacing
+  Button SM

package/src/pages/typography/linked_icon.haml

@@ -3,8 +3,14 @@ tags: typography
 title: Linked icon
 ---
 
+%p.mb-heading This component provides a solution for the common usecase to have linked icons.
 %a.linked-icon{href:""}
   .icon.icon-exclamation-circle
 .pt-xs
 %a.linked-icon{href:""}
   .icon.icon-exclamation-circle-filled
+%p.my-heading As an alternative consider the use of square ghost buttons. They offer a larger clickable area.
+%a.btn.btn-square.btn-ghost{href:""}
+  .icon.icon-exclamation-circle
+%a.btn.btn-square.btn-ghost.btn-sm{href:""}
+  .icon.icon-exclamation-circle

package/src/pages/typography/section_header.haml

@@ -3,6 +3,7 @@ tags: typography
 title: Section header
 ---
 
+%p.mb-heading This component is used to separate different sections of a page with a header and an optional label.
 %section
   .section-header
     %h1.section-title Section header with h1

package/src/pages/typography/section_header_actions.haml

@@ -3,6 +3,7 @@ tags: typography
 title: Section header with actions
 ---
 
+%p.mb-heading This component is used to separate different sections of a page with a header and action links or icons.
 %section
   .section-header
     %h1.section-title Section with action h1

package/src/pages/typography/text_with_icon.haml

@@ -3,10 +3,11 @@ tags: typography
 title: Text with icon
 ---
 
+%p.mb-heading This component provides a solution for the common usecase to have text with icons.
 .text-with-icon
   .icon.icon-exclamation-circle
-  All approved testers must complete this course to achieve bronze level and above.
+  Example text
 .pt-xs
 .text-with-icon
   .icon.icon-exclamation-circle
-  All approved testers will have a one-month transition period to complete it. If they do not pass, even Diamond testers will be downgraded to copper level.
+  A longer example text that might wrap onto multiple lines to demonstrate proper alignment of the icon with the text content.