bs5 0.0.13 → 0.0.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b63f00444e32de97ae7167d85ab798ec58085c325730e18a48d21bdde8a8de89
-  data.tar.gz: 2a8ab48a4bd4fe50a629868448315c3ef9d641ef7b30cdb189db8e95015ddd38
+  metadata.gz: 7e7ed0ecd3b82a680eae723045c2c24020920a4942b4dfa5460951042be2a5c1
+  data.tar.gz: 4217f3cd7e572d702deb22988f772c0653da8709c39c8a2bff3796747990a4b0
 SHA512:
-  metadata.gz: 94fc5dc2aab1bb53e3155d14acfdf889ef58d3aee2e03fa8a9620fd2e3379bfd48d0c453c9c42f22a826457b8f7fb7edc0274c0db54c6437ecf901dd6f371e6e
-  data.tar.gz: e3cf1bbf76474375de657c37ecc3395d51993dc33cac54240014769b58b63dc466bc3e1c669f7f3500ba966de17cb17a4799cb902057d1ae39660ab6a5300c41
+  metadata.gz: 3e520e4f93b185a7aa46cba4bf5c43b24655c03b8d75576eca3edf2b6740e0384caff3b413e9a3b18abadfda4edf1464be4ea4fb21eb66a67617b0f5268ed49c
+  data.tar.gz: 38fd799067d2148b0cd44f323dc41d0a4130771edc2e8de6fade8af6aaab4f2a19c22d5dba6abc77f84d1189a9e6f5529c471f903796f07dc47cc40dab769b2a

data/README.md

@@ -32,7 +32,7 @@ $ gem install bs5
 
 Run the following command to setup your project to use Bootstrap 5.
 
-    $ rails generate bs5:install
+    $ bin/rails generate bs5:install
 
 ## Contributing
 

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

@@ -6,22 +6,15 @@
           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 %>"
           class="<%= item.collapse_class %>"
           aria-labelledby="<%= item.header_id %>"
-          data-parent="#<%= id %>"
+          data-bs-parent="#<%= id %>"
         >
           <div class="accordion-body">
             <%= item.content %>

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/components/bs5/alert_component.html.erb

@@ -1,6 +1,6 @@
 <div class="<%= component_class %>" role="alert">
   <%= content %>
   <%- if is_dismissable %>
-    <%= render Bs5::CloseButtonComponent.new(data: { dismiss: :alert }) %>
+    <%= render Bs5::CloseButtonComponent.new(data: { 'bs-dismiss': :alert }) %>
   <%- end %>
 </div>

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

@@ -0,0 +1,3 @@
+<%= tag.div(component_attributes) do %>
+  <%= content %>
+<% end %>

data/app/components/bs5/button_group_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ButtonGroupComponent < ViewComponent::Base
+    SIZES = { small: :sm, large: :lg }.with_indifferent_access.freeze
+    CLASS_PREFIX = 'btn-group'
+
+    attr_reader :vertical, :size
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      @vertical = @options.delete(:vertical)
+      @size = @options.delete(:size)
+    end
+
+    def render?
+      content.present?
+    end
+
+    def component_attributes
+      default_options = { role: 'group' }
+      @options[:class] = component_class
+      @options.merge(default_options)
+    end
+
+    private
+
+    def component_class
+      class_names = Array(@options[:class])
+      class_names << vertical_class
+      class_names << size_class
+      class_names
+    end
+
+    def vertical_class
+      @vertical ? "#{CLASS_PREFIX}-vertical" : CLASS_PREFIX
+    end
+
+    def size_class
+      return unless size?
+
+      [CLASS_PREFIX, SIZES[size]].join('-')
+    end
+
+    def size?
+      !!size
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= tag.div(component_attributes) do %>
+  <%= content %>
+<% end %>

data/app/components/bs5/button_toolbar_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ButtonToolbarComponent < ViewComponent::Base
+    def initialize(options = {})
+      @options = options
+    end
+
+    def render?
+      content.present?
+    end
+
+    def component_attributes
+      default_options = { role: 'toolbar' }
+      @options[:class] = Array(@options[:class])
+      @options[:class] << 'btn-toolbar'
+
+      @options.merge(default_options)
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

