bs5 0.0.25 → 0.0.26

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93ea7a16c5cb16edd48cabe938083b466af2171b895c9bfb7ca3da0e7bd9cf6a
-  data.tar.gz: 35bb524562a071eaf46e05da49b951e1606b27524f6e242d10be7a5cb6a4eeca
+  metadata.gz: 14b5dca44bb60e64b8eb925c7a617c2e7f6214bf33e1d35a44454b0fc617351c
+  data.tar.gz: 49dc980ff0a533774090543e1f8920c3ae7d4d4037c9fd84a5aa3425bb1a8faf
 SHA512:
-  metadata.gz: 011e84f5073b6cd7c6d9b3d2de76f077fedaeaa87f0e8c2aba6efa48457ffe271e8f3d589ec2b2d59eacccdf0a088e968921f3db682c1a846acb94e6ea7c2815
-  data.tar.gz: 66f86657bfd99ce53af4ea76123b72eed77454ed885b8c033a16fe6e579b67d20be9aa187a982687c80a80e49921577e107b249d081a8fa538b6bdbbef7080fc
+  metadata.gz: 2329cc993b4ab1d5930802dfab3f71d878843ce20ebc51bd861c488179e9c4f993b81e48bf1fca791af6886e735de751bbe4ae90f04e641249409e4bade1fc0f
+  data.tar.gz: ae01cfa6597d19ea0cacff53947b70f3ca8e4c0da463ede006ceef58268efa021a8851684bda0f1702db6a6092b15239fc9b633d62877bed44c2bf330e85b0dd

data/app/components/bs5/dropdown/item_component.html.erb

@@ -0,0 +1 @@
+<li><%= content || tag.hr(class: 'dropdown-divider') %></li>

data/app/components/bs5/dropdown/item_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Dropdown
+    class ItemComponent < ViewComponent::Base
+      private
+
+      def content
+        return nil if @content.blank?
+
+        if actionable_element?
+          set_actionable_element_class_names
+          actionable_element.to_html.html_safe # rubocop:disable Rails/OutputSafety
+        else
+          @content
+        end
+      end
+
+      def set_actionable_element_class_names
+        class_names = Array(actionable_element[:class])
+        class_names << 'dropdown-item'
+        actionable_element[:class] = class_names.join(' ')
+      end
+
+      def actionable_element
+        @actionable_element ||= begin
+          if (elements = Nokogiri::HTML::DocumentFragment.parse(@content).elements).one? &&
+             (element = elements.first).name.in?(%w[a button])
+            element
+          end
+        end
+      end
+
+      def actionable_element?
+        !!actionable_element
+      end
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+<% if split? %>
+  <% if dropstart? %>
+    <%= bs5_button_group do %>
+      <div class="<%= component_class %>">
+        <%= split_button_toggle %>
+        <%= menu_content %>
+      </div>
+      <%= split_button %>
+    <% end %>
+  <% else %>
+    <div class="<%= component_class %>">
+      <%= split_button %>
+      <%= split_button_toggle %>
+      <%= menu_content %>
+    </div>
+  <% end %>
+<% else %>
+  <div class="<%= component_class %>">
+    <%= single_button %>
+    <%= menu_content %>
+  </div>
+<% end %>

