# 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-slate-500 ariadne-text-slate-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