Skip to content

Commit

Permalink
further implement tabs, cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@ChrisHuynh333
ChrisHuynh333 committed Nov 19, 2024
1 parent 22200c1 commit 0649b44
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 135 deletions.
5 changes: 4 additions & 1 deletion embedded_gems/pathogen/app/components/pathogen/tab.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
<%= link_to "#", class: 'inline-block p-4 border-b-2 rounded-t-lg', role: "tab", aria: { controls: @controls, selected: @selected } do %>hi <%= @text %>
<%= render Pathogen::BaseComponent.new(**@wrapper_arguments) do %>
<%= render Pathogen::BaseComponent.new(**@system_arguments) do %>
<%= @text %>
<% end %>
<% end %>
124 changes: 16 additions & 108 deletions embedded_gems/pathogen/app/components/pathogen/tab.rb
View file
Original file line number Diff line number Diff line change
@@ -1,133 +1,41 @@
# frozen_string_literal: true

module Pathogen
# This component is part of navigation components such as `Primer::Alpha::TabNav`
# and `Primer::Alpha::UnderlineNav` and should not be used by itself.
#
# @accessibility
# `Tab` renders the selected anchor tab with `aria-current="page"` by default.
# When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
class Tab < Pathogen::Component

Check warning on line 4 in embedded_gems/pathogen/app/components/pathogen/tab.rb

View workflow job for this annotation

GitHub Actions / runner / rubocop 

[rubocop] reported by reviewdog 🐶
Missing top-level documentation comment for `class Pathogen::Tab`.

Raw Output:
embedded_gems/pathogen/app/components/pathogen/tab.rb:4:3: C: Style/Documentation: Missing top-level documentation comment for `class Pathogen::Tab`.
# status :alpha
TAG_DEFAULT = :a

DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
# Panel controlled by the Tab. This will not render anything in the tab itself.
# It will provide a accessor for the Tab's parent to call and render the panel
# content in the appropriate place.
# Refer to `UnderlineNav` and `TabNav` implementations for examples.
#
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
# renders_one :panel, lambda { |**system_arguments|
# return unless @with_panel

# deny_tag_argument(**system_arguments)
# system_arguments[:id] = @panel_id
# system_arguments[:tag] = :div
# system_arguments[:role] ||= :tabpanel
# system_arguments[:tabindex] = 0
# system_arguments[:hidden] = true unless @selected

# label_present = aria('label', system_arguments) || aria('labelledby', system_arguments)
# unless label_present
# if @id.present?
# system_arguments[:'aria-labelledby'] = @id
# elsif !Rails.env.production?
# raise ArgumentError, 'Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel'
# end
# end

# Primer::BaseComponent.new(**system_arguments)
# }

# Icon to be rendered in the Tab left.
#
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
# renders_one :icon, lambda { |icon = nil, **system_arguments|
# system_arguments[:classes] = class_names(
# @icon_classes,
# system_arguments[:classes]
# )
# Primer::Beta::Octicon.new(icon, **system_arguments)
# }

# The Tab's text.
#
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Text) %>.
# renders_one :text, Primer::Beta::Text

# Counter to be rendered in the Tab right.
#
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
# renders_one :counter, Primer::Beta::Counter
WRAPPER_CLASSES = 'inline-flex items-center justify-center mr-2'

attr_reader :selected

