bs5 0.0.7 → 0.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 061a536170d6aa6ef8e76633cb5a88db4832d7a79d8096eba5de62e278bd8775
-  data.tar.gz: 24121455a2fefbc3ebc70a3c70645a33c6a9f46d1303d249adebab639b9648e6
+  metadata.gz: 74aab58d89e345e58ed93c1960217477600d6c0bb9c3e9af1dcb3b3542ec55f0
+  data.tar.gz: 79c1ddc04689b15bb773de0b99751045f30ffb101acd8ed62e8d816263723f8d
 SHA512:
-  metadata.gz: fc2c751f5b54c42761563c5cd08816edfdffa332477eea76290c5f7b344e1e41c5001569785b93311ccb55aa27a1435cbdd5de174594967fcf4b29e1fd77f6f0
-  data.tar.gz: 0c8a184b0e2ca4cfd24124597f1d16cd4ee8adce371df61f3de58fdad2d4c341f8f906650e0c738a7513364a46c8b99135c3341bc0c39eaeede3b2e9e344bad4
+  metadata.gz: 623342435dddb84001b2d70dfd1abc6cf6088b278d2f7c8deb0b11793778fcfcb7e531f5e6c32dcb18865ce918d5bb7a209496577ae486e85304e0d98fc590f3
+  data.tar.gz: ba822b14f63cce1ea2be57273aef6014618d1cdab09050a6e842ac8719bf68f7d40b5f04d8a27991f7905700fe35a30b75640d805460599242449b9b7d36cbf6

data/app/components/bs5/alert_component.rb

@@ -2,6 +2,8 @@
 
 module Bs5
   class AlertComponent < ViewComponent::Base
+    STYLES = %i[primary secondary success danger warning info light dark].freeze
+
     attr_reader :style, :is_dismissable
 
     include ActiveModel::Validations

data/app/components/bs5/badge_component.rb

@@ -2,6 +2,8 @@
 
 module Bs5
   class BadgeComponent < ViewComponent::Base
+    STYLES = %i[primary secondary success danger warning info light dark].freeze
+
     attr_reader :text, :style
 
     include ActiveModel::Validations

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

@@ -0,0 +1,9 @@
+<% if items.any? %>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <% items.each do |item| %>
+        <li class="breadcrumb-item <%= item == items.last ? 'active' : '' %>" <%= item == items.last ? 'aria-current=page' : '' %>><%= item.content %></li>
+      <% end %>
+    </ol>
+  </nav>
+<% end %>

data/app/components/bs5/breadcrumb_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Bs5
+  class BreadcrumbComponent < ViewComponent::Base
+    include ViewComponent::Slotable
+
+    with_slot :item, collection: true, class_name: 'Item'
+
+    class Item < ViewComponent::Slot
+    end
+  end
+end

data/app/components/bs5/button_tag_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ButtonTagComponent < 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 :content_or_options, :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(content_or_options = nil, options = nil)
+      if content_or_options.is_a? Hash
+        self.options = content_or_options
+      else
+        @content_or_options = content_or_options
+        self.options = options
+      end
+
+      extract_custom_options
+      merge_default_options
+    end
+
+    def before_render
+      raise errors.full_messages.to_sentence if invalid?
+    end
+
+    def call
+      button_tag(content || content_or_options, options)
+    end
+
+    private
+
+    def options=(value)
+      @options = Hash(value).symbolize_keys!
+    end
+
+    def options
+      @options.empty? ? nil : @options
+    end
+
+    def extract_custom_options
+      extract_style
+      extract_outline
+      extract_size
+    end
+
+    def extract_style
+      @style = @options.delete(:style)
+    end
+
+    def extract_outline
+      @outline = @options.delete(:outline)
+    end
+
+    def extract_size
+      @size = @options.delete(:size)
+    end
+
+    def merge_default_options
+      @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/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/helpers/bs5/components_helper.rb

@@ -2,24 +2,30 @@
 
 module Bs5
   module ComponentsHelper
-    def bs5_accordion(*args)
-      render AccordionComponent.new(*args) do |accordion|
-        yield accordion if block_given?
-      end
-    end
+    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to].freeze
 
-    def bs5_alert(*args)
-      render AlertComponent.new(*args) do
-        yield if block_given?
+    COMPONENTS.each do |name|
+      define_method("bs5_#{name}") do |*args, &block|
+        clazz = "Bs5::#{name.classify}Component".constantize
+        render_component(clazz, *args, &block)
       end
     end
 
