bs5_expandable_list_group 0.1.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b3cf656df05f0efc37c63c574dc62e39dfc143911398bc3346f5641a1ac14400
-  data.tar.gz: 1122074157406c6c4a52aa579d59c64fe8162e3c320c5bb03d6dc56b8e5f9b12
+  metadata.gz: d0fe287158fb9bd8dc214ab834588e700e6a1c87c13410afa2761f6200a34dc8
+  data.tar.gz: 20e7875417d6b574f86c92e6c70595cad7cfd555ebbbde4f68e9c7bdf082d661
 SHA512:
-  metadata.gz: 2e225cb6367f28f3e31123bf1a9af9d6735bf441ef64e5d2276f04ebbfbf6d6b7545f7e00fc64741ca81b293b6273a9363cb802832f39fbc426a7a22998b819e
-  data.tar.gz: 3294f3b18925ebf3f7317bf07f67816e03e4fe54c700a8156de928675c88ec7183a1175de4aeebf738e0ecab9cda4bb0d5f8d971f0651e733121c67135671c3a
+  metadata.gz: 9ae2e083544567258691eb1a6d0b60b4c43de0bc7c9bbe4dbabb98d46e9df9c7d06c67b9febbd2daa156bee4a863a63f1a1e05fa31649ab11f960867ebd22fe7
+  data.tar.gz: 80aee9b9c941a123cde3190788c6d1e528ea65aff3eea285197edddb3627818ae8f86ab3daeb8cf0d1da5f5ba833caa779dad6a7a9eca090cfcef48c7f51bbbf

data/README.md

