govuk-components 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
[![Build Status](https://travis-ci.com/DFE-Digital/govuk-components.svg?branch=master)](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
|