testio-tailwind 0.1.0 → 0.2.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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/assets/stylesheets/app.css +1 -0
  3. package/src/assets/stylesheets/components/devices.css +1 -7
  4. package/src/assets/stylesheets/components/list_item.css +5 -1
  5. package/src/assets/stylesheets/components/sections.css +1 -2
  6. package/src/assets/stylesheets/components/splitview.css +3 -0
  7. package/src/assets/stylesheets/components/test_header.css +167 -0
  8. package/src/pages/navigation/test-header-tester.haml +178 -0
  9. package/src/static/app.compiled.css +381 -15
  10. package/src/static/app.compiled.css.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "testio-tailwind",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Tailwind based design system for Test IO",
5
5
  "scripts": {
6
6
  "clean": "del dist",
package/src/assets/stylesheets/app.css CHANGED
@@ -59,6 +59,7 @@
59
59
  @import "components/notifications";
60
60
  @import "components/select2";
61
61
  @import "components/select";
62
+ @import "components/test_header";
62
63
 
63
64
  @import "components/customer/customer_header";
64
65
  @import "components/customer/customer_sidebar";
package/src/assets/stylesheets/components/devices.css CHANGED
@@ -70,15 +70,9 @@
70
70
  }
71
71
 
72
72
  .device-wrapper .device-actions a {
73
- @apply flex items-center justify-center flex-1 min-h-spacing text-white border-t-1 border-white;
73
+ @apply flex items-center justify-center flex-1 min-h-spacing text-white border-t-1 first:border-t-0 rounded-none first:rounded-tr last:rounded-br border-white;
74
74
 
75
75
  &:hover {
76
76
  @apply bg-link-hover;
77
77
  }
78
- &:first-child {
79
- @apply border-t-0 rounded-r;
80
- }
81
- &:last-child {
82
- @apply rounded-r;
83
- }
84
78
  }
package/src/assets/stylesheets/components/list_item.css CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  .listitem,
8
8
  details.listitem .listitem-header {
9
- @apply relative grid items-stretch border-0 grid-rows-auto-auto grid-cols-auto-fr-auto sm:grid-cols-auto-fr-2-auto;
9
+ @apply relative grid items-stretch border-0 grid-rows-auto-auto grid-cols-auto-fr-auto sm:grid-cols-auto-fr-2-auto select-none;
10
10
  grid-template-areas: "badge title actions"
11
11
  "badge metrics actions";
12
12
  grid-template-columns: auto 1fr auto;
@@ -16,6 +16,10 @@ details.listitem .listitem-header {
16
16
  }
17
17
  }
18
18
 
19
+ details.listitem .listitem-header {
20
+ @apply cursor-pointer;
21
+ }
22
+
19
23
  .listitem {
20
24
  @apply bg-card rounded border;
21
25
  }
package/src/assets/stylesheets/components/sections.css CHANGED
@@ -71,8 +71,7 @@
71
71
  }
72
72
 
73
73
  .section-collapsable .section-title {
74
- @apply pl-sm text-primary;
75
- user-select: none;
74
+ @apply pl-sm text-primary cursor-pointer select-none;
76
75
  }
77
76
 
78
77
  .section-collapsable .section-title::before {
package/src/assets/stylesheets/components/splitview.css CHANGED
@@ -14,6 +14,9 @@
14
14
  grid-template-columns: 1fr 2fr;
15
15
  }
16
16
  @screen 2xl {
17
+ grid-template-columns: 2fr 3fr;
18
+ }
19
+ @screen 3xl {
17
20
  grid-template-columns: 1fr 3fr;
18
21
  }
19
22
  }
