testio-tailwind 3.20.5 → 3.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.20.5",
+	"version": "3.22.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",
@@ -38,6 +38,7 @@
 		"autosize": "^5.0.1",
 		"dropzone": "^6.0.0-beta.2",
 		"echarts": "^5.6.0",
+		"flatpickr": "^4.6.13",
 		"hamljs": "^0.6.2",
 		"html-minifier-terser": "^7.2.0",
 		"jquery": "^3.6.0",

package/src/_data/navigation.json

@@ -20,6 +20,10 @@
       "text": "Forms",
       "url": "/forms/"
     },
+    {
+      "text": "Tables",
+      "url": "/tables/"
+    },
     {
       "text": "Charts",
       "url": "/charts/"

package/src/_includes/header.njk

@@ -19,12 +19,12 @@
       </div>
     </details>
     <details class="header-dropdown dropright">
-      <summary class="navlink">Examples</summary>
+      <summary class="navlink">Layouts</summary>
       <div class="dropdown-menu">
-        {% for examples in collections.examples %}
-          <a href="{{ examples.url }}"
+        {% for layouts in collections.layouts %}
+          <a href="{{ layouts.url }}"
               class="dropdown-link">
-            {{ examples.data.title }}
+            {{ layouts.data.title }}
           </a>
         {% endfor %}
       </div>
@@ -50,10 +50,10 @@
     </details>
       <details class="navlink-container">
         <summary class="navlink">Examples</summary>
-        {% for examples in collections.examples %}
-          <a href="{{ examples.url }}"
-              class="navlink">
-            {{ examples.data.title }}
+        {% for layouts in collections.layouts %}
+          <a href="{{ layouts.url }}"
+              class="dropdown-link">
+            {{ layouts.data.title }}
           </a>
         {% endfor %}
       </details>

package/src/_includes/page-with-sidebar.njk

@@ -36,7 +36,16 @@
             Show source
           </summary>
           <div class="ds-card-codeexample">
-            <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
+            <nav class="nav-pills">
+              <button class="navlink active code-tab-toggle" data-format="html">
+                HTML
+              </button>
+              <button class="navlink code-tab-toggle" data-format="haml">
+                HAML
+              </button>
+            </nav>
+            <pre><code class="html-preview code-format-html">{{ section.templateContent | trim }}</code></pre>
+            <pre style="display: none;"><code class="haml-preview code-format-haml">{{ section.templateContent | convertToHaml | trim }}</code></pre>
           </div>
         </details>
       </section>

package/src/assets/scripts/app.js

@@ -204,3 +204,46 @@ if (document.getElementById("echarts-testinator")) {
 if (document.getElementById("echarts-testinator-empty")) {
   createChartDonut("echarts-testinator-empty", dataTestinatorEmpty, "100", "Total check executions", true,  colorLabelDark, colorValueDark);
 }
+
+// Code format toggle (HTML/HAML)
+document.querySelectorAll('.code-tab-toggle').forEach((button) => {
+  button.addEventListener('click', function(e) {
+    e.preventDefault();
+    const format = this.getAttribute('data-format');
+    const container = this.closest('.ds-card-codeexample');
+    
+    // Update active navlink
+    container.querySelectorAll('.code-tab-toggle').forEach(btn => {
+      btn.classList.remove('active');
+    });
+    this.classList.add('active');
+    
+    // Show/hide code blocks
+    const htmlBlock = container.querySelector('.code-format-html');
+    const hamlBlock = container.querySelector('.code-format-haml');
+    
+    if (format === 'html') {
+      htmlBlock.parentElement.style.display = 'block';
+      hamlBlock.parentElement.style.display = 'none';
+    } else {
+      htmlBlock.parentElement.style.display = 'none';
+      hamlBlock.parentElement.style.display = 'block';
+    }
+  });
+});
+
+// Flatpickr
+
+import flatpickr from "flatpickr";
+
+flatpickr(".flatpickr", {
+  dateFormat: "Y-m-d",
+  altInput: true,
+  altFormat: "F j, Y",
+});
+
+flatpickr(".flatpickr-time", {
+  enableTime: true,
+  dateFormat: "Y-m-d H:i",
+  altInput: true,
+});

package/src/assets/stylesheets/app.css

@@ -17,6 +17,8 @@
 @import './plugin_themes/markdown_trix_styles.css' layer(components);
 @import './plugin_themes/pagy.css' layer(components);
 @import './plugin_themes/dropzone.css' layer(components);
+@import 'flatpickr/dist/flatpickr.css' layer(components);
+@import './plugin_themes/flatpickr.css' layer(components);
 
 /*//// Components ////*/
 @import './components/fonts.css' layer(components);

package/src/assets/stylesheets/components/designsystem/designsystem-styles.css

@@ -93,6 +93,8 @@
   @apply mb-1 p-md max-w-none bg-card text-appbody-textcolor dark:text-gray-200 rounded;
 }
 
-.html-preview {
+.html-preview,
+.haml-preview {
   @apply break-all whitespace-break-spaces text-xs;
-}
+}
+

package/src/assets/stylesheets/components/forms.css

@@ -78,17 +78,6 @@ textarea.form-control {
   @apply absolute flex justify-center items-center h-btn bottom-0 right-0 px-xs;
 }
 
-.form-date::before {
-  @apply inline-block absolute bottom-xs right-xs h-icon w-icon bg-gray-darker;
-  content: "";
-  mask-image: url("/assets/images/icons/calendar.svg");
-  mask-repeat: no-repeat;
-}
-
-.form-date .form-control {
-  @apply pr-lg;
-}
-
 .form-group.inverted .form-control {
   @apply text-white border-gray-darker bg-transparent dark:border-bordercolor dark:bg-card;
 }
@@ -109,4 +98,23 @@ textarea.form-control {
   &::before {
     @apply bg-gray-light;
   }
+}
+
+
+/*///// Form date /////*/
+
+.form-date {
+  @apply relative;
+}
+
+.form-date input[type="date"]::-webkit-calendar-picker-indicator,
+.form-date input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  @apply absolute top-0 right-0 opacity-0 w-btn h-btn cursor-pointer;
+}
+
+.form-date::after {
+  @apply absolute top-xs right-sm w-icon h-icon pointer-events-none bg-primary;
+  content: "";
+  mask-image: url("/assets/images/icons/calendar.svg");
+  mask-repeat: no-repeat;
 }