-    def bs5_badge(*args)
-      render BadgeComponent.new(*args)
+    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_close_button(*args)
-      render CloseButtonComponent.new(*args)
+    private
+
+    def render_component(component_clazz, *args)
+      render component_clazz.new(*args) do |c|
+        yield c if block_given?
+      end
     end
   end
 end

data/app/validators/style_validator.rb

@@ -1,11 +1,9 @@
 # frozen_string_literal: true
 
 class StyleValidator < ActiveModel::EachValidator
-  STYLES = %i[primary secondary success danger warning info light dark].freeze
-
   def validate_each(record, attribute, value)
-    return if value.in?(STYLES)
+    return if value.in?(valid_styles = record.class::STYLES)
 
-    record.errors.add(attribute, :inclusion, valid_styles: STYLES.to_sentence)
+    record.errors.add(attribute, :inclusion, valid_styles: valid_styles.to_sentence)
   end
 end

data/app/views/bs5/examples/_alert.html.erb

@@ -1,4 +1,5 @@
 <h2>Alert</h2>
 <%= render 'bs5/examples/alert/default/example' %>
 <%= render 'bs5/examples/alert/style/example' %>
+<%= render 'bs5/examples/alert/additional_content/example' %>
 <%= render 'bs5/examples/alert/dismissable/example' %>

data/app/views/bs5/examples/_breadcrumb.html.erb

@@ -0,0 +1,2 @@
+<h2>Breadcrumb</h2>
+<%= render 'bs5/examples/breadcrumb/default/example' %>

data/app/views/bs5/examples/_buttons.html.erb

@@ -0,0 +1,11 @@
+<h2>Buttons</h2>
+<h3>Decorating Rails' <code>button_tag</code></h3>
+<%= render 'bs5/examples/buttons/button_tag/default/example' %>
+<%= render 'bs5/examples/buttons/button_tag/style/example' %>
+<%= render 'bs5/examples/buttons/button_tag/outline/example' %>
+<%= render 'bs5/examples/buttons/button_tag/size/example' %>
+<%= render 'bs5/examples/buttons/button_tag/block_buttons/example' %>
+<%= render 'bs5/examples/buttons/button_tag/toggle_states/example' %>
+
+<h3>Decorating Rails' <code>button_to</code></h3>
+<%= render 'bs5/examples/buttons/button_to/default/example' %>

data/app/views/bs5/examples/_close_button.html.erb

@@ -0,0 +1,4 @@
+<h2>Close button</h2>
+<%= render 'bs5/examples/close_button/default/example' %>
+<%= render 'bs5/examples/close_button/disabled/example' %>
+<%= render 'bs5/examples/close_button/white/example' %>

data/app/views/bs5/examples/_tooltips.html.erb

@@ -0,0 +1,2 @@
+<h2>Tooltips</h2>
+<%= render 'bs5/examples/tooltips/default/example' %>

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

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

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

@@ -0,0 +1,6 @@
+<%= bs5_alert(style: :success) do %>
+  <h4 class="alert-heading">Well done!</h4>
+  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+  <hr>
+  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+<%- end %>

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

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

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

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

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

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

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

@@ -1 +1,6 @@
-<%= bs5_badge(text: 'New') %>
+<h1>Example heading <%= bs5_badge(text: 'New') %></h1>
+<h2>Example heading <%= bs5_badge(text: 'New') %></h2>
+<h3>Example heading <%= bs5_badge(text: 'New') %></h3>
+<h4>Example heading <%= bs5_badge(text: 'New') %></h4>
+<h5>Example heading <%= bs5_badge(text: 'New') %></h5>
+<h6>Example heading <%= bs5_badge(text: 'New') %></h6>

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

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

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

@@ -1 +1,8 @@
-<%= bs5_badge(text: 'Danger', style: :danger, pill: true) %>
+<%= bs5_badge(text: 'Primary', style: :primary, pill: true) %>
+<%= bs5_badge(text: 'Secondary', style: :secondary, pill: true) %>
+<%= bs5_badge(text: 'Sucess', style: :success, pill: true) %>
+<%= bs5_badge(text: 'Danger', style: :danger, pill: true) %>
+<%= bs5_badge(text: 'Warning', style: :warning, pill: true) %>
+<%= bs5_badge(text: 'Info', style: :info, pill: true) %>
+<%= bs5_badge(text: 'Light', style: :light, pill: true) %>
+<%= bs5_badge(text: 'Dark', style: :dark, pill: true) %>

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

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

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

