bs5 0.0.19 → 0.0.24

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2ffee97d6c26146be217198ac6cd314e3f03bcf8c883bdfee1ffc0c9cabc6aa2
-  data.tar.gz: 3cba5aa8ad8ff0994637535a48b7610a6cf0ba39d9c7f9e5b0551fedc02af77e
+  metadata.gz: 51b17209ffd99eeedda9730125b19b56bd290f47c89196bf78787050b0061e7c
+  data.tar.gz: c691c88a51fc0e6aa4a02b9c31dceefb0c98824d454c755503cce7cc0b4f6a78
 SHA512:
-  metadata.gz: 4dcef8bb95173c07b12af9a568e57d2602de1b420fe030e301ae68ca10ec8a9324c773953e02a950fc5cec1ebe2d560ba8a3b32a95aceb27a0aa0f36aa756f84
-  data.tar.gz: ec6e86d8e3149a3730ed4d9c9dcd8eb16226ecd422effd72ef0bd2052d42fd78997db598c2045dbba48856f2ce3ccf937bfa764bf4fb02ee74b91e5e6eb1f7e1
+  metadata.gz: 10243bc1176cbc6e480f39515bf171ce8f67caab6b75b435d6adb703eacc0da923e515fbe8eb1b36fab9e4e3096a379f596c801b2e378f935f24ae033166bdde
+  data.tar.gz: bc080841996dbd305b98df94b84b1d814be5656dcf6ee6954a98653a97919b2a080dd641dc02d3c9bbeaf818acc38cd4d32013deac6c3a2d11b440d0d009f821

data/app/assets/config/bs5_manifest.js

@@ -1 +1,2 @@
 //= link_directory ../stylesheets/bs5 .css
+//= link_directory ../javascripts/bs5 .js

data/app/assets/javascripts/bs5/application.js

@@ -0,0 +1,13 @@
+window.addEventListener("load", initBs5);
+window.addEventListener("turbolinks:load", initBs5);
+
+function initBs5(event) {
+  document.querySelectorAll('[data-bs5="copy"]').forEach(function (item) {
+    item.addEventListener("click", handleBs5CopyButtonClick);
+  });
+}
+
+function handleBs5CopyButtonClick(event) {
+  var code = event.target.closest("div").querySelector("code").innerText;
+  navigator.clipboard.writeText(code);
+}

data/app/components/bs5/alert_component.rb

@@ -4,13 +4,13 @@ module Bs5
   class AlertComponent < ViewComponent::Base
     STYLES = %i[primary secondary success danger warning info light dark].freeze
 
-    attr_reader :style, :is_dismissable
+    attr_reader :color, :is_dismissable
 
     include ActiveModel::Validations
-    validates :style, style: true
+    validates :color, style: true
 
-    def initialize(style: :primary, is_dismissable: false)
-      @style = style.to_sym
+    def initialize(color: :primary, is_dismissable: false)
+      @color = color.to_sym
       @is_dismissable = is_dismissable
     end
 
@@ -31,7 +31,7 @@ module Bs5
     end
 
     def contextual_class
-      "alert-#{@style}"
+      "alert-#{@color}"
     end
   end
 end

data/app/components/bs5/badge_component.rb

@@ -4,14 +4,14 @@ module Bs5
   class BadgeComponent < ViewComponent::Base
     STYLES = %i[primary secondary success danger warning info light dark].freeze
 
-    attr_reader :text, :style
+    attr_reader :text, :color
 
     include ActiveModel::Validations
-    validates :style, style: true
+    validates :color, style: true
 
-    def initialize(text:, style: :secondary, pill: false)
+    def initialize(text:, color: :secondary, pill: false)
       @text = text
-      @style = style.to_sym
+      @color = color.to_sym
       @pill = pill
     end
 
@@ -32,8 +32,8 @@ module Bs5
     end
 
     def contextual_class
-      class_names = ["bg-#{@style}"]
-      class_names << %w[text-dark] if style.in?(%i[warning info light])
+      class_names = ["bg-#{@color}"]
+      class_names << %w[text-dark] if color.in?(%i[warning info light])
       class_names.join(' ')
     end
   end

data/app/components/bs5/button_tag_component.rb

