govuk_publishing_components 23.12.0 → 23.13.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/header.js +3 -0
- data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +5 -0
- data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +32 -36
- data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +66 -14
- data/app/assets/javascripts/govuk_publishing_components/modules.js +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss +5 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_show-password.scss +4 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +19 -7
- data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +17 -6
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +5 -0
- data/app/views/govuk_publishing_components/components/_button.html.erb +1 -0
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +3 -2
- data/app/views/govuk_publishing_components/components/_machine_readable_metadata.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +3 -0
- data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +82 -0
- data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +3 -0
- data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +30 -0
- data/app/views/govuk_publishing_components/components/docs/layout_header.yml +21 -0
- data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +99 -1
- data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +3 -0
- data/app/views/govuk_publishing_components/components/docs/subscription_links.yml +100 -0
- data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +3 -1
- data/app/views/govuk_publishing_components/components/docs/translation_nav.yml +137 -0
- data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +3 -3
- data/config/locales/en.yml +2 -2
- data/lib/govuk_publishing_components/presenters/meta_tags.rb +2 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/govuk/all.js +57 -0
- data/node_modules/govuk-frontend/govuk/components/_all.scss +1 -0
- data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
- data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
- data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
- data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
- data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
- data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
- data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +72 -15
- data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
- data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
- data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
- data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +34 -14
- data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
- data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
- data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
- data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
- data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
- data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
- data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
- data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
- data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
- data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
- data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
- data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
- data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
- data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
- data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
- data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
- data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
- data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
- data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
- data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
- data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
- data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
- data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
- data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
- data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
- data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
- data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
- data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
- data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
- data/node_modules/govuk-frontend/package.json +1 -1
- metadata +15 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss +0 -125
@@ -27,7 +27,7 @@
|
|
27
27
|
"name": "id",
|
28
28
|
"type": "string",
|
29
29
|
"required": true,
|
30
|
-
"description": "Specific id attribute for the tab item. If omitted, then `idPrefix` string
|
30
|
+
"description": "Specific id attribute for the tab item. If omitted, then `idPrefix` string is required instead."
|
31
31
|
},
|
32
32
|
{
|
33
33
|
"name": "label",
|
@@ -6,7 +6,8 @@
|
|
6
6
|
"options": {
|
7
7
|
"text": "alpha"
|
8
8
|
},
|
9
|
-
"html": "<strong class=\"govuk-tag\">\n alpha\n</strong>"
|
9
|
+
"html": "<strong class=\"govuk-tag\">\n alpha\n</strong>",
|
10
|
+
"hidden": false
|
10
11
|
},
|
11
12
|
{
|
12
13
|
"name": "inactive",
|
@@ -14,7 +15,8 @@
|
|
14
15
|
"text": "alpha",
|
15
16
|
"classes": "govuk-tag--inactive"
|
16
17
|
},
|
17
|
-
"html": "<strong class=\"govuk-tag govuk-tag--inactive\">\n alpha\n</strong>"
|
18
|
+
"html": "<strong class=\"govuk-tag govuk-tag--inactive\">\n alpha\n</strong>",
|
19
|
+
"hidden": false
|
18
20
|
},
|
19
21
|
{
|
20
22
|
"name": "grey",
|
@@ -22,7 +24,8 @@
|
|
22
24
|
"text": "Grey",
|
23
25
|
"classes": "govuk-tag--grey"
|
24
26
|
},
|
25
|
-
"html": "<strong class=\"govuk-tag govuk-tag--grey\">\n Grey\n</strong>"
|
27
|
+
"html": "<strong class=\"govuk-tag govuk-tag--grey\">\n Grey\n</strong>",
|
28
|
+
"hidden": false
|
26
29
|
},
|
27
30
|
{
|
28
31
|
"name": "blue",
|
@@ -30,7 +33,8 @@
|
|
30
33
|
"text": "Blue",
|
31
34
|
"classes": "govuk-tag--blue"
|
32
35
|
},
|
33
|
-
"html": "<strong class=\"govuk-tag govuk-tag--blue\">\n Blue\n</strong>"
|
36
|
+
"html": "<strong class=\"govuk-tag govuk-tag--blue\">\n Blue\n</strong>",
|
37
|
+
"hidden": false
|
34
38
|
},
|
35
39
|
{
|
36
40
|
"name": "turquoise",
|
@@ -38,7 +42,8 @@
|
|
38
42
|
"text": "Turquoise",
|
39
43
|
"classes": "govuk-tag--turquoise"
|
40
44
|
},
|
41
|
-
"html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n Turquoise\n</strong>"
|
45
|
+
"html": "<strong class=\"govuk-tag govuk-tag--turquoise\">\n Turquoise\n</strong>",
|
46
|
+
"hidden": false
|
42
47
|
},
|
43
48
|
{
|
44
49
|
"name": "green",
|
@@ -46,7 +51,8 @@
|
|
46
51
|
"text": "Green",
|
47
52
|
"classes": "govuk-tag--green"
|
48
53
|
},
|
49
|
-
"html": "<strong class=\"govuk-tag govuk-tag--green\">\n Green\n</strong>"
|
54
|
+
"html": "<strong class=\"govuk-tag govuk-tag--green\">\n Green\n</strong>",
|
55
|
+
"hidden": false
|
50
56
|
},
|
51
57
|
{
|
52
58
|
"name": "purple",
|
@@ -54,7 +60,8 @@
|
|
54
60
|
"text": "Purple",
|
55
61
|
"classes": "govuk-tag--purple"
|
56
62
|
},
|
57
|
-
"html": "<strong class=\"govuk-tag govuk-tag--purple\">\n Purple\n</strong>"
|
63
|
+
"html": "<strong class=\"govuk-tag govuk-tag--purple\">\n Purple\n</strong>",
|
64
|
+
"hidden": false
|
58
65
|
},
|
59
66
|
{
|
60
67
|
"name": "pink",
|
@@ -62,7 +69,8 @@
|
|
62
69
|
"text": "Pink",
|
63
70
|
"classes": "govuk-tag--pink"
|
64
71
|
},
|
65
|
-
"html": "<strong class=\"govuk-tag govuk-tag--pink\">\n Pink\n</strong>"
|
72
|
+
"html": "<strong class=\"govuk-tag govuk-tag--pink\">\n Pink\n</strong>",
|
73
|
+
"hidden": false
|
66
74
|
},
|
67
75
|
{
|
68
76
|
"name": "red",
|
@@ -70,7 +78,8 @@
|
|
70
78
|
"text": "Red",
|
71
79
|
"classes": "govuk-tag--red"
|
72
80
|
},
|
73
|
-
"html": "<strong class=\"govuk-tag govuk-tag--red\">\n Red\n</strong>"
|
81
|
+
"html": "<strong class=\"govuk-tag govuk-tag--red\">\n Red\n</strong>",
|
82
|
+
"hidden": false
|
74
83
|
},
|
75
84
|
{
|
76
85
|
"name": "orange",
|
@@ -78,7 +87,8 @@
|
|
78
87
|
"text": "Orange",
|
79
88
|
"classes": "govuk-tag--orange"
|
80
89
|
},
|
81
|
-
"html": "<strong class=\"govuk-tag govuk-tag--orange\">\n Orange\n</strong>"
|
90
|
+
"html": "<strong class=\"govuk-tag govuk-tag--orange\">\n Orange\n</strong>",
|
91
|
+
"hidden": false
|
82
92
|
},
|
83
93
|
{
|
84
94
|
"name": "yellow",
|
@@ -86,7 +96,8 @@
|
|
86
96
|
"text": "Yellow",
|
87
97
|
"classes": "govuk-tag--yellow"
|
88
98
|
},
|
89
|
-
"html": "<strong class=\"govuk-tag govuk-tag--yellow\">\n Yellow\n</strong>"
|
99
|
+
"html": "<strong class=\"govuk-tag govuk-tag--yellow\">\n Yellow\n</strong>",
|
100
|
+
"hidden": false
|
90
101
|
},
|
91
102
|
{
|
92
103
|
"name": "attributes",
|
@@ -97,21 +108,24 @@
|
|
97
108
|
"id": "my-tag"
|
98
109
|
}
|
99
110
|
},
|
100
|
-
"html": "<strong class=\"govuk-tag\" data-test=\"attribute\" id=\"my-tag\">\n Tag with attributes\n</strong>"
|
111
|
+
"html": "<strong class=\"govuk-tag\" data-test=\"attribute\" id=\"my-tag\">\n Tag with attributes\n</strong>",
|
112
|
+
"hidden": true
|
101
113
|
},
|
102
114
|
{
|
103
115
|
"name": "html as text",
|
104
116
|
"options": {
|
105
117
|
"text": "<span>alpha</span>"
|
106
118
|
},
|
107
|
-
"html": "<strong class=\"govuk-tag\">\n <span>alpha</span>\n</strong>"
|
119
|
+
"html": "<strong class=\"govuk-tag\">\n <span>alpha</span>\n</strong>",
|
120
|
+
"hidden": true
|
108
121
|
},
|
109
122
|
{
|
110
123
|
"name": "html",
|
111
124
|
"options": {
|
112
125
|
"html": "<span>alpha</span>"
|
113
126
|
},
|
114
|
-
"html": "<strong class=\"govuk-tag\">\n <span>alpha</span>\n</strong>"
|
127
|
+
"html": "<strong class=\"govuk-tag\">\n <span>alpha</span>\n</strong>",
|
128
|
+
"hidden": true
|
115
129
|
}
|
116
130
|
]
|
117
131
|
}
|
@@ -10,7 +10,8 @@
|
|
10
10
|
"text": "Can you provide more detail?"
|
11
11
|
}
|
12
12
|
},
|
13
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>"
|
13
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\"></textarea>\n</div>",
|
14
|
+
"hidden": false
|
14
15
|
},
|
15
16
|
{
|
16
17
|
"name": "with hint",
|
@@ -24,7 +25,8 @@
|
|
24
25
|
"text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
|
25
26
|
}
|
26
27
|
},
|
27
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n\n \n \n <div id=\"more-detail-hint\" class=\"govuk-hint\">\n Don't include personal or financial information, eg your National Insurance number or credit card details.\n </div>\n\n\n <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-hint\"></textarea>\n</div>"
|
28
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"more-detail\">\n Can you provide more detail?\n </label>\n\n \n \n <div id=\"more-detail-hint\" class=\"govuk-hint\">\n Don't include personal or financial information, eg your National Insurance number or credit card details.\n </div>\n\n\n <textarea class=\"govuk-textarea\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-hint\"></textarea>\n</div>",
|
29
|
+
"hidden": false
|
28
30
|
},
|
29
31
|
{
|
30
32
|
"name": "with error message",
|
@@ -38,7 +40,8 @@
|
|
38
40
|
"text": "You must provide an explanation"
|
39
41
|
}
|
40
42
|
},
|
41
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"no-ni-reason\">\n Why can’t you provide a National Insurance number?\n </label>\n\n\n \n \n <span id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>"
|
43
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"no-ni-reason\">\n Why can’t you provide a National Insurance number?\n </label>\n\n\n \n \n <span id=\"no-ni-reason-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> You must provide an explanation\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"no-ni-reason\" name=\"no-ni-reason\" rows=\"5\" aria-describedby=\"no-ni-reason-error\"></textarea>\n</div>",
|
44
|
+
"hidden": false
|
42
45
|
},
|
43
46
|
{
|
44
47
|
"name": "with default value",
|
@@ -50,7 +53,8 @@
|
|
50
53
|
"text": "Full address"
|
51
54
|
}
|
52
55
|
},
|
53
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"full-address\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"5\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>"
|
56
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"full-address\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"5\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>",
|
57
|
+
"hidden": false
|
54
58
|
},
|
55
59
|
{
|
56
60
|
"name": "with custom rows",
|
@@ -62,7 +66,8 @@
|
|
62
66
|
},
|
63
67
|
"rows": 8
|
64
68
|
},
|
65
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"full-address\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"8\"></textarea>\n</div>"
|
69
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"full-address\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"full-address\" name=\"address\" rows=\"8\"></textarea>\n</div>",
|
70
|
+
"hidden": false
|
66
71
|
},
|
67
72
|
{
|
68
73
|
"name": "with label as page heading",
|
@@ -74,7 +79,8 @@
|
|
74
79
|
"isPageHeading": true
|
75
80
|
}
|
76
81
|
},
|
77
|
-
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n </h1>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
|
82
|
+
"html": "<div class=\"govuk-form-group\">\n <h1 class=\"govuk-label-wrapper\">\n <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n </h1>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>",
|
83
|
+
"hidden": false
|
78
84
|
},
|
79
85
|
{
|
80
86
|
"name": "with optional form-group classes",
|
@@ -88,7 +94,8 @@
|
|
88
94
|
"classes": "extra-class"
|
89
95
|
}
|
90
96
|
},
|
91
|
-
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>"
|
97
|
+
"html": "<div class=\"govuk-form-group extra-class\">\n <label class=\"govuk-label\" for=\"textarea-with-page-heading\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\"></textarea>\n</div>",
|
98
|
+
"hidden": false
|
92
99
|
},
|
93
100
|
{
|
94
101
|
"name": "with autocomplete attribute",
|
@@ -100,7 +107,8 @@
|
|
100
107
|
},
|
101
108
|
"autocomplete": "street-address"
|
102
109
|
},
|
103
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-autocomplete-attribute\" name=\"address\" rows=\"5\" autocomplete=\"street-address\"></textarea>\n</div>"
|
110
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-autocomplete-attribute\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-autocomplete-attribute\" name=\"address\" rows=\"5\" autocomplete=\"street-address\"></textarea>\n</div>",
|
111
|
+
"hidden": false
|
104
112
|
},
|
105
113
|
{
|
106
114
|
"name": "with spellcheck enabled",
|
@@ -112,7 +120,8 @@
|
|
112
120
|
"name": "spellcheck",
|
113
121
|
"spellcheck": true
|
114
122
|
},
|
115
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-enabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"true\"></textarea>\n</div>"
|
123
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-spellcheck-enabled\">\n Spellcheck is enabled\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-enabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"true\"></textarea>\n</div>",
|
124
|
+
"hidden": false
|
116
125
|
},
|
117
126
|
{
|
118
127
|
"name": "with spellcheck disabled",
|
@@ -124,55 +133,90 @@
|
|
124
133
|
"name": "spellcheck",
|
125
134
|
"spellcheck": false
|
126
135
|
},
|
127
|
-
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>"
|
136
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>",
|
137
|
+
"hidden": false
|
128
138
|
},
|
129
139
|
{
|
130
140
|
"name": "classes",
|
131
141
|
"options": {
|
142
|
+
"id": "with-classes",
|
143
|
+
"name": "with-classes",
|
144
|
+
"label": {
|
145
|
+
"text": "With classes"
|
146
|
+
},
|
132
147
|
"classes": "app-textarea--custom-modifier"
|
133
148
|
},
|
134
|
-
"html": "<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"\" name=\"\" rows=\"5\"></textarea>\n</div>"
|
149
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n\n\n <textarea class=\"govuk-textarea app-textarea--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\"></textarea>\n</div>",
|
150
|
+
"hidden": true
|
135
151
|
},
|
136
152
|
{
|
137
153
|
"name": "attributes",
|
138
154
|
"options": {
|
155
|
+
"id": "with-attributes",
|
156
|
+
"name": "with-attributes",
|
157
|
+
"label": {
|
158
|
+
"text": "With attributes"
|
159
|
+
},
|
139
160
|
"attributes": {
|
140
161
|
"data-attribute": "my data value"
|
141
162
|
}
|
142
163
|
},
|
143
|
-
"html": "<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea\" id=\"\" name=\"\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>"
|
164
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-attributes\">\n With attributes\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"with-attributes\" name=\"with-attributes\" rows=\"5\" data-attribute=\"my data value\"></textarea>\n</div>",
|
165
|
+
"hidden": true
|
144
166
|
},
|
145
167
|
{
|
146
168
|
"name": "with describedBy",
|
147
169
|
"options": {
|
170
|
+
"id": "with-describedby",
|
171
|
+
"name": "with-describedby",
|
172
|
+
"label": {
|
173
|
+
"text": "With describedBy"
|
174
|
+
},
|
148
175
|
"describedBy": "some-id"
|
149
176
|
},
|
150
|
-
"html": "<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id\"></textarea>\n</div>"
|
177
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-describedby\">\n With describedBy\n </label>\n\n\n <textarea class=\"govuk-textarea\" id=\"with-describedby\" name=\"with-describedby\" rows=\"5\" aria-describedby=\"some-id\"></textarea>\n</div>",
|
178
|
+
"hidden": true
|
151
179
|
},
|
152
180
|
{
|
153
181
|
"name": "with hint and described by",
|
154
182
|
"options": {
|
183
|
+
"id": "with-hint-describedby",
|
184
|
+
"name": "with-hint-describedby",
|
185
|
+
"label": {
|
186
|
+
"text": "With hint and describedBy"
|
187
|
+
},
|
155
188
|
"describedBy": "some-id",
|
156
189
|
"hint": {
|
157
190
|
"text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
|
158
191
|
}
|
159
192
|
},
|
160
|
-
"html": "<div class=\"govuk-form-group\">\n \n\n \n \n <div id=\"
|
193
|
+
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint-describedby\">\n With hint and describedBy\n </label>\n\n \n \n <div id=\"with-hint-describedby-hint\" class=\"govuk-hint\">\n It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.\n </div>\n\n\n <textarea class=\"govuk-textarea\" id=\"with-hint-describedby\" name=\"with-hint-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-describedby-hint\"></textarea>\n</div>",
|
194
|
+
"hidden": true
|
161
195
|
},
|
162
196
|
{
|
163
197
|
"name": "with error message and described by",
|
164
198
|
"options": {
|
199
|
+
"name": "textarea-with-error",
|
200
|
+
"label": {
|
201
|
+
"text": "Textarea with error"
|
202
|
+
},
|
165
203
|
"describedBy": "some-id",
|
166
204
|
"id": "textarea-with-error",
|
167
205
|
"errorMessage": {
|
168
206
|
"text": "Error message"
|
169
207
|
}
|
170
208
|
},
|
171
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>"
|
209
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"textarea-with-error\">\n Textarea with error\n </label>\n\n\n \n \n <span id=\"textarea-with-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"textarea-with-error\" name=\"textarea-with-error\" rows=\"5\" aria-describedby=\"some-id textarea-with-error-error\"></textarea>\n</div>",
|
210
|
+
"hidden": true
|
172
211
|
},
|
173
212
|
{
|
174
213
|
"name": "with hint and error message",
|
175
214
|
"options": {
|
215
|
+
"id": "with-hint-error",
|
216
|
+
"name": "with-hint-error",
|
217
|
+
"label": {
|
218
|
+
"text": "With hint and error"
|
219
|
+
},
|
176
220
|
"errorMessage": {
|
177
221
|
"text": "Error message"
|
178
222
|
},
|
@@ -180,11 +224,17 @@
|
|
180
224
|
"text": "Hint"
|
181
225
|
}
|
182
226
|
},
|
183
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n \n \n <div id=\"
|
227
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-hint-error\">\n With hint and error\n </label>\n\n \n \n <div id=\"with-hint-error-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-hint-error-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error\" name=\"with-hint-error\" rows=\"5\" aria-describedby=\"with-hint-error-hint with-hint-error-error\"></textarea>\n</div>",
|
228
|
+
"hidden": true
|
184
229
|
},
|
185
230
|
{
|
186
231
|
"name": "with hint, error message and described by",
|
187
232
|
"options": {
|
233
|
+
"id": "with-hint-error-describedby",
|
234
|
+
"name": "with-hint-error-describedby",
|
235
|
+
"label": {
|
236
|
+
"text": "With hint, error and describedBy"
|
237
|
+
},
|
188
238
|
"describedBy": "some-id",
|
189
239
|
"errorMessage": {
|
190
240
|
"text": "Error message"
|
@@ -193,7 +243,8 @@
|
|
193
243
|
"text": "Hint"
|
194
244
|
}
|
195
245
|
},
|
196
|
-
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n \n \n <div id=\"
|
246
|
+
"html": "<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"with-hint-error-describedby\">\n With hint, error and describedBy\n </label>\n\n \n \n <div id=\"with-hint-error-describedby-hint\" class=\"govuk-hint\">\n Hint\n </div>\n\n\n \n \n <span id=\"with-hint-error-describedby-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Error message\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error\" id=\"with-hint-error-describedby\" name=\"with-hint-error-describedby\" rows=\"5\" aria-describedby=\"some-id with-hint-error-describedby-hint with-hint-error-describedby-error\"></textarea>\n</div>",
|
247
|
+
"hidden": true
|
197
248
|
}
|
198
249
|
]
|
199
250
|
}
|
@@ -7,7 +7,8 @@
|
|
7
7
|
"text": "You can be fined up to £5,000 if you don’t register.",
|
8
8
|
"iconFallbackText": "Warning"
|
9
9
|
},
|
10
|
-
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n You can be fined up to £5,000 if you don’t register.\n </strong>\n</div>"
|
10
|
+
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n You can be fined up to £5,000 if you don’t register.\n </strong>\n</div>",
|
11
|
+
"hidden": false
|
11
12
|
},
|
12
13
|
{
|
13
14
|
"name": "multiple lines",
|
@@ -15,17 +16,21 @@
|
|
15
16
|
"text": "If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does.",
|
16
17
|
"iconFallbackText": "Warning"
|
17
18
|
},
|
18
|
-
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does.\n </strong>\n</div>"
|
19
|
+
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n If you are not covered by this License), You must: (a) comply with the terms stated above for the purpose of this license. It explains, for example, the production of a Source form, including but not limited to, the implied warranties or conditions of this License, without any additional file created by such Respondent to you under Sections 2.1 and 2.2 above. Larger Works. You may choose to distribute such a notice and a brief idea of what it does.\n </strong>\n</div>",
|
20
|
+
"hidden": false
|
19
21
|
},
|
20
22
|
{
|
21
23
|
"name": "attributes",
|
22
24
|
"options": {
|
25
|
+
"text": "You can be fined up to £5,000 if you don’t register.",
|
26
|
+
"iconFallbackText": "Warning",
|
23
27
|
"attributes": {
|
24
28
|
"id": "my-warning-text",
|
25
29
|
"data-test": "attribute"
|
26
30
|
}
|
27
31
|
},
|
28
|
-
"html": "<div class=\"govuk-warning-text\" id=\"my-warning-text\" data-test=\"attribute\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\"
|
32
|
+
"html": "<div class=\"govuk-warning-text\" id=\"my-warning-text\" data-test=\"attribute\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n You can be fined up to £5,000 if you don’t register.\n </strong>\n</div>",
|
33
|
+
"hidden": true
|
29
34
|
},
|
30
35
|
{
|
31
36
|
"name": "classes",
|
@@ -34,35 +39,35 @@
|
|
34
39
|
"iconFallbackText": "Warning",
|
35
40
|
"classes": "govuk-warning-text--custom-class"
|
36
41
|
},
|
37
|
-
"html": "<div class=\"govuk-warning-text govuk-warning-text--custom-class\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Warning text\n </strong>\n</div>"
|
42
|
+
"html": "<div class=\"govuk-warning-text govuk-warning-text--custom-class\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n Warning text\n </strong>\n</div>",
|
43
|
+
"hidden": true
|
38
44
|
},
|
39
45
|
{
|
40
46
|
"name": "html",
|
41
47
|
"options": {
|
48
|
+
"text": "You can be fined up to £5,000 if you don’t register.",
|
49
|
+
"iconFallbackText": "Warning",
|
42
50
|
"html": "<span>Some custom warning text</span>"
|
43
51
|
},
|
44
|
-
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\"
|
52
|
+
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n <span>Some custom warning text</span>\n </strong>\n</div>",
|
53
|
+
"hidden": true
|
45
54
|
},
|
46
55
|
{
|
47
56
|
"name": "html as text",
|
48
57
|
"options": {
|
58
|
+
"iconFallbackText": "Warning",
|
49
59
|
"text": "<span>Some custom warning text</span>"
|
50
60
|
},
|
51
|
-
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\"
|
61
|
+
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Warning</span>\n <span>Some custom warning text</span>\n </strong>\n</div>",
|
62
|
+
"hidden": true
|
52
63
|
},
|
53
64
|
{
|
54
65
|
"name": "icon fallback text only",
|
55
66
|
"options": {
|
56
67
|
"iconFallbackText": "Some custom fallback text"
|
57
68
|
},
|
58
|
-
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Some custom fallback text</span>\n \n </strong>\n</div>"
|
59
|
-
|
60
|
-
{
|
61
|
-
"name": "text only",
|
62
|
-
"options": {
|
63
|
-
"text": "Some custom warning text"
|
64
|
-
},
|
65
|
-
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\"></span>\n Some custom warning text\n </strong>\n</div>"
|
69
|
+
"html": "<div class=\"govuk-warning-text\">\n <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n <strong class=\"govuk-warning-text__text\">\n <span class=\"govuk-warning-text__assistive\">Some custom fallback text</span>\n \n </strong>\n</div>",
|
70
|
+
"hidden": true
|
66
71
|
}
|
67
72
|
]
|
68
73
|
}
|
@@ -66,6 +66,100 @@
|
|
66
66
|
}
|
67
67
|
}
|
68
68
|
|
69
|
+
/// Error link style mixin
|
70
|
+
///
|
71
|
+
/// Provides the error unvisited, visited, hover and active states for links.
|
72
|
+
///
|
73
|
+
/// If you use this mixin in a component you must also include the
|
74
|
+
/// govuk-link-common mixin in order to get the focus state.
|
75
|
+
///
|
76
|
+
/// @example scss
|
77
|
+
/// .govuk-component__link {
|
78
|
+
/// @include govuk-link-common;
|
79
|
+
/// @include govuk-link-style-error;
|
80
|
+
/// }
|
81
|
+
///
|
82
|
+
/// @access public
|
83
|
+
|
84
|
+
@mixin govuk-link-style-error {
|
85
|
+
&:link,
|
86
|
+
&:visited {
|
87
|
+
color: $govuk-error-colour;
|
88
|
+
}
|
89
|
+
|
90
|
+
&:hover {
|
91
|
+
color: scale-color($govuk-error-colour, $lightness: -30%);
|
92
|
+
}
|
93
|
+
|
94
|
+
&:active {
|
95
|
+
color: $govuk-error-colour;
|
96
|
+
}
|
97
|
+
|
98
|
+
// When focussed, the text colour needs to be darker to ensure that colour
|
99
|
+
// contrast is still acceptable
|
100
|
+
&:focus {
|
101
|
+
color: $govuk-focus-text-colour;
|
102
|
+
}
|
103
|
+
|
104
|
+
// alphagov/govuk_template includes a specific a:link:focus selector
|
105
|
+
// designed to make unvisited link s a slightly darker blue when focussed, so
|
106
|
+
// we need to override the text colour for that combination of selectors so
|
107
|
+
// so that unvisited links styled as buttons do not end up with dark blue
|
108
|
+
// text when focussed.
|
109
|
+
@include govuk-compatibility(govuk_template) {
|
110
|
+
&:link:focus {
|
111
|
+
color: $govuk-focus-text-colour;
|
112
|
+
}
|
113
|
+
}
|
114
|
+
}
|
115
|
+
|
116
|
+
/// Success link style mixin
|
117
|
+
///
|
118
|
+
/// Provides the success unvisited, visited, hover and active states for links.
|
119
|
+
///
|
120
|
+
/// If you use this mixin in a component you must also include the
|
121
|
+
/// govuk-link-common mixin in order to get the focus state.
|
122
|
+
///
|
123
|
+
/// @example scss
|
124
|
+
/// .govuk-component__link {
|
125
|
+
/// @include govuk-link-common;
|
126
|
+
/// @include govuk-link-style-success;
|
127
|
+
/// }
|
128
|
+
///
|
129
|
+
/// @access public
|
130
|
+
|
131
|
+
@mixin govuk-link-style-success {
|
132
|
+
&:link,
|
133
|
+
&:visited {
|
134
|
+
color: $govuk-success-colour;
|
135
|
+
}
|
136
|
+
|
137
|
+
&:hover {
|
138
|
+
color: scale-color($govuk-success-colour, $lightness: -30%);
|
139
|
+
}
|
140
|
+
|
141
|
+
&:active {
|
142
|
+
color: $govuk-success-colour;
|
143
|
+
}
|
144
|
+
|
145
|
+
// When focussed, the text colour needs to be darker to ensure that colour
|
146
|
+
// contrast is still acceptable
|
147
|
+
&:focus {
|
148
|
+
color: $govuk-focus-text-colour;
|
149
|
+
}
|
150
|
+
|
151
|
+
// alphagov/govuk_template includes a specific a:link:focus selector
|
152
|
+
// designed to make unvisited link s a slightly darker blue when focussed, so
|
153
|
+
// we need to override the text colour for that combination of selectors so
|
154
|
+
// so that unvisited links styled as buttons do not end up with dark blue
|
155
|
+
// text when focussed.
|
156
|
+
@include govuk-compatibility(govuk_template) {
|
157
|
+
&:link:focus {
|
158
|
+
color: $govuk-focus-text-colour;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
|
69
163
|
/// Muted style link mixin
|
70
164
|
///
|
71
165
|
/// Used for secondary links on a page - the link will appear in muted colours
|