data/app/components/bs5/dropdown_component.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+module Bs5
+  class DropdownComponent < ViewComponent::Base # rubocop:disable Metrics/ClassLength
+    include ViewComponent::SlotableV2
+    include ComponentsHelper
+    using HashRefinement
+
+    CLASS_PREFIX = 'dropdown'
+    CLASS_NAMES = {
+      visually_hidden: 'visually-hidden',
+      toggle_split: "#{CLASS_PREFIX}-toggle-split",
+      toggle: "#{CLASS_PREFIX}-toggle",
+      menu: "#{CLASS_PREFIX}-menu",
+      menu_dark: "#{CLASS_PREFIX}-menu-dark",
+      menu_end: "#{CLASS_PREFIX}-menu-end"
+    }.freeze
+    DIRECTIONS = {
+      up: :dropup,
+      end: :dropend,
+      start: :dropstart
+    }.with_indifferent_access.freeze
+    DROPDOWN_OPTIONS = %i[offset flip boundary reference display].freeze
+
+    renders_many :items, Bs5::Dropdown::ItemComponent
+    attr_reader :title
+
+    def initialize(content_or_options = nil, options = {})
+      if content_or_options.is_a? Hash
+        @options = content_or_options.symbolize_keys
+      else
+        @title = content_or_options
+        @options = options.symbolize_keys
+      end
+
+      extract_options
+    end
+
+    private
+
+    def extract_options
+      @split = @options.delete(:split)
+      @dark = @options.delete(:dark)
+      @direction = @options.delete(:direction)
+      @align = @options.delete(:align)
+
+      extract_dropdown_options
+    end
+
+    def extract_dropdown_options
+      @dropdown_options = @options.extract!(*DROPDOWN_OPTIONS)
+    end
+
+    def split_button_toggle
+      bs5_button_tag(split_button_toggle_options) do
+        tag.span('Toggle Dropdown', class: CLASS_NAMES[:visually_hidden])
+      end
+    end
+
+    def split_button
+      bs5_button_tag title, split_button_options
+    end
+
+    def single_button
+      bs5_button_tag title, single_button_options
+    end
+
+    def menu_content
+      if items.any?
+        tag.ul(class: dropdown_menu_classes) { items.map(&method(:concat)) }
+      else
+        tag.div(content, class: dropdown_menu_classes)
+      end
+    end
+
+    def single_button_options
+      @options.merge(default_options)
+    end
+
+    def component_class
+      class_names = split? ? ['btn-group'] : [CLASS_PREFIX]
+      class_names << DIRECTIONS[@direction] if direction?
+
+      class_names.join(' ')
+    end
+
+    def split_button_options
+      @options.merge(default_button_options)
+    end
+
+    def split_button_toggle_options
+      single_button_options.dup.tap do |h|
+        h[:class] += " #{CLASS_NAMES[:toggle_split]}"
+      end
+    end
+
+    %i[split dark direction].each do |name|
+      define_method("#{name}?") do
+        !instance_variable_get("@#{name}").nil?
+      end
+    end
+
+    def dropstart?
+      @direction == :start
+    end
+
+    def default_button_options
+      { type: :button }
+    end
+
+    def default_options
+      default_button_options.merge({
+                                     data: default_data_options.merge(@dropdown_options).prefix_keys_with_bs,
+                                     aria: { expanded: false },
+                                     class: CLASS_NAMES[:toggle]
+                                   })
+    end
+
+    def default_data_options
+      { toggle: :dropdown }.tap do |h|
+        h[:display] = 'static' if responsive_align?
+      end
+    end
+
+    def dropdown_menu_classes
+      class_names = [CLASS_NAMES[:menu]]
+      class_names << CLASS_NAMES[:menu_dark] if dark?
+      class_names << align_classes
+
+      class_names.compact.join(' ')
+    end
+
+    def align_classes
+      case @align
+      when Symbol
+        CLASS_NAMES[:menu_end]
+      when Hash
+        responsive_align_classes
+      end
+    end
+
+    def responsive_align_classes
+      k, v = @align.first
+      class_names = ["#{CLASS_PREFIX}-menu-#{v}-#{k}"]
+      class_names << CLASS_NAMES[:menu_end] if @align.with_indifferent_access.key?(:start)
+
+      class_names
+    end
+
+    def responsive_align?
+      @align.is_a? Hash
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

@@ -2,8 +2,8 @@
 
 module Bs5
   module ComponentsHelper
-    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_group button_tag button_to button_toolbar
-                    list_group spinner toast toast_container].freeze
+    COMPONENTS = %w[accordion alert badge breadcrumb button_group button_tag button_to button_toolbar close_button
+                    dropdown list_group spinner toast toast_container].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|

