bs5 0.0.8 → 0.0.13

data/app/validators/style_validator.rb

@@ -1,11 +1,9 @@
 # frozen_string_literal: true
 
 class StyleValidator < ActiveModel::EachValidator
-  STYLES = %i[primary secondary success danger warning info light dark].freeze
-
   def validate_each(record, attribute, value)
-    return if value.in?(STYLES)
+    return if value.in?(valid_styles = record.class::STYLES)
 
-    record.errors.add(attribute, :inclusion, valid_styles: STYLES.to_sentence)
+    record.errors.add(attribute, :inclusion, valid_styles: valid_styles.to_sentence)
   end
 end

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

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

data/app/views/bs5/examples/accordion/flush/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>Flush</h3>
+<h2>Flush</h2>
 <%= bs5_example(snippet: 'accordion/flush/snippet') %>

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

@@ -1,2 +1,2 @@
-<h3>Additional content</h3>
+<h2>Additional content</h2>
 <%= bs5_example(snippet: 'alert/additional_content/snippet') %>

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

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

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

@@ -1,2 +1,2 @@
-<h3>Dismissing</h3>
+<h2>Dismissing</h2>
 <%= bs5_example(snippet: 'alert/dismissable/snippet') %>

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

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

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

@@ -1,2 +1,2 @@
-<h3>Example</h3>
+<h2>Example</h2>
 <%= bs5_example(snippet: 'badge/default/snippet') %>

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

@@ -1,2 +1,2 @@
-<h3>Pill badges</h3>
+<h2>Pill badges</h2>
 <%= bs5_example(snippet: 'badge/pill/snippet') %>

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

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

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

@@ -1,2 +1,2 @@
-<h3>Example</h3>
+<h2>Example</h2>
 <%= bs5_example(snippet: 'breadcrumb/default/snippet') %>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/_example.html.erb

@@ -0,0 +1,5 @@
+<h3>Block buttons</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/block_buttons/block_buttons') %>
+<%= bs5_example(snippet: 'buttons/button_tag/block_buttons/responsive_block_buttons_1') %>
+<%= bs5_example(snippet: 'buttons/button_tag/block_buttons/responsive_block_buttons_2') %>
+<%= bs5_example(snippet: 'buttons/button_tag/block_buttons/responsive_block_buttons_3') %>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/block_buttons.html.erb

@@ -0,0 +1,4 @@
+<div class="d-grid gap-2">
+  <%= bs5_button_tag %>
+  <%= bs5_button_tag %>
+</div>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_1.html.erb

@@ -0,0 +1,4 @@
+<div class="d-grid gap-2 d-md-block">
+  <%= bs5_button_tag %>
+  <%= bs5_button_tag %>
+</div>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_2.html.erb

@@ -0,0 +1,4 @@
+<div class="d-grid gap-2 col-6 mx-auto">
+  <%= bs5_button_tag %>
+  <%= bs5_button_tag %>
+</div>

data/app/views/bs5/examples/buttons/button_tag/block_buttons/responsive_block_buttons_3.html.erb

@@ -0,0 +1,4 @@
+<div class="d-grid gap-2 d-md-flex justify-content-md-end">
+  <%= bs5_button_tag('Button', class: 'mr-md-2') %>
+  <%= bs5_button_tag %>
+</div>

data/app/views/bs5/examples/buttons/button_tag/default/_example.html.erb

@@ -0,0 +1,2 @@
+<h3>Example</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/default/snippet') %>

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

@@ -0,0 +1,15 @@
+<%= bs5_button_tag %>
+
+<%= bs5_button_tag('Reset', type: 'reset') %>
+
+<%= bs5_button_tag('Button', type: 'button') %>
+
+<%= bs5_button_tag('Reset', type: 'reset', disabled: true) %>
+
+<%= bs5_button_tag(type: 'button') do %>
+  <%= tag.strong('Ask me!') %>
+<% end %>
+
+<%= bs5_button_tag('Save', data: { confirm: 'Are you sure?' }) %>
+
+<%= bs5_button_tag('Checkout', data: { disable_with: 'Please wait...' }) %>

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

@@ -0,0 +1,2 @@
+<h3>Outline</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/outline/snippet') %>

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

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

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

@@ -0,0 +1,3 @@
+<h3>Sizes</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/size/large') %>
+<%= bs5_example(snippet: 'buttons/button_tag/size/small') %>

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

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

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

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

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

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

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

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

data/app/views/bs5/examples/buttons/button_tag/toggle_states/_example.html.erb

@@ -0,0 +1,2 @@
+<h3>Toggle states</h3>
+<%= bs5_example(snippet: 'buttons/button_tag/toggle_states/snippet') %>

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

@@ -0,0 +1,3 @@
+<%= bs5_button_tag('Toggle button', data: { toggle: 'button' }, autocomplete: 'off') %>
+<%= bs5_button_tag('Active toggle button', class: 'active', data: { toggle: 'button' }, autocomplete: 'off', aria: { pressed: true }) %>
+<%= bs5_button_tag('Disabled toggle button', data: { toggle: 'button' }, autocomplete: 'off', disabled: true) %>

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

@@ -0,0 +1,2 @@
+<h3>Example</h3>
+<%= bs5_example(snippet: 'buttons/button_to/default/snippet') %>

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

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

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

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

data/app/views/bs5/examples/close_button/disabled/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>Disabled</h3>
+<h2>Disabled</h2>
 <%= bs5_example(snippet: 'close_button/disabled/snippet') %>

