bs5_expandable_list_group 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a25801cb5cccc05129ddee20be6d7613b6861725540fc35762abeb9533da688e
-  data.tar.gz: 8404505ce4e166979bacd59621d8354e40db54c7a9e582c0187a31d5e9101625
+  metadata.gz: 53968aced77ec5891c98c1ecbcdfc9a7011a88b1d04893fdddc51f296eb6b4c5
+  data.tar.gz: 79820d54b461d866e1f12f1896942d8e7f27bcd2e04251da3df8d0bc178d5f4d
 SHA512:
-  metadata.gz: 92876de97894c46e95299f40bc5ea069d1a0c8151da69c399c350e59573f71986e5a0534fe36308d651e0fb00f9b744b6b26a101a6f8f0e66b59a781e2144223
-  data.tar.gz: 807dbe554e7fb82bf8f29e6b69212f8afb2952110b23828703a5f0ce1b8dcf66a48a0dacd499bec41f2e5dcae97dafd9cd8b5342d8313af9623e2467cc492499
+  metadata.gz: d9659802b3e4619a59bcc748ec5a5ded01e46ecae3b158ba304baf8837385ffdfa089792a8ec5632f7e009c6f223c19930609be6eff770c7015c4fb1bc15cf0d
+  data.tar.gz: 1d0771ec4518307e8b5b6ee7e28aec4fbd3f398d13f93537ddc5334a53beb82942a90423e99592e79967db262f430afc50c698f2a74705fc3c4b865260460618

data/README.md

@@ -1,6 +1,7 @@
 # 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** 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.
 
@@ -172,7 +173,7 @@ This will render just a [list group item](https://getbootstrap.com/docs/5.0/comp
       <%= i.body  { post.text } %>
     <% end %>
   <% end %>
-  <% if @companies.next_page %>
+  <% if @posts.next_page %>
     <% c.item %>
       <%= link_to_next_page @posts "Load more" %>
     <% end %>
@@ -180,6 +181,27 @@ This will render just a [list group item](https://getbootstrap.com/docs/5.0/comp
 <% end %>
 ```
 
+### Wrap an item in an extra element
+
+Every list item is a `div` with one or more CSS classes and, dependent on block passed, some `data` attributes and is not customizable (yet).  
+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
 
@@ -187,12 +209,12 @@ The following options can be passed to `Bs5::ExpandableListGroupComponent.new`:
 
 | 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 |
 |  `expandable` | `false`  | Expanded items are shown a little bit bigger as if they come out a bit|
 
-
 Example:
 
 ```erb
@@ -201,6 +223,9 @@ Example:
 <% 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

@@ -1,4 +1,4 @@
-<%= tag.div(id: accordion? && id, class: component_class) do %>
+<%= tag.send(tag_name, **component_attributes) do %>
   <% items.each do |item| %>
     <%= item %>
   <% end %>

data/app/components/bs5/expandable_list_group_component.rb

@@ -2,23 +2,27 @@
 
 module Bs5
   class ExpandableListGroupComponent < ViewComponent::Base
-    renders_many :items, lambda {
-      ExpandableListItemComponent.new(parent_id: accordion? && id, stretchable: stretchable?)
+    renders_many :items, lambda { |options = {}|
+      options.merge!(parent_id: id, stretchable: stretchable?)
+      ExpandableListItemComponent.new(**options)
     }
 
-    attr_reader :accordion, :stretchable
+    attr_reader :options, :accordion, :stretchable, :tag_name
+
+    DEFAULT_TAG_NAME = :div
 
     def initialize(options = {})
       @accordion = options.delete(:accordion)
       @stretchable = options.delete(:stretchable)
-      @id = options[:id]
+      @id = options.delete(:id)
+      @tag_name = options.delete(:tag) || DEFAULT_TAG_NAME
       @options = options
     end
 
     private
 
     def id
-      @id || "list-group-#{object_id}"
+      @id || (accordion? && "list-group-#{object_id}")
     end
 
     def component_class
@@ -27,6 +31,10 @@ module Bs5
       class_names
     end
 
+    def component_attributes
+      options.merge(id: id, class: component_class)
+    end
+
     alias accordion? accordion
     alias stretchable? stretchable
   end

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

@@ -1,15 +1,15 @@
-
-<% if simple_content? %>
-  <%= tag.div(content, class: "list-group-item") %>
-<% else %>
-  <%= 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 %>
+<%= wrapper do %>
+  <% if simple_content? %>
+    <%= tag.div(content, class: "list-group-item") %>
+  <% else %>
+    <%= 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 %>
   <% end %>
 <% end %>
-

data/app/components/bs5/expandable_list_item_component.rb

@@ -2,24 +2,42 @@
 
 module Bs5
   class ExpandableListItemComponent < ViewComponent::Base
+    DEFAULT_WRAPPER_TAG = :div
     renders_one :title, lambda {
       ExpandableListItemHeaderTitleComponent.new(target_id: target_id)
     }
     renders_one :actions, ExpandableListItemHeaderActionsComponent
     renders_one :body
 
-    attr_reader :parent_id, :stretchable
+    attr_reader :parent_id, :stretchable, :wrapper_html
 
     def initialize(options = {})
       @parent_id = options.delete(:parent_id)
       @stretchable = options.delete(:stretchable)
+      @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
+        yield
+      end
+    end
+
     def simple_content?
-      title.nil? && body.nil? && actions.nil?
+      title.blank? && body.blank? && actions.blank?
     end
 
     def target_id

data/lib/bs5_expandable_list_group/version.rb

@@ -1,3 +1,3 @@
 module Bs5ExpandableListGroup
-  VERSION = '0.2.0'
+  VERSION = '0.3.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5_expandable_list_group
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-02 00:00:00.000000000 Z
+date: 2021-06-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails