ariadne_view_components 0.0.12-x86_64-linux → 0.0.14-x86_64-linux

data/app/components/ariadne/heroicon_component.rb

@@ -11,13 +11,15 @@ module Ariadne
     include IconHelper
     include HeroiconsHelper
 
-    SIZE_DEFAULT = :sm
-    SIZE_MEDIUM = :md
+    SIZE_MICRO = :mu
+    SIZE_SMALL = :sm
+    SIZE_DEFAULT = :md
     SIZE_LARGE = :lg
 
     SIZE_MAPPINGS = {
-      SIZE_DEFAULT => 16,
-      SIZE_MEDIUM => 24,
+      SIZE_MICRO => 16,
+      SIZE_SMALL => 20,
+      SIZE_DEFAULT => 24,
       SIZE_LARGE => 128,
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
@@ -107,10 +109,9 @@ module Ariadne
       }
 
       @icon = heroicon(icon, variant: variant, **attributes)
-
       @classes = class_names(
         @icon.attributes[:class],
-        classes
+        classes,
       )
       @attributes.merge!(@icon.attributes.except(:class, :"aria-hidden"))
 

data/app/components/ariadne/inline_flex_component.html.erb

@@ -2,4 +2,5 @@
   <%= icon %>
   <%= item %>
   <%= text %>
+  <%= dropdown %>
 <% end %>

data/app/components/ariadne/inline_flex_component.rb

@@ -19,7 +19,7 @@ module Ariadne
       </svg>
     MSG
     STATE_CLOSED_SVG = <<~MSG
-      <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg viewBox="0 0 24 24" width="12" height="12" class="ariadne-stroke-state-closed ariadne-fill-state-closed " stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="12" cy="12" r="10"></circle>
       </svg>
     MSG
@@ -42,12 +42,19 @@ module Ariadne
       Ariadne::BaseComponent.new(tag: :span, classes: actual_classes, attributes: attributes) { content }
     }
 
+    renders_one :dropdown, "Ariadne::DropdownComponent"
+
     # @example Default
     #
     #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
     #      <% c.item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
     #   <% end %>
     #
+    #   # TODO: STATE_CLOSED_SVG colors didn't show until it was listed in an example
+    #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
+    #      <% c.item { Ariadne::InlineFlexComponent::STATE_CLOSED_SVG.html_safe } %>
+    #   <% end %>
+    #
     #   <%= render(Ariadne::InlineFlexComponent.new) do |c| %>
     #      <% c.icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
     #      <% c.text { "Closed" } %>

data/app/components/ariadne/link_component.rb

@@ -6,8 +6,8 @@ module Ariadne
     DEFAULT_TAG = :a
     TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
 
-    DEFAULT_CLASSES = "ariadne-cursor-pointer"
-    DEFAULT_ACTIONABLE_CLASSES = " ariadne-cursor-pointer ariadne-underline ariadne-decoration-double ariadne-font-semibold hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
+    DEFAULT_CLASSES = "ariadne-cursor-pointer ariadne-font-semibold hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500"
+    DEFAULT_ACTIONABLE_CLASSES = "ariadne-underline ariadne-decoration-double"
 
     # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
     # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.

data/app/components/ariadne/list_component.html.erb

@@ -1,15 +1,6 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |list| %>
+  <%= content %>
   <% items.each do |item| %>
-    <% if item.linked? %>
-      <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
-        <%= render Ariadne::LinkComponent.new(href: item.link[:href], classes: item.link[:classes], attributes: item.link[:attributes]) do %>
-          <%= item.entry %>
-        <% end %>
-      <% end %>
-    <% else %>
-      <%= render Ariadne::BaseComponent.new(tag: :li, classes: item.classes, attributes: item.attributes) do %>
-        <%= item.entry %>
-      <% end %>
-    <% end %>
+    <%= item %>
   <% end %>
 <% end %>

data/app/components/ariadne/list_component.rb

@@ -13,7 +13,7 @@ module Ariadne
     #   <%= render(Ariadne::ListComponent.new) do |list| %>
     #     <% numbers.each do |number| %>
     #       <%= list.item do |item|  %>
-    #         <%= item.entry { number } %>
+    #         <%= number %>
     #       <% end %>
     #     <% end %>
     #   <% end %>
@@ -27,23 +27,11 @@ module Ariadne
       @attributes = attributes
     end
 
