bs5 0.0.23 → 0.0.28

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

@@ -0,0 +1,3 @@
+<h3>Split button</h3>
+<%= bs5_example(snippet: 'dropdowns/split/snippet1') %>
+<%= bs5_example(snippet: 'dropdowns/split/snippet2') %>

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

@@ -0,0 +1,35 @@
+<%= bs5_dropdown('Primary', split: true, 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 %>
+
+<%= bs5_dropdown('Secondary', split: true, 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 %>
+
+<%= bs5_dropdown('Success', split: true, 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 %>
+
+<%= bs5_dropdown('Info', split: true, 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 %>
+
+<%= bs5_dropdown('Warning', split: true, 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 %>
+
+<%= bs5_dropdown('Danger', split: true, 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 %>

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

@@ -0,0 +1,47 @@
+<%= bs5_dropdown('Primary', split: true, 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 %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Secondary', split: true, 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 %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Success', split: true, 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 %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Info', split: true, 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 %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Warning', split: true, 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 %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>
+
+<%= bs5_dropdown('Danger', split: true, 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 %>
+  <%= d.item %>
+  <%= d.item do %><%= link_to 'Separated link', '#' %><% end %>
+<% end %>

data/app/views/bs5/examples/list_group/active/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.item(active: true) do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
-  <% lg.item do %>Porta ac consectetur ac<% end %>
-  <% lg.item do %>Vestibulum at eros<% end %>
+  <% lg.item(active: true) { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
+  <% lg.item { "Porta ac consectetur ac" } %>
+  <% lg.item { "Vestibulum at eros" } %>
 <%- end %>

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

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
-  <% lg.item do %>Porta ac consectetur ac<% end %>
-  <% lg.item do %>Vestibulum at eros<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
+  <% lg.item { "Porta ac consectetur ac" } %>
+  <% lg.item { "Vestibulum at eros" } %>
 <%- end %>

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

@@ -1,7 +1,7 @@
 <%= bs5_list_group do |lg| %>
-  <% lg.item(disabled: true) do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
-  <% lg.item do %>Porta ac consectetur ac<% end %>
-  <% lg.item do %>Vestibulum at eros<% end %>
+  <% lg.item(disabled: true) { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
+  <% lg.item { "Porta ac consectetur ac" } %>
+  <% lg.item { "Vestibulum at eros" } %>
 <%- end %>

data/app/views/bs5/examples/list_group/flush/snippet.html.erb

@@ -1,7 +1,7 @@
 <%= bs5_list_group(flush: true) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
-  <% lg.item do %>Porta ac consectetur ac<% end %>
-  <% lg.item do %>Vestibulum at eros<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
+  <% lg.item { "Porta ac consectetur ac" } %>
+  <% lg.item { "Vestibulum at eros" } %>
 <%- end %>

data/app/views/bs5/examples/list_group/horizontal/snippet.html.erb

@@ -1,30 +1,30 @@
 <%= bs5_list_group(horizontal: true) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :sm) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :md) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :lg) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :xl) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- end %>
 <%= bs5_list_group(horizontal: :xxl) do |lg| %>
-  <% lg.item do %>Cras justo odio<% end %>
-  <% lg.item do %>Dapibus ac facilisis in<% end %>
-  <% lg.item do %>Morbi leo risus<% end %>
+  <% lg.item { "Cras justo odio" } %>
+  <% lg.item { "Dapibus ac facilisis in" } %>
+  <% lg.item { "Morbi leo risus" } %>
 <%- 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(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 %>
+  <% lg.item(color: :primary) { "A simple primary list group item" } %>
+  <% lg.item(color: :secondary) { "A simple secondary list group item" } %>
+  <% lg.item(color: :success) { "A simple success list group item" } %>
+  <% lg.item(color: :danger) { "A simple danger list group item" } %>
+  <% lg.item(color: :warning) { "A simple warning list group item" } %>
+  <% lg.item(color: :info) { "A simple info list group item" } %>
+  <% lg.item(color: :light) { "A simple light list group item" } %>
+  <% lg.item(color: :dark) { "A simple dark list group item" } %>
 <%- end %>

data/app/views/bs5/examples/modal/_examples.html.erb

@@ -0,0 +1,9 @@
+<h2>Examples</h2>
+<h3>Live demo</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet1') %>
+<h3>Static backdrop</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet2') %>
+<h3>Scrolling long content</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet3') %>
+<h3>Vertically centered</h3>
+<%= bs5_example(snippet: 'modal/examples/snippet4') %>

data/app/views/bs5/examples/modal/_fullscreen.html.erb

@@ -0,0 +1,2 @@
+<h2>Fullscreen Modal</h2>
+<%= bs5_example(snippet: 'modal/fullscreen/snippet1') %>

data/app/views/bs5/examples/modal/_optional_sizes.html.erb

@@ -0,0 +1,2 @@
+<h2>Optional sizes</h2>
+<%= bs5_example(snippet: 'modal/optional_sizes/snippet1') %>

data/app/views/bs5/examples/modal/examples/snippet1.html.erb

@@ -0,0 +1,12 @@
+<%= bs5_modal do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>Modal body text goes here.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/examples/snippet2.html.erb

@@ -0,0 +1,12 @@
+<%= bs5_modal(backdrop: :static, keyboard: false) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>I will not close if you click outside me. Don't even try to press escape key.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Understood', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/examples/snippet3.html.erb

@@ -0,0 +1,14 @@
+<%= bs5_modal(scroll: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <% 15.times do %>
+      <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+    <% end %>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/examples/snippet4.html.erb

@@ -0,0 +1,12 @@
+<%= bs5_modal(center: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Launch demo modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Modal title' } %>
+  <%= m.body do %>
+    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+  <% end %>
+  <%= m.footer do %>
+    <%= bs5_button_tag('Save changes', type: 'button') %>
+  <% end %>
+<% end %>

data/app/views/bs5/examples/modal/fullscreen/snippet1.html.erb

@@ -0,0 +1,55 @@
+<%= bs5_modal(fullscreen: true) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen modal' } %>
+  <%= m.body do %>
+    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+  <% end %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :sm) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below sm', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below sm' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :md) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below md', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below md' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :lg) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below lg', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below lg' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :xl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below xl', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below xl' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>
+
+<%= bs5_modal(fullscreen: :xxl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Full screen below xxl', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Full screen below xxl' } %>
+  <%= m.body { '...'} %>
+  <%= m.footer {} %>
+<% end %>

data/app/views/bs5/examples/modal/optional_sizes/snippet1.html.erb

@@ -0,0 +1,23 @@
+<%= bs5_modal(size: :xl) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Extra large modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Extra large modal' } %>
+  <%= m.body { '...' } %>
+<% end %>
+
+<%= bs5_modal(size: :lg) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Large modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Large modal' } %>
+  <%= m.body { '...' } %>
+<% end %>
+
+<%= bs5_modal(size: :sm) do |m| %>
+  <%= m.controller do %>
+    <%= bs5_button_tag('Small modal', type: 'button') %>
+  <% end %>
+  <%= m.header { 'Small modal' } %>
+  <%= m.body { '...' } %>
+<% end %>

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 { "Hello, world! This is a toast message." } %>
+<% end %>