ui_bibz 2.5.3 → 3.0.0.alpha5

data/test/ui/core/layouts/container_test.rb

@@ -5,10 +5,24 @@ require 'test_helper'
 class UiHelperTest < ActionView::TestCase
   include UiBibz::Helpers::Ui::CoreHelper
 
-  test 'container' do
+  test 'fluid container' do
     actual   = ui_container type: :fluid
     expected = '<div class="container-fluid"></div>'
 
     assert_equal expected, actual
   end
+
+  test 'normal container' do
+    actual   = ui_container
+    expected = '<div class="container"></div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'sized container' do
+    actual   = ui_container size: :xl
+    expected = '<div class="container-xl"></div>'
+
+    assert_equal expected, actual
+  end
 end

data/test/ui/core/layouts/row_test.rb

@@ -14,11 +14,76 @@ class RowTest < ActionView::TestCase
     assert_equal expected, actual
   end
 
-  test 'row form' do
-    actual = ui_row(type: :form) do
+  test 'row with size' do
+    actual = ui_row(num: 2) do
       'test'
     end
-    expected = '<div class="form-row">test</div>'
+    expected = '<div class="row row-cols-2">test</div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'row with integer in parameter' do
+    actual = ui_row 2 do
+      'test'
+    end
+    expected = '<div class="row row-cols-2">test</div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'row with several sizes' do
+    actual = ui_row(md: { num: 4 }, xs: { num: 2 }) do
+      'test'
+    end
+    expected = '<div class="row row-cols-md-4 row-cols-xs-2">test</div>'
+
+    assert_equal expected, actual
+  end
+
+  test 'row tapped' do
+    actual = ui_row(tap: true, class: 'test') do |row|
+      row.col do
+        'test'
+      end
+    end
+    expected = "<div class=\"test row\"><div class=\"col\">test</div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'row with col' do
+    actual = ui_row do
+      ui_col do
+        "Test"
+      end
+    end
+    expected = "<div class=\"row\"><div class=\"col\">Test</div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'row with gutters' do
+    actual = ui_row(gutters: 6)
+    expected = "<div class=\"row g-6\"></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'row with complex gutters' do
+    actual = ui_row(gutters: { md: { num: 6 }, xs: { num: 3, position: :horizontal } })
+    expected = "<div class=\"row g-md-6 gx-xs-3\"></div>"
+
+    assert_equal expected, actual
+  end
+
+  test "toto" do
+    actual = ui_row do |row|
+      row.col do
+        'Test'
+      end
+    end
+    expected = "<div class=\"row\"><div class=\"col\">Test</div></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/lists/list_group_test.rb

@@ -8,7 +8,7 @@ class ListGroupTest < ActionView::TestCase
   test 'list_group with link' do
     actual = ui_list_group(tag_type: :a) do |lg|
       lg.list 'Momo', { status: :success, url: '#momo' }
-      lg.list({ tap: true, active: true, url: '#state' }) do |l|
+      lg.list(active: true, url: '#state') do |l|
         l.header 'My title'
         l.body   'My body'
       end

data/test/ui/core/navigations/breadcrumb_test.rb

@@ -6,7 +6,7 @@ class BreadcrumbTest < ActionView::TestCase
   include UiBibz::Helpers::Ui::CoreHelper
 
   test 'breadcrumb' do
-    actual = ui_breadcrumb tap: true do |b|
+    actual = ui_breadcrumb do |b|
       b.link 'Home', url: '#home', glyph: 'home'
       b.link 'state', { url: '#state', state: :active }
     end

data/test/ui/core/navigations/link_test.rb

@@ -13,7 +13,7 @@ class LinkTest < ActionView::TestCase
 
   test 'Link without text' do
     actual = ui_link 'My link', glyph: 'gem', text: false, url: '#link'
-    expected = '<a href="#link"><i class="glyph fas fa-gem"></i></a>'
+    expected = '<a href="#link"><i class="glyph fas fa-gem"></i><span class="empty-space"> </span></a>'
 
     assert_equal expected, actual
   end

