bs5 0.0.9 → 0.0.14

data/app/controllers/bs5/pages_controller.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require_dependency 'bs5/application_controller'
+
+module Bs5
+  class PagesController < ApplicationController
+    def show
+      render template: "bs5/pages/#{params[:page]}"
+    end
+  end
+end

data/app/helpers/bs5/components_helper.rb

@@ -2,7 +2,7 @@
 
 module Bs5
   module ComponentsHelper
-    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag].freeze
+    COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to list_group].freeze
 
     COMPONENTS.each do |name|
       define_method("bs5_#{name}") do |*args, &block|
@@ -11,6 +11,19 @@ module Bs5
       end
     end
 
+    def bs5_tooltip(title, options = nil)
+      default_options = { toggle: :tooltip }
+      options = Hash(options).symbolize_keys.merge(default_options)
+      {
+        title: title,
+        data: options
+      }
+    end
+
+    def bs5_collapse(*args)
+      CollapseService.new(*args).to_hash
+    end
+
     private
 
     def render_component(component_clazz, *args)

data/app/service/bs5/collapse_service.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Bs5
+  class CollapseService
+    CONTROLS_ERR_MSG = 'Please provide either a `controls` option' \
+                       ' containing the id of the collapsible element' \
+                       ' or an ID selector as `target` options.'
+
+    attr_reader :expanded, :target, :controls
+
+    def initialize(expanded: false, target: nil, controls: nil)
+      @expanded = expanded
+      @target = target
+      @controls = controls
+    end
+
+    def to_hash
+      {
+        data: data_options,
+        aria: aria_options
+      }
+    end
+
+    private
+
+    def data_options
+      options = { toggle: :collapse }
+      options[:target] = target if target
+
+      options
+    end
+
+    def aria_options
+      options = { expanded: expanded }
+
+      if controls
+        options[:controls] = controls
+      elsif target&.start_with?('#')
+        options[:controls] = target.delete_prefix('#')
+      else
+        raise CONTROLS_ERR_MSG
+      end
+
+      options
+    end
+  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/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_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/collapse/default/_example.html.erb

@@ -0,0 +1,4 @@
+<h2>Example</h2>
+<%= bs5_example(snippet: 'collapse/default/snippet') %>
+<h2>Multiple targets</h2>
+<%= bs5_example(snippet: 'collapse/default/multiple_targets') %>

data/app/views/bs5/examples/collapse/default/multiple_targets.html.erb

@@ -0,0 +1,21 @@
+<p>
+  <%= link_to 'Toggle first element', '#multiCollapseExample1', bs5_collapse(controls: 'multiCollapseExample1 multiCollapseExample2').merge(class: 'btn btn-primary', role: :button) %>
+  <%= bs5_button_tag 'Toggle second element', bs5_collapse(target: '#multiCollapseExample2', controls: 'multiCollapseExample1 multiCollapseExample2') %>
+  <%= bs5_button_tag 'Toggle both elements', bs5_collapse(target: '.multi-collapse', controls: 'multiCollapseExample1 multiCollapseExample2') %>
+</p>
+<div class="row">
+  <div class="col">
+    <div class="collapse multi-collapse" id="multiCollapseExample1">
+      <div class="card card-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+      </div>
+    </div>
+  </div>
+  <div class="col">
+    <div class="collapse multi-collapse" id="multiCollapseExample2">
+      <div class="card card-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+<p>
+  <%= link_to 'Link with href', '#collapseExample', bs5_collapse(controls: 'collapseExample').merge(class: 'btn btn-primary', role: :button) %>
+  <%= bs5_button_tag 'Button with data-target', bs5_collapse(target: '#collapseExample').merge(type: :button) %>
+</p>
+<div class="collapse" id="collapseExample">
+  <div class="card card-body">
+    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+  </div>
+</div>

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