@@ -1 +1,8 @@
-<%= bs5_badge(text: 'Warning', style: :warning) %>
+<%= bs5_badge(text: 'Primary', style: :primary) %>
+<%= bs5_badge(text: 'Secondary', style: :secondary) %>
+<%= bs5_badge(text: 'Success', style: :success) %>
+<%= bs5_badge(text: 'Danger', style: :danger) %>
+<%= bs5_badge(text: 'Warning', style: :warning) %>
+<%= bs5_badge(text: 'Info', style: :info) %>
+<%= bs5_badge(text: 'Light', style: :light) %>
+<%= bs5_badge(text: 'Dark', style: :dark) %>

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

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

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

@@ -0,0 +1,14 @@
+<%= bs5_breadcrumb do |breadcrumb| %>
+  <% breadcrumb.slot(:item) do %>Home<% end %>
+<%- end %>
+
+<%= bs5_breadcrumb do |breadcrumb| %>
+  <% breadcrumb.slot(:item) do %><a href="#">Home</a><% end %>
+  <% breadcrumb.slot(:item) do %>Library<% end %>
+<%- end %>
+
+<%= bs5_breadcrumb do |breadcrumb| %>
+  <% breadcrumb.slot(:item) do %><a href="#">Home</a><% end %>
+  <% breadcrumb.slot(:item) do %><a href="#">Library</a><% end %>
+  <% breadcrumb.slot(:item) do %>Data<% end %>
+<%- end %>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/_example.html.erb

@@ -0,0 +1,5 @@
+<h3>Block buttons</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/block_buttons/block_buttons') %>
+<%= bs5_example(snippet: 'buttons/button_tag/block_buttons/responsive_block_buttons_1') %>
+<%= bs5_example(snippet: 'buttons/button_tag/block_buttons/responsive_block_buttons_2') %>
+<%= bs5_example(snippet: 'buttons/button_tag/block_buttons/responsive_block_buttons_3') %>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/block_buttons.html.erb

@@ -0,0 +1,4 @@
+<div class="d-grid gap-2">
+  <%= bs5_button_tag %>
+  <%= bs5_button_tag %>
+</div>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_1.html.erb

@@ -0,0 +1,4 @@
+<div class="d-grid gap-2 d-md-block">
+  <%= bs5_button_tag %>
+  <%= bs5_button_tag %>
+</div>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_2.html.erb

@@ -0,0 +1,4 @@
+<div class="d-grid gap-2 col-6 mx-auto">
+  <%= bs5_button_tag %>
+  <%= bs5_button_tag %>
+</div>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_3.html.erb

@@ -0,0 +1,4 @@
+<div class="d-grid gap-2 d-md-flex justify-content-md-end">
+  <%= bs5_button_tag('Button', class: 'mr-md-2') %>
+  <%= bs5_button_tag %>
+</div>

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

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

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

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

data/app/views/bs5/examples/buttons/button_tag/outline/_example.html.erb

@@ -0,0 +1,2 @@
+<h3>Outline</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/outline/snippet') %>

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

@@ -0,0 +1,19 @@
+<%= bs5_button_tag 'Primary', style: :primary, outline: true %>
+
+<%= bs5_button_tag 'Secondary', style: :secondary, outline: true %>
+
+<%= bs5_button_tag 'Success', style: :success, outline: true %>
+
+<%= bs5_button_tag 'Danger', style: :danger, outline: true %>
+
+<%= bs5_button_tag(style: :warning, outline: true, type: 'button') do %>
+  <%= content_tag(:strong, 'Warning') %>
+<% end %>
+
+<%= bs5_button_tag 'Info', style: :info, outline: true %>
+
+<%= bs5_button_tag 'Light', style: :light, outline: true %>
+
+<%= bs5_button_tag 'Dark', style: :dark, outline: true %>
+
+<%= bs5_button_tag 'Link', style: :link, outline: true %>

data/app/views/bs5/examples/buttons/button_tag/size/_example.html.erb

@@ -0,0 +1,3 @@
+<h3>Sizes</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/size/large') %>
+<%= bs5_example(snippet: 'buttons/button_tag/size/small') %>

data/app/views/bs5/examples/buttons/button_tag/size/large.html.erb

@@ -0,0 +1,3 @@
+<%= bs5_button_tag 'Large button', style: :primary, size: :large %>
+
+<%= bs5_button_tag 'Large button', style: :secondary, size: :large %>

data/app/views/bs5/examples/buttons/button_tag/size/small.html.erb

