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.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -3
  3. data/app/components/govuk_component/accordion.html.erb +15 -0
  4. data/app/components/govuk_component/accordion.rb +41 -0
  5. data/app/components/govuk_component/back_link.html.erb +1 -1
  6. data/app/components/govuk_component/back_link.rb +9 -6
  7. data/app/components/govuk_component/base.rb +17 -0
  8. data/app/components/govuk_component/breadcrumbs.html.erb +15 -13
  9. data/app/components/govuk_component/breadcrumbs.rb +10 -2
  10. data/app/components/govuk_component/details.html.erb +3 -3
  11. data/app/components/govuk_component/details.rb +13 -5
  12. data/app/components/govuk_component/footer.html.erb +3 -3
  13. data/app/components/govuk_component/footer.rb +9 -3
  14. data/app/components/govuk_component/header.html.erb +16 -3
  15. data/app/components/govuk_component/header.rb +40 -3
  16. data/app/components/govuk_component/inset_text.rb +11 -3
  17. data/app/components/govuk_component/panel.html.erb +2 -2
  18. data/app/components/govuk_component/panel.rb +10 -2
  19. data/app/components/govuk_component/phase_banner.html.erb +3 -3
  20. data/app/components/govuk_component/phase_banner.rb +13 -5
  21. data/app/components/govuk_component/slot.rb +9 -0
  22. data/app/components/govuk_component/start_now_button.html.erb +2 -2
  23. data/app/components/govuk_component/start_now_button.rb +10 -2
  24. data/app/components/govuk_component/summary_list.html.erb +19 -0
  25. data/app/components/govuk_component/summary_list.rb +34 -0
  26. data/app/components/govuk_component/tabs.html.erb +19 -0
  27. data/app/components/govuk_component/tabs.rb +42 -0
  28. data/app/components/govuk_component/tag.rb +30 -0
  29. data/app/components/govuk_component/traits/custom_classes.rb +29 -0
  30. data/app/components/govuk_component/traits/custom_html_attributes.rb +7 -0
  31. data/app/components/govuk_component/warning.html.erb +2 -2
  32. data/app/components/govuk_component/warning.rb +10 -3
  33. data/app/helpers/govuk_components_helper.rb +28 -0
  34. data/app/helpers/govuk_link_helper.rb +8 -0
  35. data/lib/govuk/components/version.rb +1 -1
  36. metadata +21 -9
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 904a0b42cb6c48fa074a7335be5bd7194f90d155847fdb5b9cd5a8058cccaf49
4
- data.tar.gz: 4c6dfb22f41539a2db530f1ea54ff4d811816bbb00839b7fbe9fe195b154e2d7
3
+ metadata.gz: e7a162599cbf3c6116fa24104656807091c3f5c985714b23c47478cb97342afd
4
+ data.tar.gz: 757e782ada4df0816c0aa1f6446717df7a7cd8c3aa2a9f12c5f386d0efe352ed
5
5
  SHA512:
6
- metadata.gz: fea5a83e8fc0e99321dd2d8db5181928fd35b701fe79d70a3c72e6337be8aaaacf6f294786939570e5ce08176ae471a5a847404e6818d43d9ba4230e37e18fff
7
- data.tar.gz: 650e2c2606ceed00a0a5999020e5b30f2c8ee86cfcf1e82b2c579fabc9bed9a4eeea8b83e7d5a62af146aa572127b90c2dde04d3e5a7cbe5cc669ee297eb5930
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, @options %>
1
+ <%= link_to @text, @href, class: classes, **html_attributes %>
@@ -1,13 +1,16 @@
1
- class GovukComponent::BackLink < ViewComponent::Base
1
+ class GovukComponent::BackLink < GovukComponent::Base
2
2
  attr_accessor :text, :href, :options
3
3
 
