bs5 0.0.19 → 0.0.20

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2ffee97d6c26146be217198ac6cd314e3f03bcf8c883bdfee1ffc0c9cabc6aa2
-  data.tar.gz: 3cba5aa8ad8ff0994637535a48b7610a6cf0ba39d9c7f9e5b0551fedc02af77e
+  metadata.gz: 6a10864e2e8d54471af721b35c4cee8710a704ddeb49e54c71296d68acf695ca
+  data.tar.gz: b058adbe641f350fecb63df04974e81c9685de959aae26a00f5ca6b081662f35
 SHA512:
-  metadata.gz: 4dcef8bb95173c07b12af9a568e57d2602de1b420fe030e301ae68ca10ec8a9324c773953e02a950fc5cec1ebe2d560ba8a3b32a95aceb27a0aa0f36aa756f84
-  data.tar.gz: ec6e86d8e3149a3730ed4d9c9dcd8eb16226ecd422effd72ef0bd2052d42fd78997db598c2045dbba48856f2ce3ccf937bfa764bf4fb02ee74b91e5e6eb1f7e1
+  metadata.gz: 94b73504ea5d6227856deb460dd5feefc763fa5eeeb177a4d4274af42f1a84fded595763bfeff7d0e65df736ee8934187dc76fa4a049313b83108f3d5ab0f47f
+  data.tar.gz: 6242ebac4cd0789d8bf2d6e66adc431dd081fda8381c186ccc039bc5f9bc0d9ac737501426ff8d1252c5a9ecb63e3c2b1e8e404ca7f5e8f0fd3c89f192872a01

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/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

@@ -23,6 +23,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/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bs5
 version: !ruby/object:Gem::Version
-  version: 0.0.19
+  version: 0.0.20
 platform: ruby
 authors:
 - Patrick Baselier
@@ -160,6 +160,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 +178,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 +260,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 +292,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) %>