govuk-components 2.0.0rc3 → 2.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: beb46263535565ddbe53ab329c2a0065a9bba711014a59cc17906ae90be6d606
-  data.tar.gz: ba8a6b1c46e1fd4ccc5b987a9f3603982067c60e5f0be47b896da24d41fe40a4
+  metadata.gz: 2200643f294dd3059bece898a4eb5f3d39d185d57beedcd52cb995286c0b2e50
+  data.tar.gz: 0d8d5f3fcec2c72493be6dc60af8d5d0987812dee91d0912c01b7ecfdf91a0b4
 SHA512:
-  metadata.gz: 05a8518a55e542bfc68d08dd6cff014e186c865523de16b51fe7f20d656faeda8ad75d50f2eaffc4bab6fb4482aaa22c0382de5ef8a5b41c5c85c6408e03462f
-  data.tar.gz: db2e57dc051165386d32e5800d2dc28a146999b2cb215f3b806be62b07b4a2f96878ea8261c614f853dbf0d0d0b6be461b995b4febff6aabece1d4771e978a7a
+  metadata.gz: 866ee06ca6a25f9336005987a5d86d2bd9d2dac1f05b93e1805477378b0588b80051421179f4986e0b4a7cbc6796af0e5cbb60b7661283a1151ef88ce2985f53
+  data.tar.gz: 9ce92dde4cd348284b3542556703bc097ca8f0e650f0e38df805339e90d0cf496ab8c5c7cc06f20212ae3dd00c51bf64a9ce6d39d990bebd73556c68ac1fcb15

data/README.md