data/test/ui/core/navigations/nav_test.rb

@@ -10,7 +10,8 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile'
       n.link 'Messages', url: '#messages', selector: 'messages'
     end
-    expected = '<ul class="nav nav-tabs"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
+
     assert_equal expected, actual
   end
 
@@ -20,7 +21,7 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile', label: 16
       n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav nav-pills"><li class="nav-item"><a class="active nav-link" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-pills\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -31,7 +32,7 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile', label: 16
       n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav justify-content-end"><li class="nav-item"><a class="active nav-link" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav justify-content-end\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -42,7 +43,7 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile', label: 16
       n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav"><li class="nav-item"><a class="active nav-link" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -53,7 +54,18 @@ class NavTest < ActionView::TestCase
       n.link 'Profile', url: '#profile', selector: 'profile', label: 16
       n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav flex-column"><li class="nav-item"><a class="active nav-link" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav flex-column\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\">Messages</a></li></ul>"
+
+    assert_equal expected, actual
+  end
+
+  test 'list' do
+    actual = ui_nav(type: :list) do |n|
+      n.link 'Home', state: :active, url: '#Home', selector: 'home'
+      n.link 'Profile', url: '#profile', selector: 'profile', label: 16
+      n.link 'Messages', url: '#messages', selector: 'messages', state: :disabled
+    end
+    expected = "<div class=\"list-group\" role=\"tablist\"><a href=\"#Home\" class=\"active list-group-item list-group-item-action\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"Home\">Home</a><a href=\"#profile\" class=\"list-group-item list-group-item-action\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"Profile\">Profile</a><a href=\"#messages\" class=\"disabled list-group-item list-group-item-action\" data-toggle=\"tab\" role=\"tab\" aria-controls=\"Messages\">Messages</a></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/navigations/navbar_test.rb

@@ -5,7 +5,7 @@ class NavbarTest < ActionView::TestCase
   test 'Navbar' do
     actual = UiBibz::Ui::Core::Navigations::Navbar.new.tap do |nb|
     end
-    expected = "<nav class=\"navbar navbar-light navbar-expand-lg\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse\" id=\"#{actual.id}\"></div></nav>"
+    expected = "<nav class=\"navbar navbar-light navbar-expand-lg\"><div class=\"container\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse collapse\" id=\"#{actual.id}\"></div></div></nav>"
 
     assert_equal expected, actual.render
   end
@@ -13,7 +13,7 @@ class NavbarTest < ActionView::TestCase
   test 'Navbar with options' do
     actual = UiBibz::Ui::Core::Navigations::Navbar.new(title: 'Brand', expand_size: :xs, status: :primary, position: :top, brand_position: :right).tap do |nb|
     end
-    expected = "<nav class=\"bg-primary navbar navbar-light fixed-top navbar-expand-xs\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><span class=\"navbar-brand\">Brand</span><div class=\"navbar-collapse\" id=\"#{actual.id}\"></div></nav>"
+    expected = "<nav class=\"bg-primary navbar navbar-light fixed-top navbar-expand-xs\"><div class=\"container\"><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><span class=\"navbar-brand\">Brand</span><div class=\"navbar-collapse collapse\" id=\"#{actual.id}\"></div></div></nav>"
 
     assert_equal expected, actual.render
   end
@@ -32,7 +32,7 @@ class NavbarTest < ActionView::TestCase
       end
       nb.text 'test'
     end
-    expected = "<nav class=\"navbar navbar-light navbar-expand-lg\"><span class=\"navbar-brand\">Brand</span><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse\" id=\"#{actual.id}\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a class=\"active nav-link\" href=\"#Home\">Home</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#profile\">Profile</a></li><li class=\"nav-item\"><a class=\"nav-link\" href=\"#messages\">Messages</a></li></ul><form type=\"form_tag\" position=\"right\" class=\"navbar-form form-inline my-lg-0 my-2\" action=\"#\" accept-charset=\"UTF-8\" method=\"post\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><button class=\"btn-secondary btn\">Search</button></form><span class=\"navbar-text\">test</span></div></nav>"
+    expected = "<nav class=\"navbar navbar-light navbar-expand-lg\"><div class=\"container\"><span class=\"navbar-brand\">Brand</span><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse collapse\" id=\"#{actual.id}\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"nav-link\">Messages</a></li></ul><form type=\"form_tag\" position=\"right\" class=\"d-flex\" action=\"#\" accept-charset=\"UTF-8\" method=\"post\"><button class=\"btn-secondary btn\">Search</button></form><span class=\"navbar-text\">test</span></div></div></nav>"
 
     assert_equal expected, actual.render
   end
