bs5 0.0.13 → 0.0.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b63f00444e32de97ae7167d85ab798ec58085c325730e18a48d21bdde8a8de89
-  data.tar.gz: 2a8ab48a4bd4fe50a629868448315c3ef9d641ef7b30cdb189db8e95015ddd38
+  metadata.gz: fe7d17d9f86d5887ab9e3a9cbc86212c19a6ed20526ac905339f6b997c044096
+  data.tar.gz: 4d2df678ad8595ebff4a123325a84593dee109fe57a614aaa2473a7d88fb5e9c
 SHA512:
-  metadata.gz: 94fc5dc2aab1bb53e3155d14acfdf889ef58d3aee2e03fa8a9620fd2e3379bfd48d0c453c9c42f22a826457b8f7fb7edc0274c0db54c6437ecf901dd6f371e6e
-  data.tar.gz: e3cf1bbf76474375de657c37ecc3395d51993dc33cac54240014769b58b63dc466bc3e1c669f7f3500ba966de17cb17a4799cb902057d1ae39660ab6a5300c41
+  metadata.gz: f9a8d6249245234d557749abeecbe37feda5e13cbdf2e749baa96f77ffab0cb1b82d7c9c7e00f6751eda8860b396efb333ef8a7a69ca56908c9cd3f1570b9400
+  data.tar.gz: 8d4de475b7f904a29ec63bc1845b58a7122fccd366f787616e9f7b7c36e1bba1d4886adc31d0e506de223fea7c84afbaddec553d7d307164adf0c79d949ddb45

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

@@ -6,16 +6,9 @@
           id="<%= item.header_id %>"
           class="accordion-header"
         >
-          <button
-            class="<%= item.button_class %>"
-            type="button"
-            data-toggle="collapse"
-            data-target="#<%= item.collapse_id %>"
-            aria-expanded="true"
-            aria-controls="<%= item.collapse_id %>"
-          >
-              <%= item.title %>
-          </button>
+          <%= button_tag item.title,
+              bs5_collapse(target: "##{item.collapse_id}", expanded: !item.collapsed?)
+                .merge(type: :button, class: item.button_class) %>
         </h2>
         <div
           id="<%= item.collapse_id %>"

data/app/components/bs5/accordion_component.rb

@@ -2,6 +2,7 @@
 
 module Bs5
   class AccordionComponent < ViewComponent::Base
+    include ComponentsHelper
     include ViewComponent::Slotable
 
     with_slot :item, collection: true, class_name: 'Item'

data/app/helpers/bs5/components_helper.rb

@@ -20,6 +20,10 @@ module Bs5
       }
     end
 
+    def bs5_collapse(*args)
+      CollapseService.new(*args).to_hash
+    end
+
     private
 
     def render_component(component_clazz, *args)

data/app/service/bs5/collapse_service.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Bs5
+  class CollapseService
+    CONTROLS_ERR_MSG = 'Please provide either a `controls` option' \
+                       ' containing the id of the collapsible element' \
+                       ' or an ID selector as `target` options.'
+
+    attr_reader :expanded, :target, :controls
+
+    def initialize(expanded: false, target: nil, controls: nil)
+      @expanded = expanded
+      @target = target
+      @controls = controls
+    end
+
+    def to_hash
+      {
+        data: data_options,
+        aria: aria_options
+      }
+    end
+
+    private
+
+    def data_options
+      options = { toggle: :collapse }
+      options[:target] = target if target
+
+      options
+    end
+
+    def aria_options
+      options = { expanded: expanded }
+
+      if controls
+        options[:controls] = controls
+      elsif target&.start_with?('#')
+        options[:controls] = target.delete_prefix('#')
+      else
+        raise CONTROLS_ERR_MSG
+      end
+
+      options
+    end
+  end
+end

data/app/views/bs5/examples/collapse/default/_example.html.erb

@@ -0,0 +1,4 @@
+<h2>Example</h2>
+<%= bs5_example(snippet: 'collapse/default/snippet') %>
+<h2>Multiple targets</h2>
+<%= bs5_example(snippet: 'collapse/default/multiple_targets') %>

data/app/views/bs5/examples/collapse/default/multiple_targets.html.erb