package/src/assets/stylesheets/components/tables.css

@@ -39,6 +39,10 @@
   }
 }
 
+.table-striped tbody tr:nth-of-type(even) {
+  @apply bg-gray-100 dark:bg-gray-700;
+}
+
 
 .table td {
 

package/src/assets/stylesheets/plugin_themes/flatpickr.css

@@ -0,0 +1,86 @@
+.flatpickr.input,
+.flatpickr.input[readonly],
+.flatpickr-time.input,
+.flatpickr-time.input[readonly],
+.form-group.inverted .flatpickr.input[readonly],
+.form-group.inverted .flatpickr-time.input[readonly] {
+  @apply cursor-pointer bg-transparent;
+}
+
+.form-group.inverted .flatpickr.input[readonly],
+.form-group.inverted .flatpickr-time.input[readonly] {
+  @apply border-gray-700;
+}
+
+.flatpickr-time {
+  @apply text-left;
+}
+
+.flatpickr-day.selected {
+  @apply bg-info border-none;
+}
+
+.flatpickr-day.selected:hover,
+.flatpickr-day.selected:focus {
+  @apply bg-link-hover;
+}
+
+.flatpickr-months,
+.flatpickr-months .flatpickr-month {
+  @apply rounded-t;
+}
+
+.flatpickr-months .flatpickr-month,
+.flatpickr-weekdays,
+.flatpickr-weekdays .flatpickr-weekday {
+  @apply text-white bg-info;
+}
+
+.flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  @apply fill-white;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  @apply pt-xs;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  @apply bg-link-hover;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  @apply fill-white;
+}
+
+.flatpickr-months .flatpickr-prev-month {
+  @apply rounded-tl;
+}
+
+.flatpickr-months .flatpickr-next-month {
+  @apply rounded-tr;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+  @apply block bg-transparent;
+}
+
+.flatpickr-current-month {
+  @apply flex flex-row;
+}
+
+.flatpickr-current-month .numInputWrapper {
+  @apply w-auto;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+  @apply bg-info text-base;
+}
+
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:hover,
+.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month:focus {
+  @apply bg-link-hover;
+}

package/src/pages/buttons/block.haml

