testio-tailwind 3.21.0 → 3.22.0

package/src/pages/forms/attachments.pug

@@ -0,0 +1,71 @@
+---
+tags: forms
+title: Attachments
+---
+
+p.mb-heading Attachments components are used to display files that have been uploaded or are available for download. They can include thumbnails, file names, and action buttons such as remove.
+.attachments
+  .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
+p.my-heading Attachments can be selectable, allowing users to choose one or more files.
+.attachments
+  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
+
+.bg-black.p-md.mt-3
+  .attachments
+    .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

package/src/pages/forms/checkboxes.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Checkboxes
 ---
 
+%p.mb-heading Checkboxes allow users to select one or more options from a set. They are commonly used in forms for multiple selections. We offer 2 sizes: default and small (SM).
 .form-grid.single.narrow.mb-3
   .form-check
     %input#check1{type:"checkbox", checked:"true"}

package/src/pages/forms/checkboxes_devices.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Checkboxes for devices
 ---
 
+%p.mb-heading Checkboxes styled for selecting devices.
 .form-grid.single.narrow.mb-3
   .form-check.sm
     %input#devicecheck1{type:"checkbox", checked:"true"}

package/src/pages/forms/date-time.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Date and time inputs
 ---
 
+%p.mb-heading Date and time inputs allow users to select dates and times using native browser controls.
 .form-grid
   .form-group
     %label.form-label Native date input

package/src/pages/forms/dropzone.pug

@@ -0,0 +1,38 @@
+---
+tags: forms
+title: Dropzone
+---
+
+.mb-heading
+  p.mb-xs This component uses <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
+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
+

package/src/pages/forms/flatpickr.haml

@@ -6,7 +6,7 @@ title: Date and time with Flatpickr
 %p.mb-xs
   This example uses 
   %a{href:"https://flatpickr.js.org/"} Flatpickr
-  %span  as a date and date-time picker replacement.
+  %span  as a date and date-time picker replacement giving more control and consistency.
 .form-grid
   .form-group
     %label.form-label Native date input

package/src/pages/forms/form-addon.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Form addon
 ---
 
+%p.mb-heading Form input fields with addons showcasing different styles.
 .form-grid
   .form-group.with-addon
     %label.form-label Input with addon

package/src/pages/forms/form-card.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Form card
 ---
 
+%p.mb-heading A card component containing a form with various input elements.
 .form-card
   .form-card-heading
     .form-card-title Form card title

package/src/pages/forms/form_grid.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Form grid
 ---
 
+%p.mb-heading Form grid layout managing the spacing between the form elements.
 .form-grid
   .bg-card.p-sm.rounded
   .bg-card.p-sm.rounded

package/src/pages/forms/form_hint.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Form hint
 ---
 
+%p.mb-heading Form input fields with various types of hints and error states.
 .form-grid
   .form-group
     %label.form-label Input with form hint

package/src/pages/forms/forms.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Forms
 ---
 
+%p.mb-heading Various form input fields showcasing different states including optional, disabled, and inverted styles.
 .form-grid
   .form-group
     %label.form-label Input

package/src/pages/forms/radiobuttons.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Radiobuttons
 ---
 
+%p.mb-heading Radiobuttons allow users to select one option from a set. They are commonly used in forms for single selections. We offer 2 sizes: default and small (SM).
 .form-grid.single.narrow.mb-3
   .form-radio
     %input#radio1{type:'radio', checked:'true', name:'radio-group', value:'1'}

package/src/pages/forms/rating_scale.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Rating scale
 ---
 
+%p.mb-heading Rating scales allow users to provide feedback, often used in surveys and assessments.
 .form-grid
   .rating-wrapper
     .rating-scale

package/src/pages/forms/search.haml

@@ -3,6 +3,7 @@ tags: "forms"
 title: Search
 ---
 
+%p.mb-heading Various form input fields showcasing different states including optional, disabled, and inverted styles.
 .form-grid
   .form-group
     %label.form-label Search, direct input

package/src/pages/forms/selectable_token.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Selectable token 
 ---
 
+%p.mb-heading Selectable token components are used to make a selection from a set of options, often used in filters or multi-select scenarios.
 %ul.list-inline.flex.mb-3
   %li.selectable-token
     %input#selectabletoken1{type:"checkbox", checked:"true"}

