bs5 0.0.10 → 0.0.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ecb9af880ad8e465272d743689c0c470af8c322affb3e77be49bdb360f8b0022
-  data.tar.gz: 3b1517ef64015fa58510b9123cd625735d79e2e7fbbccda4eb161f1f4671e038
+  metadata.gz: 1f868555ef8de05ff2a59b42efd77e1e43a4322d896ba468075131178f0dc1a7
+  data.tar.gz: adbcd1e63ac16714e3b4ee5c5d72266fe687685449b08dbf87aa3b0ea359a8a7
 SHA512:
-  metadata.gz: b638dd6760619921caaa399a585a53040501cdb796712c5bf118cc281f5ba65f16637dde70df784adff66839c2b71b91488c64bcd46a0045cc949e82cf8ba995
-  data.tar.gz: f5b36b7a285aad9a6eb2e803d182d5e4126398ae410c9cb2a6dd66674de9474da84ba1db4f6c2202730a6f0b255a3df71762074fb8315c74711f457d3a9331a2
+  metadata.gz: 46c4e2e6bcb0d65824c993daea510e230c891e3bf7808ed98bbbf9d57997c36b5d01b83864cda9e4bcfa26b6aaff2460ab7d3c153510f852e8c526b58855481b
+  data.tar.gz: 43a3f21f7527666fd7499a1e05d14f442976e9a1465f8a4f91d1e3b967f5eb3cff1a0bb8a42c9e4efd8486710039e723c03369df33a28236b83d36bdb26a6a00

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_tag_component.rb

@@ -30,11 +30,7 @@ module Bs5
     end
 
     def call
-      if content
-        button_tag(content_or_options, options) { content }
-      else
-        button_tag(content_or_options, options)
-      end
+      button_tag(content || content_or_options, options)
     end
 
     private

data/app/components/bs5/button_to_component.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ButtonToComponent < ViewComponent::Base
+    STYLES = %i[primary secondary success danger warning info light dark link].freeze
+    DEFAULT_STYLE = :primary
+    SIZES = { small: :sm, large: :lg }.freeze
+    CLASS_PREFIX = 'btn'
+
+    attr_reader :size
+
+    include ActiveModel::Validations
+    validates :style, style: true
+    validates :size, inclusion: { in: SIZES.keys, valid_sizes: SIZES.keys.to_sentence, allow_nil: true }
+
+    def initialize(name = nil, options = nil, html_options = nil)
+      @name = name
+      @options = options
+      @html_options = html_options
+
+      set_button_to_options
+      extract_custom_options
+      merge_default_options
+    end
+
+    def before_render
+      raise errors.full_messages.to_sentence if invalid?
+    end
+
+    def call
+      if content
+        button_to(@name, @options, @html_options) { content }
+      else
+        button_to(@name, @options, @html_options)
+      end
+    end
+
+    private
+
+    def set_button_to_options
+      if @name.is_a? Hash
+        self.button_to_options = @name
+      elsif @options.is_a? Hash
+        self.button_to_options = @options
+      else
+        @html_options ||= {}
+        self.button_to_options = @html_options
+      end
+    end
+
+    def button_to_options=(hash)
+      @button_to_options = hash.symbolize_keys!
+    end
+
+    def extract_custom_options
+      extract_style
+      extract_outline
+      extract_size
+    end
+
+    def extract_style
+      @style = @button_to_options.delete(:style)
+    end
+
+    def extract_outline
+      @outline = @button_to_options.delete(:outline)
+    end
+
+    def extract_size
+      @size = @button_to_options.delete(:size)
+    end
+
+    def merge_default_options
+      @button_to_options.deep_merge!(default_options) do |_key, this_val, other_val|
+        [this_val, other_val].join(' ').strip
+      end
+    end
+
+    def default_options
+      { class: button_class }
+    end
+
+    def button_class
+      [CLASS_PREFIX, contextual_class, size_class].compact.join(' ')
+    end
+
+    def contextual_class
+      [CLASS_PREFIX, outline? ? 'outline' : nil, style].compact.join('-')
+    end
+
+    def size_class
+      return unless size?
+
+      [CLASS_PREFIX, SIZES[size]].join('-')
+    end
+
+    def style
+      (@style || DEFAULT_STYLE).to_sym
+    end
+
+    def outline?
+      !!@outline
+    end
+
+    def size?
+      !!size
+    end
+  end
+end

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].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,6 +11,19 @@ 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
+      }
+    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 = { 'bs-toggle': :collapse }
+      options[:'bs-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/accordion/default/_example.html.erb

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