bs5 0.0.20 → 0.0.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6a10864e2e8d54471af721b35c4cee8710a704ddeb49e54c71296d68acf695ca
-  data.tar.gz: b058adbe641f350fecb63df04974e81c9685de959aae26a00f5ca6b081662f35
+  metadata.gz: 93ea7a16c5cb16edd48cabe938083b466af2171b895c9bfb7ca3da0e7bd9cf6a
+  data.tar.gz: 35bb524562a071eaf46e05da49b951e1606b27524f6e242d10be7a5cb6a4eeca
 SHA512:
-  metadata.gz: 94b73504ea5d6227856deb460dd5feefc763fa5eeeb177a4d4274af42f1a84fded595763bfeff7d0e65df736ee8934187dc76fa4a049313b83108f3d5ab0f47f
-  data.tar.gz: 6242ebac4cd0789d8bf2d6e66adc431dd081fda8381c186ccc039bc5f9bc0d9ac737501426ff8d1252c5a9ecb63e3c2b1e8e404ca7f5e8f0fd3c89f192872a01
+  metadata.gz: 011e84f5073b6cd7c6d9b3d2de76f077fedaeaa87f0e8c2aba6efa48457ffe271e8f3d589ec2b2d59eacccdf0a088e968921f3db682c1a846acb94e6ea7c2815
+  data.tar.gz: 66f86657bfd99ce53af4ea76123b72eed77454ed885b8c033a16fe6e579b67d20be9aa187a982687c80a80e49921577e107b249d081a8fa538b6bdbbef7080fc

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

@@ -1,6 +1,6 @@
 <div class="<%= component_class %>" role="alert">
   <%= content %>
   <%- if is_dismissable %>
-    <%= render Bs5::CloseButtonComponent.new(data: { 'bs-dismiss': :alert }) %>
+    <%= bs5_close_button(dismiss: :alert) %>
   <%- end %>
 </div>

data/app/components/bs5/alert_component.rb

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

data/app/components/bs5/button_tag_component.rb

@@ -47,6 +47,7 @@ module Bs5
       extract_color
       extract_outline
       extract_size
+      extract_dismiss
     end
 
     def extract_color
@@ -61,6 +62,10 @@ module Bs5
       @size = @options.delete(:size)
     end
 
+    def extract_dismiss
+      @dismiss = @options.delete(:dismiss)
+    end
+
     def merge_default_options
       @options.deep_merge!(default_options) do |_key, this_val, other_val|
         [this_val, other_val].join(' ').strip
@@ -68,7 +73,11 @@ module Bs5
     end
 
     def default_options
-      { class: button_class }
+      default_options = { class: button_class }
+
+      default_options[:data] = { 'bs-dismiss': @dismiss } if @dismiss
+
+      default_options
     end
 
     def button_class

data/app/components/bs5/close_button_component.rb

@@ -2,12 +2,19 @@
 
 module Bs5
   class CloseButtonComponent < ViewComponent::Base
-    attr_reader :data
+    def initialize(options = {})
+      @options = options.symbolize_keys
 
-    def initialize(disabled: false, white: false, data: nil)
-      @disabled = disabled
-      @white = white
-      @data = data
+      @disabled = options.delete(:disabled)
+      @white = options.delete(:white)
+      @dismiss = options.delete(:dismiss)
+      @data = options.fetch(:data, {})
+    end
+
+    def data
+      @data['bs-dismiss'] = @dismiss if @dismiss
+
+      @data
     end
 
     private
@@ -21,7 +28,8 @@ module Bs5
     end
 
     def component_class
-      class_names = ['btn-close']
+      class_names = Array(@options[:class])
+      class_names << 'btn-close'
       class_names << %w[btn-close-white] if white?
       class_names.join(' ')
     end

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

@@ -0,0 +1,3 @@
+<div class="toast-body">
+  <%= content %>
+</div>

data/app/components/bs5/toast/body_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Toast
+    class BodyComponent < ViewComponent::Base
+    end
+  end
+end

data/app/components/bs5/toast/header_component.html.erb

@@ -0,0 +1,4 @@
+<div class="toast-header">
+  <%= content %>
+  <%= bs5_close_button(dismiss: :toast) %>
+</div>