data/app/views/bs5/examples/alert/color/snippet.html.erb

@@ -1,31 +1,15 @@
-<%= bs5_alert(color: :primary) do %>
-  A simple primary alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :primary) { "A simple primary alert—check it out!" } %>
 
-<%= bs5_alert(color: :secondary) do %>
-  A simple secondary alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :secondary) { "A simple secondary alert—check it out!" } %>
 
-<%= bs5_alert(color: :success) do %>
-  A simple success alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :success) { "A simple success alert—check it out!" } %>
 
-<%= bs5_alert(color: :danger) do %>
-  A simple danger alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :danger) { "A simple danger alert—check it out!" } %>
 
-<%= bs5_alert(color: :warning) do %>
-  A simple warning alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :warning) { "A simple warning alert—check it out!" } %>
 
-<%= bs5_alert(color: :info) do %>
-  A simple info alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :info) { "A simple info alert—check it out!" } %>
 
-<%= bs5_alert(color: :light) do %>
-  A simple light alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :light) { "A simple light alert—check it out!" } %>
 
-<%= bs5_alert(color: :dark) do %>
-  A simple dark alert—check it out!
-<%- end %>
+<%= bs5_alert(color: :dark) { "A simple dark alert—check it out!" } %>

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

@@ -1,3 +1 @@
-<%= bs5_alert do %>
-  A simple primary alert—check it out!
-<%- end %>
+<%= bs5_alert { "A simple primary alert—check it out!" } %>

data/app/views/bs5/examples/dropdowns/dark/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Dark dropdown</h2>
+<%= bs5_example(snippet: 'dropdowns/dark/snippet') %>

data/app/views/bs5/examples/dropdowns/dark/snippet.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_dropdown('Dropdown button', dark: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#', class: 'active' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/_example.html.erb

@@ -0,0 +1,7 @@
+<h2>Directions</h2>
+<h3>Dropup</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet1') %>
+<h3>Dropright</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet2') %>
+<h3>Dropleft</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet3') %>

data/app/views/bs5/examples/dropdowns/directions/snippet1.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop up', direction: :up) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropup', split: true, direction: :up) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/snippet2.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop end', direction: :end) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropend', split: true, direction: :end) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/snippet3.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop start', direction: :start) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropstart', split: true, direction: :start) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/_example.html.erb

@@ -0,0 +1,5 @@
+<h2>Menu alignment</h2>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet1') %>
+<h3>Responsive alignment</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet2') %>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet3') %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Right-aligned menu example', align: :end) do |d| %>
+  <%= d.item do %><%= button_tag 'Action' %><% end %>
+  <%= d.item do %><%= button_tag 'Another action' %><% end %>
+  <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet2.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Left-aligned but right aligned when large screen', align: { end: :lg }) do |d| %>
+    <%= d.item do %><%= button_tag 'Action' %><% end %>
+    <%= d.item do %><%= button_tag 'Another action' %><% end %>
+    <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet3.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Right-aligned but left aligned when large screen', align: { start: :lg }) do |d| %>
+    <%= d.item do %><%= button_tag 'Action' %><% end %>
+    <%= d.item do %><%= button_tag 'Another action' %><% end %>
+    <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/_example.html.erb

@@ -0,0 +1,9 @@
+<h2>Menu content</h2>
+<h3>Headers</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet1') %>
+<h3>Dividers</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet2') %>
+<h3>Text</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet3') %>
+<h3>Forms</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet4') %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><h6 class="dropdown-header">Dropdown header</h6><% end %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet2.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet3.html.erb

@@ -0,0 +1,10 @@
+<%= bs5_dropdown('Dropdown') do %>
+  <div class="p-4 text-muted" style="max-width: 200px;">
+    <p>
+      Some example text that's free-flowing within the dropdown menu.
+    </p>
+    <p class="mb-0">
+      And this is more example text.
+    </p>
+  </div>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet4.html.erb

