testio-tailwind 3.6.0 → 3.8.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.
Files changed (42) hide show
  1. package/.eleventy.js +2 -1
  2. package/package.json +1 -1
  3. package/src/_includes/example-header-agenticqa.njk +70 -0
  4. package/src/_includes/page-with-sidebar-dark.njk +48 -0
  5. package/src/_layouts/page-example-agenticqa.njk +19 -0
  6. package/src/assets/{stylesheets/components/fonts → fonts}/testio.eot +0 -0
  7. package/src/assets/{stylesheets/components/fonts → fonts}/testio.svg +349 -226
  8. package/src/assets/{stylesheets/components/fonts → fonts}/testio.ttf +0 -0
  9. package/src/assets/{stylesheets/components/fonts → fonts}/testio.woff +0 -0
  10. package/src/assets/fonts/testio.woff2 +0 -0
  11. package/src/assets/images/profilepic_testinator.png +0 -0
  12. package/src/assets/stylesheets/app.css +4 -0
  13. package/src/assets/stylesheets/components/agenticqa/agenticqa_header.css +37 -0
  14. package/src/assets/stylesheets/components/agenticqa/agenticqa_sidebar.css +12 -0
  15. package/src/assets/stylesheets/components/chat.css +115 -7
  16. package/src/assets/stylesheets/components/divider.css +3 -0
  17. package/src/assets/stylesheets/components/iconfont.css +528 -140
  18. package/src/assets/stylesheets/components/icons.css +12 -0
  19. package/src/assets/stylesheets/components/layout.css +11 -1
  20. package/src/assets/stylesheets/components/list_item.css +36 -3
  21. package/src/assets/stylesheets/components/lists.css +2 -2
  22. package/src/assets/stylesheets/components/splitview.css +72 -16
  23. package/src/assets/stylesheets/components/tabs.css +14 -5
  24. package/src/assets/stylesheets/components/tags.css +22 -7
  25. package/src/assets/stylesheets/components/typography.css +1 -1
  26. package/src/assets/stylesheets/components/uploads.css +1 -1
  27. package/src/assets/stylesheets/tailwind_config.css +5 -0
  28. package/src/assets/stylesheets/tailwind_custom_utilities.css +18 -1
  29. package/src/assets/stylesheets/tailwind_theme_dark.css +23 -4
  30. package/src/pages/agenticqa/chat_collapsable.haml +29 -0
  31. package/src/pages/agenticqa/chat_form.haml +15 -0
  32. package/src/pages/agenticqa/chat_history.haml +24 -0
  33. package/src/pages/agenticqa/chat_messages.haml +53 -0
  34. package/src/pages/agenticqa/header.haml +77 -0
  35. package/src/pages/agenticqa/index.njk +1 -1
  36. package/src/pages/agenticqa/listitem.haml +42 -0
  37. package/src/pages/components/splitview_item_collapsable.haml +1 -1
  38. package/src/pages/components/tags.haml +11 -1
  39. package/src/pages/examples/agenticqa.haml +188 -0
  40. package/src/assets/stylesheets/components/fonts/testio.woff2 +0 -0
  41. package/src/static/app.compiled.css +0 -20627
  42. package/src/static/app.compiled.css.map +0 -1