@@ -3,14 +3,14 @@
 module Bs5
   class ButtonTagComponent < ViewComponent::Base
     STYLES = %i[primary secondary success danger warning info light dark link].freeze
-    DEFAULT_STYLE = :primary
+    DEFAULT_COLOR = :primary
     SIZES = { small: :sm, large: :lg }.freeze
     CLASS_PREFIX = 'btn'
 
     attr_reader :content_or_options, :size
 
     include ActiveModel::Validations
-    validates :style, style: true
+    validates :color, 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)
@@ -44,13 +44,13 @@ module Bs5
     end
 
     def extract_custom_options
-      extract_style
+      extract_color
       extract_outline
       extract_size
     end
 
-    def extract_style
-      @style = @options.delete(:style)
+    def extract_color
+      @color = @options.delete(:color)
     end
 
     def extract_outline
@@ -76,7 +76,7 @@ module Bs5
     end
 
     def contextual_class
-      [CLASS_PREFIX, outline? ? 'outline' : nil, style].compact.join('-')
+      [CLASS_PREFIX, outline? ? 'outline' : nil, color].compact.join('-')
     end
 
     def size_class
@@ -85,8 +85,8 @@ module Bs5
       [CLASS_PREFIX, SIZES[size]].join('-')
     end
 
-    def style
-      (@style || DEFAULT_STYLE).to_sym
+    def color
+      (@color || DEFAULT_COLOR).to_sym
     end
 
     def outline?

data/app/components/bs5/button_to_component.rb

@@ -3,14 +3,14 @@
 module Bs5
   class ButtonToComponent < ViewComponent::Base
     STYLES = %i[primary secondary success danger warning info light dark link].freeze
-    DEFAULT_STYLE = :primary
+    DEFAULT_COLOR = :primary
     SIZES = { small: :sm, large: :lg }.freeze
     CLASS_PREFIX = 'btn'
 
     attr_reader :size
 
     include ActiveModel::Validations
-    validates :style, style: true
+    validates :color, 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)
@@ -53,13 +53,13 @@ module Bs5
     end
 
     def extract_custom_options
-      extract_style
+      extract_color
       extract_outline
       extract_size
     end
 
-    def extract_style
-      @style = @button_to_options.delete(:style)
+    def extract_color
+      @color = @button_to_options.delete(:color)
     end
 
     def extract_outline
@@ -85,7 +85,7 @@ module Bs5
     end
 
     def contextual_class
-      [CLASS_PREFIX, outline? ? 'outline' : nil, style].compact.join('-')
+      [CLASS_PREFIX, outline? ? 'outline' : nil, color].compact.join('-')
     end
 
     def size_class
@@ -94,8 +94,8 @@ module Bs5
       [CLASS_PREFIX, SIZES[size]].join('-')
     end
 
-    def style
-      (@style || DEFAULT_STYLE).to_sym
+    def color
+      (@color || DEFAULT_COLOR).to_sym
     end
 
     def outline?

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

@@ -2,7 +2,8 @@
   <div class="border rounded-2 p-4">
     <%= render template: snippet %>
   </div>
-  <div class="highlight p-4">
+  <div class="highlight p-4 position-relative">
+    <%= bs5_button_tag('Copy', color: :primary, outline: true, size: :small, class: 'position-absolute top-0 end-0 mt-2 me-2', data: { bs5: 'copy' }) %>
     <pre class='mb-0'><code><%= highlight %></code></pre>
   </div>
 </div>

data/app/components/bs5/list_group_component.rb

@@ -62,7 +62,7 @@ module Bs5
 
         @active = @options.delete(:active) || false
         @disabled = @options.delete(:disabled) || false
-        @style = @options.delete(:style)
+        @color = @options.delete(:color)
 
         set_attributes
       end
@@ -125,7 +125,7 @@ module Bs5
         class_names = [CLASS_NAME_BASE]
         class_names << 'active' if active?
         class_names << 'disabled' if disabled?
-        class_names << contextual_class if style?
+        class_names << contextual_class if color?
 
         class_names
       end
@@ -138,12 +138,12 @@ module Bs5
         !!@disabled
       end
 
-      def style?
-        !!@style
+      def color?
+        !!@color
       end
 
       def contextual_class
