testio-tailwind 3.23.0 → 3.24.0

package/AI_DESIGN_SYSTEM_REFERENCE.md

@@ -30,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
 
 ---
 
@@ -696,6 +699,8 @@ Centered layout with max-width constraints for optimal readability on widescreen
 ## Form Components
 
 ### Form Group Structure
+
+#### Horizontal Form Group (Default)
 ```html
 <div class="form-group">
   <label class="form-label">Email Address</label>
@@ -707,6 +712,40 @@ Centered layout with max-width constraints for optimal readability on widescreen
   <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
@@ -739,6 +778,29 @@ Centered layout with max-width constraints for optimal readability on widescreen
 <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 -->
@@ -993,10 +1055,62 @@ Centered layout with max-width constraints for optimal readability on widescreen
 
 ### 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>
 ```
 

package/package.json

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

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/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"}