@@ -0,0 +1,77 @@
1
+ ---
2
+ tags: agenticqa
3
+ title: Header
4
+ ---
5
+
6
+ %nav.header.agenticqa
7
+ .header-wrapper
8
+ .navlinks.logo-wrapper
9
+ %a.navlink.header-logo{href:'#'}
10
+ .navlinks.left
11
+ %a.navlink.active{href:'#'} Navlink active
12
+ %a.navlink{href:'#'} Navlink
13
+ %a.navlink{href:'#'}
14
+ %span.icon.icon-check-circle-filled
15
+ %span Navlink
16
+ %details.header-dropdown
17
+ %summary.navlink Collapsable
18
+ .dropdown-menu
19
+ %a.navlink{href:'#'}
20
+ %span.icon.icon-user
21
+ Dropdown-item
22
+ %a.navlink{href:'#'}
23
+ %span.icon.icon-cog
24
+ Dropdown-item
25
+ %a.navlink{href:'#'}
26
+ %span.icon.icon-shutdown
27
+ Dropdown-item with a longer text to see how things break and behave
28
+ %a.navlink.responsive-label{href:'#'}
29
+ %span.icon.icon-check-circle-filled
30
+ %span Responsive label
31
+ %details.mobile-links
32
+ %summary.mobile-menu-btn
33
+ .navlink
34
+ %span.sr-only Open main menu
35
+ %span.icon.icon-menu
36
+ .mobile-menu.sidebar
37
+ %a.navlink.active{href:'#'}
38
+ %span.navlink-badge.icon.icon-home
39
+ Navlink active
40
+ %a.navlink{href:'#'}
41
+ %span.navlink-badge.icon.icon-plus
42
+ Add project
43
+ %details
44
+ %summary.navlink
45
+ %span.icon.icon-product
46
+ Collapsable
47
+ %a.navlink{href:'#'}
48
+ %span.icon.icon-test
49
+ Navlink child
50
+ %a.navlink{href:'#'}
51
+ %span.icon.icon-test
52
+ Navlink child
53
+ %a.navlink{href:'#'}
54
+ %span.icon.icon-test
55
+ Navlink child
56
+ %a.navlink.active{href:'#'}
57
+ %span.icon.icon-test
58
+ Active child
59
+ .navlinks.right
60
+ %details.header-dropdown.user-menu
61
+ %summary.btn-profile.navlink
62
+ %span.sr-only Open user menu
63
+ %img.user-profile{src:'/assets/images/placeholders/profile_supergirl.png'}
64
+ .user-details
65
+ .profile-role Admin
66
+ .profile-name Anja Berger
67
+ .dropdown-menu.profile-dropdown
68
+ %a.dropdown-link{href:'#'}
69
+ %span.icon.icon-user
70
+ Your Profile
71
+ %a.dropdown-link{href:'#'}
72
+ %span.icon.icon-cog
73
+ Settings
74
+ %a.dropdown-link{href:'#'}
75
+ %span.icon.icon-shutdown
76
+ Sign out
77
+
@@ -4,4 +4,4 @@ permalink: agenticqa/
4
4
  ---
5
5
 
6
6
  {% set collection = collections.agenticqa %}
7
- {% include "page-with-sidebar-nocode.njk" %}
7
+ {% include "page-with-sidebar-dark.njk" %}
@@ -0,0 +1,42 @@
1
+ ---
2
+ tags: agenticqa
3
+ title: list item
4
+ ---
5
+
6
+ .list-listitems
7
+ %details.listitem
8
+ %summary.listitem-header
9
+ .listitem-badge 1
10
+ .listitem-title List item collapsable
11
+ .listitem-actions
12
+ .btn.collapse-btn
13
+ .listitem-content
14
+ .listitem-subheadline Subheadline
15
+ .listitem-card
16
+ %p Here's a long message with mountains 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.
17
+ .listitem-subheadline AI Screenshots
18
+ .listitem-attachments
19
+ .attachment
20
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
21
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
22
+ .attachment
23
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
24
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
25
+ %details.listitem
26
+ %summary.listitem-header
27
+ .listitem-badge 2
28
+ .listitem-title List item collapsable
29
+ .listitem-actions
30
+ .btn.collapse-btn
31
+ .listitem-content
32
+ .listitem-subheadline Subheadline
33
+ .listitem-card
34
+ %p Here's a long message with mountains 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.
35
+ .listitem-subheadline AI Screenshots
36
+ .listitem-attachments
37
+ .attachment
38
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
39
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
40
+ .attachment
41
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
42
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
@@ -37,7 +37,7 @@ title: Splitview item collapsable
37
37
  .splitview-list
38
38
  %details.splitview-group
39
39
  %summary.splitview-item
40
- .splitview-item-icon.icon.icon-circle.danger
40
+ .splitview-item-icon.icon.icon-circle-empty
41
41
  .splitview-item-text