-    def render?
-      items.any?
-    end
-
     # This component is part of `ListComponent` and should not be
     # used as a standalone component.
     class ListItem < Ariadne::Component
       DEFAULT_ITEM_CLASSES = "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
 
-      renders_one :entry, lambda { |static_content = nil, &block|
-        next static_content if static_content.present?
-
-        render(Ariadne::BaseComponent.new(tag: :div)) do
-          view_context.capture { block&.call }
-        end
-      }
-
       attr_reader :link, :classes, :attributes
 
       def initialize(link: {}, classes: "", attributes: {})
@@ -56,12 +44,20 @@ module Ariadne
         @selected
       end
 
-      def linked?
+      private def linked?
         @link.present?
       end
 
       def call
-        Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes)
+        render(Ariadne::BaseComponent.new(tag: :li, classes: @classes, attributes: @attributes)) do
+          if linked?
+            render(Ariadne::LinkComponent.new(href: @link[:href], classes: @link[:classes], attributes: @link[:attributes])) do
+              content
+            end
+          else
+            content
+          end
+        end
       end
     end
   end

data/app/components/ariadne/main_component.rb

@@ -5,7 +5,7 @@ module Ariadne
   # Add additional usage considerations or best practices that may aid the user to use the component correctly.
   # @accessibility Add any accessibility considerations
   class MainComponent < Ariadne::Component
-    DEFAULT_CLASSES = "flex-auto"
+    DEFAULT_CLASSES = "ariadne-flex-auto"
 
     # @example Default
     #
@@ -17,7 +17,7 @@ module Ariadne
       @tag = :main
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/narrow_container_component.rb

@@ -21,7 +21,7 @@ module Ariadne
       @tag = :div
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes

data/app/components/ariadne/panel_bar_component.rb

@@ -23,7 +23,7 @@ module Ariadne
       @tag = DEFAULT_TAG
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes
@@ -72,7 +72,7 @@ module Ariadne
       end
 
       def call
-        Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes)
+        render(Ariadne::BaseComponent.new(tag: :div, classes: @classes, attributes: @attributes))
       end
     end
   end

data/app/components/ariadne/pill_component.rb

@@ -6,25 +6,39 @@ module Ariadne
     DEFAULT_TAG = :span
     TAG_OPTIONS = [DEFAULT_TAG].freeze
 
-    DEFAULT_CLASSES = "ariadne-flex-shrink-0 ariadne-inline-block ariadne-px-2 ariadne-py-0.5 ariadne-text-xs ariadne-font-medium ariadne-rounded-full"
+    DEFAULT_CLASSES = "ariadne-flex-shrink-0 ariadne-inline-block ariadne-px-2 ariadne-py-0.5 ariadne-text-xs ariadne-font-medium ariadne-rounded-full ariadne-whitespace-nowrap"
 
     # @example Default
     #
-    #   <%= render(Ariadne::PillComponent.new(color: "FF0000")) { "Admin" } %>
+    #   <%= render(Ariadne::PillComponent.new(color: [49, 186, 115, 1.0])) { "Admin" } %>
     #
     # @param tag [Symbol, String] The rendered tag name.
-    # @param color [String] The hex color of the pill.
+    # @param color [String] The rgba color of the pill.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
     def initialize(tag: DEFAULT_TAG, color:, classes: "", attributes: {})
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
+
+      @red = color[0]
+      @green = color[1]
+      @blue = color[2]
+      @alpha = color[3]
+
+      @attributes = attributes
+      @attributes["style"] = "background-color: rgba(#{@red}, #{@green}, #{@blue}, #{@alpha});"
+      @text_color = contrast_of(@red, @green, @blue)
+
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
+        @text_color,
       )
+    end
 
-      @attributes = attributes
-      @attributes["style"] = "background-color: ##{color};"
+    private def contrast_of(red, green, blue)
+      luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255
+
+      luminance > 0.5 ? "ariadne-text-black" : "ariadne-text-white"
     end
   end
 end

data/app/components/ariadne/rich-text-area-component.ts