4
- def initialize(text:, href:, classes: nil, attributes: 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
- @classes = "govuk-back-link"
8
- @classes << " #{classes}" if classes.present?
9
+ end
10
+
11
+ private
9
12
 
10
- @options = { class: @classes }
11
- @options.merge!(attributes) if attributes.present?
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
- <ol class="govuk-breadcrumbs__list">
2
- <%- @breadcrumbs.each do |text, link| %>
1
+ <%= tag.div(class: classes, **html_attributes) do %>
2
+ <ol class="govuk-breadcrumbs__list">
3
+ <%- @breadcrumbs.each do |text, link| %>
3
4
 
4
- <%- if link.present? -%>
5
- <li class="govuk-breadcrumbs__list-item">
6
- <%= link_to(text, link, class: "govuk-breadcrumbs__link") %>
7
- </li>
8
- <% else %>
9
- <li class="govuk-breadcrumbs__list-item" aria-current="page">
10
- <%= text %>
11
- </li>
12
- <% end %>
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
- <% end %>
15
- </ol>
15
+ <% end %>
16
+ </ol>
17
+ <% end %>
@@ -1,7 +1,15 @@
1
- class GovukComponent::Breadcrumbs < ViewComponent::Base
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
- <details class="govuk-details" data-module="govuk-details">
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
- <%= @text || content %>
8
+ <%= @description || content %>
9
9
  </div>
10
- </details>
10
+ <% end %>
@@ -1,8 +1,16 @@
1
- class GovukComponent::Details < ViewComponent::Base
2
- attr_accessor :summary, :text
1
+ class GovukComponent::Details < GovukComponent::Base
2
+ attr_accessor :summary, :description
3
3
 
4
- def initialize(summary:, text: nil)
5
- @summary = summary
6
- @text = text
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
- <footer class="govuk-footer " role="contentinfo">
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
- <%= @licence %>
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
- </footer>
30
+ <% end %>
@@ -1,15 +1,21 @@
1
- class GovukComponent::Footer < ViewComponent::Base
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
- <header class="govuk-header " role="banner" data-module="govuk-header">
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
- <%= nav %>
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
- </header>
38
+ <% end %>
@@ -1,12 +1,49 @@
1
- class GovukComponent::Header < ViewComponent::Base
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
- with_content_areas :nav
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 < ViewComponent::Base
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: 'govuk-inset-text') { @text }
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,4 +1,4 @@
1
- <div class="govuk-panel govuk-panel--confirmation">
1
+ <%= tag.div(class: classes, **html_attributes) do %>
2
2
  <h1 class="govuk-panel__title">
3
3
  <%= @title %>
4
4
  </h1>
@@ -6,4 +6,4 @@
6
6
  <div class="govuk-panel__body">
7
7
  <%= @body %>
8
8
  </div>
9
- </div>
9
+ <% end %>
@@ -1,8 +1,16 @@
1
- class GovukComponent::Panel < ViewComponent::Base
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
- <div class="govuk-phase-banner">
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
- <%= @tag %>
4
+ <%= @phase %>
5
5
  </strong>
6
6
  <span class="govuk-phase-banner__text">
7
7
  <%= @text || content %>
8
8
  </span>
9
9
  </p>
10
- </div>
10
+ <% end %>
@@ -1,8 +1,16 @@
1
- class GovukComponent::PhaseBanner < ViewComponent::Base
2
- attr_accessor :tag, :text
1
+ class GovukComponent::PhaseBanner < GovukComponent::Base
2
+ attr_accessor :phase, :text
3
3
 
4
- def initialize(tag:, text: nil)
5
- @tag = tag
6
- @text = text
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
- <a href="<%= @href %>" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
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
- </a>
6
+ <% end %>
@@ -1,8 +1,16 @@
1
- class GovukComponent::StartNowButton < ViewComponent::Base
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
@@ -0,0 +1,7 @@
1
+ module GovukComponent
2
+ module Traits
3
+ module CustomHtmlAttributes
4
+ attr_reader :html_attributes
5
+ end
6
+ end
7
+ end
@@ -1,7 +1,7 @@
1
- <div class="govuk-warning-text <%= @classes.join(' ') %>">
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
- </div>
7
+ <% end %>
@@ -1,7 +1,14 @@
1
- class GovukComponent::Warning < ViewComponent::Base
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
- @classes = Array.wrap(classes)
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 }
@@ -1,5 +1,5 @@
1
1
  module Govuk
2
2
  module Components
3
- VERSION = '0.1.0'
3
+ VERSION = '0.2.0'
4
4
  end
5
5
  end
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.1.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-06-18 00:00:00.000000000 Z
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.2
19
+ version: 6.0.3
20
20
  - - ">="
21
21
  - !ruby/object:Gem::Version
22
- version: 6.0.2.2
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.2
29
+ version: 6.0.3
30
30
  - - ">="
31
31
  - !ruby/object:Gem::Version
32
- version: 6.0.2.2
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: '2.5'
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: '2.5'
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.0.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