package/src/assets/stylesheets/components/test_header.css ADDED
@@ -0,0 +1,167 @@
1
+ .test-header.tester {
2
+ @apply grid p-0 pl-sm text-white bg-navigation-tester-color;
3
+ grid-area: test-header;
4
+ grid-template-areas: "test-title session-info test-actions"
5
+ "test-progress test-progress test-progress"
6
+ "nav-tabs nav-tabs nav-tabs";
7
+ grid-template-columns: 1fr auto auto;
8
+ grid-template-rows: auto;
9
+
10
+ @screen sm {
11
+ @apply pt-xs pr-md pb-0 pl-md;
12
+ grid-template-areas: "test-title test-progress session-info test-actions"
13
+ "nav-tabs nav-tabs nav-tabs nav-tabs";
14
+ grid-template-columns: auto 1fr auto auto;
15
+ grid-template-rows: auto;
16
+ }
17
+ @screen md {
18
+ @apply pt-xs pr-md pb-0 pl-body-padding-desktop;
19
+ }
20
+ }
21
+
22
+ .test-header.tester.ready {
23
+ @apply bg-petrol-dark;
24
+ }
25
+
26
+ .test-header.tester.recording {
27
+ @apply bg-petrol;
28
+ }
29
+
30
+ .test-header.tester.danger {
31
+ @apply bg-danger;
32
+ }
33
+
34
+ .test-header.tester.minimized {
35
+ @apply items-center py-0;
36
+ grid-template-areas: "nav-tabs session-info test-actions";
37
+ grid-template-columns: 1fr auto auto;
38
+ .test-title, .test-progress-wrapper {
39
+ display: none;
40
+ }
41
+ .session-info {
42
+ padding-top: 0;
43
+ }
44
+ .nav-tabs {
45
+ @apply pt-xxs pb-xs;
46
+ }
47
+ @screen sm {
48
+ @apply py-xxs;
49
+ }
50
+ }
51
+
52
+ .test-header .nav-tabs {
53
+ @apply mb-0 pb-xs border-b-0;
54
+ grid-area: nav-tabs;
55
+ }
56
+
57
+ .test-header.tester .nav-tabs::after {
58
+ background: linear-gradient(90deg, rgba(29,29,29,0) 0%, rgba(29,29,29,1) 90%);
59
+ }
60
+
61
+ .test-header.ready .nav-tabs::after {
62
+ background: linear-gradient(90deg, rgba(38,51,64,0) 0%, rgba(38,51,64,1) 90%);
63
+ }
64
+
65
+ .test-header.tester.recording .nav-tabs::after {
66
+ background: linear-gradient(90deg, rgba(35,106,132,0) 0%, rgba(35,106,132,1) 90%);
67
+ }
68
+
69
+ .test-header.tester.danger .nav-tabs::after {
70
+ background: linear-gradient(90deg, rgba(236,4,4,0) 0%, rgba(236,4,4,1) 90%);
71
+ }
72
+
73
+ .test-header .navlink {
74
+ @apply h-md text-white text-base border-b-0;
75
+
76
+ &.active, &:hover, &:focus {
77
+ border-bottom-width: 2px;
78
+ }
79
+ }
80
+
81
+ .test-header.tester.recording .navlink.active {
82
+ @apply border-white hover:border-link-hover focus:bg-link-hover;
83
+ }
84
+
85
+ .test-header .test-title {
86
+ @apply pt-xs pr-md sm:pt-0 mb-0 text-heading-5 sm:text-heading-4;
87
+ grid-area: test-title;
88
+ line-height: 1;
89
+ }
90
+
91
+ .test-header .test-progress-wrapper {
92
+ @apply inline-flex flex-col flex-grow pr-md;
93
+ grid-area: test-progress;
94
+ }
95
+
96
+ .test-header .meta-info {
97
+ @apply mb-xxs text-gray-light text-label;
98
+ }
99
+
100
+ .test-header .test-progress {
101
+ @apply appearance-none w-full mb-xs;
102
+ height: 2px;
103
+ }
104
+
105
+ .test-progress::-webkit-progress-bar {
106
+ @apply bg-gray-darkest;
107
+ }
108
+ .test-progress::-webkit-progress-value {
109
+ @apply bg-link-hover;
110
+ }
111
+
112
+ .session-info {
113
+ @apply relative inline-flex flex-col pt-xs pr-md sm:pt-0;
114
+ grid-area: session-info;
115
+ line-height: 1;
116
+ }
117
+
118
+ .session-label {
119
+ @apply hidden sm:block text-xs;
120
+ }
121
+
122
+ .session-timer {
123
+ @apply relative inline-flex items-center text-base sm:items-baseline sm:text-heading-3 sm:font-light;
124
+ }
125
+
126
+ .session-timer::before {
127
+ @apply inline-block h-icon w-icon mr-xs sm:mt-xxs bg-white;
128
+ content: "";
129
+ mask-image: url("/assets/images/test.svg");
130
+ mask-repeat: no-repeat;
131
+ }
132
+
133
+ .session-timer::after {
134
+ @apply absolute inline-block top-0 left-0 h-icon w-icon mr-xs sm:mt-xxs bg-danger;
135
+ content: "";
136
+ mask-image: url("/assets/images/circle-sm-filled.svg");
137
+ mask-repeat: no-repeat;
138
+ }
139
+
140
+ .test-header.danger .session-timer::after {
141
+ @apply bg-white;
142
+ }
143
+
144
+ .session-addon {
145
+ @apply hidden sm:inline ml-xxs text-label;
146
+ }
147
+
148
+ .test-actions {
149
+ @apply flex;
150
+ grid-area: test-actions;
151
+ }
152
+
153
+ .test-actions .btn {
154
+ @apply justify-center w-btn h-btn sm:mr-xs p-0 sm:p-xs text-white rounded-none sm:rounded border-l sm:border border-black sm:border-white;
155
+
156
+ &:hover {
157
+ border: none;
158
+ }
159
+ }
160
+
161
+ .test-actions .btn-recording {
162
+ @apply text-danger;
163
+ }
164
+
165
+ .test-actions .btn:last-child {
166
+ margin-right: 0;
167
+ }
package/src/pages/navigation/test-header-tester.haml ADDED
@@ -0,0 +1,178 @@
1
+ ---
2
+ tags: navigation
3
+ title: Test Header - Tester
4
+ ---
5
+ %p.mb-xs
6
+ %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester
7
+ Invitation, not joined yet
8
+ .test-header.tester
9
+ %h1.test-title Customer name
10
+ .test-progress-wrapper
11
+ .meta-info #123321 | Focused Test | Ends in 8 hours
12
+ %progress.test-progress{value:"32", max:"100"} 32%
13
+ %nav.nav-tabs
14
+ .navlink.active{href:""} Navlink active
15
+ .navlink{href:""} Navlink
16
+ .navlink{href:""} Navlink
17
+ .navlink{href:""}
18
+ Counter
19
+ .counter 99
20
+ .navlink.disabled{href:""} Disabled
21
+ %p.mb-xs.mt-md
22
+ %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester.minimized
23
+ Invitation, not joined yet, minimized
24
+ .test-header.tester.minimized
25
+ %h1.test-title Customer name
26
+ .test-progress-wrapper
27
+ .meta-info #123321 | Focused Test | Ends in 8 hours
28
+ %progress.test-progress{value:"32", max:"100"} 32%
29
+ %nav.nav-tabs
30
+ .navlink.active{href:""} Navlink active
31
+ .navlink{href:""} Navlink
32
+ .navlink{href:""} Navlink
33
+ .navlink{href:""}
34
+ Counter
35
+ .counter 99
36
+ .navlink.disabled{href:""} Disabled
37
+ %p.mb-xs.mt-md
38
+ %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester.ready
39
+ Joined, ready for recording
40
+ .test-header.tester.ready
41
+ %h1.test-title Customer name
42
+ .test-progress-wrapper
43
+ .meta-info #123321 | Focused Test | Ends in 8 hours
44
+ %progress.test-progress{value:"32", max:"100"} 32%
45
+ .test-actions
46
+ %a.btn.btn-recording{href:""}
47
+ .icon.icon-circle-filled
48
+ %nav.nav-tabs
49
+ .navlink.active{href:""} Navlink active
50
+ .navlink{href:""} Navlink
51
+ .navlink{href:""} Navlink
52
+ .navlink{href:""}
53
+ Counter
54
+ .counter 99
55
+ .navlink.disabled{href:""} Disabled
56
+ %p.mb-xs.mt-md
57
+ %span.tag-item.mr-xs.bg-gray-lighter .test-header.tester.ready.minimized
58
+ Joined, ready for recording, minimized
59
+ .test-header.tester.ready.minimized
60
+ %h1.test-title Customer name
61
+ .test-progress-wrapper
62
+ .meta-info #123321 | Focused Test | Ends in 8 hours
63
+ %progress.test-progress{value:"32", max:"100"} 32%
64
+ .test-actions
65
+ %a.btn.btn-recording{href:""}
66
+ .icon.icon-circle-filled
67
+ %nav.nav-tabs
68
+ .navlink.active{href:""} Navlink active
69
+ .navlink{href:""} Navlink
70
+ .navlink{href:""} Navlink
71
+ .navlink{href:""}
72
+ Counter
73
+ .counter 99
74
+ .navlink.disabled{href:""} Disabled
75
+ %p.mb-xs.mt-md
76
+ %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester.recording
77
+ Session active
78
+ .test-header.tester.recording
79
+ %h1.test-title Customer name
80
+ .test-progress-wrapper
81
+ .meta-info #123321 | Focused Test | Ends in 8 hours
82
+ %progress.test-progress{value:"32", max:"100"} 32%
83
+ .session-info
84
+ .session-label Session active
85
+ .session-timer
86
+ 30:00
87
+ .session-addon left
88
+ .test-actions
89
+ %a.btn{href:""}
90
+ .icon.icon-clock
91
+ %a.btn{href:""}
92
+ .icon.icon-stop
93
+ %nav.nav-tabs
94
+ .navlink.active{href:""} Navlink active
95
+ .navlink{href:""} Navlink
96
+ .navlink{href:""} Navlink
97
+ .navlink{href:""}
98
+ Counter
99
+ .counter 99
100
+ .navlink.disabled{href:""} Disabled
101
+ %p.mb-xs.mt-md
102
+ %span.tag-item.mr-xs.bg-gray-lighter .tester-header.tester.recording.minimized
103
+ Session active, minimized
104
+ .test-header.tester.recording.minimized
105
+ %h1.test-title Customer name
106
+ .test-progress-wrapper
107
+ .meta-info #123321 | Focused Test | Ends in 8 hours
108
+ %progress.test-progress{value:"32", max:"100"} 32%
109
+ .session-info
110
+ .session-label Session active
111
+ .session-timer
112
+ 30:00
113
+ .session-addon left
114
+ .test-actions
115
+ %a.btn{href:""}
116
+ .icon.icon-clock
117
+ %a.btn{href:""}
118
+ .icon.icon-stop
119
+ %nav.nav-tabs
120
+ .navlink.active{href:""} Navlink active
121
+ .navlink{href:""} Navlink
122
+ .navlink{href:""} Navlink
123
+ .navlink{href:""}
124
+ Counter
125
+ .counter 99
126
+ .navlink.disabled{href:""} Disabled
127
+ %p.mb-xs.mt-md
128
+ %span.tag-item.mr-xs.bg-gray-lighter .test-header.tester.recording.danger
129
+ Danger, session time running out
130
+ .test-header.tester.recording.danger
131
+ %h1.test-title Customer name
132
+ .test-progress-wrapper
133
+ .meta-info #123321 | Focused Test | Ends in 8 hours
134
+ %progress.test-progress{value:"32", max:"100"} 32%
135
+ .session-info
136
+ .session-label Session will end in 1 min
137
+ .session-timer
138
+ 01:00
139
+ .session-addon left
140
+ .test-actions
141
+ %a.btn{href:""}
142
+ .icon.icon-clock
143
+ %a.btn{href:""}
144
+ .icon.icon-stop
145
+ %nav.nav-tabs
146
+ .navlink.active{href:""} Navlink active
147
+ .navlink{href:""} Navlink
148
+ .navlink{href:""} Navlink
149
+ .navlink{href:""}
150
+ Counter
151
+ .counter 99
152
+ .navlink.disabled{href:""} Disabled
153
+ %p.mb-xs.mt-md
154
+ %span.tag-item.mr-xs.bg-gray-lighter .test-header.tester.recording.danger.minimized
155
+ Danger, session time running out, minimized
156
+ .test-header.tester.recording.danger.minimized
157
+ %h1.test-title Customer name
158
+ .test-progress-wrapper
159
+ .meta-info #123321 | Focused Test | Ends in 8 hours
160
+ %progress.test-progress{value:"32", max:"100"} 32%
161
+ .session-info
162
+ .session-label Session will end in 1 min
163
+ .session-timer
164
+ 01:00
165
+ .session-addon left
166
+ .test-actions
167
+ %a.btn{href:""}
168
+ .icon.icon-clock
169
+ %a.btn{href:""}
170
+ .icon.icon-stop
171
+ %nav.nav-tabs
172
+ .navlink.active{href:""} Navlink active
173
+ .navlink{href:""} Navlink
174
+ .navlink{href:""} Navlink
175
+ .navlink{href:""}
176
+ Counter
177
+ .counter 99
178
+ .navlink.disabled{href:""} Disabled