42
42
  .splitview-item-title Splitview group title / Test Case title
43
43
  .splitview-item-metainfo
@@ -10,6 +10,16 @@ title: Tags
10
10
  .tag.teamleader-verified
11
11
  .icon.icon-verify-check.mr-xxs
12
12
  TL
13
+ .list-tags.mt-xs
14
+ .tag.success
15
+ .icon.icon-check-circle
16
+ Success
17
+ .tag.danger
18
+ .icon.icon-cross-circle
19
+ Danger
20
+ .tag.pending
21
+ .icon.icon-sync
22
+ Pending
13
23
  .list-tags.mt-xs
14
24
  %details.popover-wrapper
15
25
  %summary
@@ -23,7 +33,7 @@ title: Tags
23
33
  .btn.btn-sm.btn-inverted Action
24
34
  %details.popover-wrapper
25
35
  %summary
26
- .tag.popover-tag.bg-gray-lighter
36
+ .tag.popover-tag.light
27
37
  .icon.icon-check-thick-centered.text-success
28
38
  Popover-tag
29
39
  .popover-menu.info
@@ -0,0 +1,188 @@
1
+ ---
2
+ layout: page-example-agenticqa.njk
3
+ title: "Agentic QA"
4
+ tags: "examples"
5
+ ---
6
+
7
+ %main.main-content.centered#ds-splitview-demo
8
+ .centered-content
9
+ .grid-splitview
10
+ .card.p-card-padding.splitview-list
11
+ %nav.nav-tabs
12
+ .navlink.active{href:""} 11 Pages
13
+ .navlink{href:""} 6 Checks
14
+ %details.splitview-group
15
+ %summary.splitview-item.unread
16
+ .splitview-item-icon.icon.icon-circle-empty.text-chart-empty
17
+ .splitview-item-text
18
+ .splitview-item-title Splitview group title / Test Case title
19
+ .splitview-item-status
20
+ .text-with-icon
21
+ .icon.icon-sync
22
+ executing checks
23
+ .splitview-item.selected#ds-splitview-demo-item
24
+ .splitview-item-icon.icon.icon-cross-circle-filled.danger
25
+ .splitview-item-text Check title
26
+ .splitview-item.unread
27
+ .splitview-item-icon.icon.icon-check-circle-filled.success
28
+ .splitview-item-text Check title with a lot of lorem ipsum
29
+ .splitview-item.unread
30
+ .splitview-item-icon.icon.icon-blocked.blocked
31
+ .splitview-item-text Check title with a lot of lorem ipsum
32
+ .splitview-item.unread
33
+ .splitview-item-icon.icon.icon-sync.pending
34
+ .splitview-item-text Check title with a lot of lorem ipsum
35
+ .card.p-card-padding.splitview-details
36
+ .splitview-details-header
37
+ .col
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
45
+ .splitview-details-status
46
+ .tag.danger
47
+ .icon.icon-cross-circle
48
+ failed
49
+ .list-chat-messages.full-width
50
+ .chat-message-item.collapsable
51
+ %details
52
+ %summary.chat-header
53
+ %span.chat-title.label Check description
54
+ %span.label last update: 1 days ago
55
+ .chat-message
56
+ Here's a long message with mountains 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.
57
+ %details.chat-history-collapsable
58
+ %summary.chat-history-header
59
+ .chat-history-title Show complete history
60
+ .list-chat-messages.full-width
61
+ .chat-message-item
62
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
63
+ .chat-header
64
+ %span.chat-title.label Justification
65
+ %span.label 5 mins ago
66
+ .chat-message
67
+ Here's a long message with mountains 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.
68
+ .chat-message-item.your-message
69
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
70
+ .chat-header
71
+ %span.chat-title.label Justification
72
+ %span.label 5 mins ago
73
+ .chat-message
74
+ Here's a short message with bits of lorem ipsum.
75
+ .chat-message-item
76
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
77
+ .chat-header
78
+ %span.chat-title.label result
79
+ %span.label 5 mins ago
80
+ .chat-message
81
+ .text-with-icon
82
+ .icon.icon-cross-circle.danger
83
+ The check has failed
84
+ .chat-message-item
85
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
86
+ .chat-header
87
+ %span.chat-title.label Justification
88
+ %span.label 5 mins ago
89
+ .chat-message
90
+ Here's a long message with mountains 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.
91
+ .chat-message-item.your-message
92
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
93
+ .chat-header
94
+ %span.chat-title.label Justification
95
+ %span.label 5 mins ago
96
+ .chat-message
97
+ Here's a short message with bits of lorem ipsum.
98
+ .chat-message-item.collapsable.your-message
99
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
100
+ %details
101
+ %summary.chat-header
102
+ %span.chat-title.label Collapsable message
103
+ %span.label 5 mins ago
104
+ .chat-message
105
+ Here's a long message with mountains 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.
106
+ .chat-form-row
107
+ %form.chat-form
108
+ %h5.text-card-header.mb-xxs Re-Run this check
109
+ %p.font-light.mb-md Add additional instructions for re-running this check.
110
+ %textarea.form-control{placeholder:"Add your instructions or feedback for Testinator"}
111
+ .form-actions
112
+ %a.btn.btn-primary.rounded-full
113
+ %span.icon.icon-sync.mr-icon-spacing
114
+ re-run check
115
+ %button.btn.btn-secondary.rounded-full Cancel
116
+ %img.chat-avatar{src:"/assets/images/placeholders/profile_supergirl.png"}
117
+ .chat-message-item.collapsable
118
+ %img.chat-avatar{src:"/assets/images/profilepic_testinator.png"}
119
+ %details
120
+ %summary.chat-header
121
+ %span.chat-title.label Collapsable message
122
+ %span.label 5 mins ago
123
+ .chat-message
124
+ Here's a long message with mountains 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.
125
+ .chat-action-row
126
+ %a.btn.btn-primary.rounded-full re-run check
127
+ %a.btn.btn-secondary.rounded-full update check
128
+ .divider
129
+ %p.uppercase.font-light.mb-xs Steps
130
+ .list-listitems
131
+ %details.listitem
132
+ %summary.listitem-header
133
+ .listitem-badge 1
134
+ .listitem-title List item collapsable
135
+ .listitem-actions
136
+ .btn.collapse-btn
137
+ .listitem-content
138
+ .listitem-subheadline Subheadline
139
+ .listitem-card
140
+ %p Here's a long message with mountains 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.
141
+ .listitem-subheadline AI Screenshots
142
+ .listitem-attachments
143
+ .attachment
144
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
145
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
146
+ .attachment
147
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
148
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
149
+ %details.listitem
150
+ %summary.listitem-header
151
+ .listitem-badge 2
152
+ .listitem-title List item collapsable
153
+ .listitem-actions
154
+ .btn.collapse-btn
155
+ .listitem-content
156
+ .listitem-subheadline Subheadline
157
+ .listitem-card
158
+ %p Here's a long message with mountains 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.
159
+ .listitem-subheadline AI Screenshots
160
+ .listitem-attachments
161
+ .attachment
162
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
163
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
164
+ .attachment
165
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
166
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
167
+ %details.listitem
168
+ %summary.listitem-header
169
+ .listitem-badge 3
170
+ .listitem-title List item collapsable
171
+ .listitem-actions
172
+ .btn.collapse-btn
173
+ .listitem-content
174
+ .listitem-subheadline Subheadline
175
+ .listitem-card
176
+ %p Here's a long message with mountains 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.
177
+ .listitem-subheadline AI Screenshots
178
+ .listitem-attachments
179
+ .attachment
180
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
181
+ %img{src:'/assets/images/placeholders/bugdetails.png', alt:'Bug details'}
182
+ .attachment
183
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
184
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png', alt:'Bug details'}
185
+ .divider
186
+ %dl.list-inline
187
+ %dt.label Execution ID:
188
+ %dd 123089324580972134