From 0649b44462e869e33c13837999f735c227ba0ffb Mon Sep 17 00:00:00 2001
From: Chris Huynh <chris.huynh333@gmail.com>
Date: Tue, 19 Nov 2024 11:44:52 -0600
Subject: [PATCH] further implement tabs, cleanup

---
 .../app/components/pathogen/tab.html.erb      |   5 +-
 .../pathogen/app/components/pathogen/tab.rb   | 124 +++---------------
 .../components/pathogen/tabs_panel.html.erb   |  20 ++-
 .../app/components/pathogen/tabs_panel.rb     |  26 ++--
 .../default.html.erb                          |   9 +-
 5 files changed, 49 insertions(+), 135 deletions(-)

diff --git a/embedded_gems/pathogen/app/components/pathogen/tab.html.erb b/embedded_gems/pathogen/app/components/pathogen/tab.html.erb
index 2c425224f6..23f492f2b2 100644
--- a/embedded_gems/pathogen/app/components/pathogen/tab.html.erb
+++ b/embedded_gems/pathogen/app/components/pathogen/tab.html.erb
@@ -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 %>
\ No newline at end of file
diff --git a/embedded_gems/pathogen/app/components/pathogen/tab.rb b/embedded_gems/pathogen/app/components/pathogen/tab.rb
index 9dab6081a1..b306a21d28 100644
--- a/embedded_gems/pathogen/app/components/pathogen/tab.rb
+++ b/embedded_gems/pathogen/app/components/pathogen/tab.rb
@@ -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
-    # 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: '',
                    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
diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel.html.erb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel.html.erb
index 69439646b1..06be99c151 100644
--- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel.html.erb
+++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel.html.erb
@@ -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 %>
\ No newline at end of file
diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb
index 12dbb60d35..a58414a543 100644
--- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb
+++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb
@@ -2,32 +2,38 @@
 
 module Pathogen
   class TabsPanel < Pathogen::Component
-    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
diff --git a/test/components/previews/pathogen_tabs_panel_preview/default.html.erb b/test/components/previews/pathogen_tabs_panel_preview/default.html.erb
index 7a327f73d6..864ad802e9 100644
--- a/test/components/previews/pathogen_tabs_panel_preview/default.html.erb
+++ b/test/components/previews/pathogen_tabs_panel_preview/default.html.erb
@@ -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 %>
\ No newline at end of file