testio-tailwind 2.1.1 → 2.2.1

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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/assets/images/assets_issuing/logo_bancontact.svg +3 -0
  3. package/src/assets/stylesheets/app.css +1 -7
  4. package/src/assets/stylesheets/components/gallery.css +35 -0
  5. package/src/assets/stylesheets/components/metasidebar.css +9 -9
  6. package/src/assets/stylesheets/components/splitview.css +26 -6
  7. package/src/pages/examples/splitview-metasidebar.haml +397 -0
  8. package/src/pages/examples/splitview-testcases.haml +23 -23
  9. package/src/pages/examples/splitview.haml +31 -32
  10. package/src/pages/issuing/brand_logos.haml +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "testio-tailwind",
3
- "version": "2.1.1",
3
+ "version": "2.2.1",
4
4
  "description": "Tailwind based design system for Test IO",
5
5
  "scripts": {
6
6
  "clean": "del dist --force",
package/src/assets/images/assets_issuing/logo_bancontact.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="49" height="30" viewBox="0 0 49 30" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M7.65137 24.666C9.1168 24.666 9.84473 25.4442 9.84473 26.79V29.5615C9.43599 29.7708 8.66849 30 7.67188 30C6.30612 30 5.61816 29.3318 5.61816 28.4346C5.61829 27.4477 6.42589 26.8693 7.62207 26.8594C7.91917 26.8648 8.21549 26.8918 8.50879 26.9395V26.7002C8.50879 26.0921 8.1601 25.8027 7.49219 25.8027C7.04242 25.7971 6.59578 25.8784 6.17676 26.042L5.92676 24.9658C6.35534 24.7864 7.04334 24.6661 7.65137 24.666ZM18.6611 24.666C19.1779 24.6635 19.6904 24.7659 20.167 24.9658L19.9072 26.0518C19.5513 25.8976 19.169 25.8131 18.7812 25.8027C17.9738 25.8027 17.5352 26.3715 17.5352 27.3086C17.5352 28.335 17.9936 28.8631 18.8506 28.8633C19.2332 28.8528 19.6106 28.765 19.958 28.6045L20.1768 29.7109C19.7254 29.9118 19.2351 30.0105 18.7412 30C17.0864 30 16.1299 28.9726 16.1299 27.3477C16.1301 25.7331 17.0765 24.6662 18.6611 24.666ZM23.1387 24.666C24.6838 24.666 25.6211 25.7331 25.6211 27.3281C25.6211 28.9332 24.6839 30 23.1387 30C21.6036 29.9999 20.6465 28.9331 20.6465 27.3281C20.6465 25.7332 21.6036 24.6661 23.1387 24.666ZM33.6465 24.7861H34.7539V25.8828H33.6465V28.0156C33.6465 28.5938 33.8864 28.8633 34.335 28.8633C34.5127 28.8628 34.69 28.843 34.8633 28.8037L34.9326 29.9102C34.648 29.9732 34.3569 30.0035 34.0654 30C32.8793 29.9999 32.2715 29.3519 32.2715 28.0361V25.8828H31.5938V24.7861H32.2715V23.6797L33.6465 23.6094V24.7861ZM37.5176 24.666C38.983 24.666 39.7109 25.4442 39.7109 26.79V29.5615C39.3022 29.7708 38.5347 30 37.5381 30C36.1723 30 35.4844 29.3318 35.4844 28.4346C35.4845 27.4477 36.2921 26.8693 37.4883 26.8594C37.7854 26.8648 38.0817 26.8918 38.375 26.9395V26.7002C38.375 26.0921 38.0263 25.8027 37.3584 25.8027C36.9086 25.7971 36.462 25.8784 36.043 26.042L35.793 24.9658C36.2215 24.7864 36.9096 24.6661 37.5176 24.666ZM42.9131 24.666C43.4297 24.6635 43.9415 24.766 44.418 24.9658L44.1592 26.0518C43.8031 25.8974 43.4202 25.8131 43.0322 25.8027C42.2248 25.8028 41.7861 26.3715 41.7861 27.3086C41.7862 28.3352 42.2453 28.8633 43.1025 28.8633C43.485 28.8528 43.8617 28.765 44.209 28.6045L44.4277 29.7109C43.9764 29.9117 43.4861 30.0105 42.9922 30C41.3375 29.9999 40.3809 28.9726 40.3809 27.3477C40.381 25.7329 41.3282 24.666 42.9131 24.666ZM47.0244 24.7861H48.1309V25.8828H47.0244V28.0156C47.0244 28.5938 47.2633 28.8633 47.7119 28.8633C47.8897 28.8628 48.0669 28.843 48.2402 28.8037L48.3096 29.9102C48.025 29.9732 47.7338 30.0035 47.4424 30C46.2563 29.9999 45.6485 29.3519 45.6484 28.0361V25.8828H44.9707V24.7861H45.6484V23.6797L47.0244 23.6094V24.7861ZM2.15332 22.9023C3.71831 22.9024 4.72543 23.49 4.72559 24.7061C4.72559 25.3937 4.40637 25.8722 3.95801 26.1514C4.60584 26.4504 4.98428 27.029 4.98438 27.8164C4.98438 29.2221 3.95733 29.8799 2.3623 29.8799H0V22.9023H2.15332ZM13.0664 24.666C14.5218 24.666 15.3593 25.3841 15.3594 26.71V29.8799H13.9834V26.8096C13.9833 26.1219 13.6645 25.8028 13.0566 25.8027C12.7547 25.7985 12.4547 25.8599 12.1787 25.9824V29.8799H10.8135V25.1055C11.5299 24.8177 12.2944 24.668 13.0664 24.666ZM28.6699 24.666C30.1253 24.666 30.9628 25.3841 30.9629 26.71V29.8799H29.5869V26.8096C29.5868 26.1219 29.2682 25.8027 28.6602 25.8027C28.3583 25.7985 28.0592 25.86 27.7832 25.9824V29.8799H26.417V25.1055C27.1333 24.8177 27.898 24.6681 28.6699 24.666ZM7.80078 27.7266C7.34242 27.7267 6.9834 27.9066 6.9834 28.375C6.9834 28.7937 7.28318 29.0127 7.81152 29.0127C8.05165 29.0205 8.29014 28.9726 8.50879 28.873V27.8066C8.27645 27.755 8.03879 27.7279 7.80078 27.7266ZM37.668 27.7266C37.2094 27.7266 36.8506 27.9064 36.8506 28.375C36.8506 28.7937 37.1494 29.0127 37.6777 29.0127C37.9179 29.0205 38.1563 28.9726 38.375 28.873V27.8066C38.1428 27.755 37.9058 27.7279 37.668 27.7266ZM23.1387 25.8027C22.441 25.8028 22.0518 26.3911 22.0518 27.3281C22.0518 28.2751 22.441 28.8632 23.1387 28.8633C23.8465 28.8633 24.2158 28.2752 24.2158 27.3281C24.2158 26.3911 23.8465 25.8027 23.1387 25.8027ZM1.38574 28.6641H2.24316C3.08042 28.664 3.56929 28.4547 3.56934 27.7969C3.56934 27.1489 3.14986 26.8799 2.3623 26.8799H1.38574V28.6641ZM1.38574 25.8027H2.41211C3.04009 25.8027 3.30953 25.4939 3.30957 24.9258C3.30957 24.3176 2.82104 24.1182 2.16309 24.1182H1.38574V25.8027ZM24.1553 9.70605C20.5155 14.5592 16.8753 19.4131 9.5957 19.4131H0V9.70605H24.1553ZM48.3096 0V9.70605H24.1553C27.7949 4.85304 31.4346 8.37558e-05 38.7139 0H48.3096Z" fill="white"/>
3
+ </svg>
package/src/assets/stylesheets/app.css CHANGED
@@ -37,6 +37,7 @@
37
37
  @import './components/form_grid.css' layer(components);
38
38
  @import './components/form_card.css' layer(components);
39
39
  @import './components/forms.css' layer(components);
40
+ @import './components/gallery.css' layer(components);
40
41
  @import './components/search.css' layer(components);
41
42
  @import './components/tom_select.css' layer(components);
42
43
  @import './components/trix_editor.css' layer(components);
@@ -95,10 +96,3 @@
95
96
  border-color: var(--color-gray-200, currentcolor);
96
97
  }