@@ -0,0 +1,3 @@
+<%= bs5_button_tag 'Small button', style: :primary, size: :small %>
+
+<%= bs5_button_tag 'Small button', style: :secondary, size: :small %>

data/app/views/bs5/examples/buttons/button_tag/style/_example.html.erb

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

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

@@ -0,0 +1,19 @@
+<%= bs5_button_tag 'Primary', style: :primary %>
+
+<%= bs5_button_tag 'Secondary', style: :secondary %>
+
+<%= bs5_button_tag 'Success', style: :success %>
+
+<%= bs5_button_tag 'Danger', style: :danger %>
+
+<%= bs5_button_tag(style: :warning, type: 'button') do %>
+  <%= content_tag(:strong, 'Warning') %>
+<% end %>
+
+<%= bs5_button_tag 'Info', style: :info %>
+
+<%= bs5_button_tag 'Light', style: :light %>
+
+<%= bs5_button_tag 'Dark', style: :dark %>
+
+<%= bs5_button_tag 'Link', style: :link %>

data/app/views/bs5/examples/buttons/button_tag/toggle_states/_example.html.erb

@@ -0,0 +1,2 @@
+<h3>Toggle states</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/toggle_states/snippet') %>

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

@@ -0,0 +1,3 @@
+<%= bs5_button_tag('Toggle button', data: { toggle: 'button' }, autocomplete: 'off') %>
+<%= bs5_button_tag('Active toggle button', class: 'active', data: { toggle: 'button' }, autocomplete: 'off', aria: { pressed: true }) %>
+<%= bs5_button_tag('Disabled toggle button', data: { toggle: 'button' }, autocomplete: 'off', disabled: true) %>

data/app/views/bs5/examples/buttons/button_to/default/_example.html.erb

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

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

@@ -0,0 +1,11 @@
+<div class="d-grid gap-2 d-md-flex">
+  <%= bs5_button_to('New', 'http://www.example.com') %>
+
+  <%= bs5_button_to('http://www.example.com', style: :success) do %>
+    Make happy <strong>John Doe</strong>
+  <%- end %>
+
+  <%= bs5_button_to('New', 'http://www.example.com', style: :dark, outline: true, size: :large, form_class: 'new-thing') %>
+
+  <%= bs5_button_to('Destroy', 'http://www.example.com', style: :danger, method: "delete", remote: true, data: { confirm: 'Are you sure?', disable_with: 'loading...' }) %>
+</div>

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

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

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

@@ -0,0 +1 @@
+<%= bs5_close_button %>

data/app/views/bs5/examples/close_button/disabled/_example.html.erb

@@ -0,0 +1,2 @@
+<h3>Disabled</h3>
+<%= bs5_example(snippet: 'close_button/disabled/snippet') %>

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

@@ -0,0 +1 @@
+<%= bs5_close_button(disabled: true) %>

data/app/views/bs5/examples/close_button/white/_example.html.erb

@@ -0,0 +1,2 @@
+<h3>White</h3>
+<%= bs5_example(snippet: 'close_button/white/snippet') %>

data/app/views/bs5/examples/close_button/white/snippet.html.erb

@@ -0,0 +1 @@
+<%= bs5_close_button(white: true) %>

data/app/views/bs5/examples/index.html.erb

@@ -1,4 +1,25 @@
-<h1>Bootstrap Examples</h1>
-<%= render 'accordion' %>
-<%= render 'alert' %>
-<%= render 'badge' %>
+  <div class="row">
+    <div class="col">
+      <div class="sticky-top">
+        <ul class="nav flex-column">
+        <li>Accordion</li>
+        <li>Alert</li>
+        <li>Badge</li>
+        <li>Close button</li>
+        <li>Breadcrumb</li>
+        <li>Buttons</li>
+        <li>Tooltips</li>
+        </ul>
+      </div>
+    </div>
+    <div class="col-10">
+      <h1>Bootstrap Examples</h1>
+      <%= render 'accordion' %>
+      <%= render 'alert' %>
+      <%= render 'badge' %>
+      <%= render 'close_button' %>
+      <%= render 'breadcrumb' %>
+      <%= render 'buttons' %>
+      <%= render 'tooltips' %>
+    </div>
+  </div>

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

@@ -0,0 +1,4 @@
+<h3>Default</h3>
+<%= bs5_example(snippet: 'tooltips/default/snippet') %>
+<%= bs5_example(snippet: 'tooltips/default/buttons') %>
+<%= bs5_example(snippet: 'tooltips/default/disabled_elements') %>

