testio-tailwind 3.22.0 → 3.24.0

package/AI_DESIGN_SYSTEM_REFERENCE.md

@@ -10,6 +10,13 @@ This document serves as a comprehensive reference for AI Agents to utilize the T
 
 ## Recent Updates (January 2026)
 
+- ✨ **Centered Layout**: New centered application layout documentation and examples
+- ✨ **Dark Mode Examples**: Comprehensive dark mode layout examples and documentation
+- ✨ **Centered Actionbar**: Added centered variant for action bars with proper styling
+- ✨ **Centered Header**: New header variant optimized for centered layouts
+- 🎨 **Layout Examples**: Added `/pages/layouts/` section with layout examples (centered, darkmode, full-width)
+- 📐 **Centered Content**: Proper max-width capped centered content containers
+- 🌙 **Dark Mode Support**: Complete dark mode documentation with implementation examples
 - ✨ **HAML Preview**: New HAML preview functionality for live component viewing
 - ✨ **HAML Converter**: Added HAML conversion utility for template processing
 - ✨ **AI Documentation**: Comprehensive AI documentation across all component pages
@@ -23,6 +30,9 @@ This document serves as a comprehensive reference for AI Agents to utilize the T
 - 🔧 **Splitview Improvements**: Fixed splitview details close button and responsive behavior
 - 🏷️ **Image Tags**: Added support for image tagging in components
 - 🔧 **HAML Conversion**: Tables documentation files converted to HAML format
+- ✨ **Form Group Enhancements**: Added vertical form groups, form addons with text/icons, and form card component
+- 📋 **Form Hints**: Expanded form hints with collapsable help text and learn more triggers
+- 🌐 **Multi-language Support**: Added optional-non-en attribute for internationalized optional labels
 
 ---
 
