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.
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