data/app/views/bs5/examples/tooltips/default/buttons.html.erb

@@ -0,0 +1,9 @@
+<%= bs5_button_tag('Tooltip on top', bs5_tooltip('Tooltip on top', placement: :top).merge(style: :secondary)) %>
+
+<%= bs5_button_tag('Tooltip on right', bs5_tooltip('Tooltip on right', placement: :right).merge(style: :secondary)) %>
+
+<%= bs5_button_tag('Tooltip on bottom', bs5_tooltip('Tooltip on bottom', placement: :bottom).merge(style: :secondary)) %>
+
+<%= bs5_button_tag('Tooltip on left', bs5_tooltip('Tooltip on left', placement: :left).merge(style: :secondary)) %>
+
+<%= bs5_button_tag('Tooltip with HTML', bs5_tooltip('<em>Tooltip</em> <u>with</u> <b>HTML</b>', html: :true).merge(style: :secondary)) %>

data/app/views/bs5/examples/tooltips/default/disabled_elements.html.erb

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

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

@@ -0,0 +1,7 @@
+<p class="muted">
+  Tight pants next level keffiyeh <%= link_to('you probably', '#', bs5_tooltip('Default tooltip')) %> haven't heard of them.
+  Photo booth beard raw denim letterpress vegan messenger bag stumptown.
+  Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <%= link_to('have a', '#', bs5_tooltip('Another tooltip')) %> terry richardson vinyl chambray.
+  Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray.
+  A really ironic artisan <%= link_to('whatever keytar', '#', bs5_tooltip('Another one here too')) %>, scenester farm-to-table banksy Austin <%= link_to('twitter handle', '#', bs5_tooltip('The last tip!')) %> freegan cred raw denim single-origin coffee viral.
+</p>

data/config/definitions.rb

@@ -0,0 +1,31 @@
+# The following comments fill some of the gaps in Solargraph's understanding of
+# Rails apps. Since they're all in YARD, they get mapped in Solargraph but
+# ignored at runtime.
+#
+# You can put this file anywhere in the project, as long as it gets included in
+# the workspace maps. It's recommended that you keep it in a standalone file
+# instead of pasting it into an existing one.
+#
+# @!parse
+#   class ActionController::Base
+#     include ActionController::MimeResponds
+#     extend ActiveSupport::Callbacks::ClassMethods
+#     extend AbstractController::Callbacks::ClassMethods
+#   end
+#   class ActiveRecord::Base
+#     extend ActiveRecord::QueryMethods
+#     extend ActiveRecord::FinderMethods
+#     extend ActiveRecord::Associations::ClassMethods
+#     extend ActiveRecord::Inheritance::ClassMethods
+#     include ActiveRecord::Persistence
+#   end
+# @!override ActiveRecord::FinderMethods#find
+#   @overload find(id)
+#     @param id [Integer]
+#     @return [self]
+#   @overload find(list)
+#     @param list [Array]
+#     @return [Array<self>]
+#   @overload find(*args)
+#     @return [Array<self>]
+#   @return [self, Array<self>]

data/config/locales/en.yml

@@ -6,3 +6,15 @@ en:
           attributes:
             style:
               inclusion: "is not included in the list: %{valid_styles}."
+        bs5/button_tag_component:
+          attributes:
+            style:
+              inclusion: "is not included in the list: %{valid_styles}."
+            size:
+              inclusion: "is not included in the list: %{valid_sizes}."
+        bs5/button_to_component:
+          attributes:
+            style:
+              inclusion: "is not included in the list: %{valid_styles}."
+            size:
+              inclusion: "is not included in the list: %{valid_sizes}."

data/lib/bs5/version.rb

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

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

@@ -2,6 +2,8 @@
 
 module Bs5
   class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path('templates', __dir__)
+
     def add_bootstrap # rubocop:disable Metrics/MethodLength
       run 'yarn add bootstrap@next popper.js'
 
@@ -9,6 +11,16 @@ module Bs5
         @import "~bootstrap/scss/bootstrap";
       HEREDOC
 
+      copy_file 'bs5.js', 'app/javascript/bs5.js'
+
+      append_file 'app/javascript/packs/application.js', <<~HEREDOC
+        import * as bs5 from "bs5";
+
+        document.addEventListener("turbolinks:load", function () {
+          bs5.start();
+        });
+      HEREDOC
+
       inject_into_file 'app/views/layouts/application.html.erb', before: '</head>' do
         <<~HEREDOC
           <%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
