primer_view_components 0.0.31 → 0.0.36

data/app/components/primer/link_component.rb

@@ -5,9 +5,9 @@ module Primer
   class LinkComponent < Primer::Component
     status :beta
 
-    DEFAULT_VARIANT = :default
-    VARIANT_MAPPINGS = {
-      DEFAULT_VARIANT => "",
+    DEFAULT_SCHEME = :default
+    SCHEME_MAPPINGS = {
+      DEFAULT_SCHEME => "",
       :primary => "Link--primary",
       :secondary => "Link--secondary"
     }.freeze
@@ -21,9 +21,9 @@ module Primer
     # @example Muted
     #   <%= render(Primer::LinkComponent.new(href: "#", muted: true)) { "Link" } %>
     #
-    # @example Variants
-    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :primary)) { "Primary" } %>
-    #   <%= render(Primer::LinkComponent.new(href: "#", variant: :secondary)) { "Secondary" } %>
+    # @example Schemes
+    #   <%= render(Primer::LinkComponent.new(href: "#", scheme: :primary)) { "Primary" } %>
+    #   <%= render(Primer::LinkComponent.new(href: "#", scheme: :secondary)) { "Secondary" } %>
     #
     # @example Without underline
     #   <%= render(Primer::LinkComponent.new(href: "#", underline: false)) { "Link" } %>
@@ -33,17 +33,17 @@ module Primer
     #
     # @param tag [String]  <%= one_of(Primer::LinkComponent::TAG_OPTIONS) %>
     # @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
-    # @param variant [Symbol] <%= one_of(Primer::LinkComponent::VARIANT_MAPPINGS.keys) %>
+    # @param scheme [Symbol] <%= one_of(Primer::LinkComponent::SCHEME_MAPPINGS.keys) %>
     # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
     # @param underline [Boolean] Whether or not to underline the link.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(href: nil, tag: DEFAULT_TAG, variant: DEFAULT_VARIANT, muted: false, underline: true, **system_arguments)
+    def initialize(href: nil, tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:href] = href
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant, DEFAULT_VARIANT)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)],
         "Link" => tag == :span,
         "Link--muted" => muted,
         "no-underline" => !underline

data/app/components/primer/menu_component.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use menus to create vertical lists of navigational links.
   class MenuComponent < Primer::Component
-    include ViewComponent::SlotableV2
-
     # Optional menu heading
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -44,11 +42,11 @@ module Primer
     #       Item 1
     #     <% end %>
     #     <% c.item(href: "#url") do %>
-    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon
     #     <% end %>
     #     <% c.item(href: "#url") do %>
-    #       <%= render(Primer::OcticonComponent.new(icon: "check")) %>
+    #       <%= render(Primer::OcticonComponent.new("check")) %>
     #       With Icon and Counter
     #       <%= render(Primer::CounterComponent.new(count: 25)) %>
     #     <% end %>

data/app/components/primer/navigation/tab_component.html.erb

@@ -0,0 +1,11 @@
+<%= wrapper do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <%= icon %>
+    <% if text.present? %>
+      <%= text %>
+    <% else %>
+      <%= content %>
+    <% end %>
+    <%= counter %>
+  <% end %>
+<% end %>

data/app/components/primer/navigation/tab_component.rb

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+module Primer
+  module Navigation
+    # This component is part of navigation components such as `Primer::TabNavComponent`
+    # and `Primer::UnderlineNavComponent` and should not be used by itself.
+    class TabComponent < Primer::Component
+      # 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 `UnderlineNavComponent` and `TabNavComponent` implementations for examples.
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :panel, lambda { |**system_arguments|
+        system_arguments[:tag] ||= :div
+        system_arguments[:role] ||= :tabpanel
+        system_arguments[:hidden] = true unless @selected
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # Icon to be rendered in the Tab left.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      renders_one :icon, lambda { |icon = nil, **system_arguments|
+        system_arguments[:classes] = class_names(
+          @icon_classes,
+          system_arguments[:classes]
+        )
+        Primer::OcticonComponent.new(icon, **system_arguments)
+      }
+
+      # The Tab's text.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::TextComponent) %>.
+      renders_one :text, Primer::TextComponent
+
+      # Counter to be rendered in the Tab right.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::CounterComponent) %>.
+      renders_one :counter, Primer::CounterComponent
+
+      attr_reader :selected
+
+      # @example 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 %>
+      #
+      # @example 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 %>
+      #
+      # @example Inside a list
+      #   <%= render(Primer::Navigation::TabComponent.new(list: true)) do |c| %>
+      #     <% c.text { "Tab" } %>
+      #   <% end %>
+      #
+      # @example With custom HTML
+      #   <%= render(Primer::Navigation::TabComponent.new) do %>
+      #     <div>
+      #       This is my <strong>custom HTML</strong>
+      #     </div>
+      #   <% end %>
+      #
+      # @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 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, 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
+
+      def wrapper
+        unless @list
+          yield
+          return # returning `yield` caused a double render
+        end
+
+        render(Primer::BaseComponent.new(**@wrapper_arguments)) do
+          yield
+        end
+      end
+    end
+  end
+end