data/app/components/bs5/toast/header_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Bs5
+  module Toast
+    class HeaderComponent < ViewComponent::Base
+      include ComponentsHelper
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<%= tag.div(component_attributes) do %>
+  <%= header %>
+  <%= body %>
+
+  <%- if close_button? && !header? %>
+    <%= bs5_close_button(white: white_text?, class: 'ms-auto me-2', dismiss: :toast) %>
+  <% end %>
+<% end %>

data/app/components/bs5/toast_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ToastComponent < ViewComponent::Base
+    include ViewComponent::SlotableV2
+    include ComponentsHelper
+    using HashRefinement
+
+    attr_reader :color
+
+    renders_one :header, Bs5::Toast::HeaderComponent
+    renders_one :body, Bs5::Toast::BodyComponent
+
+    def initialize(options = {})
+      @options = options.symbolize_keys
+      @color = @options.delete(:color)
+      @close_button = @options.fetch(:close_button, true)
+      @data_options = @options.extract!(:animation, :autohide, :delay)
+    end
+
+    def header?
+      !!header
+    end
+
+    def component_attributes
+      default_options = {
+        role: :alert,
+        aria: { live: 'assertive', atomic: true },
+        data: data_options
+      }
+
+      @options[:class] = component_class
+
+      @options.merge(default_options)
+    end
+
+    def white_text?
+      color? && color.in?(%i[primary secondary success danger dark])
+    end
+
+    private
+
+    def data_options
+      @data_options.prefix_keys_with_bs
+    end
+
+    def component_class
+      class_names = Array(@options[:class])
+      class_names << 'toast'
+      class_names << contextual_class
+      class_names.compact.join(' ')
+    end
+
+    def contextual_class
+      return unless color?
+
+      class_names = ['border-0']
+      class_names << "bg-#{color}"
+      class_names << 'text-white' if white_text?
+
+      class_names
+    end
+
+    def color?
+      !!color
+    end
+
+    def close_button?
+      @close_button
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="<%= component_class %>"">
+  <%= content %>
+</div>

data/app/components/bs5/toast_container_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Bs5
+  class ToastContainerComponent < ViewComponent::Base
+    def initialize(options = {})
+      @options = options.symbolize_keys
+    end
+
+    def component_class
+      class_names = Array(@options[:class])
+      class_names << 'toast-container'
+      class_names.compact.join(' ')
+    end
+
+    def render?
+      content.present?
+    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 spinner].freeze
+                    list_group spinner toast toast_container].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|

data/app/views/bs5/examples/toasts/color_schemes/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Color schemes</h2>
+<%= bs5_example(snippet: 'toasts/color_schemes/snippet') %>

data/app/views/bs5/examples/toasts/color_schemes/snippet.html.erb

