ui_bibz 2.0.0.alpha24 → 2.0.0.alpha26

data/test/ui/inputs_test.rb

@@ -4,14 +4,14 @@ include UiBibz::Helpers
 class InputsTest < ActionView::TestCase
 
     test "Date Picker Field" do
-      actual   = UiBibz::Ui::Core::Inputs::DatePickerField.new(['date_1', 'date_2'], { append: 'a', prepend: 'b', range: 'u' }, { class: 'datepicker-test' }).render
+      actual   = UiBibz::Ui::Core::Forms::Dates::DatePickerField.new(['date_1', 'date_2'], { append: 'a', prepend: 'b', range: 'u' }, { class: 'datepicker-test' }).render
       expected = "<div class=\"input-group input-daterange\"><span class=\"input-group-addon\">a</span><input type=\"text\" name=\"date_1\" id=\"date_1\" class=\"datepicker-test date_picker form-control\" data-date-locale=\"en\" data-provide=\"datepicker\" data-date-format=\"dd/mm/yyyy\" data-date-today-btn=\"linked\" /><span class=\"input-group-addon input-group-range\">u</span><input type=\"text\" name=\"date_2\" id=\"date_2\" class=\"datepicker-test date_picker form-control\" data-date-locale=\"en\" data-provide=\"datepicker\" data-date-format=\"dd/mm/yyyy\" data-date-today-btn=\"linked\" /><span class=\"input-group-addon\">b</span></div>"
 
       assert_equal expected, actual
     end
 
     test "Date Picker Field data html options" do
-      actual   = UiBibz::Ui::Core::Inputs::DatePickerField.new('date', { today_highlight: true, calendar_weeks: true, autoclose: true, dates_disabled: ["11/01/2016", "12/01/2016"] }, { class: 'datepicker-test' }).render
+      actual   = UiBibz::Ui::Core::Forms::Dates::DatePickerField.new('date', { today_highlight: true, calendar_weeks: true, autoclose: true, dates_disabled: ["11/01/2016", "12/01/2016"] }, { class: 'datepicker-test' }).render
       expected = "<input type=\"text\" name=\"date\" id=\"date\" class=\"datepicker-test date_picker form-control\" data-date-locale=\"en\" data-provide=\"datepicker\" data-date-format=\"dd/mm/yyyy\" data-date-today-btn=\"linked\" data-date-today-highlight=\"true\" data-date-calendar-weeks=\"true\" data-date-autoclose=\"true\" data-dates-disabled=\"[&quot;11/01/2016&quot;,&quot;12/01/2016&quot;]\" />"
 
       assert_equal expected, actual
@@ -19,7 +19,7 @@ class InputsTest < ActionView::TestCase
 
     test "Multi Column Field" do
       options  = options_for_select(2.times.map{ |i| "option #{i}" })
-      actual   = UiBibz::Ui::Core::Inputs::MultiColumnField.new('example', option_tags: options).render
+      actual   = UiBibz::Ui::Core::Forms::Selects::MultiColumnField.new('example', option_tags: options).render
       expected = "<select name=\"example[]\" id=\"example\" class=\"multi-column\" multiple=\"multiple\"><option value=\"option 0\">option 0</option>
 <option value=\"option 1\">option 1</option></select>"
 
@@ -28,7 +28,7 @@ class InputsTest < ActionView::TestCase
 
     test "Multi Column Field data html options" do
       grouped_options = { 'North America' => [['United statuss','US'], 'Canada'], 'Europe' => ['Denmark','Germany','France'] }
-      actual   = UiBibz::Ui::Core::Inputs::MultiColumnField.new('example', { option_tags:  grouped_options_for_select(grouped_options), searchable: true, selectable_opt_group: true }).render
+      actual   = UiBibz::Ui::Core::Forms::Selects::MultiColumnField.new('example', { option_tags:  grouped_options_for_select(grouped_options), searchable: true, selectable_opt_group: true }).render
       expected = "<select name=\"example[]\" id=\"example\" data-searchable=\"true\" data-selectable-optgroup=\"true\" class=\"multi-column\" multiple=\"multiple\"><optgroup label=\"North America\"><option value=\"US\">United statuss</option>
 <option value=\"Canada\">Canada</option></optgroup><optgroup label=\"Europe\"><option value=\"Denmark\">Denmark</option>
 <option value=\"Germany\">Germany</option>