@@ -44,7 +44,8 @@ class NavbarTest < ActionView::TestCase
         n.link 'Link', url: '#link'
       end
     end
-    expected = "<nav class=\"bg-dark navbar navbar-dark navbar-expand-lg\"><span class=\"navbar-brand\"><img src=\"/images/ruby-white\" /></span><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse\" id=\"#{actual.id}\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a class=\"nav-link\" href=\"#link\">Link</a></li></ul></div></nav>"
+    expected =
+      "<nav class=\"bg-dark navbar navbar-dark navbar-expand-lg\"><div class=\"container\"><span class=\"navbar-brand\"><img src=\"/images/ruby-white\" /></span><button class=\"navbar-toggler hidden-sm-up\" type=\"button\" data-toggle=\"collapse\" data-target=\"##{actual.id}\">☰</button><div class=\"navbar-collapse collapse\" id=\"#{actual.id}\"><ul class=\"navbar-nav\"><li class=\"nav-item\"><a href=\"#link\" class=\"nav-link\">Link</a></li></ul></div></div></nav>"
 
     assert_equal expected, actual.render
   end

data/test/ui/core/navigations/tab_group_test.rb

@@ -10,7 +10,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: '#profile', selector: 'profile'
       n.tab 'Messages', url: '#messages', selector: 'messages'
     end
-    expected = '<ul class="nav nav-tabs"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -21,7 +21,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: '#profile', selector: 'profile'
       n.tab 'Messages', url: '#messages', selector: 'messages'
     end
-    expected = '<ul class="nav nav-tabs"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -43,7 +43,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: '#profile', selector: 'profile', label: 16
       n.tab 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav nav-tabs justify-content-end"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs justify-content-end\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end
@@ -54,7 +54,7 @@ class TabGroupTest < ActionView::TestCase
       n.tab 'Profile', url: '#profile', selector: 'profile', label: 16
       n.tab 'Messages', url: '#messages', selector: 'messages', state: :disabled
     end
-    expected = '<ul class="nav nav-tabs"><li class="nav-item"><a class="active nav-link" data-toggle="tab" role="tab" href="#Home">Home</a></li><li class="nav-item"><a class="nav-link" data-toggle="tab" role="tab" href="#profile">Profile</a></li><li class="nav-item"><a class="disabled nav-link" data-toggle="tab" role="tab" href="#messages">Messages</a></li></ul>'
+    expected = "<ul class=\"nav nav-tabs\"><li class=\"nav-item\"><a href=\"#Home\" class=\"active nav-link\" data-toggle=\"tab\" role=\"tab\">Home</a></li><li class=\"nav-item\"><a href=\"#profile\" class=\"nav-link\" data-toggle=\"tab\" role=\"tab\">Profile</a></li><li class=\"nav-item\"><a href=\"#messages\" class=\"disabled nav-link\" data-toggle=\"tab\" role=\"tab\">Messages</a></li></ul>"
 
     assert_equal expected, actual
   end

data/test/ui/core/notifications/alert_test.rb

@@ -12,11 +12,11 @@ class AlertTest < ActionView::TestCase
   end
 
   test 'alert with more informaton' do
-    actual = ui_alert(tap: true, status: :success, glyph: 'thumbs-o-up', closable: true) do |a|
+    actual = ui_alert(status: :success, glyph: 'thumbs-o-up', closable: true) do |a|
       a.header 'Information'
       a.body 'Body text'
     end