@@ -0,0 +1,24 @@
+<%= bs5_dropdown('Dropdown') do %>
+  <form class="px-4 py-3">
+    <div class="mb-3">
+      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
+      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
+    </div>
+    <div class="mb-3">
+      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
+      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
+    </div>
+    <div class="mb-3">
+      <div class="form-check">
+        <input type="checkbox" class="form-check-input" id="dropdownCheck">
+        <label class="form-check-label" for="dropdownCheck">
+          Remember me
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Sign in</button>
+  </form>
+  <div class="dropdown-divider"></div>
+  <a class="dropdown-item" href="#">New around here? Sign up</a>
+  <a class="dropdown-item" href="#">Forgot password?</a>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/_example.html.erb

@@ -0,0 +1,7 @@
+<h2>Menu items</h2>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet2') %>
+<h3>Active</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet3') %>
+<h3>Disabled</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet4') %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= button_tag 'Action' %><% end %>
+  <%= d.item do %><%= button_tag 'Another action' %><% end %>
+  <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet2.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><span class="dropdown-item-text">Dropdown item text</span><% end %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet3.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Regular link', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Active link', '#', class: 'active' %><% end %>
+  <%= d.item do %><%= link_to 'Another link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet4.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Regular link', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Disabled link', '#', class: 'disabled' %><% end %>
+  <%= d.item do %><%= link_to 'Another link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/_example.html.erb

@@ -0,0 +1,4 @@
+<h3>Single button</h3>
+<%= bs5_example(snippet: 'dropdowns/single/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/single/snippet2') %>
+<%= bs5_example(snippet: 'dropdowns/single/snippet3') %>

data/app/views/bs5/examples/dropdowns/single/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown button') do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/snippet2.html.erb

@@ -0,0 +1,47 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Primary', color: :primary) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Secondary', color: :secondary) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Success', color: :success) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Info', color: :info) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Warning', color: :warning) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Danger', color: :danger) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/snippet3.html.erb

@@ -0,0 +1,47 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Primary', color: :primary, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Secondary', color: :secondary, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Success', color: :success, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Info', color: :info, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Warning', color: :warning, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Danger', color: :danger, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<h2>Sizing</h2>
+<%= bs5_example(snippet: 'dropdowns/sizing/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/sizing/snippet2') %>

data/app/views/bs5/examples/dropdowns/sizing/snippet1.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Large button', size: :large) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Large button', split: true, size: :large) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/sizing/snippet2.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Small button', size: :small) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Small button', split: true, size: :small) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/split/_example.html.erb

@@ -0,0 +1,3 @@
+<h3>Split button</h3>
+<%= bs5_example(snippet: 'dropdowns/split/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/split/snippet2') %>

data/app/views/bs5/examples/dropdowns/split/snippet1.html.erb

@@ -0,0 +1,35 @@
+<%= bs5_dropdown('Primary', split: true, color: :primary) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Secondary', split: true, color: :secondary) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Success', split: true, color: :success) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Info', split: true, color: :info) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Warning', split: true, color: :warning) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Danger', split: true, color: :danger) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/split/snippet2.html.erb