@@ -39,7 +39,7 @@ class InputsTest < ActionView::TestCase
 
     test "Multi Select Field" do
       options  = options_for_select(2.times.map{ |i| "option #{i}" })
-      actual   = UiBibz::Ui::Core::Inputs::MultiSelectField.new('example', option_tags: options).render
+      actual   = UiBibz::Ui::Core::Forms::Selects::MultiSelectField.new('example', option_tags: options).render
       expected = "<select name=\"example[]\" id=\"example\" class=\"btn-secondary btn multi-select\" multiple=\"multiple\"><option value=\"option 0\">option 0</option>
 <option value=\"option 1\">option 1</option></select>"
 
@@ -48,7 +48,7 @@ class InputsTest < ActionView::TestCase
 
     test "Multi Select Field data html options" do
       grouped_options = { 'North America' => [['United statuss','US'], 'Canada'], 'Europe' => ['Denmark','Germany','France'] }
-      actual   = UiBibz::Ui::Core::Inputs::MultiSelectField.new('example', { option_tags: grouped_options_for_select(grouped_options), clickable_opt_group: true, collapsible_opt_group: true, searchable: true, select_all_option: true, status: :danger }).render
+      actual   = UiBibz::Ui::Core::Forms::Selects::MultiSelectField.new('example', { option_tags: grouped_options_for_select(grouped_options), clickable_opt_group: true, collapsible_opt_group: true, searchable: true, select_all_option: true, status: :danger }).render
       expected = "<select name=\"example[]\" id=\"example\" data-enable-clickable-opt-groups=\"true\" data-enable-collapsible-opt-groups=\"true\" data-enable-filtering=\"true\" data-include-select-all-option=\"true\" class=\"btn-danger btn multi-select\" multiple=\"multiple\"><optgroup label=\"North America\"><option value=\"US\">United statuss</option>
 <option value=\"Canada\">Canada</option></optgroup><optgroup label=\"Europe\"><option value=\"Denmark\">Denmark</option>
 <option value=\"Germany\">Germany</option>
@@ -58,21 +58,21 @@ class InputsTest < ActionView::TestCase
     end
 
     test 'surround_field without prepend and append' do
-      actual = UiBibz::Ui::Core::Inputs::SurroundField.new('test').render
+      actual = UiBibz::Ui::Core::Forms::Texts::SurroundField.new('test').render
       expected = "<input type=\"text\" name=\"test\" id=\"test\" class=\"form-control\" />"
 
       assert_equal expected, actual
     end
 
     test 'surround_field with prepend and append' do
-      actual = UiBibz::Ui::Core::Inputs::SurroundField.new('test', append: '1', prepend: '2').render
+      actual = UiBibz::Ui::Core::Forms::Texts::SurroundField.new('test', append: '1', prepend: '2').render
       expected = "<div class=\"input-group\"><span class=\"input-group-addon\">1</span><input type=\"text\" name=\"test\" id=\"test\" class=\"form-control\" /><span class=\"input-group-addon\">2</span></div>"
 
       assert_equal expected, actual
     end
 
     test 'surround_field size' do
-      actual = UiBibz::Ui::Core::Inputs::SurroundField.new('test', size: :xs, append: '1', prepend: '2').render
+      actual = UiBibz::Ui::Core::Forms::Texts::SurroundField.new('test', size: :xs, append: '1', prepend: '2').render
       expected = "<div class=\"input-group input-group-xs\"><span class=\"input-group-addon\">1</span><input type=\"text\" name=\"test\" id=\"test\" class=\"form-control\" /><span class=\"input-group-addon\">2</span></div>"
 
       assert_equal expected, actual
@@ -80,7 +80,7 @@ class InputsTest < ActionView::TestCase
 
     test 'autocomplete_field' do
       options  = options_for_select(2.times.map{ |i| "option #{i}" })
-      actual = UiBibz::Ui::Core::Inputs::AutocompleteField.new('test', { option_tags: options }, { id: 'test' }).render
+      actual = UiBibz::Ui::Core::Forms::Texts::AutocompleteField.new('test', { option_tags: options }, { id: 'test' }).render
       expected = "<input type=\"text\" name=\"test\" id=\"test\" class=\"form-control\" autocomplete=\"true\" list=\"test-datalist\" /><datalist id=\"test-datalist\"><option value=\"option 0\">option 0</option>
 <option value=\"option 1\">option 1</option></datalist>"
 