@@ -5,16 +5,16 @@ import {StarterKit} from '@tiptap/starter-kit'
 
 export default class RichTextArea extends Controller {
   connect() {
-    const editorElement = document.querySelector('.tiptap-editor')
-    if (editorElement) {
+    const editorElements = document.getElementsByClassName('tiptap-editor')
+    for (const editorElement of editorElements) {
       new Editor({
         element: editorElement,
         extensions: [StarterKit],
-        content: 'Hello World!',
+        content: '',
         editorProps: {
           attributes: {
             class:
-              'ariadne-prose ariadne-prose-sm sm:ariadne-prose lg:ariadne-prose-lg xl:ariadne-prose-2xl ariadne-m-5 focus:ariadne-outline-none'
+              'ariadne-m-5 focus:ariadne-outline-none ariadne-block ariadne-w-full ariadne-resize-none ariadne-p-0 ariadne-pb-2 ariadne-border-none focus:ariadne-ring-0 sm:ariadne-text-sm'
           }
         }
       })

data/app/components/ariadne/rich_text_area_component.html.erb

@@ -1,6 +1,6 @@
 <%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
   <% if @has_form %>
-    <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>" />
+    <input type="hidden" data-tiptap-value-container=true name="<%= @name %>" id="<%= @name %>">
   <% end %>
-  <textarea class="tiptap-editor"></textarea>
+  <div class="tiptap-editor"></div>
 <% end %>

data/app/components/ariadne/rich_text_area_component.rb

@@ -6,7 +6,7 @@ module Ariadne
   # @accessibility Add any accessibility considerations
   class RichTextAreaComponent < Ariadne::Component
     DEFAULT_TAG = :div
-    DEFAULT_CLASSES = "ariadne-block ariadne-w-full ariadne-border-0 ariadne-py-3 focus:ariadne-ring-0 sm:ariadne-text-sm"
+    DEFAULT_CLASSES = "ariadne-block"
 
     # @example Default
     #
@@ -25,7 +25,7 @@ module Ariadne
 
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
       @attributes = attributes
       @attributes[:"data-controller"] = "rich-text-area-component"

data/app/components/ariadne/slideover_component.html.erb

@@ -1,6 +1,6 @@
 <%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |slideover| %>
   <div data-slideover-component-target="expandWrapper" class="ariadne-flex ariadne-flex-col ariadne-z-10">
-    <div data-slideover-component-target="expandable" class="ariadne-hidden bg-filter-panel ariadne-px-3 ariadne-pb-4">
+    <div data-slideover-component-target="expandable" class="ariadne-hidden ariadne-px-3 ariadne-pb-4">
       <%= content %>
     </div>
     <div data-slideover-component-target="buttonWrapper" data-slideover-component-form-id="<%= @form_id %>" class="ariadne-relative ariadne-flex ariadne-justify-center">

data/app/components/ariadne/slideover_component.rb

@@ -57,7 +57,7 @@ module Ariadne
     #
     # @param tag [Symbol, String] The rendered tag name.
     # @param direction [Symbol] <%= one_of(Ariadne::SlideoverComponent::VALID_DIRECTIONS) %>
-    # @param form_id [String] The ID of any <form> tag to submit when the button is clicked.
+    # @param form_id [String] The ID of any `form` tag to submit when the button is clicked.
     # @param open_text [String] The text to use to open the slideover.
     # @param close_text [String] The text to use to close the slideover.
     # @param classes [String] <%= link_to_classes_docs %>
@@ -66,7 +66,7 @@ module Ariadne
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @direction = fetch_or_raise(VALID_DIRECTIONS, direction)

data/app/components/ariadne/tab-container-component.ts

@@ -0,0 +1,24 @@
+import '@github/tab-container-element'
+
+// keep in sync with tab_container_component.rb
+const DEFAULT_SELECTED_CLASSES: string[] = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+const DEFAULT_UNSELECTED_CLASSES: string[] = [
+  'ariadne-text-gray-500',
+  'hover:ariadne-text-gray-700',
+  'hover:ariadne-border-gray-300'
+]
+
+for (const tabContainer of document.getElementsByTagName('tab-container')) {
+  tabContainer.addEventListener('tab-container-change', function (event: Event) {
+    const newPanel = (event as CustomEvent).detail.relatedTarget as HTMLElement
+    const tabContainer = newPanel.closest('tab-container') as HTMLElement
+    const tabList = tabContainer.firstElementChild as HTMLElement
+    const currentTab = tabList.querySelector('[aria-selected="true"]') as HTMLElement
+    const tabId = newPanel.getAttribute('id')?.split('-').slice(1).join('-')
+    const newTab = tabList.querySelector(`#${tabId}`) as HTMLElement
+    currentTab.classList.remove(...DEFAULT_SELECTED_CLASSES)
+    currentTab.classList.add(...DEFAULT_UNSELECTED_CLASSES)
+    newTab.classList.add(...DEFAULT_SELECTED_CLASSES)
+    newTab.classList.remove(...DEFAULT_UNSELECTED_CLASSES)
+  })
+}

data/app/components/ariadne/tab-nav-component.ts

@@ -0,0 +1,34 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class TabNavComponent extends Controller {
+  static targets = ['tab']
+
+  declare readonly tabTargets: [HTMLAnchorElement]
+
+  // keep in synch with tab_nav_component
+  SELECTED_CLASSES = ['ariadne-border-indigo-500', 'ariadne-text-indigo-600']
+  UNSELECTED_CLASSES = ['ariadne-text-gray-500', 'hover:ariadne-text-gray-700', 'hover:ariadne-border-gray-300']
+
+  connect() {
+    for (const tab of this.tabTargets) {
+      if (tab.hasAttribute('aria-current')) {
+        tab.classList.add(...this.SELECTED_CLASSES)
+        tab.classList.remove(...this.UNSELECTED_CLASSES)
+      }
+    }
+  }
+
+  toggle(event: Event) {
+    for (const tab of this.tabTargets) {
+      if (tab === event.target) {
+        tab.setAttribute('aria-current', 'page')
+        tab.classList.add(...this.SELECTED_CLASSES)
+        tab.classList.remove(...this.UNSELECTED_CLASSES)
+      } else if (tab.hasAttribute('aria-current')) {
+        tab.removeAttribute('aria-current')
+        tab.classList.add(...this.UNSELECTED_CLASSES)
+        tab.classList.remove(...this.SELECTED_CLASSES)
+      }
+    }
+  }
+}

data/app/components/ariadne/tab_component.html.erb

@@ -1,7 +1,3 @@
-<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do |component| %>
-  <% if text.present? %>
-    <%= text %>
-  <% else %>
-    <%= content %>
-  <% end %>
+<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do %>
+  <%= text || content %>
 <% end %>

data/app/components/ariadne/tab_component.rb

@@ -1,43 +1,99 @@
 # frozen_string_literal: true
 
 module Ariadne
-  # Represents a sequence of tabs which, when clicked, swap between panel contents.
+  # This component is part of navigation components such as `Ariadne::TabContainerComponent`.
+  # and `Ariadne::TabNavComponent` and should not be used by itself.
+  #
+  # @accessibility
+  #   `TabComponent` 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 TabComponent < Ariadne::Component
-    DEFAULT_TAG = :button
-    TAG_OPTIONS = [DEFAULT_TAG].freeze
+    DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
+    ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
 
-    # The Tab's text.
+    # 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.
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_one :panel, lambda { |classes: "", attributes: {}|
+      attributes[:id] = @panel_id
+      tag = :div
+      attributes[:role] ||= :tabpanel
+      attributes[:tabindex] = 0
+      attributes[:hidden] = true unless @selected
+
+      label_present = aria("label", attributes) || aria("labelledby", attributes)
+      unless label_present
+        if @id.present?
+          attributes[:"aria-labelledby"] = @id
+        else
+          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
+
+      Ariadne::BaseComponent.new(tag: tag, classes: classes, attributes: attributes)
+    }
+
+    # The tab's text.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Ariadne::Text) %>.
     renders_one :text, Ariadne::Text
+    # TODO: test what hapenns with really long inbox names
 
-    attr_reader :selected
-
-    DEFAULT_CLASSES = "ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md"
+    attr_reader :selected, :id, :classes, :attributes
 
-    BASE_TAB_CLASSES = "ariadne-whitespace-nowrap ariadne-py-4 ariadne-px-1 ariadne-border-b-2 ariadne-font-medium ariadne-text-sm"
+    DEFAULT_CLASSES = "ariadne-border-transparent ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300 ariadne-whitespace-nowrap ariadne-py-4 ariadne-px-1 ariadne-border-b-2 ariadne-font-medium ariadne-text-sm"
 
     # @example Default
     #
-    #   <%= render(Ariadne::TabComponent.new) { "Example" } %>
-    #
-    # @param tag [Symbol, String] The rendered tag name.
+    #  <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
+    #    <% tab.text { "Public comment" } %>
+    #    <% tab.panel { "Public comment panel" } %>
+    #  <% end %>
+    # @param id [String] The unique ID of the tab.
     # @param selected [Boolean] Whether the tab is selected or not.
+    # @param with_panel [Boolean] Whether the Tab has an associated panel.
+    # @param href [String] The link to navigate to when the tab is clicked.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: DEFAULT_TAG, selected: false, classes: "", attributes: {})
-      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+    def initialize(id: nil, selected: false, with_panel: false, href: nil, classes: "", attributes: {})
+      @id = id
+
+      @href = href
+      @selected = selected
+
       @classes = class_names(
         DEFAULT_CLASSES,
-        classes
+        classes,
       )
 
       @attributes = attributes
-      @attributes[:id] ||= "tabs-tab-#{@tab_idx}"
-      @attributes[:"aria-controls"] = "tabs-panel-#{@tab_idx}"
-      @attributes[:"aria-current"] = "page" if selected
-      @attributes[:selected] = selected
-      @classes = class_names(BASE_TAB_CLASSES, classes)
+      @attributes[:id] ||= @id
+
+      if with_panel # TODO: test
+        if @id.blank?
+          raise ArgumentError, "Tabs with panels must have a unique `id`"
+        end
+
+        @tag = :button
+        @attributes[:type] = :button
+        @attributes[:role] = :tab
+        @panel_id = "panel-#{@id}"
+        @attributes[:"aria-controls"] = @panel_id
+      else
+        @tag = :a
+      end
+
+      return unless @selected
+
+      if @tag == :a
+        aria_current = aria("current", attributes) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
+        @attributes[:"aria-current"] = fetch_or_raise(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current)
+      else
+        @attributes[:"aria-selected"] = true
+      end
     end
   end
 end

data/app/components/ariadne/tab_container_component.erb

@@ -0,0 +1,12 @@
+<%= render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) do  |component| %>
+  <div role="tablist">
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  </div>
+  <% tabs.each do |tab| %>
+    <div class="ariadne-pt-2">
+      <%= tab.panel %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/ariadne/tab_container_component.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # A container for a row of tags. Keyboard support is provided.
+  # @accessibility This component requires you to pass in a `sr_label`
+  # attribute, which will be used to label the tabs for screen readers.
+  class TabContainerComponent < Ariadne::Component
+    DEFAULT_TAG = :"tab-container"
+
+    DEFAULT_CLASSES = ""
+
+    DEFAULT_SELECTED_CLASSES = "ariadne-border-indigo-500 ariadne-text-indigo-600"
+    DEFAULT_UNSELECTED_CLASSES = "ariadne-text-gray-500 hover:ariadne-text-gray-700 hover:ariadne-border-gray-300"
+
+    # Tabs and panels to be rendered.
+    #
+    # @param id [String] The unique ID of the tab.
+    # @param selected [Boolean] Whether the tab is selected.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    renders_many :tabs, lambda { |id: "", selected: false, classes: "", attributes: {}|
+      actual_classes = class_names(selected ? DEFAULT_SELECTED_CLASSES : DEFAULT_UNSELECTED_CLASSES, classes)
+      Ariadne::TabComponent.new(
+        id: id,
+        selected: selected,
+        with_panel: true,
+
+        classes: actual_classes,
+        attributes: attributes,
+      )
+    }
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::TabContainerComponent.new(sr_label: "Comments")) do |tab_container| %>
+    #     <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
+    #       <% tab.text { "Tab 1" } %>
+    #       <% tab.panel { "Panel 1" } %>
+    #     <% end %>
+    #     <%= render(Ariadne::TabComponent.new(id: "pub-comment")) do |tab| %>
+    #       <% tab.text { "Tab 2" } %>
+    #       <% tab.panel { "Panel 2" } %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # %>
+    #
+    # @param sr_label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(sr_label:, classes: "", attributes: {})
+      @tag = DEFAULT_TAG
+      @classes = class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @attributes = attributes
+      @attributes[:"aria-label"] = sr_label
+      @attributes[:role] = :presentation
+    end
+
+    def render?
+      tabs.present?
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+  <ul class="ariadne-list-none">
+    <% tabs.each do |tab| %>
+      <li class="ariadne-inline-flex"><%= tab %></li>
+    <% end %>
+  </ul>
+<% end %>