govuk_publishing_components 23.1.0 → 23.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (102) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/init.js +56 -0
  3. data/app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js +16 -14
  4. data/app/assets/javascripts/govuk_publishing_components/components/details.js +38 -34
  5. data/app/assets/javascripts/govuk_publishing_components/components/print-link.js +8 -7
  6. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js +9 -8
  7. data/app/assets/javascripts/govuk_publishing_components/lib/initial-focus.js +13 -0
  8. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +1 -0
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_input.scss +0 -46
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss +5 -0
  11. data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +4 -0
  12. data/app/views/govuk_publishing_components/components/_input.html.erb +6 -6
  13. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +14 -0
  14. data/lib/govuk_publishing_components/version.rb +1 -1
  15. data/node_modules/govuk-frontend/govuk/all.js +31 -37
  16. data/node_modules/govuk-frontend/govuk/components/accordion/README.md +1 -1
  17. data/node_modules/govuk-frontend/govuk/components/accordion/_index.scss +0 -1
  18. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +235 -0
  19. data/node_modules/govuk-frontend/govuk/components/back-link/_index.scss +0 -2
  20. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +56 -0
  21. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss +0 -1
  22. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +172 -0
  23. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +3 -3
  24. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +275 -0
  25. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +170 -0
  26. data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +13 -13
  27. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +1015 -0
  28. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +499 -0
  29. data/node_modules/govuk-frontend/govuk/components/details/_index.scss +0 -1
  30. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +83 -0
  31. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +66 -0
  32. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +0 -2
  33. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +181 -0
  34. data/node_modules/govuk-frontend/govuk/components/fieldset/_index.scss +1 -1
  35. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +93 -0
  36. data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +6 -0
  37. data/node_modules/govuk-frontend/govuk/components/fieldset/template.njk +5 -1
  38. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +151 -0
  39. data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +0 -1
  40. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +482 -0
  41. data/node_modules/govuk-frontend/govuk/components/header/_index.scss +2 -5
  42. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +360 -0
  43. data/node_modules/govuk-frontend/govuk/components/header/header.js +665 -316
  44. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +13 -1
  45. data/node_modules/govuk-frontend/govuk/components/header/template.njk +9 -5
  46. data/node_modules/govuk-frontend/govuk/components/hint/_index.scss +0 -2
  47. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +50 -0
  48. data/node_modules/govuk-frontend/govuk/components/hint/macro-options.json +1 -1
  49. data/node_modules/govuk-frontend/govuk/components/input/_index.scss +91 -0
  50. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +538 -0
  51. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +64 -0
  52. data/node_modules/govuk-frontend/govuk/components/input/template.njk +17 -0
  53. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +49 -0
  54. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +75 -0
  55. data/node_modules/govuk-frontend/govuk/components/panel/_index.scss +6 -2
  56. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +74 -0
  57. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +65 -0
  58. data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +13 -13
  59. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +1066 -0
  60. data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +2 -2
  61. data/node_modules/govuk-frontend/govuk/components/select/_index.scss +0 -1
  62. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +248 -0
  63. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +72 -0
  64. data/node_modules/govuk-frontend/govuk/components/summary-list/README.md +1 -1
  65. data/node_modules/govuk-frontend/govuk/components/summary-list/_index.scss +2 -10
  66. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +991 -0
  67. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +468 -0
  68. data/node_modules/govuk-frontend/govuk/components/tabs/_index.scss +3 -6
  69. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +229 -0
  70. data/node_modules/govuk-frontend/govuk/components/tag/_index.scss +0 -1
  71. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +117 -0
  72. data/node_modules/govuk-frontend/govuk/components/textarea/_index.scss +0 -1
  73. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +199 -0
  74. data/node_modules/govuk-frontend/govuk/components/warning-text/_index.scss +0 -1
  75. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +68 -0
  76. data/node_modules/govuk-frontend/govuk/helpers/_device-pixels.scss +3 -3
  77. data/node_modules/govuk-frontend/govuk/helpers/_font-faces.scss +9 -11
  78. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +1 -3
  79. data/node_modules/govuk-frontend/govuk/helpers/_media-queries.scss +1 -5
  80. data/node_modules/govuk-frontend/govuk/helpers/_spacing.scss +2 -1
  81. data/node_modules/govuk-frontend/govuk/helpers/_typography.scss +7 -6
  82. data/node_modules/govuk-frontend/govuk/objects/_form-group.scss +0 -1
  83. data/node_modules/govuk-frontend/govuk/objects/_grid.scss +2 -3
  84. data/node_modules/govuk-frontend/govuk/objects/_main-wrapper.scss +0 -1
  85. data/node_modules/govuk-frontend/govuk/overrides/_display.scss +1 -1
  86. data/node_modules/govuk-frontend/govuk/overrides/_width.scss +1 -0
  87. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +0 -3
  88. data/node_modules/govuk-frontend/govuk/settings/_colours-organisations.scss +3 -0
  89. data/node_modules/govuk-frontend/govuk/settings/_colours-palette.scss +9 -2
  90. data/node_modules/govuk-frontend/govuk/settings/_compatibility.scss +0 -1
  91. data/node_modules/govuk-frontend/govuk/settings/_measurements.scss +0 -4
  92. data/node_modules/govuk-frontend/govuk/settings/_typography-font-families.scss +2 -2
  93. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +11 -5
  94. data/node_modules/govuk-frontend/govuk/settings/_typography-responsive.scss +6 -2
  95. data/node_modules/govuk-frontend/govuk/tools/_font-url.scss +0 -3
  96. data/node_modules/govuk-frontend/govuk/tools/_image-url.scss +0 -3
  97. data/node_modules/govuk-frontend/govuk/utilities/_visually-hidden.scss +0 -1
  98. data/node_modules/govuk-frontend/govuk/vendor/_sass-mq.scss +0 -4
  99. data/node_modules/govuk-frontend/package.json +1 -1
  100. metadata +33 -4
  101. data/app/assets/javascripts/govuk_publishing_components/analytics/init.js.erb +0 -50
  102. data/app/assets/javascripts/govuk_publishing_components/components/initial-focus.js +0 -12
