Class: NitroKit::Accordion

Inherits:
Component
  • Object
show all
Defined in:
app/components/nitro_kit/accordion.rb

Constant Summary collapse

ITEM = 
"divide-y"
TRIGGER = 
[
  "flex w-full items-center justify-between py-4 font-medium cursor-pointer",
  "group/accordion-trigger hover:underline transition-colors",
  "[&[aria-expanded='true']>svg]:rotate-180",
  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
].freeze
CONTENT = 
[
  "overflow-hidden transition-all duration-200",
  "[&[aria-hidden='true']]:h-0 [&[aria-hidden='false']]:h-auto"
].freeze
ARROW = 
"transition-transform duration-200 text-muted-foreground group-hover/accordion-trigger:text-primary"

Instance Attribute Summary

Attributes inherited from Component

#attrs

Instance Method Summary collapse

Methods inherited from Component

#data_merge, #initialize, #merge, merge

Constructor Details

This class inherits a constructor from NitroKit::Component

Instance Method Details

#content(**attrs) ⇒ Object 



50
51
52
53
54
55
56
57
58
 
# File 'app/components/nitro_kit/accordion.rb', line 50

def content(**attrs)
  div(
    class: merge(CONTENT),
    data: {:"nk--accordion-target" => "content"},
    aria: {hidden: "true"}
  ) do
    div(class: "pb-4") { yield }
  end
end

#item(**attrs) ⇒ Object 



29
30
31
32
33
 
# File 'app/components/nitro_kit/accordion.rb', line 29

def item(**attrs)
  div(**attrs) do
    yield
  end
end

#trigger(text = nil, **attrs) ⇒ Object 



35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
# File 'app/components/nitro_kit/accordion.rb', line 35

def trigger(text = nil, **attrs)
  button(
    type: "button",
    class: TRIGGER,
    data: {
      :action => "nk--accordion#toggle",
      :"nk--accordion-target" => "trigger"
    },
    aria: {expanded: "false", controls: "content"}
  ) do
    div(**attrs) { text || yield }
    render(NitroKit::Icon.new(name: "chevron-down", class: ARROW))
  end
end

#view_template ⇒ Object 



19
20
21
22
23
24
25
26
27
 
# File 'app/components/nitro_kit/accordion.rb', line 19

def view_template
  div(
    **attrs,
    class: merge(ITEM, attrs[:class]),
    data: {controller: "nk--accordion"}
  ) do
    yield
  end
end