97
98
  }
98
-
99
- .source-sans-3-<uniquifier> {
100
- font-family: "Source Sans 3", sans-serif;
101
- font-optical-sizing: auto;
102
- font-weight: <weight>;
103
- font-style: normal;
104
- }
package/src/assets/stylesheets/components/gallery.css ADDED
@@ -0,0 +1,35 @@
1
+
2
+ .gallery {
3
+ @apply relative flex flex-row items-stretch mb-spacing w-full min-h-40 max-h-96 overflow-hidden;
4
+ }
5
+
6
+ .gallery-btn {
7
+ @apply flex shrink-0 justify-center items-center w-spacing top-0 z-10 bg-white text-primary hover:text-white hover:bg-link-hover cursor-pointer;
8
+ }
9
+
10
+ .gallery-btn:hover::before {
11
+ @apply bg-white;
12
+ }
13
+
14
+ .gallery-btn::before {
15
+ @apply inline-block w-sm h-icon bg-primary;
16
+ content: "";
17
+ mask-repeat: no-repeat;
18
+ }
19
+
20
+ .gallery-btn.left::before {
21
+ mask-image: url("/assets/images/icons/arrow-left.svg");
22
+ }
23
+
24
+ .gallery-btn.right::before {
25
+ mask-image: url("/assets/images/icons/arrow-right.svg");
26
+ }
27
+
28
+ .gallery-slides {
29
+ @apply flex flex-row overflow-hidden;
30
+ }
31
+
32
+ .gallery-slides a,
33
+ .gallery-slides img {
34
+ @apply h-full w-auto ml-xxs first:ml-0;
35
+ }
package/src/assets/stylesheets/components/metasidebar.css CHANGED
@@ -3,47 +3,47 @@ aside.metasidebar {
3
3
  grid-area: aside;
4
4
  }