@@ -0,0 +1,47 @@
+<%= bs5_dropdown('Primary', split: true, color: :primary, outline: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Secondary', split: true, color: :secondary, outline: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Success', split: true, color: :success, outline: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Info', split: true, color: :info, outline: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Warning', split: true, color: :warning, outline: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Danger', split: true, color: :danger, outline: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/list_group/active/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.item(active: true) do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
-  <% lg.item do %>Porta ac consectetur ac<% end %>
-  <% lg.item do %>Vestibulum at eros<% end %>
+  <% lg.item(active: true) { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
+  <% lg.item { "Porta ac consectetur ac" } %>
+  <% lg.item { "Vestibulum at eros" } %>
 <%- end %>

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

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
-  <% lg.item do %>Porta ac consectetur ac<% end %>
-  <% lg.item do %>Vestibulum at eros<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
+  <% lg.item { "Porta ac consectetur ac" } %>
+  <% lg.item { "Vestibulum at eros" } %>
 <%- end %>

data/app/views/bs5/examples/list_group/disabled/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.item(disabled: true) do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
-  <% lg.item do %>Porta ac consectetur ac<% end %>
-  <% lg.item do %>Vestibulum at eros<% end %>
+  <% lg.item(disabled: true) { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
+  <% lg.item { "Porta ac consectetur ac" } %>
+  <% lg.item { "Vestibulum at eros" } %>
 <%- end %>

data/app/views/bs5/examples/list_group/flush/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group(flush: true) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
-  <% lg.item do %>Porta ac consectetur ac<% end %>
-  <% lg.item do %>Vestibulum at eros<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
+  <% lg.item { "Porta ac consectetur ac" } %>
+  <% lg.item { "Vestibulum at eros" } %>
 <%- end %>

data/app/views/bs5/examples/list_group/horizontal/snippet.html.erb

@@ -1,30 +1,30 @@
 <%= bs5_list_group(horizontal: true) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :sm) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :md) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :lg) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :xl) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :xxl) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>

data/app/views/bs5/examples/list_group/style/default.html.erb

@@ -1,11 +1,11 @@
 <%= bs5_list_group do |lg| %>
   <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item(color: :primary) do %>A simple primary list group item<% end %>
-  <% lg.item(color: :secondary) do %>A simple secondary list group item<% end %>
-  <% lg.item(color: :success) do %>A simple success list group item<% end %>
-  <% lg.item(color: :danger) do %>A simple danger list group item<% end %>
-  <% lg.item(color: :warning) do %>A simple warning list group item<% end %>
-  <% lg.item(color: :info) do %>A simple info list group item<% end %>
-  <% lg.item(color: :light) do %>A simple light list group item<% end %>
-  <% lg.item(color: :dark) do %>A simple dark list group item<% end %>
+  <% lg.item(color: :primary) { "A simple primary list group item" } %>
+  <% lg.item(color: :secondary) { "A simple secondary list group item" } %>
+  <% lg.item(color: :success) { "A simple success list group item" } %>
+  <% lg.item(color: :danger) { "A simple danger list group item" } %>
+  <% lg.item(color: :warning) { "A simple warning list group item" } %>
+  <% lg.item(color: :info) { "A simple info list group item" } %>
+  <% lg.item(color: :light) { "A simple light list group item" } %>
+  <% lg.item(color: :dark) { "A simple dark list group item" } %>
 <%- end %>

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

@@ -13,5 +13,5 @@
     <strong class="me-auto">Bootstrap</strong>
     <small>11 mins ago</small>
   <% end %>
-  <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <%= t.body { "Hello, world! This is a toast message." } %>
 <% end %>

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

@@ -0,0 +1,10 @@
+<h1>Dropdowns</h1>
+<h2>Examples</h2>
+<%= render 'bs5/examples/dropdowns/single/example' %>
+<%= render 'bs5/examples/dropdowns/split/example' %>
+<%= render 'bs5/examples/dropdowns/sizing/example' %>
+<%= render 'bs5/examples/dropdowns/dark/example' %>
+<%= render 'bs5/examples/dropdowns/directions/example' %>
+<%= render 'bs5/examples/dropdowns/menu_items/example' %>
+<%= render 'bs5/examples/dropdowns/menu_alignment/example' %>
+<%= render 'bs5/examples/dropdowns/menu_content/example' %>

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

@@ -22,6 +22,7 @@
             <% lg.item(active: current_page?(pages_path('button_group'))) do %><%= link_to 'Button group', pages_path('button_group') %><% end %>
             <% lg.item(active: current_page?(pages_path('close_button'))) do %><%= link_to 'Close button', pages_path('close_button') %><% end %>
             <% lg.item(active: current_page?(pages_path('collapse'))) do %><%= link_to 'Collapse', pages_path('collapse') %><% end %>
