effective_bootstrap 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: ec5621959449ff4c414d797e5b635b197ad481cb
-  data.tar.gz: 98044a2f5c6167489ea5a1ef2b192322faae2726
+  metadata.gz: 4366d401ed983ede60b16c9e82fbb76e393975be
+  data.tar.gz: e33da495ac5d246d803444c8ed3726250ad45416
 SHA512:
-  metadata.gz: 55cf5551994328a7458abe296c1d1e73a02520f9a415a25a2d3437c9bb8f0abbc3cfa8ae0f9716ead00f0889b3b48ffda78824f4558ad7da46b4778e339774be
-  data.tar.gz: 9835d86a4c956040965e0cfd54c85c15ef8a3a7d8a559f972e1de883a11a105378c1d337ded67f4a9b2fa050e4076ce67429b10b5c6bf3cd3526ba5871d61e30
+  metadata.gz: 1983cdb4104022d4dc1f24987b418222fcf12688f7c6cf6c1e4553b09f0071e16ef75bc7d98506eb85d1c299183259bf75ec6caf9e6b633327f1ee087c454b22
+  data.tar.gz: 413e36f0d728563fe5eb845fc236dd086c3dc6581bd51729e57b2d62f160ce73d13ec671d80f63e358583f2b0ea78745a040708682dcd9506a22717499e04ee7

data/README.md

@@ -1,11 +1,10 @@
 # Effective Bootstrap
 