-    expected = '<div class="alert-success alert alert-dismissible" role="alert"><h4 class="alert-header"><i class="glyph fas fa-thumbs-o-up"></i>  Information<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></h4><hr /><p class="alert-body mb-0">Body text</p></div>'
+    expected = "<div class=\"alert-success alert alert-dismissible\" role=\"alert\"><h4 class=\"alert-header\"><i class=\"glyph fas fa-thumbs-o-up\"></i>  Information<button type=\"button\" class=\"btn-close\" data-dismiss=\"alert\" aria-label=\"Close\"></button></h4><hr /><p class=\"alert-body mb-0\">Body text</p></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/notifications/badge_test.rb

@@ -6,21 +6,21 @@ class BadgeTest < ActionView::TestCase
 
   test 'badge' do
     actual   = ui_badge 'state', status: :success, glyph: 'pencil'
-    expected = '<span class="badge-success badge"><i class="glyph fas fa-pencil"></i>  state</span>'
+    expected = '<span class="bg-success badge"><i class="glyph fas fa-pencil"></i>  state</span>'
 
     assert_equal expected, actual
   end
 
   test 'badge with url' do
     actual   = ui_badge 'state', url: 'http://example.com'
-    expected = '<a class="badge-default badge" href="http://example.com">state</a>'
+    expected = '<a class="bg-default badge" href="http://example.com">state</a>'
 
     assert_equal expected, actual
   end
 
   test 'badge pill' do
     actual   = ui_badge 'state', status: :success, type: :pill, glyph: 'pencil'
-    expected = '<span class="badge-success badge badge-pill"><i class="glyph fas fa-pencil"></i>  state</span>'
+    expected = '<span class="bg-success badge rounded-pill"><i class="glyph fas fa-pencil"></i>  state</span>'
 
     assert_equal expected, actual
   end

data/test/ui/core/notifications/progress_bar_test.rb

@@ -41,7 +41,7 @@ class ProgressBarTest < ActionView::TestCase
   end
 
   test 'progress bar custom' do
-    actual = ui_progress_bar tap: true do |pb|
+    actual = ui_progress_bar do |pb|
       pb.bar 25, status: :warning, striped: true
       pb.bar 65, status: :danger
     end

data/test/ui/core/notifications/toast_test.rb

@@ -9,7 +9,16 @@ class ToastTest < ActionView::TestCase
       t.header 'My header toast', glyph: 'eye', time: 'Now', class: 'my-header-toast'
       t.body 'My body toast', class: 'my-body-toast'
     end
-    expected = '<div data-autohide="true" class="my-toast toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="my-header-toast toast-header"><i class="mr-2 glyph fas fa-eye"></i><strong class="mr-auto">My header toast</strong><small class="text-muted">Now</small><button class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="my-body-toast toast-body">My body toast</div></div>'
+    expected = "<div data-autohide=\"true\" class=\"my-toast toast\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"my-header-toast toast-header\"><i class=\"mr-2 glyph fas fa-eye\"></i><strong class=\"mr-auto\">My header toast</strong><small class=\"text-muted\">Now</small><button class=\"ml-2 mb-1 btn-close\" data-dismiss=\"toast\" aria-label=\"Close\"></button></div><div class=\"my-body-toast toast-body\">My body toast</div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'toast without header and body' do
+    actual = ui_toast do
+      'My body toast'
+    end
+    expected = "<div class=\"toast\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"toast-body\">My body toast</div></div>"
 
     assert_equal expected, actual
   end

data/test/ui/core/windows/modal_test.rb

@@ -14,7 +14,21 @@ class UiHelperTest < ActionView::TestCase
         concat ui_button_link 'Save', url: '#', status: :primary
       end
     end