@@ -88,17 +88,31 @@ class InputsTest < ActionView::TestCase
     end
 
     test 'formula_field' do
-      actual = UiBibz::Ui::Core::Inputs::FormulaField.new('value').render
+      actual = UiBibz::Ui::Core::Forms::Numbers::FormulaField.new('value').render
       expected = "<div class=\"input-group formula_field\"><input type=\"text\" name=\"value_formula\" id=\"value_formula\" value=\"\" class=\"formula_field_input form-control\" /><span class=\"formula_field_sign input-group-addon\">=</span><input type=\"text\" name=\"value\" id=\"value\" readonly=\"readonly\" class=\"formula_field_result form-control\" /><span class=\"formula_field_alert input-group-addon\" data-toggle=\"tooltip\"><i class=\"glyph-danger glyph fa fa-exclamation-triangle\"></i></span></div>"
 
       assert_equal expected, actual
     end
 
     test 'markdown_editor' do
-      actual = UiBibz::Ui::Core::Inputs::MarkdownEditorField.new('comments').render
+      actual = UiBibz::Ui::Core::Forms::Textareas::MarkdownEditorField.new('comments').render
       expected = "<textarea name=\"comments\" id=\"comments\" data-provide=\"markdown\" data-iconlibrary=\"fa\">
 </textarea>"
 
       assert_equal expected, actual
     end
+
+    test 'checkbox_field' do
+      actual = UiBibz::Ui::Core::Forms::Choices::CheckboxField.new('John', { value: 1, status: :primary, type: :circle }).render
+      expected = "<div class=\"abc-checkbox-primary checkbox abc-checkbox abc-checkbox-circle\"><input type=\"checkbox\" name=\"John\" id=\"John\" value=\"1\" class=\"styled\" /><label for=\"John\">John</label></div>"
+
+      assert_equal expected, actual
+    end
+
+    test 'radio_field' do
+      actual = UiBibz::Ui::Core::Forms::Choices::RadioField.new('John', { value: 1, status: :primary, type: :square }).render
+      expected = "<div class=\"abc-checkbox-primary checkbox abc-checkbox\"><input type=\"radio\" name=\"John\" id=\"John_1\" value=\"1\" /><label for=\"John_1\">John</label></div>"
+
+      assert_equal expected, actual
+    end
 end

data/test/ui/list_group_test.rb

@@ -3,7 +3,7 @@ include UiBibz::Helpers
 class ListGroupTest < ActionView::TestCase
 
   test 'list_group with link' do
-    actual = UiBibz::Ui::Core::ListGroup.new(type: :link).tap do |lg|
+    actual = UiBibz::Ui::Core::Lists::ListGroup.new(type: :link).tap do |lg|
       lg.list 'Momo', { status: :success, url: '#momo' }
       lg.list({ tap: true, active: true, url: '#state' }) do |l|
         l.header 'My title'
@@ -16,7 +16,7 @@ class ListGroupTest < ActionView::TestCase
   end
 
   test 'list_group' do
-    actual = UiBibz::Ui::Core::ListGroup.new().tap do |lg|
+    actual = UiBibz::Ui::Core::Lists::ListGroup.new().tap do |lg|
       lg.list 'Lulu'
       lg.list 'state'
     end.render

data/test/ui/{stars_test.rb → star_test.rb}

@@ -1,40 +1,40 @@
 require 'test_helper'
 
 include UiBibz::Helpers
-class StarsTest < ActionView::TestCase
+class StarTest < ActionView::TestCase
 
     test "stars with 1" do
-      actual   = UiBibz::Ui::Core::Stars.new(1).render
+      actual   = UiBibz::Ui::Core::Star.new(1).render
       expected = "<span class=\"stars-notation\"><i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i></span>"
       assert_equal expected, actual
     end
 
     test "stars with 2.1" do
-      actual   = UiBibz::Ui::Core::Stars.new(2.1).render
+      actual   = UiBibz::Ui::Core::Star.new(2.1).render
       expected = "<span class=\"stars-notation\"><i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star-half-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i></span>"
       assert_equal expected, actual
     end
 
     test "stars with 3.6 with status danger" do