5
5
 
6
- aside .metasidebar-btn {
7
- @apply relative inline-flex items-center justify-center h-full w-spacing border-l border-bordercolor;
6
+ .metasidebar-btn {
7
+ @apply relative inline-flex items-center justify-center h-full w-spacing border-l border-bordercolor cursor-pointer;
8
8
  }
9
9
 
10
- aside .metasidebar-btn::after {
10
+ .metasidebar-btn::after {
11
11
  @apply inline-block right-xs bg-primary top-xs w-xs h-icon;
12
12
  content: "";
13
13
  mask-image: url("/assets/images/icons/arrow-left.svg");
14
14
  mask-repeat: no-repeat;
15
15
  }
16
16
 
17
- aside .metasidebar-btn:hover {
17
+ .metasidebar-btn:hover {
18
18
  @apply bg-link-hover;
19
19
  &:after {
20
20
  @apply bg-white;
21
21
  }
22
22
  }
23
23
 
24
- aside .metasidebar-wrapper[open] .metasidebar-btn {
24
+ .metasidebar-wrapper[open] .metasidebar-btn {
25
25
  @apply absolute w-md;
26
26
  }
27
27
 
28
- aside .metasidebar-wrapper[open] .metasidebar-btn::after {
28
+ .metasidebar-wrapper[open] .metasidebar-btn::after {
29
29
  mask-image: url("/assets/images/icons/arrow-right.svg");
30
30
  mask-repeat: no-repeat;
31
31
  }
32
32
 
33
33
 
34
- aside .metasidebar-wrapper {
34
+ .metasidebar-wrapper {
35
35
  @apply relative grid h-full max-h-full min-h-0 bg-white;
36
36
  grid-template-columns: auto 1fr;
37
37
  grid-template-rows: minmax(0, 1fr);
38
38
  }
39
39
 
40
- aside .metasidebar-wrapper[open] {
40
+ .metasidebar-wrapper[open] {
41
41
  @media (width >= theme(--breakpoint-sm)) {
42
42
  @apply relative grid top-auto;
43
43
  }
44
44
  }
45
45
 
46
- aside .metasidebar-content {
46
+ .metasidebar-content {
47
47
  @apply relative block sm:w-meta-sidebar-width max-h-full min-h-0 ml-md pt-spacing pr-spacing pb-xxl pl-xs overflow-y-scroll;
48
48
  }
49
49
 
package/src/assets/stylesheets/components/splitview.css CHANGED
@@ -4,7 +4,7 @@
4
4
  "splitview-list-header splitview-details"
5
5
  "splitview-list splitview-details"
6
6
  "splitview-list-actionbar splitview-details-actionbar";
7
- grid-template-columns: 1fr;
7
+ grid-template-columns: auto 1fr;
8
8
  grid-template-rows: auto auto 1fr auto;
9
9
  grid-area: main;
10
10
  @media (width >= theme(--breakpoint-lg)) {
@@ -30,17 +30,24 @@
30
30
  @apply hidden;
31
31
  }
32
32
 
33
+ .splitview-layout .metasidebar {
34
+ @apply hidden;
35
+ }
36
+
33
37
  .splitview-layout.item-selected .splitview-list-header {
34
38
  @apply hidden lg:flex;
35
39
  }
36
40
 
37
41
  .splitview-layout.item-selected .splitview-list {
38
- @apply hidden lg:block overflow-x-hidden;
42
+ @apply hidden lg:grid overflow-x-hidden;
39
43
  }
40
44
 
41
45
  .splitview-layout.item-selected {
42
46
 
43
47
  .splitview-details {
48
+ display: grid;
49
+ }
50
+ .metasidebar {
44
51
  display: block;
45
52
  }
46
53
  .splitview-details-content {
@@ -59,8 +66,9 @@
59
66
  display: flex;
60
67
  }
61
68
  .splitview-list {
62
- grid-row-start: 3;
63
- grid-row-end: 5;
69
+ display: block;
70
+ /* grid-row-start: 3;
71
+ grid-row-end: 5; */
64
72
  }
65
73
  }
66
74
 
@@ -105,8 +113,16 @@
105
113
  /*///// Splitview Details /////*/
106
114
 
107
115
  .splitview-details {
108
- @apply px-spacing pb-xl overflow-y-scroll overflow-x-hidden h-full max-h-full min-h-0 max-w-full min-w-0 border-l-2 border-bordercolor;
116
+ @apply grid overflow-hidden h-full max-h-full min-h-0 max-w-full min-w-0 lg:border-l-2 border-bordercolor;
109
117
  grid-area: splitview-details;
118
+ grid-template-areas: "details-content details-metasidebar"
119
+ "details-actionbar details-actionbar";
120
+ grid-template-columns: 1fr auto;
121
+ grid-template-rows: minmax(0, 1fr) auto;
122
+ }
123
+
124
+ .splitview-details-content {
125
+ @apply pb-xl px-spacing overflow-x-hidden overflow-y-scroll;
110
126
  }
111
127
 
112
128
  .splitview-details-header {
@@ -174,6 +190,10 @@
174
190
  }
175
191
  }
176
192
 
193
+ .splitview-details .metasidebar {
194
+ grid-area: details-metasidebar;
195
+ }
196
+
177
197
  /*///// Splitview actionbars /////*/
178
198
 
179
199
  .splitview-list-actionbar {
@@ -185,7 +205,7 @@
185
205
 
186
206
  .splitview-details-actionbar {
187
207
  @apply hidden bg-info px-body-padding-mobile sm:px-body-padding-tablet;
188
-
208
+ grid-area: details-actionbar;
189
209
  .popover-menu {
190
210
  @apply bg-info;
191
211
  }
package/src/pages/examples/splitview-metasidebar.haml ADDED
@@ -0,0 +1,397 @@
1
+ ---
2
+ layout: page-example.njk
3
+ title: "Splitview Layout with metasidebar"
4
+ tags: "examples"
5
+ ---
6
+ %nav.sidebar{arialabel:'Sidebar'}
7
+ %a.navlink.active{href:'#'}
8
+ %span.navlink-badge.icon.icon-home
9
+ Navlink active
10
+ %a.navlink{href:'#'}
11
+ %span.navlink-badge.icon.icon-bug
12
+ Navlink
13
+ %details
14
+ %summary.navlink-container
15
+ .navlink
16
+ %span.navlink-badge.icon.icon-product
17
+ Navlink collapsable
18
+ %a.navlink{href:'#'}
19
+ %span.navlink-badge.icon.icon-test
20
+ Navlink children
21
+ %a.navlink{href:'#'}
22
+ %span.navlink-badge.icon.icon-test
23
+ Navlink children
24
+ %a.navlink{href:'#'}
25
+ %span.navlink-badge.icon.icon-test
26
+ Navlink children
27
+ %a.navlink{href:'#'}
28
+ %span.navlink-badge.icon.icon-test
29
+ Navlink children
30
+ %a.navlink{href:'#'}
31
+ %span.navlink-badge.icon.icon-bug-reproduction
32
+ Navlink with a long title to see how things are breaking into several lines and don&apos;t cause a broken layout
33
+
34
+ %main.splitview-layout#ds-splitview-demo
35
+ .splitview-header
36
+ %h1 Splitview layout
37
+ %p This is the header which will be independent from the 2 columns.
38
+ .splitview-list-header
39
+ .form-check.sm
40
+ %input{type:'checkbox'}
41
+ %h3.splitview-list-header-title 18 Bugs
42
+ .splitview-list-header-actions
43
+ %details.dropdown-actions.dropright
44
+ %summary
45
+ %a.link-with-icon{href:""}
46
+ .icon.icon-sort-descending
47
+ Severity (desc)
48
+ .popover-menu
49
+ %a.popover-action{href:'#'}
50
+ %span.icon.icon-sort-descending
51
+ Severity (desc)
52
+ %a.popover-action{href:'#'}
53
+ %span.icon.icon-sort-ascending
54
+ Severity (asc)
55
+ %a.popover-action{href:'#'}
56
+ %span.icon.icon-sort-number-ascending
57
+ Age (old to new)
58
+ %a.popover-action{href:'#'}
59
+ %span.icon.icon-sort-number-descending
60
+ Age (new to old)
61
+ %a.popover-action{href:'#'}
62
+ %span.icon.icon-sort-az
63
+ Title A-Z
64
+ %a.popover-action{href:'#'}
65
+ %span.icon.icon-sort-za
66
+ Title Z-A
67
+ %a.linked-icon{href:""}
68
+ .icon.icon-filter
69
+ %a.linked-icon{href:""}
70
+ .icon.icon-search
71
+ .splitview-list
72
+ .splitview-item#ds-splitview-demo-item
73
+ .splitview-item-checkbox.form-check.sm
74
+ %input{type:'checkbox'}
75
+ .splitview-item-icon.icon.icon-critical
76
+ .splitview-item-text
77
+ .splitview-item-title Select this splitscreen item to view a demo of the behavior
78
+ .splitview-item-metainfo
79
+ = "#123321321 | Product Detail Page"
80
+ %br
81
+ = "by ÜberTester | Submitted"
82
+ .splitview-item-status
83
+ .status-icon.status-submitted
84
+ .splitview-item
85
+ .splitview-item-checkbox.form-check.sm
86
+ %input{type:'checkbox'}
87
+ .splitview-item-icon.icon.icon-critical
88
+ .splitview-item-text
89
+ .splitview-item-title Selected splitview item title 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.
90
+ .splitview-item-metainfo
91
+ = "#123321321 | Product Detail Page"
92
+ %br
93
+ = "by ÜberTester | Submitted"
94
+ .splitview-item-status
95
+ .status-icon.status-submitted
96
+ .status-icon.status-manager-question
97
+ .status-icon.status-reproduction
98
+ .splitview-item
99
+ .splitview-item-checkbox.form-check.sm
100
+ %input{type:'checkbox'}
101
+ .splitview-item-icon.icon.icon-critical
102
+ .splitview-item-text
103
+ .splitview-item-title Splitview item title
104
+ .splitview-item-metainfo
105
+ = "#123321321 | Product Detail Page"
106
+ %br
107
+ = "by ÜberTester | Submitted"
108
+ .splitview-item-status
109
+ .status-icon.status-manager-approved
110
+ .splitview-item
111
+ .splitview-item-checkbox.form-check.sm
112
+ %input{type:'checkbox'}
113
+ .splitview-item-icon.icon.icon-critical
114
+ .splitview-item-text
115
+ .splitview-item-title Splitview item title 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.
116
+ .splitview-item-metainfo
117
+ = "#123321321 | Product Detail Page"
118
+ %br
119
+ = "by ÜberTester | Submitted"
120
+ .splitview-item-status
121
+ .status-icon.status-customer-approved
122
+ .splitview-item
123
+ .splitview-item-checkbox.form-check.sm
124
+ %input{type:'checkbox'}
125
+ .splitview-item-icon.icon.icon-critical
126
+ .splitview-item-text
127
+ .splitview-item-title Splitview item title
128
+ .splitview-item-metainfo
129
+ = "#123321321 | Product Detail Page"
130
+ %br
131
+ = "by ÜberTester | Submitted"
132
+ .splitview-item-status
133
+ .status-icon.status-customer-rejected
134
+ .splitview-item
135
+ .splitview-item-checkbox.form-check.sm
136
+ %input{type:'checkbox'}
137
+ .splitview-item-icon.icon.icon-critical
138
+ .splitview-item-text
139
+ .splitview-item-title Splitview item title 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.
140
+ .splitview-item-metainfo
141
+ = "#123321321 | Product Detail Page"
142
+ %br
143
+ = "by ÜberTester | Submitted"
144
+ .list-tags
145
+ .tag-item.focus-group Focus-group tag
146
+ .splitview-item
147
+ .splitview-item-checkbox.form-check.sm
148
+ %input{type:'checkbox'}
149
+ .splitview-item-icon.icon.icon-critical
150
+ .splitview-item-text
151
+ .splitview-item-title Splitview item title 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.
152
+ .splitview-item-metainfo
153
+ = "#123321321 | Product Detail Page"
154
+ %br
155
+ = "by ÜberTester | Submitted"
156
+ .splitview-item
157
+ .splitview-item-checkbox.form-check.sm
158
+ %input{type:'checkbox'}
159
+ .splitview-item-icon.icon.icon-critical
160
+ .splitview-item-text
161
+ .splitview-item-title Selected splitview item title 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.
162
+ .splitview-item-metainfo
163
+ = "#123321321 | Product Detail Page"
164
+ %br
165
+ = "by ÜberTester | Submitted"
166
+ .splitview-item-status
167
+ .status-icon.status-submitted
168
+ .status-icon.status-manager-question
169
+ .status-icon.status-reproduction
170
+ .splitview-item
171
+ .splitview-item-checkbox.form-check.sm
172
+ %input{type:'checkbox'}
173
+ .splitview-item-icon.icon.icon-critical
174
+ .splitview-item-text
175
+ .splitview-item-title Splitview item title
176
+ .splitview-item-metainfo
177
+ = "#123321321 | Product Detail Page"
178
+ %br
179
+ = "by ÜberTester | Submitted"
180
+ .splitview-item-status
181
+ .status-icon.status-manager-approved
182
+ .splitview-item
183
+ .splitview-item-checkbox.form-check.sm
184
+ %input{type:'checkbox'}
185
+ .splitview-item-icon.icon.icon-critical
186
+ .splitview-item-text
187
+ .splitview-item-title Splitview item title 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.
188
+ .splitview-item-metainfo
189
+ = "#123321321 | Product Detail Page"
190
+ %br
191
+ = "by ÜberTester | Submitted"
192
+ .splitview-item-status
193
+ .status-icon.status-customer-approved
194
+ .splitview-item
195
+ .splitview-item-checkbox.form-check.sm
196
+ %input{type:'checkbox'}
197
+ .splitview-item-icon.icon.icon-critical
198
+ .splitview-item-text
199
+ .splitview-item-title Splitview item title
200
+ .splitview-item-metainfo
201
+ = "#123321321 | Product Detail Page"
202
+ %br
203
+ = "by ÜberTester | Submitted"
204
+ .splitview-item-status
205
+ .status-icon.status-customer-rejected
206
+ .splitview-item
207
+ .splitview-item-checkbox.form-check.sm
208
+ %input{type:'checkbox'}
209
+ .splitview-item-icon.icon.icon-critical
210
+ .splitview-item-text
211
+ .splitview-item-title Splitview item title 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.
212
+ .splitview-item-metainfo
213
+ = "#123321321 | Product Detail Page"
214
+ %br
215
+ = "by ÜberTester | Submitted"
216
+ .list-tags
217
+ .tag-item.focus-group Focus-group tag
218
+ .splitview-details
219
+ .splitview-details-emptystate.empty-state-message.search Please select an item from the list to view its details.
220
+ .splitview-details-content
221
+ .splitview-details-header
222
+ .icon.icon-critical
223
+ %h3.splitview-details-title Error page is shown if Project Owner reject review after Automator left the project
224
+ %a.btn.btn-sm.btn-square.btn-close-detailview#ds-demo-close-splitview{href: "#"}
225
+ .icon.icon-cross
226
+ .splitview-details-meta
227
+ %dl.list-splitview-meta
228
+ %dt Status
229
+ %dd
230
+ .text-with-icon
231
+ .status-icon.status-submitted
232
+ Submitted
233
+ %dt Bug ID
234
+ %dd #1799709
235
+ %details.meta-collapsable
236
+ %summary
237
+ .summary-closed Show more
238
+ .summary-open Show less
239
+ %dl.list-splitview-meta
240
+ %dt Bug Type
241
+ %dd
242
+ .text-with-icon
243
+ .icon.icon-bug
244
+ Functional
245
+ %dt Reported on
246
+ %dd October 5, 2021 11:48 AM
247
+ %dt Severity
248
+ %dd
249
+ .text-with-icon
250
+ .icon.icon-critical
251
+ Critical
252
+ %dt Feature
253
+ %dd
254
+ %a{href: ""} Feature name
255
+ %dt Known Bug
256
+ %dd
257
+ .text-with-icon
258
+ .icon.icon-bug-known
259
+ No
260
+ %dt Test ID
261
+ %dd #88219
262
+ %dt Tester
263
+ %dd
264
+ %details.dropdown-actions
265
+ %summary
266
+ .user-item.linked.sm
267
+ %img{src:"/assets/images/placeholders/profile_supergirl.png"}
268
+ User item with actions
269
+ .popover-menu
270
+ %a.popover-action{href:'#'}
271
+ %span.icon.text-icon-default.icon-user-story-test
272
+ Tester profile
273
+ %a.popover-action{href:'#'}
274
+ %span.icon.text-icon-default.icon-review-exclamation
275
+ Report tester
276
+ .gallery
277
+ .gallery-btn.left
278
+ .gallery-slides
279
+ %a.active{href: ""}
280
+ %img{src:"/assets/images/placeholders/Approaches-desktop.png"}
281
+ %a{href: ""}
282
+ %img{src:"/assets/images/placeholders/Approaches-desktop.png"}
283
+ .gallery-btn.right
284
+ %section.splitview-details-content-grid
285
+ .label URL
286
+ %a{href: ""} https://www.url.com
287
+ .label Steps
288
+ .markdown
289
+ %ol
290
+ %li
291
+ Go to
292
+ %a{href: ""} https://www.url.com
293
+ and login as crowd AUTOMATOR (
294
+ %a{href: ""} email@qa.team
295
+ \/ abc123 was in my case)
296
+ %li Join a project, complete some automation task, and LEAVE the project
297
+ %li
298
+ Login
299
+ %a{href: ""} https://www.url.com
300
+ as project owner to perform review (
301
+ %a{href: ""} email@qa.team
302
+ \/ abc123 was in my case)
303
+ %li Start to review the automated task and reject it approval
304
+ .label Actual result
305
+ .markdown
306
+ %p Actual Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
307
+ .label Expected result
308
+ .markdown
309
+ %p Expected Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
310
+ %section
311
+ .section-header
312
+ %h5.section-title Attachments
313
+ .attachments
314
+ .attachment
315
+ %a.attachment-thumb{href:"/assets/images/placeholders/bugdetails.png"}
316
+ %img{src:'/assets/images/placeholders/bugdetails.png'}
317
+ %a.attachment-name{href:"/assets/images/placeholders/bugdetails.png"} myfile-name.png
318
+ .attachment
319
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
320
+ %img{src:'/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png'}
321
+ %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
322
+ .attachment
323
+ %a.attachment-thumb{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"}
324
+ .attachment-icon.icon-xl.icon-review-xl
325
+ %a.attachment-name{href:"/assets/images/placeholders/CustomerUI-Mobile-Sidebar.png"} myfile-name-kjashdflkajsdflkjadsflkjhadsf.png
326
+ %section
327
+ .section-header
328
+ %h5.section-title Reported on
329
+ .list-devices.mb-sm
330
+ .device
331
+ .device-icon.icon-lg.icon-computer-windows-lg
332
+ .device-info
333
+ Desktop | Windows 11
334
+ %ul.browser-list
335
+ %li.icon.icon-chrome
336
+ %li.icon.icon-edge-chromium
337
+ %section
338
+ .section-header
339
+ %h5.section-title Comments
340
+ .empty-state-message.chat No comments yet
341
+ .metasidebar
342
+ %details.metasidebar-wrapper{open:"true"}
343
+ %summary.metasidebar-btn
344
+ .metasidebar-content
345
+ %h2.metasidebar-title Metasidebar title
346
+ %p.mb-md Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
347
+ %h3.metasidebar-subheading Metasidebar subheading
348
+ %p.mb-xs Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
349
+ %footer.splitview-details-actionbar
350
+ %button.btn.btn-default.btn-primary
351
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
352
+ Primary
353
+ %button.btn.btn-default.btn-secondary
354
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
355
+ Secondary
356
+ %details.dropdown-actions.dropup.dropright
357
+ %summary
358
+ .btn.btn-square.btn-secondary
359
+ .icon.text-icon-default.icon-more
360
+ .popover-menu
361
+ %a.popover-action{href:'#'}
362
+ %span.icon.text-icon-default.icon-pencil
363
+ Edit
364
+ %a.popover-action{href:'#'}
365
+ %span.icon.text-icon-default.icon-duplicate
366
+ Duplicate
367
+ %a.popover-action{href:'#'}
368
+ %span.icon.text-icon-default.icon-remove
369
+ Delete
370
+ %button.btn-intercom
371
+ %span.icon.icon-intercom
372
+ %footer.splitview-list-actionbar
373
+ %button.btn.btn-default.btn-primary
374
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
375
+ Primary
376
+ %button.btn.btn-default.btn-secondary
377
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
378
+ Secondary
379
+ %button.btn.btn-default.btn-info
380
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
381
+ Info
382
+ %details.dropdown-actions.dropup.dropright
383
+ %summary
384
+ .btn.btn-square.btn-secondary
385
+ .icon.text-icon-default.icon-more
386
+ .popover-menu
387
+ %a.popover-action{href:'#'}
388
+ %span.icon.text-icon-default.icon-pencil
389
+ Edit
390
+ %a.popover-action{href:'#'}
391
+ %span.icon.text-icon-default.icon-duplicate
392
+ Duplicate
393
+ %a.popover-action{href:'#'}
394
+ %span.icon.text-icon-default.icon-remove
395
+ Delete
396
+ %button.btn-intercom
397
+ %span.icon.icon-intercom
package/src/pages/examples/splitview-testcases.haml CHANGED
@@ -427,6 +427,29 @@ tags: "examples"
427
427
  .listitem-subheadline Listitem-card
428
428
  .listitem-card
429
429
  %p Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
430
+ %footer.splitview-details-actionbar
431
+ %button.btn.btn-default.btn-primary
432
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
433
+ Primary
434
+ %button.btn.btn-default.btn-secondary
435
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
436
+ Secondary
437
+ %details.dropdown-actions.dropup.dropright
438
+ %summary
439
+ .btn.btn-square.btn-secondary
440
+ .icon.text-icon-default.icon-more
441
+ .popover-menu
442
+ %a.popover-action{href:'#'}
443
+ %span.icon.text-icon-default.icon-pencil
444
+ Edit
445
+ %a.popover-action{href:'#'}
446
+ %span.icon.text-icon-default.icon-duplicate
447
+ Duplicate
448
+ %a.popover-action{href:'#'}
449
+ %span.icon.text-icon-default.icon-remove
450
+ Delete
451
+ %button.btn-intercom
452
+ %span.icon.icon-intercom
430
453
  %footer.splitview-list-actionbar
431
454
  %button.btn.btn-default.btn-primary
432
455
  %span.icon.icon-check-circle-filled.mr-icon-spacing
@@ -453,26 +476,3 @@ tags: "examples"
453
476
  Delete
454
477
  %button.btn-intercom
455
478
  %span.icon.icon-intercom
456
- %footer.splitview-details-actionbar
457
- %button.btn.btn-default.btn-primary
458
- %span.icon.icon-check-circle-filled.mr-icon-spacing
459
- Primary
460
- %button.btn.btn-default.btn-secondary
461
- %span.icon.icon-check-circle-filled.mr-icon-spacing
462
- Secondary
463
- %details.dropdown-actions.dropup.dropright
464
- %summary
465
- .btn.btn-square.btn-secondary
466
- .icon.text-icon-default.icon-more
467
- .popover-menu
468
- %a.popover-action{href:'#'}
469
- %span.icon.text-icon-default.icon-pencil
470
- Edit
471
- %a.popover-action{href:'#'}
472
- %span.icon.text-icon-default.icon-duplicate
473
- Duplicate
474
- %a.popover-action{href:'#'}
475
- %span.icon.text-icon-default.icon-remove
476
- Delete
477
- %button.btn-intercom
478
- %span.icon.icon-intercom
package/src/pages/examples/splitview.haml CHANGED
@@ -273,15 +273,14 @@ tags: "examples"
273
273
  %a.popover-action{href:'#'}
274
274
  %span.icon.text-icon-default.icon-review-exclamation
275
275
  Report tester
276
- .gallery-single-line
277
- .gallery-nav-left
278
- %span.icon-arrow-left
279
- .gallery-nav-right
280
- %span.icon-arrow-right
281
- %ul.slides
282
- %li.list-inline-item.active
283
- %a{href: ""}
284
- %img{src:"/assets/images/placeholders/Approaches-desktop.png"}
276
+ .gallery
277
+ .gallery-btn.left
278
+ .gallery-slides
279
+ %a.active{href: ""}
280
+ %img{src:"/assets/images/placeholders/Approaches-desktop.png"}
281
+ %a{href: ""}
282
+ %img{src:"/assets/images/placeholders/Approaches-desktop.png"}
283
+ .gallery-btn.right
285
284
  %section.splitview-details-content-grid
286
285
  .label URL
287
286
  %a{href: ""} https://www.url.com
@@ -339,6 +338,29 @@ tags: "examples"
339
338
  .section-header
340
339
  %h5.section-title Comments
341
340
  .empty-state-message.chat No comments yet
341
+ %footer.splitview-details-actionbar
342
+ %button.btn.btn-default.btn-primary
343
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
344
+ Primary
345
+ %button.btn.btn-default.btn-secondary
346
+ %span.icon.icon-check-circle-filled.mr-icon-spacing
347
+ Secondary
348
+ %details.dropdown-actions.dropup.dropright
349
+ %summary
350
+ .btn.btn-square.btn-secondary
351
+ .icon.text-icon-default.icon-more
352
+ .popover-menu
353
+ %a.popover-action{href:'#'}
354
+ %span.icon.text-icon-default.icon-pencil
355
+ Edit
356
+ %a.popover-action{href:'#'}
357
+ %span.icon.text-icon-default.icon-duplicate
358
+ Duplicate
359
+ %a.popover-action{href:'#'}
360
+ %span.icon.text-icon-default.icon-remove
361
+ Delete
362
+ %button.btn-intercom
363
+ %span.icon.icon-intercom
342
364
  %footer.splitview-list-actionbar
343
365
  %button.btn.btn-default.btn-primary
344
366
  %span.icon.icon-check-circle-filled.mr-icon-spacing
@@ -363,28 +385,5 @@ tags: "examples"
363
385
  %a.popover-action{href:'#'}
364
386
  %span.icon.text-icon-default.icon-remove
365
387
  Delete
366
- %button.btn-intercom
367
- %span.icon.icon-intercom
368
- %footer.splitview-details-actionbar
369
- %button.btn.btn-default.btn-primary
370
- %span.icon.icon-check-circle-filled.mr-icon-spacing
371
- Primary
372
- %button.btn.btn-default.btn-secondary
373
- %span.icon.icon-check-circle-filled.mr-icon-spacing
374
- Secondary
375
- %details.dropdown-actions.dropup.dropright
376
- %summary
377
- .btn.btn-square.btn-secondary
378
- .icon.text-icon-default.icon-more
379
- .popover-menu
380
- %a.popover-action{href:'#'}
381
- %span.icon.text-icon-default.icon-pencil
382
- Edit
383
- %a.popover-action{href:'#'}
384
- %span.icon.text-icon-default.icon-duplicate
385
- Duplicate
386
- %a.popover-action{href:'#'}
387
- %span.icon.text-icon-default.icon-remove
388
- Delete
389
388
  %button.btn-intercom
390
389
  %span.icon.icon-intercom
package/src/pages/issuing/brand_logos.haml CHANGED
@@ -20,3 +20,7 @@ title: Brand logos
20
20
  .flex.justify-center.bg-gray.p-md
21
21
  %img.h-xl{src:"/assets/images/assets_issuing/logo_discover.svg"}
22
22
  .text-xs.mt-2 Discover white SVG
23
+ %a.block{href:"/assets/images/assets_issuing/logo_bancontact.svg"}
24
+ .flex.justify-center.bg-gray.p-md
25
+ %img.h-xl{src:"/assets/images/assets_issuing/logo_bancontact.svg"}
26
+ .text-xs.mt-2 Bancontact white SVG