@@ -4,61 +4,87 @@
 [![Maintainability](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/maintainability)](https://codeclimate.com/github/DFE-Digital/govuk-components/maintainability)
 [![Test Coverage](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/test_coverage)](https://codeclimate.com/github/DFE-Digital/govuk-components/test_coverage)
 [![GitHub license](https://img.shields.io/github/license/DFE-Digital/govuk-components)](https://github.com/DFE-Digital/govuk-components/blob/master/LICENSE)
-[![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=DFE-Digital/govuk-components)](https://dependabot.com)
-[![GOV.UK Design System Version](https://img.shields.io/badge/GOV.UK%20Design%20System-3.10.2-brightgreen)](https://design-system.service.gov.uk)
+[![GOV.UK Design System Version](https://img.shields.io/badge/GOV.UK%20Design%20System-3.13.1-brightgreen)](https://design-system.service.gov.uk)
 
 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.
 
-## What's included
-
-| 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`         |
-| [Cookie banner](app/components/govuk_component/cookie_banner.rb)             | `govuk_cookie_banner`       |
-| [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`          |
-| [Notification banner](app/components/govuk_component/notification_banner.rb) | `govuk_notification_banner` |
-| [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_mail_to`
-* `#govuk_button_to`
-* `#govuk_back_to_top_link`
-* `#govuk_skip_link`
+It aims to implement the functionality from the original Nunjucks macros in a way that will feel more familiar to Rails developers. Blocks are preferred over strings of HTML, beneath the surface each component is just a Ruby object, everything is inheritable and overrideable.
+
+## What's included?
+
+All of the non-form components from the GOV.UK Design System are implmented by this library as ViewComponents. Form components are implemented by the [form builder](https://govuk-form-builder.netlify.app/).
+
+The provided components are:
+
+* [Accordion](https://dfe-digital.github.io/govuk-components/#accordion)
+* [Back link](https://dfe-digital.github.io/govuk-components/#back-links)
+* [Back to top link](https://dfe-digital.github.io/govuk-components/#back-to-top-link)
+* [Breadcrumbs](https://dfe-digital.github.io/govuk-components/#breadcrumbs)
+* [Cookie banner](https://dfe-digital.github.io/govuk-components/#cookie-banner)
+* [Details](https://dfe-digital.github.io/govuk-components/#details)
+* [Footer](https://dfe-digital.github.io/govuk-components/#footer)
+* [Header](https://dfe-digital.github.io/govuk-components/#header)
+* [Inset text](https://dfe-digital.github.io/govuk-components/#inset-text)
+* [Notification banner](https://dfe-digital.github.io/govuk-components/#notification-banner)
+* [Panel](https://dfe-digital.github.io/govuk-components/#panel)
+* [Phase banner](https://dfe-digital.github.io/govuk-components/#phase-banner)
+* [Skip link](https://dfe-digital.github.io/govuk-components/#skip-link)
+* [Start button](https://dfe-digital.github.io/govuk-components/#start-button)
+* [Summary list](https://dfe-digital.github.io/govuk-components/#summary-list)
+* [Tabs](https://dfe-digital.github.io/govuk-components/#tabs)
+* [Tables](https://dfe-digital.github.io/govuk-components/#table)
+* [Tags](https://dfe-digital.github.io/govuk-components/#tags)
+* [Warning text](https://dfe-digital.github.io/govuk-components/#warning-text)
+
+This library also provides [several link helpers](https://dfe-digital.github.io/govuk-components/#links-and-buttons) that are commonly used in services, including `#govuk_link_to` and `#govuk_button_to`.
+
+## Alternative syntax
+
+All of the components can be rendered in two ways:
+
+* directly using Rails' `#render` method:
+
+  ```erb
+    <%= render GovukComponent::WarningTextComponent.new do %>
+      A serious warning
+    <% end %>
+  ```
+
+* via the helper wrapper:
+
+  ```erb
+    <%= govuk_warning_text do %>
+      A serious warning
+    <% end %>
+  ```
+
+  The naming convention for helpers is `govuk_` followed by the component's name in snake case. You can
+  see the full list in [GovukComponentsHelper](app/helpers/govuk_components_helper.rb).
 
 ## 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.
+This library allows components to be rendered with Rails' `render` method or via the provided helpers. Here we'll use the `govuk_tabs` to render three tabbed sections:
 
 ```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>
+<%= govuk_tabs(title: 'Days of the week') do |component| %>
+  <% component.tab(label: 'Monday') do %>
+    <p>Monday's child is fair of face</p>
   <% end %>
-  <%= accordion.add_section(title: 'Section 2') do %>
-    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+  <% component.tab(label: 'Tuesday') do %>
+    <p>Tuesday's child is full of grace</p>
   <% end %>
-  <%= accordion.add_section(title: 'Section 3') do %>
-    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+  <% component.tab(label: 'Wednesday') do %>
+    <p>Wednesday's child is full of woe</p>
   <% end %>
 <% end %>
+
 ```
 
-Here is the rendered accordion.
+Here are the rendered tabs:
 
-![Accordion preview](docs/images/accordion.png)
+![Tabs preview](docs/images/tabs.png)
 
 For examples on usage see the [guide page](https://dfe-digital.github.io/govuk-components/).
 
@@ -70,6 +96,15 @@ Add this line to your `config/application.rb`:
 require "govuk/components"
 ```
 
+## Services using this library
+
+* [Apply for teacher training](https://github.com/DFE-Digital/apply-for-teacher-training)
+* [Find postgraduate teacher training](https://github.com/DFE-Digital/find-teacher-training)
+* [Get help with technology](https://github.com/DFE-Digital/get-help-with-tech)
+* [Publish teacher training courses](https://github.com/DFE-Digital/publish-teacher-training)
+* [Register trainee teachers](https://github.com/DFE-Digital/register-trainee-teachers)
+* [Teaching Vacancies](https://github.com/DFE-Digital/teaching-vacancies)
+
 ## Installation
 
 Add this line to your application's Gemfile:

data/app/components/govuk_component/breadcrumbs_component.rb

@@ -33,7 +33,7 @@ private
     if link.present?
       list_item { link_to(text, link, class: "govuk-breadcrumbs__link") }
     else
-      list_item(aria: { current: "page" }) { text }
+      list_item(aria: { current: "page" }) { text.to_s }
     end
   end
 

data/app/components/govuk_component/cookie_banner_component/message_component.rb

@@ -15,12 +15,12 @@ class GovukComponent::CookieBannerComponent::MessageComponent < GovukComponent::
 
   def call
     tag.div(class: classes, role: role, hidden: hidden, **html_attributes) do
-      tag.div(class: "govuk-grid-row") do
-        safe_join([
-          tag.div(class: "govuk-grid-column-two-thirds") { safe_join([heading_element, message_element]) },
-          actions_element
-        ])
-      end
+      safe_join([
+        tag.div(class: "govuk-grid-row") do
+          tag.div(class: "govuk-grid-column-two-thirds") { safe_join([heading_element, message_element]) }
+        end,
+        actions_element
+      ])
     end
   end
 
@@ -31,11 +31,13 @@ private
   end
 
   def heading_element
+    return if heading_content.blank?
+
     tag.h2(heading_content, class: %w(govuk-cookie-banner__heading govuk-heading-m))
   end
 
   def heading_content
-    heading_html || heading_text || fail(ArgumentError, "no heading_text or heading_html")
+    heading_html || heading_text
   end
 
   def message_element

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

@@ -33,11 +33,7 @@
             <%= tag.ul(class: navigation_classes, id: "navigation", aria: { label: navigation_label }) do %>
               <% navigation_items.each do |item| %>
                 <%= tag.li(class: item.classes.append(item.active_class), **item.html_attributes) do %>
-                  <% if item.link? %>
-                    <%= link_to(item.text, item.href, class: "govuk-header__link") %>
-                  <% else %>
-                    <%= item.text %>
-                  <% end %>
+                  <%= item %>
                 <% end %>
               <% end %>
             <% end %>

data/app/components/govuk_component/header_component.rb

@@ -75,6 +75,14 @@ private
       href.present?
     end
 
+    def call
+      if link?
+        link_to(text, href, class: "govuk-header__link")
+      else
+        text
+      end
+    end
+
   private
 
     def default_classes

data/app/components/govuk_component/table_component/body_component.html.erb

@@ -0,0 +1,5 @@
+<%= tag.tbody(class: classes, **html_attributes) do %>
+  <% rows.each do |row| %>
+    <%= row %>
+  <% end %>
+<% end %>

data/app/components/govuk_component/table_component/body_component.rb

@@ -0,0 +1,21 @@
+class GovukComponent::TableComponent::BodyComponent < GovukComponent::Base
+  renders_many :rows, GovukComponent::TableComponent::RowComponent
+
+  def initialize(rows: nil, first_cell_is_header: false, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    build_rows_from_row_data(rows, first_cell_is_header)
+  end
+
+private
+
+  def build_rows_from_row_data(data, first_cell_is_header)
+    return if data.blank?
+
+    data.each { |d| row(cell_data: d, first_cell_is_header: first_cell_is_header) }
+  end
+
+  def default_classes
+    %w(govuk-table__body)
+  end
+end

data/app/components/govuk_component/table_component/caption_component.rb

@@ -0,0 +1,39 @@
+class GovukComponent::TableComponent::CaptionComponent < GovukComponent::Base
+  attr_reader :text, :size
+
+  SIZES = %w(s m l xl).freeze
+
+  def initialize(text: nil, id: nil, size: 'm', classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @id   = id
+    @text = text
+    @size = size
+  end
+
+  def call
+    tag.caption(caption_content, class: classes, **html_attributes)
+  end
+
+  def render?
+    caption_content.present?
+  end
+
+private
+
+  def caption_content
+    @caption_content ||= (content || text)
+  end
+
+  def default_classes
+    %w(govuk-table__caption).tap do |c|
+      c << caption_size_class if @size
+    end
+  end
+
+  def caption_size_class
+    fail(ArgumentError, "bad size #{size}, must be in #{SIZES}") unless size.in?(SIZES)
+
+    %(govuk-table__caption--#{size})
+  end
+end

data/app/components/govuk_component/table_component/cell_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag(cell_element, cell_content, class: classes, **html_attributes) %>

data/app/components/govuk_component/table_component/cell_component.rb

@@ -0,0 +1,55 @@
+class GovukComponent::TableComponent::CellComponent < GovukComponent::Base
+  attr_reader :text, :header, :numeric, :width
+
+  alias_method :numeric?, :numeric
+
+  WIDTHS = {
+    "full"           => "govuk-input govuk-!-width-full",
+    "three-quarters" => "govuk-input govuk-!-width-three-quarters",
+    "two-thirds"     => "govuk-input govuk-!-width-two-thirds",
+    "one-half"       => "govuk-input govuk-!-width-one-half",
+    "one-third"      => "govuk-input govuk-!-width-one-third",
+    "one-quarter"    => "govuk-input govuk-!-width-one-quarter",
+  }.freeze
+
+  def initialize(header: false, text: nil, numeric: false, width: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @header  = header
+    @text    = text
+    @numeric = numeric
+    @width   = width
+  end
+
+private
+
+  def width?
+    width.present?
+  end
+
+  def cell_content
+    content || text
+  end
+
+  def cell_element
+    header ? :th : :td
+  end
+
+  def default_classes
+    if header
+      %w(govuk-table__header).tap do |c|
+        c << "govuk-table__header--numeric" if numeric?
+        c << width_class if width?
+      end
+    else
+      %w(govuk-table__cell).tap do |c|
+        c << "govuk-table__cell--numeric" if numeric?
+        c << width_class if width?
+      end
+    end
+  end
+
+  def width_class
+    WIDTHS.fetch(width)
+  end
+end

data/app/components/govuk_component/table_component/head_component.html.erb

@@ -0,0 +1,5 @@
+<%= tag.thead(class: classes, **html_attributes) do %>
+  <% rows.each do |row| %>
+    <%= row %>
+  <% end %>
+<% end %>

data/app/components/govuk_component/table_component/head_component.rb

@@ -0,0 +1,23 @@
+class GovukComponent::TableComponent::HeadComponent < GovukComponent::Base
+  renders_many :rows, GovukComponent::TableComponent::RowComponent
+
+  attr_reader :row_data
+
+  def initialize(rows: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    build_rows_from_row_data(rows)
+  end
+
+private
+
+  def build_rows_from_row_data(data)
+    return if data.blank?
+
+    data.each { |d| row(cell_data: d, header: true) }
+  end
+
+  def default_classes
+    %w(govuk-table__head)
+  end
+end

data/app/components/govuk_component/table_component/row_component.html.erb

@@ -0,0 +1,5 @@
+<%= tag.tr(class: classes, **html_attributes) do %>
+  <% cells.each do |cell| %>
+    <%= cell %>
+  <% end %>
+<% end %>

data/app/components/govuk_component/table_component/row_component.rb

@@ -0,0 +1,30 @@
+class GovukComponent::TableComponent::RowComponent < GovukComponent::Base
+  renders_many :cells, GovukComponent::TableComponent::CellComponent
+
+  attr_reader :header, :first_cell_is_header
+
+  def initialize(cell_data: nil, first_cell_is_header: false, header: false, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @header = header
+    @first_cell_is_header = first_cell_is_header
+
+    build_cells_from_cell_data(cell_data)
+  end
+
+private
+
+  def build_cells_from_cell_data(cell_data)
+    return if cell_data.blank?
+
+    cell_data.map.with_index { |cd, i| cell(header: cell_is_header?(i), text: cd) }
+  end
+
+  def cell_is_header?(count)
+    header || (first_cell_is_header && count.zero?)
+  end
+
+  def default_classes
+    %w(govuk-table__row)
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= tag.table(id: id, class: classes, **html_attributes) do %>
+  <%= caption %>
+  <%= head %>
+  <% bodies.each do |body| %>
+    <%= body %>
+  <% end %>
+<% end %>

data/app/components/govuk_component/table_component.rb

@@ -0,0 +1,33 @@
+class GovukComponent::TableComponent < GovukComponent::Base
+  renders_one :caption, GovukComponent::TableComponent::CaptionComponent
+  renders_one :head, GovukComponent::TableComponent::HeadComponent
+  renders_many :bodies, GovukComponent::TableComponent::BodyComponent
+
+  attr_accessor :id, :first_cell_is_header, :caption_text
+
+  def initialize(id: nil, rows: nil, head: nil, caption: nil, first_cell_is_header: false, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @id                   = id
+    @first_cell_is_header = first_cell_is_header
+    @caption_text         = caption
+
+    # when no rows are passed in it's likely we're taking the slot approach
+    return unless rows.presence
+
+    # if no head is passed in,use the first row for headers
+    build(*(head ? [head, rows] : [rows[0], rows[1..]]), caption_text)
+  end
+
+private
+
+  def build(head_data, body_data, caption_text)
+    caption(text: caption_text)
+    head(rows: [head_data])
+    body(rows: body_data, first_cell_is_header: first_cell_is_header)
+  end
+
+  def default_classes
+    %w(govuk-table)
+  end
+end

data/app/helpers/govuk_components_helper.rb

@@ -13,6 +13,7 @@ module GovukComponentsHelper
     govuk_phase_banner: 'GovukComponent::PhaseBannerComponent',
     govuk_start_button: 'GovukComponent::StartButtonComponent',
     govuk_summary_list: 'GovukComponent::SummaryListComponent',
+    govuk_table: 'GovukComponent::TableComponent',
     govuk_tabs: 'GovukComponent::TabComponent',
     govuk_tag: 'GovukComponent::TagComponent',
     govuk_warning_text: 'GovukComponent::WarningTextComponent',

data/lib/govuk/components/version.rb

@@ -1,5 +1,5 @@
 module Govuk
   module Components
-    VERSION = '2.0.0rc3'.freeze
+    VERSION = '2.1.1'.freeze
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk-components
 version: !ruby/object:Gem::Version
-  version: 2.0.0rc3
+  version: 2.1.1
 platform: ruby
 authors:
 - DfE developers
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-06 00:00:00.000000000 Z
+date: 2021-09-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activemodel
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.36.0
+        version: 2.39.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.36.0
+        version: 2.39.0
 - !ruby/object:Gem::Dependency
   name: pry-byebug
   requirement: !ruby/object:Gem::Requirement
@@ -191,6 +191,17 @@ files:
 - app/components/govuk_component/summary_list_component/value_component.rb
 - app/components/govuk_component/tab_component.html.erb
 - app/components/govuk_component/tab_component.rb
+- app/components/govuk_component/table_component.html.erb
+- app/components/govuk_component/table_component.rb
+- app/components/govuk_component/table_component/body_component.html.erb
+- app/components/govuk_component/table_component/body_component.rb
+- app/components/govuk_component/table_component/caption_component.rb
+- app/components/govuk_component/table_component/cell_component.html.erb
+- app/components/govuk_component/table_component/cell_component.rb
+- app/components/govuk_component/table_component/head_component.html.erb
+- app/components/govuk_component/table_component/head_component.rb
+- app/components/govuk_component/table_component/row_component.html.erb
+- app/components/govuk_component/table_component/row_component.rb
 - app/components/govuk_component/tag_component.rb
 - app/components/govuk_component/traits/custom_classes.rb
 - app/components/govuk_component/traits/custom_html_attributes.rb
@@ -209,7 +220,7 @@ homepage: https://github.com/DFE-Digital/govuk-components
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -220,12 +231,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.1.6
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Lightweight set of reusable GOV.UK Design System components
 test_files: []