govuk-components 0.1.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 904a0b42cb6c48fa074a7335be5bd7194f90d155847fdb5b9cd5a8058cccaf49
-  data.tar.gz: 4c6dfb22f41539a2db530f1ea54ff4d811816bbb00839b7fbe9fe195b154e2d7
+  metadata.gz: 1d93a893a0e31d440b66a2235863f3f4f563a91510cddf3f233a108725e41e50
+  data.tar.gz: 4a00ba402a33aa512878d74329692d9258645e8e049b3b76dcca72c7d544c1f9
 SHA512:
-  metadata.gz: fea5a83e8fc0e99321dd2d8db5181928fd35b701fe79d70a3c72e6337be8aaaacf6f294786939570e5ce08176ae471a5a847404e6818d43d9ba4230e37e18fff
-  data.tar.gz: 650e2c2606ceed00a0a5999020e5b30f2c8ee86cfcf1e82b2c579fabc9bed9a4eeea8b83e7d5a62af146aa572127b90c2dde04d3e5a7cbe5cc669ee297eb5930
+  metadata.gz: 59f573023fa4f5ab19783aeb88c430c84b071371942e86d7b54150395859e51aaa7bd4b49d2c6968a5be1a9164f64b7407c1e978c5c66b49bec5e4ccd07f486b
+  data.tar.gz: 0fee5f518ccec30e17862fba126c87a56e690dfa4f493bda2e7190d45783f530d7b6a4c973bca23ca2053d50eff6df76d446eca24c47a471716cfbd43749fcfc

data/README.md

