govuk_publishing_components 52.1.0 → 53.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/component_guide/application.scss +14 -20
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +0 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +11 -13
- data/app/views/govuk_publishing_components/components/_search.html.erb +1 -0
- data/app/views/govuk_publishing_components/components/_search_with_autocomplete.html.erb +6 -2
- data/app/views/govuk_publishing_components/components/_select.html.erb +5 -2
- data/app/views/govuk_publishing_components/components/docs/heading.yml +4 -0
- data/app/views/govuk_publishing_components/components/docs/inverse_header.yml +14 -8
- data/app/views/govuk_publishing_components/components/docs/search_with_autocomplete.yml +7 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +16 -5
- data/app/assets/stylesheets/govuk_publishing_components/components/_title.scss +0 -56
- data/app/views/govuk_publishing_components/components/_title.html.erb +0 -38
- data/app/views/govuk_publishing_components/components/docs/title.yml +0 -64
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 30fda3ff179316f100982d0cfba8cfde4b1c66b1774ffb3c58f0f4fba2718349
|
|
4
|
+
data.tar.gz: 718923c362bc6cb9006796a01c4a9ac56eacb1a44cb454db59489cbb3fc71364
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fed49a157451bdea9c8fbfaacbdcf52847abe0bdeafdf9c06d227e9dacc3450fd5cc92fb8df4ec07bf5b25ed93e2ee7fd5d07d10f0408bbb0273f8c5d8cd72c5
|
|
7
|
+
data.tar.gz: f3e4c027b49b5a4e39e68020ff1761dd6c7ca9306e1b0a8350312c8a7db316aa2412c67ef41039a8fbb52439440654905ef3f68042044802e597dad009c234b8
|
|
@@ -13,7 +13,7 @@ $gem-guide-border-width: 1px;
|
|
|
13
13
|
@extend %govuk-list--bullet;
|
|
14
14
|
|
|
15
15
|
li {
|
|
16
|
-
margin-bottom:
|
|
16
|
+
margin-bottom: govuk-spacing(3);
|
|
17
17
|
@include govuk-font($size: 19);
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -27,7 +27,7 @@ $gem-guide-border-width: 1px;
|
|
|
27
27
|
|
|
28
28
|
.js-enabled & {
|
|
29
29
|
display: block;
|
|
30
|
-
margin-top:
|
|
30
|
+
margin-top: govuk-spacing(9);
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
@@ -45,8 +45,8 @@ $gem-guide-border-width: 1px;
|
|
|
45
45
|
|
|
46
46
|
.component-violation {
|
|
47
47
|
border: 3px solid $govuk-error-colour;
|
|
48
|
-
margin: 0 0
|
|
49
|
-
padding:
|
|
48
|
+
margin: 0 0 govuk-spacing(6);
|
|
49
|
+
padding: govuk-spacing(6);
|
|
50
50
|
@include govuk-text-colour;
|
|
51
51
|
|
|
52
52
|
.component-violation__title {
|
|
@@ -57,13 +57,13 @@ $gem-guide-border-width: 1px;
|
|
|
57
57
|
.component-violation__link {
|
|
58
58
|
display: block;
|
|
59
59
|
color: $govuk-error-colour;
|
|
60
|
-
margin:
|
|
60
|
+
margin: govuk-spacing(3) 0;
|
|
61
61
|
@include govuk-font($size: 19, $weight: bold);
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.component-doc-h2 {
|
|
66
|
-
margin: (
|
|
66
|
+
margin: (govuk-spacing(6) * 1.5) 0 govuk-spacing(6);
|
|
67
67
|
@include govuk-text-colour;
|
|
68
68
|
@include govuk-font($size: 27, $weight: bold);
|
|
69
69
|
|
|
@@ -72,15 +72,9 @@ $gem-guide-border-width: 1px;
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
.component-doc-h3 {
|
|
76
|
-
margin: $govuk-gutter 0 $govuk-gutter-half;
|
|
77
|
-
@include govuk-text-colour;
|
|
78
|
-
@include govuk-font($size: 19, $weight: bold);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
75
|
.component-call {
|
|
82
76
|
margin-top: -$gem-guide-border-width;
|
|
83
|
-
margin-bottom:
|
|
77
|
+
margin-bottom: govuk-spacing(3);
|
|
84
78
|
|
|
85
79
|
font-family: Consolas, Monaco, "Andale Mono", monospace;
|
|
86
80
|
font-size: 16px;
|
|
@@ -97,7 +91,7 @@ $gem-guide-border-width: 1px;
|
|
|
97
91
|
|
|
98
92
|
> pre {
|
|
99
93
|
margin: 0;
|
|
100
|
-
padding:
|
|
94
|
+
padding: govuk-spacing(6);
|
|
101
95
|
max-height: 300px;
|
|
102
96
|
overflow: auto;
|
|
103
97
|
font-family: inherit;
|
|
@@ -116,7 +110,7 @@ $gem-guide-border-width: 1px;
|
|
|
116
110
|
}
|
|
117
111
|
|
|
118
112
|
.component-guide-preview {
|
|
119
|
-
padding:
|
|
113
|
+
padding: govuk-spacing(6);
|
|
120
114
|
border: $gem-guide-border-width solid $govuk-border-colour;
|
|
121
115
|
position: relative;
|
|
122
116
|
|
|
@@ -168,7 +162,7 @@ $gem-guide-border-width: 1px;
|
|
|
168
162
|
h3,
|
|
169
163
|
h4 {
|
|
170
164
|
margin-top: 0;
|
|
171
|
-
margin-bottom:
|
|
165
|
+
margin-bottom: govuk-spacing(3);
|
|
172
166
|
}
|
|
173
167
|
|
|
174
168
|
h3 a {
|
|
@@ -176,7 +170,7 @@ $gem-guide-border-width: 1px;
|
|
|
176
170
|
}
|
|
177
171
|
|
|
178
172
|
h3:not(:first-child) {
|
|
179
|
-
margin-top:
|
|
173
|
+
margin-top: govuk-spacing(6);
|
|
180
174
|
}
|
|
181
175
|
|
|
182
176
|
ul {
|
|
@@ -219,10 +213,10 @@ $gem-guide-border-width: 1px;
|
|
|
219
213
|
|
|
220
214
|
.examples {
|
|
221
215
|
.component-example {
|
|
222
|
-
margin: 0 0
|
|
216
|
+
margin: 0 0 govuk-spacing(6) * 1.5;
|
|
223
217
|
|
|
224
218
|
.example-title {
|
|
225
|
-
margin:
|
|
219
|
+
margin: govuk-spacing(3) 0;
|
|
226
220
|
@include govuk-text-colour;
|
|
227
221
|
@include govuk-font($size: 24, $weight: bold);
|
|
228
222
|
}
|
|
@@ -255,7 +249,7 @@ html {
|
|
|
255
249
|
}
|
|
256
250
|
|
|
257
251
|
.component-guide-preview-page {
|
|
258
|
-
padding: (
|
|
252
|
+
padding: (govuk-spacing(6) * 1.5) 0;
|
|
259
253
|
position: relative;
|
|
260
254
|
|
|
261
255
|
.preview-title {
|
|
@@ -641,7 +641,7 @@ $after-button-padding-left: govuk-spacing(4);
|
|
|
641
641
|
right: 0;
|
|
642
642
|
|
|
643
643
|
@include focus-not-focus-visible {
|
|
644
|
-
border-bottom: 1px solid
|
|
644
|
+
border-bottom: 1px solid transparent;
|
|
645
645
|
border-left: none;
|
|
646
646
|
position: relative;
|
|
647
647
|
}
|
data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss
CHANGED
|
@@ -3,18 +3,16 @@
|
|
|
3
3
|
|
|
4
4
|
@include govuk-font($size: 16);
|
|
5
5
|
|
|
6
|
-
$gutter-two-thirds: $govuk-gutter - calc($govuk-gutter / 3);
|
|
7
|
-
|
|
8
6
|
ol,
|
|
9
7
|
ul,
|
|
10
8
|
p {
|
|
11
|
-
margin-top:
|
|
12
|
-
margin-bottom:
|
|
9
|
+
margin-top: govuk-spacing(3);
|
|
10
|
+
margin-bottom: govuk-spacing(3);
|
|
13
11
|
@include govuk-font($size: 19);
|
|
14
12
|
|
|
15
13
|
@include govuk-media-query($from: tablet) {
|
|
16
|
-
margin-top:
|
|
17
|
-
margin-bottom:
|
|
14
|
+
margin-top: govuk-spacing(4);
|
|
15
|
+
margin-bottom: govuk-spacing(4);
|
|
18
16
|
}
|
|
19
17
|
}
|
|
20
18
|
|
|
@@ -30,17 +28,17 @@
|
|
|
30
28
|
}
|
|
31
29
|
|
|
32
30
|
h2 {
|
|
33
|
-
margin-top:
|
|
31
|
+
margin-top: govuk-spacing(6);
|
|
34
32
|
margin-bottom: govuk-spacing(4);
|
|
35
33
|
@include govuk-font($size: 27, $weight: bold);
|
|
36
34
|
|
|
37
35
|
@include govuk-media-query($from: desktop) {
|
|
38
|
-
margin-top:
|
|
36
|
+
margin-top: govuk-spacing(6) * 1.5;
|
|
39
37
|
}
|
|
40
38
|
}
|
|
41
39
|
|
|
42
40
|
h3 {
|
|
43
|
-
margin-top:
|
|
41
|
+
margin-top: govuk-spacing(6) + 5px;
|
|
44
42
|
margin-bottom: 0;
|
|
45
43
|
@include govuk-font($size: 19, $weight: bold);
|
|
46
44
|
}
|
|
@@ -50,7 +48,7 @@
|
|
|
50
48
|
h4,
|
|
51
49
|
h5,
|
|
52
50
|
h6 {
|
|
53
|
-
margin-top:
|
|
51
|
+
margin-top: govuk-spacing(6) + 5px;
|
|
54
52
|
margin-bottom: 0;
|
|
55
53
|
@include govuk-font($size: 19, $weight: bold);
|
|
56
54
|
|
|
@@ -91,7 +89,7 @@
|
|
|
91
89
|
// utilise the type attribute for the formatting. Browsers default to a
|
|
92
90
|
// style of decimal.
|
|
93
91
|
list-style-position: outside;
|
|
94
|
-
margin-left:
|
|
92
|
+
margin-left: govuk-spacing(4);
|
|
95
93
|
padding: 0;
|
|
96
94
|
|
|
97
95
|
ul,
|
|
@@ -142,8 +140,8 @@
|
|
|
142
140
|
// Horizontal Rule
|
|
143
141
|
|
|
144
142
|
hr {
|
|
145
|
-
margin-top:
|
|
146
|
-
margin-bottom:
|
|
143
|
+
margin-top: govuk-spacing(6) - 1px;
|
|
144
|
+
margin-bottom: govuk-spacing(6);
|
|
147
145
|
border-top: 1px solid $govuk-border-colour;
|
|
148
146
|
}
|
|
149
147
|
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
no_border ||= false
|
|
19
19
|
size ||= ""
|
|
20
20
|
value ||= ""
|
|
21
|
+
local_assigns[:margin_bottom] ||= 6
|
|
21
22
|
|
|
22
23
|
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
23
24
|
component_helper.add_data_attribute({ module: "gem-toggle-input-class-on-focus" })
|
|
@@ -8,16 +8,20 @@
|
|
|
8
8
|
raise ArgumentError, "The search_with_autocomplete component requires source_url and source_key"
|
|
9
9
|
end
|
|
10
10
|
|
|
11
|
-
search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key).merge(
|
|
11
|
+
search_component_options = local_assigns.except(:autocomplete, :source_url, :source_key, :margin_bottom).merge(
|
|
12
12
|
# The `search` component has an inline label by default, but this conflicts with the accessible-
|
|
13
13
|
# autocomplete component's markup and styling. Every potential use of this component is in
|
|
14
14
|
# situations where we want the label not to be inline anyway, so we override the default here.
|
|
15
|
-
inline_label: false
|
|
15
|
+
inline_label: false,
|
|
16
|
+
margin_bottom: 0
|
|
16
17
|
)
|
|
17
18
|
|
|
18
19
|
classes = %w[gem-c-search-with-autocomplete]
|
|
19
20
|
classes << "gem-c-search-with-autocomplete--large" if local_assigns[:size] == "large"
|
|
20
21
|
classes << "gem-c-search-with-autocomplete--on-govuk-blue" if local_assigns[:on_govuk_blue]
|
|
22
|
+
|
|
23
|
+
margin_bottom = [*0..9].include?(local_assigns[:margin_bottom]) ? local_assigns[:margin_bottom] : 6
|
|
24
|
+
classes << "govuk-!-margin-bottom-#{margin_bottom}" if margin_bottom
|
|
21
25
|
%>
|
|
22
26
|
<%= tag.div(
|
|
23
27
|
class: classes.join(" "),
|
|
@@ -16,8 +16,11 @@
|
|
|
16
16
|
<% if select_helper.options.any? && id && label %>
|
|
17
17
|
<%= content_tag :div, class: select_helper.css_classes do %>
|
|
18
18
|
<% if is_page_heading %>
|
|
19
|
-
<% add_gem_component_stylesheet("
|
|
20
|
-
<%=
|
|
19
|
+
<% add_gem_component_stylesheet("heading") %>
|
|
20
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
21
|
+
text: label_tag(id, label, class: select_helper.label_classes),
|
|
22
|
+
heading_level: 1
|
|
23
|
+
} %>
|
|
21
24
|
<% else %>
|
|
22
25
|
<%= label_tag(id, label, class: select_helper.label_classes) %>
|
|
23
26
|
<% end %>
|
|
@@ -14,9 +14,11 @@ examples:
|
|
|
14
14
|
data:
|
|
15
15
|
block: |
|
|
16
16
|
<!-- example content -->
|
|
17
|
-
<%= render "govuk_publishing_components/components/
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
18
|
+
text: "Education, Training and Skills",
|
|
19
|
+
font_size: "xl",
|
|
20
|
+
inverse: true,
|
|
21
|
+
padding: true,
|
|
20
22
|
} %>
|
|
21
23
|
<!-- end of example content -->
|
|
22
24
|
with_custom_padding:
|
|
@@ -38,9 +40,11 @@ examples:
|
|
|
38
40
|
full_width: true
|
|
39
41
|
block: |
|
|
40
42
|
<!-- example content -->
|
|
41
|
-
<%= render "govuk_publishing_components/components/
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
44
|
+
text: "Education, Training and Skills",
|
|
45
|
+
font_size: "xl",
|
|
46
|
+
inverse: true,
|
|
47
|
+
padding: true,
|
|
44
48
|
} %>
|
|
45
49
|
<!-- end of example content -->
|
|
46
50
|
with_subtext:
|
|
@@ -59,10 +63,12 @@ examples:
|
|
|
59
63
|
data:
|
|
60
64
|
block: |
|
|
61
65
|
<!-- example content -->
|
|
62
|
-
<%= render "govuk_publishing_components/components/
|
|
63
|
-
|
|
66
|
+
<%= render "govuk_publishing_components/components/heading", {
|
|
67
|
+
text: "LN5 0AT, Jackson Homes (Scopwick) Ltd: environmental permit application",
|
|
64
68
|
inverse: true,
|
|
65
69
|
context: "Notice",
|
|
70
|
+
padding: true,
|
|
71
|
+
font_size: "xl"
|
|
66
72
|
} %>
|
|
67
73
|
<p class="publication-header__last-changed">Published 22 April 2016</p>
|
|
68
74
|
<!-- end of example content -->
|
|
@@ -60,3 +60,10 @@ examples:
|
|
|
60
60
|
source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
|
|
61
61
|
source_key: suggested_autocomplete
|
|
62
62
|
label_text: <h2 class="govuk-heading-m govuk-!-margin-bottom-1">Search GOV.UK</h2>
|
|
63
|
+
with_margin_bottom:
|
|
64
|
+
description: |
|
|
65
|
+
The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom value of 6.
|
|
66
|
+
data:
|
|
67
|
+
source_url: 'https://www.gov.uk/api/search.json?suggest=autocomplete'
|
|
68
|
+
source_key: suggested_autocomplete
|
|
69
|
+
margin_bottom: 9
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version:
|
|
4
|
+
version: 53.0.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
8
8
|
bindir: bin
|
|
9
9
|
cert_chain: []
|
|
10
|
-
date: 2025-02-
|
|
10
|
+
date: 2025-02-26 00:00:00.000000000 Z
|
|
11
11
|
dependencies:
|
|
12
12
|
- !ruby/object:Gem::Dependency
|
|
13
13
|
name: govuk_app_config
|
|
@@ -331,6 +331,20 @@ dependencies:
|
|
|
331
331
|
- - ">="
|
|
332
332
|
- !ruby/object:Gem::Version
|
|
333
333
|
version: '0'
|
|
334
|
+
- !ruby/object:Gem::Dependency
|
|
335
|
+
name: simplecov
|
|
336
|
+
requirement: !ruby/object:Gem::Requirement
|
|
337
|
+
requirements:
|
|
338
|
+
- - ">="
|
|
339
|
+
- !ruby/object:Gem::Version
|
|
340
|
+
version: '0'
|
|
341
|
+
type: :development
|
|
342
|
+
prerelease: false
|
|
343
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
344
|
+
requirements:
|
|
345
|
+
- - ">="
|
|
346
|
+
- !ruby/object:Gem::Version
|
|
347
|
+
version: '0'
|
|
334
348
|
- !ruby/object:Gem::Dependency
|
|
335
349
|
name: terser
|
|
336
350
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -594,7 +608,6 @@ files:
|
|
|
594
608
|
- app/assets/stylesheets/govuk_publishing_components/components/_table.scss
|
|
595
609
|
- app/assets/stylesheets/govuk_publishing_components/components/_tabs.scss
|
|
596
610
|
- app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss
|
|
597
|
-
- app/assets/stylesheets/govuk_publishing_components/components/_title.scss
|
|
598
611
|
- app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
|
|
599
612
|
- app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss
|
|
600
613
|
- app/assets/stylesheets/govuk_publishing_components/components/govspeak/_attachment.scss
|
|
@@ -740,7 +753,6 @@ files:
|
|
|
740
753
|
- app/views/govuk_publishing_components/components/_table.html.erb
|
|
741
754
|
- app/views/govuk_publishing_components/components/_tabs.html.erb
|
|
742
755
|
- app/views/govuk_publishing_components/components/_textarea.html.erb
|
|
743
|
-
- app/views/govuk_publishing_components/components/_title.html.erb
|
|
744
756
|
- app/views/govuk_publishing_components/components/_translation_nav.html.erb
|
|
745
757
|
- app/views/govuk_publishing_components/components/_warning_text.html.erb
|
|
746
758
|
- app/views/govuk_publishing_components/components/attachment/_thumbnail_document.html.erb
|
|
@@ -836,7 +848,6 @@ files:
|
|
|
836
848
|
- app/views/govuk_publishing_components/components/docs/table.yml
|
|
837
849
|
- app/views/govuk_publishing_components/components/docs/tabs.yml
|
|
838
850
|
- app/views/govuk_publishing_components/components/docs/textarea.yml
|
|
839
|
-
- app/views/govuk_publishing_components/components/docs/title.yml
|
|
840
851
|
- app/views/govuk_publishing_components/components/docs/translation_nav.yml
|
|
841
852
|
- app/views/govuk_publishing_components/components/docs/warning_text.yml
|
|
842
853
|
- app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
@import "govuk_publishing_components/individual_component_support";
|
|
2
|
-
|
|
3
|
-
.gem-c-title {
|
|
4
|
-
@include govuk-media-query($from: tablet) {
|
|
5
|
-
padding-top: govuk-spacing(8);
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.gem-c-title--inverse {
|
|
10
|
-
color: govuk-colour("white");
|
|
11
|
-
|
|
12
|
-
.gem-c-title__text,
|
|
13
|
-
.gem-c-title__context {
|
|
14
|
-
color: inherit;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.gem-c-title__context-link {
|
|
19
|
-
text-decoration: none;
|
|
20
|
-
|
|
21
|
-
&:link,
|
|
22
|
-
&:visited {
|
|
23
|
-
color: inherit;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&:hover {
|
|
27
|
-
text-decoration: underline;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
&:focus {
|
|
31
|
-
text-decoration: none;
|
|
32
|
-
color: $govuk-focus-text-colour;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.gem-c-title__text {
|
|
37
|
-
margin: 0;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@include govuk-media-query($media-type: print) {
|
|
41
|
-
.gem-c-title {
|
|
42
|
-
margin: 5mm 0 10mm !important; // stylelint-disable-line declaration-no-important
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.gem-c-title__context {
|
|
46
|
-
margin: 0;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.gem-c-title__text {
|
|
50
|
-
margin-top: 0;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.gem-c-title--inverse {
|
|
54
|
-
color: $govuk-print-text-colour;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
add_gem_component_stylesheet("title")
|
|
3
|
-
|
|
4
|
-
average_title_length ||= false
|
|
5
|
-
|
|
6
|
-
context ||= false
|
|
7
|
-
context_locale ||= false
|
|
8
|
-
context_inside ||= false
|
|
9
|
-
|
|
10
|
-
inverse ||= false
|
|
11
|
-
local_assigns[:margin_bottom] ||= 8
|
|
12
|
-
margin_bottom = [*0..9].include?(local_assigns[:margin_bottom]) ? "govuk-!-margin-bottom-#{local_assigns[:margin_bottom]}" : "govuk-!-margin-bottom-3"
|
|
13
|
-
|
|
14
|
-
classes = %w[gem-c-title]
|
|
15
|
-
classes << "gem-c-title--inverse" if inverse
|
|
16
|
-
classes << margin_bottom
|
|
17
|
-
|
|
18
|
-
heading_classes = %w[gem-c-title__text]
|
|
19
|
-
heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
|
|
20
|
-
%>
|
|
21
|
-
<% @context_block = capture do %>
|
|
22
|
-
<span class="govuk-caption-xl gem-c-title__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
|
|
23
|
-
<%= context %>
|
|
24
|
-
</span>
|
|
25
|
-
<% end %>
|
|
26
|
-
|
|
27
|
-
<%= content_tag(:div, class: classes) do %>
|
|
28
|
-
<% if context && !context_inside %>
|
|
29
|
-
<%= @context_block %>
|
|
30
|
-
<% end %>
|
|
31
|
-
|
|
32
|
-
<h1 class="<%= heading_classes.join(" ") %>">
|
|
33
|
-
<% if context && context_inside %>
|
|
34
|
-
<%= @context_block %>
|
|
35
|
-
<% end %>
|
|
36
|
-
<%= title %>
|
|
37
|
-
</h1>
|
|
38
|
-
<% end %>
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
name: Page title
|
|
2
|
-
description: A page title with optional context label
|
|
3
|
-
body: |
|
|
4
|
-
This contains an optional parameter for average title length. The two valid
|
|
5
|
-
values for this parameter are 'medium' or 'long'. Medium titles are titles
|
|
6
|
-
where the average is around 30 characters or less. Long titles would have
|
|
7
|
-
an average length of nearer 50 characters or more.
|
|
8
|
-
|
|
9
|
-
On average the titles on government bits of content are 50 characters. The
|
|
10
|
-
average for bits of general guidance are nearer 27 characters long.
|
|
11
|
-
accessibility_criteria: |
|
|
12
|
-
The page title must:
|
|
13
|
-
|
|
14
|
-
- be part of a correct heading structure for a page
|
|
15
|
-
- be semantically represented as a heading
|
|
16
|
-
- convey the heading level
|
|
17
|
-
shared_accessibility_criteria:
|
|
18
|
-
- link
|
|
19
|
-
examples:
|
|
20
|
-
default:
|
|
21
|
-
data:
|
|
22
|
-
title: My page title
|
|
23
|
-
with_context:
|
|
24
|
-
data:
|
|
25
|
-
context: Publication
|
|
26
|
-
title: My page title
|
|
27
|
-
with_context_inside:
|
|
28
|
-
description: |
|
|
29
|
-
If the context should be considered part of the page heading, you can nest the context within the <code><h1></code>.
|
|
30
|
-
data:
|
|
31
|
-
context: Publication
|
|
32
|
-
title: My page title
|
|
33
|
-
context_inside: true
|
|
34
|
-
with_context_language_labelled:
|
|
35
|
-
description: |
|
|
36
|
-
Sometimes this component appears on a page that has been translated. The title will naturally be supplied in the required language but the context string may fall back to the default. In these instances we need to label the language so the page remains semantic and screenreaders can handle the switch.
|
|
37
|
-
|
|
38
|
-
The `lang` attribute **must** be set to a [valid BCP47 string](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#Language_tag_syntax). A valid code can be the two or three letter language code - for example, English is `en` or `eng`, Korean is `ko` or `kor` - but if in doubt please check.
|
|
39
|
-
data:
|
|
40
|
-
context: Publication
|
|
41
|
-
context_locale: en
|
|
42
|
-
title: My page title
|
|
43
|
-
long_title_with_context:
|
|
44
|
-
data:
|
|
45
|
-
context: Publication
|
|
46
|
-
title: My page title which is often really long and verbose and has lots of extra words it doesn't need
|
|
47
|
-
average_title_length: long
|
|
48
|
-
with_margin_bottom:
|
|
49
|
-
description: |
|
|
50
|
-
The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 50px.
|
|
51
|
-
|
|
52
|
-
This margin is responsive at certain sizes, see the link above for more detail. Note also that the component has a (responsive) top margin set as well, which cannot be modified.
|
|
53
|
-
data:
|
|
54
|
-
title: 'Margin bottom of 10px'
|
|
55
|
-
margin_bottom: 2
|
|
56
|
-
in_html_publication:
|
|
57
|
-
description: Page titles are used in HTML Publications ([see example](https://www.gov.uk/government/publications/fees-for-civil-and-family-courts/court-fees-for-the-high-court-county-court-and-family-court))
|
|
58
|
-
data:
|
|
59
|
-
context: Publication
|
|
60
|
-
title: HTML publication page title
|
|
61
|
-
inverse: true
|
|
62
|
-
margin_bottom: 0
|
|
63
|
-
context:
|
|
64
|
-
dark_background: true
|