@@ -1,15 +1,16 @@
 # Bootstrap 5 expandable list group
 
 [![Build Status](https://travis-ci.org/bazzel/Bs5ExpandableListGroup.svg?branch=main)](https://travis-ci.org/bazzel/Bs5ExpandableListGroup)
+[![Gem Version](https://badge.fury.io/rb/bs5_expandable_list_group.svg)](https://badge.fury.io/rb/bs5_expandable_list_group)
 
-**Bootstrap 5 expandable list group** gives you a simple API for creating expandable and stretchable list groups. A bit like [Bootstrap 5](https://getbootstrap.com/)'s [Accordion](https://getbootstrap.com/docs/5.0/components/accordion/), [Collapse](https://getbootstrap.com/docs/5.0/components/collapse/) and [List group](https://getbootstrap.com/docs/5.0/components/list-group/) components combined.
+**Bootstrap 5 expandable list group** is a Ruby on Rails engine and gives you a simple API for creating expandable and stretchable list groups. A bit like [Bootstrap 5](https://getbootstrap.com/)'s [Accordion](https://getbootstrap.com/docs/5.0/components/accordion/), [Collapse](https://getbootstrap.com/docs/5.0/components/collapse/) and [List group](https://getbootstrap.com/docs/5.0/components/list-group/) components combined.
 
 https://user-images.githubusercontent.com/7672/120296188-27170580-c2c8-11eb-936a-a93c16326acb.mp4
 
 ## TL;DR
 
 ```erb
-<%= render(Bs5::ExpandableListGroupComponent.new) do |c| %>
+<%= bs5_expandable_list_group do |c| %>
   <% @posts.each do |post| %>
     <% c.item do |i| %>
       <%= i.title { post.title } %>
@@ -55,7 +56,7 @@ $ bin/rails generate bs5_expandable_list_group:install
 
 This copies the required assets to your application directory:
 
-Stylesheets are copied to `app/javascript/stylesheets`. If needed, you can the following line to your `application.scss` to import them:
+Stylesheets are copied to `app/javascript/stylesheets`. If needed, you can add the following line to your `application.scss` to import them:
 
 ```scss
 @import "bootstrap";
@@ -63,16 +64,14 @@ Stylesheets are copied to `app/javascript/stylesheets`. If needed, you can the f
 @import "stylesheets/stretchable-items";
 ```
 
-When you use Webpacker for your CSS, you should move these added stylesheets to the proper location (propably somewhere in `app/javascript` and import them in `application.scss` (or alike) located there.
-
 ## Usage
 
-To render a **Bootstrap 5 expandable list group** you use `render(Bs5::ExpandableListGroupComponent.new)` and pass it a block for rendering every list item.
+To render a **Bootstrap 5 expandable list group** you use `bs5_expandable_list_group` and pass it a block for rendering every list item.
 
-Let's say, in the `index` action of your `PostsController`, you have assigned `@posts` that contains a list of `Post` instances. To render these `@posts` in a **Bootstrap 5 expandable list group**, you put the following code in your `index.html.erb` template:
+Given that you have assigned a list of `Post` instances to `@posts`, to render these `@posts` in a **Bootstrap 5 expandable list group**, you put the following code in your template:
 
 ```erb
-<%= render(Bs5::ExpandableListGroupComponent.new) do |c| %>
+<%= bs5_expandable_list_group do |c| %>
   <% @posts.each do |post| %>
     <% c.item do |i| %>
       <%= i.title { post.title } %>
@@ -127,11 +126,11 @@ To show one set:
   ...
   <% c.item do |i| %>
     <%= i.title do |t| %>
-		...
+      ...
     <% end %>
     <% i.actions do %>
       <%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
-	   <%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
+      <%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
     <% end %>
     <%= i.body { ... } %>
   <% end %>
@@ -143,14 +142,14 @@ To show a different set on hovering:
   ...
   <% c.item do |i| %>
     <%= i.title do |t| %>
-		...
+      ...
     <% end %>
     <% i.actions do |a| %>
-      <% a.collapsed %>
+      <% a.collapsed do %>
         <%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
         <%= link_to 'Edit', edit_post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
       <% end %>      
-      <% a.expanded %>
+      <% a.expanded do %>
         <%= link_to 'Details', post_path(post), class: 'btn btn-sm btn-outline-secondary' %>
         <%= link_to 'Comment' ... %>
         <%= link_to 'Delete', post, method: :delete, class: 'btn btn-sm btn-outline-danger' %>
@@ -161,26 +160,131 @@ To show a different set on hovering:
   <% end %>
 ```
 
-### Passing options
+#### Bypassing the hover behaviour
+
+By default, when an item is collapsed, actions only show when you hover your mouse over the item. Since we use the `visibility` CSS property for this, you can bypass this behaviour one or more actions by setting its `visibility` property to `visible`. The following example uses the [`visible` utility](https://getbootstrap.com/docs/5.0/utilities/visibility/) from Bootstrap 5, but of course you can also use CSS:
+
+```erb
+  ...
+  <% c.item do |i| %>
+    <%= i.title do |t| %>
+      ...
+    <% end %>
+    <% i.actions do |a| %>
+      <%= link_to 'Not so important link', ... %>
+      <%= link_to 'Very important link', ..., class: 'visible` %>
+    <% end %>      
+    <%= i.body { ... } %>
+  <% end %>
+```
+
+### Omitting the `item`'s methods
+
+Instead of using the `item`'s methods `title`, `body` and/or `actions` you can just use (HTML-) text as a block.  
+This will render just a [list group item](https://getbootstrap.com/docs/5.0/components/list-group/#basic-example), but will come in handy when you, i.e. show the first 25 items of a longer list and want to present a "Load more" link as last item of the list (for simplicity sake the sample uses a non-working `link_to_next_page` although this is [part of Kaminari](https://github.com/kaminari/kaminari#the-link_to_next_page-and-link_to_previous_page-aliased-to-link_to_prev_page-helper-methods)):
+
+```erb
+<%= bs5_expandable_list_group do |c| %>
+  <% @posts.each do |post| %>
+    <% c.item do |i| %>
+      <%= i.title { post.title } %>
+      <%= i.body  { post.text } %>
+    <% end %>
+  <% end %>
+  <% if @posts.next_page %>
+    <% c.item do %>
+      <%= link_to_next_page @posts "Load more" %>
+    <% end %>
+  <% end %>
+<% end %>
+```
+
+### Omitting the `item`
+
+Instead of calling the `item` method on the yielded component, when you pass a block, it's rendered wrapped in the container element:
+
+```erb
+<%= bs5_expandable_list_group do %>
+  <%= render @posts %>
+<% end %>
+```
+
+This will give you the same results as wrapping the posts in a `div` with the class **list-group**, but you can still pass other options to the `bs5_expandable_list_group` (although not all of them will be effective).
+
+### Rendering a single item
 
-The following options can be passed to `Bs5::ExpandableListGroupComponent.new`:
+By calling the `item` method on the passed component you can render an item. But this can also be achieved outside the block by using the `bs5_expandable_list_group_item` helper method. The following snippet has the same result as other examples, but it does not use the `bs5_expandable_list_group` method:
+
+```erb
+<div id="posts" class="list-group">
+  <% @posts.each do |post| %>
+    <% bs5_expandable_list_group_item(parent_id: 'posts') do |i| %>
+      <%= i.title { post.title } %>
+      <%= i.body  { post.text } %>
+    <% end %>
+  <% end %>
+</div>
+```
+
+An application for rendering a single item is when you want to update an item without doing a full page reload by sending a response that contains only the list item and use JavaScript or (preferably) [Turbo](https://turbo.hotwire.dev/) to update the page.
+
+#### Passing options
+
+The following options can be passed to `bs5_expandable_list_group_item`:
 
 | name  |  default | description |
 |---|---|---|
-|  `id` |   | is used to assign an id HTML attribute to the rendered container |
-| `class`  |   | is added to the class attribute of the rendered container |
-|  `accordion` | `false`  | Behaves as an Bootstrap [accordion](https://getbootstrap.com/docs/5.0/components/accordion/) by having only 1 item expanded |
-|  `expandable` | `false`  | Expanded items are shown a little bit bigger as if they come out a bit|
+| `tag` | `:div` | A symbol or string of a valid HTML tag that is used for the tag of the list item. |
+| `parent_id` |  | ID of a parent element to add accordion-like behaviour. |
+|  `stretchable` | `false`  | Expanded items are shown a little bit bigger as if they come out a bit. |
+
 
+### Wrap an item in an extra element
+
+Every list item is a `div` (or the element specified with `tag`) with one or more CSS classes and, dependent on block passed, some `data` attributes.  
+However, you can wrap a list item in a extra element by passing a `wrapper_html` option to the `item` method:
+
+```erb
+  ...
+  <% c.item(wrapper_html: { tag: :turbo_frame, id: dom_id(post) }) do |i| %>
+    <%= i.title do |t| %>
+      <%= t.collapsed { 'Collapsed title' } %>
+      <%= t.expanded { 'Expanded title' } %>
+    <% end %>
+    <%= i.body { ... } %>
+  <% end %>
+```
+
+All options passed to the item method are used as HTML attributes of the wrapper, expect for the following:
+
+| name  |  default | description |
+|---|---|---|
+| `tag` | `:div` | A symbol or string of a valid HTML tag that is used for the tag of the wrapper |
+
+### Passing options
+
+The following options can be passed to `bs5_expandable_list_group`:
+
+| name  |  default | description |
+|---|---|---|
+| `tag` | `:div` | A symbol or string of a valid HTML tag that is used for the tag of the list group. |
+|  `id` |   | is used to assign an id HTML attribute to the rendered container. |
+| `class`  |   | is added to the class attribute of the rendered container. |
+|  `accordion` | `false`  | Behaves as an Bootstrap [accordion](https://getbootstrap.com/docs/5.0/components/accordion/) by having only 1 item expanded (only effective when used with `item` in the passed block). |
+|  `stretchable` | `false`  | Expanded items are shown a little bit bigger as if they come out a bit. |
+| `expanded` | `false` | Show the item expanded. |
 
 Example:
 
 ```erb
-<%= render(Bs5::ExpandableListGroupComponent.new(accordion: true, expandable: true) do |c| %>
+<%= bs5_expandable_list_group(accordion: true, stretchable: true) do |c| %>
   ...
 <% end %>
 ```
 
+Other options are used as HTML attributes of the list group element.
+
+
 ## Running tests
 
 ```bash

data/app/components/bs5/expandable_list/group_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.send(tag_name, **component_attributes) do %>
+  <% if items.any? %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/bs5/expandable_list/group_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Bs5
+  module ExpandableList
+    class GroupComponent < ViewComponent::Base
+      renders_many :items, lambda { |options = {}|
+        options.merge!(parent_id: id, stretchable: stretchable?)
+        GroupItemComponent.new(**options)
+      }
+
+      attr_reader :options, :is_accordion, :is_stretchable, :tag_name
+
+      DEFAULT_TAG_NAME = :div
+
+      def initialize(options = {})
+        @is_accordion = options.delete(:accordion)
+        @is_stretchable = options.delete(:stretchable)
+        @id = options.delete(:id)
+        @tag_name = options.delete(:tag) || DEFAULT_TAG_NAME
+        @options = options
+      end
+
+      private
+
+      def id
+        @id || (accordion? && "list-group-#{object_id}")
+      end
+
+      def component_class
+        ['list-group'].tap do |arr|
+          arr << @options[:class]
+        end
+      end
+
+      def component_attributes
+        options.merge(id: id, class: component_class)
+      end
+
+      alias accordion? is_accordion
+      alias stretchable? is_stretchable
+    end
+  end
+end

data/app/components/bs5/expandable_list/group_item_component.html.erb

@@ -0,0 +1,15 @@
+<%= wrapper do %>
+  <% if simple_content? %>
+    <%= tag.send(tag_name, content, **component_attributes) %>
+  <% else %>
+    <%= tag.send(tag_name, **component_attributes) do %>
+      <div class="expandable-item-header">
+        <%= title %>
+        <%= actions %>
+      </div>
+      <%= tag.div(id: target_id, class: body_class, data: body_data_options) do %>
+        <%= body %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/bs5/expandable_list/group_item_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Bs5
+  module ExpandableList
+    class GroupItemComponent < ViewComponent::Base
+      DEFAULT_WRAPPER_TAG = :div
+      DEFAULT_TAG_NAME = :div
+      renders_one :title, lambda {
+        GroupItemHeader::TitleComponent.new(target_id: target_id, expanded: expanded?)
+      }
+      renders_one :actions, GroupItemHeader::ActionsComponent
+      renders_one :body
+
+      attr_reader :parent_id, :is_stretchable, :is_expanded, :tag_name, :wrapper_html, :options
+
+      def initialize(options = {})
+        @parent_id = options.delete(:parent_id)
+        @is_stretchable = options.delete(:stretchable)
+        @is_expanded = options.delete(:expanded)
+        @tag_name = options.delete(:tag) || DEFAULT_TAG_NAME
+        @wrapper_html = options.delete(:wrapper_html)
+        @options = options
+      end
+
+      private
+
+      def wrapper_html?
+        @wrapper_html.present?
+      end
+
+      def wrapper_tag
+        @wrapper_html.delete(:tag) || DEFAULT_WRAPPER_TAG
+      end
+
+      def wrapper(&block)
+        if wrapper_html?
+          tag.send(wrapper_tag, **wrapper_html, &block)
+        else
+          capture { block.call }
+        end
+      end
+
+      def simple_content?
+        title.blank? && body.blank? && actions.blank?
+      end
+
+      def target_id
+        "expandable-list-item-#{object_id}"
+      end
+
+      def body_data_options
+        {}.tap do |h|
+          h['bs-parent'] = "##{parent_id}" if parent_id
+        end
+      end
+
+      def component_data_options
+        {}.tap do |h|
+          h.merge!(stimulus_attributes) if stretchable?
+        end
+      end
+
+      def component_class
+        ['list-group-item'].tap do |arr|
+          arr << 'expandable-item' unless simple_content?
+          arr << 'stretchable-item'
+          arr << 'stretched' if !simple_content? && expanded?
+        end
+      end
+
+      def body_class
+        %w[expandable-item-body collapse].tap do |arr|
+          arr << 'show' if expanded?
+        end
+      end
+
+      def component_attributes
+        options.tap do |h|
+          h[:class] = component_class
+          h[:data] =  component_data_options unless simple_content?
+        end
+      end
+
+      def stimulus_attributes
+        {
+          controller: stimulus_controller,
+          "#{stimulus_controller}-target": 'container',
+          "#{stimulus_controller}-stretched-class": 'stretched'
+        }
+      end
+
+      def stimulus_controller
+        'stretchable-item'
+      end
+
+      alias stretchable? is_stretchable
+      alias expanded? is_expanded
+    end
+  end
+end

data/app/components/bs5/{expandable_list_item_header_actions_component.html.erb → expandable_list/group_item_header/actions_component.html.erb}

@@ -1,6 +1,6 @@
 <div class="expandable-item-header-actions">
   <% if variable_actions? %>
-    <%= tag.div(class: "expandable-item-header-actions-collaped") do %>
+    <%= tag.div(class: "expandable-item-header-actions-collapsed") do %>
       <%= collapsed %>
     <% end %>
     <%= tag.div(class: "expandable-item-header-actions-expanded") do %>

data/app/components/bs5/expandable_list/group_item_header/actions_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Bs5
+  module ExpandableList
+    module GroupItemHeader
+      class ActionsComponent < ViewComponent::Base
+        renders_one :collapsed
+        renders_one :expanded
+
+        private
+
+        def variable_actions?
+          collapsed || expanded
+        end
+      end
+    end
+  end
+end

data/app/components/bs5/{expandable_list_item_header_title_component.html.erb → expandable_list/group_item_header/title_component.html.erb}

@@ -1,6 +1,6 @@
-<%= tag.div(class: "expandable-item-header-title", data: { "bs-toggle": :collapse, "bs-target": "##{target_id}" } ) do %>
+<%= tag.div(class: "expandable-item-header-title", data: { "bs-toggle": :collapse, "bs-target": "##{target_id}" }, aria: { expanded: expanded? } ) do %>
   <% if variable_title? %>
-    <%= tag.div(class: "expandable-item-header-title-collaped") do %>
+    <%= tag.div(class: "expandable-item-header-title-collapsed") do %>
       <%= collapsed %>
     <% end %>
     <%= tag.div(class: "expandable-item-header-title-expanded") do %>

data/app/components/bs5/expandable_list/group_item_header/title_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Bs5
+  module ExpandableList
+    module GroupItemHeader
+      class TitleComponent < ViewComponent::Base
+        renders_one :collapsed
+        renders_one :expanded
+
+        attr_reader :target_id, :is_expanded
+
+        def initialize(target_id:, expanded: false)
+          @target_id = target_id
+          @is_expanded = expanded
+        end
+
+        private
+
+        def variable_title?
+          collapsed || expanded
+        end
+
+        alias expanded? is_expanded
+      end
+    end
+  end
+end

data/app/helpers/bs5_expandable_list_group/view_components_helper.rb

@@ -0,0 +1,15 @@
+module Bs5ExpandableListGroup
+  module ViewComponentsHelper
+    def bs5_expandable_list_group(*args)
+      render ::Bs5::ExpandableList::GroupComponent.new(*args) do |c|
+        yield c if block_given?
+      end
+    end
+
+    def bs5_expandable_list_group_item(*args)
+      render ::Bs5::ExpandableList::GroupItemComponent.new(*args) do |c|
+        yield c if block_given?
+      end
+    end
+  end
+end

data/lib/bs5_expandable_list_group/engine.rb

@@ -2,6 +2,11 @@ module Bs5ExpandableListGroup
   class Engine < ::Rails::Engine
     isolate_namespace Bs5ExpandableListGroup
 
+    # We don't want the developer to add the helper so we 'automate' this:
+    config.to_prepare do
+      ActionController::Base.helper(ViewComponentsHelper)
+    end
+
     config.generators do |g|
       g.test_framework :rspec
       g.assets false

data/lib/bs5_expandable_list_group/version.rb

@@ -1,3 +1,3 @@
 module Bs5ExpandableListGroup
-  VERSION = '0.1.0'
+  VERSION = '0.5.0'
 end

data/lib/generators/bs5_expandable_list_group/install/templates/controllers/stretchable_item_controller.js

@@ -5,7 +5,7 @@ const HIDE_EVENT = "hide.bs.collapse";
 
 export default class extends Controller {
   static targets = ["container"];
-  static classes = ["item", "stretched"];
+  static classes = ["stretched"];
 
   initialize() {
     this.onShow = this._onShow.bind(this);
@@ -14,7 +14,6 @@ export default class extends Controller {
   }
 
   connect() {
-    this.containerTarget.classList.add(this.itemClass);
     this.contentNode.addEventListener(SHOW_EVENT, this.onShow);
     this.contentNode.addEventListener(HIDE_EVENT, this.onHide);
   }

data/lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_expandable-items.scss

@@ -3,7 +3,14 @@
     position: relative;
     cursor: pointer;
 
-    &-actions {
+    &-title-expanded {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+
+    &-actions-collapsed, &-actions-expanded {
       position: absolute;
       top: 0;
       right: 0;
@@ -12,17 +19,18 @@
 
   &:hover &-header-actions,
   &-header-title[aria-expanded="true"] &-header-title-expanded,
-  &-header-title:not([aria-expanded="true"]) &-header-title-collaped,
+  &-header-title:not([aria-expanded="true"]) &-header-title-collapsed,
   &-header-title[aria-expanded="true"] + &-header-actions,
-  &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-expanded {
-    display: revert;
+  &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-expanded,
+  &-header-actions :focus-within {
+    visibility: visible;
   }
 
   &-header &-header-actions,
-  &-header-title[aria-expanded="true"] &-header-title-collaped,
+  &-header-title[aria-expanded="true"] &-header-title-collapsed,
   &-header-title:not([aria-expanded="true"]) &-header-title-expanded,
   &-header-actions-expanded,
-  &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-collaped {
-    display: none;
+  &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-collapsed {
+    visibility: hidden;
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5_expandable_list_group
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-01 00:00:00.000000000 Z
+date: 2021-06-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -86,7 +86,9 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-description: Description of Bs5ExpandableListGroup.
+description: Bootstrap 5 expandable list group is a Ruby on Rails engine and gives
+  you a simple API for creating expandable and stretchable list groups. A bit like
+  Bootstrap 5's Accordion, Collapse and List group components combined.
 email:
 - patrick.baselier@gmail.com
 executables: []
@@ -98,16 +100,17 @@ files:
 - Rakefile
 - app/assets/config/bs5_expandable_list_group_manifest.js
 - app/assets/stylesheets/bs5_expandable_list_group/application.css
-- app/components/bs5/expandable_list_group_component.html.erb
-- app/components/bs5/expandable_list_group_component.rb
-- app/components/bs5/expandable_list_item_component.html.erb
-- app/components/bs5/expandable_list_item_component.rb
-- app/components/bs5/expandable_list_item_header_actions_component.html.erb
-- app/components/bs5/expandable_list_item_header_actions_component.rb
-- app/components/bs5/expandable_list_item_header_title_component.html.erb
-- app/components/bs5/expandable_list_item_header_title_component.rb
+- app/components/bs5/expandable_list/group_component.html.erb
+- app/components/bs5/expandable_list/group_component.rb
+- app/components/bs5/expandable_list/group_item_component.html.erb
+- app/components/bs5/expandable_list/group_item_component.rb
+- app/components/bs5/expandable_list/group_item_header/actions_component.html.erb
+- app/components/bs5/expandable_list/group_item_header/actions_component.rb
+- app/components/bs5/expandable_list/group_item_header/title_component.html.erb
+- app/components/bs5/expandable_list/group_item_header/title_component.rb
 - app/controllers/bs5_expandable_list_group/application_controller.rb
 - app/helpers/bs5_expandable_list_group/application_helper.rb
+- app/helpers/bs5_expandable_list_group/view_components_helper.rb
 - app/jobs/bs5_expandable_list_group/application_job.rb
 - app/mailers/bs5_expandable_list_group/application_mailer.rb
 - app/models/bs5_expandable_list_group/application_record.rb
@@ -129,7 +132,7 @@ licenses:
 metadata:
   homepage_uri: https://github.com/bazzel/Bs5ExpandableListGroup
   source_code_uri: https://github.com/bazzel/Bs5ExpandableListGroup
-  changelog_uri: https://github.com/bazzel/Bs5ExpandableListGroup/CHANGELOG.md
+  changelog_uri: https://github.com/bazzel/Bs5ExpandableListGroup/blob/main/CHANGELOG.md
 post_install_message:
 rdoc_options: []
 require_paths:
@@ -148,5 +151,6 @@ requirements: []
 rubygems_version: 3.2.3
 signing_key:
 specification_version: 4
-summary: Summary of Bs5ExpandableListGroup.
+summary: Rails engine for creating expandable and stretchable list groups with Bootstrap
+  5
 test_files: []

data/app/components/bs5/expandable_list_group_component.html.erb

@@ -1,5 +0,0 @@
-<%= tag.div(id: accordion? && id, class: component_class) do %>
-  <% items.each do |item| %>
-    <%= item %>
-  <% end %>
-<% end %>

data/app/components/bs5/expandable_list_group_component.rb

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module Bs5
-  class ExpandableListGroupComponent < ViewComponent::Base
-    renders_many :items, lambda {
-      ExpandableListItemComponent.new(parent_id: accordion? && id, stretchable: stretchable?)
-    }
-
-    attr_reader :accordion, :stretchable
-
-    def initialize(options = {})
-      @accordion = options.delete(:accordion)
-      @stretchable = options.delete(:stretchable)
-      @id = options[:id]
-      @options = options
-    end
-
-    private
-
-    def id
-      @id || "list-group-#{object_id}"
-    end
-
-    def component_class
-      class_names = ['list-group']
-      class_names << @options[:class]
-      class_names
-    end
-
-    alias accordion? accordion
-    alias stretchable? stretchable
-  end
-end

data/app/components/bs5/expandable_list_item_component.html.erb

@@ -1,9 +0,0 @@
-<%= tag.div(class: "list-group-item expandable-item", data: component_data_options) do %>
-  <div class="expandable-item-header">
-    <%= title %>
-    <%= actions %>
-  </div>
-  <%= tag.div(id: target_id, class: "expandable-item-body collapse", data: body_data_options) do %>
-    <%= body %>
-  <% end %>
-<% end %>

data/app/components/bs5/expandable_list_item_component.rb

@@ -1,52 +0,0 @@
-# frozen_string_literal: true
-
-module Bs5
-  class ExpandableListItemComponent < ViewComponent::Base
-    renders_one :title, lambda {
-      ExpandableListItemHeaderTitleComponent.new(target_id: target_id)
-    }
-    renders_one :actions, ExpandableListItemHeaderActionsComponent
-    renders_one :body
-
-    attr_reader :parent_id, :stretchable
-
-    def initialize(options = {})
-      @parent_id = options.delete(:parent_id)
-      @stretchable = options.delete(:stretchable)
-      @options = options
-    end
-
-    private
-
-    def target_id
-      "expandable-list-item-#{object_id}"
-    end
-
-    def body_data_options
-      {}.tap do |h|
-        h['bs-parent'] = "##{parent_id}" if parent_id
-      end
-    end
-
-    def component_data_options
-      {}.tap do |h|
-        h.merge!(stimulus_attributes) if stretchable?
-      end
-    end
-
-    def stimulus_attributes
-      {
-        controller: stimulus_controller,
-        "#{stimulus_controller}-target": 'container',
-        "#{stimulus_controller}-item-class": 'stretchable-item',
-        "#{stimulus_controller}-stretched-class": 'stretched'
-      }
-    end
-
-    def stimulus_controller
-      'stretchable-item'
-    end
-
-    alias stretchable? stretchable
-  end
-end

data/app/components/bs5/expandable_list_item_header_actions_component.rb

@@ -1,14 +0,0 @@
-# frozen_string_literal: true
-
-module Bs5
-  class ExpandableListItemHeaderActionsComponent < ViewComponent::Base
-    renders_one :collapsed
-    renders_one :expanded
-
-    private
-
-    def variable_actions?
-      collapsed || expanded
-    end
-  end
-end

data/app/components/bs5/expandable_list_item_header_title_component.rb

@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-module Bs5
-  class ExpandableListItemHeaderTitleComponent < ViewComponent::Base
-    renders_one :collapsed
-    renders_one :expanded
-
-    attr_reader :target_id
-
-    def initialize(target_id:)
-      @target_id = target_id
-    end
-
-    private
-
-    def variable_title?
-      collapsed || expanded
-    end
-  end
-end