-      actual   = UiBibz::Ui::Core::Stars.new(3.6, { status: :danger }).render
+      actual   = UiBibz::Ui::Core::Star.new(3.6, { status: :danger }).render
       expected = "<span class=\"stars-notation\"><i class=\"glyph-danger glyph fa fa-star\"></i> <i class=\"glyph-danger glyph fa fa-star\"></i> <i class=\"glyph-danger glyph fa fa-star\"></i> <i class=\"glyph-danger glyph fa fa-star-half-o\"></i> <i class=\"glyph-danger glyph fa fa-star-o\"></i></span>"
       assert_equal expected, actual
     end
 
     test "stars with 4.9" do
-      actual   = UiBibz::Ui::Core::Stars.new(4.9).render
+      actual   = UiBibz::Ui::Core::Star.new(4.9).render
       expected = "<span class=\"stars-notation\"><i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star-half-o\"></i></span>"
       assert_equal expected, actual
     end
 
     test "stars with 5" do
-      actual   = UiBibz::Ui::Core::Stars.new(5).render
+      actual   = UiBibz::Ui::Core::Star.new(5).render
       expected = "<span class=\"stars-notation\"><i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i></span>"
       assert_equal expected, actual
     end
 
     test "stars with number options 11.2" do
-      actual   = UiBibz::Ui::Core::Stars.new(2.5, { num: 11.2 }).render
+      actual   = UiBibz::Ui::Core::Star.new(2.5, { num: 11.2 }).render
       expected = "<span class=\"stars-notation\"><i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star\"></i> <i class=\"glyph fa fa-star-half-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i> <i class=\"glyph fa fa-star-o\"></i></span>"
       assert_equal expected, actual
     end

data/test/ui/table_test.rb

@@ -32,7 +32,7 @@ class TableTest < ActionView::TestCase
 
   test 'table pagination' do
     actual = UiBibz::Ui::Ux::Tables::TablePagination.new({ store: @users }).render
-    expected = "<ul class=\"pagination pagination\"><li class=\"prev disabled\"><span>&#8592; Previous</span></li> <li class=\"active\"><span>1</span></li> <li><a rel=\"next\" href=\"/users?direction=asc&amp;page=2&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">2</a></li> <li><a href=\"/users?direction=asc&amp;page=3&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">3</a></li> <li><a href=\"/users?direction=asc&amp;page=4&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">4</a></li> <li><a href=\"/users?direction=asc&amp;page=5&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">5</a></li> <li><a href=\"/users?direction=asc&amp;page=6&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">6</a></li> <li><a href=\"/users?direction=asc&amp;page=7&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">7</a></li> <li><a href=\"/users?direction=asc&amp;page=8&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">8</a></li> <li><a href=\"/users?direction=asc&amp;page=9&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">9</a></li> <li class=\"disabled\"><span>&hellip;</span></li> <li><a href=\"/users?direction=asc&amp;page=12&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">12</a></li> <li><a href=\"/users?direction=asc&amp;page=13&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">13</a></li> <li class=\"next\"><a rel=\"next\" href=\"/users?direction=asc&amp;page=2&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">Next &#8594;</a></li></ul>"
+    expected = "<nav class=\"pagination\"><ul class=\"pagination\" role=\"group\"><li class=\"previous page-item disabled\"><span class=\"page-link\">&laquo;</span></li> <li class=\"page-item active\"><span class=\"page-link\">1</span></li> <li class=\"page-item\"><a class=\"page-link\" rel=\"next\" href=\"/users?direction=asc&amp;page=2&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">2</a></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=3&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">3</a></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=4&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">4</a></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=5&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">5</a></li> <li class=\"page-item disabled\"><i class=\"page-link\">&hellip;</i></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=12&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">12</a></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=13&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">13</a></li> <li class=\"next page-item\"><a class=\"page-link\" rel=\"next\" href=\"/users?direction=asc&amp;page=2&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">&raquo;</a></li></ul></nav>"
 
     assert_equal expected, actual
   end
@@ -59,14 +59,14 @@ class TableTest < ActionView::TestCase
     actual       = pagination.render if pagination.paginable?
     expected     = nil
 
-    assert_equal expected, actual
+    assert_nil actual
   end
 
   test 'table paginable' do
     options      = { paginable: true }
     pagination   = UiBibz::Ui::Ux::Tables::Paginable.new(@store, options)
     actual       = pagination.render if pagination.paginable?
