govuk_publishing_components 23.12.2 → 23.12.3
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/javascripts/govuk_publishing_components/components/header.js +3 -0
- data/app/assets/javascripts/govuk_publishing_components/components/layout-header.js +5 -0
- data/app/assets/javascripts/govuk_publishing_components/modules.js +1 -1
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +0 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_layout-footer.scss +5 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/print/_govspeak.scss +5 -0
- data/app/views/govuk_publishing_components/components/_button.html.erb +1 -0
- data/app/views/govuk_publishing_components/components/_layout_header.html.erb +3 -2
- data/app/views/govuk_publishing_components/components/_subscription-links.html.erb +3 -0
- data/app/views/govuk_publishing_components/components/_subscription_links.html.erb +82 -0
- data/app/views/govuk_publishing_components/components/_translation-nav.html.erb +3 -0
- data/app/views/govuk_publishing_components/components/_translation_nav.html.erb +30 -0
- data/app/views/govuk_publishing_components/components/docs/layout_header.yml +21 -0
- data/app/views/govuk_publishing_components/components/docs/subscription-links.yml +3 -0
- data/app/views/govuk_publishing_components/components/docs/subscription_links.yml +100 -0
- data/app/views/govuk_publishing_components/components/docs/translation-nav.yml +3 -1
- data/app/views/govuk_publishing_components/components/docs/translation_nav.yml +137 -0
- data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb +3 -3
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +7 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss +0 -125
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: '0836916950b2ba5523342245a89390195dbc6687424656f229384afc5d079313'
|
|
4
|
+
data.tar.gz: 838a58d52afa6587637a377cee6a68077b6eb8ff1fecb2edfe820775943e4be9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c04d9f5166eb2689a04e4b2307404d2f9e8c8aeeb419fd48d102351532b3c361e002b8e31b7901763eba35ff0ceb38bcf14db3042ef6757d7072ce4e6fd9d7c2
|
|
7
|
+
data.tar.gz: 89cb76ebcb46366ffb1197e6031115d527ce40ae2eaf30301b8f6985df197875b34d4545e41512f9f789b1f7107f9beac28fc1a716be51990f8eacb9959dbed4
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<%
|
|
2
|
+
# button_helper.css_classes generates "gem-c-button"
|
|
2
3
|
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
3
4
|
local_assigns[:classes] = shared_helper.classes
|
|
4
5
|
button = GovukPublishingComponents::Presenters::ButtonHelper.new(local_assigns)
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
search ||= false
|
|
6
6
|
search_left ||= false
|
|
7
7
|
navigation_items ||= []
|
|
8
|
+
navigation_aria_label ||= "Top level"
|
|
8
9
|
remove_bottom_border ||= false
|
|
9
10
|
search_left ||= false
|
|
10
11
|
width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
|
|
@@ -28,7 +29,7 @@
|
|
|
28
29
|
<%= render "govuk_publishing_components/components/layout_header/search" %>
|
|
29
30
|
</div>
|
|
30
31
|
<div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
|
|
31
|
-
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items %>
|
|
32
|
+
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
|
|
32
33
|
</div>
|
|
33
34
|
</div>
|
|
34
35
|
<% else %>
|
|
@@ -37,7 +38,7 @@
|
|
|
37
38
|
<%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
|
|
38
39
|
</div>
|
|
39
40
|
<div class="govuk-header__content gem-c-header__content">
|
|
40
|
-
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items %>
|
|
41
|
+
<%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
|
|
41
42
|
</div>
|
|
42
43
|
<% if search %>
|
|
43
44
|
<div class="govuk-grid-column-one-third gem-c-layout-header__search">
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<%
|
|
2
|
+
brand ||= false
|
|
3
|
+
brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
|
|
4
|
+
|
|
5
|
+
sl_helper = GovukPublishingComponents::Presenters::SubscriptionLinksHelper.new(local_assigns)
|
|
6
|
+
shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
|
|
7
|
+
|
|
8
|
+
local_assigns[:margin_bottom] ||= 0
|
|
9
|
+
local_assigns[:margin_bottom] = 0 if local_assigns[:margin_bottom] > 9
|
|
10
|
+
|
|
11
|
+
css_classes = %w( gem-c-subscription-links )
|
|
12
|
+
css_classes << (shared_helper.get_margin_bottom) unless local_assigns[:margin_bottom] == 0
|
|
13
|
+
css_classes << brand_helper.brand_class
|
|
14
|
+
css_classes << "gem-c-subscription-links--with-feed-box" if sl_helper.feed_link_box_value
|
|
15
|
+
|
|
16
|
+
data = {"module": "gem-toggle"} if sl_helper.feed_link_box_value
|
|
17
|
+
|
|
18
|
+
hide_heading ||= false
|
|
19
|
+
|
|
20
|
+
email_signup_link_text_locale = local_assigns[:email_signup_link_text_locale].presence
|
|
21
|
+
feed_link_text_locale = local_assigns[:feed_link_text_locale].presence
|
|
22
|
+
%>
|
|
23
|
+
<% if sl_helper.component_data_is_valid? %>
|
|
24
|
+
<%= tag.section class: css_classes, data: data do %>
|
|
25
|
+
<% unless hide_heading %>
|
|
26
|
+
<h2 class="gem-c-subscription-links__hidden-header visuallyhidden"><%= t("govuk_component.subscription_links.subscriptions", default: "Subscriptions") %></h2>
|
|
27
|
+
<% end %>
|
|
28
|
+
<ul
|
|
29
|
+
class="gem-c-subscription-links__list<%= ' gem-c-subscription-links__list--small' if local_assigns[:small_form] == true %>"
|
|
30
|
+
<%= "data-module=track-click" if sl_helper.tracking_is_present? %>
|
|
31
|
+
>
|
|
32
|
+
<% if sl_helper.email_signup_link.present? %>
|
|
33
|
+
<li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>" >
|
|
34
|
+
<% email_link_text = capture do %>
|
|
35
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="15.75" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M19.687 0H1.312C.589 0 0 .587 0 1.313v13.124c0 .726.588 1.313 1.313 1.313h18.374c.725 0 1.313-.587 1.313-1.313V1.313C21 .587 20.412 0 19.687 0zm-2.625 2.625L10.5 7.875l-6.563-5.25h13.126zm1.313 10.5H2.625V3.937L10.5 10.5l7.875-6.563v9.188z"/></svg>
|
|
36
|
+
<%= sl_helper.email_signup_link_text %>
|
|
37
|
+
<% end %>
|
|
38
|
+
<%= link_to email_link_text, sl_helper.email_signup_link, {
|
|
39
|
+
class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
|
|
40
|
+
data: sl_helper.email_signup_link_data_attributes,
|
|
41
|
+
lang: email_signup_link_text_locale
|
|
42
|
+
} %>
|
|
43
|
+
</li>
|
|
44
|
+
<% end %>
|
|
45
|
+
|
|
46
|
+
<% if sl_helper.feed_link_box_value || sl_helper.feed_link %>
|
|
47
|
+
<li class="gem-c-subscription-links__list-item<%= ' gem-c-subscription-links__list-item--small' if local_assigns[:small_form] == true %>">
|
|
48
|
+
<% feed_link_text = capture do %>
|
|
49
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" class="gem-c-subscription-links__icon" focusable="false" fill="currentColor" aria-hidden="true"><path d="M1.996 11A2 2 0 0 0 0 12.993c0 1.101.895 1.99 1.996 1.99 1.106 0 2-.889 2-1.99a2 2 0 0 0-2-1.993zM.002 5.097V7.97c1.872 0 3.632.733 4.958 2.059A6.984 6.984 0 0 1 7.015 15h2.888c0-5.461-4.443-9.903-9.9-9.903zM.006 0v2.876c6.676 0 12.11 5.44 12.11 12.124H15C15 6.731 8.273 0 .006 0z"/></svg>
|
|
50
|
+
<%= sl_helper.feed_link_text %>
|
|
51
|
+
<% end %>
|
|
52
|
+
<%= tag.button feed_link_text, {
|
|
53
|
+
class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--button",
|
|
54
|
+
data: sl_helper.feed_link_data_attributes,
|
|
55
|
+
lang: feed_link_text_locale
|
|
56
|
+
} if sl_helper.feed_link_box_value %>
|
|
57
|
+
<%= link_to feed_link_text, sl_helper.feed_link,
|
|
58
|
+
{
|
|
59
|
+
class: "gem-c-subscription-links__item #{brand_helper.color_class} gem-c-subscription-links__item--link",
|
|
60
|
+
data: sl_helper.feed_link_data_attributes,
|
|
61
|
+
lang: feed_link_text_locale
|
|
62
|
+
} unless sl_helper.feed_link_box_value %>
|
|
63
|
+
</li>
|
|
64
|
+
<% end %>
|
|
65
|
+
</ul>
|
|
66
|
+
|
|
67
|
+
<% if sl_helper.feed_link_box_value %>
|
|
68
|
+
<div class="gem-c-subscription-links__feed-box js-hidden" id="<%= sl_helper.feed_box_id %>">
|
|
69
|
+
<h3 class="gem-c-subscription-links__feed-hidden-description visuallyhidden govuk-!-margin-top-0"><%= sl_helper.feed_link_text %></h3>
|
|
70
|
+
<div lang="en">
|
|
71
|
+
<%= render "govuk_publishing_components/components/input", {
|
|
72
|
+
label: {
|
|
73
|
+
text: "Copy and paste this URL into your feed reader"
|
|
74
|
+
},
|
|
75
|
+
name: "feed-reader-box",
|
|
76
|
+
value: feed_link_box_value
|
|
77
|
+
} %>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
<% end %>
|
|
81
|
+
<% end %>
|
|
82
|
+
<% end %>
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
<%
|
|
2
|
+
# DO NOT MAKE CHANGES TO THIS FILE
|
|
3
|
+
# It is a temporary copy of _translation_nav.html.erb and will be deleted shortly
|
|
4
|
+
|
|
2
5
|
brand ||= false
|
|
3
6
|
brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
|
|
4
7
|
translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<%
|
|
2
|
+
brand ||= false
|
|
3
|
+
brand_helper = GovukPublishingComponents::AppHelpers::BrandHelper.new(brand)
|
|
4
|
+
translation_helper = GovukPublishingComponents::Presenters::TranslationNavHelper.new(local_assigns)
|
|
5
|
+
%>
|
|
6
|
+
<% if translation_helper.has_translations? %>
|
|
7
|
+
<nav role="navigation"
|
|
8
|
+
class="gem-c-translation-nav <%= translation_helper.classes %> <%= brand_helper.brand_class %>"
|
|
9
|
+
aria-label="<%= t("common.translations") %>"
|
|
10
|
+
<%= "data-module=\"track-click\"" if translation_helper.tracking_is_present? %>
|
|
11
|
+
>
|
|
12
|
+
<ul class="gem-c-translation-nav__list">
|
|
13
|
+
<% translation_helper.translations.each.with_index do |translation, i| %>
|
|
14
|
+
<li class="gem-c-translation-nav__list-item">
|
|
15
|
+
<% if translation[:active] %>
|
|
16
|
+
<span lang="<%= translation[:locale] %>"><%= translation[:text] %></span>
|
|
17
|
+
<% else %>
|
|
18
|
+
<%= link_to translation[:text], translation[:base_path],
|
|
19
|
+
hreflang: translation[:locale],
|
|
20
|
+
lang: translation[:locale],
|
|
21
|
+
rel: "alternate",
|
|
22
|
+
class: "gem-c-translation-nav__link #{brand_helper.color_class}",
|
|
23
|
+
data: translation[:data_attributes]
|
|
24
|
+
%>
|
|
25
|
+
<% end %>
|
|
26
|
+
</li>
|
|
27
|
+
<% end %>
|
|
28
|
+
</ul>
|
|
29
|
+
</nav>
|
|
30
|
+
<% end %>
|
|
@@ -60,6 +60,27 @@ examples:
|
|
|
60
60
|
- text: News and communications
|
|
61
61
|
href: "item-6"
|
|
62
62
|
active: true
|
|
63
|
+
with_custom_navigation_aria_label:
|
|
64
|
+
description: The navigation has `aria-label="Top level"` by default. This option is here for when the `aria-label` needs to be more descriptive than that.
|
|
65
|
+
data:
|
|
66
|
+
search_left: true
|
|
67
|
+
navigation_aria_label: "Departments and policy"
|
|
68
|
+
navigation_items:
|
|
69
|
+
- text: Departments
|
|
70
|
+
href: "item-1"
|
|
71
|
+
- text: Worldwide
|
|
72
|
+
href: "item-2"
|
|
73
|
+
- text: How government works
|
|
74
|
+
href: "item-3"
|
|
75
|
+
- text: Get involved
|
|
76
|
+
href: "item-4"
|
|
77
|
+
- text: Consultations
|
|
78
|
+
href: "item-4"
|
|
79
|
+
- text: Statistics
|
|
80
|
+
href: "item-5"
|
|
81
|
+
- text: News and communications
|
|
82
|
+
href: "item-6"
|
|
83
|
+
active: true
|
|
63
84
|
full_width:
|
|
64
85
|
description: |
|
|
65
86
|
This is difficult to preview because the preview windows are constrained, but the header will stretch to the size of its container.
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
name: Subscription links
|
|
2
|
+
description: Links to ‘Get emails’ and ‘Subscribe to feed’
|
|
3
|
+
body: |
|
|
4
|
+
<strong>NOTE: This component includes a h2 heading by default but can be suppressed by using `hide_heading` option (see below)<strong>
|
|
5
|
+
accessibility_criteria: |
|
|
6
|
+
Icons in subscription links must be presentational and ignored by screen readers.
|
|
7
|
+
|
|
8
|
+
Toggle elements in the component must:
|
|
9
|
+
|
|
10
|
+
- be usable with a keyboard
|
|
11
|
+
- be usable with touch
|
|
12
|
+
- be recognised by screen readers as a button
|
|
13
|
+
- announce to screen readers whether they are expanded or collapsed
|
|
14
|
+
- show hidden elements by default when Javascript is disabled
|
|
15
|
+
shared_accessibility_criteria:
|
|
16
|
+
- link
|
|
17
|
+
examples:
|
|
18
|
+
default:
|
|
19
|
+
data:
|
|
20
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
21
|
+
feed_link: '/foreign-travel-advice/singapore.atom'
|
|
22
|
+
with_margin:
|
|
23
|
+
description: 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 no margin bottom, although some margin is supplied by the links themselves (so that when they stack on mobile there is space between them).
|
|
24
|
+
data:
|
|
25
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
26
|
+
feed_link: '/foreign-travel-advice/singapore.atom'
|
|
27
|
+
margin_bottom: 9
|
|
28
|
+
with_only_email_signup_link:
|
|
29
|
+
data:
|
|
30
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
31
|
+
with_only_feed_link:
|
|
32
|
+
data:
|
|
33
|
+
feed_link: '/foreign-travel-advice/singapore.atom'
|
|
34
|
+
with_custom_text:
|
|
35
|
+
data:
|
|
36
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
37
|
+
email_signup_link_text: 'Get notifications'
|
|
38
|
+
feed_link: '/foreign-travel-advice/singapore.atom'
|
|
39
|
+
feed_link_text: 'View feed'
|
|
40
|
+
with_copyable_feed_link:
|
|
41
|
+
description: |
|
|
42
|
+
This option changes the feed link to a toggle control, which opens a hidden element containing an input prepopulated with the value passed to the component, usually a URL to an atom feed. This uses the [form input](/component-guide/input) component.
|
|
43
|
+
|
|
44
|
+
Note that this option overrides the feed_link option, so if both are passed feed_link is ignored. Note that a value for email_signup_link can also be passed as normal.
|
|
45
|
+
data:
|
|
46
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
47
|
+
feed_link_box_value: 'https://www.gov.uk/government/organisations/attorney-generals-office.atom'
|
|
48
|
+
with_branding:
|
|
49
|
+
description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
|
|
50
|
+
data:
|
|
51
|
+
brand: 'attorney-generals-office'
|
|
52
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
53
|
+
feed_link: '/foreign-travel-advice/singapore.atom'
|
|
54
|
+
with_tracking:
|
|
55
|
+
description: Data attributes can be passed for each link as shown.
|
|
56
|
+
data:
|
|
57
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
58
|
+
email_signup_link_data_attributes: {
|
|
59
|
+
track_category: 'email_link_category',
|
|
60
|
+
track_action: 1.1,
|
|
61
|
+
track_label: 'email_link_label',
|
|
62
|
+
track_options: {
|
|
63
|
+
dimension28: 1,
|
|
64
|
+
dimension29: 'dimension29EmailLink'
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
feed_link_box_value: 'https://www.gov.uk/government/organisations/attorney-generals-office.atom'
|
|
68
|
+
feed_link_data_attributes: {
|
|
69
|
+
track_category: 'feed_link_category',
|
|
70
|
+
track_action: 1.2,
|
|
71
|
+
track_label: 'feed_link_label',
|
|
72
|
+
track_options: {
|
|
73
|
+
dimension28: 7,
|
|
74
|
+
dimension29: 'dimension29feedLink'
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
as_small_form:
|
|
78
|
+
data:
|
|
79
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
80
|
+
feed_link: '/foreign-travel-advice/singapore.atom'
|
|
81
|
+
small_form: true
|
|
82
|
+
without_heading:
|
|
83
|
+
description: |
|
|
84
|
+
By default the component includes an h2 heading. The component could be used anywhere on the page and could mean that it produces invalid markup or make the site unaccessible.
|
|
85
|
+
data:
|
|
86
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
87
|
+
feed_link: '/foreign-travel-advice/singapore.atom'
|
|
88
|
+
hide_heading: true
|
|
89
|
+
with_a_different_language:
|
|
90
|
+
data:
|
|
91
|
+
email_signup_link: '/foreign-travel-advice/singapore/email-signup'
|
|
92
|
+
email_signup_link_text: 'Recevez des notifications'
|
|
93
|
+
email_signup_link_text_locale: 'fr'
|
|
94
|
+
feed_link: '/foreign-travel-advice/singapore.atom'
|
|
95
|
+
feed_link_text: 'Flux RSS'
|
|
96
|
+
feed_link_text_locale: 'fr'
|
|
97
|
+
description: |
|
|
98
|
+
The component is used on translated pages that don't have a translation for the text strings. This means that it could display the fallback English string if the translate method can't find an appropriate translation. This makes sure that the `lang` can be set to ensure that browsers understand which parts of the page are in each language.
|
|
99
|
+
|
|
100
|
+
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.
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
# DO NOT MAKE CHANGES TO THIS FILE
|
|
2
|
+
# It is a temporary copy of translation_nav.yml and will be deleted shortly
|
|
3
|
+
|
|
1
4
|
name: Translation navigation
|
|
2
5
|
description: A list of links to available translations
|
|
3
6
|
body: The active property indicates the current language.
|
|
@@ -134,4 +137,3 @@ examples:
|
|
|
134
137
|
dimension29: 'dimension29Welsh'
|
|
135
138
|
context:
|
|
136
139
|
dark_background: true
|
|
137
|
-
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
name: Translation navigation
|
|
2
|
+
description: A list of links to available translations
|
|
3
|
+
body: The active property indicates the current language.
|
|
4
|
+
accessibility_criteria: |
|
|
5
|
+
The component must:
|
|
6
|
+
|
|
7
|
+
- be [a landmark with a navigation role](https://accessibility.blog.gov.uk/2016/05/27/using-navigation-landmarks/)
|
|
8
|
+
- have an accessible name in the current language, eg "Translations"
|
|
9
|
+
|
|
10
|
+
The translation links must:
|
|
11
|
+
|
|
12
|
+
- [identify the language of the text](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html#meaning-other-lang-id-examples-head)
|
|
13
|
+
|
|
14
|
+
[Watch a screen reader pronounce text differently based on lang attribute](https://bit.ly/screenreaderpronunciation)
|
|
15
|
+
shared_accessibility_criteria:
|
|
16
|
+
- link
|
|
17
|
+
examples:
|
|
18
|
+
default:
|
|
19
|
+
data:
|
|
20
|
+
translations:
|
|
21
|
+
- locale: 'en'
|
|
22
|
+
base_path: '/en'
|
|
23
|
+
text: 'English'
|
|
24
|
+
active: true
|
|
25
|
+
- locale: 'hi'
|
|
26
|
+
base_path: '/hi'
|
|
27
|
+
text: 'हिंदी'
|
|
28
|
+
multiple_translations:
|
|
29
|
+
data:
|
|
30
|
+
translations:
|
|
31
|
+
- locale: 'en'
|
|
32
|
+
base_path: '/en'
|
|
33
|
+
text: 'English'
|
|
34
|
+
active: true
|
|
35
|
+
- locale: 'fr'
|
|
36
|
+
base_path: '/fr'
|
|
37
|
+
text: 'Français'
|
|
38
|
+
- locale: 'hi'
|
|
39
|
+
base_path: '/hi'
|
|
40
|
+
text: 'हिंदी'
|
|
41
|
+
- locale: 'ja'
|
|
42
|
+
base_path: '/ja'
|
|
43
|
+
text: '日本語'
|
|
44
|
+
- locale: 'ur'
|
|
45
|
+
base_path: '/ur'
|
|
46
|
+
text: 'اردو'
|
|
47
|
+
- locale: 'zh'
|
|
48
|
+
base_path: '/zh'
|
|
49
|
+
text: '中文'
|
|
50
|
+
right_to_left:
|
|
51
|
+
data:
|
|
52
|
+
translations:
|
|
53
|
+
- locale: 'en'
|
|
54
|
+
base_path: '/en'
|
|
55
|
+
text: 'English'
|
|
56
|
+
- locale: 'ar'
|
|
57
|
+
base_path: '/ar'
|
|
58
|
+
text: 'العربية'
|
|
59
|
+
active: true
|
|
60
|
+
context:
|
|
61
|
+
right_to_left: true
|
|
62
|
+
with_branding:
|
|
63
|
+
description: Organisation [colour branding](https://github.com/alphagov/govuk_publishing_components/blob/master/docs/component_branding.md) can be added to the component as shown.
|
|
64
|
+
data:
|
|
65
|
+
brand: 'wales-office'
|
|
66
|
+
translations:
|
|
67
|
+
- locale: 'en'
|
|
68
|
+
base_path: '/en'
|
|
69
|
+
text: 'English'
|
|
70
|
+
active: true
|
|
71
|
+
- locale: 'cy'
|
|
72
|
+
base_path: '/cy'
|
|
73
|
+
text: 'Cymraeg'
|
|
74
|
+
with_no_top_margin:
|
|
75
|
+
data:
|
|
76
|
+
no_margin_top: true
|
|
77
|
+
translations:
|
|
78
|
+
- locale: 'en'
|
|
79
|
+
base_path: '/en'
|
|
80
|
+
text: 'English'
|
|
81
|
+
active: true
|
|
82
|
+
- locale: 'cy'
|
|
83
|
+
base_path: '/cy'
|
|
84
|
+
text: 'Cymraeg'
|
|
85
|
+
with_tracking:
|
|
86
|
+
description: Data attributes can be passed for each link as shown.
|
|
87
|
+
data:
|
|
88
|
+
translations:
|
|
89
|
+
- locale: 'en'
|
|
90
|
+
base_path: '/en'
|
|
91
|
+
text: 'English'
|
|
92
|
+
active: true
|
|
93
|
+
data_attributes:
|
|
94
|
+
track_category: 'categoryEnglish'
|
|
95
|
+
track_action: 1.1
|
|
96
|
+
track_label: 'labelEnglish'
|
|
97
|
+
track_options:
|
|
98
|
+
dimension28: 1
|
|
99
|
+
dimension29: 'dimension29English'
|
|
100
|
+
- locale: 'cy'
|
|
101
|
+
base_path: '/cy'
|
|
102
|
+
text: 'Cymraeg'
|
|
103
|
+
data_attributes:
|
|
104
|
+
track_category: 'categoryWelsh'
|
|
105
|
+
track_action: 1.2
|
|
106
|
+
track_label: 'labelWelsh'
|
|
107
|
+
track_options:
|
|
108
|
+
dimension28: 1
|
|
109
|
+
dimension29: 'dimension29Welsh'
|
|
110
|
+
inverse:
|
|
111
|
+
data:
|
|
112
|
+
inverse: true
|
|
113
|
+
translations:
|
|
114
|
+
- locale: 'en'
|
|
115
|
+
base_path: '/en'
|
|
116
|
+
text: 'English'
|
|
117
|
+
active: true
|
|
118
|
+
data_attributes:
|
|
119
|
+
track_category: 'categoryEnglish'
|
|
120
|
+
track_action: 1.1
|
|
121
|
+
track_label: 'labelEnglish'
|
|
122
|
+
track_options:
|
|
123
|
+
dimension28: 1
|
|
124
|
+
dimension29: 'dimension29English'
|
|
125
|
+
- locale: 'cy'
|
|
126
|
+
base_path: '/cy'
|
|
127
|
+
text: 'Cymraeg'
|
|
128
|
+
data_attributes:
|
|
129
|
+
track_category: 'categoryWelsh'
|
|
130
|
+
track_action: 1.2
|
|
131
|
+
track_label: 'labelWelsh'
|
|
132
|
+
track_options:
|
|
133
|
+
dimension28: 1
|
|
134
|
+
dimension29: 'dimension29Welsh'
|
|
135
|
+
context:
|
|
136
|
+
dark_background: true
|
|
137
|
+
|
data/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<% if navigation_items.any? %>
|
|
2
2
|
<button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
|
|
3
|
-
|
|
4
|
-
<ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end"
|
|
3
|
+
<%= tag.nav(class: "gem-c-header__nav", 'aria-label': navigation_aria_label ? navigation_aria_label : nil ) do %>
|
|
4
|
+
<ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
|
|
5
5
|
<% navigation_items.each_with_index do |item, index| %>
|
|
6
6
|
<li class="govuk-header__navigation-item <%= "govuk-header__navigation-item--active" if item[:active] %>
|
|
7
7
|
<%= "govuk-header__navigation-item--collapsed-menu-only" if item[:show_only_in_collapsed_menu] %>">
|
|
@@ -13,5 +13,5 @@
|
|
|
13
13
|
</li>
|
|
14
14
|
<% end %>
|
|
15
15
|
</ul>
|
|
16
|
-
|
|
16
|
+
<% end %>
|
|
17
17
|
<% end %>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_publishing_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 23.12.
|
|
4
|
+
version: 23.12.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-01-
|
|
11
|
+
date: 2021-01-14 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govuk_app_config
|
|
@@ -426,6 +426,7 @@ files:
|
|
|
426
426
|
- app/assets/javascripts/govuk_publishing_components/components/feedback.js
|
|
427
427
|
- app/assets/javascripts/govuk_publishing_components/components/govspeak.js
|
|
428
428
|
- app/assets/javascripts/govuk_publishing_components/components/header.js
|
|
429
|
+
- app/assets/javascripts/govuk_publishing_components/components/layout-header.js
|
|
429
430
|
- app/assets/javascripts/govuk_publishing_components/components/modal-dialogue.js
|
|
430
431
|
- app/assets/javascripts/govuk_publishing_components/components/print-link.js
|
|
431
432
|
- app/assets/javascripts/govuk_publishing_components/components/radio.js
|
|
@@ -525,7 +526,6 @@ files:
|
|
|
525
526
|
- app/assets/stylesheets/govuk_publishing_components/components/_taxonomy-list.scss
|
|
526
527
|
- app/assets/stylesheets/govuk_publishing_components/components/_textarea.scss
|
|
527
528
|
- app/assets/stylesheets/govuk_publishing_components/components/_title.scss
|
|
528
|
-
- app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss
|
|
529
529
|
- app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss
|
|
530
530
|
- app/assets/stylesheets/govuk_publishing_components/components/_warning-text.scss
|
|
531
531
|
- app/assets/stylesheets/govuk_publishing_components/components/govspeak/_advisory.scss
|
|
@@ -671,6 +671,7 @@ files:
|
|
|
671
671
|
- app/views/govuk_publishing_components/components/_step_by_step_nav_header.html.erb
|
|
672
672
|
- app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb
|
|
673
673
|
- app/views/govuk_publishing_components/components/_subscription-links.html.erb
|
|
674
|
+
- app/views/govuk_publishing_components/components/_subscription_links.html.erb
|
|
674
675
|
- app/views/govuk_publishing_components/components/_success_alert.html.erb
|
|
675
676
|
- app/views/govuk_publishing_components/components/_summary_list.html.erb
|
|
676
677
|
- app/views/govuk_publishing_components/components/_table.html.erb
|
|
@@ -679,6 +680,7 @@ files:
|
|
|
679
680
|
- app/views/govuk_publishing_components/components/_textarea.html.erb
|
|
680
681
|
- app/views/govuk_publishing_components/components/_title.html.erb
|
|
681
682
|
- app/views/govuk_publishing_components/components/_translation-nav.html.erb
|
|
683
|
+
- app/views/govuk_publishing_components/components/_translation_nav.html.erb
|
|
682
684
|
- app/views/govuk_publishing_components/components/_warning_text.html.erb
|
|
683
685
|
- app/views/govuk_publishing_components/components/attachment/_thumbnail_document.svg
|
|
684
686
|
- app/views/govuk_publishing_components/components/attachment/_thumbnail_generic.svg
|
|
@@ -751,6 +753,7 @@ files:
|
|
|
751
753
|
- app/views/govuk_publishing_components/components/docs/step_by_step_nav_header.yml
|
|
752
754
|
- app/views/govuk_publishing_components/components/docs/step_by_step_nav_related.yml
|
|
753
755
|
- app/views/govuk_publishing_components/components/docs/subscription-links.yml
|
|
756
|
+
- app/views/govuk_publishing_components/components/docs/subscription_links.yml
|
|
754
757
|
- app/views/govuk_publishing_components/components/docs/success_alert.yml
|
|
755
758
|
- app/views/govuk_publishing_components/components/docs/summary_list.yml
|
|
756
759
|
- app/views/govuk_publishing_components/components/docs/table.yml
|
|
@@ -759,6 +762,7 @@ files:
|
|
|
759
762
|
- app/views/govuk_publishing_components/components/docs/textarea.yml
|
|
760
763
|
- app/views/govuk_publishing_components/components/docs/title.yml
|
|
761
764
|
- app/views/govuk_publishing_components/components/docs/translation-nav.yml
|
|
765
|
+
- app/views/govuk_publishing_components/components/docs/translation_nav.yml
|
|
762
766
|
- app/views/govuk_publishing_components/components/docs/warning_text.yml
|
|
763
767
|
- app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb
|
|
764
768
|
- app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb
|
data/app/assets/stylesheets/govuk_publishing_components/components/_transition-countdown.scss
DELETED
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
$transition-campaign-red: #ff003b;
|
|
2
|
-
$transition-campaign-dark-blue: #1e1348;
|
|
3
|
-
|
|
4
|
-
.gem-c-transition-countdown {
|
|
5
|
-
@include govuk-font(19);
|
|
6
|
-
margin-bottom: govuk-spacing(6);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.gem-c-transition-countdown--cta {
|
|
10
|
-
background-color: govuk-colour('light-grey', $legacy: 'grey-4');
|
|
11
|
-
border-top: 4px solid $transition-campaign-red;
|
|
12
|
-
display: block;
|
|
13
|
-
padding: govuk-spacing(3);
|
|
14
|
-
text-decoration: none;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.gem-c-transition-countdown__title {
|
|
18
|
-
@extend %govuk-heading-m;
|
|
19
|
-
color: $transition-campaign-dark-blue;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.gem-c-transition-countdown__countdown {
|
|
23
|
-
margin-top: 0;
|
|
24
|
-
margin-bottom: govuk-spacing(2);
|
|
25
|
-
|
|
26
|
-
@include govuk-media-query($from: tablet) {
|
|
27
|
-
margin-bottom: govuk-spacing(0);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.gem-c-transition-countdown__countdown-number {
|
|
32
|
-
@include govuk-font($size: 80, $weight: bold, $line-height: 60px);
|
|
33
|
-
|
|
34
|
-
min-width: 50px;
|
|
35
|
-
text-align: center;
|
|
36
|
-
display: inline-block;
|
|
37
|
-
background: $transition-campaign-dark-blue;
|
|
38
|
-
color: govuk-colour('white');
|
|
39
|
-
position: relative;
|
|
40
|
-
margin-bottom: govuk-spacing(2);
|
|
41
|
-
|
|
42
|
-
@include govuk-media-query($from: tablet) {
|
|
43
|
-
padding: govuk-spacing(2) govuk-spacing(1);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&:after {
|
|
47
|
-
position: absolute;
|
|
48
|
-
left: 0;
|
|
49
|
-
top: 50%;
|
|
50
|
-
margin-top: -1px;
|
|
51
|
-
height: 3px;
|
|
52
|
-
background: govuk-colour('white');
|
|
53
|
-
content: '';
|
|
54
|
-
width: 100%;
|
|
55
|
-
display: block;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
&:first-child {
|
|
59
|
-
margin-right: 3px;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&:nth-child(2) {
|
|
63
|
-
margin-right: govuk-spacing(2);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.gem-c-transition-countdown__countdown-text {
|
|
68
|
-
@extend %govuk-heading-m;
|
|
69
|
-
|
|
70
|
-
display: inline-block;
|
|
71
|
-
margin-bottom: 0;
|
|
72
|
-
height: 45px;
|
|
73
|
-
vertical-align: middle;
|
|
74
|
-
color: $transition-campaign-dark-blue;
|
|
75
|
-
|
|
76
|
-
@include govuk-media-query($from: tablet) {
|
|
77
|
-
height: 80px;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&:after {
|
|
81
|
-
content: '' / '.'; // Wrap up the countdown-text element in a statement for screen readers
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.gem-c-transition-countdown__text {
|
|
86
|
-
@extend %govuk-link;
|
|
87
|
-
|
|
88
|
-
margin-top: 0;
|
|
89
|
-
margin-bottom: 0;
|
|
90
|
-
text-decoration: underline;
|
|
91
|
-
|
|
92
|
-
@include govuk-media-query($from: tablet) {
|
|
93
|
-
margin-bottom: govuk-spacing(2);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.gem-c-transition-countdown:focus {
|
|
98
|
-
.gem-c-transition-countdown__countdown-number:after {
|
|
99
|
-
background-color: $govuk-focus-colour;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.gem-c-transition-countdown__text {
|
|
103
|
-
text-decoration: none;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
@include govuk-compatibility(govuk_template) {
|
|
108
|
-
.gem-c-transition-countdown__title {
|
|
109
|
-
margin-bottom: govuk-spacing(3);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.gem-c-transition-countdown__countdown-number {
|
|
113
|
-
padding: govuk-spacing(1) 0 0;
|
|
114
|
-
|
|
115
|
-
@include govuk-media-query($from: tablet) {
|
|
116
|
-
padding: govuk-spacing(3) govuk-spacing(1) govuk-spacing(1);
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.gem-c-transition-countdown__countdown-text {
|
|
121
|
-
@include govuk-media-query($from: tablet) {
|
|
122
|
-
height: 75px;
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
}
|