-        [CLASS_NAME_BASE, @style].join('-')
+        [CLASS_NAME_BASE, @color].join('-')
       end
     end
   end

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

@@ -0,0 +1,5 @@
+<%= tag.div(**component_attributes) do %>
+  <%- if text %>
+    <span class="visually-hidden"><%= text %></span>
+  <% end %>
+<% end %>

data/app/components/bs5/spinner_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Bs5
+  class SpinnerComponent < ViewComponent::Base
+    STYLES = %i[primary secondary success danger warning info light dark].freeze
+    SIZES = { small: :sm, large: :lg }.freeze
+
+    attr_reader :text, :color, :size, :options
+
+    include ActiveModel::Validations
+    validates :color, style: true, if: -> { color }
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+
+      @text = @options.delete(:text)
+      @color = @options.delete(:color)&.to_sym
+      @grow = @options.delete(:grow)
+      @size = @options.delete(:size)&.to_sym
+    end
+
+    def before_render
+      raise errors.full_messages.to_sentence if invalid?
+    end
+
+    def component_attributes
+      options[:class] = component_class
+      options[:role] = 'status'
+      options
+    end
+
+    def component_class
+      class_names = Array(options[:class])
+      class_names << shape_class
+      class_names << contextual_class
+      class_names << size_class
+
+      class_names.compact.join(' ')
+    end
+
+    private
+
+    def shape_class
+      grow? ? 'spinner-grow' : 'spinner-border'
+    end
+
+    def contextual_class
+      "text-#{@color}" if color
+    end
+
+    def size_class
+      return unless size?
+
+      [shape_class, SIZES[size]].join('-')
+    end
+
+    def grow?
+      !!@grow
+    end
+
+    def size?
+      !!size
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

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

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