+            <% lg.item(active: current_page?(pages_path('dropdowns'))) do %><%= link_to 'Dropdowns', pages_path('dropdowns') %><% end %>
             <% lg.item(active: current_page?(pages_path('list_group'))) do %><%= link_to 'List group', pages_path('list_group') %><% end %>
             <% lg.item(active: current_page?(pages_path('popovers'))) do %><%= link_to 'Popovers', pages_path('popovers') %><% end %>
             <% lg.item(active: current_page?(pages_path('spinners'))) do %><%= link_to 'Spinners', pages_path('spinners') %><% end %>

data/lib/bs5/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.25
+  version: 0.0.26
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-20 00:00:00.000000000 Z
+date: 2020-12-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -143,6 +143,10 @@ files:
 - 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/dropdown/item_component.html.erb
+- app/components/bs5/dropdown/item_component.rb
+- app/components/bs5/dropdown_component.html.erb
+- app/components/bs5/dropdown_component.rb
 - app/components/bs5/example_component.html.erb
 - app/components/bs5/example_component.rb
 - app/components/bs5/list_group_component.html.erb
@@ -224,6 +228,36 @@ files:
 - 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/dropdowns/dark/_example.html.erb
+- app/views/bs5/examples/dropdowns/dark/snippet.html.erb
+- app/views/bs5/examples/dropdowns/directions/_example.html.erb
+- app/views/bs5/examples/dropdowns/directions/snippet1.html.erb
+- app/views/bs5/examples/dropdowns/directions/snippet2.html.erb
+- app/views/bs5/examples/dropdowns/directions/snippet3.html.erb
+- app/views/bs5/examples/dropdowns/menu_alignment/_example.html.erb
+- app/views/bs5/examples/dropdowns/menu_alignment/snippet1.html.erb
+- app/views/bs5/examples/dropdowns/menu_alignment/snippet2.html.erb
+- app/views/bs5/examples/dropdowns/menu_alignment/snippet3.html.erb
+- app/views/bs5/examples/dropdowns/menu_content/_example.html.erb
+- app/views/bs5/examples/dropdowns/menu_content/snippet1.html.erb
+- app/views/bs5/examples/dropdowns/menu_content/snippet2.html.erb
+- app/views/bs5/examples/dropdowns/menu_content/snippet3.html.erb
+- app/views/bs5/examples/dropdowns/menu_content/snippet4.html.erb
+- app/views/bs5/examples/dropdowns/menu_items/_example.html.erb
+- app/views/bs5/examples/dropdowns/menu_items/snippet1.html.erb
+- app/views/bs5/examples/dropdowns/menu_items/snippet2.html.erb
+- app/views/bs5/examples/dropdowns/menu_items/snippet3.html.erb
+- app/views/bs5/examples/dropdowns/menu_items/snippet4.html.erb
+- app/views/bs5/examples/dropdowns/single/_example.html.erb
+- app/views/bs5/examples/dropdowns/single/snippet1.html.erb
+- app/views/bs5/examples/dropdowns/single/snippet2.html.erb
+- app/views/bs5/examples/dropdowns/single/snippet3.html.erb
+- app/views/bs5/examples/dropdowns/sizing/_example.html.erb
+- app/views/bs5/examples/dropdowns/sizing/snippet1.html.erb
+- app/views/bs5/examples/dropdowns/sizing/snippet2.html.erb
+- app/views/bs5/examples/dropdowns/split/_example.html.erb
+- app/views/bs5/examples/dropdowns/split/snippet1.html.erb
+- app/views/bs5/examples/dropdowns/split/snippet2.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
@@ -299,6 +333,7 @@ files:
 - 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/dropdowns.html.erb
 - app/views/bs5/pages/list_group.html.erb
 - app/views/bs5/pages/popovers.html.erb
 - app/views/bs5/pages/spinners.html.erb