govuk-components 1.1.7 → 2.0.0b2

data/app/components/govuk_component/{notification_banner.rb → notification_banner_component.rb}

@@ -1,9 +1,7 @@
-class GovukComponent::NotificationBanner < GovukComponent::Base
+class GovukComponent::NotificationBannerComponent < GovukComponent::Base
   attr_reader :title, :title_id, :success, :title_heading_level, :disable_auto_focus
 
-  include ViewComponent::Slotable
-  with_slot :heading, collection: true, class_name: 'Heading'
-  wrap_slot(:heading)
+  renders_many :headings, "Heading"
 
   def initialize(title:, success: false, title_heading_level: 2, title_id: "govuk-notification-banner-title", disable_auto_focus: nil, classes: [], html_attributes: {})
     super(classes: classes, html_attributes: html_attributes)
@@ -15,16 +13,16 @@ class GovukComponent::NotificationBanner < GovukComponent::Base
     @disable_auto_focus  = disable_auto_focus
   end
 
-  def success_class
-    %(govuk-notification-banner--success) if success?
+  def render?
+    headings.any? || content.present?
   end
 
-  def success?
-    @success
+  def classes
+    super.append(success_class).compact
   end
 
-  def render?
-    headings.any? || content.present?
+  def success_class
+    %(govuk-notification-banner--success) if success
   end
 
   def title_tag
@@ -33,13 +31,29 @@ class GovukComponent::NotificationBanner < GovukComponent::Base
     "h#{title_heading_level}"
   end
 
-  class Heading < ViewComponent::Slot
-    attr_accessor :text, :link_target, :link_text
+  class Heading < GovukComponent::Base
+    attr_accessor :text, :link_href, :link_text
+
+    def initialize(text: nil, link_text: nil, link_href: nil, classes: [], html_attributes: {})
+      super(classes: classes, html_attributes: html_attributes)
 
-    def initialize(text: nil, link_text: nil, link_target: nil)
       @text        = text
       @link_text   = link_text
-      @link_target = link_target
+      @link_href   = link_href
+    end
+
+    def call
+      tag.div(class: classes, **html_attributes) do
+        if text.present?
+          safe_join([text, link].compact)
+        else
+          content
+        end
+      end
+    end
+
+    def link
+      link_to(link_text, link_href, class: 'govuk-notification-banner__link') if link_text.present? && link_href.present?
     end
 
     def default_classes

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_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_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::PhaseBannerComponent',
+    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