@@ -1,4 +1,4 @@
-<%= bs5_alert(style: :success) do %>
+<%= bs5_alert(color: :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>

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

@@ -0,0 +1 @@
+<%= bs5_example(snippet: 'alert/color/snippet') %>

data/app/views/bs5/examples/alert/{style → color}/snippet.html.erb

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

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

@@ -1,3 +1,3 @@
-<%= bs5_alert(style: :warning, is_dismissable: true) do %>
+<%= bs5_alert(color: :warning, is_dismissable: true) do %>
   <strong>Holy guacamole!</strong> You should check in on some of those fields below.
 <%- end %>

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

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

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

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

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

@@ -1,3 +1,3 @@
 <%= bs5_button_tag(type: 'button') do %>
-  Notifications <%= bs5_badge(text: '4', style: :secondary) %>
+  Notifications <%= bs5_badge(text: '4', color: :secondary) %>
 <% end %>

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

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

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

@@ -7,12 +7,12 @@
   <% end %>
 
   <%= bs5_button_group(class: 'me-2', aria: { label: 'Second group' }) do %>
-    <%= bs5_button_tag('5', type: 'button', style: :secondary) %>
-    <%= bs5_button_tag('6', type: 'button', style: :secondary) %>
-    <%= bs5_button_tag('7', type: 'button', style: :secondary) %>
+    <%= bs5_button_tag('5', type: 'button', color: :secondary) %>
+    <%= bs5_button_tag('6', type: 'button', color: :secondary) %>
+    <%= bs5_button_tag('7', type: 'button', color: :secondary) %>
   <% end %>
 
   <%= bs5_button_group(aria: { label: 'Third group' }) do %>
-    <%= bs5_button_tag('8', type: 'button', style: :info) %>
+    <%= bs5_button_tag('8', type: 'button', color: :info) %>
   <% end %>
 <% end %>

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

@@ -1,9 +1,9 @@
 <%= bs5_button_toolbar(class: 'mb-3', aria: { label: 'Toolbar with button groups' }) do %>
   <%= bs5_button_group(class: 'me-2', aria: { label: 'First group' }) do %>
-    <%= bs5_button_tag('1', type: 'button', outline: true, style: :secondary) %>
-    <%= bs5_button_tag('2', type: 'button', outline: true, style: :secondary) %>
-    <%= bs5_button_tag('3', type: 'button', outline: true, style: :secondary) %>
-    <%= bs5_button_tag('4', type: 'button', outline: true, style: :secondary) %>
+    <%= bs5_button_tag('1', type: 'button', outline: true, color: :secondary) %>
+    <%= bs5_button_tag('2', type: 'button', outline: true, color: :secondary) %>
+    <%= bs5_button_tag('3', type: 'button', outline: true, color: :secondary) %>
+    <%= bs5_button_tag('4', type: 'button', outline: true, color: :secondary) %>
   <% end %>
 
   <div class="input-group">
@@ -14,10 +14,10 @@
 
 <%= bs5_button_toolbar(class: 'justify-content-between', aria: { label: 'Toolbar with button groups' }) do %>
   <%= bs5_button_group(aria: { label: 'First group' }) do %>
-    <%= bs5_button_tag('1', type: 'button', outline: true, style: :secondary) %>
-    <%= bs5_button_tag('2', type: 'button', outline: true, style: :secondary) %>
-    <%= bs5_button_tag('3', type: 'button', outline: true, style: :secondary) %>
-    <%= bs5_button_tag('4', type: 'button', outline: true, style: :secondary) %>
+    <%= bs5_button_tag('1', type: 'button', outline: true, color: :secondary) %>
+    <%= bs5_button_tag('2', type: 'button', outline: true, color: :secondary) %>
+    <%= bs5_button_tag('3', type: 'button', outline: true, color: :secondary) %>
+    <%= bs5_button_tag('4', type: 'button', outline: true, color: :secondary) %>
   <% end %>
 
   <div class="input-group">

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

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

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

@@ -1,8 +1,8 @@
 <%= bs5_button_group(vertical: :true, aria: { label: 'Vertical button group' }) do %>
-  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
-  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
-  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
-  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
-  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
-  <%= bs5_button_tag('Button', type: 'button', style: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', color: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', color: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', color: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', color: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', color: :dark) %>
+  <%= bs5_button_tag('Button', type: 'button', color: :dark) %>
 <% end %>

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

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

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

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

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

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

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

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

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

@@ -1,11 +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 %>
+  <%= bs5_button_to('http://www.example.com', color: :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('New', 'http://www.example.com', color: :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...' }) %>
+  <%= bs5_button_to('Destroy', 'http://www.example.com', color: :danger, method: "delete", remote: true, data: { confirm: 'Are you sure?', disable_with: 'loading...' }) %>
 </div>

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

@@ -1,11 +1,11 @@
 <%= bs5_list_group do |lg| %>
   <% lg.item do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
-  <% lg.item(style: :primary) do %><%= link_to 'A simple primary list group item', '#' %><% end %>
-  <% lg.item(style: :secondary) do %><%= link_to 'A simple secondary list group item', '#' %><% end %>
-  <% lg.item(style: :success) do %><%= link_to 'A simple success list group item', '#' %><% end %>
-  <% lg.item(style: :danger) do %><%= link_to 'A simple danger list group item', '#' %><% end %>
-  <% lg.item(style: :warning) do %><%= link_to 'A simple warning list group item', '#' %><% end %>
-  <% lg.item(style: :info) do %><%= link_to 'A simple info list group item', '#' %><% end %>
-  <% lg.item(style: :light) do %><%= link_to 'A simple light list group item', '#' %><% end %>
-  <% lg.item(style: :dark) do %><%= link_to 'A simple dark list group item', '#' %><% end %>
+  <% lg.item(color: :primary) do %><%= link_to 'A simple primary list group item', '#' %><% end %>
+  <% lg.item(color: :secondary) do %><%= link_to 'A simple secondary list group item', '#' %><% end %>
+  <% lg.item(color: :success) do %><%= link_to 'A simple success list group item', '#' %><% end %>
+  <% lg.item(color: :danger) do %><%= link_to 'A simple danger list group item', '#' %><% end %>
+  <% lg.item(color: :warning) do %><%= link_to 'A simple warning list group item', '#' %><% end %>
+  <% lg.item(color: :info) do %><%= link_to 'A simple info list group item', '#' %><% end %>
+  <% lg.item(color: :light) do %><%= link_to 'A simple light list group item', '#' %><% end %>
+  <% lg.item(color: :dark) do %><%= link_to 'A simple dark list group item', '#' %><% end %>
 <%- 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(style: :primary) do %>A simple primary list group item<% end %>
-  <% lg.item(style: :secondary) do %>A simple secondary list group item<% end %>
-  <% lg.item(style: :success) do %>A simple success list group item<% end %>
-  <% lg.item(style: :danger) do %>A simple danger list group item<% end %>
-  <% lg.item(style: :warning) do %>A simple warning list group item<% end %>
-  <% lg.item(style: :info) do %>A simple info list group item<% end %>
-  <% lg.item(style: :light) do %>A simple light list group item<% end %>
-  <% lg.item(style: :dark) do %>A simple dark list group item<% 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 %>
 <%- end %>

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

@@ -1,14 +1,14 @@
 <%= bs5_list_group do |lg| %>
   <% lg.item(class: 'd-flex justify-content-between align-items-center') do %>
     Cras justo odio
-    <%= bs5_badge(text: 14, style: :primary, pill: true) %>
+    <%= bs5_badge(text: 14, color: :primary, pill: true) %>
   <% end %>
   <% lg.item(class: 'd-flex justify-content-between align-items-center') do %>
     Dapibus ac facilisis in
-    <%= bs5_badge(text: 2, style: :primary, pill: true) %>
+    <%= bs5_badge(text: 2, color: :primary, pill: true) %>
   <% end %>
   <% lg.item(class: 'd-flex justify-content-between align-items-center') do %>
     Morbi leo risus
-    <%= bs5_badge(text: 1, style: :primary, pill: true) %>
+    <%= bs5_badge(text: 1, color: :primary, pill: true) %>
   <% end %>
 <%- end %>

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

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

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

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

data/app/views/bs5/examples/spinners/border/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Border spinner</h2>
+<%= bs5_example(snippet: 'spinners/border/snippet') %>

data/app/views/bs5/examples/spinners/border/snippet.html.erb

@@ -0,0 +1 @@
+<%= bs5_spinner(text: 'Loading...') %>

data/app/views/bs5/examples/spinners/buttons/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Buttons</h2>
+<%= bs5_example(snippet: 'spinners/buttons/snippet') %>

data/app/views/bs5/examples/spinners/buttons/snippet.html.erb

@@ -0,0 +1,15 @@
+<%= bs5_button_tag(disabled: true) do %>
+  <%= bs5_spinner(text: 'Loading...', size: :small) %>
+<% end %>
+
+<%= bs5_button_tag(disabled: true) do %>
+  <%= bs5_spinner(size: :small) %> Loading...
+<% end %>
+
+<%= bs5_button_tag(disabled: true) do %>
+  <%= bs5_spinner(text: 'Loading...', grow: true, size: :small) %>
+<% end %>
+
+<%= bs5_button_tag(disabled: true) do %>
+  <%= bs5_spinner(grow: true,  size: :small) %> Loading...
+<% end %>

data/app/views/bs5/examples/spinners/colors/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Colors</h2>
+<%= bs5_example(snippet: 'spinners/colors/snippet') %>

data/app/views/bs5/examples/spinners/colors/snippet.html.erb

@@ -0,0 +1,16 @@
+<%= bs5_spinner(text: 'Loading...', color: :primary) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :secondary) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :success) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :danger) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :warning) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :info) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :light) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :dark) %>
+