data/app/components/primer/octicon_component.rb

@@ -5,10 +5,6 @@ module Primer
   class OcticonComponent < Primer::Component
     status :beta
 
-    include ClassNameHelper
-    include TestSelectorHelper
-    include OcticonsHelper
-
     SIZE_DEFAULT = :small
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => 16,
@@ -18,19 +14,20 @@ module Primer
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     # @example Default
+    #   <%= render(Primer::OcticonComponent.new("check")) %>
     #   <%= render(Primer::OcticonComponent.new(icon: "check")) %>
     #
     # @example Medium
-    #   <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
+    #   <%= render(Primer::OcticonComponent.new("people", size: :medium)) %>
     #
     # @example Large
-    #   <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
+    #   <%= render(Primer::OcticonComponent.new("x", size: :large)) %>
     #
     # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
     # @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(icon:, size: SIZE_DEFAULT, **system_arguments)
-      @icon = icon
+    def initialize(icon_name = nil, icon: nil, size: SIZE_DEFAULT, **system_arguments)
+      @icon = icon_name || icon
       @system_arguments = system_arguments
 
       @system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]

data/app/components/primer/popover_component.rb

@@ -5,7 +5,6 @@ module Primer
   #
   # By default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.
   class PopoverComponent < Primer::Component
-    include ViewComponent::SlotableV2
     status :beta
 
     CARET_DEFAULT = :top

data/app/components/primer/primer.d.ts

@@ -1,3 +1,3 @@
-import './auto_complete_component';
+import './auto_complete/auto_complete';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.js

@@ -1,3 +1,3 @@
-import './auto_complete_component';
+import './auto_complete/auto_complete';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.ts

@@ -1,3 +1,3 @@
-import './auto_complete_component'
+import './auto_complete/auto_complete'
 import './tab_container_component'
 import './time_ago_component'

data/app/components/primer/progress_bar_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Use ProgressBar to visualize task completion.
   class ProgressBarComponent < Primer::Component
-    include ViewComponent::SlotableV2
     status :beta
 
     # Use the Item slot to add an item to the progress bas

data/app/components/primer/spinner_component.html.erb

@@ -1,6 +1,4 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" />
-  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke">
-    <animateTransform attributeName="transform" type="rotate" from="0 8 8" to="360 8 8" dur="1s" repeatCount="indefinite" />
-  </path>
+  <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />
 <% end %>

data/app/components/primer/spinner_component.rb

@@ -31,6 +31,7 @@ module Primer
       @system_arguments = system_arguments
       @system_arguments[:tag] = :svg
       @system_arguments[:style] ||= DEFAULT_STYLE
+      @system_arguments[:animation] = :rotate
       @system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
       @system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
       @system_arguments[:viewBox] = "0 0 16 16"

data/app/components/primer/state_component.rb

@@ -5,21 +5,21 @@ module Primer
   class StateComponent < Primer::Component
     status :beta
 
