govuk_publishing_components 3.1.0 → 3.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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/components/_fieldset.scss +30 -0
- data/app/assets/stylesheets/components/_label.scss +18 -0
- data/app/assets/stylesheets/components/_radio.scss +130 -0
- data/app/assets/stylesheets/components/_task-list-print.scss +82 -5
- data/app/assets/stylesheets/components/_task-list.scss +7 -1
- data/app/assets/stylesheets/components/helpers/_clearfix.scss +12 -0
- data/app/assets/stylesheets/components/helpers/_px-to-em.scss +10 -0
- data/app/assets/stylesheets/components/helpers/_variables.scss +25 -0
- data/app/assets/stylesheets/govuk_publishing_components/application.scss +4 -9
- data/app/views/components/_fieldset.html.erb +7 -0
- data/app/views/components/_label.html.erb +39 -0
- data/app/views/components/_radio.html.erb +45 -0
- data/app/views/components/_task_list.html.erb +4 -1
- data/app/views/components/docs/fieldset.yml +34 -0
- data/app/views/components/docs/label.yml +28 -0
- data/app/views/components/docs/radio.yml +119 -0
- data/app/views/components/docs/task_list.yml +58 -2
- data/app/views/govuk_publishing_components/component_guide/component_doc/_call.html.erb +1 -1
- data/app/views/layouts/govuk_publishing_components/application.html.erb +1 -1
- data/config/locales/en.yml +25 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +15 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 51dca7954e47cec72a9a2d4a841cb7643d94920d
|
|
4
|
+
data.tar.gz: 66ccd8adc5a35f850afd9be3995b75033e59aafd
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d2160f76d8fcf7ee7b72b733c534907aa07956bb53ecac281bfd55243afc676e05e156f856f8c5510cbc5361530f9b63292a0392b41220f745776d3df7058809
|
|
7
|
+
data.tar.gz: 51c314400e21314af4fe587a301e10bf53827c1844beb5479a6258b556c04c5c4b252dc94dbcd69fcd7551d9c3d7245263cc327ce54f26be81a8df8f8913e83f
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
@import "helpers/variables";
|
|
2
|
+
@import "helpers/clearfix";
|
|
3
|
+
|
|
4
|
+
.gem-c-fieldset {
|
|
5
|
+
margin: 0 0 $gem-spacing-scale-4;
|
|
6
|
+
|
|
7
|
+
@include media(tablet) {
|
|
8
|
+
margin-bottom: $gem-spacing-scale-5;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
padding: 0;
|
|
12
|
+
border: 0;
|
|
13
|
+
@include gem-h-clearfix;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.gem-c-fieldset__legend {
|
|
17
|
+
// Fix legend text wrapping in Edge and IE
|
|
18
|
+
// 1. IE9-11 & Edge 12-13
|
|
19
|
+
// 2. IE8-11
|
|
20
|
+
box-sizing: border-box; // 1
|
|
21
|
+
display: table; // 2
|
|
22
|
+
max-width: 100%; // 1
|
|
23
|
+
padding: 0;
|
|
24
|
+
// Hack to let legends or elements within legends have margins in webkit browsers
|
|
25
|
+
overflow: hidden;
|
|
26
|
+
|
|
27
|
+
color: $gem-text-colour;
|
|
28
|
+
white-space: normal; // 1
|
|
29
|
+
@include core-19;
|
|
30
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@import "helpers/variables";
|
|
2
|
+
|
|
3
|
+
.gem-c-label {
|
|
4
|
+
display: block;
|
|
5
|
+
color: $gem-text-colour;
|
|
6
|
+
@include core-19;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.gem-c-label--bold {
|
|
10
|
+
font-weight: 700;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Hint text sits inside a label, to be read by AT
|
|
14
|
+
.gem-c-label__hint {
|
|
15
|
+
display: block;
|
|
16
|
+
color: $gem-secondary-text-colour;
|
|
17
|
+
font-weight: 400;
|
|
18
|
+
}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
@import "helpers/variables";
|
|
2
|
+
@import "helpers/px-to-em";
|
|
3
|
+
|
|
4
|
+
.gem-c-radio {
|
|
5
|
+
display: block;
|
|
6
|
+
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
margin-bottom: $gem-spacing-scale-2;
|
|
10
|
+
padding: 0 0 0 em(40px, 19px);
|
|
11
|
+
|
|
12
|
+
clear: left;
|
|
13
|
+
|
|
14
|
+
@include core-19;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.gem-c-radio:last-child,
|
|
18
|
+
.gem-c-radio:last-of-type {
|
|
19
|
+
margin-bottom: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.gem-c-radio--inline {
|
|
23
|
+
margin-right: $gem-spacing-scale-4;
|
|
24
|
+
float: left;
|
|
25
|
+
clear: none;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.gem-c-radio__input {
|
|
29
|
+
position: absolute;
|
|
30
|
+
|
|
31
|
+
z-index: 1;
|
|
32
|
+
top: 0;
|
|
33
|
+
left: 0;
|
|
34
|
+
|
|
35
|
+
width: em(40px, 19px);
|
|
36
|
+
height: em(40px, 19px);
|
|
37
|
+
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
|
|
40
|
+
// IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8.
|
|
41
|
+
@if ($is-ie == false) or ($ie-version == 9) {
|
|
42
|
+
margin: 0;
|
|
43
|
+
opacity: 0;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.gem-c-radio__label {
|
|
48
|
+
display: block;
|
|
49
|
+
border: 2px solid transparent;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.gem-c-radio__label__text {
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
// remove 300ms pause on mobile
|
|
55
|
+
-ms-touch-action: manipulation;
|
|
56
|
+
touch-action: manipulation;
|
|
57
|
+
|
|
58
|
+
display: block;
|
|
59
|
+
padding-top: em(8px, 19px);
|
|
60
|
+
padding-bottom: em($gem-spacing-scale-1, 19px);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.gem-c-radio__label__text,
|
|
64
|
+
.gem-c-radio__label__hint {
|
|
65
|
+
padding-left: em($gem-spacing-scale-3, 19px);
|
|
66
|
+
padding-right: em($gem-spacing-scale-3, 19px);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.gem-c-radio__input + .gem-c-radio__label::before {
|
|
70
|
+
content: "";
|
|
71
|
+
box-sizing: border-box;
|
|
72
|
+
position: absolute;
|
|
73
|
+
top: 0;
|
|
74
|
+
left: 0;
|
|
75
|
+
|
|
76
|
+
width: em(40px, 19px);
|
|
77
|
+
height: em(40px, 19px);
|
|
78
|
+
|
|
79
|
+
border: $gem-border-width-form-element solid;
|
|
80
|
+
border-radius: 50%;
|
|
81
|
+
background: transparent;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.gem-c-radio__input + .gem-c-radio__label::after {
|
|
85
|
+
content: "";
|
|
86
|
+
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: em($gem-spacing-scale-2, 19px);
|
|
89
|
+
left: em($gem-spacing-scale-2, 19px);
|
|
90
|
+
|
|
91
|
+
width: 0;
|
|
92
|
+
height: 0;
|
|
93
|
+
|
|
94
|
+
border: em($gem-spacing-scale-2, 19px) solid;
|
|
95
|
+
border-radius: 50%;
|
|
96
|
+
background: currentColor;
|
|
97
|
+
opacity: 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Focused state
|
|
101
|
+
.gem-c-radio__input:focus + .gem-c-radio__label::before {
|
|
102
|
+
box-shadow: 0 0 0 4px $gem-focus-colour;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Selected state
|
|
106
|
+
.gem-c-radio__input:checked + .gem-c-radio__label::after {
|
|
107
|
+
opacity: 1;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// Disabled state
|
|
111
|
+
.gem-c-radio__input:disabled,
|
|
112
|
+
.gem-c-radio__input:disabled + .gem-c-radio__label__text {
|
|
113
|
+
cursor: default;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.gem-c-radio__input:disabled + .gem-c-radio__label {
|
|
117
|
+
opacity: .5;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// TODO: Can be replaced by spacing + typography helpers from GOV.UK Frontend
|
|
121
|
+
.gem-c-radio--margin-bottom-0 {
|
|
122
|
+
margin-bottom: $gem-spacing-scale-0 !important;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
// TODO: Can be replaced by spacing + typography helpers from GOV.UK Frontend
|
|
126
|
+
.gem-c-radio__block-text {
|
|
127
|
+
display: block;
|
|
128
|
+
@include core-19;
|
|
129
|
+
margin-bottom: $gem-spacing-scale-3;
|
|
130
|
+
}
|
|
@@ -1,40 +1,117 @@
|
|
|
1
1
|
// scss-lint:disable SelectorFormat
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
$grey-2: #bfc1c3;
|
|
4
|
+
$white: #ffffff;
|
|
5
|
+
$number-circle-size: 35px;
|
|
6
|
+
$stroke-width: 3px;
|
|
7
|
+
|
|
8
|
+
.gem-c-task-list:not(.gem-c-task-list--large),
|
|
4
9
|
.gem-c-task-list__controls,
|
|
5
10
|
.gem-c-task-list__toggle-link,
|
|
6
11
|
.gem-c-task-list__help {
|
|
7
12
|
display: none;
|
|
8
13
|
}
|
|
9
14
|
|
|
15
|
+
.gem-c-task-list {
|
|
16
|
+
position: relative;
|
|
17
|
+
|
|
18
|
+
&:before {
|
|
19
|
+
content: "";
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 0;
|
|
22
|
+
left: $number-circle-size / 2;
|
|
23
|
+
width: 3px;
|
|
24
|
+
height: 100%;
|
|
25
|
+
margin-left: -1.5px;
|
|
26
|
+
border-left: solid $stroke-width $grey-2;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:after {
|
|
30
|
+
content: "";
|
|
31
|
+
position: absolute;
|
|
32
|
+
z-index: 6;
|
|
33
|
+
bottom: 0;
|
|
34
|
+
left: 0;
|
|
35
|
+
margin-left: $number-circle-size / 4;
|
|
36
|
+
width: $number-circle-size / 2;
|
|
37
|
+
height: 0;
|
|
38
|
+
border-bottom: solid $stroke-width $grey-2;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.gem-c-task-list__group {
|
|
43
|
+
position: relative;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.gem-c-task-list__groups {
|
|
47
|
+
padding: 0;
|
|
48
|
+
list-style: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.gem-c-task-list__circle {
|
|
52
|
+
@include _core-font-generator(19px, 16px, 19px, 30px, 23px, false, bold);
|
|
53
|
+
box-sizing: border-box;
|
|
54
|
+
position: absolute;
|
|
55
|
+
top: 0;
|
|
56
|
+
left: 0;
|
|
57
|
+
width: $number-circle-size;
|
|
58
|
+
height: $number-circle-size;
|
|
59
|
+
background: $white;
|
|
60
|
+
border-radius: 100px;
|
|
61
|
+
text-align: center;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.gem-c-task-list__circle--number {
|
|
65
|
+
border: solid 3px $grey-2;
|
|
66
|
+
}
|
|
67
|
+
|
|
10
68
|
.gem-c-task-list__step,
|
|
11
|
-
.gem-c-task-list__paragraph
|
|
69
|
+
.gem-c-task-list__paragraph,
|
|
70
|
+
.gem-c-task-list__links {
|
|
71
|
+
@include core-16;
|
|
12
72
|
padding-bottom: 1em;
|
|
13
73
|
}
|
|
14
74
|
|
|
75
|
+
.gem-c-task-list__step {
|
|
76
|
+
position: relative;
|
|
77
|
+
padding-left: 60px;
|
|
78
|
+
}
|
|
79
|
+
|
|
15
80
|
.gem-c-task-list__title {
|
|
16
|
-
|
|
81
|
+
@include bold-19;
|
|
82
|
+
margin: 0 0 0.5em 0;
|
|
17
83
|
padding: 0;
|
|
18
84
|
}
|
|
19
85
|
|
|
20
86
|
.gem-c-task-list__button--title {
|
|
21
87
|
@include bold-19;
|
|
22
|
-
|
|
23
88
|
padding: 0;
|
|
24
89
|
border: 0;
|
|
25
90
|
background: none;
|
|
26
91
|
}
|
|
27
92
|
|
|
93
|
+
.gem-c-task-list__context {
|
|
94
|
+
&:before {
|
|
95
|
+
content: " \2013 ";
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
28
99
|
.gem-c-task-list__panel-link--active {
|
|
29
100
|
font-weight: bold;
|
|
30
101
|
}
|
|
31
102
|
|
|
32
103
|
.gem-c-task-list__links {
|
|
33
|
-
|
|
104
|
+
padding-left: 0;
|
|
105
|
+
list-style: none;
|
|
34
106
|
}
|
|
35
107
|
|
|
36
108
|
.gem-c-task-list__links--choice {
|
|
109
|
+
padding-left: 30px;
|
|
37
110
|
list-style: disc;
|
|
38
111
|
}
|
|
39
112
|
|
|
113
|
+
.gem-c-task-list__link {
|
|
114
|
+
margin-bottom: 0.3em;
|
|
115
|
+
}
|
|
116
|
+
|
|
40
117
|
// scss-lint:enable SelectorFormat
|
|
@@ -297,7 +297,8 @@ $top-border: solid 2px $grey-3;
|
|
|
297
297
|
|
|
298
298
|
// contents of the task list, such as paragraphs and links
|
|
299
299
|
|
|
300
|
-
.gem-c-task-list__paragraph
|
|
300
|
+
.gem-c-task-list__paragraph,
|
|
301
|
+
.gem-c-task-list__heading {
|
|
301
302
|
padding-bottom: $gutter-half;
|
|
302
303
|
margin: 0;
|
|
303
304
|
font-size: inherit;
|
|
@@ -319,6 +320,10 @@ $top-border: solid 2px $grey-3;
|
|
|
319
320
|
}
|
|
320
321
|
}
|
|
321
322
|
|
|
323
|
+
.gem-c-task-list__heading {
|
|
324
|
+
font-weight: bold;
|
|
325
|
+
}
|
|
326
|
+
|
|
322
327
|
.gem-c-task-list__links {
|
|
323
328
|
padding: 0;
|
|
324
329
|
padding-bottom: 10px;
|
|
@@ -447,6 +452,7 @@ $top-border: solid 2px $grey-3;
|
|
|
447
452
|
|
|
448
453
|
.gem-c-task-list__help-link {
|
|
449
454
|
text-decoration: none;
|
|
455
|
+
font-weight: bold;
|
|
450
456
|
|
|
451
457
|
&:hover {
|
|
452
458
|
text-decoration: underline;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// Convert pixels to em
|
|
2
|
+
@function em($value, $gem-context-font-size) {
|
|
3
|
+
@if (unitless($value)) {
|
|
4
|
+
$value: $value * 1px;
|
|
5
|
+
}
|
|
6
|
+
@if (unitless($gem-context-font-size)) {
|
|
7
|
+
$gem-context-font-size: $gem-context-font-size * 1px;
|
|
8
|
+
}
|
|
9
|
+
@return $value / $gem-context-font-size * 1em;
|
|
10
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
// Forked from GOV.UK Frontend, namespace changed to ensure no conflicts.
|
|
2
|
+
|
|
3
|
+
$gem-spacing-scale-0: 0;
|
|
4
|
+
$gem-spacing-scale-1: 5px;
|
|
5
|
+
$gem-spacing-scale-2: 10px;
|
|
6
|
+
$gem-spacing-scale-3: 15px;
|
|
7
|
+
$gem-spacing-scale-4: 20px;
|
|
8
|
+
$gem-spacing-scale-5: 30px;
|
|
9
|
+
$gem-spacing-scale-6: 40px;
|
|
10
|
+
$gem-spacing-scale-7: 50px;
|
|
11
|
+
$gem-spacing-scale-8: 60px;
|
|
12
|
+
|
|
13
|
+
$gem-text-colour: $text-colour;
|
|
14
|
+
$gem-secondary-text-colour: $grey-1;
|
|
15
|
+
|
|
16
|
+
// Border widths
|
|
17
|
+
$gem-border-width-mobile: 4px;
|
|
18
|
+
$gem-border-width-tablet: 5px;
|
|
19
|
+
$gem-border-width-form-element: 2px;
|
|
20
|
+
|
|
21
|
+
// Focus
|
|
22
|
+
$gem-focus-width: 3px;
|
|
23
|
+
$gem-focus-colour: $focus-colour;
|
|
24
|
+
|
|
25
|
+
$gem-error-colour: $red;
|
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
@import "grid_layout";
|
|
4
4
|
@import "typography";
|
|
5
5
|
@import "colours";
|
|
6
|
+
|
|
7
|
+
@import "../components/fieldset";
|
|
8
|
+
@import "../components/label";
|
|
9
|
+
@import "../components/radio";
|
|
6
10
|
@import "../components/task-list";
|
|
7
11
|
@import "../components/task-list-header";
|
|
8
12
|
@import "../components/task-list-related";
|
|
@@ -32,15 +36,6 @@ $border-color: #ccc;
|
|
|
32
36
|
.component-doc-h2:first-child {
|
|
33
37
|
margin-top: 0;
|
|
34
38
|
}
|
|
35
|
-
|
|
36
|
-
p {
|
|
37
|
-
margin: $gutter-half 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
ol,
|
|
41
|
-
ul {
|
|
42
|
-
margin: 0 0 0 $gutter;
|
|
43
|
-
}
|
|
44
39
|
}
|
|
45
40
|
|
|
46
41
|
.component-violation {
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
<%
|
|
2
|
+
classes ||= ''
|
|
3
|
+
text_classes ||= ''
|
|
4
|
+
hint_text_classes ||= ''
|
|
5
|
+
hint_text ||= ''
|
|
6
|
+
bold ||= false
|
|
7
|
+
%>
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
<div
|
|
11
|
+
class="
|
|
12
|
+
gem-c-label
|
|
13
|
+
<%= "gem-c-label--bold" if bold %>
|
|
14
|
+
<%= classes if classes %>
|
|
15
|
+
"
|
|
16
|
+
>
|
|
17
|
+
<label
|
|
18
|
+
class="
|
|
19
|
+
gem-c-label__text
|
|
20
|
+
<%= text_classes if text_classes %>
|
|
21
|
+
"
|
|
22
|
+
<% if html_for %>
|
|
23
|
+
for="<%= html_for %>"
|
|
24
|
+
<% end %>
|
|
25
|
+
>
|
|
26
|
+
<%= text %>
|
|
27
|
+
</label>
|
|
28
|
+
<% if hint_text.present? %>
|
|
29
|
+
<span
|
|
30
|
+
class="
|
|
31
|
+
gem-c-label__hint
|
|
32
|
+
<%= hint_text_classes if hint_text_classes %>
|
|
33
|
+
"
|
|
34
|
+
id="<%= hint_id %>"
|
|
35
|
+
>
|
|
36
|
+
<%= hint_text %>
|
|
37
|
+
</span>
|
|
38
|
+
<% end %>
|
|
39
|
+
</div>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<%
|
|
2
|
+
id_prefix ||= "radio-#{SecureRandom.hex(4)}"
|
|
3
|
+
items ||= []
|
|
4
|
+
%>
|
|
5
|
+
<% items.each_with_index do |item, index| %>
|
|
6
|
+
<% if item === :or %>
|
|
7
|
+
<span class="gem-c-radio__block-text">
|
|
8
|
+
<%= t('components.radio.or') %>
|
|
9
|
+
</span>
|
|
10
|
+
<% else %>
|
|
11
|
+
<%
|
|
12
|
+
item_next = items[index + 1] unless index === items.size - 1
|
|
13
|
+
label_id = item[:id] ? item[:id] : "#{id_prefix}-#{index}"
|
|
14
|
+
label_hint_id = "label-hint-#{SecureRandom.hex(4)}" if item[:hint_text].present?
|
|
15
|
+
%>
|
|
16
|
+
<div
|
|
17
|
+
class="
|
|
18
|
+
gem-c-radio
|
|
19
|
+
<%= 'gem-c-radio--margin-bottom-0' if item_next === :or && item[:hint_text].present? %>
|
|
20
|
+
"
|
|
21
|
+
>
|
|
22
|
+
<input
|
|
23
|
+
class="gem-c-radio__input"
|
|
24
|
+
id="<%= label_id %>"
|
|
25
|
+
name="<%= name %>"
|
|
26
|
+
type="radio"
|
|
27
|
+
value="<%= item[:value] %>"
|
|
28
|
+
<%= "checked" if item[:checked] %>
|
|
29
|
+
<% if label_hint_id %>
|
|
30
|
+
aria-describedby="<%= label_hint_id %>"
|
|
31
|
+
<% end %>
|
|
32
|
+
>
|
|
33
|
+
<%= render "components/label", {
|
|
34
|
+
hint_id: label_hint_id,
|
|
35
|
+
html_for: label_id,
|
|
36
|
+
classes: 'gem-c-radio__label',
|
|
37
|
+
text_classes: 'gem-c-radio__label__text',
|
|
38
|
+
hint_text_classes: 'gem-c-radio__label__hint',
|
|
39
|
+
hint_text: item[:hint_text],
|
|
40
|
+
text: item[:text],
|
|
41
|
+
bold: item[:bold]
|
|
42
|
+
} %>
|
|
43
|
+
</div>
|
|
44
|
+
<% end %>
|
|
45
|
+
<% end %>
|
|
@@ -69,6 +69,9 @@
|
|
|
69
69
|
<% if element[:type] == 'paragraph' %>
|
|
70
70
|
<p class="gem-c-task-list__paragraph"><%= element[:text] %></p>
|
|
71
71
|
|
|
72
|
+
<% elsif element[:type] == 'heading' %>
|
|
73
|
+
<%= content_tag("h#{heading_level + 1}", element[:text], class: 'gem-c-task-list__heading') %>
|
|
74
|
+
|
|
72
75
|
<% elsif element[:type] == 'list' %>
|
|
73
76
|
<%
|
|
74
77
|
list_style = ''
|
|
@@ -127,7 +130,7 @@
|
|
|
127
130
|
</div>
|
|
128
131
|
<% end %>
|
|
129
132
|
|
|
130
|
-
<% if task_list_url %>
|
|
133
|
+
<% if task_list_url && step[:show_help_link] %>
|
|
131
134
|
<div class="gem-c-task-list__help">
|
|
132
135
|
<a href="<%= task_list_url %>#<%= id %>" class="gem-c-task-list__help-link js-link" data-position="get-help"><%= task_list_url_link_text %></a>
|
|
133
136
|
</div>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
name: Form fieldset
|
|
2
|
+
description: The fieldset element is used to group several controls within a web form. The legend element represents a caption for the content of its parent fieldset.
|
|
3
|
+
body: |
|
|
4
|
+
[Using the fieldset and legend elements](https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/)
|
|
5
|
+
|
|
6
|
+
You can use the 'text' property or pass 'text' as a block.
|
|
7
|
+
accessibility_criteria: |
|
|
8
|
+
- must give inputs within the fieldset context with legend text
|
|
9
|
+
examples:
|
|
10
|
+
default:
|
|
11
|
+
data:
|
|
12
|
+
legend_text: 'Do you have a passport?'
|
|
13
|
+
text: |
|
|
14
|
+
<!-- Use the radio component, this is hardcoded only for this example -->
|
|
15
|
+
<input type="radio" id="default-yes" name="default"t>
|
|
16
|
+
<label for="default-yes">Yes</label>
|
|
17
|
+
|
|
18
|
+
<input type="radio" id="default-no" name="default"t>
|
|
19
|
+
<label for="default-no">No</label>
|
|
20
|
+
with_html_legend:
|
|
21
|
+
description: 'If you only have one fieldset on the page you might want to include the title of the page as the legend text. Used with a [captured](http://api.rubyonrails.org/classes/ActionView/Helpers/CaptureHelper.html#method-i-capture) [title](http://govuk-static.herokuapp.com/component-guide/title)'
|
|
22
|
+
data:
|
|
23
|
+
legend_text: |
|
|
24
|
+
<!-- Use the title component, this is hardcoded only for this example -->
|
|
25
|
+
<h1 style="font-size: 48px; line-height: 1.0416666667; font-weight: bold; margin-bottom: 30px;">
|
|
26
|
+
Do you have a passport?
|
|
27
|
+
</h1>
|
|
28
|
+
text: |
|
|
29
|
+
<!-- Use the radio component, this is hardcoded only for this example -->
|
|
30
|
+
<input type="radio" id="html-legend-yes" name="html-legend">
|
|
31
|
+
<label for="html-legend-yes">Yes</label>
|
|
32
|
+
|
|
33
|
+
<input type="radio" id="html-legend-no" name="html-legend">
|
|
34
|
+
<label for="html-legend-no">No</label>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
name: Form label
|
|
2
|
+
description: Use labels for all form fields.
|
|
3
|
+
body: |
|
|
4
|
+
For use with other form inputs e.g. [Radio buttons](/component-guide/radio)
|
|
5
|
+
|
|
6
|
+
Forked from the upcoming [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), when GOV.UK Frontend release we can replace these source files.
|
|
7
|
+
accessibility_criteria: |
|
|
8
|
+
- have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
|
|
9
|
+
- have visible text
|
|
10
|
+
- `hint_id` is matched with an `aria-describedby` property on the input your label is associated with.
|
|
11
|
+
examples:
|
|
12
|
+
default:
|
|
13
|
+
data:
|
|
14
|
+
text: "National Insurance number"
|
|
15
|
+
html_for: "id-that-matches-input"
|
|
16
|
+
with_hint:
|
|
17
|
+
data:
|
|
18
|
+
text: "National Insurance number"
|
|
19
|
+
html_for: "id-that-matches-input"
|
|
20
|
+
hint_id: "should-match-aria-describedby-input"
|
|
21
|
+
hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
|
|
22
|
+
bold_with_hint:
|
|
23
|
+
data:
|
|
24
|
+
bold: true
|
|
25
|
+
text: "National Insurance number"
|
|
26
|
+
html_for: "id-that-matches-input"
|
|
27
|
+
hint_id: "should-match-aria-describedby-input-bold"
|
|
28
|
+
hint_text: "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
name: Radio button
|
|
2
|
+
description: A radio button is a GOV.UK element that allows users to answer a question by selecting an option. If you have a question with more than one option you should stack radio buttons.
|
|
3
|
+
body: |
|
|
4
|
+
Forked from the upcoming [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend), when GOV.UK Frontend release we can replace these source files.
|
|
5
|
+
|
|
6
|
+
You can also use 'or' as an item to [break up radios](https://www.gov.uk/service-manual/design/writing-for-user-interfaces#ask-questions-that-users-can-understand)
|
|
7
|
+
accessibility_criteria: |
|
|
8
|
+
Radio buttons should
|
|
9
|
+
|
|
10
|
+
- accept focus
|
|
11
|
+
- be focusable with a keyboard
|
|
12
|
+
- be usable with a keyboard
|
|
13
|
+
- indicate when they have focus
|
|
14
|
+
- change in appearance when touched (in the touch-down state)
|
|
15
|
+
- be usable with touch
|
|
16
|
+
- have label with a touch area similar to the input
|
|
17
|
+
- be usable with [voice commands](https://www.w3.org/WAI/perspectives/voice.html)
|
|
18
|
+
- have visible text
|
|
19
|
+
- have a meaningful accessible name
|
|
20
|
+
- be usable when interacting with the label
|
|
21
|
+
- additional information in hint text should be read out found when focusing inputs
|
|
22
|
+
- should always be used nested in a fieldset so that it has proper context, useful for users of assistive technologies.
|
|
23
|
+
|
|
24
|
+
[Keyboard interaction](https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton)
|
|
25
|
+
|
|
26
|
+
- when a radio group receives focus:
|
|
27
|
+
- if a radio button is checked, focus is set on the checked button.
|
|
28
|
+
- if none of the radio buttons are checked, focus is set on the first radio button in the group.
|
|
29
|
+
- Space: checks the focused radio button if it is not already checked.
|
|
30
|
+
- Right Arrow and Down Arrow: move focus to the next radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the last button, focus moves to the first button.
|
|
31
|
+
- Left Arrow and Up Arrow: move focus to the previous radio button in the group, uncheck the previously focused button, and check the newly focused button. If focus is on the first button, focus moves to the last button.
|
|
32
|
+
|
|
33
|
+
accessibility_excluded_rules:
|
|
34
|
+
- radiogroup # Since this is in isolation we don't want to wrap a fieldset here.
|
|
35
|
+
examples:
|
|
36
|
+
default:
|
|
37
|
+
data:
|
|
38
|
+
name: "radio-group"
|
|
39
|
+
items:
|
|
40
|
+
- value: "government-gateway"
|
|
41
|
+
text: "Use Government Gateway"
|
|
42
|
+
- value: "govuk-verify"
|
|
43
|
+
text: "Use GOV.UK Verify"
|
|
44
|
+
with_bold:
|
|
45
|
+
description: 'Used to provide better contrast between long labels and hint text, Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)'
|
|
46
|
+
data:
|
|
47
|
+
name: "radio-group-bold"
|
|
48
|
+
items:
|
|
49
|
+
- value: "government-gateway"
|
|
50
|
+
text: "Use Government Gateway"
|
|
51
|
+
hint_text: "You'll have a user ID if you've signed up to do things like sign up Self Assessment tax return online."
|
|
52
|
+
bold: true
|
|
53
|
+
- value: "govuk-verify"
|
|
54
|
+
text: "Use GOV.UK Verify"
|
|
55
|
+
hint_text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office."
|
|
56
|
+
bold: true
|
|
57
|
+
with_hint_text:
|
|
58
|
+
data:
|
|
59
|
+
name: "radio-group-hint-text"
|
|
60
|
+
items:
|
|
61
|
+
- value: "government-gateway"
|
|
62
|
+
hint_text: "You'll have a user ID if you've signed up to do things like sign up Self Assessment tax return online."
|
|
63
|
+
text: "Use Government Gateway"
|
|
64
|
+
- value: "govuk-verify"
|
|
65
|
+
hint_text: "You'll have an account if you've already proved your identity with a certified company, such as the Post Office."
|
|
66
|
+
text: "Use GOV.UK Verify"
|
|
67
|
+
with_checked_option:
|
|
68
|
+
data:
|
|
69
|
+
name: "radio-group-checked"
|
|
70
|
+
items:
|
|
71
|
+
- value: "government-gateway"
|
|
72
|
+
text: "Use Government Gateway"
|
|
73
|
+
- value: "govuk-verify"
|
|
74
|
+
text: "Use GOV.UK Verify"
|
|
75
|
+
checked: true
|
|
76
|
+
with_custom_id_prefix:
|
|
77
|
+
data:
|
|
78
|
+
id_prefix: 'custom'
|
|
79
|
+
name: "radio-custom-id-prefix"
|
|
80
|
+
items:
|
|
81
|
+
- value: "government-gateway"
|
|
82
|
+
text: "Use Government Gateway"
|
|
83
|
+
- value: "govuk-verify"
|
|
84
|
+
text: "Use GOV.UK Verify"
|
|
85
|
+
with_or_divider:
|
|
86
|
+
description: "See [related service manual gudiance for this pattern](https://www.gov.uk/service-manual/design/writing-for-user-interfaces#ask-questions-that-users-can-understand)"
|
|
87
|
+
data:
|
|
88
|
+
name: "radio-group-or-divider"
|
|
89
|
+
items:
|
|
90
|
+
- value: "government-gateway"
|
|
91
|
+
text: "Use Government Gateway"
|
|
92
|
+
- value: "govuk-verify"
|
|
93
|
+
text: "Use GOV.UK Verify"
|
|
94
|
+
- :or
|
|
95
|
+
- value: "create-an-account"
|
|
96
|
+
text: "Create an account"
|
|
97
|
+
extreme:
|
|
98
|
+
description: 'Note that the `:or` option [is documented as a string due to a bug](https://github.com/alphagov/govuk_publishing_components/issues/102)'
|
|
99
|
+
data:
|
|
100
|
+
id_prefix: 'extreme'
|
|
101
|
+
name: "radio-custom-extreme"
|
|
102
|
+
items:
|
|
103
|
+
- value: "extreme-value-1"
|
|
104
|
+
hint_text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien justo, lobortis elementum tortor in, luctus interdum turpis. Nam sit amet nulla nec arcu condimentum dapibus quis varius metus. Suspendisse cursus tristique diam et vestibulum. Proin nec lacinia tortor. Morbi at nisi id lorem aliquam ullamcorper. Pellentesque laoreet sit amet leo sodales ultricies. Suspendisse maximus efficitur odio in tristique."
|
|
105
|
+
text: "Quisque tincidunt venenatis bibendum. Morbi volutpat magna euismod ipsum consequat cursus. Etiam bibendum interdum ultricies."
|
|
106
|
+
bold: true
|
|
107
|
+
- value: "extreme-value-2"
|
|
108
|
+
hint_text: "Cras mi neque, porttitor mattis ultricies id, fringilla non ipsum. Etiam non elit ac magna tincidunt ultrices. Morbi eu quam sed justo scelerisque efficitur sed ut risus. Integer commodo, lectus et venenatis maximus, augue erat egestas nulla, eget fermentum augue lacus tempor nulla. Aenean ultricies suscipit erat, vitae hendrerit neque varius nec. Etiam ac euismod massa. Ut at erat id sapien mollis posuere."
|
|
109
|
+
text: "Aliquam rutrum lobortis blandit. Praesent sit amet lacinia libero. Morbi nulla tellus, euismod et ipsum id, porta volutpat enim. Ut mauris libero"
|
|
110
|
+
bold: true
|
|
111
|
+
- :or
|
|
112
|
+
- value: "extreme-value-3"
|
|
113
|
+
hint_text: "Nullam congue neque et tempor tincidunt. In ornare lacus ac arcu maximus ultricies. Quisque et ultrices nulla. Suspendisse potenti. Nunc imperdiet ornare leo ut ultrices. Praesent in quam in tellus dictum lacinia vitae vitae lacus. Nulla hendrerit feugiat urna eu gravida. Nam a molestie nisi, at semper neque. Quisque tincidunt venenatis bibendum. Morbi volutpat magna euismod ipsum consequat cursus. Etiam bibendum interdum ultricies."
|
|
114
|
+
text: "Duis tempus est metus, in varius enim lobortis non. Nunc laoreet nisi vel lectus consequat, sed venenatis tellus dictum. Nunc ut nibh blandit ipsum bibendum dictum."
|
|
115
|
+
bold: true
|
|
116
|
+
- value: "extreme-value-4"
|
|
117
|
+
hint_text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sapien justo, lobortis elementum tortor in, luctus interdum turpis. Nam sit amet nulla nec arcu condimentum dapibus quis varius metus. Suspendisse cursus tristique diam et vestibulum. Proin nec lacinia tortor. Morbi at nisi id lorem aliquam ullamcorper. Pellentesque laoreet sit amet leo sodales ultricies. Suspendisse maximus efficitur odio in tristique."
|
|
118
|
+
text: "Quisque tincidunt venenatis bibendum. Morbi volutpat magna euismod ipsum consequat cursus. Etiam bibendum interdum ultricies."
|
|
119
|
+
bold: true
|
|
@@ -293,6 +293,49 @@ examples:
|
|
|
293
293
|
}
|
|
294
294
|
]
|
|
295
295
|
]
|
|
296
|
+
with_headings:
|
|
297
|
+
description: Headings can be included to break up complex content within steps. Headings are intended to be used to highlight 'Get help completing this step' information, but can be used in other contexts. The heading level is automatically determined based on the heading level of the step titles.
|
|
298
|
+
data:
|
|
299
|
+
show_step: 1
|
|
300
|
+
heading_level: 3
|
|
301
|
+
groups: [
|
|
302
|
+
[
|
|
303
|
+
{
|
|
304
|
+
title: "Do something complicated",
|
|
305
|
+
contents: [
|
|
306
|
+
{
|
|
307
|
+
type: 'paragraph',
|
|
308
|
+
text: 'This is an example of a step containing a heading. A section has been used with the heading to demonstrate the intended appearance of a Get Help section.'
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
type: 'substep',
|
|
312
|
+
optional: true
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
type: 'heading',
|
|
316
|
+
text: 'Get help completing this step'
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
type: 'list',
|
|
320
|
+
contents: [
|
|
321
|
+
{
|
|
322
|
+
href: '#',
|
|
323
|
+
text: 'Apply online'
|
|
324
|
+
},
|
|
325
|
+
{
|
|
326
|
+
href: '#',
|
|
327
|
+
text: 'Talk to one of our advisers'
|
|
328
|
+
},
|
|
329
|
+
{
|
|
330
|
+
href: '#',
|
|
331
|
+
text: 'Search our website'
|
|
332
|
+
}
|
|
333
|
+
]
|
|
334
|
+
}
|
|
335
|
+
]
|
|
336
|
+
}
|
|
337
|
+
]
|
|
338
|
+
]
|
|
296
339
|
or_then:
|
|
297
340
|
description: Some of the more complex things in a task list require an option for laying out links in a clear structure. If a link in a list is not given a href, only the text is displayed, allowing for structures like the one shown below.
|
|
298
341
|
data:
|
|
@@ -582,10 +625,12 @@ examples:
|
|
|
582
625
|
}
|
|
583
626
|
]
|
|
584
627
|
]
|
|
585
|
-
|
|
628
|
+
get_help_links:
|
|
586
629
|
description: |
|
|
587
630
|
Where task lists are long, content can be substituted with a link back to the main task list page. This link will open the main task list page with that step shown. The link text defaults to "Get help completing this step" but can be overridden.
|
|
588
631
|
|
|
632
|
+
Get help links will only appear if the task_list_url global parameter is set and the step itself has the optional show_help_link parameter set to true.
|
|
633
|
+
|
|
589
634
|
Note that this option does not remove any content - it is left to developers to simply pass less content to the component in this situation.
|
|
590
635
|
data:
|
|
591
636
|
task_list_url: "/learn-to-do-something"
|
|
@@ -595,6 +640,7 @@ examples:
|
|
|
595
640
|
[
|
|
596
641
|
{
|
|
597
642
|
title: "A link back to the main task list",
|
|
643
|
+
show_help_link: true,
|
|
598
644
|
contents: [
|
|
599
645
|
{
|
|
600
646
|
type: 'list',
|
|
@@ -614,7 +660,7 @@ examples:
|
|
|
614
660
|
],
|
|
615
661
|
[
|
|
616
662
|
{
|
|
617
|
-
title: "
|
|
663
|
+
title: "No help link here",
|
|
618
664
|
contents: [
|
|
619
665
|
{
|
|
620
666
|
type: 'list',
|
|
@@ -727,6 +773,10 @@ examples:
|
|
|
727
773
|
type: 'substep',
|
|
728
774
|
optional: true
|
|
729
775
|
},
|
|
776
|
+
{
|
|
777
|
+
type: 'heading',
|
|
778
|
+
text: 'Optional steps'
|
|
779
|
+
},
|
|
730
780
|
{
|
|
731
781
|
type: 'paragraph',
|
|
732
782
|
text: 'These steps are not required.'
|
|
@@ -752,6 +802,7 @@ examples:
|
|
|
752
802
|
[
|
|
753
803
|
{
|
|
754
804
|
title: 'Join and configure the standup',
|
|
805
|
+
show_help_link: true,
|
|
755
806
|
contents: [
|
|
756
807
|
{
|
|
757
808
|
type: 'paragraph',
|
|
@@ -927,6 +978,10 @@ examples:
|
|
|
927
978
|
type: 'substep',
|
|
928
979
|
optional: true
|
|
929
980
|
},
|
|
981
|
+
{
|
|
982
|
+
type: 'heading',
|
|
983
|
+
text: 'Optional steps'
|
|
984
|
+
},
|
|
930
985
|
{
|
|
931
986
|
type: 'paragraph',
|
|
932
987
|
text: 'These steps are not required.'
|
|
@@ -952,6 +1007,7 @@ examples:
|
|
|
952
1007
|
[
|
|
953
1008
|
{
|
|
954
1009
|
title: 'Join and configure the standup.',
|
|
1010
|
+
show_help_link: true,
|
|
955
1011
|
contents: [
|
|
956
1012
|
{
|
|
957
1013
|
type: 'paragraph',
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<% end %>
|
|
11
11
|
<%= yield :title %><% if content_for(:title) %> - <% end %><%= GovukPublishingComponents::Config.component_guide_title %>
|
|
12
12
|
</title>
|
|
13
|
-
<%= stylesheet_link_tag "govuk_publishing_components/application", media: "
|
|
13
|
+
<%= stylesheet_link_tag "govuk_publishing_components/application", media: "screen" %>
|
|
14
14
|
<%= stylesheet_link_tag "govuk_publishing_components/print", media: "print" %>
|
|
15
15
|
<%= stylesheet_link_tag "#{GovukPublishingComponents::Config.application_stylesheet}" %>
|
|
16
16
|
<%= javascript_include_tag "govuk_publishing_components/application" %>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
# Files in the config/locales directory are used for internationalization
|
|
2
|
+
# and are automatically loaded by Rails. If you want to use locales other
|
|
3
|
+
# than English, add the necessary files in this directory.
|
|
4
|
+
#
|
|
5
|
+
# To use the locales, use `I18n.t`:
|
|
6
|
+
#
|
|
7
|
+
# I18n.t 'hello'
|
|
8
|
+
#
|
|
9
|
+
# In views, this is aliased to just `t`:
|
|
10
|
+
#
|
|
11
|
+
# <%= t('hello') %>
|
|
12
|
+
#
|
|
13
|
+
# To use a different locale, set it with `I18n.locale`:
|
|
14
|
+
#
|
|
15
|
+
# I18n.locale = :es
|
|
16
|
+
#
|
|
17
|
+
# This would use the information in config/locales/es.yml.
|
|
18
|
+
#
|
|
19
|
+
# To learn more, please read the Rails Internationalization guide
|
|
20
|
+
# available at http://guides.rubyonrails.org/i18n.html.
|
|
21
|
+
|
|
22
|
+
en:
|
|
23
|
+
components:
|
|
24
|
+
radio:
|
|
25
|
+
or: 'or'
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 3.
|
|
4
|
+
version: 3.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-01-
|
|
11
|
+
date: 2018-01-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -226,11 +226,17 @@ files:
|
|
|
226
226
|
- app/assets/javascripts/govuk_publishing_components/vendor/matches-polyfill.min.js
|
|
227
227
|
- app/assets/javascripts/govuk_publishing_components/visual-regression.js
|
|
228
228
|
- app/assets/javascripts/history-support.js
|
|
229
|
+
- app/assets/stylesheets/components/_fieldset.scss
|
|
230
|
+
- app/assets/stylesheets/components/_label.scss
|
|
231
|
+
- app/assets/stylesheets/components/_radio.scss
|
|
229
232
|
- app/assets/stylesheets/components/_task-list-header-print.scss
|
|
230
233
|
- app/assets/stylesheets/components/_task-list-header.scss
|
|
231
234
|
- app/assets/stylesheets/components/_task-list-print.scss
|
|
232
235
|
- app/assets/stylesheets/components/_task-list-related.scss
|
|
233
236
|
- app/assets/stylesheets/components/_task-list.scss
|
|
237
|
+
- app/assets/stylesheets/components/helpers/_clearfix.scss
|
|
238
|
+
- app/assets/stylesheets/components/helpers/_px-to-em.scss
|
|
239
|
+
- app/assets/stylesheets/components/helpers/_variables.scss
|
|
234
240
|
- app/assets/stylesheets/govuk_publishing_components/application.scss
|
|
235
241
|
- app/assets/stylesheets/govuk_publishing_components/print.scss
|
|
236
242
|
- app/controllers/govuk_publishing_components/application_controller.rb
|
|
@@ -240,9 +246,15 @@ files:
|
|
|
240
246
|
- app/models/govuk_publishing_components/component_doc_resolver.rb
|
|
241
247
|
- app/models/govuk_publishing_components/component_example.rb
|
|
242
248
|
- app/models/govuk_publishing_components/shared_accessibility_criteria.rb
|
|
249
|
+
- app/views/components/_fieldset.html.erb
|
|
250
|
+
- app/views/components/_label.html.erb
|
|
251
|
+
- app/views/components/_radio.html.erb
|
|
243
252
|
- app/views/components/_task_list.html.erb
|
|
244
253
|
- app/views/components/_task_list_header.html.erb
|
|
245
254
|
- app/views/components/_task_list_related.html.erb
|
|
255
|
+
- app/views/components/docs/fieldset.yml
|
|
256
|
+
- app/views/components/docs/label.yml
|
|
257
|
+
- app/views/components/docs/radio.yml
|
|
246
258
|
- app/views/components/docs/task_list.yml
|
|
247
259
|
- app/views/components/docs/task_list_header.yml
|
|
248
260
|
- app/views/components/docs/task_list_related.yml
|
|
@@ -255,6 +267,7 @@ files:
|
|
|
255
267
|
- app/views/govuk_publishing_components/component_guide/show.html.erb
|
|
256
268
|
- app/views/layouts/govuk_publishing_components/application.html.erb
|
|
257
269
|
- config/initializers/assets.rb
|
|
270
|
+
- config/locales/en.yml
|
|
258
271
|
- config/routes.rb
|
|
259
272
|
- lib/generators/govuk_publishing_components/USAGE
|
|
260
273
|
- lib/generators/govuk_publishing_components/component_generator.rb
|