@@ -2,7 +2,8 @@
 
 module Bs5
   module ComponentsHelper
-    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to list_group].freeze
+    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_group button_tag button_to button_toolbar
+                    list_group].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|
@@ -11,13 +12,16 @@ module Bs5
       end
     end
 
-    def bs5_tooltip(title, options = nil)
-      default_options = { toggle: :tooltip }
-      options = Hash(options).symbolize_keys.merge(default_options)
-      {
-        title: title,
-        data: options
-      }
+    def bs5_tooltip(*args)
+      TooltipService.new(*args).to_hash
+    end
+
+    def bs5_popover(*args)
+      PopoverService.new(*args).to_hash
+    end
+
+    def bs5_collapse(*args)
+      CollapseService.new(*args).to_hash
     end
 
     private

data/app/service/bs5/collapse_service.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Bs5
+  class CollapseService
+    using HashRefinement
+
+    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.prefix_keys_with_bs
+    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/service/bs5/popover_service.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Bs5
+  class PopoverService
+    using HashRefinement
+
+    attr_reader :title
+
+    def initialize(options = {})
+      @title = options.delete(:title)
+      @options = options
+    end
+
+    def to_hash
+      {
+        title: title,
+        data: options
+      }.compact
+    end
+
+    private
+
+    def options
+      @options.symbolize_keys.merge(default_options).prefix_keys_with_bs
+    end
+
+    def default_options
+      { toggle: :popover }
+    end
+  end
+end

data/app/service/bs5/tooltip_service.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Bs5
+  class TooltipService
+    using HashRefinement
+
+    attr_reader :title
+
+    def initialize(title, options = {})
+      @title = title
+      @options = options
+    end
+
+    def to_hash
+      {
+        title: title,
+        data: options
+      }
+    end
+
+    private
+
+    def options
+      @options.symbolize_keys.merge(default_options).prefix_keys_with_bs
+    end
+
+    def default_options
+      { toggle: :tooltip }
+    end
+  end
+end

data/app/views/bs5/examples/button_group/button_toolbar/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Button toolbar</h2>
+<%= bs5_example(snippet: 'button_group/button_toolbar/snippet') %>
+<%= bs5_example(snippet: 'button_group/button_toolbar/snippet2') %>

data/app/views/bs5/examples/button_group/button_toolbar/snippet.html.erb

@@ -0,0 +1,18 @@
+<%= bs5_button_toolbar(aria: { label: 'Toolbar with button groups' }) do %>
+  <%= bs5_button_group(class: 'me-2', aria: { label: 'First group' }) do %>
+    <%= bs5_button_tag('1', type: 'button') %>
+    <%= bs5_button_tag('2', type: 'button') %>
+    <%= bs5_button_tag('3', type: 'button') %>
+    <%= bs5_button_tag('4', type: 'button') %>
+  <% end %>
+
+  <%= bs5_button_group(class: 'me-2', aria: { label: 'Second group' }) do %>
+    <%= bs5_button_tag('5', type: 'button', style: :secondary) %>
+    <%= bs5_button_tag('6', type: 'button', style: :secondary) %>
+    <%= bs5_button_tag('7', type: 'button', style: :secondary) %>
+  <% end %>
+
+  <%= bs5_button_group(aria: { label: 'Third group' }) do %>
+    <%= bs5_button_tag('8', type: 'button', style: :info) %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/button_group/button_toolbar/snippet2.html.erb

@@ -0,0 +1,27 @@
+<%= bs5_button_toolbar(class: 'mb-3', aria: { label: 'Toolbar with button groups' }) do %>
+  <%= bs5_button_group(class: 'me-2', aria: { label: 'First group' }) do %>
+    <%= bs5_button_tag('1', type: 'button', outline: true, style: :secondary) %>
+    <%= bs5_button_tag('2', type: 'button', outline: true, style: :secondary) %>
+    <%= bs5_button_tag('3', type: 'button', outline: true, style: :secondary) %>
+    <%= bs5_button_tag('4', type: 'button', outline: true, style: :secondary) %>
+  <% end %>
+
+  <div class="input-group">
+    <div class="input-group-text" id="btnGroupAddon">@</div>
+    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
+  </div>
+<% end %>
+
+<%= bs5_button_toolbar(class: 'justify-content-between', aria: { label: 'Toolbar with button groups' }) do %>
+  <%= bs5_button_group(aria: { label: 'First group' }) do %>
+    <%= bs5_button_tag('1', type: 'button', outline: true, style: :secondary) %>
+    <%= bs5_button_tag('2', type: 'button', outline: true, style: :secondary) %>
+    <%= bs5_button_tag('3', type: 'button', outline: true, style: :secondary) %>
+    <%= bs5_button_tag('4', type: 'button', outline: true, style: :secondary) %>
+  <% end %>
+
+  <div class="input-group">
+    <div class="input-group-text" id="btnGroupAddon2">@</div>
+    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
+  </div>
+<% end %>

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