@@ -1,5 +1,5 @@
1
1
  @include govuk-exports("govuk/component/button") {
2
- $govuk-button-colour: govuk-colour("green", $legacy: #00823b); // sass-lint:disable no-color-literals
2
+ $govuk-button-colour: govuk-colour("green", $legacy: #00823b);
3
3
  $govuk-button-hover-colour: govuk-shade($govuk-button-colour, 20%);
4
4
  $govuk-button-shadow-colour: govuk-shade($govuk-button-colour, 60%);
5
5
  $govuk-button-text-colour: govuk-colour("white");
@@ -117,7 +117,7 @@
117
117
 
118
118
  // Use a pseudo element to expand the click target area to include the
119
119
  // button's shadow as well, in case users try to click it.
120
- &::before {
120
+ &:before {
121
121
  content: "";
122
122
  display: block;
123
123
 
@@ -141,7 +141,7 @@
141
141
  // the click event is still fired.
142
142
  //
143
143
  // 🎉
144
- &:active::before {
144
+ &:active:before {
145
145
  top: -($govuk-border-width-form-element + $button-shadow-size);
146
146
  }
147
147
  }
@@ -0,0 +1,275 @@
1
+ {
2
+ "component": "button",
3
+ "fixtures": [
4
+ {
5
+ "name": "default",
6
+ "options": {
7
+ "text": "Save and continue"
8
+ },
9
+ "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n Save and continue\n</button>"
10
+ },
11
+ {
12
+ "name": "disabled",
13
+ "options": {
14
+ "text": "Disabled button",
15
+ "disabled": true
16
+ },
17
+ "html": "<button disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n Disabled button\n</button>"
18
+ },
19
+ {
20
+ "name": "link",
21
+ "options": {
22
+ "text": "Link button",
23
+ "href": "/"
24
+ },
25
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n Link button\n</a>"
26
+ },
27
+ {
28
+ "name": "link disabled",
29
+ "options": {
30
+ "text": "Disabled link button",
31
+ "href": "/",
32
+ "disabled": true
33
+ },
34
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n Disabled link button\n</a>"
35
+ },
36
+ {
37
+ "name": "start link",
38
+ "options": {
39
+ "text": "Start now link button",
40
+ "href": "/",
41
+ "isStartButton": true
42
+ },
43
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n Start now link button\n <svg class=\"govuk-button__start-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"17.5\" height=\"19\" viewBox=\"0 0 33 40\" aria-hidden=\"true\" focusable=\"false\">\n <path fill=\"currentColor\" d=\"M0 0h13l20 20-20 20H0l20-20z\"/>\n </svg></a>"
44
+ },
45
+ {
46
+ "name": "input",
47
+ "options": {
48
+ "element": "input",
49
+ "name": "start-now",
50
+ "text": "Start now"
51
+ },
52
+ "html": "<input value=\"Start now\" type=\"submit\" name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">"
53
+ },
54
+ {
55
+ "name": "input disabled",
56
+ "options": {
57
+ "element": "input",
58
+ "text": "Explicit input button disabled",
59
+ "disabled": true
60
+ },
61
+ "html": "<input value=\"Explicit input button disabled\" type=\"submit\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">"
62
+ },
63
+ {
64
+ "name": "prevent double click",
65
+ "options": {
66
+ "text": "Submit",
67
+ "preventDoubleClick": true
68
+ },
69
+ "html": "<button data-prevent-double-click=\"true\" class=\"govuk-button\" data-module=\"govuk-button\">\n Submit\n</button>"
70
+ },
71
+ {
72
+ "name": "with active state",
73
+ "options": {
74
+ "name": "active",
75
+ "text": "Active",
76
+ "classes": ":active"
77
+ },
78
+ "html": "<button name=\"active\" class=\"govuk-button :active\" data-module=\"govuk-button\">\n Active\n</button>"
79
+ },
80
+ {
81
+ "name": "with hover state",
82
+ "options": {
83
+ "name": "hover",
84
+ "text": "Hovered",
85
+ "classes": ":hover"
86
+ },
87
+ "html": "<button name=\"hover\" class=\"govuk-button :hover\" data-module=\"govuk-button\">\n Hovered\n</button>"
88
+ },
89
+ {
90
+ "name": "with focus state",
91
+ "options": {
92
+ "name": "focus",
93
+ "text": "Focussed",
94
+ "classes": ":focus"
95
+ },
96
+ "html": "<button name=\"focus\" class=\"govuk-button :focus\" data-module=\"govuk-button\">\n Focussed\n</button>"
97
+ },
98
+ {
99
+ "name": "Secondary",
100
+ "options": {
101
+ "name": "secondary",
102
+ "text": "Secondary button",
103
+ "classes": "govuk-button--secondary"
104
+ },
105
+ "html": "<button name=\"secondary\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Secondary button\n</button>"
106
+ },
107
+ {
108
+ "name": "Secondary disabled",
109
+ "options": {
110
+ "name": "secondary",
111
+ "text": "Secondary button disabled",
112
+ "classes": "govuk-button--secondary",
113
+ "disabled": true
114
+ },
115
+ "html": "<button name=\"secondary\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--secondary govuk-button--disabled\" data-module=\"govuk-button\">\n Secondary button disabled\n</button>"
116
+ },
117
+ {
118
+ "name": "Secondary link",
119
+ "options": {
120
+ "name": "secondary",
121
+ "text": "Secondary button",
122
+ "href": "/",
123
+ "classes": "govuk-button--secondary"
124
+ },
125
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\">\n Secondary button\n</a>"
126
+ },
127
+ {
128
+ "name": "Warning",
129
+ "options": {
130
+ "name": "Warning",
131
+ "text": "Warning button",
132
+ "classes": "govuk-button--warning"
133
+ },
134
+ "html": "<button name=\"Warning\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n Warning button\n</button>"
135
+ },
136
+ {
137
+ "name": "Warning disabled",
138
+ "options": {
139
+ "name": "warning",
140
+ "text": "Warning button disabled",
141
+ "classes": "govuk-button--warning",
142
+ "disabled": true
143
+ },
144
+ "html": "<button name=\"warning\" disabled=\"disabled\" aria-disabled=\"true\" class=\"govuk-button govuk-button--warning govuk-button--disabled\" data-module=\"govuk-button\">\n Warning button disabled\n</button>"
145
+ },
146
+ {
147
+ "name": "Warning link",
148
+ "options": {
149
+ "name": "Warning",
150
+ "text": "Warning button",
151
+ "href": "/",
152
+ "classes": "govuk-button--warning"
153
+ },
154
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--warning\" data-module=\"govuk-button\">\n Warning button\n</a>"
155
+ },
156
+ {
157
+ "name": "attributes",
158
+ "options": {
159
+ "element": "button",
160
+ "attributes": {
161
+ "aria-controls": "example-id",
162
+ "data-tracking-dimension": 123
163
+ }
164
+ },
165
+ "html": "<button class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n \n</button>"
166
+ },
167
+ {
168
+ "name": "link attributes",
169
+ "options": {
170
+ "element": "a",
171
+ "attributes": {
172
+ "aria-controls": "example-id",
173
+ "data-tracking-dimension": 123
174
+ }
175
+ },
176
+ "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">\n \n</a>"
177
+ },
178
+ {
179
+ "name": "input attributes",
180
+ "options": {
181
+ "element": "input",
182
+ "attributes": {
183
+ "aria-controls": "example-id",
184
+ "data-tracking-dimension": 123
185
+ }
186
+ },
187
+ "html": "<input value=\"\" type=\"submit\" class=\"govuk-button\" data-module=\"govuk-button\" aria-controls=\"example-id\" data-tracking-dimension=\"123\">"
188
+ },
189
+ {
190
+ "name": "classes",
191
+ "options": {
192
+ "element": "button",
193
+ "classes": "app-button--custom-modifier"
194
+ },
195
+ "html": "<button class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n \n</button>"
196
+ },
197
+ {
198
+ "name": "link classes",
199
+ "options": {
200
+ "element": "a",
201
+ "classes": "app-button--custom-modifier"
202
+ },
203
+ "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">\n \n</a>"
204
+ },
205
+ {
206
+ "name": "input classes",
207
+ "options": {
208
+ "element": "input",
209
+ "classes": "app-button--custom-modifier"
210
+ },
211
+ "html": "<input value=\"\" type=\"submit\" class=\"govuk-button app-button--custom-modifier\" data-module=\"govuk-button\">"
212
+ },
213
+ {
214
+ "name": "name",
215
+ "options": {
216
+ "element": "button",
217
+ "name": "start-now"
218
+ },
219
+ "html": "<button name=\"start-now\" class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>"
220
+ },
221
+ {
222
+ "name": "type",
223
+ "options": {
224
+ "element": "button",
225
+ "type": "button"
226
+ },
227
+ "html": "<button type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>"
228
+ },
229
+ {
230
+ "name": "input type",
231
+ "options": {
232
+ "element": "input",
233
+ "type": "button"
234
+ },
235
+ "html": "<input value=\"\" type=\"button\" class=\"govuk-button\" data-module=\"govuk-button\">"
236
+ },
237
+ {
238
+ "name": "explicit link",
239
+ "options": {
240
+ "element": "a",
241
+ "href": "/",
242
+ "text": "Continue"
243
+ },
244
+ "html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n Continue\n</a>"
245
+ },
246
+ {
247
+ "name": "no href",
248
+ "options": {
249
+ "element": "a"
250
+ },
251
+ "html": "<a href=\"#\" role=\"button\" draggable=\"false\" class=\"govuk-button\" data-module=\"govuk-button\">\n \n</a>"
252
+ },
253
+ {
254
+ "name": "value",
255
+ "options": {
256
+ "element": "button",
257
+ "value": "start"
258
+ },
259
+ "html": "<button value=\"start\" class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>"
260
+ },
261
+ {
262
+ "name": "html",
263
+ "options": {
264
+ "element": "button",
265
+ "html": "Start <em>now</em>"
266
+ },
267
+ "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n Start <em>now</em>\n</button>"
268
+ },
269
+ {
270
+ "name": "no data",
271
+ "options": {},
272
+ "html": "<button class=\"govuk-button\" data-module=\"govuk-button\">\n \n</button>"
273
+ }
274
+ ]
275
+ }
@@ -0,0 +1,170 @@
1
+ {
2
+ "component": "character-count",
3
+ "fixtures": [
4
+ {
5
+ "name": "default",
6
+ "options": {
7
+ "name": "more-detail",
8
+ "id": "more-detail",
9
+ "maxlength": 10,
10
+ "label": {
11
+ "text": "Can you provide more detail?"
12
+ }
13
+ },
14
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<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 govuk-js-character-count\" id=\"more-detail\" name=\"more-detail\" rows=\"5\" aria-describedby=\"more-detail-info\"></textarea>\n</div>\n\n <div id=\"more-detail-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
15
+ },
16
+ {
17
+ "name": "with hint",
18
+ "options": {
19
+ "name": "with-hint",
20
+ "id": "with-hint",
21
+ "maxlength": 10,
22
+ "label": {
23
+ "text": "Can you provide more detail?"
24
+ },
25
+ "hint": {
26
+ "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
27
+ }
28
+ },
29
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-hint\">\n Can you provide more detail?\n </label>\n\n \n \n <div id=\"with-hint-hint\" class=\"govuk-hint\">\n Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.\n </div>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-hint\" name=\"with-hint\" rows=\"5\" aria-describedby=\"with-hint-info with-hint-hint\"></textarea>\n</div>\n\n <div id=\"with-hint-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
30
+ },
31
+ {
32
+ "name": "with default value",
33
+ "options": {
34
+ "id": "with-default-value",
35
+ "name": "default-value",
36
+ "maxlength": 100,
37
+ "label": {
38
+ "text": "Full address"
39
+ },
40
+ "value": "221B Baker Street\nLondon\nNW1 6XE\n"
41
+ },
42
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"100\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-default-value\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-default-value\" name=\"default-value\" rows=\"5\" aria-describedby=\"with-default-value-info\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"with-default-value-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 100 characters\n</div>\n\n</div>"
43
+ },
44
+ {
45
+ "name": "with default value exceeding limit",
46
+ "options": {
47
+ "id": "exceeding-characters",
48
+ "name": "exceeding",
49
+ "maxlength": 10,
50
+ "value": "221B Baker Street\nLondon\nNW1 6XE\n",
51
+ "label": {
52
+ "text": "Full address"
53
+ },
54
+ "errorMessage": {
55
+ "text": "Please do not exceed the maximum allowed limit"
56
+ }
57
+ },
58
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n <label class=\"govuk-label\" for=\"exceeding-characters\">\n Full address\n </label>\n\n\n \n \n <span id=\"exceeding-characters-error\" class=\"govuk-error-message\">\n <span class=\"govuk-visually-hidden\">Error:</span> Please do not exceed the maximum allowed limit\n </span>\n\n <textarea class=\"govuk-textarea govuk-textarea--error govuk-js-character-count govuk-textarea--error\" id=\"exceeding-characters\" name=\"exceeding\" rows=\"5\" aria-describedby=\"exceeding-characters-info exceeding-characters-error\">221B Baker Street\nLondon\nNW1 6XE\n</textarea>\n</div>\n\n <div id=\"exceeding-characters-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
59
+ },
60
+ {
61
+ "name": "with custom rows",
62
+ "options": {
63
+ "id": "custom-rows",
64
+ "name": "custom",
65
+ "maxlength": 10,
66
+ "label": {
67
+ "text": "Full address"
68
+ },
69
+ "rows": 8
70
+ },
71
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"custom-rows\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"custom-rows\" name=\"custom\" rows=\"8\" aria-describedby=\"custom-rows-info\"></textarea>\n</div>\n\n <div id=\"custom-rows-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
72
+ },
73
+ {
74
+ "name": "with label as page heading",
75
+ "options": {
76
+ "id": "textarea-with-page-heading",
77
+ "name": "address",
78
+ "maxlength": 10,
79
+ "label": {
80
+ "text": "Full address",
81
+ "isPageHeading": true
82
+ }
83
+ },
84
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n \n\n<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 govuk-js-character-count\" id=\"textarea-with-page-heading\" name=\"address\" rows=\"5\" aria-describedby=\"textarea-with-page-heading-info\"></textarea>\n</div>\n\n <div id=\"textarea-with-page-heading-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
85
+ },
86
+ {
87
+ "name": "with word count",
88
+ "options": {
89
+ "id": "word-count",
90
+ "name": "word-count",
91
+ "maxwords": 10,
92
+ "label": {
93
+ "text": "Full address"
94
+ }
95
+ },
96
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxwords=\"10\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"word-count\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"word-count\" name=\"word-count\" rows=\"5\" aria-describedby=\"word-count-info\"></textarea>\n</div>\n\n <div id=\"word-count-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 words\n</div>\n\n</div>"
97
+ },
98
+ {
99
+ "name": "with threshold",
100
+ "options": {
101
+ "id": "with-threshold",
102
+ "name": "with-threshold",
103
+ "maxlength": 10,
104
+ "threshold": 75,
105
+ "label": {
106
+ "text": "Full address"
107
+ }
108
+ },
109
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\" data-threshold=\"75\">\n \n\n<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-threshold\">\n Full address\n </label>\n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"with-threshold\" name=\"with-threshold\" rows=\"5\" aria-describedby=\"with-threshold-info\"></textarea>\n</div>\n\n <div id=\"with-threshold-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to 10 characters\n</div>\n\n</div>"
110
+ },
111
+ {
112
+ "name": "classes",
113
+ "options": {
114
+ "classes": "app-character-count--custom-modifier"
115
+ },
116
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to undefined characters\n</div>\n\n</div>"
117
+ },
118
+ {
119
+ "name": "attributes",
120
+ "options": {
121
+ "attributes": {
122
+ "data-attribute": "my data value"
123
+ }
124
+ },
125
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info\" data-attribute=\"my data value\"></textarea>\n</div>\n\n <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to undefined characters\n</div>\n\n</div>"
126
+ },
127
+ {
128
+ "name": "formGroup with classes",
129
+ "options": {
130
+ "formGroup": {
131
+ "classes": "app-character-count--custom-modifier"
132
+ }
133
+ },
134
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group app-character-count--custom-modifier\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to undefined characters\n</div>\n\n</div>"
135
+ },
136
+ {
137
+ "name": "custom classes on countMessage",
138
+ "options": {
139
+ "countMessage": {
140
+ "classes": "app-custom-count-message"
141
+ }
142
+ },
143
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message app-custom-count-message\" aria-live=\"polite\">\n You can enter up to undefined characters\n</div>\n\n</div>"
144
+ },
145
+ {
146
+ "name": "spellcheck enabled",
147
+ "options": {
148
+ "spellcheck": true
149
+ },
150
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" spellcheck=\"true\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to undefined characters\n</div>\n\n</div>"
151
+ },
152
+ {
153
+ "name": "spellcheck disabled",
154
+ "options": {
155
+ "spellcheck": false
156
+ },
157
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group\">\n \n\n\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"\" name=\"\" rows=\"5\" spellcheck=\"false\" aria-describedby=\"undefined-info\"></textarea>\n</div>\n\n <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to undefined characters\n</div>\n\n</div>"
158
+ },
159
+ {
160
+ "name": "custom classes with error message",
161
+ "options": {
162
+ "classes": "app-character-count--custom-modifier",
163
+ "errorMessage": {
164
+ "text": "Error message"
165
+ }
166
+ },
167
+ "html": "<div class=\"govuk-character-count\" data-module=\"govuk-character-count\">\n \n\n<div class=\"govuk-form-group govuk-form-group--error\">\n \n\n\n \n \n <span id=\"undefined-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 govuk-js-character-count govuk-textarea--error app-character-count--custom-modifier\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-info undefined-error\"></textarea>\n</div>\n\n <div id=\"undefined-info\" class=\"govuk-hint govuk-character-count__message\" aria-live=\"polite\">\n You can enter up to undefined characters\n</div>\n\n</div>"
168
+ }
169
+ ]
170
+ }