bs5 0.0.12 → 0.0.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 74aab58d89e345e58ed93c1960217477600d6c0bb9c3e9af1dcb3b3542ec55f0
-  data.tar.gz: 79c1ddc04689b15bb773de0b99751045f30ffb101acd8ed62e8d816263723f8d
+  metadata.gz: 22c6a9e55865f643c0c955fa134144831a0e1aa3d68f9487757a2406429707fd
+  data.tar.gz: 94f28cbdc41c9f5cc4a223779247521659d66b0ac82aa9756bc37cbb1f73c45c
 SHA512:
-  metadata.gz: 623342435dddb84001b2d70dfd1abc6cf6088b278d2f7c8deb0b11793778fcfcb7e531f5e6c32dcb18865ce918d5bb7a209496577ae486e85304e0d98fc590f3
-  data.tar.gz: ba822b14f63cce1ea2be57273aef6014618d1cdab09050a6e842ac8719bf68f7d40b5f04d8a27991f7905700fe35a30b75640d805460599242449b9b7d36cbf6
+  metadata.gz: 7b08a72d089dba1ac047006893c765deac278eb925c5ace940882708af292e306a5f69ee71062493d120a1bc3be347a729113d0cb4c486cf8bd899918b4c5247
+  data.tar.gz: bc39e72b8af466e92f006ce3833aa1610c294959bba9a4201d581fa4aa4839f2ec6fa841db203a6adee60c7dcffe5872697a87d9be3ee2f27014d21741de1354

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/list_group_component.html.erb

@@ -0,0 +1,17 @@
+<% if items.any? %>
+  <% if actionables? %>
+    <div class="<%= component_class %>">
+      <% items.each do |item| %>
+        <%= item.decorated_content %>
+      <% end %>
+    </div>
+  <% else %>
+    <ul class="<%= component_class %>">
+      <% items.each do |item| %>
+        <%= tag.li(**item.options) do %>
+          <%= item.content %>
+        <% end %>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/app/components/bs5/list_group_component.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ListGroupComponent < ViewComponent::Base
+    CLASS_NAME_BASE = 'list-group'
+    CLASS_NAME_FLUSH = "#{CLASS_NAME_BASE}-flush"
+    CLASS_NAME_HORIZONTAL = "#{CLASS_NAME_BASE}-horizontal"
+
+    include ViewComponent::Slotable
+
+    with_slot :item, collection: true, class_name: 'Item'
+
+    def initialize(flush: false, horizontal: false)
+      @flush = flush
+      @horizontal = horizontal
+    end
+
+    private
+
+    def flush?
+      !!@flush
+    end
+
+    def actionables?
+      items.any?(&:actionable?)
+    end
+
+    def horizontal?
+      !!@horizontal
+    end
+
+    def component_class
+      class_names = [CLASS_NAME_BASE]
+      class_names << flush_class
+      class_names << horizontal_class
+      class_names.join(' ')
+    end
+
+    def flush_class
+      CLASS_NAME_FLUSH if flush?
+    end
+
+    def horizontal_class
+      return unless horizontal?
+
+      class_names = [CLASS_NAME_HORIZONTAL]
+      class_names << @horizontal if @horizontal.in?(%i[sm md lg xl xxl])
+      class_names.join('-')
+    end
+
+    class Item < ViewComponent::Slot
+      CLASS_NAME_BASE = 'list-group-item'
+      CLASS_NAME_ACTION = "#{CLASS_NAME_BASE}-action"
+
+      attr_reader :options
+
+      def initialize(options = {})
+        @options = options.symbolize_keys
+
+        @active = @options.delete(:active) || false
+        @disabled = @options.delete(:disabled) || false
+        @style = @options.delete(:style)
+
+        set_attributes
+      end
+
+      def actionable?
+        !!actionable_element
+      end
+
+      def actionable_element
+        @actionable_element ||= begin
+          if (elements = Nokogiri::HTML::DocumentFragment.parse(content).elements).one? &&
+             (element = elements.first).name.in?(%w[a button label])
+            element
+          end
+        end
+      end
+
+      def decorated_content
+        set_actionable_element_attributes
+        actionable_element.to_html.html_safe # rubocop:disable Rails/OutputSafety
+      end
+
+      private
+
+      def set_actionable_element_class_names
+        class_names = Array(actionable_element[:class])
+        class_names << item_classes
+        class_names << CLASS_NAME_ACTION if actionable_element.name.in?(%w[a button])
+        actionable_element[:class] = class_names.join(' ')
+      end
+
+      def set_actionable_element_attributes
+        set_actionable_element_class_names
+        actionable_element['aria-current'] = true if active?
+
+        return unless disabled?
+
+        case actionable_element.name
+        when 'a'
+          actionable_element['aria-disabled'] = true
+          actionable_element['tabindex'] = -1
+        when 'button'
+          actionable_element['disabled'] = ''
+        end
+      end
+
+      def set_attributes
+        @options[:class] = Array(@options[:class])
+        @options[:class] << item_classes
+        @options[:aria] ||= {}
+        @options[:aria][:current] = true if active?
+        @options[:aria][:disabled] = true if disabled?
+      end
+
+      def item_classes
+        class_names = [CLASS_NAME_BASE]
+        class_names << 'active' if active?
+        class_names << 'disabled' if disabled?
+        class_names << contextual_class if style?
+
+        class_names
+      end
+
+      def active?
+        !!@active
+      end
+
+      def disabled?
+        !!@disabled
+      end
+
+      def style?
+        !!@style
+      end
+
+      def contextual_class
+        [CLASS_NAME_BASE, @style].join('-')
+      end
+    end
+  end
+end