package/src/pages/forms/selectable_token_browsers.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Selectable token for browsers
 ---
 
+%p.mb-heading Selectable token components styled for selecting browsers on different devices.
 %ul
   %li
     %p.mb-xxs Smartphone | iOS 11

package/src/pages/forms/selectable_token_lg.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Selectable token LG
 ---
 
+%p.mb-heading Large selectable tokens allow users to select options in a visually engaging way, often used for categories.
 %ul.list-inline.flex.mb-3
   %li.selectable-token.lg
     %input#selectabletokenlg1{type:"checkbox", checked:"true"}

package/src/pages/forms/selectable_token_xl.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Selectable token XL 
 ---
 
+%p.mb-heading Selectable token XL components are used to make a selection from a set of options, often used in filters or multi-select scenarios. They the most prominent selection component available.
 %ul.list-inline.flex.mb-3
   %li.selectable-token.xl
     %input#selectabletokenxl1{type:"checkbox", checked:"true"}

package/src/pages/forms/textarea.haml

@@ -3,6 +3,10 @@ tags: forms
 title: Textarea
 ---
 
+%p.mb-heading
+  Textareas are multi-line input fields that allow users to enter longer pieces of text. These examples use the 
+  %code.tag autosize
+  %span  library to automatically adjust the height of the textarea based on its content.
 .form-grid.mb-heading
   .form-group
     %label.form-label Textarea

package/src/pages/forms/toggle-buttons.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Toggle buttons 
 ---
 
+%p.mb-heading Toggle button groups allow users to select one option from a set of mutually exclusive options, styled as buttons.
 .toggle-btn-group.mb-1
   .selectable-token
     %input#radiotoggle1{type:'radio', checked:'', name:'radio-togglegroup1', value:'1'}

package/src/pages/forms/toggle-switch.haml

@@ -3,6 +3,7 @@ tags: forms
 title: Toggle switch
 ---
 
+%p.mb-heading Toggle switches allow users to turn an option on or off.
 .form-grid.single.narrow
   .form-toggle
     %label.toggle-switch{for:'toggle1active'}

package/src/pages/forms/trix_editor.pug

@@ -3,6 +3,7 @@ tags: "forms"
 title: Trix Editor
 ---
 
+p.mb-heading Trix editor is a rich text editor for everyday writing. It allows users to format text and include code snippets in a user-friendly way.
 .form-grid
   .form-group.trix-editor
     label.form-label(for='space_branding_full_description') Trix editor

package/src/pages/icons/bug-icons.haml

@@ -3,6 +3,7 @@ tags: icons
 title: Bug icons
 ---
 
+%p.mb-heading Here are bug and other issue and task related icons used throughout our applications. 
 .grid.gap-5.grid-cols-3
   %dl.list-inline
     %dd.icon.icon-functional

package/src/pages/icons/index.njk

@@ -53,20 +53,23 @@ fetchIcons(app)
       <h4 class="section-title">Icon classes</h4>
     </div>
     <div class="grid gap-5 grid-cols-3">
-      <dl class="list-inline">
-        <dd><span class="icon-xxs icon-check-circle-filled"></span></dd>
-        <dt>.icon-xxs</dt>
-        <dd><span class="icon-xs icon-check-circle-filled"></span></dd>
-        <dt>.icon-xs</dt>
-        <dd><span class="icon-sm icon-check-circle-filled"></span></dd>
-        <dt>.icon-sm</dt>
-        <dd><span class="icon icon-check-circle-filled"></span></dd>
-        <dt>.icon</dt>
-        <dd><span class="icon-lg icon-check-circle-filled"></span></dd>
-        <dt>.icon-lg</dt>
-        <dd><span class="icon-xl icon-check-circle-filled"></span></dd>
-        <dt>.icon-xl</dt>
-      </dl>
+      <div>
+        <p class="mb-2">Here are the available icon classes which control the height of the icons.</p>
+        <dl class="list-inline">
+          <dd><span class="icon-xxs icon-check-circle-filled"></span></dd>
+          <dt>.icon-xxs</dt>
+          <dd><span class="icon-xs icon-check-circle-filled"></span></dd>
+          <dt>.icon-xs</dt>
+          <dd><span class="icon-sm icon-check-circle-filled"></span></dd>
+          <dt>.icon-sm</dt>
+          <dd><span class="icon icon-check-circle-filled"></span></dd>
+          <dt>.icon</dt>
+          <dd><span class="icon-lg icon-check-circle-filled"></span></dd>
+          <dt>.icon-lg</dt>
+          <dd><span class="icon-xl icon-check-circle-filled"></span></dd>
+          <dt>.icon-xl</dt>
+        </dl>
+      </div>
       <div>
         <p class="mb-2">Some icons have additional versions which you can use with the suffix <code class="bg-gray-lighter">-lg</code> and <code class="bg-gray-lighter">-xl</code></p>
         <dl class="list-inline">