-    COLOR_DEFAULT = :default
-    NEW_COLOR_MAPPINGS = {
+    SCHEME_DEFAULT = :default
+    NEW_SCHEME_MAPPINGS = {
       open: "State--open",
       closed: "State--closed",
       merged: "State--merged"
     }.freeze
 
-    DEPRECATED_COLOR_MAPPINGS = {
-      COLOR_DEFAULT => "",
+    DEPRECATED_SCHEME_MAPPINGS = {
+      SCHEME_DEFAULT => "",
       :green => "State--open",
       :red => "State--closed",
       :purple => "State--merged"
     }.freeze
-    COLOR_MAPPINGS = NEW_COLOR_MAPPINGS.merge(DEPRECATED_COLOR_MAPPINGS)
-    COLOR_OPTIONS = COLOR_MAPPINGS.keys
+    SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
+    SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
 
     SIZE_DEFAULT = :default
     SIZE_MAPPINGS = {
@@ -34,24 +34,24 @@ module Primer
     # @example Default
     #   <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
     #
-    # @example Colors
+    # @example Schemes
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :open)) { "Open" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :closed)) { "Closed" } %>
-    #   <%= render(Primer::StateComponent.new(title: "title", color: :merged)) { "Merged" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :open)) { "Open" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :closed)) { "Closed" } %>
+    #   <%= render(Primer::StateComponent.new(title: "title", scheme: :merged)) { "Merged" } %>
     #
     # @example Sizes
     #   <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
     #   <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
     #
     # @param title [String] `title` HTML attribute.
-    # @param color [Symbol] Background color. <%= one_of(Primer::StateComponent::COLOR_OPTIONS) %>
+    # @param scheme [Symbol] Background color. <%= one_of(Primer::StateComponent::SCHEME_OPTIONS) %>
     # @param tag [Symbol] HTML tag for element. <%= one_of(Primer::StateComponent::TAG_OPTIONS) %>
     # @param size [Symbol] <%= one_of(Primer::StateComponent::SIZE_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       title:,
-      color: COLOR_DEFAULT,
+      scheme: SCHEME_DEFAULT,
       tag: TAG_DEFAULT,
       size: SIZE_DEFAULT,
       **system_arguments
@@ -62,7 +62,7 @@ module Primer
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "State",
-        COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
+        SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, SCHEME_DEFAULT)],
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
     end

data/app/components/primer/subhead_component.rb

@@ -5,8 +5,6 @@ module Primer
   class SubheadComponent < Primer::Component
     status :beta
 
-    include ViewComponent::SlotableV2
-
     # The heading
     #
     # @param danger [Boolean] Whether to style the heading as dangerous.
@@ -73,7 +71,7 @@ module Primer
     #     <% component.actions do %>
     #       <%= render(
     #         Primer::ButtonComponent.new(
-    #           tag: :a, href: "http://www.google.com", button_type: :danger
+    #           tag: :a, href: "http://www.google.com", scheme: :danger
     #         )
     #       ) { "Action" } %>
     #     <% end %>

data/app/components/primer/tab_nav_component.html.erb

@@ -1,17 +1,15 @@
-<%= render wrapper.new(**@system_arguments) do %>
-  <nav role="tablist" aria-label="<%= @aria_label %>" class="tabnav-tabs">
-    <% tabs.each do |tab| %>
-      <%= tab %>
+<%= wrapper do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <%= render Primer::BaseComponent.new(**@body_arguments) do %>
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
     <% end %>
-  </nav >
+  <% end %>
 
   <% if @with_panel %>
     <% tabs.each do |tab| %>
-      <% if tab.panel.present? %>
-        <div role="tabpanel" <%= "hidden" if tab.hidden? %>>
-          <%= tab.panel %>
-        </div>
-      <% end %>
+      <%= tab.panel %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/primer/tab_nav_component.rb

@@ -3,106 +3,93 @@
 module Primer
   # Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
   class TabNavComponent < Primer::Component
-    include ViewComponent::SlotableV2
+    include Primer::TabbedComponentHelper
 
-    class MultipleSelectedTabsError < StandardError; end
-    class NoSelectedTabsError < StandardError; end
-
-    # Tabs to be rendered.
+    # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
     #