@@ -3,6 +3,7 @@ title: Block Buttons
 tags: button
 ---
 
+%p.mb-heading Block buttons span the full width of their parent container.
 %ul.list-vertical.mb-md
   %li
     %button.btn.btn-block.btn-primary Primary

package/src/pages/buttons/button_group.haml

@@ -3,6 +3,7 @@ title: Button group
 tags: button
 ---
 
+%p.mb-heading Button groups allow you to group a series of buttons together on a single line.
 .btn-group
   %button.btn.btn-primary.btn-square
     .icon.icon-check

package/src/pages/buttons/buttons-lg.haml

@@ -3,6 +3,7 @@ title: LG Buttons
 tags: button
 ---
 
+%p.mb-heading These are larger sized buttons for more prominent icons and actions. The text is placed below the button to create a balanced appearance.
 %ul.list-inline
   %li.btn-lg-wrapper
     %a.btn.btn-lg.btn-square.btn-primary

package/src/pages/buttons/buttons-round.haml

@@ -3,6 +3,7 @@ title: Round buttons
 tags: button
 ---
 
+%p.mb-heading These are rounded buttons with full border radius.
 %ul.list-inline.mb-md
   %li
     %button.btn.rounded-full.btn-primary Primary

package/src/pages/buttons/buttons-sm.haml

@@ -3,6 +3,7 @@ title: Buttons SM
 tags: button
 ---
 
+%p.mb-heading These are smaller sized buttons for tighter spaces or if you want to less prominent buttons.
 %ul.list-inline.mb-md
   %li
     %button.btn.btn-sm.btn-primary Primary

package/src/pages/buttons/buttons-xl.haml

@@ -3,6 +3,7 @@ title: XL Buttons
 tags: button
 ---
 
+%p.mb-heading These are the largest buttons for very prominent actions and maximum visibility. 
 %ul.list-inline
   %li
     %a.btn.btn-xl.btn-primary

package/src/pages/buttons/buttons.haml

@@ -3,6 +3,7 @@ title: Buttons
 tags: button
 ---
 
+%p.mb-heading These are the standard sized buttons used throughout the application.
 %ul.list-inline.mb-md
   %li
     %button.btn.btn-primary Primary

package/src/pages/buttons/buttons_input.haml

@@ -3,6 +3,10 @@ title: Input buttons
 tags: button
 ---
 
+%p.mb-heading
+  %span \ Input buttons can be created using the 
+  %code \ &#60input&#62
+  %span and are often used in forms. 
 %ul.list-inline.mb-md
   %li
     %input.btn.btn-primary{type:'submit', value:'Input btn'}

package/src/pages/buttons/dropdown-menu.haml

@@ -3,19 +3,10 @@ tags: button
 title: Dropdown menu
 ---
 
+%p.mb-heading Dropdown menus are used to group related actions under a single button. They can be aligned in different directions such as down, up, left, and right.
 .flex.justify-between
-  .popover-menu
-    %a.popover-action{href:'#'}
-      %span.icon.text-icon-default.icon-pencil
-      Edit
-    %a.popover-action{href:'#'}
-      %span.icon.text-icon-default.icon-duplicate
-      Duplicate
-    %a.popover-action{href:'#'}
-      %span.icon.text-icon-default.icon-remove
-      Delete
   .px-1
-    %details.dropdown-actions.dropright
+    %details.dropdown-actions
       %summary
         .btn.btn-square.btn-primary
           %span.icon.text-icon-default.icon-more

package/src/pages/buttons/square-buttons.haml

@@ -3,6 +3,7 @@ title: Square Buttons
 tags: button
 ---
 
+%p.mb-heading These are square buttons with equal width and height, used for icon-only buttons. Use them if an icon explains the function well enough and when you want to avoid text repetition.
 %ul.list-inline.mb-md
   %li
     %button.btn.btn-primary.btn-square
@@ -34,6 +35,20 @@ tags: button
   %li
     %button.btn.btn-primary.btn-square{disabled: "disabled"}
       .icon.icon-check-circle
+%p.my-heading Square buttons can also be used in smaller sizes.
+%ul.list-inline.mb-md
+  %li
+    %button.btn.btn-sm.btn-primary.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-sm.btn-secondary.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-sm.btn-success.btn-square
+      .icon.icon-check-circle
+  %li
+    %button.btn.btn-sm.btn-square
+      .icon.icon-check-circle
 
 .bg-actionbar.p-5
   %ul.list-inline