@@ -100,6 +103,7 @@ fetchIcons(app)
     <div class="section-header">
       <h4 class="section-title">Icon list</h4>
     </div>
+    <p class="mb-heading">Here's a list of all available icons contained in our iconfont.</p>
     <div class="grid grid-cols-3 gap-2 place-items-start pb-10" id="iconList"></div>
   </section>
 

package/src/pages/icons/status-icons.haml

@@ -3,6 +3,7 @@ tags: icons
 title: Status icons
 ---
 
+%p.mb-heading These status icons are used to represent various states or conditions within the complex workflow of our applications.
 %dl.list-inline
   %dd Open, Submitted
   %dl

package/src/pages/layout/app_layout.haml

@@ -3,6 +3,7 @@ tags: layout
 title: App layout structure
 ---
 
+%p.mb-heading This is the basic structure of an application layout, including header, sidebar, main content area, metasidebar, and action bar.
 .grid.gap-1px.p-xs.bg-card.rounded
   %p.mb-heading .app-body
   .p-xs.pl-md.bg-petrol-dark.text-white.rounded-t .header
@@ -16,6 +17,7 @@ title: App layout structure
       .bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
 
 %h5.mt-md HTML structure
+%p.mb-heading The following code snippet illustrates the HTML structure of the app layout components:
 %code
   &#60body class=&quotapp-body&quot&#62
   %br

package/src/pages/layout/margins.haml

@@ -3,6 +3,7 @@ tags: layout
 title: Margins
 ---
 
+%p.mb-heading To provide more consistent margins throughout the application we have a range of custom spacing classes. In addition you can use everything TailWindCSS offers.
 %dl.list-inline
   %dd xxs
   %dt.flex.flex-row.bg-card

package/src/pages/layout/max_width.haml

@@ -3,9 +3,10 @@ tags: layout
 title: Max-width capped
 ---
 
+%p.mb-heading This page demonstrates the use of the .max-w-capped class to limit the maximum width of various elements for improved readability.
 .card.bg-card.p-sm.max-w-capped.mb-spacing
   %p Card with the class .max-width-capped. The card width will be capped to ensure readability. 
-%p.mb-sm.max-w-capped This class should also be applied to text elements to ensure readability in the case of an endless amount 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, 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.
+%p.mb-sm.max-w-capped 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.
 .form-grid.mb-sm.max-w-capped
   .form-group
     %label.form-label Input

package/src/pages/layout/paddings.haml

@@ -3,6 +3,7 @@ tags: layout
 title: Paddings
 ---
 
+%p.mb-heading To provide more consistent padding throughout the application we have a range of custom spacing classes. In addition you can use everything TailWindCSS offers.
 %dl.list-inline
   %dd xxs
   %dt.flex.flex-row.items-start.bg-card

package/src/pages/layout/spacing.haml

@@ -3,6 +3,7 @@ tags: layout
 title: Spacing
 ---
 
+%p.mb-heading To provide more consistent spacing throughout the application we have a range of custom spacing classes. In addition you can use everything TailWindCSS offers.
 %dl.list-inline
   %dd xxs
   %dt

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

@@ -1,7 +1,7 @@
 ---
 layout: page-example-agenticqa.njk
 title: "Agentic QA - Splitview"
-tags: "examples"
+tags: "layouts"
 ---
 
 %main.main-content.centered#ds-splitview-demo

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