govuk-components 1.2.0 → 2.0.0b1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/components/govuk_component/{accordion.html.erb → accordion_component.html.erb} +1 -1
- data/app/components/govuk_component/{accordion.rb → accordion_component.rb} +7 -6
- data/app/components/govuk_component/{back_link.rb → back_link_component.rb} +5 -1
- data/app/components/govuk_component/base.rb +9 -7
- data/app/components/govuk_component/{breadcrumbs.html.erb → breadcrumbs_component.html.erb} +3 -6
- data/app/components/govuk_component/{breadcrumbs.rb → breadcrumbs_component.rb} +1 -1
- data/app/components/govuk_component/{cookie_banner.html.erb → cookie_banner_component.html.erb} +2 -6
- data/app/components/govuk_component/{cookie_banner.rb → cookie_banner_component.rb} +1 -1
- data/app/components/govuk_component/details_component.rb +34 -0
- data/app/components/govuk_component/{footer.html.erb → footer_component.html.erb} +3 -5
- data/app/components/govuk_component/{footer.rb → footer_component.rb} +3 -8
- data/app/components/govuk_component/header_component.html.erb +49 -0
- data/app/components/govuk_component/header_component.rb +110 -0
- data/app/components/govuk_component/{inset_text.rb → inset_text_component.rb} +3 -3
- data/app/components/govuk_component/notification_banner_component.html.erb +14 -0
- data/app/components/govuk_component/{notification_banner.rb → notification_banner_component.rb} +28 -14
- data/app/components/govuk_component/panel_component.rb +46 -0
- data/app/components/govuk_component/phase_banner_component.html.erb +6 -0
- data/app/components/govuk_component/phase_banner_component.rb +20 -0
- data/app/components/govuk_component/start_button_component.rb +47 -0
- data/app/components/govuk_component/summary_list_component.html.erb +11 -0
- data/app/components/govuk_component/summary_list_component.rb +61 -0
- data/app/components/govuk_component/tab_component.html.erb +11 -0
- data/app/components/govuk_component/{tabs.rb → tab_component.rb} +23 -12
- data/app/components/govuk_component/{tag.rb → tag_component.rb} +21 -3
- data/app/components/govuk_component/warning_text_component.rb +38 -0
- data/app/helpers/govuk_components_helper.rb +15 -15
- data/lib/govuk/components.rb +1 -0
- data/lib/govuk/components/helpers/css_utilities.rb +22 -0
- data/lib/govuk/components/version.rb +1 -1
- metadata +52 -42
- data/app/components/govuk_component/back_link.html.erb +0 -1
- data/app/components/govuk_component/details.html.erb +0 -10
- data/app/components/govuk_component/details.rb +0 -16
- data/app/components/govuk_component/header.html.erb +0 -50
- data/app/components/govuk_component/header.rb +0 -66
- data/app/components/govuk_component/notification_banner.html.erb +0 -23
- data/app/components/govuk_component/panel.html.erb +0 -13
- data/app/components/govuk_component/panel.rb +0 -28
- data/app/components/govuk_component/phase_banner.html.erb +0 -8
- data/app/components/govuk_component/phase_banner.rb +0 -16
- data/app/components/govuk_component/start_now_button.html.erb +0 -6
- data/app/components/govuk_component/start_now_button.rb +0 -16
- data/app/components/govuk_component/summary_list.html.erb +0 -19
- data/app/components/govuk_component/summary_list.rb +0 -34
- data/app/components/govuk_component/tabs.html.erb +0 -19
- data/app/components/govuk_component/warning.html.erb +0 -7
- data/app/components/govuk_component/warning.rb +0 -14
@@ -1 +0,0 @@
|
|
1
|
-
<%= link_to @text, @href, class: classes, **html_attributes %>
|
@@ -1,10 +0,0 @@
|
|
1
|
-
<%= tag.details(class: classes, data: { module: 'govuk-details' }, **html_attributes) do %>
|
2
|
-
<summary class="govuk-details__summary">
|
3
|
-
<span class="govuk-details__summary-text">
|
4
|
-
<%= @summary %>
|
5
|
-
</span>
|
6
|
-
</summary>
|
7
|
-
<div class="govuk-details__text">
|
8
|
-
<%= content.presence || @description %>
|
9
|
-
</div>
|
10
|
-
<% end %>
|
@@ -1,16 +0,0 @@
|
|
1
|
-
class GovukComponent::Details < GovukComponent::Base
|
2
|
-
attr_accessor :summary, :description
|
3
|
-
|
4
|
-
def initialize(summary:, description: nil, classes: [], html_attributes: {})
|
5
|
-
super(classes: classes, html_attributes: html_attributes)
|
6
|
-
|
7
|
-
@summary = summary
|
8
|
-
@description = description
|
9
|
-
end
|
10
|
-
|
11
|
-
private
|
12
|
-
|
13
|
-
def default_classes
|
14
|
-
%w(govuk-details)
|
15
|
-
end
|
16
|
-
end
|
@@ -1,50 +0,0 @@
|
|
1
|
-
<%= tag.header(class: classes, role: 'banner', data: { module: 'govuk-header' }, **html_attributes) do %>
|
2
|
-
<div class="govuk-header__container govuk-width-container">
|
3
|
-
<div class="govuk-header__logo">
|
4
|
-
<a href=<%= @logo_href %> class="govuk-header__link govuk-header__link--homepage">
|
5
|
-
<span class="govuk-header__logotype">
|
6
|
-
<svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 132 97" height="30" width="36">
|
7
|
-
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
|
8
|
-
<image src="/assets/images/govuk-logotype-crown.png" xlink:href="" class="govuk-header__logotype-crown-fallback-image" width="36" height="32"></image>
|
9
|
-
</svg>
|
10
|
-
<span class="govuk-header__logotype-text">
|
11
|
-
<%= @logo %>
|
12
|
-
</span>
|
13
|
-
</span>
|
14
|
-
<% if @product_name.present? %>
|
15
|
-
<span class="govuk-header__product-name">
|
16
|
-
<%= @product_name %>
|
17
|
-
</span>
|
18
|
-
<% end %>
|
19
|
-
|
20
|
-
<% if product_description.present? %>
|
21
|
-
<%= product_description.content %>
|
22
|
-
<% end %>
|
23
|
-
</a>
|
24
|
-
</div>
|
25
|
-
<div class="govuk-header__content">
|
26
|
-
<% if @service_name.present? %>
|
27
|
-
<a href="<%= @service_name_href %>" class="govuk-header__link govuk-header__link--service-name">
|
28
|
-
<%= @service_name %>
|
29
|
-
</a>
|
30
|
-
<% end %>
|
31
|
-
|
32
|
-
<% if items.any? %>
|
33
|
-
<button type="button" class="govuk-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="<%= menu_button_label %>">Menu</button>
|
34
|
-
<nav>
|
35
|
-
<%= tag.ul(class: navigation_classes, id: "navigation", aria: { label: navigation_label }) do %>
|
36
|
-
<% items.each do |item| %>
|
37
|
-
<%= tag.li(class: item.classes.append(item.active_class), **item.html_attributes) do %>
|
38
|
-
<% if item.link? %>
|
39
|
-
<%= link_to(item.title, item.href, class: "govuk-header__link") %>
|
40
|
-
<% else %>
|
41
|
-
<%= item.title %>
|
42
|
-
<% end %>
|
43
|
-
<% end %>
|
44
|
-
<% end %>
|
45
|
-
<% end %>
|
46
|
-
</nav>
|
47
|
-
<% end %>
|
48
|
-
</div>
|
49
|
-
</div>
|
50
|
-
<% end %>
|
@@ -1,66 +0,0 @@
|
|
1
|
-
class GovukComponent::Header < GovukComponent::Base
|
2
|
-
include ViewComponent::Slotable
|
3
|
-
|
4
|
-
attr_accessor :logo, :logo_href, :service_name, :service_name_href, :product_name, :menu_button_label, :navigation_label
|
5
|
-
|
6
|
-
with_slot :item, collection: true, class_name: 'Item'
|
7
|
-
wrap_slot :item
|
8
|
-
|
9
|
-
with_slot :product_description
|
10
|
-
wrap_slot :product_description
|
11
|
-
|
12
|
-
def initialize(logo: 'GOV.UK', logo_href: '/', service_name: nil, service_name_href: '/', product_name: nil, menu_button_label: 'Show or hide navigation menu', classes: [], navigation_classes: [], navigation_label: 'Navigation menu', html_attributes: {})
|
13
|
-
super(classes: classes, html_attributes: html_attributes)
|
14
|
-
|
15
|
-
@logo = logo
|
16
|
-
@logo_href = logo_href
|
17
|
-
@service_name = service_name
|
18
|
-
@service_name_href = service_name_href
|
19
|
-
@product_name = product_name
|
20
|
-
@menu_button_label = menu_button_label
|
21
|
-
@navigation_classes = navigation_classes
|
22
|
-
@navigation_label = navigation_label
|
23
|
-
end
|
24
|
-
|
25
|
-
private
|
26
|
-
|
27
|
-
def default_classes
|
28
|
-
%w(govuk-header)
|
29
|
-
end
|
30
|
-
|
31
|
-
def navigation_classes
|
32
|
-
%w(govuk-header__navigation).tap { |nc|
|
33
|
-
nc.concat(@navigation_classes.is_a?(String) ? @navigation_classes.split : @navigation_classes)
|
34
|
-
}.uniq
|
35
|
-
end
|
36
|
-
|
37
|
-
class Item < GovukComponent::Slot
|
38
|
-
attr_accessor :title, :href, :active
|
39
|
-
|
40
|
-
def initialize(title:, href: nil, active: false, classes: [], html_attributes: {})
|
41
|
-
super(classes: classes, html_attributes: html_attributes)
|
42
|
-
|
43
|
-
self.title = title
|
44
|
-
self.href = href
|
45
|
-
self.active = active
|
46
|
-
end
|
47
|
-
|
48
|
-
def active?
|
49
|
-
active
|
50
|
-
end
|
51
|
-
|
52
|
-
def active_class
|
53
|
-
%w(govuk-header__navigation-item--active) if active?
|
54
|
-
end
|
55
|
-
|
56
|
-
def link?
|
57
|
-
href.present?
|
58
|
-
end
|
59
|
-
|
60
|
-
private
|
61
|
-
|
62
|
-
def default_classes
|
63
|
-
%w(govuk-header__navigation-item)
|
64
|
-
end
|
65
|
-
end
|
66
|
-
end
|
@@ -1,23 +0,0 @@
|
|
1
|
-
<%= tag.div(class: classes.append(success_class).compact, role: "region", aria: { labelledby: title_id }, data: data_params, **html_attributes) do %>
|
2
|
-
<div class="govuk-notification-banner__header">
|
3
|
-
<%= content_tag(title_tag, class: "govuk-notification-banner__title", id: title_id) do %>
|
4
|
-
<%= title %>
|
5
|
-
<% end %>
|
6
|
-
</div>
|
7
|
-
<div class="govuk-notification-banner__content">
|
8
|
-
<% headings.each do |heading| %>
|
9
|
-
<p class="govuk-notification-banner__heading">
|
10
|
-
<% if heading.text.present? %>
|
11
|
-
<%= heading.text %>
|
12
|
-
<% if heading.link_target && heading.link_text %>
|
13
|
-
<%= link_to(heading.link_text, heading.link_target, class: "govuk-notification-banner__link") %>.
|
14
|
-
<% end %>
|
15
|
-
<% else %>
|
16
|
-
<%= heading.content %>
|
17
|
-
<% end %>
|
18
|
-
</p>
|
19
|
-
<% end %>
|
20
|
-
|
21
|
-
<%= content %>
|
22
|
-
</div>
|
23
|
-
<% end %>
|
@@ -1,13 +0,0 @@
|
|
1
|
-
<%= tag.div(class: classes, **html_attributes) do %>
|
2
|
-
<% if display_title? %>
|
3
|
-
<h1 class="govuk-panel__title">
|
4
|
-
<%= @title %>
|
5
|
-
</h1>
|
6
|
-
<% end %>
|
7
|
-
|
8
|
-
<% if display_body? %>
|
9
|
-
<div class="govuk-panel__body">
|
10
|
-
<%= content.presence || @body %>
|
11
|
-
</div>
|
12
|
-
<% end %>
|
13
|
-
<% end %>
|
@@ -1,28 +0,0 @@
|
|
1
|
-
class GovukComponent::Panel < GovukComponent::Base
|
2
|
-
attr_accessor :title, :body
|
3
|
-
|
4
|
-
def initialize(title: nil, body: nil, classes: [], html_attributes: {})
|
5
|
-
super(classes: classes, html_attributes: html_attributes)
|
6
|
-
|
7
|
-
@title = title
|
8
|
-
@body = body
|
9
|
-
end
|
10
|
-
|
11
|
-
private
|
12
|
-
|
13
|
-
def default_classes
|
14
|
-
%w(govuk-panel govuk-panel--confirmation)
|
15
|
-
end
|
16
|
-
|
17
|
-
def display_title?
|
18
|
-
@title.present?
|
19
|
-
end
|
20
|
-
|
21
|
-
def display_body?
|
22
|
-
[@body, content].any?(&:present?)
|
23
|
-
end
|
24
|
-
|
25
|
-
def render?
|
26
|
-
display_title? || display_body?
|
27
|
-
end
|
28
|
-
end
|
@@ -1,16 +0,0 @@
|
|
1
|
-
class GovukComponent::PhaseBanner < GovukComponent::Base
|
2
|
-
attr_accessor :phase_tag, :text
|
3
|
-
|
4
|
-
def initialize(phase_tag: nil, text: nil, classes: [], html_attributes: {})
|
5
|
-
super(classes: classes, html_attributes: html_attributes)
|
6
|
-
|
7
|
-
@phase_tag = GovukComponent::Tag.new(classes: "govuk-phase-banner__content__tag", **phase_tag)
|
8
|
-
@text = text
|
9
|
-
end
|
10
|
-
|
11
|
-
private
|
12
|
-
|
13
|
-
def default_classes
|
14
|
-
%w(govuk-phase-banner)
|
15
|
-
end
|
16
|
-
end
|
@@ -1,6 +0,0 @@
|
|
1
|
-
<%= link_to(@href, role: 'button', draggable: 'false', class: classes, data: { module: 'govuk-button' }, **html_attributes) do %>
|
2
|
-
<%= @text %>
|
3
|
-
<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">
|
4
|
-
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
|
5
|
-
</svg>
|
6
|
-
<% end %>
|
@@ -1,16 +0,0 @@
|
|
1
|
-
class GovukComponent::StartNowButton < GovukComponent::Base
|
2
|
-
attr_accessor :text, :href
|
3
|
-
|
4
|
-
def initialize(text:, href:, classes: [], html_attributes: {})
|
5
|
-
super(classes: classes, html_attributes: html_attributes)
|
6
|
-
|
7
|
-
@text = text
|
8
|
-
@href = href
|
9
|
-
end
|
10
|
-
|
11
|
-
private
|
12
|
-
|
13
|
-
def default_classes
|
14
|
-
%w(govuk-button govuk-button--start)
|
15
|
-
end
|
16
|
-
end
|
@@ -1,19 +0,0 @@
|
|
1
|
-
<%= tag.dl(class: classes, **html_attributes) do %>
|
2
|
-
<% rows.each do |row| %>
|
3
|
-
<%= tag.div(class: row.classes, **row.html_attributes) do %>
|
4
|
-
<dt class="govuk-summary-list__key">
|
5
|
-
<%= row.key %>
|
6
|
-
</dt>
|
7
|
-
|
8
|
-
<dd class="govuk-summary-list__value">
|
9
|
-
<%= row.value %>
|
10
|
-
</dd>
|
11
|
-
|
12
|
-
<% if any_row_has_actions? %>
|
13
|
-
<dd class="govuk-summary-list__actions">
|
14
|
-
<%= row.action %>
|
15
|
-
</dd>
|
16
|
-
<% end %>
|
17
|
-
<% end %>
|
18
|
-
<% end %>
|
19
|
-
<% end %>
|
@@ -1,34 +0,0 @@
|
|
1
|
-
class GovukComponent::SummaryList < GovukComponent::Base
|
2
|
-
include ViewComponent::Slotable
|
3
|
-
|
4
|
-
with_slot :row, collection: true, class_name: 'Row'
|
5
|
-
wrap_slot :row
|
6
|
-
|
7
|
-
def any_row_has_actions?
|
8
|
-
rows.any? { |r| r.action.present? }
|
9
|
-
end
|
10
|
-
|
11
|
-
private
|
12
|
-
|
13
|
-
def default_classes
|
14
|
-
%w(govuk-summary-list)
|
15
|
-
end
|
16
|
-
|
17
|
-
class Row < GovukComponent::Slot
|
18
|
-
attr_accessor :key, :value, :action
|
19
|
-
|
20
|
-
def initialize(key:, value:, action: nil, classes: [], html_attributes: {})
|
21
|
-
super(classes: classes, html_attributes: html_attributes)
|
22
|
-
|
23
|
-
self.key = key
|
24
|
-
self.value = value
|
25
|
-
self.action = action
|
26
|
-
end
|
27
|
-
|
28
|
-
private
|
29
|
-
|
30
|
-
def default_classes
|
31
|
-
%w(govuk-summary-list__row)
|
32
|
-
end
|
33
|
-
end
|
34
|
-
end
|
@@ -1,19 +0,0 @@
|
|
1
|
-
<%= tag.div(class: classes, data: { module: 'govuk-tabs' }, **html_attributes) do %>
|
2
|
-
<h2 class="govuk-tabs__title">
|
3
|
-
<%= title %>
|
4
|
-
</h2>
|
5
|
-
<ul class="govuk-tabs__list">
|
6
|
-
<% tabs.each.with_index do |tab, i| %>
|
7
|
-
<li class="govuk-tabs__list-item <%= 'govuk-tabs__list-item--selected' if i.zero? %>">
|
8
|
-
<a class="govuk-tabs__tab" href="<%= tab.id(prefix: '#') %>">
|
9
|
-
<%= tab.title %>
|
10
|
-
</a>
|
11
|
-
</li>
|
12
|
-
<% end %>
|
13
|
-
</ul>
|
14
|
-
<% tabs.each.with_index do |tab, i| %>
|
15
|
-
<%= tag.div(class: tab.classes.append(tab.hidden_class(i)), id: tab.id, **tab.html_attributes) do %>
|
16
|
-
<%= tab.content %>
|
17
|
-
<% end %>
|
18
|
-
<% end %>
|
19
|
-
<% end %>
|
@@ -1,7 +0,0 @@
|
|
1
|
-
<%= content_tag('div', class: classes, **html_attributes) do %>
|
2
|
-
<span class="govuk-warning-text__icon" aria-hidden="true">!</span>
|
3
|
-
<strong class="govuk-warning-text__text">
|
4
|
-
<span class="govuk-warning-text__assistive"><%= @icon_fallback_text %></span>
|
5
|
-
<%= @text %>
|
6
|
-
</strong>
|
7
|
-
<% end %>
|
@@ -1,14 +0,0 @@
|
|
1
|
-
class GovukComponent::Warning < GovukComponent::Base
|
2
|
-
def initialize(text:, icon_fallback_text: 'Warning', classes: [], html_attributes: {})
|
3
|
-
super(classes: classes, html_attributes: html_attributes)
|
4
|
-
|
5
|
-
@text = text
|
6
|
-
@icon_fallback_text = icon_fallback_text
|
7
|
-
end
|
8
|
-
|
9
|
-
private
|
10
|
-
|
11
|
-
def default_classes
|
12
|
-
%w(govuk-warning-text)
|
13
|
-
end
|
14
|
-
end
|