# @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
# @param selected [Boolean] Whether the Tab is selected or not.
# @param with_panel [Boolean] Whether the Tab has an associated panel.
# @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
# @param icon_classes [Boolean] Classes that must always be applied to icons.
# @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
def initialize(list: false, selected: false, with_panel: false, panel_id: '', icon_classes: '', text: '',
def initialize(controls:, selected: false, icon_classes: '', text: '',

Check warning on line 11 in embedded_gems/pathogen/app/components/pathogen/tab.rb

View workflow job for this annotation

GitHub Actions / runner / rubocop 

[rubocop] reported by reviewdog 🐶
Avoid parameter lists longer than 5 parameters. [6/5]

Raw Output:
embedded_gems/pathogen/app/components/pathogen/tab.rb:11:19: C: Metrics/ParameterLists: Avoid parameter lists longer than 5 parameters. [6/5]
wrapper_arguments: {}, **system_arguments)
@controls = controls
@selected = selected
@icon_classes = icon_classes
@list = list
@text = text
@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
@system_arguments[:tag] = TAG_DEFAULT

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

return unless @selected
@wrapper_arguments[:classes] = WRAPPER_CLASSES

if @system_arguments[:tag] == :a
# aria_current = aria('current', system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
aria_current = 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
@system_arguments[:'aria-current'] = @selected ? 'page' : 'false'
@system_arguments[:classes] = generate_link_classes
@system_arguments[:'aria-controls'] = @controls
end

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

render(Pathogen::BaseComponent.new(**@wrapper_arguments)) do
yield if block_given?
def generate_link_classes
if @selected
'inline-block p-4 border-b-2 rounded-t-lg text-primary-700
border-primary-700 active dark:text-primary-500 dark:border-primary-500'
else
'inline-block p-4 border-b-2 rounded-t-lg border-transparent
hover:text-slate-600 hover:border-slate-300 dark:hover:text-slate-300'
end
end

private

def panel_id(panel_id)
# if panel_id.blank?
# raise ArgumentError, '`panel_id` is required' unless Rails.env.production?
# else
@panel_id = panel_id
@system_arguments[:'aria-controls'] = @panel_id
# end
end
end
end
20 changes: 8 additions & 12 deletions embedded_gems/pathogen/app/components/pathogen/tabs_panel.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
<div id="hi" class="
flex text-sm font-medium text-center border-b text-slate-500 border-slate-200
dark:text-slate-400 dark:border-slate-700
">
<ul class="flex flex-wrap -mb-px" role="tablist" aria-orientation="horizontal" aria-label="label">
<% tabs.each do |tab| %>
<li class="mr-2" role="presentation">
<%= tab %>
</li>
<% end %>
</ul>
</div>
<%= render Pathogen::BaseComponent.new(**@system_arguments) do %>
<%= render Pathogen::BaseComponent.new(**@body_arguments) do %>
<% tabs.each do |tab| %>
<%= tab %>
<% end %>
<% end %>
<% end %>
26 changes: 16 additions & 10 deletions embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,38 @@

module Pathogen
class TabsPanel < Pathogen::Component

Check warning on line 4 in embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb

View workflow job for this annotation

GitHub Actions / runner / rubocop 

[rubocop] reported by reviewdog 🐶
Missing top-level documentation comment for `class Pathogen::TabsPanel`.

Raw Output:
embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb:4:3: C: Style/Documentation: Missing top-level documentation comment for `class Pathogen::TabsPanel`.
BODY_TAG_DEFAULT = :ul

TAG_DEFAULT = :nav
TAG_OPTIONS = [TAG_DEFAULT, :div].freeze

WRAPPER_DEFAULT_CLASSES = '
flex text-sm font-medium text-center border-b text-slate-500 border-slate-200
dark:text-slate-400 dark:border-slate-700
'

BODY_TAG_DEFAULT = :ul
BODY_DEFAULT_CLASSES = 'flex flex-wrap -mb-px'

renders_many :tabs, lambda { |selected: false, **system_arguments|
# system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
Pathogen::Tab.new(
list: true,
selected: selected,
controls: @id,
**system_arguments
)
}

def initialize(label:, tag: TAG_DEFAULT, body_arguments: {}, **system_arguments)
# @align = EXTRA_ALIGN_DEFAULT
def initialize(id:, label: '', tag: TAG_DEFAULT, body_arguments: {}, **system_arguments)
@id = id
@system_arguments = system_arguments
@body_arguments = body_arguments

@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
# @system_arguments[:classes] = tab_nav_classes(system_arguments[:classes])

@system_arguments[:classes] = class_names(WRAPPER_DEFAULT_CLASSES)
@system_arguments[:id] = @id
@body_arguments[:tag] = BODY_TAG_DEFAULT
# @body_arguments[:classes] = tab_nav_body_classes(body_arguments[:classes])

# aria_label_for_page_nav(label)
@body_arguments[:classes] = class_names(BODY_DEFAULT_CLASSES)
@body_arguments[:role] = 'tablist'
@body_arguments[:'aria-label'] = label
end

# def before_render
Expand Down
9 changes: 5 additions & 4 deletions test/components/previews/pathogen_tabs_panel_preview/default.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<%= render Pathogen::TabsPanel.new(label: "label") do |tabs| %>
<%= tabs.with_tab(selected: true, href: "#", text: "test") %>
<%= tabs.with_tab(selected: true, href: "#", text: "test2") %>
<% end %>
<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", label: "default tabs panel") do |tabs| %>
<%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") %>
<%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") %>
<%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") %>
<% end %>

0 comments on commit 0649b44

Please sign in to comment.