testio-tailwind 3.27.1 → 3.27.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI_DESIGN_SYSTEM_REFERENCE.md +20 -3454
- package/CLAUDE.md +41 -0
- package/Dockerfile +4 -8
- package/README.md +1 -5
- package/ai-reference/00-index.md +54 -0
- package/ai-reference/01-setup-colors-typography.md +164 -0
- package/ai-reference/02-layout-patterns.md +253 -0
- package/ai-reference/03-buttons.md +106 -0
- package/ai-reference/04-cards.md +104 -0
- package/ai-reference/05-forms.md +414 -0
- package/ai-reference/06-overlays.md +119 -0
- package/ai-reference/07-feedback.md +147 -0
- package/ai-reference/08-data-display.md +106 -0
- package/ai-reference/09-lists-splitview.md +233 -0
- package/ai-reference/10-chat-charts-status.md +311 -0
- package/ai-reference/11-agenticqa.md +538 -0
- package/ai-reference/12-dark-mode.md +111 -0
- package/ai-reference/13-best-practices.md +73 -0
- package/package.json +1 -1
- package/src/assets/fonts/testio.eot +0 -0
- package/src/assets/fonts/testio.svg +1 -0
- package/src/assets/fonts/testio.ttf +0 -0
- package/src/assets/fonts/testio.woff +0 -0
- package/src/assets/fonts/testio.woff2 +0 -0
- package/src/assets/scripts/modules/colors.js +28 -2
- package/src/assets/stylesheets/components/iconfont.css +4 -1
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# Feedback Components
|
|
2
|
+
|
|
3
|
+
Alerts, notifications, progress bars, loading spinners, and empty states.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Alerts
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<!-- Default alert -->
|
|
11
|
+
<div class="alert">
|
|
12
|
+
<div class="alert-message">Alert message</div>
|
|
13
|
+
<button class="close">
|
|
14
|
+
<div class="icon icon-cross"></div>
|
|
15
|
+
</button>
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
<!-- Alert with button -->
|
|
19
|
+
<div class="alert">
|
|
20
|
+
<div class="alert-message">
|
|
21
|
+
Alert with a button
|
|
22
|
+
<button class="btn btn-white">Alert action</button>
|
|
23
|
+
</div>
|
|
24
|
+
<button class="close">
|
|
25
|
+
<div class="icon icon-cross"></div>
|
|
26
|
+
</button>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="alert alert-info">
|
|
30
|
+
<div class="alert-message">Info Alert</div>
|
|
31
|
+
<button class="close"><div class="icon icon-cross"></div></button>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="alert alert-success">
|
|
35
|
+
<div class="alert-message">Success Alert</div>
|
|
36
|
+
<button class="close"><div class="icon icon-cross"></div></button>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div class="alert alert-warning">
|
|
40
|
+
<div class="alert-message">Warning Alert</div>
|
|
41
|
+
<button class="close"><div class="icon icon-cross"></div></button>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="alert alert-error">
|
|
45
|
+
<div class="alert-message">Error Alert</div>
|
|
46
|
+
<button class="close"><div class="icon icon-cross"></div></button>
|
|
47
|
+
</div>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
## Notifications
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<div class="notification-container">
|
|
56
|
+
<!-- Basic notification -->
|
|
57
|
+
<a class="notification" href="">
|
|
58
|
+
<div class="notification-title">Linked Info Notification</div>
|
|
59
|
+
<div class="notification-content">
|
|
60
|
+
<div class="notification-message">You have 60 min left to finish this task.</div>
|
|
61
|
+
</div>
|
|
62
|
+
<button class="btn btn-close">
|
|
63
|
+
<span class="icon icon-cross"></span>
|
|
64
|
+
</button>
|
|
65
|
+
</a>
|
|
66
|
+
|
|
67
|
+
<!-- Notification with icon -->
|
|
68
|
+
<a class="notification" href="">
|
|
69
|
+
<div class="notification-badge">
|
|
70
|
+
<div class="icon icon-bug-fix-confirmation-lg"></div>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="notification-content">
|
|
73
|
+
<div class="notification-title">Notification with icon</div>
|
|
74
|
+
<div class="notification-message">Message content...</div>
|
|
75
|
+
</div>
|
|
76
|
+
<button class="btn btn-close">
|
|
77
|
+
<span class="icon icon-cross"></span>
|
|
78
|
+
</button>
|
|
79
|
+
</a>
|
|
80
|
+
|
|
81
|
+
<a class="notification success" href="">...</a>
|
|
82
|
+
<a class="notification warning" href="">...</a>
|
|
83
|
+
<a class="notification error" href="">...</a>
|
|
84
|
+
|
|
85
|
+
<!-- Notification with badge image -->
|
|
86
|
+
<a class="notification badges" href="">
|
|
87
|
+
<div class="notification-badge">
|
|
88
|
+
<img src="/assets/images/badge.svg">
|
|
89
|
+
</div>
|
|
90
|
+
<div class="notification-title">New badge received</div>
|
|
91
|
+
<div class="notification-content">Badge description</div>
|
|
92
|
+
<button class="btn btn-close">
|
|
93
|
+
<span class="icon icon-cross"></span>
|
|
94
|
+
</button>
|
|
95
|
+
</a>
|
|
96
|
+
|
|
97
|
+
<!-- Notification with dedicated button -->
|
|
98
|
+
<div class="notification">
|
|
99
|
+
<div class="notification-title">Notification with button</div>
|
|
100
|
+
<div class="notification-content">
|
|
101
|
+
<div class="notification-message">Message content...</div>
|
|
102
|
+
<a class="btn btn-sm btn-inverted" href="">Go to page</a>
|
|
103
|
+
</div>
|
|
104
|
+
<button class="btn btn-close">
|
|
105
|
+
<span class="icon icon-cross"></span>
|
|
106
|
+
</button>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Progress Bars
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<progress class="progress" value="32" max="100">32%</progress>
|
|
117
|
+
<progress class="progress progress-bar-success" value="32" max="100">32%</progress>
|
|
118
|
+
<progress class="progress progress-bar-danger" value="32" max="100">32%</progress>
|
|
119
|
+
<progress class="progress test-progress" value="32" max="100">32%</progress>
|
|
120
|
+
<progress class="progress thick" value="32" max="100">32%</progress>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Loading Spinner
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<div class="loading-spinner">
|
|
129
|
+
<div class="spinner"></div>
|
|
130
|
+
<p class="loading-text">Loading...</p>
|
|
131
|
+
</div>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## Empty State
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<div class="empty-state-message">No items here yet.</div>
|
|
140
|
+
<div class="empty-state-message search">No search results found.</div>
|
|
141
|
+
<div class="empty-state-message sad">Something went wrong.</div>
|
|
142
|
+
<div class="empty-state-message smile">All caught up!</div>
|
|
143
|
+
<div class="empty-state-message deceased">This item has been archived.</div>
|
|
144
|
+
<div class="empty-state-message chat">No messages yet.</div>
|
|
145
|
+
<div class="empty-state-message bell">No notifications.</div>
|
|
146
|
+
<div class="empty-state-message horizontal">Horizontal layout message.</div>
|
|
147
|
+
```
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
# Data Display — Tables
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Basic Table
|
|
6
|
+
```html
|
|
7
|
+
<table class="table">
|
|
8
|
+
<thead>
|
|
9
|
+
<tr>
|
|
10
|
+
<th>Name</th>
|
|
11
|
+
<th>Status</th>
|
|
12
|
+
<th>Actions</th>
|
|
13
|
+
</tr>
|
|
14
|
+
</thead>
|
|
15
|
+
<tbody>
|
|
16
|
+
<tr>
|
|
17
|
+
<td>John Doe</td>
|
|
18
|
+
<td>
|
|
19
|
+
<span class="badge badge-success">Active</span>
|
|
20
|
+
</td>
|
|
21
|
+
<td>
|
|
22
|
+
<button class="btn btn-sm btn-ghost">Edit</button>
|
|
23
|
+
</td>
|
|
24
|
+
</tr>
|
|
25
|
+
</tbody>
|
|
26
|
+
</table>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Table Variants
|
|
32
|
+
```html
|
|
33
|
+
<table class="table table-bordered">...</table>
|
|
34
|
+
<table class="table table-borderless">...</table>
|
|
35
|
+
<table class="table table-striped">...</table> <!-- Alternating rows -->
|
|
36
|
+
<table class="table table-sm">...</table> <!-- Compact -->
|
|
37
|
+
|
|
38
|
+
<!-- Key-value style table -->
|
|
39
|
+
<table class="table-standard">
|
|
40
|
+
<tbody>
|
|
41
|
+
<tr>
|
|
42
|
+
<td>Property</td>
|
|
43
|
+
<td>Value</td>
|
|
44
|
+
</tr>
|
|
45
|
+
</tbody>
|
|
46
|
+
</table>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## Cell Style Table (Status Tracking)
|
|
52
|
+
```html
|
|
53
|
+
<table class="table-cellstyle">
|
|
54
|
+
<thead>
|
|
55
|
+
<tr>
|
|
56
|
+
<th class="completed">Feature A</th>
|
|
57
|
+
<th class="inprogress">Feature B</th>
|
|
58
|
+
<th class="missing">Feature C</th>
|
|
59
|
+
</tr>
|
|
60
|
+
</thead>
|
|
61
|
+
<tbody>
|
|
62
|
+
<tr>
|
|
63
|
+
<td class="completed">Implementation done</td>
|
|
64
|
+
<td class="inprogress">Working on it...</td>
|
|
65
|
+
<td class="missing">Not started</td>
|
|
66
|
+
</tr>
|
|
67
|
+
</tbody>
|
|
68
|
+
</table>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**Status Classes:**
|
|
72
|
+
- `.completed` - Green checkmark icon
|
|
73
|
+
- `.inprogress` - Clock icon, gray background, italic text
|
|
74
|
+
- `.missing` - Exclamation icon, transparent bg, disabled text
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
## Table Cell Utilities
|
|
79
|
+
```html
|
|
80
|
+
<td class="td-fixed-width">Limited to 150px</td>
|
|
81
|
+
<td class="action-cell"> <!-- Right-aligned -->
|
|
82
|
+
<button class="btn btn-sm btn-ghost">Edit</button>
|
|
83
|
+
</td>
|
|
84
|
+
<td class="title">Long title...</td> <!-- Max 500px -->
|
|
85
|
+
<td class="cell-full-width">Takes all space</td>
|
|
86
|
+
<td class="wrap">This text will wrap</td>
|
|
87
|
+
<td class="pre">Preserves whitespace</td>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## Interactive Table Rows
|
|
93
|
+
```html
|
|
94
|
+
<!-- Hover to highlight row -->
|
|
95
|
+
<tr class="linked-row">...</tr>
|
|
96
|
+
|
|
97
|
+
<!-- Hover to highlight cell -->
|
|
98
|
+
<td class="linked-cell">...</td>
|
|
99
|
+
|
|
100
|
+
<!-- Highlight parent row on child hover -->
|
|
101
|
+
<tr>
|
|
102
|
+
<td>
|
|
103
|
+
<a class="highlight-parent-row" href="#">Link</a>
|
|
104
|
+
</td>
|
|
105
|
+
</tr>
|
|
106
|
+
```
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
# List Components & Splitview
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Basic List Items
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<div class="list-listitems">
|
|
9
|
+
<div class="listitem">
|
|
10
|
+
<div class="listitem-title">List item title</div>
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<!-- List item with badge -->
|
|
14
|
+
<div class="listitem">
|
|
15
|
+
<div class="listitem-badge">
|
|
16
|
+
<div class="icon icon-feature"></div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="listitem-title">
|
|
19
|
+
List-item title
|
|
20
|
+
<div class="listitem-label">Label</div>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="listitem-metrics">
|
|
23
|
+
<div class="listitem-metric">
|
|
24
|
+
<div class="icon icon-critical"></div>
|
|
25
|
+
99
|
|
26
|
+
</div>
|
|
27
|
+
<div class="listitem-metric">
|
|
28
|
+
<div class="icon icon-high"></div>
|
|
29
|
+
99
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<!-- List item with actions -->
|
|
35
|
+
<div class="listitem">
|
|
36
|
+
<div class="listitem-title">List-item with action</div>
|
|
37
|
+
<div class="listitem-actions">
|
|
38
|
+
<a class="btn btn-primary">Action</a>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<!-- Linked list item -->
|
|
43
|
+
<a class="listitem" href="#">
|
|
44
|
+
<div class="listitem-title">
|
|
45
|
+
<span class="icon icon-user-story mr-icon-spacing"></span>
|
|
46
|
+
Linked list item
|
|
47
|
+
</div>
|
|
48
|
+
</a>
|
|
49
|
+
</div>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## List Item Variants
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<!-- With action bar -->
|
|
58
|
+
<div class="listitem with-actionbar">...</div>
|
|
59
|
+
|
|
60
|
+
<!-- With footer -->
|
|
61
|
+
<div class="listitem with-footer">
|
|
62
|
+
<div class="listitem-title">Title</div>
|
|
63
|
+
<div class="listitem-footer">Footer content</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<!-- Collapsable list item -->
|
|
67
|
+
<details class="listitem collapsable">
|
|
68
|
+
<summary class="listitem-header">
|
|
69
|
+
<div class="listitem-title">Collapsable Title</div>
|
|
70
|
+
<div class="btn collapse-btn"></div>
|
|
71
|
+
</summary>
|
|
72
|
+
<div class="listitem-content">Hidden content</div>
|
|
73
|
+
</details>
|
|
74
|
+
|
|
75
|
+
<!-- Nested list items -->
|
|
76
|
+
<div class="listitem nested">
|
|
77
|
+
<div class="listitem-title">Parent</div>
|
|
78
|
+
<div class="list-listitems nested">
|
|
79
|
+
<div class="listitem">Child 1</div>
|
|
80
|
+
<div class="listitem">Child 2</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<!-- Selectable list item -->
|
|
85
|
+
<div class="listitem selectable">
|
|
86
|
+
<input type="checkbox" id="select1">
|
|
87
|
+
<label for="select1">
|
|
88
|
+
<div class="listitem-title">Selectable Item</div>
|
|
89
|
+
</label>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<!-- White background list item -->
|
|
93
|
+
<div class="listitem white">...</div>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
## User Item
|
|
99
|
+
```html
|
|
100
|
+
<div class="user-item">
|
|
101
|
+
<div class="user-item-avatar">
|
|
102
|
+
<img src="avatar.jpg" alt="User">
|
|
103
|
+
</div>
|
|
104
|
+
<div class="user-item-info">
|
|
105
|
+
<h4 class="user-item-name">Jane Smith</h4>
|
|
106
|
+
<p class="user-item-email">jane@example.com</p>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="user-item-actions">
|
|
109
|
+
<button class="btn btn-sm btn-secondary">Message</button>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Splitview Components
|
|
117
|
+
|
|
118
|
+
Two-pane layout for list and detail views with responsive behavior.
|
|
119
|
+
|
|
120
|
+
### Basic Splitview
|
|
121
|
+
```html
|
|
122
|
+
<div class="splitview">
|
|
123
|
+
<div class="splitview-list">
|
|
124
|
+
<div class="splitview-item">
|
|
125
|
+
<div class="splitview-item-title">Item 1</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="splitview-detail">
|
|
129
|
+
<h2>Detail View</h2>
|
|
130
|
+
<p>Selected item details</p>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Splitview List Header
|
|
136
|
+
```html
|
|
137
|
+
<div class="splitview-list-header">
|
|
138
|
+
<div class="form-check sm">
|
|
139
|
+
<input type="checkbox">
|
|
140
|
+
</div>
|
|
141
|
+
<h3 class="splitview-list-header-title">18 Bugs</h3>
|
|
142
|
+
<div class="splitview-list-header-actions">
|
|
143
|
+
<details class="dropdown-actions dropright">
|
|
144
|
+
<summary>
|
|
145
|
+
<a class="link-with-icon" href="">
|
|
146
|
+
<div class="icon icon-sort-descending"></div>
|
|
147
|
+
Severity (desc)
|
|
148
|
+
</a>
|
|
149
|
+
</summary>
|
|
150
|
+
<div class="popover-menu">
|
|
151
|
+
<a class="popover-action" href="#">Sort option 1</a>
|
|
152
|
+
<a class="popover-action" href="#">Sort option 2</a>
|
|
153
|
+
</div>
|
|
154
|
+
</details>
|
|
155
|
+
<a class="linked-icon" href="">
|
|
156
|
+
<div class="icon icon-filter"></div>
|
|
157
|
+
</a>
|
|
158
|
+
<a class="linked-icon" href="">
|
|
159
|
+
<div class="icon icon-search"></div>
|
|
160
|
+
</a>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Splitview Item
|
|
166
|
+
```html
|
|
167
|
+
<div class="splitview-list">
|
|
168
|
+
<div class="splitview-item">
|
|
169
|
+
<div class="splitview-item-checkbox form-check sm">
|
|
170
|
+
<input type="checkbox">
|
|
171
|
+
</div>
|
|
172
|
+
<div class="splitview-item-icon icon icon-critical"></div>
|
|
173
|
+
<div class="splitview-item-text">
|
|
174
|
+
<div class="splitview-item-title">Item title</div>
|
|
175
|
+
<div class="splitview-item-metainfo">
|
|
176
|
+
#123321321 | Product Detail Page
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
<div class="splitview-item-status">
|
|
180
|
+
<div class="status-icon status-submitted"></div>
|
|
181
|
+
<div class="status-icon status-manager-approved"></div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<!-- Selected state -->
|
|
186
|
+
<div class="splitview-item selected">...</div>
|
|
187
|
+
</div>
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
### Splitview with Status Groups
|
|
191
|
+
```html
|
|
192
|
+
<div class="splitview">
|
|
193
|
+
<div class="splitview-list">
|
|
194
|
+
<details class="splitview-group" open>
|
|
195
|
+
<summary class="splitview-group-header">
|
|
196
|
+
<h3 class="splitview-group-title">Test Group 1</h3>
|
|
197
|
+
<i class="icon icon-chevron-down"></i>
|
|
198
|
+
</summary>
|
|
199
|
+
|
|
200
|
+
<div class="splitview-group-status">
|
|
201
|
+
<div class="status-stepper">
|
|
202
|
+
<div class="status-step completed">
|
|
203
|
+
<i class="icon icon-check-thick-centered"></i>
|
|
204
|
+
3 done
|
|
205
|
+
</div>
|
|
206
|
+
<div class="status-step active">
|
|
207
|
+
<i class="icon icon-sync"></i>
|
|
208
|
+
Executing
|
|
209
|
+
</div>
|
|
210
|
+
<div class="status-step">
|
|
211
|
+
+ 3 to do
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<div class="splitview-item">...</div>
|
|
217
|
+
</details>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
### Collapsable Splitview Item
|
|
223
|
+
```html
|
|
224
|
+
<details class="splitview-item collapsable">
|
|
225
|
+
<summary class="splitview-item-header">
|
|
226
|
+
<div class="splitview-item-title">Collapsable Item</div>
|
|
227
|
+
<div class="btn collapse-btn"></div>
|
|
228
|
+
</summary>
|
|
229
|
+
<div class="splitview-item-content">
|
|
230
|
+
Expanded content
|
|
231
|
+
</div>
|
|
232
|
+
</details>
|
|
233
|
+
```
|