govuk_publishing_components 27.10.5 → 27.11.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +136 -55
- data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss +30 -0
- data/app/models/govuk_publishing_components/shared_accessibility_criteria.rb +17 -0
- data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +29 -41
- data/app/views/govuk_publishing_components/components/_single_page_notification_button.html.erb +23 -0
- data/app/views/govuk_publishing_components/components/docs/single_page_notification_button.yml +32 -0
- data/app/views/govuk_publishing_components/components/search/_search_icon.html.erb +5 -5
- data/config/locales/en.yml +7 -3
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/govuk-frontend/govuk/components/accordion/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json +3 -3
- data/node_modules/govuk-frontend/govuk/components/button/_index.scss +3 -4
- data/node_modules/govuk-frontend/govuk/components/button/fixtures.json +9 -0
- data/node_modules/govuk-frontend/govuk/components/character-count/macro-options.json +6 -6
- data/node_modules/govuk-frontend/govuk/components/checkboxes/_index.scss +14 -0
- data/node_modules/govuk-frontend/govuk/components/checkboxes/macro-options.json +8 -8
- data/node_modules/govuk-frontend/govuk/components/cookie-banner/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/date-input/macro-options.json +5 -5
- data/node_modules/govuk-frontend/govuk/components/details/_index.scss +2 -1
- data/node_modules/govuk-frontend/govuk/components/details/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/error-message/macro-options.json +3 -3
- data/node_modules/govuk-frontend/govuk/components/fieldset/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/file-upload/_index.scss +1 -0
- data/node_modules/govuk-frontend/govuk/components/file-upload/macro-options.json +4 -4
- data/node_modules/govuk-frontend/govuk/components/footer/_index.scss +3 -0
- data/node_modules/govuk-frontend/govuk/components/footer/macro-options.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/header/macro-options.json +6 -6
- data/node_modules/govuk-frontend/govuk/components/hint/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/input/macro-options.json +7 -7
- data/node_modules/govuk-frontend/govuk/components/inset-text/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/label/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/panel/_index.scss +13 -1
- data/node_modules/govuk-frontend/govuk/components/panel/macro-options.json +1 -1
- data/node_modules/govuk-frontend/govuk/components/radios/_index.scss +14 -0
- data/node_modules/govuk-frontend/govuk/components/radios/macro-options.json +8 -8
- data/node_modules/govuk-frontend/govuk/components/select/macro-options.json +3 -3
- data/node_modules/govuk-frontend/govuk/components/summary-list/fixtures.json +2 -2
- data/node_modules/govuk-frontend/govuk/components/summary-list/macro-options.json +7 -7
- data/node_modules/govuk-frontend/govuk/components/tabs/macro-options.json +4 -4
- data/node_modules/govuk-frontend/govuk/components/textarea/macro-options.json +5 -5
- data/node_modules/govuk-frontend/govuk/helpers/_colour.scss +2 -2
- data/node_modules/govuk-frontend/govuk/helpers/_spacing.scss +22 -4
- data/node_modules/govuk-frontend/govuk/overrides/_all.scss +1 -0
- data/node_modules/govuk-frontend/govuk/overrides/_text-align.scss +20 -0
- data/node_modules/govuk-frontend/package.json +1 -1
- metadata +6 -16
@@ -37,6 +37,15 @@
|
|
37
37
|
"html": "<a href=\"/\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--disabled\" data-module=\"govuk-button\">\n Disabled link button\n</a>",
|
38
38
|
"hidden": false
|
39
39
|
},
|
40
|
+
{
|
41
|
+
"name": "start",
|
42
|
+
"options": {
|
43
|
+
"text": "Start now button",
|
44
|
+
"isStartButton": true
|
45
|
+
},
|
46
|
+
"html": "<button class=\"govuk-button govuk-button--start\" data-module=\"govuk-button\">\n Start now 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></button>",
|
47
|
+
"hidden": false
|
48
|
+
},
|
40
49
|
{
|
41
50
|
"name": "start link",
|
42
51
|
"options": {
|
@@ -3,7 +3,7 @@
|
|
3
3
|
"name": "id",
|
4
4
|
"type": "string",
|
5
5
|
"required": true,
|
6
|
-
"description": "The
|
6
|
+
"description": "The ID of the textarea."
|
7
7
|
},
|
8
8
|
{
|
9
9
|
"name": "name",
|
@@ -66,13 +66,13 @@
|
|
66
66
|
"name": "formGroup",
|
67
67
|
"type": "object",
|
68
68
|
"required": false,
|
69
|
-
"description": "Options for the form-group wrapper",
|
69
|
+
"description": "Options for the form-group wrapper.",
|
70
70
|
"params": [
|
71
71
|
{
|
72
72
|
"name": "classes",
|
73
73
|
"type": "string",
|
74
74
|
"required": false,
|
75
|
-
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
75
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)."
|
76
76
|
}
|
77
77
|
]
|
78
78
|
},
|
@@ -92,19 +92,19 @@
|
|
92
92
|
"name": "spellcheck",
|
93
93
|
"type": "boolean",
|
94
94
|
"required": false,
|
95
|
-
"description": "Optional field to enable or disable the spellcheck attribute on the character count."
|
95
|
+
"description": "Optional field to enable or disable the `spellcheck` attribute on the character count."
|
96
96
|
},
|
97
97
|
{
|
98
98
|
"name": "countMessage",
|
99
99
|
"type": "object",
|
100
100
|
"required": false,
|
101
|
-
"description": "Options for the count message",
|
101
|
+
"description": "Options for the count message.",
|
102
102
|
"params": [
|
103
103
|
{
|
104
104
|
"name": "classes",
|
105
105
|
"type": "string",
|
106
106
|
"required": false,
|
107
|
-
"description": "Classes to add to the count message"
|
107
|
+
"description": "Classes to add to the count message."
|
108
108
|
}
|
109
109
|
]
|
110
110
|
}
|
@@ -127,6 +127,20 @@
|
|
127
127
|
// Focused state
|
128
128
|
.govuk-checkboxes__input:focus + .govuk-checkboxes__label:before {
|
129
129
|
border-width: 4px;
|
130
|
+
|
131
|
+
// When colours are overridden, the yellow box-shadow becomes invisible
|
132
|
+
// which means the focus state is less obvious. By adding a transparent
|
133
|
+
// outline, which becomes solid (text-coloured) in that context, we ensure
|
134
|
+
// the focus remains clearly visible.
|
135
|
+
outline: $govuk-focus-width solid transparent;
|
136
|
+
outline-offset: 1px;
|
137
|
+
|
138
|
+
// When in an explicit forced-color mode, we can use the Highlight system
|
139
|
+
// color for the outline to better match focus states of native controls
|
140
|
+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
|
141
|
+
outline-color: Highlight;
|
142
|
+
}
|
143
|
+
|
130
144
|
box-shadow: 0 0 0 $govuk-focus-width $govuk-focus-colour;
|
131
145
|
}
|
132
146
|
|
@@ -30,13 +30,13 @@
|
|
30
30
|
"name": "formGroup",
|
31
31
|
"type": "object",
|
32
32
|
"required": false,
|
33
|
-
"description": "Options for the form-group wrapper",
|
33
|
+
"description": "Options for the form-group wrapper.",
|
34
34
|
"params": [
|
35
35
|
{
|
36
36
|
"name": "classes",
|
37
37
|
"type": "string",
|
38
38
|
"required": false,
|
39
|
-
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
39
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)."
|
40
40
|
}
|
41
41
|
]
|
42
42
|
},
|
@@ -74,7 +74,7 @@
|
|
74
74
|
"name": "id",
|
75
75
|
"type": "string",
|
76
76
|
"required": false,
|
77
|
-
"description": "Specific
|
77
|
+
"description": "Specific ID attribute for the checkbox item. If omitted, then component global `idPrefix` option will be applied."
|
78
78
|
},
|
79
79
|
{
|
80
80
|
"name": "name",
|
@@ -106,19 +106,19 @@
|
|
106
106
|
"name": "divider",
|
107
107
|
"type": "string",
|
108
108
|
"required": false,
|
109
|
-
"description": "Divider text to separate checkbox items, for example the text
|
109
|
+
"description": "Divider text to separate checkbox items, for example the text 'or'."
|
110
110
|
},
|
111
111
|
{
|
112
112
|
"name": "checked",
|
113
113
|
"type": "boolean",
|
114
114
|
"required": false,
|
115
|
-
"description": "If true
|
115
|
+
"description": "If `true`, checkbox will be checked."
|
116
116
|
},
|
117
117
|
{
|
118
118
|
"name": "conditional",
|
119
119
|
"type": "boolean",
|
120
120
|
"required": false,
|
121
|
-
"description": "If true
|
121
|
+
"description": "If `true`, content provided will be revealed when the item is checked."
|
122
122
|
},
|
123
123
|
{
|
124
124
|
"name": "conditional.html",
|
@@ -130,13 +130,13 @@
|
|
130
130
|
"name": "behaviour",
|
131
131
|
"type": "string",
|
132
132
|
"required": false,
|
133
|
-
"description": "If set to `exclusive`, implements a
|
133
|
+
"description": "If set to `exclusive`, implements a 'None of these' type behaviour via JavaScript when checkboxes are clicked."
|
134
134
|
},
|
135
135
|
{
|
136
136
|
"name": "disabled",
|
137
137
|
"type": "boolean",
|
138
138
|
"required": false,
|
139
|
-
"description": "If true
|
139
|
+
"description": "If `true`, checkbox will be disabled."
|
140
140
|
},
|
141
141
|
{
|
142
142
|
"name": "attributes",
|
@@ -3,7 +3,7 @@
|
|
3
3
|
"name": "ariaLabel",
|
4
4
|
"type": "string",
|
5
5
|
"required": false,
|
6
|
-
"description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to
|
6
|
+
"description": "The text for the `aria-label` which labels the cookie banner region. This region applies to all messages that the cookie banner includes. For example, the cookie message and the confirmation message. Defaults to 'Cookie banner'."
|
7
7
|
},
|
8
8
|
{
|
9
9
|
"name": "hidden",
|
@@ -3,7 +3,7 @@
|
|
3
3
|
"name": "id",
|
4
4
|
"type": "string",
|
5
5
|
"required": true,
|
6
|
-
"description": "This is used for the main component and to compose
|
6
|
+
"description": "This is used for the main component and to compose the ID attribute for each item."
|
7
7
|
},
|
8
8
|
{
|
9
9
|
"name": "namePrefix",
|
@@ -21,7 +21,7 @@
|
|
21
21
|
"name": "id",
|
22
22
|
"type": "string",
|
23
23
|
"required": false,
|
24
|
-
"description": "Item-specific
|
24
|
+
"description": "Item-specific ID. If provided, it will be used instead of the generated ID."
|
25
25
|
},
|
26
26
|
{
|
27
27
|
"name": "name",
|
@@ -45,7 +45,7 @@
|
|
45
45
|
"name": "autocomplete",
|
46
46
|
"type": "string",
|
47
47
|
"required": false,
|
48
|
-
"description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance
|
48
|
+
"description": "Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance `bday-day`. See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used."
|
49
49
|
},
|
50
50
|
{
|
51
51
|
"name": "pattern",
|
@@ -85,13 +85,13 @@
|
|
85
85
|
"name": "formGroup",
|
86
86
|
"type": "object",
|
87
87
|
"required": false,
|
88
|
-
"description": "Options for the form-group wrapper",
|
88
|
+
"description": "Options for the form-group wrapper.",
|
89
89
|
"params": [
|
90
90
|
{
|
91
91
|
"name": "classes",
|
92
92
|
"type": "string",
|
93
93
|
"required": false,
|
94
|
-
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
94
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)."
|
95
95
|
}
|
96
96
|
]
|
97
97
|
},
|
@@ -27,13 +27,13 @@
|
|
27
27
|
"name": "id",
|
28
28
|
"type": "string",
|
29
29
|
"required": false,
|
30
|
-
"description": "
|
30
|
+
"description": "ID to add to the details element."
|
31
31
|
},
|
32
32
|
{
|
33
33
|
"name": "open",
|
34
34
|
"type": "boolean",
|
35
35
|
"required": false,
|
36
|
-
"description": "If true
|
36
|
+
"description": "If `true`, details element will be expanded."
|
37
37
|
},
|
38
38
|
{
|
39
39
|
"name": "classes",
|
@@ -15,7 +15,7 @@
|
|
15
15
|
"name": "id",
|
16
16
|
"type": "string",
|
17
17
|
"required": false,
|
18
|
-
"description": "
|
18
|
+
"description": "ID attribute to add to the error message span tag."
|
19
19
|
},
|
20
20
|
{
|
21
21
|
"name": "classes",
|
@@ -27,12 +27,12 @@
|
|
27
27
|
"name": "attributes",
|
28
28
|
"type": "object",
|
29
29
|
"required": false,
|
30
|
-
"description": "HTML attributes (for example data attributes) to add to the error message span tag"
|
30
|
+
"description": "HTML attributes (for example data attributes) to add to the error message span tag."
|
31
31
|
},
|
32
32
|
{
|
33
33
|
"name": "visuallyHiddenText",
|
34
34
|
"type": "string",
|
35
35
|
"required": false,
|
36
|
-
"description": "A visually hidden prefix used before the error message. Defaults to
|
36
|
+
"description": "A visually hidden prefix used before the error message. Defaults to 'Error'."
|
37
37
|
}
|
38
38
|
]
|
@@ -65,6 +65,6 @@
|
|
65
65
|
"name": "caller",
|
66
66
|
"type": "nunjucks-block",
|
67
67
|
"required": false,
|
68
|
-
"description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire
|
68
|
+
"description": "Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fieldset component in a `call` block."
|
69
69
|
}
|
70
70
|
]
|
@@ -9,13 +9,13 @@
|
|
9
9
|
"name": "id",
|
10
10
|
"type": "string",
|
11
11
|
"required": true,
|
12
|
-
"description": "The
|
12
|
+
"description": "The ID of the input."
|
13
13
|
},
|
14
14
|
{
|
15
15
|
"name": "value",
|
16
16
|
"type": "string",
|
17
17
|
"required": false,
|
18
|
-
"description": "Optional initial value of the input"
|
18
|
+
"description": "Optional initial value of the input."
|
19
19
|
},
|
20
20
|
{
|
21
21
|
"name": "describedBy",
|
@@ -48,13 +48,13 @@
|
|
48
48
|
"name": "formGroup",
|
49
49
|
"type": "object",
|
50
50
|
"required": false,
|
51
|
-
"description": "Options for the form-group wrapper",
|
51
|
+
"description": "Options for the form-group wrapper.",
|
52
52
|
"params": [
|
53
53
|
{
|
54
54
|
"name": "classes",
|
55
55
|
"type": "string",
|
56
56
|
"required": false,
|
57
|
-
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
57
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)."
|
58
58
|
}
|
59
59
|
]
|
60
60
|
},
|
@@ -111,6 +111,9 @@
|
|
111
111
|
margin-bottom: govuk-spacing(3);
|
112
112
|
}
|
113
113
|
vertical-align: top;
|
114
|
+
// Work around SVGs not inheriting color from parent in forced color mode
|
115
|
+
// (https://github.com/w3c/csswg-drafts/issues/6310)
|
116
|
+
forced-color-adjust: auto;
|
114
117
|
}
|
115
118
|
|
116
119
|
.govuk-footer__licence-description {
|
@@ -9,7 +9,7 @@
|
|
9
9
|
"name": "visuallyHiddenTitle",
|
10
10
|
"type": "string",
|
11
11
|
"required": false,
|
12
|
-
"description": "Title for a meta item section
|
12
|
+
"description": "Title for a meta item section. Defaults to 'Support links'."
|
13
13
|
},
|
14
14
|
{
|
15
15
|
"name": "html",
|
@@ -61,7 +61,7 @@
|
|
61
61
|
"name": "title",
|
62
62
|
"type": "string",
|
63
63
|
"required": true,
|
64
|
-
"description": "Title for a section"
|
64
|
+
"description": "Title for a section."
|
65
65
|
},
|
66
66
|
{
|
67
67
|
"name": "columns",
|
@@ -3,7 +3,7 @@
|
|
3
3
|
"name": "homepageUrl",
|
4
4
|
"type": "string",
|
5
5
|
"required": false,
|
6
|
-
"description": "The
|
6
|
+
"description": "The URL of the homepage. Defaults to `/`"
|
7
7
|
},
|
8
8
|
{
|
9
9
|
"name": "assetsPath",
|
@@ -15,7 +15,7 @@
|
|
15
15
|
"name": "productName",
|
16
16
|
"type": "string",
|
17
17
|
"required": false,
|
18
|
-
"description": "Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use serviceName
|
18
|
+
"description": "Product name, used when the product name follows on directly from ‘GOV.UK’. For example, GOV.UK Pay or GOV.UK Design System. In most circumstances, you should use `serviceName`."
|
19
19
|
},
|
20
20
|
{
|
21
21
|
"name": "serviceName",
|
@@ -27,7 +27,7 @@
|
|
27
27
|
"name": "serviceUrl",
|
28
28
|
"type": "string",
|
29
29
|
"required": false,
|
30
|
-
"description": "
|
30
|
+
"description": "URL for the service name anchor."
|
31
31
|
},
|
32
32
|
{
|
33
33
|
"name": "navigation",
|
@@ -51,7 +51,7 @@
|
|
51
51
|
"name": "href",
|
52
52
|
"type": "string",
|
53
53
|
"required": false,
|
54
|
-
"description": "
|
54
|
+
"description": "URL of the navigation item anchor."
|
55
55
|
},
|
56
56
|
{
|
57
57
|
"name": "active",
|
@@ -77,13 +77,13 @@
|
|
77
77
|
"name": "navigationLabel",
|
78
78
|
"type": "string",
|
79
79
|
"required": false,
|
80
|
-
"description": "Text for the `aria-label` attribute of the navigation. Defaults to
|
80
|
+
"description": "Text for the `aria-label` attribute of the navigation. Defaults to 'Navigation menu'."
|
81
81
|
},
|
82
82
|
{
|
83
83
|
"name": "menuButtonLabel",
|
84
84
|
"type": "string",
|
85
85
|
"required": false,
|
86
|
-
"description": "Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to
|
86
|
+
"description": "Text for the `aria-label` attribute of the button that toggles the navigation. Defaults to 'Show or hide navigation menu'."
|
87
87
|
},
|
88
88
|
{
|
89
89
|
"name": "containerClasses",
|
@@ -3,7 +3,7 @@
|
|
3
3
|
"name": "id",
|
4
4
|
"type": "string",
|
5
5
|
"required": true,
|
6
|
-
"description": "The
|
6
|
+
"description": "The ID of the input."
|
7
7
|
},
|
8
8
|
{
|
9
9
|
"name": "name",
|
@@ -15,7 +15,7 @@
|
|
15
15
|
"name": "type",
|
16
16
|
"type": "string",
|
17
17
|
"required": false,
|
18
|
-
"description": "Type of input control to render. Defaults to
|
18
|
+
"description": "Type of input control to render. Defaults to `text`."
|
19
19
|
},
|
20
20
|
{
|
21
21
|
"name": "inputmode",
|
@@ -98,13 +98,13 @@
|
|
98
98
|
"name": "text",
|
99
99
|
"type": "string",
|
100
100
|
"required": true,
|
101
|
-
"description": "
|
101
|
+
"description": "If `html` is set, this is not required. Text to use within the label. If `html` is provided, the `text` argument will be ignored."
|
102
102
|
},
|
103
103
|
{
|
104
104
|
"name": "html",
|
105
105
|
"type": "string",
|
106
106
|
"required": true,
|
107
|
-
"description": "
|
107
|
+
"description": "If `text` is set, this is not required. HTML to use within the label. If `html` is provided, the `text` argument will be ignored."
|
108
108
|
},
|
109
109
|
{
|
110
110
|
"name": "classes",
|
@@ -124,13 +124,13 @@
|
|
124
124
|
"name": "formGroup",
|
125
125
|
"type": "object",
|
126
126
|
"required": false,
|
127
|
-
"description": "Options for the form-group wrapper",
|
127
|
+
"description": "Options for the form-group wrapper.",
|
128
128
|
"params": [
|
129
129
|
{
|
130
130
|
"name": "classes",
|
131
131
|
"type": "string",
|
132
132
|
"required": false,
|
133
|
-
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
133
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)."
|
134
134
|
}
|
135
135
|
]
|
136
136
|
},
|
@@ -156,7 +156,7 @@
|
|
156
156
|
"name": "spellcheck",
|
157
157
|
"type": "boolean",
|
158
158
|
"required": false,
|
159
|
-
"description": "Optional field to enable or disable the spellcheck attribute on the input."
|
159
|
+
"description": "Optional field to enable or disable the `spellcheck` attribute on the input."
|
160
160
|
},
|
161
161
|
{
|
162
162
|
"name": "attributes",
|
@@ -15,7 +15,7 @@
|
|
15
15
|
"name": "for",
|
16
16
|
"type": "string",
|
17
17
|
"required": false,
|
18
|
-
"description": "The value of the for attribute, the
|
18
|
+
"description": "The value of the `for` attribute, the ID of the input the label is associated with."
|
19
19
|
},
|
20
20
|
{
|
21
21
|
"name": "isPageHeading",
|
@@ -12,7 +12,19 @@
|
|
12
12
|
text-align: center;
|
13
13
|
|
14
14
|
@include govuk-media-query($until: tablet) {
|
15
|
-
padding: govuk-spacing(
|
15
|
+
padding: govuk-spacing(3) - $govuk-border-width;
|
16
|
+
|
17
|
+
// This is an if-all-else-fails attempt to stop long words from overflowing the container
|
18
|
+
// on very narrow viewports by forcing them to break and wrap instead. This
|
19
|
+
// overflowing is more likely to happen when user increases text size on a mobile eg. using
|
20
|
+
// iOS Safari text resize controls.
|
21
|
+
//
|
22
|
+
// The overflowing is a particular problem with the panel component since it uses white
|
23
|
+
// text: when the text overflows the container, it is invisible on the white (page)
|
24
|
+
// background. When the text in our other components overflow, the user might have to scroll
|
25
|
+
// horizontally to view it but the the text remains legible.
|
26
|
+
overflow-wrap: break-word;
|
27
|
+
word-wrap: break-word; // Support IE (autoprefixer doesn't add this as it's not a prefix)
|
16
28
|
}
|
17
29
|
}
|
18
30
|
|
@@ -121,6 +121,20 @@
|
|
121
121
|
// Focused state
|
122
122
|
.govuk-radios__input:focus + .govuk-radios__label:before {
|
123
123
|
border-width: 4px;
|
124
|
+
|
125
|
+
// When colours are overridden, the yellow box-shadow becomes invisible
|
126
|
+
// which means the focus state is less obvious. By adding a transparent
|
127
|
+
// outline, which becomes solid (text-coloured) in that context, we ensure
|
128
|
+
// the focus remains clearly visible.
|
129
|
+
outline: $govuk-focus-width solid transparent;
|
130
|
+
outline-offset: 1px;
|
131
|
+
|
132
|
+
// When in an explicit forced-color mode, we can use the Highlight system
|
133
|
+
// color for the outline to better match focus states of native controls
|
134
|
+
@media screen and (forced-colors: active), (-ms-high-contrast: active) {
|
135
|
+
outline-color: Highlight;
|
136
|
+
}
|
137
|
+
|
124
138
|
box-shadow: 0 0 0 $govuk-radios-focus-width $govuk-focus-colour;
|
125
139
|
}
|
126
140
|
|
@@ -24,13 +24,13 @@
|
|
24
24
|
"name": "formGroup",
|
25
25
|
"type": "object",
|
26
26
|
"required": false,
|
27
|
-
"description": "Options for the form-group wrapper",
|
27
|
+
"description": "Options for the form-group wrapper.",
|
28
28
|
"params": [
|
29
29
|
{
|
30
30
|
"name": "classes",
|
31
31
|
"type": "string",
|
32
32
|
"required": false,
|
33
|
-
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
33
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)."
|
34
34
|
}
|
35
35
|
]
|
36
36
|
},
|
@@ -38,7 +38,7 @@
|
|
38
38
|
"name": "idPrefix",
|
39
39
|
"type": "string",
|
40
40
|
"required": false,
|
41
|
-
"description": "String to prefix
|
41
|
+
"description": "String to prefix ID for each radio item if no ID is specified on each item. If `idPrefix` is not passed, fallback to using the `name` attribute instead."
|
42
42
|
},
|
43
43
|
{
|
44
44
|
"name": "name",
|
@@ -68,7 +68,7 @@
|
|
68
68
|
"name": "id",
|
69
69
|
"type": "string",
|
70
70
|
"required": false,
|
71
|
-
"description": "Specific
|
71
|
+
"description": "Specific ID attribute for the radio item. If omitted, then `idPrefix` string will be applied."
|
72
72
|
},
|
73
73
|
{
|
74
74
|
"name": "value",
|
@@ -94,19 +94,19 @@
|
|
94
94
|
"name": "divider",
|
95
95
|
"type": "string",
|
96
96
|
"required": false,
|
97
|
-
"description": "Divider text to separate radio items, for example the text
|
97
|
+
"description": "Divider text to separate radio items, for example the text 'or'."
|
98
98
|
},
|
99
99
|
{
|
100
100
|
"name": "checked",
|
101
101
|
"type": "boolean",
|
102
102
|
"required": false,
|
103
|
-
"description": "If true
|
103
|
+
"description": "If `true`, radio will be checked."
|
104
104
|
},
|
105
105
|
{
|
106
106
|
"name": "conditional",
|
107
107
|
"type": "string",
|
108
108
|
"required": false,
|
109
|
-
"description": "If true
|
109
|
+
"description": "If `true`, content provided will be revealed when the item is checked."
|
110
110
|
},
|
111
111
|
{
|
112
112
|
"name": "conditional.html",
|
@@ -118,7 +118,7 @@
|
|
118
118
|
"name": "disabled",
|
119
119
|
"type": "boolean",
|
120
120
|
"required": false,
|
121
|
-
"description": "If true
|
121
|
+
"description": "If `true`, radio will be disabled."
|
122
122
|
},
|
123
123
|
{
|
124
124
|
"name": "attributes",
|
@@ -3,7 +3,7 @@
|
|
3
3
|
"name": "id",
|
4
4
|
"type": "string",
|
5
5
|
"required": true,
|
6
|
-
"description": "
|
6
|
+
"description": "ID for each select box."
|
7
7
|
},
|
8
8
|
{
|
9
9
|
"name": "name",
|
@@ -80,13 +80,13 @@
|
|
80
80
|
"name": "formGroup",
|
81
81
|
"type": "object",
|
82
82
|
"required": false,
|
83
|
-
"description": "Options for the form-group wrapper",
|
83
|
+
"description": "Options for the form-group wrapper.",
|
84
84
|
"params": [
|
85
85
|
{
|
86
86
|
"name": "classes",
|
87
87
|
"type": "string",
|
88
88
|
"required": false,
|
89
|
-
"description": "Classes to add to the form group (for example to show error state for the whole group)"
|
89
|
+
"description": "Classes to add to the form group (for example to show error state for the whole group)."
|
90
90
|
}
|
91
91
|
]
|
92
92
|
},
|