@@ -1,41 +1,63 @@
-> **Note!** This repository is very new and not yet fully built and documented. Breaking changes can happen at any time. Please check the [components tracker](https://github.com/DFE-Digital/govuk-components/issues/18) to see progress.
+**This gem is under heavy development and the API is likely to change.**
 
 # GOV.UK Components
 
-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).
+[![Build Status](https://travis-ci.com/DFE-Digital/govuk-components.svg?branch=master)](https://travis-ci.com/DFE-Digital/govuk-components)
 
-## What's included
-
-The gem will include the following components and helpers, [track their progress](https://github.com/DFE-Digital/govuk-components/issues/18):
+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 will be [supported natively in Rails 6.1](https://edgeguides.rubyonrails.org/layouts_and_rendering.html#rendering-objects).
 
-### Components
+## What's included
 
-* Back link ✔️
-* Breadcrumbs ✔️
-* Details ✔️
-* Footer ✔️
-* Header ✔️
-* Inset text ✔️
-* Panel ✔️
-* Phase banner ✔️
-* Start now button ✔️
-* Summary list
-* Tag ✔️
-* Warning text ✔️
+| Component name                                                         | Helper                   |
+| --------------                                                         | ------                   |
+| [Accordion](app/components/govuk_component/accordion.rb)               | `govuk_accordion`        |
+| [Back link](app/components/govuk_component/back_link.rb)               | `govuk_back_link`        |
+| [Breadcrumbs](app/components/govuk_component/breadcrumbs.rb)           | `govuk_breadcrumbs`      |
+| [Details](app/components/govuk_component/details.rb)                   | `govuk_details`          |
+| [Footer](app/components/govuk_component/footer.rb)                     | `govuk_footer`           |
+| [Header](app/components/govuk_component/header.rb)                     | `govuk_header`           |
+| [Inset text](app/components/govuk_component/inset_text.rb)             | `govuk_inset_text`       |
+| [Panel](app/components/govuk_component/panel.rb)                       | `govuk_panel`            |
+| [Phase banner](app/components/govuk_component/phase_banner.rb)         | `govuk_phase_banner`     |
+| [Start now button](app/components/govuk_component/start_now_button.rb) | `govuk_start_now_button` |
+| [Summary list](app/components/govuk_component/summary_list.rb)         | `govuk_summary_list`     |
+| [Tabs](app/components/govuk_component/tabs.rb)                         | `govuk_tabs`             |
+| [Tag](app/components/govuk_component/tag.rb)                           | `govuk_tag`              |
+| [Warning text](app/components/govuk_component/warning.rb)              | `govuk_warning`          |
 
 ### Helpers
 
-* `#govuk_link_to` ✔️
+* `#govuk_link_to`
 * `#govuk_mail_to`
 * `#govuk_button_to`
-* `#govuk_back_to_top_link` ✔️
-* Skip link ✔️
+* `#govuk_back_to_top_link`
+* `#govuk_skip_link`
+
+## Example use
+
+This library allows components to be rendered with Rails' `render` method or via the provided helpers. Here we'll use the `govuk_accordion` to render an accordion.
+
+```erb
+<%= govuk_accordion(id: 'def234') do |accordion| %>
+  <%= accordion.add_section(title: 'Section 1') do %>
+    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <% end %>
+  <%= accordion.add_section(title: 'Section 2') do %>
+    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <% end %>
+  <%= accordion.add_section(title: 'Section 3') do %>
+    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <% end %>
+<% end %>
+```
+
+Here is the rendered accordion.
 
-## Examples
+![Accordion preview](docs/images/accordion.png)
 
 For examples on usage see the [guide page](https://dfe-digital.github.io/govuk-components/).
 
-## Usage
+## Setup
 
 Add this line to your `config/application.rb`:
 

data/app/components/govuk_component/accordion.html.erb

@@ -0,0 +1,15 @@
+<%= tag.div(id: @id, class: classes, data: { module: 'govuk-accordion' }, **html_attributes) do %>
+  <% sections.each do |section| %>
+    <%= tag.div(id: section.id(suffix: 'section'), class: section.classes, **section.html_attributes) do %>
+      <div class="govuk-accordion__section-header">
+        <h2 class="govuk-accordion__section-heading">
+          <%= tag.span(section.title, id: section.id, class: "govuk-accordion__section-button") %>
+        </h2>
+        <% if section.summary.present? %>
+          <%= tag.div(section.summary, id: section.id(suffix: 'summary'), class: %w(govuk-accordion__section-summary govuk-body)) %>
+        <% end %>
+      </div>
+      <%= tag.div(section.content, id: section.id(suffix: 'content'), class: %w(govuk-accordion__section-content), aria: { labelledby: section.id }) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/govuk_component/accordion.rb

@@ -0,0 +1,41 @@
+class GovukComponent::Accordion < GovukComponent::Base
+  include ViewComponent::Slotable
+
+  with_slot :section, collection: true, class_name: 'Section'
+  wrap_slot :section
+
+  attr_accessor :id
+
+  def initialize(id: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @id = id
+  end
+
+private
+
+  def default_classes
+    %w(govuk-accordion)
+  end
+
+  class Section < GovukComponent::Slot
+    attr_accessor :title, :summary
+
+    def initialize(title:, summary: nil, classes: [], html_attributes: {})
+      super(classes: classes, html_attributes: html_attributes)
+
+      self.title   = title
+      self.summary = summary
+    end
+
+    def id(suffix: nil)
+      [title.parameterize, suffix].compact.join('-')
+    end
+
+  private
+
+    def default_classes
+      %w(govuk-accordion__section)
+    end
+  end
+end

data/app/components/govuk_component/back_link.html.erb

@@ -1 +1 @@
-<%= link_to @text, @href, @options  %>
+<%= link_to @text, @href, class: classes, **html_attributes %>

data/app/components/govuk_component/back_link.rb

@@ -1,13 +1,16 @@
-class GovukComponent::BackLink < ViewComponent::Base
+class GovukComponent::BackLink < GovukComponent::Base
   attr_accessor :text, :href, :options
 
-  def initialize(text:, href:, classes: nil, attributes: nil)
+  def initialize(text:, href:, classes: nil, html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
     @text = text
     @href = href
-    @classes = "govuk-back-link"
-    @classes << " #{classes}" if classes.present?
+  end
+
+private
 
-    @options = { class: @classes }
-    @options.merge!(attributes) if attributes.present?
+  def default_classes
+    %w(govuk-back-link)
   end
 end

data/app/components/govuk_component/base.rb

@@ -0,0 +1,17 @@
+class GovukComponent::Base < ViewComponent::Base
+  include GovukComponent::Traits::CustomClasses
+  include GovukComponent::Traits::CustomHtmlAttributes
+
+  def initialize(classes: [], html_attributes: {})
+    @classes         = parse_classes(classes)
+    @html_attributes = html_attributes
+  end
+
+  # Redirect #add_name to #slot(:name) to make building components
+  # with slots feel more DSL-like
+  def self.wrap_slot(name)
+    define_method(%(add_#{name})) do |*args, **kwargs, &block|
+      self.slot(name, *args, **kwargs, &block)
+    end
+  end
+end

data/app/components/govuk_component/breadcrumbs.html.erb

@@ -1,15 +1,17 @@
-<ol class="govuk-breadcrumbs__list">
-  <%- @breadcrumbs.each do |text, link| %>
+<%= tag.div(class: classes, **html_attributes) do %>
+  <ol class="govuk-breadcrumbs__list">
+    <%- @breadcrumbs.each do |text, link| %>
 
-    <%- if link.present? -%>
-      <li class="govuk-breadcrumbs__list-item">
-        <%= link_to(text, link, class: "govuk-breadcrumbs__link") %>
-      </li>
-    <% else %>
-      <li class="govuk-breadcrumbs__list-item" aria-current="page">
-        <%= text %>
-      </li>
-    <% end %>
+      <%- if link.present? -%>
+        <li class="govuk-breadcrumbs__list-item">
+          <%= link_to(text, link, class: "govuk-breadcrumbs__link") %>
+        </li>
+      <% else %>
+        <li class="govuk-breadcrumbs__list-item" aria-current="page">
+          <%= text %>
+        </li>
+      <% end %>
 
-  <% end %>
-</ol>
+    <% end %>
+  </ol>
+<% end %>

data/app/components/govuk_component/breadcrumbs.rb

@@ -1,7 +1,15 @@
-class GovukComponent::Breadcrumbs < ViewComponent::Base
+class GovukComponent::Breadcrumbs < GovukComponent::Base
   attr_accessor :breadcrumbs
 
-  def initialize(breadcrumbs:)
+  def initialize(breadcrumbs:, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
     @breadcrumbs = breadcrumbs
   end
+
+private
+
+  def default_classes
+    %w(govuk-breadcrumbs)
+  end
 end

data/app/components/govuk_component/details.html.erb

@@ -1,10 +1,10 @@
-<details class="govuk-details" data-module="govuk-details">
+<%= tag.details(class: classes, data: { module: 'govuk-details' }, **html_attributes) do %>
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       <%= @summary %>
     </span>
   </summary>
   <div class="govuk-details__text">
-    <%= @text || content %>
+    <%= @description || content %>
   </div>
-</details>
+<% end %>

data/app/components/govuk_component/details.rb

@@ -1,8 +1,16 @@
-class GovukComponent::Details < ViewComponent::Base
-  attr_accessor :summary, :text
+class GovukComponent::Details < GovukComponent::Base
+  attr_accessor :summary, :description
 
-  def initialize(summary:, text: nil)
-    @summary = summary
-    @text    = text
+  def initialize(summary:, description: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @summary     = summary
+    @description = description
+  end
+
+private
+
+  def default_classes
+    %w(govuk-details)
   end
 end

data/app/components/govuk_component/footer.html.erb

@@ -1,4 +1,4 @@
-<footer class="govuk-footer " role="contentinfo">
+<%= tag.footer(class: classes, role: 'contentinfo', **html_attributes) do %>
   <div class="govuk-width-container ">
     <% if content.present? %>
       <%= content %>
@@ -19,7 +19,7 @@
           <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" />
         </svg>
         <span class="govuk-footer__licence-description">
-          <%= @licence %>
+          <%= licence %>
         </span>
       </div>
       <div class="govuk-footer__meta-item">
@@ -27,4 +27,4 @@
       </div>
     </div>
   </div>
-</footer>
+<% end %>

data/app/components/govuk_component/footer.rb

@@ -1,15 +1,21 @@
-class GovukComponent::Footer < ViewComponent::Base
+class GovukComponent::Footer < GovukComponent::Base
   attr_accessor :meta, :licence, :copyright
 
-  def initialize(meta_links: nil, meta_heading: default_meta_heading, licence: nil, copyright_text: default_copright_text, copyright_url: default_copyright_url)
+  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: {})
+    super(classes: classes, html_attributes: html_attributes)
+
     @meta_links   = build_meta_links(meta_links)
     @meta_heading = raw(tag.h2(meta_heading, class: 'govuk-visually-hidden'))
-    @licence      = licence || default_licence
+    @licence      = raw(licence).presence || default_licence
     @copyright    = build_copyright(copyright_text, copyright_url)
   end
 
 private
 
+  def default_classes
+    %w(govuk-footer)
+  end
+
   def build_meta_links(links)
     return [] if links.blank?
 
@@ -23,7 +29,7 @@ private
   end
 
   def default_licence
-    link = link_to("Open Government Licence v3.0", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/")
+    link = link_to("Open Government Licence v3.0", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", class: %w(govuk-footer__link))
 
     raw(%(All content is available under the #{link}, except where otherwise stated))
   end

data/app/components/govuk_component/header.html.erb

@@ -1,4 +1,4 @@
-<header class="govuk-header " role="banner" data-module="govuk-header">
+<%= tag.header(class: classes, role: 'banner', data: { module: 'govuk-header' }, **html_attributes) do %>
   <div class="govuk-header__container govuk-width-container">
     <div class="govuk-header__logo">
       <a href=<%= @logo_href %> class="govuk-header__link govuk-header__link--homepage">
@@ -19,7 +19,20 @@
           <%= @service_name %>
         </a>
       <% end %>
-      <%= nav %>
+
+      <% if items.any? %>
+        <nav>
+          <ul class="govuk-header__navigation " aria-label="Top Level Navigation">
+            <% items.each do |item| %>
+              <%= tag.li(class: item.classes.append(item.active_class), **item.html_attributes) do %>
+                <a class="govuk-header__link" href="<%= item.href %>">
+                  <%= item.title %>
+                </a>
+              <% end %>
+            <% end %>
+          </ul>
+        </nav>
+      <% end %>
     </div>
   </div>
-</header>
+<% end %>

data/app/components/govuk_component/header.rb

@@ -1,12 +1,49 @@
-class GovukComponent::Header < ViewComponent::Base
+class GovukComponent::Header < GovukComponent::Base
+  include ViewComponent::Slotable
+
   attr_accessor :logo, :logo_href, :service_name, :service_name_href
 
-  with_content_areas :nav
+  with_slot :item, collection: true, class_name: 'Item'
+  wrap_slot :item
+
+  def initialize(logo: 'GOV.UK', logo_href: '/', service_name: nil, service_name_href: '/', classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
 
-  def initialize(logo: 'GOV.UK', logo_href: '/', service_name: nil, service_name_href: '/')
     @logo              = logo
     @logo_href         = logo_href
     @service_name      = service_name
     @service_name_href = service_name_href
   end
+
+private
+
+  def default_classes
+    %w(govuk-header)
+  end
+
+  class Item < GovukComponent::Slot
+    attr_accessor :title, :href, :active
+
+    def initialize(title:, href:, active: false, classes: [], html_attributes: {})
+      super(classes: classes, html_attributes: html_attributes)
+
+      self.title  = title
+      self.href   = href
+      self.active = active
+    end
+
+    def active?
+      active
+    end
+
+    def active_class
+      %w(govuk-header__navigation-item--active) if active?
+    end
+
+  private
+
+    def default_classes
+      %w(govuk-header__navigation-item)
+    end
+  end
 end

data/app/components/govuk_component/inset_text.rb

@@ -1,11 +1,19 @@
-class GovukComponent::InsetText < ViewComponent::Base
+class GovukComponent::InsetText < GovukComponent::Base
   attr_accessor :text
 
-  def initialize(text:)
+  def initialize(text:, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
     @text = text
   end
 
   def call
-    tag.div(class: 'govuk-inset-text') { @text }
+    tag.div(class: classes, **html_attributes) { @text }
+  end
+
+private
+
+  def default_classes
+    %w(govuk-inset-text)
   end
 end

data/app/components/govuk_component/panel.html.erb

@@ -1,4 +1,4 @@
-<div class="govuk-panel govuk-panel--confirmation">
+<%= tag.div(class: classes, **html_attributes) do %>
   <h1 class="govuk-panel__title">
     <%= @title %>
   </h1>
@@ -6,4 +6,4 @@
   <div class="govuk-panel__body">
     <%= @body %>
   </div>
-</div>
+<% end %>

data/app/components/govuk_component/panel.rb

@@ -1,8 +1,16 @@
-class GovukComponent::Panel < ViewComponent::Base
+class GovukComponent::Panel < GovukComponent::Base
   attr_accessor :title, :body
 
-  def initialize(title:, body:)
+  def initialize(title:, body:, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
     @title = title
     @body  = body
   end
+
+private
+
+  def default_classes
+    %w(govuk-panel govuk-panel--confirmation)
+  end
 end

data/app/components/govuk_component/phase_banner.html.erb

@@ -1,10 +1,10 @@
-<div class="govuk-phase-banner">
+<%= tag.div(class: classes, **html_attributes) do %>
   <p class="govuk-phase-banner__content">
     <strong class="govuk-tag govuk-phase-banner__content__tag">
-      <%= @tag %>
+      <%= @phase %>
     </strong>
     <span class="govuk-phase-banner__text">
       <%= @text || content %>
     </span>
   </p>
-</div>
+<% end %>

data/app/components/govuk_component/phase_banner.rb

@@ -1,8 +1,16 @@
-class GovukComponent::PhaseBanner < ViewComponent::Base
-  attr_accessor :tag, :text
+class GovukComponent::PhaseBanner < GovukComponent::Base
+  attr_accessor :phase, :text
 
-  def initialize(tag:, text: nil)
-    @tag  = tag
-    @text = text
+  def initialize(phase:, text: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @phase = phase
+    @text  = text
+  end
+
+private
+
+  def default_classes
+    %w(govuk-phase-banner)
   end
 end

data/app/components/govuk_component/slot.rb

@@ -0,0 +1,9 @@
+class GovukComponent::Slot < ViewComponent::Slot
+  include GovukComponent::Traits::CustomClasses
+  include GovukComponent::Traits::CustomHtmlAttributes
+
+  def initialize(classes: [], html_attributes: {})
+    @classes         = parse_classes(classes)
+    @html_attributes = html_attributes
+  end
+end

data/app/components/govuk_component/start_now_button.html.erb

@@ -1,6 +1,6 @@
-<a href="<%= @href %>" role="button" draggable="false" class="govuk-button govuk-button--start" data-module="govuk-button">
+<%= link_to(@href, role: 'button', draggable: 'false', class: classes, data: { module: 'govuk-button' }, **html_attributes) do %>
     <%= @text %>
     <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">
       <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
     </svg>
-</a>
+<% end %>

data/app/components/govuk_component/start_now_button.rb

@@ -1,8 +1,16 @@
-class GovukComponent::StartNowButton < ViewComponent::Base
+class GovukComponent::StartNowButton < GovukComponent::Base
   attr_accessor :text, :href
 
-  def initialize(text:, href:)
+  def initialize(text:, href:, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
     @text = text
     @href = href
   end
+
+private
+
+  def default_classes
+    %w(govuk-button govuk-button--start)
+  end
 end

data/app/components/govuk_component/summary_list.html.erb

@@ -0,0 +1,19 @@
+<%= tag.dl(class: classes, **html_attributes) do %>
+  <% rows.each do |row| %>
+    <%= tag.div(class: row.classes, **row.html_attributes) do %>
+      <dt class="govuk-summary-list__key">
+        <%= row.key %>
+      </dt>
+
+      <dd class="govuk-summary-list__value">
+        <%= row.value %>
+      </dd>
+
+      <% if any_row_has_actions? %>
+        <dd class="govuk-summary-list__actions">
+          <%= row.action %>
+        </dd>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/govuk_component/summary_list.rb

@@ -0,0 +1,34 @@
+class GovukComponent::SummaryList < GovukComponent::Base
+  include ViewComponent::Slotable
+
+  with_slot :row, collection: true, class_name: 'Row'
+  wrap_slot :row
+
+  def any_row_has_actions?
+    rows.any? { |r| r.action.present? }
+  end
+
+private
+
+  def default_classes
+    %w(govuk-summary-list)
+  end
+
+  class Row < GovukComponent::Slot
+    attr_accessor :key, :value, :action
+
+    def initialize(key:, value:, action: nil, classes: [], html_attributes: {})
+      super(classes: classes, html_attributes: html_attributes)
+
+      self.key    = key
+      self.value  = value
+      self.action = action
+    end
+
+  private
+
+    def default_classes
+      %w(govuk-summary-list__row)
+    end
+  end
+end

data/app/components/govuk_component/tabs.html.erb

@@ -0,0 +1,19 @@
+<%= tag.div(class: classes, data: { module: 'govuk-tabs' }, **html_attributes) do %>
+  <h2 class="govuk-tabs__title">
+    <%= title %>
+  </h2>
+  <ul class="govuk-tabs__list">
+    <% tabs.each.with_index do |tab, i| %>
+      <li class="govuk-tabs__list-item <%= 'govuk-tabs__list-item--selected' if i.zero? %>">
+        <a class="govuk-tabs__tab" href="<%= tab.id(prefix: '#') %>">
+          <%= tab.title %>
+        </a>
+      </li>
+    <% end %>
+  </ul>
+  <% tabs.each.with_index do |tab, i| %>
+    <%= tag.div(class: tab.classes.append(tab.hidden_class(i)), id: tab.id, **tab.html_attributes) do %>
+      <%= tab.content %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/govuk_component/tabs.rb

@@ -0,0 +1,42 @@
+class GovukComponent::Tabs < GovukComponent::Base
+  include ViewComponent::Slotable
+
+  attr_accessor :title
+
+  with_slot :tab, collection: true, class_name: 'Tab'
+  wrap_slot :tab
+
+  def initialize(title:, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    self.title = title
+  end
+
+private
+
+  def default_classes
+    %w(govuk-tabs)
+  end
+
+  class Tab < GovukComponent::Slot
+    attr_accessor :title
+
+    def initialize(title:, classes: [], html_attributes: {})
+      super(classes: classes, html_attributes: html_attributes)
+
+      self.title = title
+    end
+
+    def id(prefix: nil)
+      [prefix, title.parameterize].join
+    end
+
+    def default_classes
+      %w(govuk-tabs__panel)
+    end
+
+    def hidden_class(i = nil)
+      %(govuk-tabs__panel--hidden) unless i&.zero?
+    end
+  end
+end

data/app/components/govuk_component/tag.rb

@@ -0,0 +1,30 @@
+class GovukComponent::Tag < GovukComponent::Base
+  attr_reader :text
+
+  COLOURS = %w(grey green turquoise blue red purple pink orange yellow).freeze
+
+  def initialize(text:, colour: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @text   = text
+    @colour = colour
+  end
+
+  def call
+    tag.strong(@text, class: classes.append(colour_class), **html_attributes)
+  end
+
+private
+
+  def default_classes
+    %w(govuk-tag)
+  end
+
+  def colour_class
+    return nil unless @colour.present?
+
+    fail("invalid tag colour #{@colour}, supported colours are #{COLOURS.to_sentence}") unless @colour.in?(COLOURS)
+
+    %(govuk-tag--#{@colour})
+  end
+end

data/app/components/govuk_component/traits/custom_classes.rb

@@ -0,0 +1,29 @@
+module GovukComponent
+  module Traits
+    module CustomClasses
+
+      def classes
+        default_classes.concat(Array.wrap(@classes))
+      end
+
+      def default_classes
+        Rails.logger.warn(%(#default_classes hasn't been defined in #{self.class}))
+
+        []
+      end
+
+    private
+
+      def parse_classes(classes)
+        return [] unless classes.present?
+
+        case classes
+        when Array
+          classes
+        when String
+          classes.split
+        end
+      end
+    end
+  end
+end

data/app/components/govuk_component/traits/custom_html_attributes.rb

@@ -0,0 +1,7 @@
+module GovukComponent
+  module Traits
+    module CustomHtmlAttributes
+      attr_reader :html_attributes
+    end
+  end
+end

data/app/components/govuk_component/warning.html.erb

@@ -1,7 +1,7 @@
-<div class="govuk-warning-text <%= @classes.join(' ') %>">
+<%= content_tag('div', class: classes, **html_attributes) do %>
   <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
   <strong class="govuk-warning-text__text">
     <span class="govuk-warning-text__assistive"><%= @icon_fallback_text %></span>
     <%= @text %>
   </strong>
-</div>
+<% end %>

data/app/components/govuk_component/warning.rb

@@ -1,7 +1,14 @@
-class GovukComponent::Warning < ViewComponent::Base
-  def initialize(text:, icon_fallback_text: 'Warning', classes: [])
+class GovukComponent::Warning < GovukComponent::Base
+  def initialize(text:, icon_fallback_text: 'Warning', classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
     @text = text
     @icon_fallback_text = icon_fallback_text
-    @classes = Array.wrap(classes)
+  end
+
+private
+
+  def default_classes
+    %w(govuk-warning-text)
   end
 end

data/app/helpers/govuk_components_helper.rb

@@ -0,0 +1,28 @@
+module GovukComponentsHelper
+  {
+    govuk_accordion: 'GovukComponent::Accordion',
+    govuk_back_link: 'GovukComponent::BackLink',
+    govuk_breadcrumbs: 'GovukComponent::Breadcrumbs',
+    govuk_details: 'GovukComponent::Details',
+    govuk_footer: 'GovukComponent::Footer',
+    govuk_header: 'GovukComponent::Header',
+    govuk_inset_text: 'GovukComponent::InsetText',
+    govuk_panel: 'GovukComponent::Panel',
+    govuk_phase_banner: 'GovukComponent::PhaseBanner',
+    govuk_start_now_button: 'GovukComponent::StartNowButton',
+    govuk_summary_list: 'GovukComponent::SummaryList',
+    govuk_tabs: 'GovukComponent::Tabs',
+    govuk_tag: 'GovukComponent::Tag',
+    govuk_warning: 'GovukComponent::Warning',
+  }.each do |name, klass|
+    define_method(name) do |*args, **kwargs, &block|
+      capture do
+        render(klass.constantize.new(*args, **kwargs)) do |com|
+          block.call(com) unless block.blank?
+        end
+      end
+    end
+  end
+end
+
+ActiveSupport.on_load(:action_view) { include GovukComponentsHelper }

data/app/helpers/govuk_link_helper.rb

@@ -1,6 +1,14 @@
 module GovukLinkHelper
-  def govuk_link_to(*args, **kwargs)
-    link_to(*args, **{ class: 'govuk-link' }.deep_merge(kwargs))
+  def govuk_link_to(*args, **kwargs, &block)
+    link_to(*args, **{ class: 'govuk-link' }.deep_merge(kwargs), &block)
+  end
+
+  def govuk_mail_to(*args, **kwargs, &block)
+    mail_to(*args, **{ class: 'govuk-link' }.deep_merge(kwargs), &block)
+  end
+
+  def govuk_button_to(*args, **kwargs)
+    button_to(*args, **{ class: 'govuk-button' }.deep_merge(kwargs))
   end
 end
 

data/lib/govuk/components/version.rb

@@ -1,5 +1,5 @@
 module Govuk
   module Components
-    VERSION = '0.1.0'
+    VERSION = '0.6.0'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk-components
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.6.0
 platform: ruby
 authors:
 - DfE developers
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-06-18 00:00:00.000000000 Z
+date: 2020-11-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -16,48 +16,34 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 6.0.2
+        version: 6.0.3
     - - ">="
       - !ruby/object:Gem::Version
-        version: 6.0.2.2
+        version: 6.0.3
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 6.0.2
+        version: 6.0.3
     - - ">="
       - !ruby/object:Gem::Version
-        version: 6.0.2.2
-- !ruby/object:Gem::Dependency
-  name: slim-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.2'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.2'
+        version: 6.0.3
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.5'
+        version: 2.18.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.5'
+        version: 2.18.1
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -139,8 +125,11 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/components/govuk_component/accordion.html.erb
+- app/components/govuk_component/accordion.rb
 - app/components/govuk_component/back_link.html.erb
 - app/components/govuk_component/back_link.rb
+- app/components/govuk_component/base.rb
 - app/components/govuk_component/breadcrumbs.html.erb
 - app/components/govuk_component/breadcrumbs.rb
 - app/components/govuk_component/details.html.erb
@@ -154,11 +143,20 @@ files:
 - app/components/govuk_component/panel.rb
 - app/components/govuk_component/phase_banner.html.erb
 - app/components/govuk_component/phase_banner.rb
+- app/components/govuk_component/slot.rb
 - app/components/govuk_component/start_now_button.html.erb
 - app/components/govuk_component/start_now_button.rb
+- app/components/govuk_component/summary_list.html.erb
+- app/components/govuk_component/summary_list.rb
+- app/components/govuk_component/tabs.html.erb
+- app/components/govuk_component/tabs.rb
+- app/components/govuk_component/tag.rb
+- app/components/govuk_component/traits/custom_classes.rb
+- app/components/govuk_component/traits/custom_html_attributes.rb
 - app/components/govuk_component/warning.html.erb
 - app/components/govuk_component/warning.rb
 - app/helpers/govuk_back_to_top_link_helper.rb
+- app/helpers/govuk_components_helper.rb
 - app/helpers/govuk_link_helper.rb
 - app/helpers/govuk_skip_link_helper.rb
 - config/routes.rb
@@ -166,11 +164,11 @@ files:
 - lib/govuk/components/engine.rb
 - lib/govuk/components/version.rb
 - lib/tasks/govuk/components_tasks.rake
-homepage: https://www.github.com/dfe-digital
+homepage: https://github.com/DFE-Digital/govuk-components
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -185,8 +183,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
-signing_key: 
+rubygems_version: 3.1.2
+signing_key:
 specification_version: 4
 summary: Lightweight set of reusable GOV.UK Design System components
 test_files: []