Accordion

Is it accessible?

›

Yes. It adheres to the WAI-ARIA design pattern.

render Accordion.new do |accordion|
  accordion.trigger { "Is it accessible?" }
  accordion.content { "Yes. It adheres to the WAI-ARIA design pattern." }
end

Installation

Add the component to your project

CLI

Run the following command in your terminal

bundle exec essence add accordion

Manually

Copy and paste the following code into your project

components/accordion.rb

# frozen_string_literal: true

class Components::Accordion < Components::Essence
  def initialize(**attributes)
    super(**attributes)
  end

  def view_template(&)
    details(**attributes, &)
  end

  def trigger(**mattributes, &)
    mattributes[:class] = merged_component_classes(namespace: :trigger, extra_classes: mattributes[:class])
    summary(**mattributes) do
      p(class: "inline", &)
      span(class: component_classes[:chevron][:_]) { "›" }
    end
  end

  def content(**mattributes, &)
    mattributes[:class] = merged_component_classes(namespace: :content, extra_classes: mattributes[:class])
    p(**mattributes, &)
  end

  private

  def component_classes
    {
      _: {
        _: "w-full group py-4"
      },
      trigger: {
        _: "cursor-pointer list-none flex items-center justify-between text-base font-medium"
      },
      content: {
        _: "py-2 transform transition-all duration-500 not-open:-mt-4 opacity-0 group-open:opacity-100 group-open:mt-0 text-sm"
      },
      chevron: {
        _: "transform transition-all duration-300 rotate-90 group-open:-rotate-90 text-lg text-gray-700"
      }
    }.freeze
  end
end