@@ -0,0 +1,2 @@
+<h2>Basic example</h2>
+<%= bs5_example(snippet: 'button_group/default/snippet') %>

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

@@ -0,0 +1,5 @@
+<%= bs5_button_group(aria: { label: 'Basic example' }) do %>
+  <%= bs5_button_tag('Left', type: 'button') %>
+  <%= bs5_button_tag('Middle', type: 'button') %>
+  <%= bs5_button_tag('Right', type: 'button') %>
+<% end %>

data/app/views/bs5/examples/button_group/sizing/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Sizing</h2>
+<%= bs5_example(snippet: 'button_group/sizing/snippet') %>

data/app/views/bs5/examples/button_group/sizing/snippet.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group(size: 'large', class: 'mb-2', aria: { label: 'Large button group' }) do %>
+  <%= bs5_button_tag('Left', type: 'button', style: :dark, outline: true) %>
+  <%= bs5_button_tag('Middle', type: 'button', style: :dark, outline: true) %>
+  <%= bs5_button_tag('Right', type: 'button', style: :dark, outline: true) %>
+<% end %>
+<br/>
+<%= bs5_button_group(class: 'mb-2', aria: { label: 'Default button group' }) do %>
+  <%= bs5_button_tag('Left', type: 'button', style: :dark, outline: true) %>
+  <%= bs5_button_tag('Middle', type: 'button', style: :dark, outline: true) %>
+  <%= bs5_button_tag('Right', type: 'button', style: :dark, outline: true) %>
+<% end %>
+<br/>
+<%= bs5_button_group(size: :small, aria: { label: 'Small button group' }) do %>
+  <%= bs5_button_tag('Left', type: 'button', style: :dark, outline: true) %>
+  <%= bs5_button_tag('Middle', type: 'button', style: :dark, outline: true) %>
+  <%= bs5_button_tag('Right', type: 'button', style: :dark, outline: true) %>
+<% end %>

data/app/views/bs5/examples/button_group/vertical/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Vertical variation</h2>
+<%= bs5_example(snippet: 'button_group/vertical/snippet') %>

data/app/views/bs5/examples/button_group/vertical/snippet.html.erb

@@ -0,0 +1,8 @@
+<%= bs5_button_group(vertical: :true, aria: { label: 'Vertical button group' }) do %>
+  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
+<% 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/examples/popovers/default/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Example</h2>
+<%= bs5_example(snippet: 'popovers/default/snippet') %>

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

@@ -0,0 +1 @@
+<%= bs5_button_tag('Click to toggle popover', bs5_popover(title: 'Popover title', content: "And here's some amazing content. It's very engaging. Right?").merge(type: 'button', style: :danger, size: :large)) %>

data/app/views/bs5/examples/popovers/disabled_elements/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Disabled elements</h2>
+<%= bs5_example(snippet: 'popovers/disabled_elements/snippet') %>

data/app/views/bs5/examples/popovers/disabled_elements/snippet.html.erb

@@ -0,0 +1,3 @@
+<%= tag.span(bs5_popover(content: 'Disabled popover').merge(class: 'd-inline-block')) do %>
+  <%= bs5_button_tag('Disabled button', disabled: true) %>
+<% end %>

data/app/views/bs5/examples/popovers/dismissable_on_next_click/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Dismissable on next click</h2>
+<%= bs5_example(snippet: 'popovers/dismissable_on_next_click/snippet') %>

data/app/views/bs5/examples/popovers/dismissable_on_next_click/snippet.html.erb

