govuk-components 0.1.0 → 0.2.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/README.md +7 -3
- data/app/components/govuk_component/accordion.html.erb +15 -0
- data/app/components/govuk_component/accordion.rb +41 -0
- data/app/components/govuk_component/back_link.html.erb +1 -1
- data/app/components/govuk_component/back_link.rb +9 -6
- data/app/components/govuk_component/base.rb +17 -0
- data/app/components/govuk_component/breadcrumbs.html.erb +15 -13
- data/app/components/govuk_component/breadcrumbs.rb +10 -2
- data/app/components/govuk_component/details.html.erb +3 -3
- data/app/components/govuk_component/details.rb +13 -5
- data/app/components/govuk_component/footer.html.erb +3 -3
- data/app/components/govuk_component/footer.rb +9 -3
- data/app/components/govuk_component/header.html.erb +16 -3
- data/app/components/govuk_component/header.rb +40 -3
- data/app/components/govuk_component/inset_text.rb +11 -3
- data/app/components/govuk_component/panel.html.erb +2 -2
- data/app/components/govuk_component/panel.rb +10 -2
- data/app/components/govuk_component/phase_banner.html.erb +3 -3
- data/app/components/govuk_component/phase_banner.rb +13 -5
- data/app/components/govuk_component/slot.rb +9 -0
- data/app/components/govuk_component/start_now_button.html.erb +2 -2
- data/app/components/govuk_component/start_now_button.rb +10 -2
- data/app/components/govuk_component/summary_list.html.erb +19 -0
- data/app/components/govuk_component/summary_list.rb +34 -0
- data/app/components/govuk_component/tabs.html.erb +19 -0
- data/app/components/govuk_component/tabs.rb +42 -0
- data/app/components/govuk_component/tag.rb +30 -0
- data/app/components/govuk_component/traits/custom_classes.rb +29 -0
- data/app/components/govuk_component/traits/custom_html_attributes.rb +7 -0
- data/app/components/govuk_component/warning.html.erb +2 -2
- data/app/components/govuk_component/warning.rb +10 -3
- data/app/helpers/govuk_components_helper.rb +28 -0
- data/app/helpers/govuk_link_helper.rb +8 -0
- data/lib/govuk/components/version.rb +1 -1
- metadata +21 -9
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e7a162599cbf3c6116fa24104656807091c3f5c985714b23c47478cb97342afd
|
|
4
|
+
data.tar.gz: 757e782ada4df0816c0aa1f6446717df7a7cd8c3aa2a9f12c5f386d0efe352ed
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 927d728bb2a1109858f876714b5946c9a2a642d349eb4713ae1081aedfe7ff3dd20cabaa6014f54df93b71299810273039f53b9eda2e3bb566756cb65bb12cf5
|
|
7
|
+
data.tar.gz: 3a53b1fa204946ea8ec7321a9b8232ae7fd8c6bb5cab9c962e712e20c958cbd9a4ec2c9fb7ada675711d2d62a2d140147baee84e0ca327f2423cea624597c5b1
|
data/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
# GOV.UK Components
|
|
4
4
|
|
|
5
|
+
[](https://travis-ci.com/DFE-Digital/govuk-components)
|
|
6
|
+
|
|
5
7
|
This gem provides a suite of reusable components for the [GOV.UK Design System](https://design-system.service.gov.uk/). It is intended to provide a lightweight alternative to the [GOV.UK Publishing Components](https://github.com/alphagov/govuk_publishing_components) library and is built with Github's [ViewComponent](https://github.com/github/view_component) framework. ViewComponent is [supported natively in Rails 6.1](https://edgeguides.rubyonrails.org/layouts_and_rendering.html#rendering-objects).
|
|
6
8
|
|
|
7
9
|
## What's included
|
|
@@ -10,6 +12,7 @@ The gem will include the following components and helpers, [track their progress
|
|
|
10
12
|
|
|
11
13
|
### Components
|
|
12
14
|
|
|
15
|
+
* Accordion ✔️
|
|
13
16
|
* Back link ✔️
|
|
14
17
|
* Breadcrumbs ✔️
|
|
15
18
|
* Details ✔️
|
|
@@ -19,15 +22,16 @@ The gem will include the following components and helpers, [track their progress
|
|
|
19
22
|
* Panel ✔️
|
|
20
23
|
* Phase banner ✔️
|
|
21
24
|
* Start now button ✔️
|
|
22
|
-
* Summary list
|
|
25
|
+
* Summary list ✔️
|
|
26
|
+
* Tabs ✔️
|
|
23
27
|
* Tag ✔️
|
|
24
28
|
* Warning text ✔️
|
|
25
29
|
|
|
26
30
|
### Helpers
|
|
27
31
|
|
|
28
32
|
* `#govuk_link_to` ✔️
|
|
29
|
-
* `#govuk_mail_to`
|
|
30
|
-
* `#govuk_button_to`
|
|
33
|
+
* `#govuk_mail_to` ✔️
|
|
34
|
+
* `#govuk_button_to` ✔️
|
|
31
35
|
* `#govuk_back_to_top_link` ✔️
|
|
32
36
|
* Skip link ✔️
|
|
33
37
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<%= tag.div(id: @id, class: classes, data: { module: 'govuk-accordion' }, **html_attributes) do %>
|
|
2
|
+
<% sections.each do |section| %>
|
|
3
|
+
<%= tag.div(id: section.id(suffix: 'section'), class: section.classes, **section.html_attributes) do %>
|
|
4
|
+
<div class="govuk-accordion__section-header">
|
|
5
|
+
<h2 class="govuk-accordion__section-heading">
|
|
6
|
+
<%= tag.span(section.title, id: section.id, class: "govuk-accordion__section-button") %>
|
|
7
|
+
</h2>
|
|
8
|
+
<% if section.summary.present? %>
|
|
9
|
+
<%= tag.div(section.summary, id: section.id(suffix: 'summary'), class: %w(govuk-accordion__section-summary govuk-body)) %>
|
|
10
|
+
<% end %>
|
|
11
|
+
</div>
|
|
12
|
+
<%= tag.div(section.content, id: section.id(suffix: 'content'), class: %w(govuk-accordion__section-content), aria: { labelledby: section.id }) %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<% end %>
|
|
15
|
+
<% end %>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
class GovukComponent::Accordion < GovukComponent::Base
|
|
2
|
+
include ViewComponent::Slotable
|
|
3
|
+
|
|
4
|
+
with_slot :section, collection: true, class_name: 'Section'
|
|
5
|
+
wrap_slot :section
|
|
6
|
+
|
|
7
|
+
attr_accessor :id
|
|
8
|
+
|
|
9
|
+
def initialize(id: nil, classes: [], html_attributes: {})
|
|
10
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
11
|
+
|
|
12
|
+
@id = id
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
private
|
|
16
|
+
|
|
17
|
+
def default_classes
|
|
18
|
+
%w(govuk-accordion)
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
class Section < GovukComponent::Slot
|
|
22
|
+
attr_accessor :title, :summary
|
|
23
|
+
|
|
24
|
+
def initialize(title:, summary: nil, classes: [], html_attributes: {})
|
|
25
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
26
|
+
|
|
27
|
+
self.title = title
|
|
28
|
+
self.summary = summary
|
|
29
|
+
end
|
|
30
|
+
|
|
31
|
+
def id(suffix: nil)
|
|
32
|
+
[title.parameterize, suffix].compact.join('-')
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
private
|
|
36
|
+
|
|
37
|
+
def default_classes
|
|
38
|
+
%w(govuk-accordion__section)
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
end
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<%= link_to @text, @href,
|
|
1
|
+
<%= link_to @text, @href, class: classes, **html_attributes %>
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
class GovukComponent::BackLink <
|
|
1
|
+
class GovukComponent::BackLink < GovukComponent::Base
|
|
2
2
|
attr_accessor :text, :href, :options
|
|
3
3
|
|
|
4
|
-
def initialize(text:, href:, classes: nil,
|
|
4
|
+
def initialize(text:, href:, classes: nil, html_attributes: {})
|
|
5
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
6
|
+
|
|
5
7
|
@text = text
|
|
6
8
|
@href = href
|
|
7
|
-
|
|
8
|
-
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
private
|
|
9
12
|
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
def default_classes
|
|
14
|
+
%w(govuk-back-link)
|
|
12
15
|
end
|
|
13
16
|
end
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
class GovukComponent::Base < ViewComponent::Base
|
|
2
|
+
include GovukComponent::Traits::CustomClasses
|
|
3
|
+
include GovukComponent::Traits::CustomHtmlAttributes
|
|
4
|
+
|
|
5
|
+
def initialize(classes: [], html_attributes: {})
|
|
6
|
+
@classes = parse_classes(classes)
|
|
7
|
+
@html_attributes = html_attributes
|
|
8
|
+
end
|
|
9
|
+
|
|
10
|
+
# Redirect #name to #slot(:name) to make building components
|
|
11
|
+
# with slots feel more DSL-like
|
|
12
|
+
def self.wrap_slot(name)
|
|
13
|
+
define_method(name) do |*args, **kwargs, &block|
|
|
14
|
+
self.slot(name, *args, **kwargs, &block)
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
end
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
<%= tag.div(class: classes, **html_attributes) do %>
|
|
2
|
+
<ol class="govuk-breadcrumbs__list">
|
|
3
|
+
<%- @breadcrumbs.each do |text, link| %>
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
<%- if link.present? -%>
|
|
6
|
+
<li class="govuk-breadcrumbs__list-item">
|
|
7
|
+
<%= link_to(text, link, class: "govuk-breadcrumbs__link") %>
|
|
8
|
+
</li>
|
|
9
|
+
<% else %>
|
|
10
|
+
<li class="govuk-breadcrumbs__list-item" aria-current="page">
|
|
11
|
+
<%= text %>
|
|
12
|
+
</li>
|
|
13
|
+
<% end %>
|
|
13
14
|
|
|
14
|
-
|
|
15
|
-
</ol>
|
|
15
|
+
<% end %>
|
|
16
|
+
</ol>
|
|
17
|
+
<% end %>
|
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
class GovukComponent::Breadcrumbs <
|
|
1
|
+
class GovukComponent::Breadcrumbs < GovukComponent::Base
|
|
2
2
|
attr_accessor :breadcrumbs
|
|
3
3
|
|
|
4
|
-
def initialize(breadcrumbs:)
|
|
4
|
+
def initialize(breadcrumbs:, classes: [], html_attributes: {})
|
|
5
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
6
|
+
|
|
5
7
|
@breadcrumbs = breadcrumbs
|
|
6
8
|
end
|
|
9
|
+
|
|
10
|
+
private
|
|
11
|
+
|
|
12
|
+
def default_classes
|
|
13
|
+
%w(govuk-breadcrumbs)
|
|
14
|
+
end
|
|
7
15
|
end
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
<%= tag.details(class: classes, data: { module: 'govuk-details' }, **html_attributes) do %>
|
|
2
2
|
<summary class="govuk-details__summary">
|
|
3
3
|
<span class="govuk-details__summary-text">
|
|
4
4
|
<%= @summary %>
|
|
5
5
|
</span>
|
|
6
6
|
</summary>
|
|
7
7
|
<div class="govuk-details__text">
|
|
8
|
-
<%= @
|
|
8
|
+
<%= @description || content %>
|
|
9
9
|
</div>
|
|
10
|
-
|
|
10
|
+
<% end %>
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
class GovukComponent::Details <
|
|
2
|
-
attr_accessor :summary, :
|
|
1
|
+
class GovukComponent::Details < GovukComponent::Base
|
|
2
|
+
attr_accessor :summary, :description
|
|
3
3
|
|
|
4
|
-
def initialize(summary:,
|
|
5
|
-
|
|
6
|
-
|
|
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)
|
|
7
15
|
end
|
|
8
16
|
end
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
<%= tag.footer(class: classes, role: 'contentinfo', **html_attributes) do %>
|
|
2
2
|
<div class="govuk-width-container ">
|
|
3
3
|
<% if content.present? %>
|
|
4
4
|
<%= content %>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
|
|
20
20
|
</svg>
|
|
21
21
|
<span class="govuk-footer__licence-description">
|
|
22
|
-
<%=
|
|
22
|
+
<%= licence %>
|
|
23
23
|
</span>
|
|
24
24
|
</div>
|
|
25
25
|
<div class="govuk-footer__meta-item">
|
|
@@ -27,4 +27,4 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|
|
30
|
-
|
|
30
|
+
<% end %>
|
|
@@ -1,15 +1,21 @@
|
|
|
1
|
-
class GovukComponent::Footer <
|
|
1
|
+
class GovukComponent::Footer < GovukComponent::Base
|
|
2
2
|
attr_accessor :meta, :licence, :copyright
|
|
3
3
|
|
|
4
|
-
def initialize(meta_links: nil, meta_heading: default_meta_heading, licence: nil, copyright_text: default_copright_text, copyright_url: default_copyright_url)
|
|
4
|
+
def initialize(meta_links: nil, meta_heading: default_meta_heading, licence: nil, copyright_text: default_copright_text, copyright_url: default_copyright_url, classes: [], html_attributes: {})
|
|
5
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
6
|
+
|
|
5
7
|
@meta_links = build_meta_links(meta_links)
|
|
6
8
|
@meta_heading = raw(tag.h2(meta_heading, class: 'govuk-visually-hidden'))
|
|
7
|
-
@licence = licence || default_licence
|
|
9
|
+
@licence = raw(licence).presence || default_licence
|
|
8
10
|
@copyright = build_copyright(copyright_text, copyright_url)
|
|
9
11
|
end
|
|
10
12
|
|
|
11
13
|
private
|
|
12
14
|
|
|
15
|
+
def default_classes
|
|
16
|
+
%w(govuk-footer)
|
|
17
|
+
end
|
|
18
|
+
|
|
13
19
|
def build_meta_links(links)
|
|
14
20
|
return [] if links.blank?
|
|
15
21
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
<%= tag.header(class: classes, role: 'banner', data: { module: 'govuk-header' }, **html_attributes) do %>
|
|
2
2
|
<div class="govuk-header__container govuk-width-container">
|
|
3
3
|
<div class="govuk-header__logo">
|
|
4
4
|
<a href=<%= @logo_href %> class="govuk-header__link govuk-header__link--homepage">
|
|
@@ -19,7 +19,20 @@
|
|
|
19
19
|
<%= @service_name %>
|
|
20
20
|
</a>
|
|
21
21
|
<% end %>
|
|
22
|
-
|
|
22
|
+
|
|
23
|
+
<% if items.any? %>
|
|
24
|
+
<nav>
|
|
25
|
+
<ul class="govuk-header__navigation " aria-label="Top Level Navigation">
|
|
26
|
+
<% items.each do |item| %>
|
|
27
|
+
<%= tag.li(class: item.classes.append(item.active_class), **item.html_attributes) do %>
|
|
28
|
+
<a class="govuk-header__link" href="<%= item.href %>">
|
|
29
|
+
<%= item.title %>
|
|
30
|
+
</a>
|
|
31
|
+
<% end %>
|
|
32
|
+
<% end %>
|
|
33
|
+
</ul>
|
|
34
|
+
</nav>
|
|
35
|
+
<% end %>
|
|
23
36
|
</div>
|
|
24
37
|
</div>
|
|
25
|
-
|
|
38
|
+
<% end %>
|
|
@@ -1,12 +1,49 @@
|
|
|
1
|
-
class GovukComponent::Header <
|
|
1
|
+
class GovukComponent::Header < GovukComponent::Base
|
|
2
|
+
include ViewComponent::Slotable
|
|
3
|
+
|
|
2
4
|
attr_accessor :logo, :logo_href, :service_name, :service_name_href
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
with_slot :item, collection: true, class_name: 'Item'
|
|
7
|
+
wrap_slot :item
|
|
8
|
+
|
|
9
|
+
def initialize(logo: 'GOV.UK', logo_href: '/', service_name: nil, service_name_href: '/', classes: [], html_attributes: {})
|
|
10
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
5
11
|
|
|
6
|
-
def initialize(logo: 'GOV.UK', logo_href: '/', service_name: nil, service_name_href: '/')
|
|
7
12
|
@logo = logo
|
|
8
13
|
@logo_href = logo_href
|
|
9
14
|
@service_name = service_name
|
|
10
15
|
@service_name_href = service_name_href
|
|
11
16
|
end
|
|
17
|
+
|
|
18
|
+
private
|
|
19
|
+
|
|
20
|
+
def default_classes
|
|
21
|
+
%w(govuk-header)
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
class Item < GovukComponent::Slot
|
|
25
|
+
attr_accessor :title, :href, :active
|
|
26
|
+
|
|
27
|
+
def initialize(title:, href:, active: false, classes: [], html_attributes: {})
|
|
28
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
29
|
+
|
|
30
|
+
self.title = title
|
|
31
|
+
self.href = href
|
|
32
|
+
self.active = active
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
def active?
|
|
36
|
+
active
|
|
37
|
+
end
|
|
38
|
+
|
|
39
|
+
def active_class
|
|
40
|
+
%w(govuk-header__navigation-item--active) if active?
|
|
41
|
+
end
|
|
42
|
+
|
|
43
|
+
private
|
|
44
|
+
|
|
45
|
+
def default_classes
|
|
46
|
+
%w(govuk-header__navigation-item)
|
|
47
|
+
end
|
|
48
|
+
end
|
|
12
49
|
end
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
class GovukComponent::InsetText <
|
|
1
|
+
class GovukComponent::InsetText < GovukComponent::Base
|
|
2
2
|
attr_accessor :text
|
|
3
3
|
|
|
4
|
-
def initialize(text:)
|
|
4
|
+
def initialize(text:, classes: [], html_attributes: {})
|
|
5
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
6
|
+
|
|
5
7
|
@text = text
|
|
6
8
|
end
|
|
7
9
|
|
|
8
10
|
def call
|
|
9
|
-
tag.div(class:
|
|
11
|
+
tag.div(class: classes, **html_attributes) { @text }
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
private
|
|
15
|
+
|
|
16
|
+
def default_classes
|
|
17
|
+
%w(govuk-inset-text)
|
|
10
18
|
end
|
|
11
19
|
end
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
class GovukComponent::Panel <
|
|
1
|
+
class GovukComponent::Panel < GovukComponent::Base
|
|
2
2
|
attr_accessor :title, :body
|
|
3
3
|
|
|
4
|
-
def initialize(title:, body:)
|
|
4
|
+
def initialize(title:, body:, classes: [], html_attributes: {})
|
|
5
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
6
|
+
|
|
5
7
|
@title = title
|
|
6
8
|
@body = body
|
|
7
9
|
end
|
|
10
|
+
|
|
11
|
+
private
|
|
12
|
+
|
|
13
|
+
def default_classes
|
|
14
|
+
%w(govuk-panel govuk-panel--confirmation)
|
|
15
|
+
end
|
|
8
16
|
end
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
<%= tag.div(class: classes, **html_attributes) do %>
|
|
2
2
|
<p class="govuk-phase-banner__content">
|
|
3
3
|
<strong class="govuk-tag govuk-phase-banner__content__tag">
|
|
4
|
-
<%= @
|
|
4
|
+
<%= @phase %>
|
|
5
5
|
</strong>
|
|
6
6
|
<span class="govuk-phase-banner__text">
|
|
7
7
|
<%= @text || content %>
|
|
8
8
|
</span>
|
|
9
9
|
</p>
|
|
10
|
-
|
|
10
|
+
<% end %>
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
class GovukComponent::PhaseBanner <
|
|
2
|
-
attr_accessor :
|
|
1
|
+
class GovukComponent::PhaseBanner < GovukComponent::Base
|
|
2
|
+
attr_accessor :phase, :text
|
|
3
3
|
|
|
4
|
-
def initialize(
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
def initialize(phase:, text: nil, classes: [], html_attributes: {})
|
|
5
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
6
|
+
|
|
7
|
+
@phase = phase
|
|
8
|
+
@text = text
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
private
|
|
12
|
+
|
|
13
|
+
def default_classes
|
|
14
|
+
%w(govuk-phase-banner)
|
|
7
15
|
end
|
|
8
16
|
end
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
class GovukComponent::Slot < ViewComponent::Slot
|
|
2
|
+
include GovukComponent::Traits::CustomClasses
|
|
3
|
+
include GovukComponent::Traits::CustomHtmlAttributes
|
|
4
|
+
|
|
5
|
+
def initialize(classes: [], html_attributes: {})
|
|
6
|
+
@classes = parse_classes(classes)
|
|
7
|
+
@html_attributes = html_attributes
|
|
8
|
+
end
|
|
9
|
+
end
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
<%= link_to(@href, role: 'button', draggable: 'false', class: classes, data: { module: 'govuk-button' }, **html_attributes) do %>
|
|
2
2
|
<%= @text %>
|
|
3
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
4
|
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
|
|
5
5
|
</svg>
|
|
6
|
-
|
|
6
|
+
<% end %>
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
-
class GovukComponent::StartNowButton <
|
|
1
|
+
class GovukComponent::StartNowButton < GovukComponent::Base
|
|
2
2
|
attr_accessor :text, :href
|
|
3
3
|
|
|
4
|
-
def initialize(text:, href:)
|
|
4
|
+
def initialize(text:, href:, classes: [], html_attributes: {})
|
|
5
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
6
|
+
|
|
5
7
|
@text = text
|
|
6
8
|
@href = href
|
|
7
9
|
end
|
|
10
|
+
|
|
11
|
+
private
|
|
12
|
+
|
|
13
|
+
def default_classes
|
|
14
|
+
%w(govuk-button govuk-button--start)
|
|
15
|
+
end
|
|
8
16
|
end
|
|
@@ -0,0 +1,19 @@
|
|
|
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 %>
|
|
@@ -0,0 +1,34 @@
|
|
|
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
|
|
@@ -0,0 +1,19 @@
|
|
|
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 %>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
class GovukComponent::Tabs < GovukComponent::Base
|
|
2
|
+
include ViewComponent::Slotable
|
|
3
|
+
|
|
4
|
+
attr_accessor :title
|
|
5
|
+
|
|
6
|
+
with_slot :tab, collection: true, class_name: 'Tab'
|
|
7
|
+
wrap_slot :tab
|
|
8
|
+
|
|
9
|
+
def initialize(title:, classes: [], html_attributes: {})
|
|
10
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
11
|
+
|
|
12
|
+
self.title = title
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
private
|
|
16
|
+
|
|
17
|
+
def default_classes
|
|
18
|
+
%w(govuk-tabs)
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
class Tab < GovukComponent::Slot
|
|
22
|
+
attr_accessor :title
|
|
23
|
+
|
|
24
|
+
def initialize(title:, classes: [], html_attributes: {})
|
|
25
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
26
|
+
|
|
27
|
+
self.title = title
|
|
28
|
+
end
|
|
29
|
+
|
|
30
|
+
def id(prefix: nil)
|
|
31
|
+
[prefix, title.parameterize].join
|
|
32
|
+
end
|
|
33
|
+
|
|
34
|
+
def default_classes
|
|
35
|
+
%w(govuk-tabs__panel)
|
|
36
|
+
end
|
|
37
|
+
|
|
38
|
+
def hidden_class(i = nil)
|
|
39
|
+
%(govuk-tabs__panel--hidden) unless i&.zero?
|
|
40
|
+
end
|
|
41
|
+
end
|
|
42
|
+
end
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
class GovukComponent::Tag < GovukComponent::Base
|
|
2
|
+
attr_reader :text
|
|
3
|
+
|
|
4
|
+
COLOURS = %w(grey green turquoise blue red purple pink orange yellow).freeze
|
|
5
|
+
|
|
6
|
+
def initialize(text:, colour: nil, classes: [], html_attributes: {})
|
|
7
|
+
super(classes: classes, html_attributes: html_attributes)
|
|
8
|
+
|
|
9
|
+
@text = text
|
|
10
|
+
@colour = colour
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
def call
|
|
14
|
+
tag.strong(@text, class: classes.append(colour_class), **html_attributes)
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
private
|
|
18
|
+
|
|
19
|
+
def default_classes
|
|
20
|
+
%w(govuk-tag)
|
|
21
|
+
end
|
|
22
|
+
|
|
23
|
+
def colour_class
|
|
24
|
+
return nil unless @colour.present?
|
|
25
|
+
|
|
26
|
+
fail("invalid tag colour #{@colour}, supported colours are #{COLOURS.to_sentence}") unless @colour.in?(COLOURS)
|
|
27
|
+
|
|
28
|
+
%(govuk-tag--#{@colour})
|
|
29
|
+
end
|
|
30
|
+
end
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
module GovukComponent
|
|
2
|
+
module Traits
|
|
3
|
+
module CustomClasses
|
|
4
|
+
|
|
5
|
+
def classes
|
|
6
|
+
default_classes.concat(Array.wrap(@classes))
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
def default_classes
|
|
10
|
+
Rails.logger.warn(%(#default_classes hasn't been defined in #{self.class}))
|
|
11
|
+
|
|
12
|
+
[]
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
private
|
|
16
|
+
|
|
17
|
+
def parse_classes(classes)
|
|
18
|
+
return [] unless classes.present?
|
|
19
|
+
|
|
20
|
+
case classes
|
|
21
|
+
when Array
|
|
22
|
+
classes
|
|
23
|
+
when String
|
|
24
|
+
classes.split
|
|
25
|
+
end
|
|
26
|
+
end
|
|
27
|
+
end
|
|
28
|
+
end
|
|
29
|
+
end
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
<%= content_tag('div', class: classes, **html_attributes) do %>
|
|
2
2
|
<span class="govuk-warning-text__icon" aria-hidden="true">!</span>
|
|
3
3
|
<strong class="govuk-warning-text__text">
|
|
4
4
|
<span class="govuk-warning-text__assistive"><%= @icon_fallback_text %></span>
|
|
5
5
|
<%= @text %>
|
|
6
6
|
</strong>
|
|
7
|
-
|
|
7
|
+
<% end %>
|
|
@@ -1,7 +1,14 @@
|
|
|
1
|
-
class GovukComponent::Warning <
|
|
2
|
-
def initialize(text:, icon_fallback_text: 'Warning', classes: [])
|
|
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
|
+
|
|
3
5
|
@text = text
|
|
4
6
|
@icon_fallback_text = icon_fallback_text
|
|
5
|
-
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
private
|
|
10
|
+
|
|
11
|
+
def default_classes
|
|
12
|
+
%w(govuk-warning-text)
|
|
6
13
|
end
|
|
7
14
|
end
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
module GovukComponentHelper
|
|
2
|
+
{
|
|
3
|
+
govuk_accordion: 'GovukComponent::Accordion',
|
|
4
|
+
govuk_back_link: 'GovukComponent::BackLink',
|
|
5
|
+
govuk_breadcrumbs: 'GovukComponent::Breadcrumbs',
|
|
6
|
+
govuk_details: 'GovukComponent::Details',
|
|
7
|
+
govuk_footer: 'GovukComponent::Footer',
|
|
8
|
+
govuk_header: 'GovukComponent::Header',
|
|
9
|
+
govuk_inset_text: 'GovukComponent::InsetText',
|
|
10
|
+
govuk_panel: 'GovukComponent::Panel',
|
|
11
|
+
govuk_phase_banner: 'GovukComponent::PhaseBanner',
|
|
12
|
+
govuk_start_now_button: 'GovukComponent::StartNowButton',
|
|
13
|
+
govuk_summary_list: 'GovukComponent::SummaryList',
|
|
14
|
+
govuk_tabs: 'GovukComponent::Tabs',
|
|
15
|
+
govuk_tag: 'GovukComponent::Tag',
|
|
16
|
+
govuk_warning: 'GovukComponent::Warning',
|
|
17
|
+
}.each do |name, klass|
|
|
18
|
+
define_method(name) do |*args, **kwargs, &block|
|
|
19
|
+
capture do
|
|
20
|
+
render(klass.constantize.new(*args, **kwargs)) do |com|
|
|
21
|
+
block.call(com) unless block.blank?
|
|
22
|
+
end
|
|
23
|
+
end
|
|
24
|
+
end
|
|
25
|
+
end
|
|
26
|
+
end
|
|
27
|
+
|
|
28
|
+
ActiveSupport.on_load(:action_view) { include GovukComponentHelper }
|
|
@@ -2,6 +2,14 @@ module GovukLinkHelper
|
|
|
2
2
|
def govuk_link_to(*args, **kwargs)
|
|
3
3
|
link_to(*args, **{ class: 'govuk-link' }.deep_merge(kwargs))
|
|
4
4
|
end
|
|
5
|
+
|
|
6
|
+
def govuk_mail_to(*args, **kwargs)
|
|
7
|
+
mail_to(*args, **{ class: 'govuk-link' }.deep_merge(kwargs))
|
|
8
|
+
end
|
|
9
|
+
|
|
10
|
+
def govuk_button_to(*args, **kwargs)
|
|
11
|
+
button_to(*args, **{ class: 'govuk-button' }.deep_merge(kwargs))
|
|
12
|
+
end
|
|
5
13
|
end
|
|
6
14
|
|
|
7
15
|
ActiveSupport.on_load(:action_view) { include GovukLinkHelper }
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk-components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- DfE developers
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2020-
|
|
11
|
+
date: 2020-09-12 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -16,20 +16,20 @@ dependencies:
|
|
|
16
16
|
requirements:
|
|
17
17
|
- - "~>"
|
|
18
18
|
- !ruby/object:Gem::Version
|
|
19
|
-
version: 6.0.
|
|
19
|
+
version: 6.0.3
|
|
20
20
|
- - ">="
|
|
21
21
|
- !ruby/object:Gem::Version
|
|
22
|
-
version: 6.0.
|
|
22
|
+
version: 6.0.3
|
|
23
23
|
type: :runtime
|
|
24
24
|
prerelease: false
|
|
25
25
|
version_requirements: !ruby/object:Gem::Requirement
|
|
26
26
|
requirements:
|
|
27
27
|
- - "~>"
|
|
28
28
|
- !ruby/object:Gem::Version
|
|
29
|
-
version: 6.0.
|
|
29
|
+
version: 6.0.3
|
|
30
30
|
- - ">="
|
|
31
31
|
- !ruby/object:Gem::Version
|
|
32
|
-
version: 6.0.
|
|
32
|
+
version: 6.0.3
|
|
33
33
|
- !ruby/object:Gem::Dependency
|
|
34
34
|
name: slim-rails
|
|
35
35
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -50,14 +50,14 @@ dependencies:
|
|
|
50
50
|
requirements:
|
|
51
51
|
- - "~>"
|
|
52
52
|
- !ruby/object:Gem::Version
|
|
53
|
-
version:
|
|
53
|
+
version: 2.18.1
|
|
54
54
|
type: :runtime
|
|
55
55
|
prerelease: false
|
|
56
56
|
version_requirements: !ruby/object:Gem::Requirement
|
|
57
57
|
requirements:
|
|
58
58
|
- - "~>"
|
|
59
59
|
- !ruby/object:Gem::Version
|
|
60
|
-
version:
|
|
60
|
+
version: 2.18.1
|
|
61
61
|
- !ruby/object:Gem::Dependency
|
|
62
62
|
name: sqlite3
|
|
63
63
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -139,8 +139,11 @@ files:
|
|
|
139
139
|
- MIT-LICENSE
|
|
140
140
|
- README.md
|
|
141
141
|
- Rakefile
|
|
142
|
+
- app/components/govuk_component/accordion.html.erb
|
|
143
|
+
- app/components/govuk_component/accordion.rb
|
|
142
144
|
- app/components/govuk_component/back_link.html.erb
|
|
143
145
|
- app/components/govuk_component/back_link.rb
|
|
146
|
+
- app/components/govuk_component/base.rb
|
|
144
147
|
- app/components/govuk_component/breadcrumbs.html.erb
|
|
145
148
|
- app/components/govuk_component/breadcrumbs.rb
|
|
146
149
|
- app/components/govuk_component/details.html.erb
|
|
@@ -154,11 +157,20 @@ files:
|
|
|
154
157
|
- app/components/govuk_component/panel.rb
|
|
155
158
|
- app/components/govuk_component/phase_banner.html.erb
|
|
156
159
|
- app/components/govuk_component/phase_banner.rb
|
|
160
|
+
- app/components/govuk_component/slot.rb
|
|
157
161
|
- app/components/govuk_component/start_now_button.html.erb
|
|
158
162
|
- app/components/govuk_component/start_now_button.rb
|
|
163
|
+
- app/components/govuk_component/summary_list.html.erb
|
|
164
|
+
- app/components/govuk_component/summary_list.rb
|
|
165
|
+
- app/components/govuk_component/tabs.html.erb
|
|
166
|
+
- app/components/govuk_component/tabs.rb
|
|
167
|
+
- app/components/govuk_component/tag.rb
|
|
168
|
+
- app/components/govuk_component/traits/custom_classes.rb
|
|
169
|
+
- app/components/govuk_component/traits/custom_html_attributes.rb
|
|
159
170
|
- app/components/govuk_component/warning.html.erb
|
|
160
171
|
- app/components/govuk_component/warning.rb
|
|
161
172
|
- app/helpers/govuk_back_to_top_link_helper.rb
|
|
173
|
+
- app/helpers/govuk_components_helper.rb
|
|
162
174
|
- app/helpers/govuk_link_helper.rb
|
|
163
175
|
- app/helpers/govuk_skip_link_helper.rb
|
|
164
176
|
- config/routes.rb
|
|
@@ -185,7 +197,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
185
197
|
- !ruby/object:Gem::Version
|
|
186
198
|
version: '0'
|
|
187
199
|
requirements: []
|
|
188
|
-
rubygems_version: 3.
|
|
200
|
+
rubygems_version: 3.1.2
|
|
189
201
|
signing_key:
|
|
190
202
|
specification_version: 4
|
|
191
203
|
summary: Lightweight set of reusable GOV.UK Design System components
|