@@ -0,0 +1,21 @@
+<p>
+  <%= link_to 'Toggle first element', '#multiCollapseExample1', bs5_collapse(controls: 'multiCollapseExample1 multiCollapseExample2').merge(class: 'btn btn-primary', role: :button) %>
+  <%= bs5_button_tag 'Toggle second element', bs5_collapse(target: '#multiCollapseExample2', controls: 'multiCollapseExample1 multiCollapseExample2') %>
+  <%= bs5_button_tag 'Toggle both elements', bs5_collapse(target: '.multi-collapse', controls: 'multiCollapseExample1 multiCollapseExample2') %>
+</p>
+<div class="row">
+  <div class="col">
+    <div class="collapse multi-collapse" id="multiCollapseExample1">
+      <div class="card card-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="collapse multi-collapse" id="multiCollapseExample2">
+      <div class="card card-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/bs5/examples/collapse/default/snippet.html.erb

@@ -0,0 +1,9 @@
+<p>
+  <%= link_to 'Link with href', '#collapseExample', bs5_collapse(controls: 'collapseExample').merge(class: 'btn btn-primary', role: :button) %>
+  <%= bs5_button_tag 'Button with data-target', bs5_collapse(target: '#collapseExample').merge(type: :button) %>
+</p>
+<div class="collapse" id="collapseExample">
+  <div class="card card-body">
+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+  </div>
+</div>

data/app/views/bs5/pages/collapse.html.erb

@@ -0,0 +1,2 @@
+<h1>Collapse</h1>
+<%= render 'bs5/examples/collapse/default/example' %>

data/app/views/layouts/bs5/pages.html.erb

@@ -18,6 +18,7 @@
             <% lg.slot(:item, active: current_page?(pages_path('breadcrumb'))) do %><%= link_to 'Breadcrumb', pages_path('breadcrumb') %><% end %>
             <% lg.slot(:item, active: current_page?(pages_path('buttons'))) do %><%= link_to 'Buttons', pages_path('buttons') %><% end %>
             <% lg.slot(:item, active: current_page?(pages_path('close_button'))) do %><%= link_to 'Close button', pages_path('close_button') %><% end %>
+            <% lg.slot(:item, active: current_page?(pages_path('collapse'))) do %><%= link_to 'Collapse', pages_path('collapse') %><% end %>
             <% lg.slot(:item, active: current_page?(pages_path('list_group'))) do %><%= link_to 'List group', pages_path('list_group') %><% end %>
             <% lg.slot(:item, active: current_page?(pages_path('tooltips'))) do %><%= link_to 'Tooltips', pages_path('tooltips') %><% end %>
           <%- end %>

data/lib/bs5/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Bs5
-  VERSION = '0.0.13'
+  VERSION = '0.0.14'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.13
+  version: 0.0.14
 platform: ruby
 authors:
 - Patrick Baselier
@@ -162,6 +162,7 @@ files:
 - app/helpers/bs5/components_helper.rb
 - app/helpers/bs5/examples_helper.rb
 - app/models/bs5/application_record.rb
+- app/service/bs5/collapse_service.rb
 - app/validators/style_validator.rb
 - app/views/bs5/examples/accordion/default/_example.html.erb
 - app/views/bs5/examples/accordion/default/snippet.html.erb
@@ -207,6 +208,9 @@ files:
 - app/views/bs5/examples/close_button/disabled/snippet.html.erb
 - app/views/bs5/examples/close_button/white/_example.html.erb
 - app/views/bs5/examples/close_button/white/snippet.html.erb
+- app/views/bs5/examples/collapse/default/_example.html.erb
+- app/views/bs5/examples/collapse/default/multiple_targets.html.erb
+- app/views/bs5/examples/collapse/default/snippet.html.erb
 - app/views/bs5/examples/list_group/actionable/_example.html.erb
 - app/views/bs5/examples/list_group/actionable/button.html.erb
 - app/views/bs5/examples/list_group/actionable/snippet.html.erb
@@ -240,6 +244,7 @@ files:
 - app/views/bs5/pages/breadcrumb.html.erb
 - app/views/bs5/pages/buttons.html.erb
 - app/views/bs5/pages/close_button.html.erb
+- app/views/bs5/pages/collapse.html.erb
 - app/views/bs5/pages/list_group.html.erb
 - app/views/bs5/pages/tooltips.html.erb
 - app/views/layouts/bs5/application.html.erb