Class: Yattho::Navigation::TabComponent

Inherits:
Component
  • Object
show all
Defined in:
app/components/yattho/navigation/tab_component.rb

Overview

This component is part of navigation components such as ‘Yattho::Alpha::TabNav` and `Yattho::Alpha::UnderlineNav` and should not be used by itself.

Constant Summary collapse

DEFAULT_ARIA_CURRENT_FOR_ANCHOR = 
:page
ARIA_CURRENT_OPTIONS_FOR_ANCHOR = 
[true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Instance Attribute Summary collapse

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Constructor Details

#initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments) ⇒ TabComponent

Returns a new instance of TabComponent.

Examples:

Default

<%= render(Yattho::Navigation::TabComponent.new(selected: true)) do |component| %>
  <% component.with_text { "Selected" } %>
<% end %>
<%= render(Yattho::Navigation::TabComponent.new) do |component| %>
  <% component.with_text { "Not selected" } %>
<% end %>

With icons and counters

<%= render(Yattho::Navigation::TabComponent.new) do |component| %>
  <% component.with_icon(:star) %>
  <% component.with_text { "Tab" } %>
<% end %>
<%= render(Yattho::Navigation::TabComponent.new) do |component| %>
  <% component.with_icon(:star) %>
  <% component.with_text { "Tab" } %>
  <% component.with_counter(count: 10) %>
<% end %>
<%= render(Yattho::Navigation::TabComponent.new) do |component| %>
  <% component.with_text { "Tab" } %>
  <% component.with_counter(count: 10) %>
<% end %>

Inside a list

<%= render(Yattho::Navigation::TabComponent.new(list: true)) do |component| %>
  <% component.with_text { "Tab" } %>
<% end %>

With custom HTML

<%= render(Yattho::Navigation::TabComponent.new) do %>
  <div>
    This is my <strong>custom HTML</strong>
  </div>
<% end %>

Parameters:

  • list (Boolean) (defaults to: false) —

    Whether the Tab is an item in a ‘<ul>` list.

  • selected (Boolean) (defaults to: false) —

    Whether the Tab is selected or not.

  • with_panel (Boolean) (defaults to: false) —

    Whether the Tab has an associated panel.

  • panel_id (String) (defaults to: "") —

    Only applies if ‘with_panel` is `true`. Unique id of panel.

  • icon_classes (Boolean) (defaults to: "") —

    Classes that must always be applied to icons.

  • wrapper_arguments (Hash) (defaults to: {}) —

    <%= link_to_system_arguments_docs %> to be used in the ‘<li>` wrapper when the tab is an item in a list.

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
 
# File 'app/components/yattho/navigation/tab_component.rb', line 107

def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "",
               wrapper_arguments: {}, **system_arguments)
  @selected = selected
  @icon_classes = icon_classes
  @list = list
  @with_panel = with_panel

  @system_arguments = system_arguments
  @id = @system_arguments[:id]
  @wrapper_arguments = wrapper_arguments

  if with_panel || @system_arguments[:tag] == :button
    @system_arguments[:tag] = :button
    @system_arguments[:type] = :button
    @system_arguments[:role] = :tab
    panel_id(panel_id)
    # https://www.w3.org/TR/wai-aria-practices/#presentation_role
    @wrapper_arguments[:role] = :presentation
  else
    @system_arguments[:tag] = :a
  end

  @wrapper_arguments[:tag] = :li
  @wrapper_arguments[:display] ||= :inline_flex

  return unless @selected

  if @system_arguments[:tag] == :a
    aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
    @system_arguments[:'aria-current'] =
      fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
  else
    @system_arguments[:'aria-selected'] = true
  end
end

Instance Attribute Details

#selected ⇒ Object (readonly)

Returns the value of attribute selected.



63
64
65
 
# File 'app/components/yattho/navigation/tab_component.rb', line 63

def selected
  @selected
end

Instance Method Details

#wrapper ⇒ Object 



143
144
145
146
147
148
149
150
151
152
 
# File 'app/components/yattho/navigation/tab_component.rb', line 143

def wrapper
  unless @list
    yield
    return # returning `yield` caused a double render
  end

  render(Yattho::BaseComponent.new(**@wrapper_arguments)) do
    yield if block_given?
  end
end