@@ -0,0 +1,33 @@
+<%= bs5_toast_container do %>
+  <%= bs5_toast(color: :primary, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :secondary, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :success, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :danger, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :warning, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :info, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :light, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(color: :dark, class: 'd-flex align-items-center') do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/toasts/custom_content/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Custom content</h2>
+<%= bs5_example(snippet: 'toasts/custom_content/snippet1') %>
+<%= bs5_example(snippet: 'toasts/custom_content/snippet2') %>

data/app/views/bs5/examples/toasts/custom_content/snippet1.html.erb

@@ -0,0 +1,3 @@
+<%= bs5_toast(class: 'd-flex align-items-center') do |t| %>
+  <%= t.body do %>Hello, world! This is a toast message.<% end %>
+<% end %>

data/app/views/bs5/examples/toasts/custom_content/snippet2.html.erb

@@ -0,0 +1,9 @@
+<%= bs5_toast(close_button: false) do |t| %>
+  <%= t.body do %>
+    Hello, world! This is a toast message.
+    <div class="mt-2 pt-2 border-top">
+      <%= bs5_button_tag('Take action', color: :primary, size: :small) %>
+      <%= bs5_button_tag('Close', color: :secondary, size: :small, dismiss: :toast) %>
+    </div>
+  <% end %>
+<% end %>

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

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

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

@@ -0,0 +1,17 @@
+<%= bs5_toast do |t| %>
+  <%= t.header do %>
+    <svg
+      class="bd-placeholder-img rounded me-2"
+      width="20"
+      height="20"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <rect width="100%" height="100%" fill="#007aff"></rect>
+    </svg>
+    <strong class="me-auto">Bootstrap</strong>
+    <small>11 mins ago</small>
+  <% end %>
+  <%= t.body do %>Hello, world! This is a toast message.<% end %>
+<% end %>

data/app/views/bs5/examples/toasts/js_options/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Options</h2>
+<%= bs5_example(snippet: 'toasts/js_options/snippet') %>

data/app/views/bs5/examples/toasts/js_options/snippet.html.erb

@@ -0,0 +1,23 @@
+<%= bs5_toast_container do %>
+  <%= bs5_toast(autohide: true, delay: 10_000, animation: false) do |t| %>
+    <%= t.header do %>
+      <svg
+        class="bd-placeholder-img rounded me-2"
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="100%" height="100%" fill="#007aff"></rect>
+      </svg>
+      <strong class="me-auto">Bootstrap</strong>
+      <small>11 mins ago</small>
+    <% end %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+
+  <%= bs5_toast(close_button: false, autohide: true, delay: 11_000) do |t| %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/toasts/placement/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Placement</h2>
+<%= bs5_example(snippet: 'toasts/placement/snippet1') %>
+<%= bs5_example(snippet: 'toasts/placement/snippet2') %>

data/app/views/bs5/examples/toasts/placement/snippet1.html.erb

@@ -0,0 +1,44 @@
+<div
+  aria-live="polite"
+  aria-atomic="true"
+  class="position-relative"
+  style="min-height: 240px"
+>
+  <%= bs5_toast_container(class: 'position-absolute top-0 end-0') do %>
+    <%= bs5_toast do |t| %>
+      <%= t.header do %>
+        <svg
+          class="bd-placeholder-img rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <strong class="me-auto">Bootstrap</strong>
+        <small>just now</small>
+      <% end %>
+      <%= t.body do %>See? Just like this.<% end %>
+    <% end %>
+
+    <%= bs5_toast do |t| %>
+      <%= t.header do %>
+        <svg
+          class="bd-placeholder-img rounded me-2"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <rect width="100%" height="100%" fill="#007aff"></rect>
+        </svg>
+        <strong class="me-auto">Bootstrap</strong>
+        <small>2 seconds ago</small>
+      <% end %>
+      <%= t.body do %>Heads up, toasts will stack automatically<% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/bs5/examples/toasts/placement/snippet2.html.erb

@@ -0,0 +1,24 @@
+<div
+  aria-live="polite"
+  aria-atomic="true"
+  class="d-flex justify-content-center align-items-center w-100"
+  style="min-height: 240px"
+>
+  <%= bs5_toast do |t| %>
+    <%= t.header do %>
+      <svg
+        class="bd-placeholder-img rounded me-2"
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="100%" height="100%" fill="#007aff"></rect>
+      </svg>
+      <strong class="me-auto">Bootstrap</strong>
+      <small>11 mins ago</small>
+    <% end %>
+    <%= t.body do %>Hello, world! This is a toast message.<% end %>
+  <% end %>
+</div>

data/app/views/bs5/examples/toasts/stacking/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Stacking</h2>
+<%= bs5_example(snippet: 'toasts/stacking/snippet') %>

data/app/views/bs5/examples/toasts/stacking/snippet.html.erb

@@ -0,0 +1,37 @@
+<%= bs5_toast_container do %>
+  <%= bs5_toast do |t| %>
+    <%= t.header do %>
+      <svg
+        class="bd-placeholder-img rounded me-2"
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="100%" height="100%" fill="#007aff"></rect>
+      </svg>
+      <strong class="me-auto">Bootstrap</strong>
+      <small>just now</small>
+    <% end %>
+    <%= t.body do %>See? Just like this.<% end %>
+  <% end %>
+
+  <%= bs5_toast do |t| %>
+    <%= t.header do %>
+      <svg
+        class="bd-placeholder-img rounded me-2"
+        width="20"
+        height="20"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <rect width="100%" height="100%" fill="#007aff"></rect>
+      </svg>
+      <strong class="me-auto">Bootstrap</strong>
+      <small>2 seconds ago</small>
+    <% end %>
+    <%= t.body do %>Heads up, toasts will stack automatically<% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<h1>Toasts</h1>
+<%= render 'bs5/examples/toasts/default/example' %>
+<%= render 'bs5/examples/toasts/stacking/example' %>
+<%= render 'bs5/examples/toasts/custom_content/example' %>
+<%= render 'bs5/examples/toasts/color_schemes/example' %>
+<%= render 'bs5/examples/toasts/placement/example' %>
+<%= render 'bs5/examples/toasts/js_options/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>
@@ -24,6 +25,7 @@
             <% 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('toasts'))) do %><%= link_to 'Toasts', pages_path('toasts') %><% 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.20'