@@ -32,23 +42,24 @@ This document serves as a comprehensive reference for AI Agents to utilize the T
 3. [Color System](#color-system)
 4. [Typography](#typography)
 5. [Spacing & Layout](#spacing--layout)
-6. [Button Components](#button-components)
-7. [Card Components](#card-components)
-8. [Form Components](#form-components)
-9. [Overlay Components (Modal & Drawer)](#overlay-components-modal--drawer)
-10. [Page Layout Components](#page-layout-components)
-11. [Navigation Components](#navigation-components)
-12. [Feedback Components](#feedback-components)
-13. [Data Display Components](#data-display-components)
-14. [List Components](#list-components)
-15. [Splitview Components](#splitview-components)
-16. [Chat Components](#chat-components)
-17. [Chart Components](#chart-components)
-18. [Status & Progress Components](#status--progress-components)
-19. [Utility Components](#utility-components)
-20. [AgenticQA Components](#agenticqa-components)
-21. [Dark Mode](#dark-mode)
-22. [Best Practices for AI Agents](#best-practices-for-ai-agents)
+6. [Layout Patterns](#layout-patterns)
+7. [Button Components](#button-components)
+8. [Card Components](#card-components)
+9. [Form Components](#form-components)
+10. [Overlay Components (Modal & Drawer)](#overlay-components-modal--drawer)
+11. [Page Layout Components](#page-layout-components)
+12. [Navigation Components](#navigation-components)
+13. [Feedback Components](#feedback-components)
+14. [Data Display Components](#data-display-components)
+15. [List Components](#list-components)
+16. [Splitview Components](#splitview-components)
+17. [Chat Components](#chat-components)
+18. [Chart Components](#chart-components)
+19. [Status & Progress Components](#status--progress-components)
+20. [Utility Components](#utility-components)
+21. [AgenticQA Components](#agenticqa-components)
+22. [Dark Mode](#dark-mode)
+23. [Best Practices for AI Agents](#best-practices-for-ai-agents)
 
 ---
 
@@ -145,10 +156,17 @@ src/pages/
 │   ├── spacing.haml
 │   ├── paddings.haml
 │   ├── margins.haml
-│   └── max_width.haml
+│   ├── max_width.haml
+│   ├── centered_layout.haml     # Centered layout documentation
+│   └── darkmode.haml            # Dark mode layout documentation
+├── layouts/             # Full layout examples
+│   ├── layout-full.haml
+│   ├── layout-centered.haml     # Centered layout example
+│   └── layout-darkmode.haml     # Dark mode layout example
 ├── navigation/          # Navigation components
 │   ├── header.haml
 │   ├── header_*.haml    # Portal-specific headers
+│   ├── header-centered.haml     # Centered layout header
 │   ├── sidebar.haml
 │   ├── sidebar_*.haml   # Portal-specific sidebars
 │   ├── tabnavigation.haml
@@ -181,9 +199,27 @@ npm start
 # Visit: http://localhost:8080/forms/
 # Visit: http://localhost:8080/tables/
 # Visit: http://localhost:8080/charts/
+# Visit: http://localhost:8080/layout/
 ```
 
-#### 2. **HAML to HTML Reference**
+#### 2. **Layout Examples**
+Complete layout examples with live previews:
+```
+# Full-width layout example
+http://localhost:8080/pages/layouts/layout-full
+
+# Centered layout example (recommended for documentation and forms)
+http://localhost:8080/pages/layouts/layout-centered
+
+# Dark mode layout example
+http://localhost:8080/pages/layouts/layout-darkmode
+```
+
+**Layout Documentation:**
+- [centered_layout.haml](src/pages/layout/centered_layout.haml) - Centered layout structure and documentation
+- [darkmode.haml](src/pages/layout/darkmode.haml) - Dark mode implementation guide
+
+#### 3. **HAML to HTML Reference**
 
 ```haml
 <!-- HAML -->
@@ -339,6 +375,88 @@ xl: 90rem (1440px)
 
 ---
 
+## Layout Patterns
+
+### Standard Application Layout Structure
+The application uses a consistent layout structure across all pages:
+
+```html
+<body class="app-body">
+  <header class="header">
+    <!-- Navigation and branding -->
+  </header>
+  <main class="main-content">
+    <!-- Page content -->
+  </main>
+  <footer class="actionbar">
+    <!-- Actions and controls -->
+  </footer>
+</body>
+```
+
+### Full-Width Layout
+Standard layout with content spanning the full width of the viewport:
+
+```html
+<body class="app-body">
+  <header class="header">
+    <!-- Full-width header -->
+  </header>
+  <main class="main-content">
+    <div class="page-content">
+      <!-- Content fills available space -->
+    </div>
+  </main>
+  <footer class="actionbar">
+    <!-- Full-width footer -->
+  </footer>
+</body>
+```
+
+**Use Case:** Dashboard layouts, full-width data displays, and responsive mobile views.
+
+### Centered Layout
+Centered layout with max-width constraints for optimal readability on widescreen screens:
+
+```html
+<body class="app-body">
+  <header class="header">
+    <!-- Centered header -->
+  </header>
+  <main class="main-content centered">
+    <div class="centered-content">
+      <!-- Content centered with max-width -->
+    </div>
+  </main>
+  <footer class="actionbar centered">
+    <!-- Centered footer -->
+  </footer>
+</body>
+```
+
+**Key Classes:**
+- `.main-content.centered` - Centers the main content
+- `.centered-content` - Wrapper for centered content with max-width constraint
+- `.actionbar.centered` - Centered variant of action bar
+
+**Use Case:** Documentation pages, information displays, form submissions, and content with optimal line length requirements.
+
+**Max-Width Values:**
+- `.max-w-capped` - Standard max-width for centered content (typically 800px)
+- Ensures readability on widescreen displays while maintaining responsive behavior
+
+**Example Centered Actionbar:**
+```html
+<footer class="actionbar centered">
+  <div class="flex justify-center gap-md">
+    <button class="btn btn-secondary">Cancel</button>
+    <button class="btn btn-primary">Submit</button>
+  </div>
+</footer>
+```
+
+---
+
 ## Button Components
 
 ### Basic Buttons
@@ -581,6 +699,8 @@ xl: 90rem (1440px)
 ## Form Components
 
 ### Form Group Structure
+
+#### Horizontal Form Group (Default)
 ```html
 <div class="form-group">
   <label class="form-label">Email Address</label>
@@ -592,6 +712,40 @@ xl: 90rem (1440px)
   <label class="form-label optional">Phone Number</label>
   <input type="tel" class="form-control">
 </div>
+
+<!-- Optional field with custom translation -->
+<div class="form-group">
+  <label class="form-label optional-non-en" data-optional-non-en="(freiwillig)">Phone Number</label>
+  <input type="tel" class="form-control">
+</div>
+
+<!-- Inverted (for dark backgrounds) -->
+<div class="form-group inverted">
+  <label class="form-label">Email Address</label>
+  <input type="email" class="form-control" placeholder="Enter email">
+</div>
+```
+
+#### Vertical Form Group
+Use vertical form groups in tight spaces and narrow containers where horizontal layout cannot fit:
+
+```html
+<div class="form-group vertical">
+  <label class="form-label">Email Address</label>
+  <input type="email" class="form-control" placeholder="Enter email">
+</div>
+
+<!-- Optional field with custom translation -->
+<div class="form-group vertical">
+  <label class="form-label optional-non-en" data-optional-non-en="(freiwillig)">Phone Number</label>
+  <input type="tel" class="form-control">
+</div>
+
+<!-- Inverted (for dark backgrounds) -->
+<div class="form-group vertical inverted">
+  <label class="form-label">Email Address</label>
+  <input type="email" class="form-control" placeholder="Enter email">
+</div>
 ```
 
 ### Form Inputs
@@ -624,6 +778,29 @@ xl: 90rem (1440px)
 <div class="form-hint error">Please enter a valid email</div>
 ```
 
+#### Collapsable Form Hints
+```html
+<!-- Collapsable form hint with learn more trigger -->
+<div class="form-group">
+  <label class="form-label">Your Project</label>
+  <div class="col">
+    <input class="form-control" type="text" placeholder="Some delicious placeholder text">
+    <details class="form-hint-collapsable">
+      <summary>
+        <div class="form-hint">
+          <span>
+            This is a help text.
+            <span class="form-hint-trigger form-hint-collapsed-text">Learn more</span>
+            <span class="form-hint-trigger form-hint-expanded-text">Close</span>
+          </span>
+        </div>
+      </summary>
+      <div class="form-hint-collapsable-message">Good examples are "Java wrapper lib for our 5-endpoint REST API" or "Help integration Intercom into our web interface"</div>
+    </details>
+  </div>
+</div>
+```
+
 ### Form Grid Layout
 ```html
 <!-- Standard form grid -->
@@ -878,10 +1055,62 @@ xl: 90rem (1440px)
 
 ### Form with Addon
 ```html
+<!-- Text addon (e.g., currency) -->
 <div class="form-group with-addon">
   <label class="form-label">Price</label>
   <input type="number" class="form-control" placeholder="0.00">
-  <div class="form-addon">USD</div>
+  <div class="form-addon">
+    <span class="text-label">EUR</span>
+  </div>
+</div>
+
+<!-- Icon addon (e.g., validation status) -->
+<div class="form-group with-addon">
+  <label class="form-label">Email Address</label>
+  <input type="email" class="form-control" placeholder="Enter email">
+  <div class="form-addon">
+    <span class="icon icon-check-circle-filled text-success"></span>
+  </div>
+</div>
+```
+
+### Form Card
+A card component containing a form with various input elements. Useful for collapsable form sections or multi-form layouts.
+
+```html
+<div class="form-card">
+  <div class="form-card-heading">
+    <div class="form-card-title">Form Card Title</div>
+    <div class="form-card-actions">
+      <button class="btn btn-square btn-sm btn-primary">
+        <i class="icon icon-arrow-upward"></i>
+      </button>
+      <button class="btn btn-square btn-sm btn-primary">
+        <i class="icon icon-arrow-downward"></i>
+      </button>
+      <button class="btn btn-square btn-sm btn-primary">
+        <i class="icon icon-remove"></i>
+      </button>
+    </div>
+  </div>
+  <div class="form-grid">
+    <div class="form-group">
+      <label class="form-label">Input</label>
+      <input class="form-control" type="text" placeholder="Enter text">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Textarea</label>
+      <textarea class="form-control" rows="4" placeholder="Enter description"></textarea>
+    </div>
+    <div class="form-group form-select">
+      <label class="form-label">Select</label>
+      <select class="tom-select" placeholder="Please select">
+        <option value=""></option>
+        <option value="Option 1">Option 1</option>
+        <option value="Option 2">Option 2</option>
+      </select>
+    </div>
+  </div>
 </div>
 ```
 
@@ -2236,7 +2465,34 @@ Product-specific components for the AgenticQA platform.
 
 ## Dark Mode
 
-The design system includes comprehensive dark mode support with customized theme variables.
+The design system includes comprehensive dark mode support with customized theme variables and a centered layout variant for dark mode displays.
+
+### Enabling Dark Mode
+
+```html
+<!-- Apply dark class to body or container -->
+<body class="app-body dark">
+  <!-- All dark mode styles will be applied -->
+</body>
+```
+
+### Dark Mode Layout Structure
+
+```html
+<body class="app-body dark">
+  <header class="header">
+    <!-- Dark mode header -->
+  </header>
+  <main class="main-content centered">
+    <div class="centered-content">
+      <!-- Centered content with dark mode styling -->
+    </div>
+  </main>
+  <footer class="actionbar centered">
+    <!-- Centered actionbar for dark mode -->
+  </footer>
+</body>
+```
 
 ### Dark Mode Color Palette
 ```css
@@ -2282,14 +2538,56 @@ The design system includes comprehensive dark mode support with customized theme
 <div class="bg-card dark:bg-listitem">
   <!-- Light mode: #e6e6e6, Dark mode: #262626 -->
 </div>
+
+<!-- Buttons with dark mode -->
+<div class="dark">
+  <button class="btn btn-primary">
+    <!-- Automatically styled for dark mode -->
+  </button>
+</div>
 ```
 
-### Dark Mode Differences
+### Dark Mode Layout Examples
+
+**Centered Dark Mode Layout:**
+- Optimal for documentation or form-based interfaces
+- Content is centered with max-width constraint
+- Footer actionbar is also centered
+- View live example: `/pages/layouts/layout-darkmode`
+
+**Dark Mode with Forms:**
+- Form controls are optimized for dark backgrounds
+- Input fields have proper contrast
+- Labels and hints are readable
+- Error states are clearly visible
+
+### Dark Mode Differences from Light Mode
 - Border radius: `5px` → `12px`
 - Grid gutters: `20px` → `40px`
 - Table cell padding: `py-xs` → `py-md`
 - Chat layout: 3 columns → 2 columns (actions hidden)
-- Link colors: Petrol → Purple, Hover: Blue → Dark Purple
+- Link colors: Petrol → Purple (#8988eb), Hover: Dark Purple (#7954ff)
+- Text color: System colors → Light gray (#f2f2f2)
+- Font sizes: Labels reduced to 0.75rem (from 0.8125rem)
+- Card headers: 1.125rem in dark mode
+
+### Dark Mode Best Practices
+
+1. **Testing Dark Mode**
+   - Always preview components with the `.dark` class applied
+   - Test contrast ratios for accessibility compliance
+   - Verify all interactive elements are clearly visible
+
+2. **Component-Specific Adjustments**
+   - Buttons: Use inverted variants for dark backgrounds
+   - Cards: Ensure sufficient contrast with dark background
+   - Text: Use light colors for readability
+   - Borders: Use subdued colors that don't overpower the dark background
+
+3. **Dark Mode CSS Utilities**
+   - Use Tailwind's `dark:` prefix for conditional dark mode styles
+   - Example: `bg-white dark:bg-gray-800`
+   - Combine with custom CSS variables for consistency
 
 ---
 
@@ -2302,6 +2600,7 @@ The design system includes comprehensive dark mode support with customized theme
    - Apply layout classes: `header`, `sidebar`, `main`, `section`
    - Use grid or flex utilities for responsive layouts
    - Consider using `.page-header` for dashboard pages
+   - Choose between standard full-width or centered layout
 
 2. **Component Selection**
    - Choose the appropriate component variant for the use case
@@ -2320,29 +2619,40 @@ The design system includes comprehensive dark mode support with customized theme
    - Include alt text for images
    - Use `<label>` elements with `for` attributes
 
-5. **Dark Mode Considerations**
+5. **Layout Pattern Selection**
+   - **Full-Width Layout**: Use for dashboards and data displays
+   - **Centered Layout**: Use for documentation and forms
+   - Both support dark mode with proper styling
+   - Choose based on content type and readability requirements
+
+6. **Dark Mode Considerations**
    - Always test components with `.dark` class applied
    - Border radius is larger in dark mode (12px vs 5px)
    - Grid gutters are larger in dark mode (40px vs 20px)
    - Use `dark:` prefix for conditional dark mode styles
+   - Ensure sufficient contrast for readability
+   - Test with actual dark mode enabled in browsers
 
-6. **Form Best Practices**
+7. **Form Best Practices**
    - Use `.form-grid` for form layouts
    - Apply `.form-group` wrapper around each field
    - Use `.form-hint` for helper text
    - Use `.field_with_errors` for validation states
+   - Forms work well in both centered and full-width layouts
 
-7. **Table Best Practices**
+8. **Table Best Practices**
    - Use `.table` for standard data tables
    - Use `.table-standard` for key-value style tables
    - Use `.table-cellstyle` for status tracking tables
    - Use `.action-cell` for right-aligned action buttons
+   - Tables automatically adapt to dark mode
 
-8. **Page Header Best Practices**
+9. **Page Header Best Practices**
    - Use `.page-header` for dashboard/session pages
    - Main card should have `.page-maincard` and `p-card-padding`
    - Add `.with-chart` modifier when including charts
    - Actions go in `.page-actions`
+   - Supports dark mode styling
 
 ---
 
@@ -2351,13 +2661,28 @@ The design system includes comprehensive dark mode support with customized theme
 ### Version 3.22.0 - January 2026
 
 **New Features:**
-- HAML Preview functionality for live component viewing
-- HAML Converter utility for template processing
-- Comprehensive AI documentation across all component pages
+- ✨ Centered layout documentation and examples for improved readability
+- ✨ Dark mode layout examples and enhanced dark mode documentation
+- ✨ Centered actionbar variant for dark mode and standard layouts
+- ✨ Centered header styling for consistent layout patterns
+- ✨ HAML Preview functionality for live component viewing
+- ✨ HAML Converter utility for template processing
+- ✨ Comprehensive AI documentation across all component pages
 
 **Enhancements:**
-- All component pages now include descriptions and use cases
-- Enhanced form component documentation (checkboxes, radios, toggles)
+- 📐 New layout patterns section with centered and full-width examples
+- 🌙 Enhanced dark mode documentation with implementation examples
+- 📋 All component pages now include descriptions and use cases
+- 🎯 Updated layout documentation with max-width constraints
+- 🎨 Form and table components optimized for dark mode
+- 📝 Added layout selection guidelines for AI agents
+
+**Layout Updates:**
+- Added `/pages/layouts/layout-centered` for centered layout examples
+- Added `/pages/layouts/layout-darkmode` for dark mode examples
+- Added `/pages/layout/centered_layout.haml` documentation
+- Added `/pages/layout/darkmode.haml` documentation
+- Added `/pages/navigation/header-centered.haml` for centered headers
 - Improved layout documentation with examples
 - Typography pages updated with link and icon examples
 

package/package.json

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

package/src/_includes/example-header-centered.njk

@@ -0,0 +1,53 @@
+<header class="header centered">
+
+    <div class="header-wrapper">
+        <div class="navlinks logo-wrapper"><a class="navlink header-logo" href="#"></a></div> 
+        <div class="navlinks left">
+            <a class="navlink active" href="#">Navlink active</a>
+            <a class="navlink" href="#">Navlink</a>
+            <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+            <details class="header-dropdown">
+                <summary class="navlink">Collapsable</summary>
+                <div class="dropdown-menu">
+                    <a class="navlink active" href="#">Navlink active</a>
+                    <a class="navlink" href="#">Navlink</a>
+                    <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+                </div>
+            </details>
+        </div>
+        <details class="mobile-links">
+            <summary class="mobile-menu-btn">
+                <div class="navlink"><span class="sr-only">Open main menu</span><span class="text-icon-default icon icon-menu" aria-hidden="true"></span></div>
+            </summary>
+            <div class="mobile-menu sidebar">
+                <a class="navlink active" href="#">Navlink active</a>
+                <a class="navlink" href="#">Navlink</a>
+                <a class="navlink" href="#"><span class="icon icon-check-circle-filled"></span>Navlink</a>
+                <details class="header-dropdown">
+                    <summary class="navlink">Collapsable</summary>
+                    <div class="dropdown-menu">
+                        <a class="navlink active" href="#">Navlink active</a>
+                        <a class="navlink" href="#">Navlink</a>
+                        <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
+                    </div>
+                </details>
+            </div>
+        </details>
+        <div class="navlinks right">
+            <details class="header-dropdown user-menu" href="#">
+                <summary class="btn-profile navlink">
+                    <img class="user-profile" src="/assets/images/placeholders/profile_supergirl.png">
+                    <div class="user-details">
+                        <div class="profile-role">Admin</div>
+                        <div class="profile-name">Anja Berger</div>
+                    </div>
+                </summary>
+                <div class="dropdown-menu profile-dropdown">
+                    <a class="dropdown-link" href="#"><span class="icon icon-user text-icon-default mr-icon-spacing"></span>Your Profile</a>
+                    <a class="dropdown-link" href="#"><span class="icon icon-cog text-icon-default mr-icon-spacing"></span>Settings</a>
+                    <a class="dropdown-link" href="#"><span class="icon icon-shutdown text-icon-default mr-icon-spacing"></span>Sign out</a>
+                </div>
+            </details>
+        </div>
+    </div>
+</header>

package/src/_layouts/page-example-centered.njk

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include "head.njk" %}
+
+  <body class="app-body">
+    {% include "header.njk" %}
+
+    {% block content %}
+      <main class="page-example-container">
+        <div class="app-body">
+          {% include "example-header-centered.njk" %}
+          {{ content | safe }}
+        </div>
+      </main>
+    {% endblock %}
+  
+  </body>
+  {% include "footer-scripts.njk" %}
+</html>

package/src/_layouts/page-example-darkmode.njk

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include "head.njk" %}
+
+  <body class="app-body dark">
+    {% include "header.njk" %}
+
+    {% block content %}
+      <main class="page-example-container">
+        <div class="app-body">
+          {% include "example-header.njk" %}
+          {{ content | safe }}
+        </div>
+      </main>
+    {% endblock %}
+  
+  </body>
+  {% include "footer-scripts.njk" %}
+</html>

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

@@ -39,3 +39,11 @@ footer.actionbar summary > .btn,
 .splitview-details-actionbar summary > .btn {
   @apply mr-0;
 }
+
+footer.actionbar.centered {
+  @apply justify-center;
+}
+
+footer.actionbar.centered .content-wrapper {
+  @apply flex justify-between w-full max-w-centered-content;
+}

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

@@ -2,6 +2,10 @@
   @apply relative grid grid-cols-1 md:grid-cols-1-3 md:gap-xs lg:gap-grid-gutter;
 }
 
+.form-group.vertical {
+  @apply relative grid grid-cols-1 gap-0;
+}
+
 .form-label {
   @apply text-label leading-tight;
 

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

@@ -225,4 +225,26 @@ details[open].header-dropdown .dropdown-menu.profile-dropdown {
   -webkit-transform: translateX(20px);
   -ms-transform: translateX(20px);
   transform: translateX(20px);
+}
+
+/* Centered header */
+
+.header.centered {
+  @apply justify-center sm:px-body-padding-tablet xl:px-body-padding-desktop;
+}
+
+.header.centered .header-wrapper {
+  @apply flex justify-between items-center w-full max-w-centered-content;
+}
+
+.header.centered .logo-wrapper {
+  @apply w-auto -ml-xs;
+}
+
+.header.centered .navlinks.left {
+  @apply px-spacing;
+}
+
+.header.centered .navlinks.right {
+  @apply pr-0;
 }

package/src/pages/forms/{forms.haml → form_group.haml}

@@ -1,9 +1,9 @@
 ---
 tags: "forms"
-title: Forms
+title: Form group
 ---
 
-%p.mb-heading Various form input fields showcasing different states including optional, disabled, and inverted styles.
+%p.mb-heading Form groups are used to wrap labels and form controls in order to provide proper spacing and structure. They change into a vertical layout on smaller screens.
 .form-grid
   .form-group
     %label.form-label Input

package/src/pages/forms/form_group_vertical.haml

@@ -0,0 +1,28 @@
+---
+tags: "forms"
+title: Form group vertical
+---
+
+%p.mb-heading Form groups with vertical layout are used to wrap labels and form controls. Us them in tight spaces and narrow containers in which you can't afford the horizontal layout.
+.form-grid
+  .form-group.vertical
+    %label.form-label Input
+    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+  .form-group.vertical
+    %label.form-label.optional Not required input
+    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+  .form-group.vertical
+    %label.form-label.optional-non-en{"data-optional-non-en": "(freiwillig)"} Not required input
+    %div
+      %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+      .form-hint For most cases you can use the english optional label, but we also added support for any translation you might need. Just add the data-optional-non-en => t(optional)
+  .form-group.vertical
+    %label.form-label Input disabled
+    %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}
+.form-grid.bg-black.p-3.mt-md
+  .form-group.vertical.inverted
+    %label.form-label Input inverted
+    %input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
+  .form-group.vertical.inverted
+    %label.form-label Input inverted disabled
+    %input.form-control{type:'text', value:"Some delicious readonly value text", disabled:"true"}

package/src/pages/layout/app_layout.haml

@@ -27,4 +27,6 @@ title: App layout structure
   .ml-md &#60main class=&quotmain-content&quot&#62
   .ml-md &#60aside class=&quotmetasidebar&quot&#62
   .ml-md &#60footer class=&quotactionbar&quot&#62
-  &#60/body&quot&#62
+  &#60/body&quot&#62
+%p.my-heading Take a look at the layout in action:
+%a.btn.btn-primary{ href: "/pages/layouts/layout-full"} Layout example

package/src/pages/layout/centered_layout.haml

@@ -0,0 +1,26 @@
+---
+tags: layout
+title: Centered layout
+---
+
+%p.mb-heading This is the structure of a centered application layout. In this layout all elements are centered and have a max-width to ensure optimal readability on widescreen resolutions.
+.grid.gap-1px.p-xs.bg-card.rounded.centered.text-center
+  %p.mb-heading .app-body
+  .p-xs.pl-md.bg-petrol-dark.text-white.rounded-t .header
+  .bg-white.p-md.flex.flex-col.items-center
+    %p.mb-heading .main-content.centered
+    .bg-gray-light.py-md.max-w-capped.w-full .centered-content
+  .bg-petrol.text-white.p-xs.pl-md.rounded-b footer.actionbar.centered
+
+%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
+  .ml-md &#60header class=&quotheader&quot&#62
+  .ml-md &#60main class=&quotmain-content centered&quot&#62
+  .ml-lg &#60div class=&quotcentered-content&quot&#62
+  .ml-md &#60footer class=&quotactionbar&quot&#62
+  &#60/body&quot&#62
+%p.my-heading Take a look at the layout in action:
+%a.btn.btn-primary{ href: "/pages/layouts/layout-centered"} Layout example

package/src/pages/layout/darkmode.haml

@@ -0,0 +1,9 @@
+---
+tags: layout
+title: Darkmode
+---
+
+%p.mb-heading To use dark mode, add the class <code>dark</code> to the <code>body</code> element. 
+&#60body class=&quotapp-body dark&quot&#62
+%p.my-heading Take a look at the layout in action:
+%a.btn.btn-primary{ href: "/pages/layouts/layout-darkmode"} Layout example

package/src/pages/layouts/layout-centered.haml

@@ -0,0 +1,26 @@
+---
+layout: page-example-centered
+title: "Centered"
+tags: "layouts"
+---
+
+%main.main-content.centered
+  .centered-content
+    %h1.mb-heading Layout Centered
+    %p This layout centers the content within the viewport, providing a focused and balanced design. It is ideal for pages where it's not necessary to utilize the full width of widescreen resolutions.
+    %p Make sure to use a header and actionbar with centered content to align all elements properly.
+    .card.mt-md
+      .card-body Example card to illustrate the width of the centered layout.
+%footer.actionbar.centered
+  .content-wrapper
+    %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/layouts/layout-darkmode.haml

@@ -0,0 +1,310 @@
+---
+layout: page-example-darkmode.njk
+title: "Darkmode"
+tags: "layouts"
+---
+
+%nav.sidebar{arialabel:'Sidebar'}
+  %a.navlink.active{href:'#'}
+    %span.navlink-badge.icon.icon-home
+    Navlink active
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug
+    Navlink
+  %details
+    %summary.navlink-container
+      .navlink
+        %span.navlink-badge.icon.icon-product
+        Navlink collapsable
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+    %a.navlink{href:'#'}
+      %span.navlink-badge.icon.icon-test
+      Navlink children
+  %a.navlink{href:'#'}
+    %span.navlink-badge.icon.icon-bug-reproduction
+    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 Darkmode example
+  %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
+      .p-xs.pl-md.bg-petrol-dark.text-white.rounded-top .header
+      .grid.grid-cols-2-auto-fr.gap-1px
+        .bg-petrol-dark.text-white.p-xs.pl-md.w-sidebar.rounded-bl nav.sidebar
+        .grid.gap-1px
+          .grid.grid-cols-2-fr-auto
+            .bg-white.p-xs.pl-md.h-xxl .main-content
+            .bg-gray-lighter.p-xs.pl-md.w-metasidebar aside.metasidebar
+          .bg-info.text-white.p-xs.pl-md.rounded-br .chat-container
+          .bg-petrol.text-white.p-xs.pl-md.rounded-br footer.actionbar
+    %h5.mt-md HTML structure
+    %code
+      &#60body class=&quotapp-body&quot&#62
+      %br
+      .ml-md &#60header class=&quotheader&quot&#62
+      .ml-md &#60nav class=&quotsidebar&quot&#62
+      .ml-md &#60main class=&quotmain-content&quot&#62
+      .ml-md &#60aside class=&quotmetasidebar&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
+%aside.metasidebar
+  %details.metasidebar-wrapper{open:"true"}
+    %summary.metasidebar-btn
+    .metasidebar-content
+      %h2.metasidebar-title Metasidebar title
+      %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
+      %h3.metasidebar-subheading Metasidebar subheading
+      %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 action
+  %button.btn.btn-default.btn-secondary
+    %span.icon.icon-check-circle-filled.mr-icon-spacing
+    Secondary action
+  %button.btn-intercom
+    .icon.icon-intercom
+.chat-container
+  %details.chat-window
+    %summary.chat-window-header
+      .chat-message-counter 999
+      %a{href:""} #123321
+      .chat-title Chat title
+      %button.btn.btn-xs.btn-ghost-inverted.btn-square
+        .icon.icon-xs.icon-cross
+    .list-chat-messages
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Message sender
+        .chat-message
+          Here's a short message.
+        .chat-actions
+          .btn
+            .icon.icon-heart
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Message sender with a much much longer name
+        .chat-message
+          Here's a short message which you liked.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                1
+              .popover-menu.info
+                .popover-title 1 person likes this
+                .popover-content You
+        .chat-actions
+          .btn
+            .icon.icon-heart-filled
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Message sender
+        .chat-message
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item
+        %details.dropdown-actions.chat-avatar
+          %summary
+            .user-item.linked
+              %img{src:"/assets/images/placeholders/profile_supergirl.png"}
+          .popover-menu
+            %a.popover-action{href:'#'}
+              %span.icon.icon-user-story-test
+              Tester profile
+            %a.popover-action{href:'#'}
+              %span.icon.icon-review-exclamation
+              Report tester
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Message sender with a much much longer name
+        .chat-message
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author You
+        .chat-message
+          Your short chat message with no lorem ipsum.
+        .chat-actions
+          %details.dropdown-actions.chat-message-actions
+            %summary
+              .btn
+                .icon.icon-more
+            .popover-menu
+              %a.popover-action{href:'#'}
+                %span.icon.icon-pencil
+                Action
+              %a.popover-action{href:'#'}
+                %span.icon.icon-remove
+                Action
+      .chat-message-item.your-message
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author You
+        .chat-message
+          Another message by you with a lot ofLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+      .chat-message-item.announcement
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Team Leader
+        .chat-message
+          .message-banner.announcement Announcement
+          %span.text-mentioned @All
+          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+          .chat-message-addons
+            %a.btn{href:""} Show in chat
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+      .chat-message-item
+        %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
+        .chat-header
+          %span 2 hours by 
+          %span.chat-author Team Leader
+        .chat-message
+          .message-banner.mentioned You were mentioned
+          %span.text-mentioned @You
+          here's an announcement with a lot of Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
+          .chat-message-addons
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-heart-filled
+                10
+              .popover-menu.info
+                .popover-title 10 people like this
+                .popover-content Stephany77, HannaTester77, WonderTester, MerryJerryBerry, SuperTester3000, SomeTester, Torry444, UliaUsachova, TesterNumber9, TesterNumber10
+            %details.popover-wrapper.dropup
+              %summary.btn
+                .icon.icon-verify-check
+                TL
+              .popover-menu.info
+                .popover-title Verified by Team Leader
+                .popover-content Team Leader name
+    %form.chat-window-actions
+      %textarea.form-control{rows:'1', placeholder:"Enter your message"}
+      .btn.btn-sm.btn-square.btn-primary.btn-send-message
+        %input{type:"submit", value:""}

package/src/pages/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