-    expected = '<div class="modal"><div class="modal-dialog " role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">My title</h5><button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button></div><div class="modal-body">My body</div><div class="modal-footer"><a class="btn-link btn" role="button" href="#">Close</a><a class="btn-primary btn" role="button" href="#">Save</a></div></div></div></div>'
+    expected = "<div class=\"modal\" tabindex=\"-1\" aria-labelledby=\"My title\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">My title</h5><button class=\"btn-close\" data-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\">My body</div><div class=\"modal-footer\"><a class=\"btn-link btn\" role=\"button\" href=\"#\">Close</a><a class=\"btn-primary btn\" role=\"button\" href=\"#\">Save</a></div></div></div></div>"
+
+    assert_equal expected, actual
+  end
+
+  test 'modal with options' do
+    actual = ui_modal scrollable: true, fullscreen: true, backdrop: :static do |m|
+      m.header 'My title'
+      m.body 'My body'
+      m.footer do
+        concat ui_button_link 'Close', url: '#', status: :link
+        concat ui_button_link 'Save', url: '#', status: :primary
+      end
+    end
+    expected = "<div data-backdrop=\"static\" data-keyboard=\"false\" class=\"modal\" tabindex=\"-1\" aria-labelledby=\"My title\" aria-hidden=\"true\"><div class=\"modal-dialog modal-fullscreen modal-dialog-scrollable\"><div class=\"modal-content\"><div class=\"modal-header\"><h5 class=\"modal-title\">My title</h5><button class=\"btn-close\" data-dismiss=\"modal\" aria-label=\"Close\"></button></div><div class=\"modal-body\">My body</div><div class=\"modal-footer\"><a class=\"btn-link btn\" role=\"button\" href=\"#\">Close</a><a class=\"btn-primary btn\" role=\"button\" href=\"#\">Save</a></div></div></div></div>"
 
     assert_equal expected, actual
   end

data/test/ui/utils/breakdown_class_name_generator_test.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class BreakdownClassNameGeneratorTest < ActionView::TestCase
+  test 'name genenator with multiple options' do
+    options = {
+      xs: { num: 2, pull: 1, push: 1 },
+      md: { num: 3 },
+      lg: { num: 5 }
+    }
+
+    actual   = UiBibz::Utils::BreakdownClassNameGenerator.new(options).class_names
+    expected = ["col-xs-2 col-xs-pull-1 col-xs-push-1", "col-md-3", "col-lg-5"]
+
+    assert_equal expected, actual
+  end
+
+  test 'name genenator with nothing' do
+    actual   = UiBibz::Utils::BreakdownClassNameGenerator.new.class_names
+    expected = "col"
+
+    assert_equal expected, actual
+  end
+
+  test 'name genenator with num' do
+    actual   = UiBibz::Utils::BreakdownClassNameGenerator.new(num: 6).class_names
+    expected = ["col-6"]
+
+    assert_equal expected, actual
+  end
+
+  test 'name genenator with num and size' do
+    actual   = UiBibz::Utils::BreakdownClassNameGenerator.new(lg: { num: 6 }).class_names
+    expected = ["col-lg-6"]
+
+    assert_equal expected, actual
+  end
+
+  test "name generator with position" do
+    actual   = UiBibz::Utils::BreakdownClassNameGenerator.new({ position: :vertical, num: 2 }, 'g').class_names
+    expected = ["gy-2"]
+
+    assert_equal expected, actual
+  end
+
+  test "name generator with position and size" do
+    actual   = UiBibz::Utils::BreakdownClassNameGenerator.new({ xs: { num: 6, position: :horizontal } }, 'g').class_names
+    expected = ["gx-xs-6"]
+
+    assert_equal expected, actual
+  end
+
+  test "name generator with only an integer" do
+    actual   = UiBibz::Utils::BreakdownClassNameGenerator.new(2, 'g').class_names
+    expected = ["g-2"]
+
+    assert_equal expected, actual
+  end
+end

data/test/ui/ux/containers/panel_test.rb

@@ -7,7 +7,7 @@ class CardTest < ActionView::TestCase
 
   test 'create panel' do
     actual = ui_panel do |p|
-      p.header tap: true do |h|
+      p.header do |h|
         h.title 'My header'
         h.actions size: :sm, outline: true, status: :secondary do |a|
           a.button 'Minimize', glyph: 'caret-up', text: false
@@ -35,14 +35,14 @@ class CardTest < ActionView::TestCase
       end
       p.footer 'Footer'
     end