+  VERSION = '0.0.25'
 end

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

@@ -1,24 +1,35 @@
 import * as bootstrap from "bootstrap";
 
-function tooltipify() {
-  const tooltipTriggerList = [].slice.call(
-    document.querySelectorAll('[data-bs-toggle="tooltip"]')
-  );
-  tooltipTriggerList.map(function (tooltipTriggerEl) {
-    return new bootstrap.Tooltip(tooltipTriggerEl);
-  });
+function popoverify() {
+  document
+    .querySelectorAll('[data-bs-toggle="popover"]')
+    .forEach(function (popoverTriggerEl) {
+      new bootstrap.Popover(popoverTriggerEl);
+    });
 }
 
-function popoverify() {
-  const popoverTriggerList = [].slice.call(
-    document.querySelectorAll('[data-bs-toggle="popover"]')
-  );
-  popoverTriggerList.map(function (popoverTriggerEl) {
-    return new bootstrap.Popover(popoverTriggerEl);
+function toastify() {
+  document.querySelectorAll(".toast").forEach(function (toastNode) {
+    let autohide = new RegExp("true", "i").test(
+      toastNode.dataset["bsAutohide"] || "false"
+    );
+    let toast = new bootstrap.Toast(toastNode, {
+      autohide,
+    });
+    toast.show();
   });
 }
 
+function tooltipify() {
+  document
+    .querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach(function (tooltipTriggerEl) {
+      new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+}
+
 export function start() {
   popoverify();
+  toastify();
   tooltipify();
 }

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.20
+  version: 0.0.25
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-12 00:00:00.000000000 Z
+date: 2020-12-20 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
@@ -162,6 +149,14 @@ files:
 - app/components/bs5/list_group_component.rb
 - app/components/bs5/spinner_component.html.erb
 - app/components/bs5/spinner_component.rb
+- app/components/bs5/toast/body_component.html.erb
+- app/components/bs5/toast/body_component.rb
+- app/components/bs5/toast/header_component.html.erb
+- app/components/bs5/toast/header_component.rb
+- app/components/bs5/toast_component.html.erb
+- app/components/bs5/toast_component.rb
+- app/components/bs5/toast_container_component.html.erb
+- app/components/bs5/toast_container_component.rb
 - app/controllers/bs5/application_controller.rb
 - app/controllers/bs5/pages_controller.rb
 - app/helpers/bs5/application_helper.rb
@@ -278,6 +273,20 @@ files:
 - 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/toasts/color_schemes/_example.html.erb
+- app/views/bs5/examples/toasts/color_schemes/snippet.html.erb
+- app/views/bs5/examples/toasts/custom_content/_example.html.erb
+- app/views/bs5/examples/toasts/custom_content/snippet1.html.erb
+- app/views/bs5/examples/toasts/custom_content/snippet2.html.erb
+- app/views/bs5/examples/toasts/default/_example.html.erb
+- app/views/bs5/examples/toasts/default/snippet.html.erb
+- app/views/bs5/examples/toasts/js_options/_example.html.erb
+- app/views/bs5/examples/toasts/js_options/snippet.html.erb
+- app/views/bs5/examples/toasts/placement/_example.html.erb
+- app/views/bs5/examples/toasts/placement/snippet1.html.erb
+- app/views/bs5/examples/toasts/placement/snippet2.html.erb
+- app/views/bs5/examples/toasts/stacking/_example.html.erb
+- app/views/bs5/examples/toasts/stacking/snippet.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
@@ -293,6 +302,7 @@ files:
 - 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/toasts.html.erb
 - app/views/bs5/pages/tooltips.html.erb
 - app/views/layouts/bs5/application.html.erb
 - app/views/layouts/bs5/pages.html.erb