@@ -27,10 +39,6 @@ module Bs5
         HEREDOC
       end
 
-      append_file 'app/javascript/packs/application.js', <<~HEREDOC
-        import "bootstrap";
-      HEREDOC
-
       gsub_file 'config/webpacker.yml', 'extract_css: false', 'extract_css: true'
     end
   end

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

@@ -0,0 +1,14 @@
+import * as bootstrap from "bootstrap";
+
+function tooltipify() {
+  const tooltipTriggerList = [].slice.call(
+    document.querySelectorAll('[data-toggle="tooltip"]')
+  );
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+}
+
+export function start() {
+  tooltipify();
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.12
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-11-21 00:00:00.000000000 Z
+date: 2020-11-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -132,6 +132,10 @@ files:
 - app/components/bs5/alert_component.rb
 - app/components/bs5/badge_component.html.erb
 - app/components/bs5/badge_component.rb
+- app/components/bs5/breadcrumb_component.html.erb
+- app/components/bs5/breadcrumb_component.rb
+- app/components/bs5/button_tag_component.rb
+- app/components/bs5/button_to_component.rb
 - app/components/bs5/close_button_component.html.erb
 - app/components/bs5/close_button_component.rb
 - app/components/bs5/example_component.html.erb
@@ -146,10 +150,16 @@ files:
 - app/views/bs5/examples/_accordion.html.erb
 - app/views/bs5/examples/_alert.html.erb
 - app/views/bs5/examples/_badge.html.erb
+- app/views/bs5/examples/_breadcrumb.html.erb
+- app/views/bs5/examples/_buttons.html.erb
+- app/views/bs5/examples/_close_button.html.erb
+- app/views/bs5/examples/_tooltips.html.erb
 - app/views/bs5/examples/accordion/default/_example.html.erb
 - app/views/bs5/examples/accordion/default/snippet.html.erb
 - app/views/bs5/examples/accordion/flush/_example.html.erb
 - app/views/bs5/examples/accordion/flush/snippet.html.erb
+- app/views/bs5/examples/alert/additional_content/_example.html.erb
+- app/views/bs5/examples/alert/additional_content/snippet.html.erb
 - app/views/bs5/examples/alert/default/_example.html.erb
 - app/views/bs5/examples/alert/default/snippet.html.erb
 - app/views/bs5/examples/alert/dismissable/_example.html.erb
@@ -162,8 +172,39 @@ files:
 - app/views/bs5/examples/badge/pill/snippet.html.erb
 - app/views/bs5/examples/badge/style/_example.html.erb
 - 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/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
+- app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_2.html.erb
+- app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_3.html.erb
+- app/views/bs5/examples/buttons/button_tag/default/_example.html.erb
+- app/views/bs5/examples/buttons/button_tag/default/snippet.html.erb
+- app/views/bs5/examples/buttons/button_tag/outline/_example.html.erb
+- app/views/bs5/examples/buttons/button_tag/outline/snippet.html.erb
+- app/views/bs5/examples/buttons/button_tag/size/_example.html.erb
+- app/views/bs5/examples/buttons/button_tag/size/large.html.erb
+- app/views/bs5/examples/buttons/button_tag/size/small.html.erb
+- app/views/bs5/examples/buttons/button_tag/style/_example.html.erb
+- app/views/bs5/examples/buttons/button_tag/style/snippet.html.erb
+- app/views/bs5/examples/buttons/button_tag/toggle_states/_example.html.erb
+- app/views/bs5/examples/buttons/button_tag/toggle_states/snippet.html.erb
+- app/views/bs5/examples/buttons/button_to/default/_example.html.erb
+- app/views/bs5/examples/buttons/button_to/default/snippet.html.erb
+- app/views/bs5/examples/close_button/default/_example.html.erb
+- app/views/bs5/examples/close_button/default/snippet.html.erb
+- app/views/bs5/examples/close_button/disabled/_example.html.erb
+- 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/index.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
+- app/views/bs5/examples/tooltips/default/snippet.html.erb
 - app/views/layouts/bs5/application.html.erb
+- config/definitions.rb
 - config/locales/en.yml
 - config/routes.rb
 - lib/bs5.rb
@@ -171,6 +212,7 @@ files:
 - lib/bs5/version.rb
 - lib/generators/bs5/install/USAGE
 - lib/generators/bs5/install/install_generator.rb
+- lib/generators/bs5/install/templates/bs5.js
 - lib/tasks/bs5_tasks.rake
 - lib/tasks/ci.rake
 - lib/tasks/rubocop.rake