@@ -0,0 +1 @@
+<%= tag.a 'Dismissible popover', bs5_popover(title: 'Dismissible popover', content: "And here's some amazing content. It's very engaging. Right?", trigger: :focus).merge(class: 'btn btn-lg btn-danger', role: :button, tabindex: 0) %>

data/app/views/bs5/examples/popovers/four_directions/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Four directions</h2>
+<%= bs5_example(snippet: 'popovers/four_directions/snippet') %>

data/app/views/bs5/examples/popovers/four_directions/snippet.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_tag('Popover on top', bs5_popover(content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", container: :body, placement: :top).merge(type: 'button', style: :secondary)) %>
+
+<%= bs5_button_tag('Popover on right', bs5_popover(content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", container: :body, placement: :right).merge(type: 'button', style: :secondary)) %>
+
+<%= bs5_button_tag('Popover on bottom', bs5_popover(content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", container: :body, placement: :bottom).merge(type: 'button', style: :secondary)) %>
+
+<%= bs5_button_tag('Popover on left', bs5_popover(content: "Vivamus sagittis lacus vel augue laoreet rutrum faucibus.", container: :body, placement: :left).merge(type: 'button', style: :secondary)) %>

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

@@ -0,0 +1,5 @@
+<h1>Button group</h1>
+<%= render 'bs5/examples/button_group/default/example' %>
+<%= render 'bs5/examples/button_group/button_toolbar/example' %>
+<%= render 'bs5/examples/button_group/sizing/example' %>
+<%= render 'bs5/examples/button_group/vertical/example' %>

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

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

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

@@ -0,0 +1,5 @@
+<h1>Popovers</h1>
+<%= render 'bs5/examples/popovers/default/example' %>
+<%= render 'bs5/examples/popovers/four_directions/example' %>
+<%= render 'bs5/examples/popovers/dismissable_on_next_click/example' %>
+<%= render 'bs5/examples/popovers/disabled_elements/example' %>

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

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Bs5</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   <%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
   <style><%= Rouge::Themes::Github.render(scope: '.highlight') %></style>

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

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Bs5</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   <%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
   <style><%= Rouge::Themes::Github.render(scope: '.highlight') %></style>
@@ -17,8 +18,11 @@
             <% lg.slot(:item, active: current_page?(pages_path('badge'))) do %><%= link_to 'Badge', pages_path('badge') %><% end %>
             <% 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('button_group'))) do %><%= link_to 'Button group', pages_path('button_group') %><% 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('popovers'))) do %><%= link_to 'Popovers', pages_path('popovers') %><% end %>
             <% lg.slot(:item, active: current_page?(pages_path('tooltips'))) do %><%= link_to 'Tooltips', pages_path('tooltips') %><% end %>
           <%- end %>
         </div>

data/config/initializers/hash_refinement.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module HashRefinement
+  refine Hash do
+    def prefix_keys_with_bs
+      transform_keys! { |k| "bs_#{k}".to_sym }
+    end
+  end
+end

data/lib/bs5/version.rb

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

data/lib/generators/bs5/install/install_generator.rb

@@ -5,7 +5,7 @@ module Bs5
     source_root File.expand_path('templates', __dir__)
 
     def add_bootstrap # rubocop:disable Metrics/MethodLength
-      run 'yarn add bootstrap@next popper.js'
+      run 'yarn add bootstrap@next @popperjs/core'
 
       create_file 'app/javascript/packs/styles.scss', <<~HEREDOC
         @import "~bootstrap/scss/bootstrap";
@@ -24,6 +24,7 @@ module Bs5
       inject_into_file 'app/views/layouts/application.html.erb', before: '</head>' do
         <<~HEREDOC
           <%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
+          <meta name="viewport" content="width=device-width, initial-scale=1">
         HEREDOC
       end
 

data/lib/generators/bs5/install/templates/bs5.js

@@ -2,13 +2,23 @@ import * as bootstrap from "bootstrap";
 
 function tooltipify() {
   const tooltipTriggerList = [].slice.call(
-    document.querySelectorAll('[data-toggle="tooltip"]')
+    document.querySelectorAll('[data-bs-toggle="tooltip"]')
   );
   tooltipTriggerList.map(function (tooltipTriggerEl) {
     return new bootstrap.Tooltip(tooltipTriggerEl);
   });
 }
 
+function popoverify() {
+  const popoverTriggerList = [].slice.call(
+    document.querySelectorAll('[data-bs-toggle="popover"]')
+  );
+  popoverTriggerList.map(function (popoverTriggerEl) {
+    return new bootstrap.Popover(popoverTriggerEl);
+  });
+}
+
 export function start() {
+  popoverify();
   tooltipify();
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.13
+  version: 0.0.18
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-06 00:00:00.000000000 Z
+date: 2020-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -148,8 +148,12 @@ files:
 - app/components/bs5/badge_component.rb
 - app/components/bs5/breadcrumb_component.html.erb
 - app/components/bs5/breadcrumb_component.rb
+- app/components/bs5/button_group_component.html.erb
+- app/components/bs5/button_group_component.rb
 - app/components/bs5/button_tag_component.rb
 - app/components/bs5/button_to_component.rb
+- app/components/bs5/button_toolbar_component.html.erb
+- app/components/bs5/button_toolbar_component.rb
 - app/components/bs5/close_button_component.html.erb
 - app/components/bs5/close_button_component.rb
 - app/components/bs5/example_component.html.erb
@@ -162,6 +166,9 @@ 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/service/bs5/popover_service.rb
+- app/service/bs5/tooltip_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
@@ -183,6 +190,15 @@ files:
 - app/views/bs5/examples/badge/style/snippet.html.erb
 - app/views/bs5/examples/breadcrumb/default/_example.html.erb
 - app/views/bs5/examples/breadcrumb/default/snippet.html.erb
+- app/views/bs5/examples/button_group/button_toolbar/_example.html.erb
+- app/views/bs5/examples/button_group/button_toolbar/snippet.html.erb
+- app/views/bs5/examples/button_group/button_toolbar/snippet2.html.erb
+- app/views/bs5/examples/button_group/default/_example.html.erb
+- app/views/bs5/examples/button_group/default/snippet.html.erb
+- app/views/bs5/examples/button_group/sizing/_example.html.erb
+- app/views/bs5/examples/button_group/sizing/snippet.html.erb
+- app/views/bs5/examples/button_group/vertical/_example.html.erb
+- app/views/bs5/examples/button_group/vertical/snippet.html.erb
 - app/views/bs5/examples/buttons/button_tag/block_buttons/_example.html.erb
 - app/views/bs5/examples/buttons/button_tag/block_buttons/block_buttons.html.erb
 - app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_1.html.erb
@@ -207,6 +223,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
@@ -230,6 +249,14 @@ files:
 - app/views/bs5/examples/list_group/style/default.html.erb
 - app/views/bs5/examples/list_group/with_badges/_example.html.erb
 - app/views/bs5/examples/list_group/with_badges/default.html.erb
+- app/views/bs5/examples/popovers/default/_example.html.erb
+- app/views/bs5/examples/popovers/default/snippet.html.erb
+- app/views/bs5/examples/popovers/disabled_elements/_example.html.erb
+- app/views/bs5/examples/popovers/disabled_elements/snippet.html.erb
+- app/views/bs5/examples/popovers/dismissable_on_next_click/_example.html.erb
+- app/views/bs5/examples/popovers/dismissable_on_next_click/snippet.html.erb
+- app/views/bs5/examples/popovers/four_directions/_example.html.erb
+- app/views/bs5/examples/popovers/four_directions/snippet.html.erb
 - app/views/bs5/examples/tooltips/default/_example.html.erb
 - app/views/bs5/examples/tooltips/default/buttons.html.erb
 - app/views/bs5/examples/tooltips/default/disabled_elements.html.erb
@@ -238,13 +265,17 @@ files:
 - app/views/bs5/pages/alert.html.erb
 - app/views/bs5/pages/badge.html.erb
 - app/views/bs5/pages/breadcrumb.html.erb
+- app/views/bs5/pages/button_group.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/popovers.html.erb
 - app/views/bs5/pages/tooltips.html.erb
 - app/views/layouts/bs5/application.html.erb
 - app/views/layouts/bs5/pages.html.erb
 - config/definitions.rb
+- config/initializers/hash_refinement.rb
 - config/locales/en.yml
 - config/routes.rb
 - lib/bs5.rb