govuk-components 1.2.0 → 2.0.0b1

data/app/components/govuk_component/panel_component.rb

@@ -0,0 +1,46 @@
+class GovukComponent::PanelComponent < GovukComponent::Base
+  attr_accessor :title, :body
+
+  def initialize(title: nil, body: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @title = title
+    @body  = body
+  end
+
+  def call
+    tag.div(class: classes, **html_attributes) do
+      safe_join([panel_title, panel_body].compact)
+    end
+  end
+
+private
+
+  def default_classes
+    %w(govuk-panel govuk-panel--confirmation)
+  end
+
+  def display_title?
+    title.present?
+  end
+
+  def display_body?
+    body.present? || content.present?
+  end
+
+  def panel_title
+    tag.h1(title, class: "govuk-panel__title") if display_title?
+  end
+
+  def panel_body
+    if display_body?
+      tag.div(class: "govuk-panel__body") do
+        content.presence || @body
+      end
+    end
+  end
+
+  def render?
+    display_title? || display_body?
+  end
+end

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

@@ -0,0 +1,6 @@
+<%= tag.div(class: classes, **html_attributes) do %>
+  <p class="govuk-phase-banner__content">
+    <%= render(phase_tag_component) %>
+    <%= tag.span((content.presence || @text), class: "govuk-phase-banner__text") %>
+  </p>
+<% end %>

data/app/components/govuk_component/phase_banner_component.rb

@@ -0,0 +1,20 @@
+class GovukComponent::PhaseBannerComponent < GovukComponent::Base
+  attr_accessor :text
+
+  def initialize(phase_tag: nil, text: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @phase_tag = phase_tag
+    @text      = text
+  end
+
+  def phase_tag_component
+    GovukComponent::TagComponent.new(classes: "govuk-phase-banner__content__tag", **@phase_tag)
+  end
+
+private
+
+  def default_classes
+    %w(govuk-phase-banner)
+  end
+end

data/app/components/govuk_component/start_button_component.rb

@@ -0,0 +1,47 @@
+class GovukComponent::StartButtonComponent < GovukComponent::Base
+  attr_accessor :text, :href
+
+  def initialize(text:, href:, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @text = text
+    @href = href
+  end
+
+  def call
+    link_to(@href, **default_attributes, **html_attributes) do
+      safe_join([@text, icon])
+    end
+  end
+
+private
+
+  def default_attributes
+    {
+      role: 'button',
+      draggable: 'false',
+      class: classes,
+      data: { module: 'govuk-button' }
+    }
+  end
+
+  def default_classes
+    %w(govuk-button govuk-button--start)
+  end
+
+  def icon
+    svg_attributes = {
+      class: "govuk-button__start-icon",
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "17.5",
+      height: "19",
+      viewBox: "0 0 33 40",
+      focusable: "false",
+      aria: { hidden: "true" }
+    }
+
+    tag.svg(**svg_attributes) do
+      tag.path(fill: "currentColor", d: "M0 0h13l20 20-20 20H0l20-20z")
+    end
+  end
+end

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

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

data/app/components/govuk_component/summary_list_component.rb

@@ -0,0 +1,61 @@
+class GovukComponent::SummaryListComponent < GovukComponent::Base
+  attr_reader :borders
+
+  renders_many :rows, "Row"
+
+  def initialize(borders: true, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @borders = borders
+  end
+
+  def any_row_has_actions?
+    rows.any? { |row| row.href.present? }
+  end
+
+  def classes
+    super.append(borders_class).compact
+  end
+
+private
+
+  def borders_class
+    %(govuk-summary-list--no-border) unless borders
+  end
+
+  def default_classes
+    %w(govuk-summary-list)
+  end
+
+  class Row < GovukComponent::Base
+    attr_reader :key, :value, :href, :text, :visually_hidden_text, :action_classes, :action_attributes
+
+    def initialize(key:, value:, action: {}, classes: [], html_attributes: {})
+      super(classes: classes, html_attributes: html_attributes)
+
+      @key                  = key
+      @value                = value
+      @href                 = action[:href]
+      @text                 = action[:text] || "Change"
+      @visually_hidden_text = " #{action[:visually_hidden_text] || key.downcase}"
+      @action_classes       = action[:classes] || []
+      @action_attributes    = action[:html_attributes] || {}
+    end
+
+    def action
+      tag.dd(class: "govuk-summary-list__actions") do
+        if href.present?
+          govuk_link_to(href, class: action_classes, **action_attributes) do
+            safe_join([text, tag.span(visually_hidden_text, class: "govuk-visually-hidden")])
+          end
+        end
+      end
+    end
+
+  private
+
+    def default_classes
+      %w(govuk-summary-list__row)
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<%= tag.div(class: classes, data: { module: 'govuk-tabs' }, **html_attributes) do %>
+  <%= tag.h2(title, class: "govuk-tabs__title") %>
+  <ul class="govuk-tabs__list">
+    <% tabs.each.with_index do |tab, i| %>
+      <%= tag.li(tab.li_link, class: tab.li_classes(i)) %>
+    <% end %>
+  </ul>
+  <% tabs.each.with_index do |tab, i| %>
+    <%= tag.div(tab, class: tab.classes.append(tab.hidden_class(i)), id: tab.id, **tab.html_attributes) %>
+  <% end %>
+<% end %>

data/app/components/govuk_component/{tabs.rb → tab_component.rb}

@@ -1,15 +1,12 @@
-class GovukComponent::Tabs < GovukComponent::Base
-  include ViewComponent::Slotable
+class GovukComponent::TabComponent < GovukComponent::Base
+  renders_many :tabs, "Tab"
 
-  attr_accessor :title
-
-  with_slot :tab, collection: true, class_name: 'Tab'
-  wrap_slot :tab
+  attr_reader :title
 
   def initialize(title:, classes: [], html_attributes: {})
     super(classes: classes, html_attributes: html_attributes)
 
-    self.title = title
+    @title = title
   end
 
 private
@@ -18,25 +15,39 @@ private
     %w(govuk-tabs)
   end
 
-  class Tab < GovukComponent::Slot
-    attr_accessor :title
+  class Tab < GovukComponent::Base
+    attr_reader :title
 
     def initialize(title:, classes: [], html_attributes: {})
       super(classes: classes, html_attributes: html_attributes)
 
-      self.title = title
+      @title = title
     end
 
     def id(prefix: nil)
       [prefix, title.parameterize].join
     end
 
+    def hidden_class(i = nil)
+      %(govuk-tabs__panel--hidden) unless i&.zero?
+    end
+
+    def li_classes(i = nil)
+      %w(govuk-tabs__list-item).tap do |c|
+        c.append("govuk-tabs__list-item--selected") if i&.zero?
+      end
+    end
+
+    def li_link
+      link_to(title, id(prefix: '#'), class: "govuk-tabs__tab")
+    end
+
     def default_classes
       %w(govuk-tabs__panel)
     end
 
-    def hidden_class(i = nil)
-      %(govuk-tabs__panel--hidden) unless i&.zero?
+    def call
+      content
     end
   end
 end

data/app/components/govuk_component/{tag.rb → tag_component.rb}

@@ -1,7 +1,17 @@
-class GovukComponent::Tag < GovukComponent::Base
+class GovukComponent::TagComponent < GovukComponent::Base
   attr_reader :text
 
-  COLOURS = %w(grey green turquoise blue red purple pink orange yellow).freeze
+  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)
@@ -23,8 +33,16 @@ private
   def colour_class
     return nil if @colour.blank?
 
-    fail("invalid tag colour #{@colour}, supported colours are #{COLOURS.to_sentence}") unless @colour.in?(COLOURS)
+    fail(ArgumentError, colour_error_message) unless valid_colour?
 
     %(govuk-tag--#{@colour})
   end
+
+  def valid_colour?
+    @colour.in?(COLOURS)
+  end
+
+  def colour_error_message
+    "invalid tag colour #{@colour}, supported colours are #{COLOURS.to_sentence}"
+  end
 end

data/app/components/govuk_component/warning_text_component.rb

@@ -0,0 +1,38 @@
+class GovukComponent::WarningTextComponent < GovukComponent::Base
+  attr_reader :text, :assistive_text
+
+  ICON = '!'.freeze
+
+  def initialize(text:, assistive_text: 'Warning', classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @text = text
+    @assistive_text = assistive_text
+  end
+
+  def call
+    tag.div(class: classes, **html_attributes) do
+      safe_join([icon, strong])
+    end
+  end
+
+private
+
+  def icon
+    tag.span(ICON, class: 'govuk-warning-text__icon', aria: { hidden: true })
+  end
+
+  def strong
+    tag.strong(class: 'govuk-warning-text__text') do
+      safe_join([assistive, text])
+    end
+  end
+
+  def assistive
+    tag.span(assistive_text, class: 'govuk-warning-text__assistive')
+  end
+
+  def default_classes
+    %w(govuk-warning-text)
+  end
+end

data/app/helpers/govuk_components_helper.rb

@@ -1,21 +1,21 @@
 module GovukComponentsHelper
   {
-    govuk_accordion: 'GovukComponent::Accordion',
-    govuk_back_link: 'GovukComponent::BackLink',
-    govuk_breadcrumbs: 'GovukComponent::Breadcrumbs',
-    govuk_cookie_banner: 'GovukComponent::CookieBanner',
-    govuk_details: 'GovukComponent::Details',
-    govuk_footer: 'GovukComponent::Footer',
-    govuk_header: 'GovukComponent::Header',
-    govuk_inset_text: 'GovukComponent::InsetText',
-    govuk_notification_banner: 'GovukComponent::NotificationBanner',
-    govuk_panel: 'GovukComponent::Panel',
+    govuk_accordion: 'GovukComponent::AccordionComponent',
+    govuk_back_link: 'GovukComponent::BackLinkComponent',
+    govuk_breadcrumbs: 'GovukComponent::BreadcrumbsComponent',
+    govuk_cookie_banner: 'GovukComponent::CookieBannerComponent',
+    govuk_details: 'GovukComponent::DetailsComponent',
+    govuk_footer: 'GovukComponent::FooterComponent',
+    govuk_header: 'GovukComponent::HeaderComponent',
+    govuk_inset_text: 'GovukComponent::InsetTextComponent',
+    govuk_notification_banner: 'GovukComponent::NotificationBannerComponent',
+    govuk_panel: 'GovukComponent::PanelComponent',
     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',
+    govuk_start_now_button: 'GovukComponent::StartButtonComponent',
+    govuk_summary_list: 'GovukComponent::SummaryListComponent',
+    govuk_tabs: 'GovukComponent::TabComponent',
+    govuk_tag: 'GovukComponent::TagComponent',
+    govuk_warning_text: 'GovukComponent::WarningTextComponent',
   }.each do |name, klass|
     define_method(name) do |*args, **kwargs, &block|
       capture do

data/lib/govuk/components.rb

@@ -1,2 +1,3 @@
 require "view_component/engine"
+require "govuk/components/helpers/css_utilities"
 require "govuk/components/engine"

data/lib/govuk/components/helpers/css_utilities.rb

@@ -0,0 +1,22 @@
+module Govuk
+  module Components
+    module Helpers
+      module CssUtilities
+        def combine_classes(default_classes, custom_classes)
+          converted_custom_classes = case custom_classes
+                                     when Array
+                                       custom_classes
+                                     when String
+                                       custom_classes.split
+                                     when NilClass
+                                       []
+                                     else
+                                       fail(ArgumentError, "custom classes must be a String, Array or NilClass")
+                                     end
+
+          default_classes.concat(converted_custom_classes).uniq
+        end
+      end
+    end
+  end
+end

data/lib/govuk/components/version.rb

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

metadata

@@ -1,17 +1,17 @@
 --- !ruby/object:Gem::Specification
 name: govuk-components
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 2.0.0b1
 platform: ruby
 authors:
 - DfE developers
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-05-09 00:00:00.000000000 Z
+date: 2021-06-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: railties
+  name: activemodel
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -25,7 +25,7 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '6.0'
 - !ruby/object:Gem::Dependency
-  name: activemodel
+  name: railties
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
@@ -44,14 +44,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.20'
+        version: 2.31.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.20'
+        version: 2.31.1
 - !ruby/object:Gem::Dependency
   name: capybara
   requirement: !ruby/object:Gem::Requirement
@@ -80,6 +80,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec-html-matchers
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.9'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.9'
 - !ruby/object:Gem::Dependency
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
@@ -98,16 +112,16 @@ dependencies:
   name: rubocop-govuk
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - '='
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 4.0.0.pre.1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - '='
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 4.0.0.pre.1
 - !ruby/object:Gem::Dependency
   name: sassc-rails
   requirement: !ruby/object:Gem::Requirement
@@ -161,40 +175,35 @@ 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/accordion_component.html.erb
+- app/components/govuk_component/accordion_component.rb
+- app/components/govuk_component/back_link_component.rb
 - app/components/govuk_component/base.rb
-- app/components/govuk_component/breadcrumbs.html.erb
-- app/components/govuk_component/breadcrumbs.rb
-- app/components/govuk_component/cookie_banner.html.erb
-- app/components/govuk_component/cookie_banner.rb
-- app/components/govuk_component/details.html.erb
-- app/components/govuk_component/details.rb
-- app/components/govuk_component/footer.html.erb
-- app/components/govuk_component/footer.rb
-- app/components/govuk_component/header.html.erb
-- app/components/govuk_component/header.rb
-- app/components/govuk_component/inset_text.rb
-- app/components/govuk_component/notification_banner.html.erb
-- app/components/govuk_component/notification_banner.rb
-- app/components/govuk_component/panel.html.erb
-- 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/breadcrumbs_component.html.erb
+- app/components/govuk_component/breadcrumbs_component.rb
+- app/components/govuk_component/cookie_banner_component.html.erb
+- app/components/govuk_component/cookie_banner_component.rb
+- app/components/govuk_component/details_component.rb
+- app/components/govuk_component/footer_component.html.erb
+- app/components/govuk_component/footer_component.rb
+- app/components/govuk_component/header_component.html.erb
+- app/components/govuk_component/header_component.rb
+- app/components/govuk_component/inset_text_component.rb
+- app/components/govuk_component/notification_banner_component.html.erb
+- app/components/govuk_component/notification_banner_component.rb
+- app/components/govuk_component/panel_component.rb
+- app/components/govuk_component/phase_banner_component.html.erb
+- app/components/govuk_component/phase_banner_component.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/start_button_component.rb
+- app/components/govuk_component/summary_list_component.html.erb
+- app/components/govuk_component/summary_list_component.rb
+- app/components/govuk_component/tab_component.html.erb
+- app/components/govuk_component/tab_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
-- app/components/govuk_component/warning.html.erb
-- app/components/govuk_component/warning.rb
+- app/components/govuk_component/warning_text_component.rb
 - app/helpers/govuk_back_to_top_link_helper.rb
 - app/helpers/govuk_components_helper.rb
 - app/helpers/govuk_link_helper.rb
@@ -202,6 +211,7 @@ files:
 - config/routes.rb
 - lib/govuk/components.rb
 - lib/govuk/components/engine.rb
+- lib/govuk/components/helpers/css_utilities.rb
 - lib/govuk/components/version.rb
 - lib/tasks/govuk/components_tasks.rake
 homepage: https://github.com/DFE-Digital/govuk-components
@@ -219,9 +229,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.1.4
 signing_key: