testio-tailwind 3.21.0 → 3.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.21.0",
+	"version": "3.22.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

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

@@ -205,6 +205,33 @@ 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";

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/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/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.

package/src/pages/{buttons → components}/info_popover.haml

@@ -1,8 +1,9 @@
 ---
-tags: button
+tags: components
 title: Info popover
 ---
 
+%p.mb-heading Info popovers are used to display additional information related to an element. They can contain titles, content, icons, and actions.
 .flex.justify-between
   .popover-menu.info
     .popover-title Popover title

package/src/pages/components/listitem_with_actionbar.haml

@@ -3,6 +3,7 @@ tags: components
 title: List-item with actionbar
 ---
 
+%p.mb-heading List items with action bars are used to provide a set of actions that can be performed on the list item. The action bar typically appears when the user hovers over or selects the list item, allowing for quick access to relevant actions.
 .list-listitems
   .listitem-with-footer
     %details.listitem

package/src/pages/components/listitem_with_footer.haml

@@ -3,6 +3,7 @@ tags: components
 title: List-item with footer
 ---
 
+%p.mb-heading List items with footers are used to provide additional actions or information related to the list item. The footer typically contains buttons or links for actions that can be performed on the item.
 .list-listitems
   .listitem-with-footer
     %details.listitem

package/src/pages/components/listitems.haml

@@ -3,6 +3,7 @@ tags: components
 title: List item
 ---
 
+%p.mb-heading List items are used to display summarized information in lists.
 .list-listitems
   .listitem
     .listitem-title

package/src/pages/components/listitems_badge.haml

@@ -3,6 +3,7 @@ tags: components
 title: List item badges
 ---
 
+%p.mb-heading List item badges are used to highlight or indicate specific statuses or counts associated with list items. They can be styled differently to convey various meanings, such as success, danger, or informational states.
 .list-listitems
   .listitem
     .listitem-badge

package/src/pages/components/listitems_collapsable.haml

@@ -3,6 +3,7 @@ tags: components
 title: List item collapsable
 ---
 
+%p.mb-heading List items can be made collapsable using the HTML5 details tag. This allows users to expand and collapse additional content related to the list item as needed.
 .list-listitems
   %details.listitem
     %summary.listitem-header

package/src/pages/components/listitems_nested.haml

@@ -3,6 +3,7 @@ tags: components
 title: List items nested
 ---
 
+%p.mb-heading List items can contain nested list items, allowing for hierarchical organization of information. This is useful for displaying related data in a structured manner.
 .list-listitems
   %details.listitem
     %summary.listitem-header

package/src/pages/components/listitems_selectable.haml

@@ -3,6 +3,7 @@ tags: components
 title: List item selectable
 ---
 
+%p.mb-heading List items can be made selectable by adding a checkbox to each item. This allows users to select one or more items from a list for further actions.
 .list-listitems
   .listitem
     .listitem-check

package/src/pages/components/loading_spinner.haml

@@ -3,6 +3,7 @@ tags: components
 title: Loading spinner
 ---
 
+%p.mb-heading Loading spinners are used to indicate that a process is ongoing. They can be customized in size and color to fit different design needs.
 .testio-loader-wrapper
   %svg.testio-loader-i{viewbox: "0 0 50 50"}
     %line.anim-bar.stroke{x1: "4px", x2: "4px", y1: "5px", y2: "45px"}

package/src/pages/components/metasidebar.haml

@@ -3,6 +3,7 @@ tags: components
 title: Metasidebar
 ---
 
+%p.mb-heading Metasidebars are used to display additional contextual information alongside the main content. They can be expanded or collapsed by the user.
 %aside.metasidebar
   %details.metasidebar-wrapper{open:"true"}
     %summary.metasidebar-btn

package/src/pages/components/modal_details.haml

@@ -1,8 +1,10 @@
 ---
 tags: components
-title: Modal - based on details tag
+title: Modal
 ---
 
+%p.mb-heading
+  Modals are used to display content in a layer above the main content. They can be opened and closed by the user, typically by clicking a button or link. They are an alternative to drawers.
 %p.mb-heading
   Add the class 
   %code.bg-gray-lighter.rounded.mx-xxs .modal-close-btn

package/src/pages/components/notifications.haml

@@ -3,7 +3,8 @@ tags: components
 title: Notifications
 ---
 
-%p.mb-heading.prose remove the classes <code>relative z-0 top-0</code> in production
+%p.mb-heading Notifications are used to inform users about important information or updates. They can replace alerts.
+%p.mb-heading Remove the classes <code>relative z-0 top-0</code> in production
 
 .notification-container.relative.top-0.z-0
   %a.notification{href:""}

package/src/pages/components/user_item.haml

@@ -3,6 +3,7 @@ tags: components
 title: User item
 ---
 
+%p.mb-heading User items are used to display user information such as profile pictures and names. They can be linked or have additional actions available.
 %dl.list-inline
   %dt standard
   %dd