testio-tailwind 3.27.2 → 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/scripts/modules/colors.js +28 -2
|
@@ -0,0 +1,311 @@
|
|
|
1
|
+
# Chat, Charts, Status & Utility Components
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Chat Components
|
|
6
|
+
|
|
7
|
+
### Chat Message List
|
|
8
|
+
```html
|
|
9
|
+
<div class="list-chat-messages">
|
|
10
|
+
<div class="chat-message-item">
|
|
11
|
+
<img src="avatar.jpg" alt="User" class="chat-avatar">
|
|
12
|
+
<div class="chat-header">
|
|
13
|
+
<span class="chat-title">
|
|
14
|
+
<span class="chat-author">John Doe</span>
|
|
15
|
+
</span>
|
|
16
|
+
<span class="chat-time">2 hours ago</span>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="chat-message">
|
|
19
|
+
<p>This is a chat message with some content.</p>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="chat-actions">
|
|
22
|
+
<button class="btn btn-ghost btn-sm">
|
|
23
|
+
<i class="icon icon-reply"></i>
|
|
24
|
+
</button>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Full Width Chat
|
|
31
|
+
```html
|
|
32
|
+
<div class="list-chat-messages full-width">
|
|
33
|
+
<div class="chat-message-item">...</div>
|
|
34
|
+
</div>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Chat Message Variants
|
|
38
|
+
```html
|
|
39
|
+
<!-- Announcement message -->
|
|
40
|
+
<div class="chat-message">
|
|
41
|
+
<div class="message-banner announcement">
|
|
42
|
+
System Announcement: Maintenance scheduled
|
|
43
|
+
</div>
|
|
44
|
+
<p>The system will be down for maintenance on Saturday.</p>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- Mentioned message -->
|
|
48
|
+
<div class="chat-message">
|
|
49
|
+
<div class="message-banner mentioned">
|
|
50
|
+
<span class="text-mentioned">@YourName</span> mentioned you
|
|
51
|
+
</div>
|
|
52
|
+
<p>Hey, can you take a look at this?</p>
|
|
53
|
+
</div>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Chat Window Component
|
|
57
|
+
```html
|
|
58
|
+
<div class="chat-window">
|
|
59
|
+
<div class="chat-window-header">
|
|
60
|
+
<h3>Chat</h3>
|
|
61
|
+
</div>
|
|
62
|
+
<div class="chat-window-messages">
|
|
63
|
+
<div class="list-chat-messages">
|
|
64
|
+
<!-- Messages -->
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="chat-window-input">
|
|
68
|
+
<textarea class="form-control" placeholder="Type a message..."></textarea>
|
|
69
|
+
<button class="btn btn-primary">Send</button>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## Chart Components
|
|
77
|
+
|
|
78
|
+
The design system integrates ECharts for data visualization.
|
|
79
|
+
|
|
80
|
+
### Chart Container
|
|
81
|
+
```html
|
|
82
|
+
<div class="echarts-container" id="my-chart"></div>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Chart Types
|
|
86
|
+
```javascript
|
|
87
|
+
import { createChartHorizontal } from './modules/echarts_horizontal';
|
|
88
|
+
createChartHorizontal("element-id", dataArray, seriesArray, showLegend, labelColor, valueColor);
|
|
89
|
+
|
|
90
|
+
import { createChartDonut } from './modules/echarts_donut';
|
|
91
|
+
createChartDonut("element-id", dataArray, valueText, labelText, showLegend, labelColor, valueColor);
|
|
92
|
+
|
|
93
|
+
import { createChartVertical } from './modules/echarts_vertical';
|
|
94
|
+
import { createChartLine } from './modules/echarts_line';
|
|
95
|
+
import { createChartArea } from './modules/echarts_area';
|
|
96
|
+
import { createChartGauge } from './modules/echarts_gauge';
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Chart Colors
|
|
100
|
+
```javascript
|
|
101
|
+
export const colorCritical = '#FF3131';
|
|
102
|
+
export const colorHigh = '#d8ce0d';
|
|
103
|
+
export const colorLow = '#9fa2a8';
|
|
104
|
+
export const colorVisual = '#f48d21';
|
|
105
|
+
export const colorContent = '#326dd1';
|
|
106
|
+
export const colorUX = '#263340';
|
|
107
|
+
export const colorSuccess = '#8cbd24';
|
|
108
|
+
export const colorDanger = '#FF3131';
|
|
109
|
+
export const colorNeutral = '#e6e6e6';
|
|
110
|
+
export const colorInfo = '#326dd1';
|
|
111
|
+
export const colorBlueLight = '#21bef4';
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Chart Data Examples
|
|
115
|
+
```javascript
|
|
116
|
+
export let dataBugs = [
|
|
117
|
+
{ value: 79, name: 'Critical', itemStyle: {color: colorCritical}},
|
|
118
|
+
{ value: 37, name: 'High', itemStyle: {color: colorHigh}},
|
|
119
|
+
{ value: 19, name: 'Low', itemStyle: {color: colorLow}},
|
|
120
|
+
];
|
|
121
|
+
|
|
122
|
+
export let dataTestCases = [
|
|
123
|
+
{ value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
|
|
124
|
+
{ value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
|
|
125
|
+
{ value: 27, name: 'Open', itemStyle: {color: colorNeutral}},
|
|
126
|
+
];
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## Status & Progress Components
|
|
132
|
+
|
|
133
|
+
### Status Stepper
|
|
134
|
+
|
|
135
|
+
#### Icon-based
|
|
136
|
+
```html
|
|
137
|
+
<div class="status-stepper">
|
|
138
|
+
<div class="status-step completed">
|
|
139
|
+
<div class="icon icon-check-thick-centered"></div>
|
|
140
|
+
3 done
|
|
141
|
+
</div>
|
|
142
|
+
<div class="status-step active">
|
|
143
|
+
<div class="icon icon-sync"></div>
|
|
144
|
+
Executing checks
|
|
145
|
+
</div>
|
|
146
|
+
<div class="status-step">
|
|
147
|
+
+ 3 to do
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
#### Counter-based
|
|
153
|
+
```html
|
|
154
|
+
<div class="status-stepper">
|
|
155
|
+
<div class="status-step completed">
|
|
156
|
+
<div class="counter">99</div>
|
|
157
|
+
Completed
|
|
158
|
+
</div>
|
|
159
|
+
<div class="status-step active">
|
|
160
|
+
<div class="counter">12</div>
|
|
161
|
+
Active
|
|
162
|
+
</div>
|
|
163
|
+
<div class="status-step">
|
|
164
|
+
<div class="counter">5</div>
|
|
165
|
+
Pending
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
**Key Classes:**
|
|
171
|
+
- `.status-stepper` - Container (flex row, items-stretch, full width)
|
|
172
|
+
- `.status-step` - Individual step (flex row, centered, rounded, px-md py-xs, bg-black)
|
|
173
|
+
- `.status-step.active` - Active step (grow-1, white text, bg-gray-750)
|
|
174
|
+
- `.status-step.completed` - Completed state
|
|
175
|
+
- `.status-step .counter` - Numeric counter (pr-xs, text-lg, font-bold)
|
|
176
|
+
|
|
177
|
+
---
|
|
178
|
+
|
|
179
|
+
## Utility Components
|
|
180
|
+
|
|
181
|
+
### Tags
|
|
182
|
+
```html
|
|
183
|
+
<div class="list-tags">
|
|
184
|
+
<div class="tag">Tag</div>
|
|
185
|
+
<div class="tag sm">Tag sm</div>
|
|
186
|
+
<div class="tag focus-group">Focus-group</div>
|
|
187
|
+
<div class="tag teamleader-verified">
|
|
188
|
+
<div class="icon icon-verify-check mr-xxs"></div>
|
|
189
|
+
TL
|
|
190
|
+
</div>
|
|
191
|
+
<div class="tag success">
|
|
192
|
+
<div class="icon icon-check-circle"></div>
|
|
193
|
+
Success
|
|
194
|
+
</div>
|
|
195
|
+
<div class="tag danger">
|
|
196
|
+
<div class="icon icon-cross-circle"></div>
|
|
197
|
+
Danger
|
|
198
|
+
</div>
|
|
199
|
+
<div class="tag pending">
|
|
200
|
+
<div class="icon icon-sync"></div>
|
|
201
|
+
Pending
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
### Tag with Popover
|
|
207
|
+
```html
|
|
208
|
+
<details class="popover-wrapper">
|
|
209
|
+
<summary>
|
|
210
|
+
<div class="tag popover-tag">
|
|
211
|
+
<div class="icon icon-clock"></div>
|
|
212
|
+
Popover-tag
|
|
213
|
+
</div>
|
|
214
|
+
</summary>
|
|
215
|
+
<div class="popover-menu info">
|
|
216
|
+
<div class="popover-title">Popover title</div>
|
|
217
|
+
<div class="popover-content">Content...</div>
|
|
218
|
+
<div class="popover-actions">
|
|
219
|
+
<div class="btn btn-sm btn-inverted">Action</div>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</details>
|
|
223
|
+
|
|
224
|
+
<div class="tag popover-tag light">...</div>
|
|
225
|
+
<div class="tag popover-tag bg-info text-white">...</div>
|
|
226
|
+
<div class="tag popover-tag bg-black text-white">...</div>
|
|
227
|
+
<div class="tag popover-tag bg-danger text-white">...</div>
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
### Info Popover
|
|
231
|
+
```html
|
|
232
|
+
<details class="popover-wrapper">
|
|
233
|
+
<summary>
|
|
234
|
+
<div class="btn btn-sm btn-square">
|
|
235
|
+
<div class="icon icon-info"></div>
|
|
236
|
+
</div>
|
|
237
|
+
</summary>
|
|
238
|
+
<div class="popover-menu info">
|
|
239
|
+
<div class="popover-title">Popover title</div>
|
|
240
|
+
<div class="popover-content">Popover content...</div>
|
|
241
|
+
<div class="text-with-icon mt-xs">
|
|
242
|
+
<div class="icon icon-lock text-disabled mr-icon-spacing"></div>
|
|
243
|
+
<div class="text-sm">0/100 Completed</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="popover-actions">
|
|
246
|
+
<div class="btn btn-sm btn-inverted">Action</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
</details>
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
### Pagination
|
|
253
|
+
```html
|
|
254
|
+
<nav class="pagy-bootstrap nav">
|
|
255
|
+
<ul class="pagination">
|
|
256
|
+
<li class="page-item prev"><a class="page-link" href="#"><</a></li>
|
|
257
|
+
<li class="page-item"><a class="page-link" href="#">1</a></li>
|
|
258
|
+
<li class="page-item active"><a class="page-link" href="#">2</a></li>
|
|
259
|
+
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
|
260
|
+
<li class="page-item next disabled"><a class="page-link" href="#">></a></li>
|
|
261
|
+
</ul>
|
|
262
|
+
</nav>
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
### Badges
|
|
266
|
+
```html
|
|
267
|
+
<span class="badge badge-primary">New</span>
|
|
268
|
+
<span class="badge badge-success">Active</span>
|
|
269
|
+
<span class="badge badge-danger">Urgent</span>
|
|
270
|
+
<span class="badge badge-warning">Pending</span>
|
|
271
|
+
<span class="badge badge-info">Info</span>
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
### Icon Sizes
|
|
275
|
+
```html
|
|
276
|
+
<i class="icon icon-star text-icon-xxxs"></i> <!-- 10px -->
|
|
277
|
+
<i class="icon icon-star text-icon-xxs"></i> <!-- 0.625rem -->
|
|
278
|
+
<i class="icon icon-star text-icon-xs"></i> <!-- 16px -->
|
|
279
|
+
<i class="icon icon-star text-icon-sm"></i> <!-- 18px -->
|
|
280
|
+
<i class="icon icon-star text-icon"></i> <!-- 20px - default -->
|
|
281
|
+
<i class="icon icon-star text-icon-lg"></i> <!-- 40px -->
|
|
282
|
+
<i class="icon icon-star text-icon-xl"></i> <!-- 60px -->
|
|
283
|
+
<i class="icon icon-star text-icon-xxl"></i> <!-- 90px -->
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
### Text with Icon
|
|
287
|
+
```html
|
|
288
|
+
<div class="text-with-icon">
|
|
289
|
+
<div class="icon icon-check text-success mr-icon-spacing"></div>
|
|
290
|
+
<span>Text with icon</span>
|
|
291
|
+
</div>
|
|
292
|
+
|
|
293
|
+
<div class="link-with-icon">
|
|
294
|
+
<div class="icon icon-external-link mr-icon-spacing"></div>
|
|
295
|
+
<a href="#">Link with icon</a>
|
|
296
|
+
</div>
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
### Description List
|
|
300
|
+
```html
|
|
301
|
+
<dl class="description-list">
|
|
302
|
+
<dt>Term</dt>
|
|
303
|
+
<dd>Definition</dd>
|
|
304
|
+
</dl>
|
|
305
|
+
|
|
306
|
+
<!-- Inline description list -->
|
|
307
|
+
<dl class="list-inline">
|
|
308
|
+
<dt>Property</dt>
|
|
309
|
+
<dd>Value</dd>
|
|
310
|
+
</dl>
|
|
311
|
+
```
|