-    expected = '<div class="panel"><div class="panel-header justify-content-between"><div class="panel-title">My header</div><div class="btn-group btn-group-sm" role="group"><button class="btn-outline-secondary btn btn-sm without-text"><i class="glyph fas fa-caret-up"></i></button><button class="btn-outline-secondary btn btn-sm without-text"><i class="glyph fas fa-cog"></i></button><button class="btn-outline-secondary btn btn-sm without-text"><i class="glyph fas fa-Close"></i></button></div></div><div class="btn-toolbar justify-content-between panel-toolbar" role="toolbar"><div role="group" class="btn-group btn-group-sm mr-2"><button class="btn-secondary btn btn-sm">Copy</button><button class="btn-secondary btn btn-sm">Cut</button><button class="btn-secondary btn btn-sm">Paste</button></div><div class="btn-group btn-group-sm" role="group"><button class="btn-secondary btn btn-sm">Delete</button></div></div><div class="panel-body">Body</div><div class="btn-toolbar panel-toolbar" role="toolbar"><div class="btn-group btn-group-sm" role="group"><button class="btn-success btn btn-sm without-text"><i class="glyph fas fa-plus-circle"></i></button><button class="btn-danger btn btn-sm without-text"><i class="glyph fas fa-minus-circle"></i></button></div></div><div class="panel-footer">Footer</div></div>'
+    expected = "<div class=\"panel\"><div class=\"panel-header justify-content-between\"><div class=\"panel-title\">My header</div><div class=\"btn-group btn-group-sm\" role=\"group\"><button class=\"btn-outline-secondary btn btn-sm without-text\"><i class=\"glyph fas fa-caret-up\"></i><span class=\"empty-space\"> </span></button><button class=\"btn-outline-secondary btn btn-sm without-text\"><i class=\"glyph fas fa-cog\"></i><span class=\"empty-space\"> </span></button><button class=\"btn-outline-secondary btn btn-sm without-text\"><i class=\"glyph fas fa-Close\"></i><span class=\"empty-space\"> </span></button></div></div><div class=\"btn-toolbar justify-content-between panel-toolbar\" role=\"toolbar\"><div role=\"group\" class=\"btn-group btn-group-sm mr-2\"><button class=\"btn-secondary btn btn-sm\">Copy</button><button class=\"btn-secondary btn btn-sm\">Cut</button><button class=\"btn-secondary btn btn-sm\">Paste</button></div><div class=\"btn-group btn-group-sm\" role=\"group\"><button class=\"btn-secondary btn btn-sm\">Delete</button></div></div><div class=\"panel-body\">Body</div><div class=\"btn-toolbar panel-toolbar\" role=\"toolbar\"><div class=\"btn-group btn-group-sm\" role=\"group\"><button class=\"btn-success btn btn-sm without-text\"><i class=\"glyph fas fa-plus-circle\"></i><span class=\"empty-space\"> </span></button><button class=\"btn-danger btn btn-sm without-text\"><i class=\"glyph fas fa-minus-circle\"></i><span class=\"empty-space\"> </span></button></div></div><div class=\"panel-footer\">Footer</div></div>"
 
     assert_equal expected, actual
   end
 
   test 'panel with group' do
     actual = ui_panel do |p|
-      p.header tap: true do |h|
+      p.header do |h|
         h.title 'Main panel header'
       end
       p.toolbar justify: true, size: :sm do |t|
@@ -76,7 +76,7 @@ class CardTest < ActionView::TestCase
 
   test 'panel with deck' do
     actual = ui_panel do |p|
-      p.header tap: true do |h|
+      p.header do |h|
         h.title 'Main panel header'
       end
       p.toolbar justify: true, size: :sm do |t|
@@ -110,7 +110,7 @@ class CardTest < ActionView::TestCase
 
   test 'panel with column' do
     actual = ui_panel do |p|
-      p.header tap: true do |h|
+      p.header do |h|
         h.title 'Main panel header'
       end
       p.toolbar justify: true, size: :sm do |t|