Class: Fluxbit::AccordionComponent::Panel

Inherits:
Component
  • Object
show all
Includes:
Config::AccordionComponent
Defined in:
app/components/fluxbit/accordion_component.rb

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #icon, #options, #popover?, #random_id, #remove_class, #remove_class_from_props, #render_popover_or_tooltip, #target, #tooltip?

Methods included from IconHelpers

#chevron_double_left, #chevron_double_right, #chevron_down, #chevron_left, #chevron_right, #chevron_up, #close_icon, #ellipsis_horizontal, #eye_icon, #eye_slash_icon, #plus_icon

Constructor Details

#initialize(accordion_id:, **props) ⇒ Fluxbit::AccordionComponent::Panel

Initializes an accordion panel with the given properties.

Parameters:

  • accordion_id (String) —

    The parent accordion’s ID for proper ARIA relationships.

  • flush (Boolean) —

    (false) Whether the panel should use flush styling.

  • color (Symbol, String) —

    (:default) The color theme for this panel.

  • open (Boolean) —

    (false) Whether the panel should start in an expanded state.

  • index (Integer) —

    The panel’s position index for proper styling (first, middle, last). Automatically increments for each panel if not specified.

  • **props (Hash) —

    Additional HTML attributes for the panel container.



68
69
70
71
72
73
74
75
76
 
# File 'app/components/fluxbit/accordion_component.rb', line 68

def initialize(accordion_id:, **props)
  super
  @props = props
  @accordion_id = accordion_id
  @flush = options(@props.delete(:flush), default: @@flush)
  @color = options(@props.delete(:color), collection: styles[:colors].keys, default: @@color).to_sym
  @open = options(@props.delete(:open), default: false)
  @index = options(@props.delete(:index), default: 0)
end

Instance Method Details

#call ⇒ Object 



78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
# File 'app/components/fluxbit/accordion_component.rb', line 78

def call
  header_id = "#{@accordion_id}-header-#{@index}"
  content_id = "#{@accordion_id}-content-#{@index}"

  header_base = styles[:item][:header][:base]
  content_base = styles[:item][:content][:base]

  if @flush
    header_base = header_base.gsub(/border[^-]\S*/, "").gsub(/rounded-\S+/, "")
    content_base = content_base.gsub(/border[^-]\S*/, "").gsub(/rounded-\S+/, "")
  end

  header_classes = [
    header_base,
    styles[:colors][@color][:header],
    (@index == 0) ? styles[:item][:header][:first] : styles[:item][:header][:middle]
  ].compact.join(" ")

  content_classes = [
    content_base,
    styles[:colors][@color][:content],
    (@index == 0) ? styles[:item][:content][:first] : styles[:item][:content][:middle]
  ].compact.join(" ")

  tag.div(class: styles[:item][:base]) do
    concat(
      tag.h2(id: header_id) do
        tag.button(
          type: "button",
          class: header_classes,
          "data-accordion-target" => "##{content_id}",
          "aria-expanded" => @open.to_s,
          "aria-controls" => content_id
        ) do
          concat(tag.span(header || "Accordion Header"))
          concat(chevron_down(class: styles[:item][:icon][:base]))
        end
      end
    )
    concat(
      tag.div(
        body || "",
        id: content_id,
        class: [ @open ? "" : "hidden", content_classes ].join(" "),
        "aria-labelledby" => header_id
      )
    )
  end
end