-    expected     = "<div><ul class=\"pagination pagination\"><li class=\"prev disabled\"><span>&#8592; Previous</span></li> <li class=\"active\"><span>1</span></li> <li><a rel=\"next\" href=\"/users?direction=asc&amp;page=2&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">2</a></li> <li><a href=\"/users?direction=asc&amp;page=3&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">3</a></li> <li><a href=\"/users?direction=asc&amp;page=4&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">4</a></li> <li><a href=\"/users?direction=asc&amp;page=5&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">5</a></li> <li><a href=\"/users?direction=asc&amp;page=6&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">6</a></li> <li><a href=\"/users?direction=asc&amp;page=7&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">7</a></li> <li><a href=\"/users?direction=asc&amp;page=8&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">8</a></li> <li><a href=\"/users?direction=asc&amp;page=9&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">9</a></li> <li class=\"disabled\"><span>&hellip;</span></li> <li><a href=\"/users?direction=asc&amp;page=12&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">12</a></li> <li><a href=\"/users?direction=asc&amp;page=13&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">13</a></li> <li class=\"next\"><a rel=\"next\" href=\"/users?direction=asc&amp;page=2&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">Next &#8594;</a></li></ul><form action=\"/users\" accept-charset=\"UTF-8\" method=\"get\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><div class=\"table-pagination-per-page\">Displaying User <b>1&nbsp;-&nbsp;2</b> of <b>25</b> in total | Per page: <input type=\"hidden\" name=\"sort\" value=\"users.name_fr\" /><input type=\"hidden\" name=\"direction\" value=\"asc\" /><input type=\"hidden\" name=\"per_page\" value=\"2\" /><input type=\"hidden\" name=\"page\" value=\"1\" /><select name=\"per_page\" id=\"per_page\" class=\"form-control\"><option value=\"5\">5</option>
+    expected     = "<div><nav class=\"pagination\"><ul class=\"pagination\" role=\"group\"><li class=\"previous page-item disabled\"><span class=\"page-link\">&laquo;</span></li> <li class=\"page-item active\"><span class=\"page-link\">1</span></li> <li class=\"page-item\"><a class=\"page-link\" rel=\"next\" href=\"/users?direction=asc&amp;page=2&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">2</a></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=3&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">3</a></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=4&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">4</a></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=5&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">5</a></li> <li class=\"page-item disabled\"><i class=\"page-link\">&hellip;</i></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=12&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">12</a></li> <li class=\"page-item\"><a class=\"page-link\" href=\"/users?direction=asc&amp;page=13&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">13</a></li> <li class=\"next page-item\"><a class=\"page-link\" rel=\"next\" href=\"/users?direction=asc&amp;page=2&amp;per_page=2&amp;search=Name+fr&amp;sort=users.name_fr\">&raquo;</a></li></ul></nav><form action=\"/users\" accept-charset=\"UTF-8\" method=\"get\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><div class=\"table-pagination-per-page\">Displaying User <b>1&nbsp;-&nbsp;2</b> of <b>25</b> in total | Per page: <input type=\"hidden\" name=\"sort\" value=\"users.name_fr\" /><input type=\"hidden\" name=\"direction\" value=\"asc\" /><input type=\"hidden\" name=\"per_page\" value=\"2\" /><input type=\"hidden\" name=\"page\" value=\"1\" /><select name=\"per_page\" id=\"per_page\" class=\"form-control\"><option value=\"5\">5</option>
 <option value=\"10\">10</option>
 <option value=\"20\">20</option>
 <option value=\"30\">30</option>

data/test/ui_helper_test.rb

@@ -67,8 +67,13 @@ class UiHelperTest < ActionView::TestCase
         n.link 'lala', url: '#'
         n.link 'lolo', url: '#'
       end
+      nb.form '/search', { type: :form_tag, position: :right } do
+        concat text_field_tag 'search'
+        concat button :submit
+      end
     end