-    # @param title [String] Text to be rendered by the tab.
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :tabs, lambda { |**system_arguments|
-      return TabComponent.new(**system_arguments) unless @with_panel
+    renders_many :tabs, lambda { |selected: false, **system_arguments|
+      system_arguments[:classes] = class_names(
+        "tabnav-tab",
+        system_arguments[:classes]
+      )
 
-      TabComponent.new(tag: :button, type: :button, **system_arguments)
+      Primer::Navigation::TabComponent.new(
+        selected: selected,
+        with_panel: @with_panel,
+        **system_arguments
+      )
     }
 
     # @example Default
-    #   <%= render(Primer::TabNavComponent.new) do |c| %>
-    #     <% c.tab(selected: true, title: "Tab 1", href: "#") %>
-    #     <% c.tab(title: "Tab 2", href: "#") %>
-    #     <% c.tab(title: "Tab 3", href: "#") %>
+    #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(href: "#") { "Tab 2" } %>
+    #     <% c.tab(href: "#") { "Tab 3" } %>
+    #   <% end %>
+    #
+    # @example With icons and counters
+    #   <%= render(Primer::TabNavComponent.new(label: "With icons and counters")) do |component| %>
+    #     <% component.tab(href: "#", selected: true) do |t| %>
+    #       <% t.icon(icon: :star) %>
+    #       <% t.text { "Item 1" } %>
+    #     <% end %>
+    #     <% component.tab(href: "#") do |t| %>
+    #       <% t.icon(icon: :star) %>
+    #       <% t.text { "Item 2" } %>
+    #       <% t.counter(count: 10) %>
+    #     <% end %>
+    #     <% component.tab(href: "#") do |t| %>
+    #       <% t.text { "Item 3" } %>
+    #       <% t.counter(count: 10) %>
+    #     <% end %>
     #   <% end %>
     #
     # @example With panels
-    #   <%= render(Primer::TabNavComponent.new(with_panel: true)) do |c| %>
-    #     <% c.tab(selected: true, title: "Tab 1") { "Panel 1" } %>
-    #     <% c.tab(title: "Tab 2") { "Panel 1" } %>
-    #     <% c.tab(title: "Tab 3") { "Panel 1" } %>
+    #   <%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
+    #     <% c.tab(selected: true) do |t| %>
+    #       <% t.text { "Tab 1" } %>
+    #       <% t.panel do %>
+    #         Panel 1
+    #       <% end %>
+    #     <% end %>
+    #     <% c.tab do |t| %>
+    #       <% t.text { "Tab 2" } %>
+    #       <% t.panel do %>
+    #         Panel 2
+    #       <% end %>
+    #     <% end %>
+    #     <% c.tab do |t| %>
+    #       <% t.text { "Tab 3" } %>
+    #       <% t.panel do %>
+    #         Panel 3
+    #       <% end %>
+    #     <% end %>
     #   <% end %>
     #
-    # @param aria_label [String] Used to set the `aria-label` on the top level `<nav>` element.
+    # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
     # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(aria_label: nil, with_panel: false, **system_arguments)
-      @aria_label = aria_label
+    def initialize(label:, with_panel: false, **system_arguments)
       @with_panel = with_panel
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
 
+      @system_arguments[:tag] ||= :div
       @system_arguments[:classes] = class_names(
         "tabnav",
         system_arguments[:classes]
       )
-    end
-
-    def before_render
-      validate_single_selected_tab
-    end
-
-    private
-
-    def wrapper
-      @with_panel ? Primer::TabContainerComponent : Primer::BaseComponent
-    end
-
-    def validate_single_selected_tab
-      raise MultipleSelectedTabsError, "only one tab can be selected" if selected_tabs_count > 1
-      raise NoSelectedTabsError, "a tab must be selected" if selected_tabs_count != 1
-    end
-
-    def selected_tabs_count
-      @selected_tabs_count ||= tabs.count(&:selected)
-    end
-
-    # Tabs to be rendered.
-    class TabComponent < Primer::Component
-      attr_reader :selected
-
-      def initialize(title:, selected: false, **system_arguments)
-        @title = title
-        @selected = selected
-        @system_arguments = system_arguments
-        @system_arguments[:tag] ||= :a
-        @system_arguments[:role] = :tab
-
-        if selected
-          if @system_arguments[:tag] == :a
-            @system_arguments[:"aria-current"] = :page
-          else
-            @system_arguments[:"aria-selected"] = true
-          end
-        end
-
-        @system_arguments[:classes] = class_names(
-          "tabnav-tab",
-          system_arguments[:classes]
-        )
-      end
-
-      def call
-        render(Primer::BaseComponent.new(**@system_arguments)) { @title }
-      end
 
-      def panel
-        content
-      end
+      @body_arguments = {
+        tag: navigation_tag(with_panel),
+        classes: "tabnav-tabs",
+        aria: {
+          label: label
+        }
+      }
 
-      def hidden?
-        !@selected
-      end
+      @body_arguments[:role] = :tablist if @with_panel
     end
   end
 end