Class: Primer::Navigation::TabComponent

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

Overview

This component is part of navigation components such as ‘Primer::TabNavComponent` and `Primer::UnderlineNavComponent` and should not be used by itself.

Constant Summary

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 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, icon_classes: "", wrapper_arguments: {}, **system_arguments) ⇒ TabComponent

Returns a new instance of TabComponent.

Examples:

Default

<%= render(Primer::Navigation::TabComponent.new(selected: true)) do |c| %>
  <% c.text { "Selected" } %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <% c.text { "Not selected" } %>
<% end %>

With icons and counters

<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <% c.icon(:star) %>
  <% c.text { "Tab" } %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <% c.icon(:star) %>
  <% c.text { "Tab" } %>
  <% c.counter(count: 10) %>
<% end %>
<%= render(Primer::Navigation::TabComponent.new) do |c| %>
  <% c.text { "Tab" } %>
  <% c.counter(count: 10) %>
<% end %>

Inside a list

<%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
  <% c.text { "Tab" } %>
<% end %>

With custom HTML

<%= render(Primer::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.

  • 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 %>



86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
# File 'app/components/primer/navigation/tab_component.rb', line 86

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

  @system_arguments = system_arguments

  if with_panel
    @system_arguments[:tag] ||= :button
    @system_arguments[:type] = :button
    @system_arguments[:role] = :tab
  else
    @system_arguments[:tag] ||= :a
  end

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

  return unless @selected

  if @system_arguments[:tag] == :a
    @system_arguments[:"aria-current"] = :page
  else
    @system_arguments[:"aria-selected"] = true
  end
end

Instance Attribute Details

#selected ⇒ Object (readonly)

Returns the value of attribute selected.



43
44
45
 
# File 'app/components/primer/navigation/tab_component.rb', line 43

def selected
  @selected
end

Instance Method Details

#wrapper ⇒ Object 



114
115
116
117
118
119
120
121
122
123
 
# File 'app/components/primer/navigation/tab_component.rb', line 114

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

  render(Primer::BaseComponent.new(**@wrapper_arguments)) do
    yield
  end
end