-    expected = "<nav class=\"navbar navbar-inverse navbar-fixed-bottom\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#navbar-collapse-57604740876218660627112051613797907862\"><span class=\"sr-only\">Toggle navigation</span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span></button><a class=\"navbar-brand\" href=\"#\"><i class=\"glyph fa fa-pencil\"></i> My title</a></div><div class=\"collapse navbar-collapse\" id=\"navbar-collapse-57604740876218660627112051613797907862\"><ul class=\"nav navbar-nav\"><li role=\"presentation\"><a href=\"#\">state</a></li><li role=\"presentation\"><a href=\"#\">Tata</a></li></ul><ul class=\"nav navbar-nav nav-right\"><li role=\"presentation\"><a href=\"#\">lala</a></li><li role=\"presentation\"><a href=\"#\">lolo</a></li></ul></div></div></nav>"
+    expected = "<nav class=\"navbar navbar-inverse navbar-fixed-bottom\"><div class=\"container-fluid\"><div class=\"navbar-header\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbar-collapse-243510900091050741589988795055654058002\">☰</button></div><div class=\"collapse navbar-toggleable-xs\" id=\"navbar-collapse-243510900091050741589988795055654058002\"><a class=\"navbar-brand\" href=\"/\">My title</a><ul class=\"nav navbar-nav\"><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">state</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">Tata</a></li></ul><ul class=\"nav navbar-nav pull-right\"><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">lala</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#\">lolo</a></li></ul><form class=\"navbar-form form-inline pull-right\" action=\"/search\" accept-charset=\"UTF-8\" method=\"post\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input type=\"text\" name=\"search\" id=\"search\" /><button class=\"btn-primary btn\">submit</button><input type=\"text\" name=\"search\" id=\"search\" /><button class=\"btn-primary btn\">submit</button></form>
++</div></div></nav>"
 
     refute_equal expected, actual
   end

data/ui_bibz.gemspec

@@ -29,20 +29,20 @@ Gem::Specification.new do |s|
   #s.add_dependency 'bundler', '>= 1.8.4'
   s.add_dependency 'rails', '>= 4.2.0'
   s.add_dependency 'will_paginate', '~> 3.1.0'
-  s.add_dependency 'will_paginate-bootstrap'
   s.add_dependency 'will-paginate-i18n'
+  s.add_dependency 'will_paginate-bootstrap4'
   s.add_dependency 'haml'
   s.add_dependency 'haml-rails'
   s.add_dependency 'sass-rails', '>= 5.0.0'
   s.add_dependency 'font-awesome-sass'
-  s.add_dependency 'bootstrap', '4.0.0.alpha4'
+  s.add_dependency 'bootstrap', '4.0.0.alpha5'
 
   # Javascript gems (rails-assets.org)
   #s.add_dependency 'rails-assets-tether', '>= 1.1.0'
   #s.add_dependency 'rails-assets-bootstrap-select', '>= 1.10.0'
   #s.add_dependency 'rails-assets-bootstrap-datepicker', '>= 1.6.0'
 
-  # not compatible with boostrap 4
+  # not compatible with bootstrap 4
   #s.add_dependency 'rails-assets-bootstrap-switch', '>= 3.3.2'
   #s.add_dependency 'rails-assets-bootstrap-multiselect', '>= 0.9.13'
 
@@ -50,5 +50,6 @@ Gem::Specification.new do |s|
   s.add_development_dependency "minitest"
   s.add_development_dependency "sqlite3"
   s.add_development_dependency "factory_girl_rails", "~> 4.0"
+  s.add_development_dependency "simplecov"
   s.add_development_dependency "codeclimate-test-reporter"
 end

data/vendor/assets/stylesheets/awesome-bootstrap-checkbox.scss

