bs5 0.0.21 → 0.0.26

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

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

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

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

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

@@ -1,3 +1 @@
-<%= bs5_alert do %>
-  A simple primary alert—check it out!
-<%- end %>
+<%= bs5_alert { "A simple primary alert—check it out!" } %>

data/app/views/bs5/examples/dropdowns/dark/_example.html.erb

@@ -0,0 +1,2 @@
+<h2>Dark dropdown</h2>
+<%= bs5_example(snippet: 'dropdowns/dark/snippet') %>

data/app/views/bs5/examples/dropdowns/dark/snippet.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_dropdown('Dropdown button', dark: true) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#', class: 'active' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/_example.html.erb

@@ -0,0 +1,7 @@
+<h2>Directions</h2>
+<h3>Dropup</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet1') %>
+<h3>Dropright</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet2') %>
+<h3>Dropleft</h3>
+<%= bs5_example(snippet: 'dropdowns/directions/snippet3') %>

data/app/views/bs5/examples/dropdowns/directions/snippet1.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop up', direction: :up) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropup', split: true, direction: :up) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/snippet2.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop end', direction: :end) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropend', split: true, direction: :end) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/directions/snippet3.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Drop start', direction: :start) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Split dropstart', split: true, direction: :start) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/_example.html.erb

@@ -0,0 +1,5 @@
+<h2>Menu alignment</h2>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet1') %>
+<h3>Responsive alignment</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet2') %>
+<%= bs5_example(snippet: 'dropdowns/menu_alignment/snippet3') %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Right-aligned menu example', align: :end) do |d| %>
+  <%= d.item do %><%= button_tag 'Action' %><% end %>
+  <%= d.item do %><%= button_tag 'Another action' %><% end %>
+  <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet2.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Left-aligned but right aligned when large screen', align: { end: :lg }) do |d| %>
+    <%= d.item do %><%= button_tag 'Action' %><% end %>
+    <%= d.item do %><%= button_tag 'Another action' %><% end %>
+    <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_alignment/snippet3.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Right-aligned but left aligned when large screen', align: { start: :lg }) do |d| %>
+    <%= d.item do %><%= button_tag 'Action' %><% end %>
+    <%= d.item do %><%= button_tag 'Another action' %><% end %>
+    <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/_example.html.erb

@@ -0,0 +1,9 @@
+<h2>Menu content</h2>
+<h3>Headers</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet1') %>
+<h3>Dividers</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet2') %>
+<h3>Text</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet3') %>
+<h3>Forms</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_content/snippet4') %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><h6 class="dropdown-header">Dropdown header</h6><% end %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet2.html.erb

@@ -0,0 +1,7 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet3.html.erb

@@ -0,0 +1,10 @@
+<%= bs5_dropdown('Dropdown') do %>
+  <div class="p-4 text-muted" style="max-width: 200px;">
+    <p>
+      Some example text that's free-flowing within the dropdown menu.
+    </p>
+    <p class="mb-0">
+      And this is more example text.
+    </p>
+  </div>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_content/snippet4.html.erb

@@ -0,0 +1,24 @@
+<%= bs5_dropdown('Dropdown') do %>
+  <form class="px-4 py-3">
+    <div class="mb-3">
+      <label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
+      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
+    </div>
+    <div class="mb-3">
+      <label for="exampleDropdownFormPassword1" class="form-label">Password</label>
+      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
+    </div>
+    <div class="mb-3">
+      <div class="form-check">
+        <input type="checkbox" class="form-check-input" id="dropdownCheck">
+        <label class="form-check-label" for="dropdownCheck">
+          Remember me
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Sign in</button>
+  </form>
+  <div class="dropdown-divider"></div>
+  <a class="dropdown-item" href="#">New around here? Sign up</a>
+  <a class="dropdown-item" href="#">Forgot password?</a>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/_example.html.erb

@@ -0,0 +1,7 @@
+<h2>Menu items</h2>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet2') %>
+<h3>Active</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet3') %>
+<h3>Disabled</h3>
+<%= bs5_example(snippet: 'dropdowns/menu_items/snippet4') %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= button_tag 'Action' %><% end %>
+  <%= d.item do %><%= button_tag 'Another action' %><% end %>
+  <%= d.item do %><%= button_tag 'Something else here' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet2.html.erb

@@ -0,0 +1,6 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><span class="dropdown-item-text">Dropdown item text</span><% end %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet3.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Regular link', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Active link', '#', class: 'active' %><% end %>
+  <%= d.item do %><%= link_to 'Another link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/menu_items/snippet4.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown') do |d| %>
+  <%= d.item do %><%= link_to 'Regular link', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Disabled link', '#', class: 'disabled' %><% end %>
+  <%= d.item do %><%= link_to 'Another link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/_example.html.erb

@@ -0,0 +1,4 @@
+<h3>Single button</h3>
+<%= bs5_example(snippet: 'dropdowns/single/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/single/snippet2') %>
+<%= bs5_example(snippet: 'dropdowns/single/snippet3') %>

data/app/views/bs5/examples/dropdowns/single/snippet1.html.erb

@@ -0,0 +1,5 @@
+<%= bs5_dropdown('Dropdown button') do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/snippet2.html.erb

@@ -0,0 +1,47 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Primary', color: :primary) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Secondary', color: :secondary) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Success', color: :success) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Info', color: :info) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Warning', color: :warning) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Danger', color: :danger) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/single/snippet3.html.erb

@@ -0,0 +1,47 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Primary', color: :primary, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Secondary', color: :secondary, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Success', color: :success, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Info', color: :info, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Warning', color: :warning, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Danger', color: :danger, outline: true) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/sizing/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Sizing</h2>
+<%= bs5_example(snippet: 'dropdowns/sizing/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/sizing/snippet2') %>

data/app/views/bs5/examples/dropdowns/sizing/snippet1.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Large button', size: :large) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Large button', split: true, size: :large) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/dropdowns/sizing/snippet2.html.erb

@@ -0,0 +1,17 @@
+<%= bs5_button_group do %>
+  <%= bs5_dropdown('Small button', size: :small) do |d| %>
+    <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+    <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+    <%= d.item %>
+    <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+  <% end %>
+<% end %>
+
+<%= bs5_dropdown('Small button', split: true, size: :small) do |d| %>
+  <%= d.item do %><%= link_to 'Action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Another action', '#' %><% end %>
+  <%= d.item do %><%= link_to 'Something else here', '#' %><% end %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>