data/app/views/bs5/examples/spinners/growing/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Growing spinner</h2>
+<%= bs5_example(snippet: 'spinners/growing/snippet') %>
+<%= bs5_example(snippet: 'spinners/growing/colors') %>

data/app/views/bs5/examples/spinners/growing/colors.html.erb

@@ -0,0 +1,16 @@
+<%= bs5_spinner(text: 'Loading...', color: :primary, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :secondary, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :success, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :danger, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :warning, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :info, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :light, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', color: :dark, grow: true) %>
+

data/app/views/bs5/examples/spinners/growing/snippet.html.erb

@@ -0,0 +1 @@
+<%= bs5_spinner(text: 'Loading...', grow: true) %>

data/app/views/bs5/examples/spinners/options/_example.html.erb

@@ -0,0 +1,10 @@
+<h2>Alignment</h2>
+<h3>Margin</h3>
+<%= bs5_example(snippet: 'spinners/options/margin') %>
+<h3>Placement</h3>
+<h4>Flex</h4>
+<%= bs5_example(snippet: 'spinners/options/placement_flex1') %>
+<%= bs5_example(snippet: 'spinners/options/placement_flex2') %>
+<h4>Floats</h4>
+<%= bs5_example(snippet: 'spinners/options/floats') %>
+<%= bs5_example(snippet: 'spinners/options/text_align') %>

data/app/views/bs5/examples/spinners/options/floats.html.erb

@@ -0,0 +1,3 @@
+<div class="clearfix">
+  <%= bs5_spinner(class: 'float-end', text: 'Loading...') %>
+</div>

data/app/views/bs5/examples/spinners/options/margin.html.erb

@@ -0,0 +1 @@
+<%= bs5_spinner(text: 'Loading...', class: 'm-5') %>

data/app/views/bs5/examples/spinners/options/placement_flex1.html.erb

@@ -0,0 +1,3 @@
+<div class="d-flex justify-content-center">
+  <%= bs5_spinner(text: 'Loading...') %>
+</div>

data/app/views/bs5/examples/spinners/options/placement_flex2.html.erb

@@ -0,0 +1,4 @@
+<div class="d-flex align-items-center">
+  <strong>Loading...</strong>
+  <%= bs5_spinner(class: 'ms-auto', aria: { hidden: true }) %>
+</div>

data/app/views/bs5/examples/spinners/options/text_align.html.erb

@@ -0,0 +1,3 @@
+<div class="text-center">
+  <%= bs5_spinner(text: 'Loading...') %>
+</div>

data/app/views/bs5/examples/spinners/size/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Size</h2>
+<%= bs5_example(snippet: 'spinners/size/size1') %>
+<%= bs5_example(snippet: 'spinners/size/size2') %>

data/app/views/bs5/examples/spinners/size/size1.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_spinner(text: 'Loading...', size: :small) %>
+
+<%= bs5_spinner(text: 'Loading...', size: :large) %>
+
+<%= bs5_spinner(text: 'Loading...', size: :small, grow: true) %>
+
+<%= bs5_spinner(text: 'Loading...', size: :large, grow: true) %>

data/app/views/bs5/examples/spinners/size/size2.html.erb

@@ -0,0 +1,3 @@
+<%= bs5_spinner(text: 'Loading...', style: 'width: 3rem; height: 3rem;') %>
+
+<%= bs5_spinner(text: 'Loading...', grow: true, style: 'width: 3rem; height: 3rem;') %>

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

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

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

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

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

@@ -1,4 +1,4 @@
 <h1 id='badge'>Badge</h1>
 <%= render 'bs5/examples/badge/default/example' %>
-<%= render 'bs5/examples/badge/style/example' %>
+<%= render 'bs5/examples/badge/color/example' %>
 <%= render 'bs5/examples/badge/pill/example' %>

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

@@ -0,0 +1,7 @@
+<h1>Spinners</h1>
+<%= render 'bs5/examples/spinners/border/example' %>
+<%= render 'bs5/examples/spinners/colors/example' %>
+<%= render 'bs5/examples/spinners/growing/example' %>
+<%= render 'bs5/examples/spinners/options/example' %>
+<%= render 'bs5/examples/spinners/size/example' %>
+<%= render 'bs5/examples/spinners/buttons/example' %>

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

@@ -4,6 +4,7 @@
   <title>Bs5</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'bs5/application', 'data-turbolinks-track': 'reload' %>
   <%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
   <style><%= Rouge::Themes::Github.render(scope: '.highlight') %></style>
 </head>
@@ -23,6 +24,7 @@
             <% lg.item(active: current_page?(pages_path('collapse'))) do %><%= link_to 'Collapse', pages_path('collapse') %><% 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 %>
             <% lg.item(active: current_page?(pages_path('tooltips'))) do %><%= link_to 'Tooltips', pages_path('tooltips') %><% end %>
           <%- end %>
         </div>

data/lib/bs5/engine.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require 'view_component/engine'
+require 'sprockets/railtie'
 module Bs5
   class Engine < ::Rails::Engine
     isolate_namespace Bs5
@@ -9,5 +10,10 @@ module Bs5
     config.before_configuration do |app|
       app.config.view_component.preview_paths << "#{Bs5::Engine.root}/spec/components/previews"
     end
+
+    initializer 'bs5.assets.precompile' do |app|
+      app.config.assets.paths << Rails.root.join('app/assets/javascripts')
+      app.config.assets.precompile << 'bs5/application.js'
+    end
   end
 end

data/lib/bs5/version.rb

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

data/lib/tasks/rubocop.rake

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+return unless defined?(RuboCop)
+
 require 'rubocop/rake_task'
 
 RuboCop::RakeTask.new(:rubocop)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.19
+  version: 0.0.24
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-12 00:00:00.000000000 Z
+date: 2020-12-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: nokogiri
@@ -100,20 +100,6 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 4.0.1
-- !ruby/object:Gem::Dependency
-  name: rubocop-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2.8'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '2.8'
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -139,6 +125,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/bs5_manifest.js
+- app/assets/javascripts/bs5/application.js
 - app/assets/stylesheets/bs5/application.css
 - app/components/bs5/accordion_component.html.erb
 - app/components/bs5/accordion_component.rb
@@ -160,6 +147,8 @@ files:
 - app/components/bs5/example_component.rb
 - app/components/bs5/list_group_component.html.erb
 - app/components/bs5/list_group_component.rb
+- app/components/bs5/spinner_component.html.erb
+- app/components/bs5/spinner_component.rb
 - app/controllers/bs5/application_controller.rb
 - app/controllers/bs5/pages_controller.rb
 - app/helpers/bs5/application_helper.rb
@@ -176,19 +165,19 @@ files:
 - 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/color/_example.html.erb
+- app/views/bs5/examples/alert/color/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
 - app/views/bs5/examples/alert/dismissable/snippet.html.erb
-- app/views/bs5/examples/alert/style/_example.html.erb
-- app/views/bs5/examples/alert/style/snippet.html.erb
+- app/views/bs5/examples/badge/color/_example.html.erb
+- app/views/bs5/examples/badge/color/snippet.html.erb
 - app/views/bs5/examples/badge/default/_example.html.erb
 - app/views/bs5/examples/badge/default/button.html.erb
 - app/views/bs5/examples/badge/default/snippet.html.erb
 - app/views/bs5/examples/badge/pill/_example.html.erb
 - 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/button_group/button_toolbar/_example.html.erb
@@ -258,6 +247,24 @@ files:
 - app/views/bs5/examples/popovers/dismissable_on_next_click/snippet.html.erb
 - app/views/bs5/examples/popovers/four_directions/_example.html.erb
 - app/views/bs5/examples/popovers/four_directions/snippet.html.erb
+- app/views/bs5/examples/spinners/border/_example.html.erb
+- app/views/bs5/examples/spinners/border/snippet.html.erb
+- app/views/bs5/examples/spinners/buttons/_example.html.erb
+- app/views/bs5/examples/spinners/buttons/snippet.html.erb
+- app/views/bs5/examples/spinners/colors/_example.html.erb
+- app/views/bs5/examples/spinners/colors/snippet.html.erb
+- app/views/bs5/examples/spinners/growing/_example.html.erb
+- app/views/bs5/examples/spinners/growing/colors.html.erb
+- app/views/bs5/examples/spinners/growing/snippet.html.erb
+- app/views/bs5/examples/spinners/options/_example.html.erb
+- app/views/bs5/examples/spinners/options/floats.html.erb
+- app/views/bs5/examples/spinners/options/margin.html.erb
+- app/views/bs5/examples/spinners/options/placement_flex1.html.erb
+- app/views/bs5/examples/spinners/options/placement_flex2.html.erb
+- app/views/bs5/examples/spinners/options/text_align.html.erb
+- app/views/bs5/examples/spinners/size/_example.html.erb
+- app/views/bs5/examples/spinners/size/size1.html.erb
+- app/views/bs5/examples/spinners/size/size2.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
@@ -272,6 +279,7 @@ files:
 - app/views/bs5/pages/collapse.html.erb
 - app/views/bs5/pages/list_group.html.erb
 - app/views/bs5/pages/popovers.html.erb
+- app/views/bs5/pages/spinners.html.erb
 - app/views/bs5/pages/tooltips.html.erb
 - app/views/layouts/bs5/application.html.erb
 - app/views/layouts/bs5/pages.html.erb

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

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

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

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

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

@@ -1,8 +0,0 @@
-<%= 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) %>