govuk_publishing_components 23.12.3 → 24.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (123) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/images/govuk_publishing_components/take-action-amber.svg +4 -0
  3. data/app/assets/images/govuk_publishing_components/take-action-green.svg +4 -0
  4. data/app/assets/images/govuk_publishing_components/take-action-red.svg +4 -0
  5. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +0 -4
  6. data/app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js +44 -39
  7. data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
  8. data/app/assets/stylesheets/govuk_publishing_components/component_support.scss +0 -2
  9. data/app/assets/stylesheets/govuk_publishing_components/components/_contextual-sidebar.scss +34 -17
  10. data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss +14 -8
  11. data/app/assets/stylesheets/govuk_publishing_components/components/_error-alert.scss +4 -4
  12. data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +35 -44
  13. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +112 -47
  14. data/app/assets/stylesheets/govuk_publishing_components/components/_success-alert.scss +8 -8
  15. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_contact.scss +0 -5
  16. data/app/assets/stylesheets/govuk_publishing_components/components/print/_step-by-step-nav.scss +2 -2
  17. data/app/models/govuk_publishing_components/component_doc.rb +1 -1
  18. data/app/views/govuk_publishing_components/components/_contextual_sidebar.html.erb +2 -8
  19. data/app/views/govuk_publishing_components/components/_document_list.html.erb +12 -2
  20. data/app/views/govuk_publishing_components/components/_layout_footer.html.erb +9 -4
  21. data/app/views/govuk_publishing_components/components/_step_by_step_nav.html.erb +2 -2
  22. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_cta.html.erb +21 -0
  23. data/app/views/govuk_publishing_components/components/docs/contextual_sidebar.yml +65 -1
  24. data/app/views/govuk_publishing_components/components/docs/document_list.yml +50 -7
  25. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +3 -3
  26. data/app/views/govuk_publishing_components/components/docs/layout_header.yml +11 -0
  27. data/app/views/govuk_publishing_components/components/docs/meta_tags.yml +99 -1
  28. data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +9 -4
  29. data/config/initializers/assets.rb +3 -1
  30. data/config/locales/cy.yml +6 -1
  31. data/config/locales/en.yml +8 -3
  32. data/lib/govuk_publishing_components/presenters/contextual_navigation.rb +183 -2
  33. data/lib/govuk_publishing_components/presenters/meta_tags.rb +2 -0
  34. data/lib/govuk_publishing_components/version.rb +1 -1
  35. data/node_modules/govuk-frontend/govuk/all.js +58 -1
  36. data/node_modules/govuk-frontend/govuk/components/_all.scss +2 -0
  37. data/node_modules/govuk-frontend/govuk/components/accordion/fixtures.json +25 -10
  38. data/node_modules/govuk-frontend/govuk/components/back-link/fixtures.json +12 -6
  39. data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +4 -4
  40. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/fixtures.json +34 -13
  41. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json +1 -0
  42. data/node_modules/govuk-frontend/govuk/components/breadcrumbs/template.njk +2 -2
  43. data/node_modules/govuk-frontend/govuk/components/button/_index.scss +2 -0
  44. data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +74 -31
  45. data/node_modules/govuk-frontend/govuk/components/character-count/_index.scss +1 -0
  46. data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js +1 -1
  47. data/node_modules/govuk-frontend/govuk/components/character-count/fixtures.json +85 -15
  48. data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +1 -1
  49. data/node_modules/govuk-frontend/govuk/components/checkboxes/fixtures.json +145 -52
  50. data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +2 -2
  51. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_cookie-banner.scss +2 -0
  52. data/node_modules/govuk-frontend/govuk/components/cookie-banner/_index.scss +51 -0
  53. data/node_modules/govuk-frontend/govuk/components/cookie-banner/fixtures.json +425 -0
  54. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +132 -0
  55. data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro.njk +3 -0
  56. data/node_modules/govuk-frontend/govuk/components/cookie-banner/template.njk +63 -0
  57. data/node_modules/govuk-frontend/govuk/components/date-input/fixtures.json +84 -34
  58. data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +1 -1
  59. data/node_modules/govuk-frontend/govuk/components/date-input/template.njk +1 -1
  60. data/node_modules/govuk-frontend/govuk/components/details/fixtures.json +35 -15
  61. data/node_modules/govuk-frontend/govuk/components/error-message/fixtures.json +21 -10
  62. data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +1 -0
  63. data/node_modules/govuk-frontend/govuk/components/error-summary/_index.scss +2 -12
  64. data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json +86 -25
  65. data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json +20 -10
  66. data/node_modules/govuk-frontend/govuk/components/file-upload/fixtures.json +60 -13
  67. data/node_modules/govuk-frontend/govuk/components/footer/fixtures.json +37 -18
  68. data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +8 -5
  69. data/node_modules/govuk-frontend/govuk/components/header/fixtures.json +36 -18
  70. data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +2 -2
  71. data/node_modules/govuk-frontend/govuk/components/header/template.njk +4 -4
  72. data/node_modules/govuk-frontend/govuk/components/hint/fixtures.json +17 -8
  73. data/node_modules/govuk-frontend/govuk/components/input/fixtures.json +130 -40
  74. data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +1 -1
  75. data/node_modules/govuk-frontend/govuk/components/inset-text/fixtures.json +17 -8
  76. data/node_modules/govuk-frontend/govuk/components/label/fixtures.json +20 -11
  77. data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
  78. data/node_modules/govuk-frontend/govuk/components/notification-banner/README.md +15 -0
  79. data/node_modules/govuk-frontend/govuk/components/notification-banner/_index.scss +89 -0
  80. data/node_modules/govuk-frontend/govuk/components/notification-banner/_notification-banner.scss +2 -0
  81. data/node_modules/govuk-frontend/govuk/components/notification-banner/fixtures.json +212 -0
  82. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro-options.json +68 -0
  83. data/node_modules/govuk-frontend/govuk/components/notification-banner/macro.njk +3 -0
  84. data/node_modules/govuk-frontend/govuk/components/notification-banner/notification-banner.js +61 -0
  85. data/node_modules/govuk-frontend/govuk/components/notification-banner/template.njk +47 -0
  86. data/node_modules/govuk-frontend/govuk/components/panel/fixtures.json +30 -13
  87. data/node_modules/govuk-frontend/govuk/components/phase-banner/fixtures.json +20 -9
  88. data/node_modules/govuk-frontend/govuk/components/radios/fixtures.json +167 -50
  89. data/node_modules/govuk-frontend/govuk/components/select/fixtures.json +97 -18
  90. data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +1 -1
  91. data/node_modules/govuk-frontend/govuk/components/skip-link/fixtures.json +21 -9
  92. data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +118 -25
  93. data/node_modules/govuk-frontend/govuk/components/table/_index.scss +21 -0
  94. data/node_modules/govuk-frontend/govuk/components/table/fixtures.json +92 -22
  95. data/node_modules/govuk-frontend/govuk/components/table/macro-options.json +2 -2
  96. data/node_modules/govuk-frontend/govuk/components/tabs/fixtures.json +75 -18
  97. data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +1 -1
  98. data/node_modules/govuk-frontend/govuk/components/tag/fixtures.json +28 -14
  99. data/node_modules/govuk-frontend/govuk/components/textarea/fixtures.json +68 -17
  100. data/node_modules/govuk-frontend/govuk/components/warning-text/fixtures.json +19 -14
  101. data/node_modules/govuk-frontend/govuk/helpers/_links.scss +94 -0
  102. data/node_modules/govuk-frontend/govuk/objects/_all.scss +1 -0
  103. data/node_modules/govuk-frontend/govuk/objects/_button-group.scss +94 -0
  104. data/node_modules/govuk-frontend/govuk/settings/_colours-applied.scss +9 -0
  105. data/node_modules/govuk-frontend/govuk/settings/_typography-font.scss +3 -0
  106. data/node_modules/govuk-frontend/package.json +1 -1
  107. metadata +20 -18
  108. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small-focus.svg +0 -4
  109. data/app/assets/images/govuk_publishing_components/chevron-banner/chevron-banner-small.svg +0 -4
  110. data/app/assets/javascripts/govuk_publishing_components/components/header.js +0 -8
  111. data/app/assets/javascripts/govuk_publishing_components/lib/auto-track-event.js +0 -31
  112. data/app/assets/stylesheets/govuk_publishing_components/components/_chevron-banner.scss +0 -138
  113. data/app/assets/stylesheets/govuk_publishing_components/components/_list.scss +0 -1
  114. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_variables.scss +0 -27
  115. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_back-arrow.scss +0 -13
  116. data/app/assets/stylesheets/govuk_publishing_components/components/mixins/_clearfix.scss +0 -8
  117. data/app/views/govuk_publishing_components/components/_chevron_banner.html.erb +0 -19
  118. data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +0 -85
  119. data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +0 -33
  120. data/app/views/govuk_publishing_components/components/contextual_sidebar/_brexit_related_links.html.erb +0 -6
  121. data/app/views/govuk_publishing_components/components/docs/chevron_banner.yml +0 -33
  122. data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +0 -103
  123. data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +0 -139
@@ -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 will be applied."
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 &lt;span&gt;alpha&lt;/span&gt;\n</strong>"
119
+ "html": "<strong class=\"govuk-tag\">\n &lt;span&gt;alpha&lt;/span&gt;\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&#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\" 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&#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\" 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=\"undefined-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=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id undefined-hint\"></textarea>\n</div>"
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=\"undefined-hint\" class=\"govuk-hint\">\n Hint\n </div>\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\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"undefined-hint undefined-error\"></textarea>\n</div>"
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=\"undefined-hint\" class=\"govuk-hint\">\n Hint\n </div>\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\" id=\"\" name=\"\" rows=\"5\" aria-describedby=\"some-id undefined-hint undefined-error\"></textarea>\n</div>"
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\"></span>\n \n </strong>\n</div>"
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\"></span>\n <span>Some custom warning text</span>\n </strong>\n</div>"
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\"></span>\n &lt;span&gt;Some custom warning text&lt;/span&gt;\n </strong>\n</div>"
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 &lt;span&gt;Some custom warning text&lt;/span&gt;\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