package/src/pages/components/alerts.haml

@@ -3,6 +3,7 @@ tags: components
 title: Alerts
 ---
 
+%p.mb-heading Alerts are used to notify users about important information or actions that require their attention.
 .alert-container
   .alert
     .alert-message Alert

package/src/pages/components/banner_cards.haml

@@ -3,6 +3,7 @@ tags: components
 title: Banner cards
 ---
 
+%p.mb-heading Banner cards are used to display important information or actions to users in a prominent way.
 .banner-card.welcome
   %img.welcome-image{src:"/assets/images/logo-testio/testio_symbol_purpleteal_square.svg"}
   .card-content

package/src/pages/components/card_badges.haml

@@ -3,28 +3,29 @@ tags: components
 title: Card badges
 ---
 
+%p.mb-heading Card badges are small indicators that can be added to card headers to highlight important information or statuses.
 .grid-cards
   .card
     .card-header
       .card-badge
       %h3.card-title Card with badge
     .card-body
-      %p Card-body with some example 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.
+      %p Example 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.
   .card
     .card-header
       .card-badge.success
-      %h3.card-title Card with success badge
+      %h3.card-title Success badge
     .card-body
-      %p Card-body with some example 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.
+      %p Example 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.
   .card
     .card-header
       .card-badge.danger
-      %h3.card-title Card with danger badge
+      %h3.card-title Danger badge
     .card-body
-      %p Card-body with some example 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.
+      %p Example 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.
   .card
     .card-header
       .card-badge.info
-      %h3.card-title Card with info badge
+      %h3.card-title Info badge
     .card-body
-      %p Card-body with some example 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.
+      %p Example 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.

package/src/pages/components/cards.haml

@@ -3,31 +3,22 @@ tags: components
 title: Cards
 ---
 
+%p.mb-heading
+  Cards are versatile UI components used to group related information. They often include headers, body content, and footers with action buttons.
+  Place them inside 
+  %code.tag .grid-cards
+  to receive a responsive grid layout.
 .grid-cards
   .card
-    %details.popover-wrapper.dropright.card-info-popover
-      %summary
-        .btn.btn-sm.btn-square
-          .icon.icon-info
-      .popover-menu.info
-        .popover-title Popover title
-        .popover-content Popover 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.
     .card-header
-      %h3.card-title Card title inside card header
+      %h3.card-title Basic card
     .card-body
-      %p Card-body with some example 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.
+      %p Example 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.
   .card
-    %details.popover-wrapper.dropright.card-info-popover
-      %summary
-        .btn.btn-sm.btn-square
-          .icon.icon-info
-      .popover-menu.info
-        .popover-title Popover title
-        .popover-content Popover 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.
     .card-header
-      %h3.card-title Card title
+      %h3.card-title Card with footer
     .card-body
-      %p Card-body with some example 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.
+      %p Example 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.
     .card-footer
       %a.btn.btn-primary.btn-block{href: ""}
         %span.icon.icon-explorative.mr-icon-spacing
@@ -56,9 +47,10 @@ title: Cards
       .popover-menu.info
         .popover-title Popover title
         .popover-content Popover 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.
+    .card-header
+      %h3.card-title Card with info popover
     .card-body
-      %h3.card-title.mb-heading Card title
-      %p.bg-gray-light.rounded.p-xxs Card-body with some example 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.
+      %p Example 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.
     .card-footer
       %a.btn.btn-primary.btn-block{href: ""}
         %span.icon.icon-explorative.mr-icon-spacing
@@ -87,9 +79,10 @@ title: Cards
       .popover-menu.info
         .popover-title Popover title
         .popover-content Popover 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.
+    .card-header
+      %h3.card-title Centered card content
     .card-body
-      %h3.card-title.mb-heading Center everything
-      %p Card-body with some example 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.
+      %p Example 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.
     .card-footer
       %a.btn.btn-primary.btn-block{href: ""}
         %span.icon.icon-explorative.mr-icon-spacing

package/src/pages/components/cards_customer.haml

@@ -3,6 +3,7 @@ tags: components
 title: Cards Customer Dashboard
 ---
 
+%p.mb-heading Cards for displaying products and their tests on the customer dashboard.
 .grid-productcards
   .card.product-card.product-website
     .card-header

