testio-tailwind 3.8.0 → 3.9.0
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/package.json +1 -1
- package/src/assets/stylesheets/app.css +2 -1
- package/src/assets/stylesheets/components/agenticqa/agenticqa_pageheader.css +48 -0
- package/src/assets/stylesheets/components/buttons.css +2 -1
- package/src/assets/stylesheets/components/chat.css +2 -2
- package/src/assets/stylesheets/components/forms.css +1 -1
- package/src/assets/stylesheets/components/layout.css +1 -1
- package/src/assets/stylesheets/components/lists.css +4 -4
- package/src/assets/stylesheets/components/splitview.css +38 -9
- package/src/pages/agenticqa/pageheader.haml +95 -0
- package/src/pages/examples/agenticqa.haml +49 -11
package/package.json
CHANGED
|
@@ -92,4 +92,5 @@
|
|
|
92
92
|
|
|
93
93
|
/*//// Agentic QA components ////*/
|
|
94
94
|
@import './components/agenticqa/agenticqa_header.css' layer(components);
|
|
95
|
-
@import './components/agenticqa/agenticqa_sidebar.css' layer(components);
|
|
95
|
+
@import './components/agenticqa/agenticqa_sidebar.css' layer(components);
|
|
96
|
+
@import './components/agenticqa/agenticqa_pageheader.css' layer(components);
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
|
|
2
|
+
.page-header {
|
|
3
|
+
@apply grid lg:grid-cols-5 gap-xs lg:gap-grid-gutter mb-grid-gutter;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.page-header .page-maincard {
|
|
7
|
+
@apply lg:col-span-4;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.page-session-title {
|
|
11
|
+
@apply mb-sm;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.page-meta-info {
|
|
15
|
+
@apply grid grid-cols-2 xl:grid-cols-6 gap-xs place-content-start mb-xs;
|
|
16
|
+
grid-template-columns: auto auto;
|
|
17
|
+
@media (width >= theme(--breakpoint-xl)) {
|
|
18
|
+
grid-template-columns: auto auto auto auto auto auto;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.page-meta-info dt {
|
|
23
|
+
@apply pr-xs;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.page-meta-info dd {
|
|
27
|
+
@apply mb-0 pr-lg text-label-color;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.page-meta-info .row-testsuite {
|
|
31
|
+
@apply xl:col-span-5;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.page-actions {
|
|
35
|
+
@apply flex flex-row lg:flex-col h-full;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.page-actions .btn {
|
|
39
|
+
@apply justify-center text-center ml-xxs first:ml-0 mr-xxs last:mr-0 lg:mx-0 lg:mb-xs lg:last:mb-0 w-full border-bordercolor;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.page-actions .btn-main {
|
|
43
|
+
@apply flex-grow lg:flex-col;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.page-actions .btn-main .icon {
|
|
47
|
+
@apply hidden lg:block lg:mb-sm lg:h-icon-xl lg:text-icon-xl;
|
|
48
|
+
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
.btn,
|
|
2
2
|
input.btn,
|
|
3
3
|
input[type="submit"].btn {
|
|
4
|
-
@apply inline-flex justify-start items-center h-btn px-md font-body font-semibold text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none
|
|
4
|
+
@apply inline-flex justify-start items-center h-btn px-md font-body font-semibold text-buttons whitespace-nowrap text-primary border-0 rounded cursor-pointer select-none
|
|
5
|
+
dark:uppercase;
|
|
5
6
|
|
|
6
7
|
&:hover,
|
|
7
8
|
&:focus,
|
|
@@ -361,10 +361,10 @@ img.chat-avatar {
|
|
|
361
361
|
}
|
|
362
362
|
|
|
363
363
|
|
|
364
|
-
/*///// Chat
|
|
364
|
+
/*///// Chat history /////*/
|
|
365
365
|
|
|
366
366
|
.chat-history-header {
|
|
367
|
-
@apply flex justify-center items-center w-full text-center text-label font-semibold text-gray-darker uppercase cursor-pointer bg-gray-darkest rounded-full hover:bg-link-hover hover:text-
|
|
367
|
+
@apply flex justify-center items-center w-full text-center text-label font-semibold text-gray-darker uppercase cursor-pointer bg-gray-darkest rounded-full hover:bg-link-hover hover:text-link-hover;
|
|
368
368
|
height: 12px;
|
|
369
369
|
}
|
|
370
370
|
|
|
@@ -14,20 +14,20 @@
|
|
|
14
14
|
/*/////// Description List ///////*/
|
|
15
15
|
|
|
16
16
|
dl dd {
|
|
17
|
-
@apply mb-xs last:mb-0;
|
|
17
|
+
@apply mb-xs last:mb-0 leading-4;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
dl.list-inline {
|
|
21
|
-
@apply grid gap-xs content-start
|
|
21
|
+
@apply grid gap-xs content-start;
|
|
22
22
|
grid-template-columns: auto 1fr;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
dl.list-inline dt {
|
|
26
|
-
@apply pr-spacing dark:pr-xs dark:
|
|
26
|
+
@apply pr-spacing dark:pr-xs dark:text-label-color;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
dl.list-inline dd {
|
|
30
|
-
@apply mb-0;
|
|
30
|
+
@apply mb-0 leading-tight break-all;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
dl.list-inline.responsive {
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
}
|
|
125
125
|
|
|
126
126
|
.splitview-details-header {
|
|
127
|
-
@apply grid gap-xs mb-md;
|
|
127
|
+
@apply grid gap-xs mb-md dark:mb-xxs;
|
|
128
128
|
grid-template-columns: auto 1fr auto;
|
|
129
129
|
}
|
|
130
130
|
|
|
@@ -181,11 +181,15 @@
|
|
|
181
181
|
}
|
|
182
182
|
}
|
|
183
183
|
|
|
184
|
-
.meta-info {
|
|
185
|
-
@apply grid grid-cols-2 gap-spacing place-content-start place-items-
|
|
184
|
+
.meta-info-row {
|
|
185
|
+
@apply grid grid-cols-2 gap-spacing place-content-start place-items-start mb-md text-label-color;
|
|
186
186
|
grid-template-columns: auto auto;
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
+
.meta-info-row .label {
|
|
190
|
+
@apply pt-1px;
|
|
191
|
+
}
|
|
192
|
+
|
|
189
193
|
.splitview-details-content-grid {
|
|
190
194
|
@apply grid gap-xs mb-md;
|
|
191
195
|
|
|
@@ -228,7 +232,7 @@
|
|
|
228
232
|
}
|
|
229
233
|
|
|
230
234
|
.splitview-item.selected {
|
|
231
|
-
@apply text-white bg-info dark:bg-listitem dark:border-r-4 border-link-hover;
|
|
235
|
+
@apply text-white bg-info dark:bg-listitem dark:border-r-4 border-link-hover dark:rounded-r-none;
|
|
232
236
|
|
|
233
237
|
.splitview-item-checkbox input {
|
|
234
238
|
@apply border-white;
|
|
@@ -243,6 +247,7 @@
|
|
|
243
247
|
|
|
244
248
|
body:not(.dark) .splitview-item.selected {
|
|
245
249
|
.splitview-item-icon,
|
|
250
|
+
.splitview-item-icon::before,
|
|
246
251
|
.splitview-item-metainfo {
|
|
247
252
|
@apply text-white;
|
|
248
253
|
}
|
|
@@ -288,9 +293,10 @@ body:not(.dark) .splitview-item.selected {
|
|
|
288
293
|
}
|
|
289
294
|
|
|
290
295
|
.splitview-item-text {
|
|
291
|
-
@apply pr-xs;
|
|
296
|
+
@apply pr-xs dark:text-white font-normal;
|
|
292
297
|
grid-area: split-text;
|
|
293
298
|
line-height: 1.3;
|
|
299
|
+
line-break: anywhere;
|
|
294
300
|
}
|
|
295
301
|
|
|
296
302
|
.splitview-item-title {
|
|
@@ -330,6 +336,7 @@ body:not(.dark) .splitview-item.selected {
|
|
|
330
336
|
@apply bg-white;
|
|
331
337
|
}
|
|
332
338
|
|
|
339
|
+
|
|
333
340
|
/*///// Collapsable splitview item/group /////*/
|
|
334
341
|
|
|
335
342
|
.splitview-group {
|
|
@@ -367,17 +374,39 @@ body:not(.dark) .splitview-item.selected {
|
|
|
367
374
|
@apply pl-[65px] dark:pl-lg dark:rounded-none dark:last:rounded-b;
|
|
368
375
|
}
|
|
369
376
|
|
|
377
|
+
.splitview-group .turbo-wrapper {
|
|
378
|
+
@apply contents;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.splitview-group .turbo-wrapper .splitview-item:not(summary) {
|
|
382
|
+
@apply rounded-none;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.splitview-group .turbo-wrapper:last-child .splitview-item {
|
|
386
|
+
@apply rounded-b;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.splitview-group .turbo-wrapper:last-child .splitview-item.selected {
|
|
390
|
+
@apply rounded-br-none;
|
|
391
|
+
}
|
|
370
392
|
|
|
371
393
|
/*///// Grid split /////*/
|
|
372
394
|
|
|
373
395
|
.grid-splitview {
|
|
374
|
-
@apply grid grid-cols-2 lg:grid-cols-5 gap-grid-gutter;
|
|
396
|
+
@apply grid md:grid-cols-2 lg:grid-cols-5 gap-grid-gutter;
|
|
397
|
+
grid-template-areas: "splitview-list"
|
|
398
|
+
"splitview-details";
|
|
399
|
+
|
|
400
|
+
@media (width >= theme(--breakpoint-md)) {
|
|
401
|
+
grid-template-areas: "splitview-list splitview-details";
|
|
402
|
+
}
|
|
375
403
|
}
|
|
376
404
|
|
|
377
405
|
.grid-splitview .splitview-list {
|
|
378
|
-
@apply
|
|
406
|
+
@apply lg:col-span-2 overflow-y-visible h-fit;
|
|
407
|
+
max-height: auto;
|
|
379
408
|
}
|
|
380
409
|
|
|
381
410
|
.grid-splitview .splitview-details {
|
|
382
|
-
@apply block
|
|
383
|
-
}
|
|
411
|
+
@apply block lg:col-span-3 h-auto min-h-auto overflow-y-visible;
|
|
412
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: agenticqa
|
|
3
|
+
title: Pageheader
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
.page-header
|
|
7
|
+
.card.page-maincard.p-card-padding
|
|
8
|
+
.form-grid
|
|
9
|
+
.form-group
|
|
10
|
+
%label.form-label Input
|
|
11
|
+
%input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
|
|
12
|
+
.form-group
|
|
13
|
+
%label.form-label Input
|
|
14
|
+
%input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
|
|
15
|
+
.form-group
|
|
16
|
+
%label.form-label Input
|
|
17
|
+
%input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
|
|
18
|
+
.form-group
|
|
19
|
+
%label.form-label Input
|
|
20
|
+
%input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
|
|
21
|
+
.form-group
|
|
22
|
+
%label.form-label URL of pages for testing
|
|
23
|
+
%input.form-control{type:'text', placeholder:"Some delicious placeholder text"}
|
|
24
|
+
.page-actions
|
|
25
|
+
%a.btn.btn-primary.btn-xl{href:""}
|
|
26
|
+
%span.icon.icon-test-running-xl
|
|
27
|
+
Save and run test
|
|
28
|
+
%a.btn.btn-secondary{href:""}
|
|
29
|
+
Save draft
|
|
30
|
+
%a.btn.btn-secondary{href:""}
|
|
31
|
+
Cancel
|
|
32
|
+
.page-header
|
|
33
|
+
.card.page-maincard.p-card-padding
|
|
34
|
+
%h1.text-card-header Session details
|
|
35
|
+
%h2.page-session-title Test Session title
|
|
36
|
+
%dl.page-meta-info
|
|
37
|
+
%dt.label Created on:
|
|
38
|
+
%dd 2025-07-23 19:11 10:45 AM
|
|
39
|
+
%dt.label Last test:
|
|
40
|
+
%dd 2025-07-23 19:11 10:45 AM
|
|
41
|
+
%dt.label ID:
|
|
42
|
+
%dd 321456987
|
|
43
|
+
%dt.label URL:
|
|
44
|
+
%dd.row-testsuite
|
|
45
|
+
%a.label{href:""} Test Suite name
|
|
46
|
+
%dt.label Status:
|
|
47
|
+
%dd.text-white Status
|
|
48
|
+
.page-actions
|
|
49
|
+
%a.btn.btn-primary.btn-main{href:""}
|
|
50
|
+
%span.icon.icon-test-running-xl
|
|
51
|
+
Start test
|
|
52
|
+
.page-header
|
|
53
|
+
.card.page-maincard.p-card-padding
|
|
54
|
+
%h1.text-card-header Session details
|
|
55
|
+
%h2.page-session-title Test Session title
|
|
56
|
+
%dl.page-meta-info
|
|
57
|
+
%dt.label Created on:
|
|
58
|
+
%dd 2025-07-23 19:11 10:45 AM
|
|
59
|
+
%dt.label Last test:
|
|
60
|
+
%dd 2025-07-23 19:11 10:45 AM
|
|
61
|
+
%dt.label ID:
|
|
62
|
+
%dd 321456987
|
|
63
|
+
%dt.label URL:
|
|
64
|
+
%dd.row-testsuite
|
|
65
|
+
%a.label{href:""} Test Suite name
|
|
66
|
+
%dt.label Status:
|
|
67
|
+
%dd.text-white Status
|
|
68
|
+
.page-actions
|
|
69
|
+
%a.btn.btn-primary.btn-main{href:""}
|
|
70
|
+
%span.icon.icon-review-xl
|
|
71
|
+
Show report
|
|
72
|
+
%a.btn.btn-secondary{href:""}
|
|
73
|
+
Re-run all checks
|
|
74
|
+
.page-header
|
|
75
|
+
.card.page-maincard.p-card-padding
|
|
76
|
+
%h1.text-card-header Session details
|
|
77
|
+
%h2.page-session-title Test Session title
|
|
78
|
+
%dl.page-meta-info
|
|
79
|
+
%dt.label Created on:
|
|
80
|
+
%dd 2025-07-23 19:11 10:45 AM
|
|
81
|
+
%dt.label Last test:
|
|
82
|
+
%dd 2025-07-23 19:11 10:45 AM
|
|
83
|
+
%dt.label ID:
|
|
84
|
+
%dd 321456987
|
|
85
|
+
%dt.label URL:
|
|
86
|
+
%dd.row-testsuite
|
|
87
|
+
%a.label{href:""} Test Suite name
|
|
88
|
+
%dt.label Status:
|
|
89
|
+
%dd.text-white Status
|
|
90
|
+
.page-actions
|
|
91
|
+
%a.btn.btn-secondary.btn-main.disabled{href:""}
|
|
92
|
+
%span.icon.icon-review-xl
|
|
93
|
+
Show report
|
|
94
|
+
%a.btn.btn-secondary{href:""}
|
|
95
|
+
Re-run all checks
|
|
@@ -6,6 +6,28 @@ tags: "examples"
|
|
|
6
6
|
|
|
7
7
|
%main.main-content.centered#ds-splitview-demo
|
|
8
8
|
.centered-content
|
|
9
|
+
.page-header
|
|
10
|
+
.card.page-maincard.p-card-padding
|
|
11
|
+
%h1.text-card-header Session details
|
|
12
|
+
%h2.page-session-title Test Session title
|
|
13
|
+
%dl.page-meta-info
|
|
14
|
+
%dt.label Created on:
|
|
15
|
+
%dd 2025-07-23 19:11 10:45 AM
|
|
16
|
+
%dt.label Last test:
|
|
17
|
+
%dd 2025-07-23 19:11 10:45 AM
|
|
18
|
+
%dt.label ID:
|
|
19
|
+
%dd 321456987
|
|
20
|
+
%dt.label URL:
|
|
21
|
+
%dd.row-testsuite
|
|
22
|
+
%a.label{href:""} Test Suite name
|
|
23
|
+
%dt.label Status:
|
|
24
|
+
%dd.text-white Status
|
|
25
|
+
.page-actions
|
|
26
|
+
%a.btn.btn-primary.btn-main{href:""}
|
|
27
|
+
%span.icon.icon-review-xl
|
|
28
|
+
Show report
|
|
29
|
+
%a.btn.btn-secondary{href:""}
|
|
30
|
+
Re-run all checks
|
|
9
31
|
.grid-splitview
|
|
10
32
|
.card.p-card-padding.splitview-list
|
|
11
33
|
%nav.nav-tabs
|
|
@@ -15,37 +37,53 @@ tags: "examples"
|
|
|
15
37
|
%summary.splitview-item.unread
|
|
16
38
|
.splitview-item-icon.icon.icon-circle-empty.text-chart-empty
|
|
17
39
|
.splitview-item-text
|
|
18
|
-
.splitview-item-title
|
|
40
|
+
.splitview-item-title https://www.bando.com/collections/writing-supplies/products/retro-pen-set
|
|
19
41
|
.splitview-item-status
|
|
20
42
|
.text-with-icon
|
|
21
43
|
.icon.icon-sync
|
|
22
44
|
executing checks
|
|
23
|
-
.splitview-item.selected
|
|
45
|
+
.splitview-item.selected
|
|
24
46
|
.splitview-item-icon.icon.icon-cross-circle-filled.danger
|
|
25
47
|
.splitview-item-text Check title
|
|
26
48
|
.splitview-item.unread
|
|
27
49
|
.splitview-item-icon.icon.icon-check-circle-filled.success
|
|
28
|
-
.splitview-item-text Check title with
|
|
50
|
+
.splitview-item-text Check title with an endless amount of really long lorem ipsum
|
|
29
51
|
.splitview-item.unread
|
|
30
52
|
.splitview-item-icon.icon.icon-blocked.blocked
|
|
31
53
|
.splitview-item-text Check title with a lot of lorem ipsum
|
|
32
54
|
.splitview-item.unread
|
|
33
55
|
.splitview-item-icon.icon.icon-sync.pending
|
|
34
56
|
.splitview-item-text Check title with a lot of lorem ipsum
|
|
57
|
+
%details#check_executions_grouped_by_url_79.splitview-group
|
|
58
|
+
%summary.splitview-item
|
|
59
|
+
.splitview-item-icon.icon.icon-circle-empty.text-chart-empty
|
|
60
|
+
.splitview-item-text
|
|
61
|
+
.splitview-item-title https://www.bando.com/collections/writing-supplies/products/retro-pen-set
|
|
62
|
+
%turbo-frame.turbo-wrapper
|
|
63
|
+
%a.splitview-item
|
|
64
|
+
.splitview-item-icon.icon.icon-check-circle-filled.success
|
|
65
|
+
.splitview-item-text Navigation Menu Hover
|
|
66
|
+
%turbo-frame.turbo-wrapper
|
|
67
|
+
%a.splitview-item
|
|
68
|
+
.splitview-item-icon.icon.icon-cross-circle-filled.danger
|
|
69
|
+
.splitview-item-text No Results Message
|
|
70
|
+
%turbo-frame.turbo-wrapper
|
|
71
|
+
%a.splitview-item
|
|
72
|
+
.splitview-item-icon.icon.icon-check-circle-filled.success
|
|
73
|
+
.splitview-item-text Main Product Image
|
|
35
74
|
.card.p-card-padding.splitview-details
|
|
36
75
|
.splitview-details-header
|
|
37
|
-
.
|
|
38
|
-
%h3.splitview-details-title Splitview-details-title
|
|
39
|
-
.meta-info
|
|
40
|
-
.label Run 1
|
|
41
|
-
%dl.list-inline
|
|
42
|
-
%dt.label URL:
|
|
43
|
-
%dd
|
|
44
|
-
%a.label{href:""} https://example.com
|
|
76
|
+
%h3.splitview-details-title Splitview-details-title
|
|
45
77
|
.splitview-details-status
|
|
46
78
|
.tag.danger
|
|
47
79
|
.icon.icon-cross-circle
|
|
48
80
|
failed
|
|
81
|
+
.meta-info-row
|
|
82
|
+
.label Run 1
|
|
83
|
+
%dl.list-inline
|
|
84
|
+
%dt.label URL:
|
|
85
|
+
%dd
|
|
86
|
+
%a.label{href:""} https://www.bando.com/collections/writing-supplies/products/retro-pen-set
|
|
49
87
|
.list-chat-messages.full-width
|
|
50
88
|
.chat-message-item.collapsable
|
|
51
89
|
%details
|