data/app/controllers/bs5/pages_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_dependency 'bs5/application_controller'
+
+module Bs5
+  class PagesController < ApplicationController
+    def show
+      render template: "bs5/pages/#{params[:page]}"
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

@@ -2,7 +2,7 @@
 
 module Bs5
   module ComponentsHelper
-    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to].freeze
+    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to list_group].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|
@@ -11,13 +11,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/accordion/default/_example.html.erb

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

data/app/views/bs5/examples/accordion/flush/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>Flush</h3>
+<h2>Flush</h2>
 <%= bs5_example(snippet: 'accordion/flush/snippet') %>

data/app/views/bs5/examples/alert/additional_content/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>Additional content</h3>
+<h2>Additional content</h2>
 <%= bs5_example(snippet: 'alert/additional_content/snippet') %>

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

@@ -1,2 +1,2 @@
-<h3>Default</h3>
+<h2>Examples</h2>
 <%= bs5_example(snippet: 'alert/default/snippet') %>

data/app/views/bs5/examples/alert/dismissable/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>Dismissing</h3>
+<h2>Dismissing</h2>
 <%= bs5_example(snippet: 'alert/dismissable/snippet') %>

data/app/views/bs5/examples/alert/style/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>Style</h3>
+<h2>Style</h2>
 <%= bs5_example(snippet: 'alert/style/snippet') %>

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

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

data/app/views/bs5/examples/badge/pill/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>Pill badges</h3>
+<h2>Pill badges</h2>
 <%= bs5_example(snippet: 'badge/pill/snippet') %>

data/app/views/bs5/examples/badge/style/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>Background colors</h3>
+<h2>Background colors</h2>
 <%= bs5_example(snippet: 'badge/style/snippet') %>

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

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

data/app/views/bs5/examples/buttons/button_tag/default/snippet.html.erb

@@ -1,15 +1,15 @@
 <%= bs5_button_tag %>
 
-<%= bs5_button_tag 'Reset', type: 'reset' %>
+<%= bs5_button_tag('Reset', type: 'reset') %>
 
-<%= bs5_button_tag 'Button', type: 'button' %>
+<%= bs5_button_tag('Button', type: 'button') %>
 
-<%= bs5_button_tag 'Reset', type: 'reset', disabled: true %>
+<%= bs5_button_tag('Reset', type: 'reset', disabled: true) %>
 
 <%= bs5_button_tag(type: 'button') do %>
-  <%= content_tag(:strong, 'Ask me!') %>
+  <%= tag.strong('Ask me!') %>
 <% end %>
 
-<%= bs5_button_tag 'Save', data: { confirm: 'Are you sure?' } %>
+<%= bs5_button_tag('Save', data: { confirm: 'Are you sure?' }) %>
 
-<%= bs5_button_tag 'Checkout', data: { disable_with: 'Please wait...' } %>
+<%= bs5_button_tag('Checkout', data: { disable_with: 'Please wait...' }) %>