package/src/pages/components/cards_fixedwidth.haml

@@ -3,6 +3,13 @@ tags: components
 title: Cards with fixed width
 ---
 
+%p.mb-heading
+  Cards with fixed width can be created by adding size modifier classes to the card component. Available sizes are 
+  %code.tag .card-sm
+  , 
+  %code.tag .card-md
+  , and 
+  %code.tag .card-lg.
 .list-cards.mb-md
   .card.card-sm
     .card-header

package/src/pages/components/cards_iconheader.haml

@@ -3,6 +3,7 @@ tags: components
 title: Cards with icon header
 ---
 
+%p.mb-heading Cards with icon headers are useful for displaying key metrics or achievements. The icon header draws attention to the card's content, making it ideal for dashboards or summary views.
 .grid-cards-achievements
   .card
     %details.popover-wrapper.dropright.card-info-popover

package/src/pages/components/cards_tester.haml

@@ -3,6 +3,7 @@ tags: components
 title: Cards Tester Dashboard
 ---
 
+%p.mb-heading The Cards Tester Dashboard showcases various tester opportunities and running tests in a card format. Each card provides essential information such as customer name, product title, team leader, test status, and perks associated with the testing opportunity.
 .grid-testercards
   .card.tester-card
     %a.card-header{href:""}

package/src/pages/components/descriptionlist.haml

@@ -3,9 +3,14 @@ tags: components
 title: Description list
 ---
 
+%p.mb-heading Description lists are used to display pairs of terms and their corresponding descriptions. They can be styled in different ways to suit various design needs.
 %section
   .section-header
     %h5.section-title list-inline
+  %p.mb-heading
+    %span Description lists with the 
+    %code.tag .list-inline 
+    %span class display terms and descriptions in a horizontal layout.
   %dl.list-inline
     %dt.label Label
     %dd Content
@@ -22,9 +27,9 @@ title: Description list
   .section-header
     %h5.section-title list-inline responsive
   %p.mb-heading
-    Add the class 
-    %code responsive 
-      to receive vertically aligned columns on smaller screens.
+    %span Add the class 
+    %code.tag .responsive 
+    %span to receive vertically aligned columns on smaller screens.
   %dl.list-inline.responsive
     %dt.label Label
     %dd Content with a bit of Lorem ipsum dolor sit amet.
@@ -40,6 +45,10 @@ title: Description list
 %section.mt-md
   .section-header
     %h5.section-title list-vertical
+  %p.mb-heading
+    %span Description lists with the 
+    %code.tag .list-vertical 
+    %span class display terms and descriptions in a vertical layout.
   %dl.list-vertical
     %dt.label Label
     %dd Content

package/src/pages/components/devices.haml

@@ -3,6 +3,7 @@ tags: components
 title: Devices
 ---
 
+%p.mb-heading Devices component is used to display different devices along with their specifications such as operating system and supported browsers. It can also provide action buttons.
 .list-devices.mb-sm
   .device
     .device-icon.icon-lg.icon-computer-windows-lg

package/src/pages/components/drawer.haml

@@ -3,6 +3,7 @@ tags: components
 title: Drawer
 ---
 
+%p.mb-heading Drawers are used to display additional content or options that slide in from the side of the screen. They can be opened and closed by the user. They work as an alternative to modals.
 %details.drawer-wrapper
   %summary.drawer-trigger
     .btn.btn-primary Open Drawer      

package/src/pages/components/drawer_filter.haml

@@ -3,6 +3,7 @@ tags: components
 title: Drawer for filtering
 ---
 
+%p.mb-heading Drawer filters are used to provide users with filtering options that slide in from the side of the screen. They typically include search functionality and various filter categories.
 %details.drawer-wrapper
   %summary.drawer-trigger
     .btn.btn-primary Open Drawer      

package/src/pages/components/emptystate.haml

@@ -2,6 +2,8 @@
 tags: components
 title: Empty state message
 ---
+
+%p.mb-heading Empty state messages are used to inform users when there is no data to display. They can include different styles and icons to convey various emotions or states.
 .grid.gap-md.grid-cols-1{class:"md:grid-cols-3-auto"}
   .empty-state-message Empty state message. No items here yet.
   .empty-state-message.search Searching empty state message. No items here yet.