-Everything you need to get set up with bootstrap 4.
+Everything your Ruby on Rails 5.1+ application needs to get working with [Twitter Bootstrap 4](https://getbootstrap.com/).
 
-Bootstrap 4 component helpers and form building replacement.
-
-Bootstrap >= 4.0
-Rails >= 5.1
+- Bootstrap4 component view helpers.
+- SVG icons based on [Inline SVG](https://github.com/jamesmartin/inline_svg), with [Feather Icons](https://feathericons.com) and [FontAwesome](https://fontawesome.com) svg icons to replace the old glyphicons.
+- An html-exact form builder that builds on top of Rails' new `form_with` with numerous custom form inputs.
 
 ## Getting Started
 
@@ -27,85 +26,435 @@ rails generate effective_bootstrap:install
 
 The generator will install an initializer which describes all configuration options.
 
-Make sure you have Bootstrap 4 installed:
-
-Your `application.js` should include
+Add the following to your `application.js`:
 
 ```ruby
 //= require jquery3
 //= require popper
 //= require bootstrap
+//= require effective_bootstrap
 ```
 
-And `application.scss` should include
+And to your `application.scss`:
 
 ```sass
 @import 'bootstrap';
+@import 'effective_bootstrap';
+```
+
+## View Helpers
+
+### Dropdown
+
+https://getbootstrap.com/docs/4.0/components/dropdowns/
+
+```haml
+= dropdown do
+  = dropdown_link_to 'Something', root_path
+  = dropdown_divider
+  = dropdown_link_to 'Another', root_path
+```
+
+Options include: `dropdown(variation: :dropup|:dropleft|:dropright, split: true|false, right: true|false, btn: 'btn-secondary')`
+
+### ListGroup
+
+https://getbootstrap.com/docs/4.0/components/list-group/
+
+```haml
+= list_group do
+  = list_group_link_to 'Something', root_path
+```
+
+`list_group_link_to` will automatically insert the the `.active` class based on the request path.
+
+### Navbar
+
+https://getbootstrap.com/docs/4.0/components/navbar/
+
+```haml
+%nav.navbar.navbar-expand-lg.navbar-light.bg-light
+  %a.navbar-brand{href: '/'} Home
+
+  %button.navbar-toggler{type: 'button', data: {toggle: 'collapse', target: '#navContent', 'aria-controls': 'navContent', 'aria-label': 'Toggle navigation'}}
+    %span.navbar-toggler-icon
+
+  #navContent.collapse.navbar-collapse
+    %ul.navbar-nav.mr-auto
+      = nav_link_to 'About', '/about'
+      = nav_link_to 'Contact', '/conact'
+
+    %ul.navbar-nav
+      - if current_user.present?
+        = nav_dropdown('Account', right: true) do
+          = nav_link_to 'Settings', user_settings_path
+
+          - if can?(:access, :admin)
+            = nav_divider
+            = nav_link_to 'Site Admin', '/admin'
+
+          = nav_divider
+          = nav_link_to 'Sign Out', destroy_user_session_path, method: :delete
+      - else
+        = nav_link_to 'Sign In', new_user_session_path
 ```
 
-### Install All Form Inputs
+`nav_link_to` will automatically insert the `.active` class based on the request path.
+
+## Icon Helpers
+
+Unfortunately, Bootstrap 4 dropped support for glyphicons, so we use a combination of [Inline SVG](https://github.com/jamesmartin/inline_svg), with [Feather Icons](https://feathericons.com) and [FontAwesome](https://fontawesome.com) .svg images (no webfonts) to get back this functionality, even better than it was before.
+
+```haml
+= icon('ok') # <svg class='eb-icon eb-icon-ok' ...>
+```
+
+```haml
+= icon_to('ok', root_path) # <a href='/'><svg class='eb-icon eb-icon-ok' ...></a>
+```
+
+A full list of icons can be found here: [All effective_bootstrap icons](https://github.com/code-and-effect/effective_bootstrap/tree/master/app/assets/images/icons)
+
+To overwrite or add an icon, just drop the `.svg` file into your application's `app/assets/images/icons/` directory.
 
-This gem packages the javascript/css assets for numerous form inputs.
+There are also a few helpers for commonly used icons, they all take the form of `x_icon_to(new_thing_path)`:
 
-The assets for these inputs may be included all at once or individually.
+- `new_icon_to`
+- `show_icon_to`
+- `edit_icon_to`
+- `destroy_icon_to`
+- `settings_icon_to`
+- `ok_icon_to`
+- `approve_icon_to`
+- `remove_icon_to`
 
-To install all available inputs, add the following to your application.js:
+## Form Builder
+
+Rails 5.1 has introduced a new `form_with` syntax, and soft-deprecated `form_tag` and `form_for`.
+
+This gem includes a [Bootstrap4 Forms](https://getbootstrap.com/docs/4.0/components/forms/) html-exact form builder built on top of `form_with`.
+
+The goal of this form builder is to output beautiful forms while matching the rails form syntax -- you should be able to change an existing `form_with` form to `effective_form_with` with no other changes.
+
+Of course, just the regular form inputs are boring, and this gem extends numerous jQuery/Javascript libraries to level up some inputs.
+
+This is an opinionated Bootstrap4 form builder.
+
+## effective_form_with
+
+Matches the Rails `form_with` tag syntax, with all its `:model`, `:scope`, `:url`, `:method`, etc.
+
+As well, you can specify `layout: :vertical`, `layout: :horizontal`, or `layout: :inline` as per the different Bootstrap form layouts.
+
+```haml
+= effective_form_with(model: @user, layout: :horizontal) do |f|
+  = f.text_field :name
+  = f.submit
+```
+
+The default is `layout: :vertical`.
+
+All standard form fields have been implemented as per [Rails 5.1 FormHelper](http://api.rubyonrails.org/v5.1/classes/ActionView/Helpers/FormHelper.html)
+
+### Options
+
+There are three sets of options hashes that you can pass into any form input:
+
+- `wrapper: { class: 'something' }` are applied to the wrapping div tag.
+- `input_html: { class: 'something' }` are applied to the input, select or textarea tag itself.
+- `input_js: { key: value}` are passed to any custom form input will be used to initialize the Javascript library. For example:
 
 ```ruby
-//= require effective_bootstrap
+= effective_form_with(model: @user) do |f|
+  = f.date_field :updated_at, input_js: { useCurrent: 'day', showTodayButton: true }
+```
+
+will result in the following call to the Javascript library:
+
+```javascript
+$('input').datetimepicker(useCurrent: 'day', showTodayButton: true);
+```
+Any options passed in this way will be used to initialize the underlying javascript libraries.
+
+## Basic form inputs
+
+The following form inputs are supported, but don't have any kind of custom JavaScript
+
+```haml
+= f.check_box
+= f.email_field
+= f.error_field
+= f.number_field
+= f.password_field
+= f.static_field
+= f.text_area
+= f.text_field
+= f.url_field
+```
+
+## Custom date_field, datetime_field, time_field
+
+These custom form inputs are all based on the following awesome project:
+
+Bootstrap 3 Datepicker (https://github.com/Eonasdan/bootstrap-datetimepicker)
+
+```haml
+= f.date_field :updated_at
+= f.datetime_field :updated_at
+= f.time_field :updated_at
 ```
 
-and add the following to your application.css:
+### Options
+
+The default options used to initialize this form input are as follows:
 
 ```ruby
-@import 'effective_bootstrap';
+input_js: { showTodayButton: true, showClear: true, useCurrent: 'hour' }
 ```
 
-All of the included form inputs will now be available with no additional installation tasks.
+For a full list of options, please refer to:
+
+http://eonasdan.github.io/bootstrap-datetimepicker/Options/
+
+### Set Date
+
+Use the following JavaScript to set the date:
 
-### Options Passing to JavaScript
+```javascript
+$('#start_at').data('DateTimePicker').date('2016-05-08')
+```
 
-All `:input_js => options` passed to any effective_form_input will be used to initialize the Javascript library
+### Disabled Dates
 
-For example:
+Provide a String, Date, or Range to set the disabled dates.
 
 ```ruby
-= form_for @user do |f|
-  = f.effective_date_time_picker :updated_at, :input_js => {:format => 'dddd, MMMM Do YYYY', :showTodayButton => true}
+input_js: { disabledDates: '2020-01-01' }
+input_js: { disabledDates: Time.zone.now }
+input_js: { disabledDates: Time.zone.now.beginning_of_month..Time.zone.now.end_of_month }
+input_js: { disabledDates: [Time.zone.now, Time.zone.now + 1.day] }
 ```
 
-or
+### Linked Dates
+
+By default, when two matching date inputs named `start_*` and `end_*` are present on the same form, they will become linked.
+
+The end date selector will have its date <= start_date disabled.
+
+To disable this behaviour, call with `date_linked: false`.
 
 ```ruby
-= simple_form_for @user do |f|
-  = f.input :updated_at, :as => :effective_date_time_picker, :input_js => {:format => 'dddd, MMMM Do YYYY', :showTodayButton => true}
+= f.input :end_at, date_linked: false
 ```
 
-will result in the following call to the Javascript library:
+### Events
 
-```coffee
-$('input.effective_date_time_picker').datetimepicker
-  format: 'dddd, MMMM Do YYYY',
-  showTodayButton: true
+The date picker library doesn't trigger a regular `change`. Instead you must watch for the `dp.change` event.
+
+More info is available here:
+
+http://eonasdan.github.io/bootstrap-datetimepicker/Events/
+
+## Custom price_field
+
+This custom form input uses no 3rd party jQuery plugins.
+
+It displays a currency formatted value `100.00` but posts the "price as integer" value of `10000` to the server.
+
+Think about this value as "the number of cents".
+
+```haml
+= f.price_field :price
 ```
 
-Any options passed in this way will be used to initialize the underlying javascript libraries.
+This gem also includes a rails view helper `price_to_currency` that takes a value like `10000` and displays it as `$100.00`
+
+## Custom select
+
+This custom form input is based on the following awesome project:
 
+Select2 (https://select2.github.io/)
 
+### Usage
+
+As a Rails Form Helper input:
+
+```ruby
+= f.select :category, 10.times.map { |x| "Category #{x}"}
+= f.select :categories, 10.times.map { |x| "Category #{x}"}, multiple: true
+= f.select :categories, 10.times.map { |x| "Category #{x}"}, tags: true
+= f.select :categories, {'Active': [['Post A', 1], ['Post B', 2]], 'Past': ['Post C', 3], ['Post D', 4]}, grouped: true
+```
+
+### Modes
+
+The standard mode is a replacement for the default single select box.
+
+Passing `multiple: true` will allow multiple selections to be made.
+
+Passing `multiple: true, tags: true` will allow multiple selections to be made, and new value options to be created.  This will allow you to both select existing tags and create new tags in the same form control.
+
+Passing `grouped: true` will enable optgroup support.  When in this mode, the collection should be a Hash of ActiveRecord Relations or Array of Arrays
+
+```ruby
+{'Active' => Post.active, 'Past' => Post.past}
+{'Active' => [['Post A', 1], ['Post B', 2]], 'Past' => [['Post C', 3], ['Post D', 4]]}
+```
+
+Passing `polymorphic: true` will enable polymorphic support.  In this mode, an additional 2 hidden input fields are created alongside the select field.
+
+So calling
+
+```ruby
+= f.input :primary_contact, User.all.to_a + Member.all.to_a, polymorphic: true
+```
+
+will internally translate the collection into:
+
+```ruby
+[['User 1', 'User_1'], ['User 2', 'User_2'], ['Member 100', 'Member_100']]
 ```
-  = f.submit
-  = f.submit 'Save 2'
 
-  = f.submit 'Save', left: true
-  = f.submit 'Save', center: true
-  = f.submit 'Save', right: true
+and instead of posting to the server with the parameter `:primary_contact`, it will instead post `{:primary_contact_id => 2, :primary_contact_type => 'User'}`.
 
-  = f.submit 'Save', border: false
-  = f.submit 'Save', center: true, border: false
-  = f.submit 'Save', left: true, border: false
+Using both `polymorphic: true` and `grouped: true` is recommended.  In this case the expected collection is as follows:
 
-  = f.submit('Save', border: false) do
-    = f.save 'Okay'
-    = f.save 'Mom'
+```ruby
+= f.input :primary_contact, {'Users' => User.all, 'Members' => 'Member.all'}, polymorphic: true, grouped: true
+```
+
+### Options
+
+The default options used to initialize this form input are as follows:
+
+```ruby
+{
+  :theme => 'bootstrap',
+  :minimumResultsForSearch => 6,
+  :tokenSeparators => [',', ' '],
+  :width => 'style',
+  :placeholder => 'Please choose',
+  :allowClear => !(options[:multiple])  # Only display the Clear 'x' on a single selection box
+}
+```
+
+### Interesting Available Options
+
+To limit the number of items that can be selected in a multiple select box:
+
+```ruby
+:maximumSelectionLength => 2
 ```
 
+To hide the search box entirely:
+
+```ruby
+:minimumResultsForSearch => 'Infinity'
+```
+
+For a full list of options, please refer to: https://select2.github.io/options.html
+
+
+The following `input_js: options` are not part of the standard select2 API, and are custom `effective_select` functionality only:
+
+To add a css class to the select2 container or dropdown:
+
+```ruby
+:containerClass => 'custom-container-class'
+:dropdownClass => 'custom-dropdown-class'
+```
+
+to display a glyphicon infront of each option value:
+
+```ruby
+f.input :user, User.all.map { |user| [user.to_s, user.to_param, { class: 'glyphicon-flag' }] }, template: :glyphicon
+```
+
+
+### Additional
+
+Call with `single_selected: true` to ensure only the first selected option tag will be `<option selected="selected">`.
+
+This can be useful when displaying multiple options with an identical value.
+
+### Clear value
+
+It's a bit tricky to clear the selected value
+
+```coffeescript
+$('select').val('').trigger('change.select2')
+```
+
+### Working with dynamic options
+
+The following information applies to `effective_select` only, and is not part of the standard select2 API.
+
+To totally hide (instead of just grey out) any disabled options from the select2 dropdown, initialize the input with:
+
+```ruby
+= f.input :category, User.all, hide_disabled: true
+```
+
+If you want to dynamically add/remove options from the select field after page load, you must use the `select2:reinitialize` event:
+
+```coffeescript
+# When something on my page changes
+$(document).on 'change', '.something', (event) ->
+  $select = $(event.target).closest('form').find('select.i-want-to-change')  # Find the select2 input to be updated
+
+  # Go through its options, and modify some of them.
+  # Using the above 'hide_disabled true' functionality, the following code hides the options from being displayed,
+  # but you could actually remove the options, add new ones, or update the values/texts. whatever.
+  $select.find('option').each (index, option) ->
+    $(option).prop('disabled', true) if index > 10
+
+  # Whenever the underlying options change, you need to manually trigger the following event:
+  $select.select2().trigger('select2:reinitialize')
+```
+
+### AJAX Support
+
+There is currently no support for using AJAX to load remote data.  This feature is supported by the underlying select2 library and will be implemented here at a future point.
+
+## Custom submit and save
+
+The `f.submit` puts in a wrapper and a default save button, and does the whole icon spin when submit thing.
+
+The `f.save` is purely a input submit button.
+
+```haml
+= f.submit
+= f.submit 'Save 2'
+
+= f.submit 'Save', left: true
+= f.submit 'Save', center: true
+= f.submit 'Save', right: true
+
+= f.submit 'Save', border: false
+= f.submit 'Save', center: true, border: false
+= f.submit 'Save', left: true, border: false
+
+= f.submit(border: false) do
+  = f.save 'Save 1'
+  = f.save 'Save 2'
+```
+
+
+## License
+
+MIT License.  Copyright [Code and Effect Inc.](http://www.codeandeffect.com/)
+
+## Credits
+
+The authors of this gem are not associated with any of the awesome projects used by this gem.
+
+We are just extending these existing community projects for ease of use with Rails Form Helper and SimpleForm.
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Bonus points for test coverage
+6. Create new Pull Request

data/app/assets/javascripts/effective_bootstrap.js

@@ -7,5 +7,5 @@
 //= require ./effective_file/input
 //= require ./effective_phone/input
 //= require ./effective_price/input
+//= require ./effective_radio/input
 //= require ./effective_select/input
-

data/app/assets/javascripts/effective_bootstrap/base.js.coffee

@@ -1,4 +1,8 @@
 this.EffectiveBootstrap ||= new class
+  remote_form_payload: ''         # A fresh form
+  remote_form_flash: ''           # Array of Arrays
+  remote_form_flash_payload: ''   # $('<div alert>...</div>')
+
   initialize: (target) ->
     $(target || document).find('[data-input-js-options]:not(.initialized)').each (i, element) ->
       $element = $(element)
@@ -29,14 +33,41 @@ this.EffectiveBootstrap ||= new class
     else
       $form.addClass('was-validated').addClass('form-is-invalid').removeClass('form-is-valid')
 
+    if valid and $form.data('remote')
+      $form.one 'ajax:success', (event) -> EffectiveBootstrap.loadRemoteForm($(event.target))
+
     valid
 
+  submitting: ($form) ->
+    $form.addClass('form-is-valid').removeClass('form-is-invalid')
+    @disable($form)
+
   disable: ($form) ->
     $form.find('[type=submit]').prop('disabled', true)
 
   enable: ($form) ->
     $form.removeClass('form-is-valid').find('[type=submit]').removeAttr('disabled')
 
+  # Loads remote for payload that was placed here by effective_resources create.js.erb and update.js.erb
+  loadRemoteForm: ($target) ->
+    $form = @remote_form_payload.find('form')
+    $target.replaceWith($form)
+
+    for flash in @remote_form_flash
+      @flash($form, flash[0], @remote_form_flash_payload)
+
+    @remote_form_payload = ''; @remote_form_flash = ''; @remote_form_flash_payload = '';
+
+  flash: ($form, status, $alert) ->
+    $submit = $form.children('.form-actions')
+
+    if status == 'danger' || status == 'error'
+      $submit.find('.eb-icon-x').show().delay(1000).fadeOut('slow')
+    else
+      $submit.find('.eb-icon-check').show().delay(1000).fadeOut('slow')
+
+    $submit.prepend($alert) if $alert.length > 0
+
 $ -> EffectiveBootstrap.initialize()
 $(document).on 'turbolinks:load', -> EffectiveBootstrap.initialize()
 $(document).on 'cocoon:after-insert', -> EffectiveBootstrap.initialize()

data/app/assets/javascripts/effective_price/input.js

@@ -0,0 +1 @@
+//= require ./initialize

data/app/assets/javascripts/effective_radio/initialize.js.coffee

@@ -0,0 +1,24 @@
+$(document).on 'change', '[data-toggle=cards] input[type=radio]', (event) ->
+  $input = $(event.currentTarget)
+  return unless $input.is(':checked')
+
+  $card = $input.closest('.card')
+  return unless $card.length > 0
+
+  $cards = $input.closest('.card-deck').children('.card')
+  return unless $cards.length > 0
+
+  $cards.removeClass('active').removeClass('border-secondary')
+  $cards.find('.card-header').removeClass('bg-secondary text-white')
+
+  $card.addClass('active').addClass('border-secondary')
+  $card.find('.card-header').addClass('bg-secondary text-white')
+  true
+
+$(document).on 'click', '[data-toggle=cards] [data-toggle=card]', (event) ->
+  $card = $(event.currentTarget).closest('.card')
+  return unless $card.length > 0
+
+  val = $card.find('input:radio').val()
+  $card.find('input:radio').val([val]).trigger('change')
+  false

data/app/assets/javascripts/effective_radio/input.js

@@ -0,0 +1 @@
+//= require ./initialize

data/app/assets/stylesheets/effective_bootstrap/forms.scss

@@ -2,6 +2,12 @@
 .form-actions {
   display: flex;
   align-items: center;
+  position: relative;
+
+  .alert {
+    position: absolute;
+    top: -4.0em;
+  }
 }
 
 .form-actions-bordered {

data/app/assets/stylesheets/effective_radio/input.scss

@@ -2,3 +2,17 @@ div.btn-group > .btn.first-button {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
 }
+
+.effective-radios.card-deck {
+  .card-header { cursor: pointer; }
+
+  input[type=radio] { display: none; }
+
+  .visible-when-selected { display: none; }
+  .visible-when-unselected { display: block; }
+
+  .active {
+    .visible-when-selected { display: block; }
+    .visible-when-unselected { display: none; }
+  }
+}

data/app/helpers/effective_bootstrap_helper.rb

@@ -112,7 +112,7 @@ module EffectiveBootstrapHelper
   #   = nav_link_to 'Sign In', new_user_session_path
   #   = nav_dropdown 'Settings' do
   #     = nav_link_to 'Account Settings', user_settings_path
-  #     = nav_dropdown_divider
+  #     = nav_divider
   #     = nav_link_to 'Sign In', new_user_session_path, method: :delete
   def nav_link_to(label, path, opts = {})
     if @_nav_mode == :dropdown  # We insert dropdown-items

data/app/helpers/effective_icons_helper.rb

@@ -47,4 +47,3 @@ module EffectiveIconsHelper
   end
 
 end
-

data/app/models/effective/form_inputs/radios.rb

@@ -1,10 +1,15 @@
 # http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select
+
+# buttons: true
+# cards: true
+# custom: false
+
 module Effective
   module FormInputs
     class Radios < CollectionInput
 
       def build_wrapper(&block)
-        tag = buttons? ? :div : :fieldset
+        tag = (buttons? || cards?) ? :div : :fieldset
 
         if layout == :horizontal
           content_tag(tag, content_tag(:div, yield, class: 'row'), options[:wrapper])
@@ -22,6 +27,8 @@ module Effective
       def build_button_group(&block)
         if buttons?
           content_tag(:div, yield, id: button_group_id, class: 'btn-group btn-group-toggle effective-radios', 'data-toggle': 'buttons')
+        elsif cards?
+          content_tag(:div, yield, id: button_group_id, class: 'card-deck effective-radios', 'data-toggle': 'cards')
         else
           yield
         end
@@ -43,6 +50,8 @@ module Effective
       def input_html_options
         if buttons?
           { autocomplete: 'off' }
+        elsif cards?
+          { autocomplete: 'off' }
         elsif custom?
           { class: 'custom-control-input' }
         else
@@ -59,6 +68,8 @@ module Effective
 
         if buttons?
           content_tag(:label, text, options[:label].merge(for: button_group_id))
+        elsif cards?
+          content_tag(:label, text, options[:label].merge(for: button_group_id))
         elsif inline?
           content_tag(:label, text, options[:label])
         else
@@ -74,13 +85,24 @@ module Effective
           opts[:class] = [opts[:class], ('active' if active_item?(builder)), ('first-button' if first_item?) ].compact.join(' ')
 
           builder.label(opts) { builder.radio_button(id: item_id) + builder.text }
+        elsif cards?
+          opts = item_label_options.merge(for: item_id)
+          opts[:class] = [opts[:class], ('active border-secondary' if active_item?(builder)), ('first-card' if first_item?) ].compact.join(' ')
+
+          if active_item?(builder)
+            builder.label(opts) { builder.radio_button(id: item_id) + builder.text.sub('card-header', 'card-header bg-secondary text-white').html_safe }
+          else
+            builder.label(opts) { builder.radio_button(id: item_id) + builder.text }
+          end
         else
           build_item_wrap { builder.radio_button(id: item_id) + builder.label(item_label_options.merge(for: item_id)) }
         end
       end
 
       def build_item_wrap(&block)
-        if custom?
+        if cards?
+          content_tag(:div, yield, class: 'card')
+        elsif custom?
           content_tag(:div, yield, class: 'custom-control custom-radio ' + (inline? ? 'custom-control-inline' : 'form-group'))
         else
           content_tag(:div, yield, class: 'form-check' + (inline? ? ' form-check-inline' : ''))
@@ -94,6 +116,8 @@ module Effective
       def item_label_options
         if buttons?
           { class: 'btn btn-outline-secondary' }
+        elsif cards?
+          { class: 'card' }
         elsif custom?
           { class: 'custom-control-label' }
         else
@@ -106,6 +130,11 @@ module Effective
         @buttons = (options.delete(:buttons) || false)
       end
 
+      def cards? # default false
+        return @cards unless @cards.nil?
+        @cards= (options.delete(:cards) || false)
+      end
+
       def button_group_id
         "#{tag_id}_btn_group"
       end

data/app/models/effective/form_inputs/submit.rb

@@ -3,23 +3,26 @@ module Effective
     class Submit < Effective::FormInput
 
       def build_input(&block)
-        icon('spinner') + (block_given? ? capture(&block) : content_tag(:button, name, options[:input]))
+        tags = [
+          icon('check', style: 'display: none;'),
+          icon('x', style: 'display: none;'),
+          icon('spinner'),
+          (block_given? ? capture(&block) : content_tag(:button, name, options[:input]))
+        ]
+
+        (left? ? tags.reverse.join : tags.join).html_safe
       end
 
       def wrapper_options
-        border = options.key?(:border) ? options.delete(:border) : true
-        left = options.delete(:left) || false
-        center = options.delete(:center) || false
-        right = options.delete(:right) || false
-        right = true unless (left || center)
+        @right = true unless (left? || center? || right?)
 
         classes = [
           ('row' if layout == :horizontal),
           'form-group form-actions',
-          ('form-actions-bordered' if border),
-          ('justify-content-start' if left && layout == :vertical),
-          ('justify-content-center' if center && layout == :vertical),
-          ('justify-content-end' if right && layout == :vertical)
+          ('form-actions-bordered' if border?),
+          ('justify-content-start' if left? && layout == :vertical),
+          ('justify-content-center' if center? && layout == :vertical),
+          ('justify-content-end' if right? && layout == :vertical)
         ].compact.join(' ')
 
         { class: classes }
@@ -33,6 +36,28 @@ module Effective
         false
       end
 
+      private
+
+      def border?
+        return @border unless @border.nil?
+        @border = options.key?(:border) ? options.delete(:border) : true
+      end
+
+      def left?
+        return @left unless @left.nil?
+        @left = (options.delete(:left) || false)
+      end
+
+      def center?
+        return @center unless @center.nil?
+        @center = (options.delete(:center) || false)
+      end
+
+      def right?
+        return @right unless @right.nil?
+        @right = (options.delete(:right) || false)
+      end
+
       def feedback_options
         # case layout
         # when :inline

data/app/views/effective/style_guide/_feather_icons.html.haml

@@ -1,7 +1,7 @@
 %p These icons are a combination of #{link_to 'Feather', 'https://feathericons.com/'} and #{link_to 'FontAwesome', 'https://fontawesome.com/'} icons.
 
 .row.text-center
-  - Dir["#{__dir__}/../../../assets/icons/*.svg"].map { |path| path.split('/').last.chomp('.svg') }.each do |name|
+  - Dir["#{__dir__}/../../../assets/images/icons/*.svg"].map { |path| path.split('/').last.chomp('.svg') }.each do |name|
     .col-sm-2.my-3
       = icon(name)
       %br

data/lib/effective_bootstrap/version.rb

@@ -1,3 +1,3 @@
 module EffectiveBootstrap
-  VERSION = '0.0.6'.freeze
+  VERSION = '0.0.7'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_bootstrap
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-29 00:00:00.000000000 Z
+date: 2018-04-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,6 +52,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: coffee-rails
   requirement: !ruby/object:Gem::Requirement
@@ -368,7 +382,10 @@ files:
 - app/assets/javascripts/effective_phone/initialize.js.coffee
 - app/assets/javascripts/effective_phone/input.js
 - app/assets/javascripts/effective_phone/jquery.maskedInput.js
-- app/assets/javascripts/effective_price/input.js.coffee
+- app/assets/javascripts/effective_price/initialize.js.coffee
+- app/assets/javascripts/effective_price/input.js
+- app/assets/javascripts/effective_radio/initialize.js.coffee
+- app/assets/javascripts/effective_radio/input.js
 - app/assets/javascripts/effective_select/initialize.js.coffee
 - app/assets/javascripts/effective_select/input.js
 - app/assets/javascripts/effective_select/overrides.js.coffee