data/app/views/bs5/examples/close_button/white/_example.html.erb

@@ -1,2 +1,2 @@
-<h3>White</h3>
+<h2>White</h2>
 <%= bs5_example(snippet: 'close_button/white/snippet') %>

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

@@ -0,0 +1,3 @@
+<h2>Links and buttons</h2>
+<%= bs5_example(snippet: 'list_group/actionable/snippet') %>
+<%= bs5_example(snippet: 'list_group/actionable/button') %>

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

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

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

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

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

@@ -0,0 +1,2 @@
+<h2>Active items</h2>
+<%= bs5_example(snippet: 'list_group/active/snippet') %>

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

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

data/app/views/bs5/examples/list_group/checkboxes_and_radios/_example.html.erb

@@ -0,0 +1,3 @@
+<h2>Checkboxes and radios</h2>
+<%= bs5_example(snippet: 'list_group/checkboxes_and_radios/default') %>
+<%= bs5_example(snippet: 'list_group/checkboxes_and_radios/with_labels') %>

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

@@ -0,0 +1,22 @@
+<%= bs5_list_group do |lg| %>
+  <% lg.slot(:item) do %>
+    <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+    Cras justo odio
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+    Dapibus ac facilisis in
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+    Morbi leo risus
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+    Porta ac consectetur ac
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+    Vestibulum at eros
+  <% end %>
+<%- end %>

data/app/views/bs5/examples/list_group/checkboxes_and_radios/with_labels.html.erb

@@ -0,0 +1,32 @@
+<%= bs5_list_group do |lg| %>
+  <% lg.slot(:item) do %>
+    <%= label_tag do %>
+      <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+      Cras justo odio
+    <% end %>
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= label_tag do %>
+      <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+      Dapibus ac facilisis in
+    <% end %>
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= label_tag do %>
+      <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+      Morbi leo risus
+    <% end %>
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= label_tag do %>
+      <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+      Porta ac consectetur ac
+    <% end %>
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= label_tag do %>
+      <%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
+      Vestibulum at eros
+    <% end %>
+  <% end %>
+<%- end %>

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

@@ -0,0 +1,2 @@
+<h2>Custom content</h2>
+<%= bs5_example(snippet: 'list_group/custom_content/default') %>

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

@@ -0,0 +1,32 @@
+<%= bs5_list_group do |lg| %>
+  <% lg.slot(:item, active: true) do %>
+    <%= link_to '#' do %>
+      <div class="d-flex w-100 justify-content-between">
+        <h5 class="mb-1">List group item heading</h5>
+        <small>3 days ago</small>
+      </div>
+      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      <small>Donec id elit non mi porta.</small>
+    <% end %>
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= link_to '#' do %>
+      <div class="d-flex w-100 justify-content-between">
+        <h5 class="mb-1">List group item heading</h5>
+        <small class="text-muted">3 days ago</small>
+      </div>
+      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      <small class="text-muted">Donec id elit non mi porta.</small>
+    <% end %>
+  <% end %>
+  <% lg.slot(:item) do %>
+    <%= link_to '#' do %>
+      <div class="d-flex w-100 justify-content-between">
+        <h5 class="mb-1">List group item heading</h5>
+        <small class="text-muted">3 days ago</small>
+      </div>
+      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+      <small class="text-muted">Donec id elit non mi porta.</small>
+    <% end %>
+  <% end %>
+<%- end %>

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

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

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

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

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

@@ -0,0 +1,2 @@
+<h2>Disabled items</h2>
+<%= bs5_example(snippet: 'list_group/disabled/snippet') %>

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

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

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

@@ -0,0 +1,2 @@
+<h2>Flush</h2>
+<%= bs5_example(snippet: 'list_group/flush/snippet') %>

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

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

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

@@ -0,0 +1,2 @@
+<h2>Horizontal</h2>
+<%= bs5_example(snippet: 'list_group/horizontal/snippet') %>

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

@@ -0,0 +1,30 @@
+<%= bs5_list_group(horizontal: true) do |lg| %>
+  <% lg.slot(:item) do %>Cras justo odio<% end %>
+  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
+  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+<%- end %>
+<%= bs5_list_group(horizontal: :sm) do |lg| %>
+  <% lg.slot(:item) do %>Cras justo odio<% end %>
+  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
+  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+<%- end %>
+<%= bs5_list_group(horizontal: :md) do |lg| %>
+  <% lg.slot(:item) do %>Cras justo odio<% end %>
+  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
+  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+<%- end %>
+<%= bs5_list_group(horizontal: :lg) do |lg| %>
+  <% lg.slot(:item) do %>Cras justo odio<% end %>
+  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
+  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+<%- end %>
+<%= bs5_list_group(horizontal: :xl) do |lg| %>
+  <% lg.slot(:item) do %>Cras justo odio<% end %>
+  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
+  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+<%- end %>
+<%= bs5_list_group(horizontal: :xxl) do |lg| %>
+  <% lg.slot(:item) do %>Cras justo odio<% end %>
+  <% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
+  <% lg.slot(:item) do %>Morbi leo risus<% end %>
+<%- end %>

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

@@ -0,0 +1,3 @@
+<h2>Contextual classes</h2>
+<%= bs5_example(snippet: 'list_group/style/default') %>
+<%= bs5_example(snippet: 'list_group/style/actionable') %>

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

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