govuk_publishing_components 2.0.0 → 3.0.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 (30) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/Rakefile +1 -9
  4. data/app/assets/javascripts/components/task-list.js +471 -0
  5. data/app/assets/javascripts/current-location.js +10 -0
  6. data/app/assets/javascripts/govuk_publishing_components/application.js +4 -0
  7. data/app/assets/javascripts/history-support.js +8 -0
  8. data/app/assets/stylesheets/components/_task-list-header-print.scss +15 -0
  9. data/app/assets/stylesheets/components/_task-list-header.scss +36 -0
  10. data/app/assets/stylesheets/components/_task-list-print.scss +35 -0
  11. data/app/assets/stylesheets/components/_task-list-related.scss +39 -0
  12. data/app/assets/stylesheets/components/_task-list.scss +454 -0
  13. data/app/assets/stylesheets/govuk_publishing_components/application.scss +3 -0
  14. data/app/assets/stylesheets/govuk_publishing_components/print.scss +4 -0
  15. data/app/controllers/govuk_publishing_components/component_guide_controller.rb +5 -0
  16. data/app/models/govuk_publishing_components/component_doc.rb +10 -3
  17. data/app/models/govuk_publishing_components/component_doc_resolver.rb +19 -5
  18. data/app/views/components/_task_list.html.erb +143 -0
  19. data/app/views/components/_task_list_header.html.erb +38 -0
  20. data/app/views/components/_task_list_related.html.erb +39 -0
  21. data/app/views/components/docs/task_list.yml +1032 -0
  22. data/app/views/components/docs/task_list_header.yml +33 -0
  23. data/app/views/components/docs/task_list_related.yml +54 -0
  24. data/app/views/govuk_publishing_components/component_guide/index.html.erb +14 -3
  25. data/app/views/govuk_publishing_components/component_guide/show.html.erb +1 -1
  26. data/app/views/layouts/govuk_publishing_components/application.html.erb +1 -4
  27. data/config/initializers/assets.rb +1 -0
  28. data/lib/govuk_publishing_components/config.rb +5 -1
  29. data/lib/govuk_publishing_components/version.rb +1 -1
  30. metadata +33 -3
@@ -0,0 +1,10 @@
1
+ // used by the tasklist component
2
+
3
+ (function(root) {
4
+ "use strict";
5
+ window.GOVUK = window.GOVUK || {};
6
+
7
+ GOVUK.getCurrentLocation = function(){
8
+ return root.location;
9
+ };
10
+ }(window));
@@ -10,5 +10,9 @@
10
10
  // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
11
11
  // about supported directives.
12
12
  //
13
+ //= require govuk/modules
14
+ //= require ../history-support
15
+ //= require ../current-location
16
+ //= require ../components/task-list
13
17
  //= require_tree ./vendor
14
18
  //= require_tree .
