Class: CCS::Components::GovUK::Tabs

Inherits:
Base
  • Object
show all
Defined in:
lib/ccs/components/govuk/tabs.rb,
lib/ccs/components/govuk/tabs/tab.rb,
lib/ccs/components/govuk/tabs/panel.rb

Overview

GOV.UK Tabs

This is used to generate the tabs component from the GDS - Components - Tabs

Defined Under Namespace

Classes: Panel, Tab

Constant Summary collapse

DEFAULT_ATTRIBUTES =

The default attributes for the tabs

{ class: 'govuk-tabs', data: { module: 'govuk-tabs' } }.freeze

Instance Method Summary collapse

Constructor Details

#initialize(items:, title: nil, id_prefix: nil, **options) ⇒ Tabs

Returns a new instance of Tabs.

Parameters:

  • items (Array<Hash>) —

    array of the tab items. See Tab#initialize and Panel#initialize for details of the items in the array.

  • title (NilClass, String) (defaults to: nil) —

    title for the tabs table of contents

  • id_prefix (String) (defaults to: nil) —

    prefix id for each tab item if no id is specified on each item

  • options (Hash) —

    options that will be used in customising the HTML

Options Hash (**options):

  • :classes (String) —

    additional CSS classes for the tabs HTML

  • :attributes (Hash) — default: {} —

    any additional attributes that will be added as part of the HTML



37
38
39
40
41
42
43
44
 
# File 'lib/ccs/components/govuk/tabs.rb', line 37

def initialize(items:, title: nil, id_prefix: nil, **options)
  super(**options)

  @title = title || 'Contents'
  id_prefix ||= sanitize_to_id(@title.downcase)
  @tabs = items.map.with_index(1) { |item, index| Tab.new(index: index, id_prefix: id_prefix, context: @context, **item) }
  @panels = items.map.with_index(1) { |item, index| Panel.new(index: index, id_prefix: id_prefix, context: @context, **item[:panel]) }
end

Instance Method Details

#render ⇒ ActiveSupport::SafeBuffer

Generates the HTML for the GOV.UK Tabs component

Returns:

  • (ActiveSupport::SafeBuffer) 


50
51
52
53
54
55
56
57
58
59
60
 
# File 'lib/ccs/components/govuk/tabs.rb', line 50

def render
  tag.div(**options[:attributes]) do
    concat(tag.h2(title, class: 'govuk-tabs__title'))
    if @tabs.present?
      concat(tag.ul(class: 'govuk-tabs__list') do
        @tabs.each { |tab| concat(tab.render) }
      end)
    end
    @panels.each { |panel| concat(panel.render) }
  end
end