@@ -0,0 +1,250 @@
+
+//
+// Checkboxes
+// --------------------------------------------------
+
+
+$font-family-icon: 'FontAwesome' !default;
+$fa-var-check: "\f00c" !default;
+$check-icon: $fa-var-check !default;
+
+@mixin checkbox-variant($parent, $color) {
+  #{$parent} input[type="checkbox"]:checked + label,
+  #{$parent} input[type="radio"]:checked + label {
+    &::before {
+      background-color: $color;
+      border-color: $color;
+    }
+    &::after{
+      color: #fff;
+    }
+  }
+}
+
+@mixin checkbox-variant-indeterminate($parent, $color) {
+  #{$parent} input[type="checkbox"]:indeterminate + label,
+  #{$parent} input[type="radio"]:indeterminate + label {
+    &::before {
+      background-color: $color;
+      border-color: $color;
+    }
+    &::after{
+      background-color: #fff;
+    }
+  }
+}
+
+.abc-checkbox{
+  padding-left: 20px;
+
+  label{
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    padding-left: 5px;
+
+    &::before{
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      left: 0;
+      margin-left: -20px;
+      border: 1px solid $input-border-color;
+      border-radius: 3px;
+      background-color: #fff;
+      @include transition(border 0.15s ease-in-out, color 0.15s ease-in-out);
+    }
+
+    &::after{
+      cursor: pointer;
+      display: inline-block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      left: 0;
+      top: 0;
+      margin-left: -20px;
+      padding-left: 3px;
+      padding-top: 1px;
+      font-size: 11px;
+      color: $input-color;
+    }
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1;
+
+    &:focus + label::before{
+      @include tab-focus();
+    }
+
+    &:checked + label::after{
+      font-family: $font-family-icon;
+      content: $check-icon;
+    }
+
+    &:indeterminate + label::after{
+      display: block;
+      content: "";
+      width: 10px;
+      height: 3px;
+      background-color: #555555;
+      border-radius: 2px;
+      margin-left: -16.5px;
+      margin-top: 7px;
+    }
+
+    &:disabled + label{
+      opacity: 0.65;
+
+      &::before{
+        background-color: $input-bg-disabled;
+        cursor: not-allowed;
+      }
+    }
+
+  }
+
+  &.abc-checkbox-circle label::before{
+    border-radius: 50%;
+  }
+
+  &.checkbox-inline{
+    margin-top: 0;
+  }
+}
+
+@include checkbox-variant('.abc-checkbox-primary', $brand-primary);
+@include checkbox-variant('.abc-checkbox-danger', $brand-danger);
+@include checkbox-variant('.abc-checkbox-info', $brand-info);
+@include checkbox-variant('.abc-checkbox-warning', $brand-warning);
+@include checkbox-variant('.abc-checkbox-success', $brand-success);
+
+
+@include checkbox-variant-indeterminate('.abc-checkbox-primary', $brand-primary);
+@include checkbox-variant-indeterminate('.abc-checkbox-danger', $brand-danger);
+@include checkbox-variant-indeterminate('.abc-checkbox-info', $brand-info);
+@include checkbox-variant-indeterminate('.abc-checkbox-warning', $brand-warning);
+@include checkbox-variant-indeterminate('.abc-checkbox-success', $brand-success);
+
+//
+// Radios
+// --------------------------------------------------
+
+@mixin radio-variant($parent, $color) {
+  #{$parent} input[type="radio"]{
+    + label{
+      &::after{
+        background-color: $color;
+      }
+    }
+    &:checked + label{
+      &::before {
+        border-color: $color;
+      }
+      &::after{
+        background-color: $color;
+      }
+    }
+  }
+}
+
+.abc-radio{
+  padding-left: 20px;
+
+  label{
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
+    padding-left: 5px;
+
+    &::before{
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      left: 0;
+      margin-left: -20px;
+      border: 1px solid $input-border-color;
+      border-radius: 50%;
+      background-color: #fff;
+      @include transition(border 0.15s ease-in-out);
+    }
+
+    &::after{
+      cursor: pointer;
+      display: inline-block;
+      position: absolute;
+      content: " ";
+      width: 11px;
+      height: 11px;
+      left: 3px;
+      top: 3px;
+      margin-left: -20px;
+      border-radius: 50%;
+      background-color: $input-color;
+      transform: scale(0, 0);
+
+      transition: transform .1s cubic-bezier(.8,-0.33,.2,1.33);
+      //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
+    }
+  }
+
+  input[type="radio"]{
+    cursor: pointer;
+    opacity: 0;
+    z-index: 1;
+
+    &:focus + label::before{
+      @include tab-focus();
+    }
+
+    &:checked + label::after{
+      transform: scale(1, 1);
+    }
+
+    &:disabled + label{
+      opacity: 0.65;
+
+      &::before{
+        cursor: not-allowed;
+      }
+    }
+
+  }
+
+  &.radio-inline{
+    margin-top: 0;
+  }
+}
+
+@include radio-variant('.abc-radio-primary', $brand-primary);
+@include radio-variant('.abc-radio-danger', $brand-danger);
+@include radio-variant('.abc-radio-info', $brand-info);
+@include radio-variant('.abc-radio-warning', $brand-warning);
+@include radio-variant('.abc-radio-success', $brand-success);
+
+
+input[type="checkbox"],
+input[type="radio"] {
+  &.styled:checked + label:after {
+    font-family: $font-family-icon;
+    content: $check-icon;
+  }
+  .styled:checked + label {
+    &::before {
+      color: #fff;
+    }
+    &::after {
+      color: #fff;
+    }
+  }
+}