@@ -0,0 +1,8 @@
1
+ // used by the tasklist component
2
+
3
+ if(typeof window.GOVUK === 'undefined'){ window.GOVUK = {}; }
4
+ if(typeof window.GOVUK.support === 'undefined'){ window.GOVUK.support = {}; }
5
+
6
+ window.GOVUK.support.history = function() {
7
+ return window.history && window.history.pushState && window.history.replaceState;
8
+ }
@@ -0,0 +1,15 @@
1
+ // scss-lint:disable SelectorFormat
2
+
3
+ .gem-c-task-list-header__part-of {
4
+ display: block;
5
+ }
6
+
7
+ .gem-c-task-list-header__title {
8
+ @include bold-24;
9
+ }
10
+
11
+ .gem-c-task-list-header__skip-link {
12
+ display: none;
13
+ }
14
+
15
+ // scss-lint:enable SelectorFormat
@@ -0,0 +1,36 @@
1
+ .gem-c-task-list-header {
2
+ position: relative;
3
+ padding: 10px;
4
+ background: $grey-4;
5
+ border-top: solid 1px $grey-2;
6
+ border-bottom: solid 1px $grey-2;
7
+
8
+ @include media(tablet) {
9
+ padding: $gutter-half;
10
+ }
11
+ }
12
+
13
+ // scss-lint:disable SelectorFormat
14
+
15
+ .gem-c-task-list-header__part-of {
16
+ @include bold-16;
17
+
18
+ display: block;
19
+ padding-bottom: 0.2em;
20
+ }
21
+
22
+ .gem-c-task-list-header__title {
23
+ @include bold-24;
24
+ }
25
+
26
+ .gem-c-task-list-header__skip-link {
27
+ position: absolute;
28
+ top: 0;
29
+ right: 9999em;
30
+
31
+ &:focus {
32
+ right: 0;
33
+ }
34
+ }
35
+
36
+ // scss-lint:enable SelectorFormat
@@ -0,0 +1,35 @@
1
+ // scss-lint:disable SelectorFormat
2
+
3
+ .gem-c-task-list__controls,
4
+ .gem-c-task-list__toggle-link,
5
+ .gem-c-task-list__help {
6
+ display: none;
7
+ }
8
+
9
+ .gem-c-task-list__title {
10
+ margin: 0;
11
+ padding: 0;
12
+ }
13
+
14
+ .gem-c-task-list__button--title {
15
+ @include bold-19;
16
+
17
+ padding: 0;
18
+ border: 0;
19
+ background: none;
20
+ }
21
+
22
+ .gem-c-task-list__panel-link--active {
23
+ font-weight: bold;
24
+ }
25
+
26
+ .gem-c-task-list__links {
27
+ padding-left: 0;
28
+ list-style: none;
29
+ }
30
+
31
+ .gem-c-task-list__links--choice {
32
+ list-style: disc;
33
+ }
34
+
35
+ // scss-lint:enable SelectorFormat
@@ -0,0 +1,39 @@
1
+ .pub-c-task-list-related {
2
+ margin-bottom: $gutter-half;
3
+ }
4
+
5
+ .pub-c-task-list-related__heading,
6
+ .pub-c-task-list-related__links {
7
+ @include bold-19;
8
+ margin: 0;
9
+ padding: 0;
10
+ }
11
+
12
+ .pub-c-task-list-related__pretitle {
13
+ display: block;
14
+ margin-bottom: $gutter-half;
15
+
16
+ @include media(tablet) {
17
+ margin-bottom: 5px;
18
+ }
19
+ }
20
+
21
+ .pub-c-task-list-related__links {
22
+ list-style: none;
23
+ }
24
+
25
+ .pub-c-task-list-related__link-item {
26
+ margin-top: $gutter-half;
27
+
28
+ @include media(tablet) {
29
+ margin-top: 5px;
30
+ }
31
+ }
32
+
33
+ .pub-c-task-list-related__link {
34
+ text-decoration: none;
35
+
36
+ &:hover {
37
+ text-decoration: underline;
38
+ }
39
+ }
@@ -0,0 +1,454 @@
1
+ $stroke-width: 2px;
2
+ $stroke-width-large: 3px;
3
+ $number-circle-size: 26px;
4
+ $number-circle-size-large: 35px;
5
+ $dot-size: 16px;
6
+ $top-border: solid 2px $grey-3;
7
+
8
+ @mixin task-list-vertical-line ($line-style: solid) {
9
+ content: "";
10
+ position: absolute;
11
+ z-index: 2;
12
+ width: 0;
13
+ height: 100%;
14
+ border-left: $line-style $stroke-width $grey-2;
15
+ background: $white;
16
+ }
17
+
18
+ @mixin task-list-line-position {
19
+ left: -($gutter + $gutter-half);
20
+ margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
21
+ }
22
+
23
+ @mixin task-list-line-position-large {
24
+ left: -($gutter * 2);
25
+ margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
26
+ border-width: $stroke-width-large;
27
+ }
28
+
29
+ .gem-c-task-list {
30
+ margin-bottom: $gutter-half;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .gem-c-task-list__controls {
35
+ padding: 3px 3px 0 0;
36
+ text-align: right;
37
+ }
38
+
39
+ .gem-c-task-list__button {
40
+ color: $link-colour;
41
+ cursor: pointer;
42
+ background: none;
43
+ border: 0;
44
+ }
45
+
46
+ // removes extra dotted outline from buttons in Firefox
47
+ // on focus (standard yellow outline unaffected)
48
+ .gem-c-task-list__button::-moz-focus-inner {
49
+ border: 0;
50
+ }
51
+
52
+ .gem-c-task-list__button--title {
53
+ @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
54
+ display: inline-block;
55
+ padding: 0;
56
+ text-align: left;
57
+ color: $black;
58
+
59
+ .gem-c-task-list--large & {
60
+ @include _core-font-generator(24px, 19px, 24px, 1.4, 1.4, false, bold);
61
+ }
62
+ }
63
+
64
+ .gem-c-task-list__button--controls {
65
+ @include _core-font-generator(14px, 14px, 14px, 1, 1, false);
66
+ position: relative;
67
+ z-index: 1; // this and relative position stops focus outline underlap with border of accordion
68
+ padding: 0.5em 0;
69
+
70
+ .gem-c-task-list--large & {
71
+ @include _core-font-generator(16px, 14px, 16px, 1, 1, false);
72
+ }
73
+ }
74
+
75
+ .gem-c-task-list__groups {
76
+ padding: 0;
77
+ margin: 0;
78
+ }
79
+
80
+ .gem-c-task-list__group {
81
+ position: relative;
82
+ padding-left: $gutter + $gutter-half;
83
+ list-style: none;
84
+
85
+ .gem-c-task-list--large & {
86
+ @include media(tablet) {
87
+ padding-left: $gutter * 2;
88
+ }
89
+ }
90
+ }
91
+
92
+ .gem-c-task-list__group:last-child {
93
+ // little dash at the bottom of the line
94
+ &:before {
95
+ content: "";
96
+ position: absolute;
97
+ z-index: 6;
98
+ bottom: 0;
99
+ left: 0;
100
+ margin-left: $number-circle-size / 4;
101
+ width: $number-circle-size / 2;
102
+ height: 0;
103
+ border-bottom: solid $stroke-width $grey-2;
104
+ }
105
+
106
+ .gem-c-task-list__step:last-child {
107
+ &:after {
108
+ height: calc(100% - #{$gutter-half});
109
+ }
110
+
111
+ .gem-c-task-list__help:after {
112
+ height: 100%;
113
+ }
114
+ }
115
+
116
+ .gem-c-task-list--large & {
117
+ @include media(tablet) {
118
+ &:before {
119
+ margin-left: $number-circle-size-large / 4;
120
+ width: $number-circle-size-large / 2;
121
+ border-width: $stroke-width-large;
122
+ }
123
+
124
+ .gem-c-task-list__step:last-child {
125
+ &:after {
126
+ height: calc(100% - #{$gutter});
127
+ }
128
+ }
129
+ }
130
+ }
131
+ }
132
+
133
+ .gem-c-task-list__group--active {
134
+ &:last-child:before,
135
+ .gem-c-task-list__circle--number,
136
+ .gem-c-task-list__step:after,
137
+ .gem-c-task-list__substep:after,
138
+ .gem-c-task-list__help:after {
139
+ border-color: $black;
140
+ }
141
+ }
142
+
143
+ .gem-c-task-list__step {
144
+ position: relative;
145
+
146
+ // line down the side of a step
147
+ &:after {
148
+ @include task-list-vertical-line;
149
+ @include task-list-line-position;
150
+ top: $gutter-half;
151
+ }
152
+
153
+ .gem-c-task-list--large & {
154
+ @include media(tablet) {
155
+ &:after {
156
+ @include task-list-line-position-large;
157
+ top: $gutter;
158
+ }
159
+ }
160
+ }
161
+ }
162
+
163
+ .gem-c-task-list__step--optional {
164
+ // broken line down the side of a step
165
+ &:after {
166
+ border-left-style: dotted;
167
+ }
168
+
169
+ .gem-c-task-list--large & {
170
+ @include media(tablet) {
171
+ &:after {
172
+ border-width: $stroke-width-large;
173
+ }
174
+ }
175
+ }
176
+ }
177
+
178
+ .gem-c-task-list__circle {
179
+ @include box-sizing(border-box);
180
+ position: absolute;
181
+ z-index: 5;
182
+ top: $gutter-half;
183
+ width: $number-circle-size;
184
+ height: $number-circle-size;
185
+ color: $black;
186
+ background: $white;
187
+ border-radius: 100px;
188
+ text-align: center;
189
+
190
+ .gem-c-task-list--large & {
191
+ @include media(tablet) {
192
+ top: $gutter;
193
+ width: $number-circle-size-large;
194
+ height: $number-circle-size-large;
195
+ }
196
+ }
197
+ }
198
+
199
+ .gem-c-task-list__circle--number {
200
+ @include _core-font-generator(16px, 16px, 16px, 23px, 23px, false, bold);
201
+ left: 0;
202
+ border: solid $stroke-width $grey-2;
203
+
204
+ .gem-c-task-list--large & {
205
+ @include _core-font-generator(19px, 16px, 19px, 30px, 23px, false, bold);
206
+
207
+ @include media(tablet) {
208
+ border-width: $stroke-width-large;
209
+ }
210
+ }
211
+ }
212
+
213
+ .gem-c-task-list__circle--logic {
214
+ @include _core-font-generator(16px, 16px, 16px, 28px, 28px, false, bold);
215
+ left: -($gutter + $gutter-half);
216
+
217
+ .gem-c-task-list--large & {
218
+ @include _core-font-generator(19px, 16px, 19px, 34px, 28px, false, bold);
219
+
220
+ @include media(tablet) {
221
+ left: -$gutter * 2;
222
+ }
223
+ }
224
+ }
225
+
226
+ // to make the numbers readable for users zooming the text only in Firefox
227
+ .gem-c-task-list__circle-inner {
228
+ float: right;
229
+ min-width: 100%;
230
+ }
231
+
232
+ .gem-c-task-list__circle-background {
233
+ background: $white;
234
+ border-radius: 100px;
235
+ }
236
+
237
+ .gem-c-task-list__header {
238
+ padding: $gutter-half 0;
239
+ border-top: $top-border;
240
+
241
+ .gem-c-task-list--active & {
242
+ cursor: pointer;
243
+ }
244
+
245
+ &:hover {
246
+ .gem-c-task-list__button {
247
+ color: $link-colour;
248
+ }
249
+
250
+ .gem-c-task-list__toggle-link {
251
+ text-decoration: underline;
252
+ }
253
+ }
254
+
255
+ .gem-c-task-list--large & {
256
+ @include media(tablet) {
257
+ padding: $gutter 0;
258
+ }
259
+ }
260
+ }
261
+
262
+ .gem-c-task-list__title {
263
+ @include _core-font-generator(19px, 19px, 19px, 1.4, 1.4, false, bold);
264
+ margin: 0;
265
+
266
+ .gem-c-task-list--large & {
267
+ @include _core-font-generator(24px, 19px, 24px, 1.4, 1.4, false, bold);
268
+ }
269
+ }
270
+
271
+ .gem-c-task-list__toggle-link {
272
+ @include _core-font-generator(14px, 14px, 14px, 1.2, 1.2, false);
273
+ display: block;
274
+ color: $link-colour;
275
+
276
+ .gem-c-task-list--large & {
277
+ @include _core-font-generator(16px, 14px, 16px, 1.2, 1.2, false);
278
+ }
279
+ }
280
+
281
+ .gem-c-task-list__panel {
282
+ @include _core-font-generator(16px, 16px, 16px);
283
+
284
+ .gem-c-task-list--large & {
285
+ @include _core-font-generator(19px, 16px, 19px);
286
+ }
287
+ }
288
+
289
+ // contents of the task list, such as paragraphs and links
290
+
291
+ .gem-c-task-list__paragraph {
292
+ padding-bottom: $gutter-half;
293
+ margin: 0;
294
+ font-size: inherit;
295
+
296
+ + .gem-c-task-list__links {
297
+ margin-top: -5px;
298
+
299
+ .gem-c-task-list--large & {
300
+ @include media(tablet) {
301
+ margin-top: -$gutter-half;
302
+ }
303
+ }
304
+ }
305
+
306
+ .gem-c-task-list--large & {
307
+ @include media(tablet) {
308
+ padding-bottom: $gutter;
309
+ }
310
+ }
311
+ }
312
+
313
+ .gem-c-task-list__links {
314
+ padding: 0;
315
+ padding-bottom: 10px;
316
+
317
+ .gem-c-task-list--large & {
318
+ @include media(tablet) {
319
+ padding-bottom: 20px;
320
+ }
321
+ }
322
+ }
323
+
324
+ .gem-c-task-list__links--required {
325
+ .gem-c-task-list__link-item {
326
+ font-weight: bold;
327
+ }
328
+ }
329
+
330
+ .gem-c-task-list__links--choice {
331
+ margin-left: 20px;
332
+ list-style: disc;
333
+ }
334
+
335
+ .gem-c-task-list__link {
336
+ margin-bottom: 10px;
337
+ }
338
+
339
+ .gem-c-task-list__link-item {
340
+ text-decoration: none;
341
+
342
+ &:hover {
343
+ text-decoration: underline;
344
+ }
345
+ }
346
+
347
+ .gem-c-task-list__link-item--active {
348
+ position: relative;
349
+ color: $black;
350
+
351
+ &:visited,
352
+ &:active,
353
+ &:link {
354
+ color: $black;
355
+ }
356
+
357
+ &:before {
358
+ @include box-sizing(border-box);
359
+ content: "";
360
+ position: absolute;
361
+ z-index: 5;
362
+ top: 0.6em; // position the dot to align with the first row of text in the link
363
+ left: -($gutter + $gutter-half);
364
+ margin-left: ($number-circle-size / 2) - ($dot-size / 2);
365
+ width: $dot-size;
366
+ height: $dot-size;
367
+ margin-top: -($dot-size / 2);
368
+ background: $black;
369
+ border: solid 2px $white;
370
+ border-radius: 100px;
371
+ }
372
+
373
+ .gem-c-task-list--large & {
374
+ @include media(tablet) {
375
+ &:before {
376
+ left: -($gutter * 2);
377
+ margin-left: ($number-circle-size-large / 2) - ($dot-size / 2);
378
+ }
379
+ }
380
+ }
381
+ }
382
+
383
+ .gem-c-task-list__context {
384
+ font-weight: normal;
385
+ color: $grey-1;
386
+
387
+ &:before {
388
+ content: " \2013 ";
389
+ }
390
+ }
391
+
392
+ .gem-c-task-list__help {
393
+ position: relative;
394
+ padding: $gutter-half 0;
395
+ border-top: $top-border;
396
+
397
+ &:after {
398
+ @include task-list-vertical-line(dotted);
399
+ @include task-list-line-position;
400
+ z-index: 3;
401
+ top: 0;
402
+ height: calc(100% + #{$gutter});
403
+ }
404
+
405
+ .gem-c-task-list__step--optional & {
406
+ &:after {
407
+ display: none;
408
+ }
409
+ }
410
+
411
+ .gem-c-task-list--large & {
412
+ @include media(tablet) {
413
+ &:after {
414
+ @include task-list-line-position-large;
415
+ height: calc(100% + #{$gutter} + #{$gutter-half});
416
+ }
417
+ }
418
+ }
419
+ }
420
+
421
+ .gem-c-task-list__help-link {
422
+ text-decoration: none;
423
+
424
+ &:hover {
425
+ text-decoration: underline;
426
+ }
427
+ }
428
+
429
+ .gem-c-task-list__substep {
430
+ position: relative;
431
+ padding-top: $gutter-half;
432
+ border-top: $top-border;
433
+
434
+ &:after {
435
+ @include task-list-vertical-line;
436
+ @include task-list-line-position;
437
+ z-index: 3;
438
+ top: 0;
439
+ }
440
+
441
+ .gem-c-task-list--large & {
442
+ @include media(tablet) {
443
+ padding-top: $gutter;
444
+
445
+ &:after {
446
+ @include task-list-line-position-large;
447
+ }
448
+ }
449
+ }
450
+ }
451
+
452
+ .gem-c-task-list__substep--optional:after {
453
+ border-left-style: dotted;
454
+ }