ndr_ui 4.1.2 → 5.0.0

data/app/assets/stylesheets/ndr_ui/index.scss

@@ -1,7 +1,9 @@
-// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
-@import "bootstrap-sprockets";
 @import "bootstrap";
 
+//NOTE: font-dir: "." and "./assets" works, "./fonts" doesn't. may vary between systems
+$bootstrap-icons-font-dir: ".";
+@import "bootstrap-icons";
+
 // Fieldsets don't behave properly with Bootstrap in Firefox
 // https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685
 @-moz-document url-prefix() {
@@ -12,7 +14,7 @@
 
 // for input fields with input-addons, remove background and border when the form is readonly. 
 .input-group {
-  .form-control-static + .input-group-addon {
+  .form-control-plaintext + .input-group-text {
     background: none;
     border:0;
   }

data/app/builders/ndr_ui/bootstrap/datepicker.rb

@@ -14,11 +14,11 @@ module NdrUi
       #  # => <div class="input-group date" data-provide="datepicker" data-date-end-date="0d">
       #         <input class="form-control" type="text"
       #           name="post[last_updated]" id="post_last_updated" />
-      #         <span aria-hidden="true" class="input-group-addon">
+      #         <span aria-hidden="true" class="input-group-text">
       #           <span class="glyphicon glyphicon-calendar"></span>
       #         </span>
       #       </div>
-      #       <span class="help-block" data-feedback-for="post_last_updated">
+      #       <span class="form-text" data-feedback-for="post_last_updated">
       #         <span class="text-danger"></span><span class="text-warning"></span>
       #       </span>
       #
@@ -37,7 +37,7 @@ module NdrUi
 
       # This method returns the date input-group and inline errors and warnings.
       # The errors and warnings are appended after the group to avoid messing up the
-      # input-group-addon calendar icon.
+      # input-group-text calendar icon.
       def date_input_group(method, options)
         data = { provide: 'datepicker' }
         data[:'date-end-date'] = '0d' if options.delete(:no_future)
@@ -50,7 +50,7 @@ module NdrUi
           html +
             @template.content_tag(:span,
                                   @template.bootstrap_icon_tag(:calendar),
-                                  'aria-hidden': 'true', class: 'input-group-addon')
+                                  'aria-hidden': 'true', class: 'input-group-text')
         end + errors
       end
     end

data/app/builders/ndr_ui/bootstrap/form_control_class.rb

@@ -23,7 +23,7 @@ module NdrUi
     module FormControlClass
       def self.add_form_control_class(method_name)
         define_method(method_name) do |label, *args, &proc|
-          options = css_class_options_merge(args.extract_options!, %w(form-control))
+          options = css_class_options_merge(args.extract_options!, %w[form-control])
           super(label, *(args << options), &proc)
         end
       end
@@ -35,7 +35,7 @@ module NdrUi
           options      ||= {}
           html_options ||= {}
 
-          html_options = css_class_options_merge(html_options, %w(form-control))
+          html_options = css_class_options_merge(html_options, %w[form-control form-select])
           super(label, choices, options, html_options, &proc)
         end
       end

data/app/builders/ndr_ui/bootstrap/inline_errors_and_warnings.rb

@@ -2,7 +2,7 @@ module NdrUi
   module Bootstrap
     # Allows us to display errors and warnings in a bootstrap-friendly way
     module InlineErrorsAndWarnings
-      # Tag::Base subclass for generating bootstrap span.help-block.
+      # Tag::Base subclass for generating bootstrap span.form-text.
       # Allows us to use generate the tag_id properly.
       class HelpBlock < ActionView::Helpers::Tags::Base
         def render(&block)
@@ -13,7 +13,7 @@ module NdrUi
               add_default_name_and_id(@options.fetch('html', {}))
             end
 
-          options = { class: 'help-block', data:  { feedback_for: feedback_for } }
+          options = { class: 'form-text', data: { feedback_for: feedback_for } }
           content_tag(:span, @template_object.capture(&block), options)
         end
       end

data/app/builders/ndr_ui/bootstrap/input_group_addons.rb

@@ -1,6 +1,6 @@
 module NdrUi
   module Bootstrap
-    # Provides form builder method for Bootstrap input-group-addon
+    # Provides form builder method for Bootstrap input-group-text
     module InputGroupAddons
       # Identical signature to ActionView::Helpers::FormBuilder#text_field, but adds
       # <tt>:prepend</tt> and <tt>:append</tt> options to prepend and append text to
@@ -12,17 +12,11 @@ module NdrUi
         append = options.delete('append')
 
         return super if prepend.blank? && append.blank?
-        div_content = []
-
-        unless prepend.blank?
-          div_content << @template.content_tag(:span, prepend, class: 'input-group-addon')
-        end
 
+        div_content = []
+        div_content << @template.content_tag(:span, prepend, class: 'input-group-text') if prepend.present?
         div_content << text_field_without_inline_errors(method, options)
-
-        unless append.blank?
-          div_content << @template.content_tag(:span, append, class: 'input-group-addon')
-        end
+        div_content << @template.content_tag(:span, append, class: 'input-group-text') if append.present?
 
         @template.content_tag(:div, @template.safe_join(div_content), class: 'input-group')
       end

data/app/builders/ndr_ui/bootstrap/readonly.rb

@@ -7,7 +7,7 @@ module NdrUi
     # Most helpers have a similar signature, so can be iterated over and
     # enhanced. The reminaining minority have to be manually re-defined.
     module Readonly
-      def self.included(base)
+      def self.included(base) # rubocop:disable Metrics/MethodLength
         # These have different signatures, or aren't affected by `readonly`:
         not_affected = %i[label fields_for]
         needs_custom = %i[radio_button file_field hidden_field textarea] +
@@ -18,12 +18,12 @@ module NdrUi
             # def text_field(method, options = {}, *rest)
             #   return super unless readonly?
             #   readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-            #   @template.content_tag(:p, readonly_value, class: 'form-control-static')
+            #   @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
             # end
             def #{selector}(method, options = {}, *rest)
               return super unless readonly?
               readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-              @template.content_tag(:p, readonly_value, class: 'form-control-static')
+              @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
             end
           ENDEVAL
         end
@@ -33,12 +33,12 @@ module NdrUi
             # def text_area(method, options = {}, *rest)
             #   return super unless readonly?
             #   readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-            #   @template.simple_format(readonly_value, class: 'form-control-static')
+            #   @template.simple_format(readonly_value, class: 'form-control-plaintext')
             # end
             def #{selector}(method, options = {}, *rest)
               return super unless readonly?
               readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-              @template.simple_format(readonly_value, class: 'form-control-static')
+              @template.simple_format(readonly_value, class: 'form-control-plaintext')
             end
           ENDEVAL
         end
@@ -48,12 +48,12 @@ module NdrUi
             # def select(method, _something, options = {}, *rest)
             #   return super unless readonly?
             #   readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-            #   @template.content_tag(:p, readonly_value, class: 'form-control-static')
+            #   @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
             # end
             def #{selector}(method, _something, options = {}, *rest)
               return super unless readonly?
               readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-              @template.content_tag(:p, readonly_value, class: 'form-control-static')
+              @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
             end
           ENDEVAL
         end
@@ -63,12 +63,12 @@ module NdrUi
             # def collection_select(method, collection, value_method, text_method, options = {}, *rest)
             #   return super unless readonly?
             #   readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-            #   @template.content_tag(:p, readonly_value, class: 'form-control-static')
+            #   @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
             # end
             def #{selector}(method, collection, value_method, text_method, options = {}, *rest)
               return super unless readonly?
               readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-              @template.content_tag(:p, readonly_value, class: 'form-control-static')
+              @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
             end
           ENDEVAL
         end
@@ -78,21 +78,21 @@ module NdrUi
           def grouped_collection_select(method, collection, group_method, group_label_method, option_key_method, option_value_method, options = {}, html_options = {})
             return super unless readonly?
             readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-            @template.content_tag(:p, readonly_value, class: 'form-control-static')
+            @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
           end
 
           # radio_button takes another intermediate argument:
           def radio_button(method, tag_value, options = {})
             return super unless readonly?
             readonly_value = options.symbolize_keys.fetch(:readonly_value, object.send(method))
-            @template.content_tag(:p, readonly_value, class: 'form-control-static')
+            @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
           end
 
           # For file_field, the readonly value defaults to nil:
           def file_field(method, options = {})
             return super unless readonly?
             readonly_value = options.symbolize_keys[:readonly_value]
-            @template.content_tag(:p, readonly_value, class: 'form-control-static')
+            @template.content_tag(:p, readonly_value, class: 'form-control-plaintext')
           end
 
           # Hidden fields should be suppressed when the form is readonly:

data/app/builders/ndr_ui/bootstrap_builder.rb

@@ -50,7 +50,7 @@ module NdrUi
 
     #   <%= form.control_group(:title, 'Demo', {:class => "col-md-6"}, {:id => 'some_id'}, "# Controls go here") %>
     #   # => <div class="form-group col-md-6">
-    #           <label for="post_title" class="control-label">Demo</label>
+    #           <label class="form-label" for="post_title">Demo</label>
     #           <div id="some_id">
     #             # Controls go here
     #           </div>
@@ -63,37 +63,44 @@ module NdrUi
     #   <% end %>
     #
     def control_group(methods, text = nil, options = {}, control_options = {}, controls = '', &block)
-      if block_given?
-        return control_group(methods, text, options, control_options, @template.capture(&block))
-      else
-        methods = [methods].compact unless methods.is_a?(Array)
+      return control_group(methods, text, options, control_options, @template.capture(&block)) if block_given?
 
-        label_classes = ['control-label']
-        label_classes << "col-md-#{label_columns}" if horizontal_mode
-        label_options = {class: label_classes.join(' ')}
-        label_options[:tooltip] = options.delete(:tooltip)
-        label_html = if methods.present?
-                       label(methods.first, text, label_options)
-                     else
-                       @template.content_tag(:span, text, class: label_classes.join(' '))
-                     end
+      methods = [methods].compact unless methods.is_a?(Array)
 
-        control_options = css_class_options_merge(control_options) do |control_classes|
-          # Only add a col-md-N class if none already specified
-          if horizontal_mode && control_classes.none? { |css_class| css_class.start_with?('col-') }
-            control_classes << "col-md-#{12 - label_columns}"
-          end
-        end
+      label_classes = if horizontal_mode
+                        "col-form-label col-#{label_columns} text-end"
+                      else
+                        'form-label'
+                      end
+      label_options = {
+        class: label_classes,
+        tooltip: options.delete(:tooltip)
+      }
+      label_html = if methods.present?
+                     label(methods.first, text, label_options)
+                   else
+                     @template.content_tag(:span, text, class: label_classes)
+                   end
 
-        @template.content_tag(:div,
-                              label_html +
-                                @template.content_tag(:div, controls, control_options),
-                              control_group_options(methods, options))
+      control_options = css_class_options_merge(control_options) do |control_classes|
+        # Only add a col-md-N class if none already specified
+        if horizontal_mode && control_classes.none? { |css_class| css_class.start_with?('col-') }
+          control_classes << "col-#{12 - label_columns}"
+        end
       end
+
+      @template.content_tag(:div,
+                            label_html +
+                              @template.content_tag(:div, controls, control_options),
+                            control_group_options(methods, options))
     end
 
     def control_group_options(methods, options)
-      css_class_options_merge(options, %w(form-group)) do |group_classes|
+      # .form-group has been deprecated in Bootstrap
+      # however, we keep this class to do the global margin setting
+      default_classes = %w[form-group]
+      default_classes << 'row' if horizontal_mode
+      css_class_options_merge(options, default_classes) do |group_classes|
         if object && methods.present?
           if methods.any? { |method| object.errors[method].present? }
             group_classes << 'has-error'

data/app/helpers/ndr_ui/bootstrap/{accordion.rb → accordion_helper.rb}

@@ -1,5 +1,34 @@
 module NdrUi
   module Bootstrap
+    # This provides bootstrap accordion helper methods
+    module AccordionHelper
+      # Creates an accordion wrapper and creates a new NdrUi::Bootstrap::Accordion instance
+      # Creates an plain or nested bootstrap accordion along with bootstrap_accordion_group
+      # method at NdrUi::Bootstrap::Accordion class.
+      #
+      # ==== Signatures
+      #
+      #   bootstrap_accordion_tag(dom_id) do |accordion|
+      #     #content for accordion items
+      #   end
+      #
+      # ==== Examples
+      #
+      #   <%= bootstrap_accordion_group :fruit do |fruit_accordion| %>
+      #   <% end %>
+      #   # => <div id="fruit" class="accordion"></div>
+      def bootstrap_accordion_tag(dom_id, options = {}, &_block)
+        return unless block_given?
+
+        options.stringify_keys!
+        accordion = ::NdrUi::Bootstrap::Accordion.new(dom_id, self)
+        seamless = options['seamless']
+        content_tag(:div, id: accordion.dom_id.to_s, class: "accordion#{' accordion-flush' if seamless}") do
+          yield(accordion)
+        end
+      end
+    end
+
     # Creates a plain or nested bootstrap accordion along with bootstrap_accordion_tag helper
     # method.
     # Produce the inner html code of an accordion item.
@@ -35,7 +64,7 @@ module NdrUi
     #   <div id="fruit" class="accordion">
     #     <div class="panel panel-default">
     #       <div class="panel-heading">
-    #         <a href="#fruit_1" data-parent="#fruit" data-toggle="collapse">Apple</a>
+    #         <a href="#fruit_1" data-bs-parent="#fruit" data-bs-toggle="collapse">Apple</a>
     #       </div>
     #       <div class="panel-collapse collapse" id="fruit_1">
     #         <div class="panel-body">
@@ -45,7 +74,7 @@ module NdrUi
     #     </div>
     #     <div class="panel panel-default">
     #       <div class="panel-heading">
-    #         <a href="#fruit_2" data-parent="#fruit" data-toggle="collapse">Orange</a>
+    #         <a href="#fruit_2" data-bs-parent="#fruit" data-bs-toggle="collapse">Orange</a>
     #       </div>
     #       <div class="panel-collapse collapse in" id="fruit_2">
     #         <div class="panel-body">
@@ -58,6 +87,7 @@ module NdrUi
     class Accordion
       attr_accessor :dom_id, :index
 
+      # rubocop:disable Rails/HelperInstanceVariable
       def initialize(accordion_id, template)
         @dom_id = accordion_id
         @template = template
@@ -66,13 +96,14 @@ module NdrUi
 
       def bootstrap_accordion_group(heading, options = {}, &block)
         return unless block_given?
+
         options.stringify_keys!
-        seamless = options['seamless']
         @index += 1
-        content = @template.capture(&block)
-        content = @template.content_tag('div', content, class: 'panel-body') unless seamless
-        @template.content_tag('div', class: 'panel panel-default') do
-          div_panel_heading(heading) + div_panel_collapse(content, options['open'])
+        content = @template.content_tag('div', class: 'accordion-body') do
+          @template.capture(&block)
+        end
+        @template.content_tag('div', class: 'accordion-item') do
+          accordion_header_tag(heading, options['open']) + accordion_collapse_tag(content, options['open'])
         end
       end
 
@@ -82,21 +113,23 @@ module NdrUi
         "#{@dom_id}_#{@index}"
       end
 
-      def div_panel_heading(heading)
-        @template.content_tag('div', class: 'panel-heading') do
-          @template.content_tag('h4', class: 'panel-title') do
-            @template.link_to(heading,
-                              "##{group_id}",
-                              'data-toggle': 'collapse', 'data-parent': "##{@dom_id}")
-          end
+      def accordion_header_tag(heading, open_by_default)
+        @template.content_tag('h2', class: 'accordion-header') do
+          @template.button_tag(heading,
+                               class: "accordion-button#{' collapsed' unless open_by_default}",
+                               type: :button,
+                               'data-bs-toggle': 'collapse',
+                               'data-bs-target': "##{group_id}")
         end
       end
 
-      def div_panel_collapse(content, open_by_default)
+      def accordion_collapse_tag(content, open_by_default)
         @template.content_tag('div', content,
                               id: group_id,
-                              class: "panel-collapse collapse#{' in' if open_by_default}")
+                              class: "accordion-collapse collapse#{' show' if open_by_default}",
+                              'data-bs-parent': "##{@dom_id}")
       end
+      # rubocop:enable Rails/HelperInstanceVariable
     end
   end
 end

data/app/helpers/ndr_ui/bootstrap/breadcrumbs_helper.rb

@@ -13,11 +13,11 @@ module NdrUi
       #   <%= bootstrap_breadcrumbs([
       #     bootstrap_breadcrumb("Fruits", "#fruits")
       #   ]) %>
-      #   # => <ol class="breadcrumb">
+      #   # => <ol class="breadcrumb bg-body-tertiary p-2">
       #          <li class="active"><a href="#fruits">Fruits</a></li>
       #        </ol>
       def bootstrap_breadcrumbs(breadcrumbs)
-        content_tag('ol', safe_join(breadcrumbs), class: 'breadcrumb')
+        content_tag('ol', safe_join(breadcrumbs), class: 'breadcrumb bg-body-tertiary p-2')
       end
 
       # Creates a bootstrap breadcrumb.
@@ -29,11 +29,11 @@ module NdrUi
       # ==== Examples
       #
       #   <%= bootstrap_breadcrumb("Fruits", "#fruits", true) %>
-      #   # => <li class="active"><a href="#fruits">Fruits</a></li>
+      #   # => <li class="breadcrumb-item active"><a href="#fruits">Fruits</a></li>
       def bootstrap_breadcrumb(title, linkto, active = false)
         content_tag('li',
                     link_to(title, linkto),
-                    active ? { class: 'active' } : {})
+                    { class: "breadcrumb-item#{active ? ' active' : ''}" })
       end
     end
   end

data/app/helpers/ndr_ui/bootstrap/card_helper.rb

@@ -0,0 +1,94 @@
+module NdrUi
+  module Bootstrap
+    # This provides accordion
+    module CardHelper
+      include CssHelper
+
+      CARD_TYPES = %w[primary secondary success danger warning info light dark].freeze
+
+      # Creates a bootstrap card wrapper. the heading is wrapped in a card-header.
+      # The content is not wrapped in a card-body to enable seamless tables and lists.
+      #
+      # ==== Signatures
+      #
+      #   bootstrap_card_tag(heading, options = {}) do
+      #     #content for card
+      #   end
+      #
+      # ==== Examples
+      #
+      #   <%= bootstrap_card_tag 'Apples', type: :warning, id: 'fruit' do %>
+      #     Check it out!!
+      #   <% end %>
+      #   # => <div id="fruit" class="card mb-3 text-bg-warning">
+      #          <div class="card-header d-flex">
+      #            <h4 class="card-title">Apples</h4>
+      #            <div class="ms-auto"></div>
+      #          </div>
+      #          Check it out!!
+      #        </div>
+      def bootstrap_card_tag(heading, controls = nil, options = {}, &block)
+        return unless block_given?
+
+        options.stringify_keys!
+        classes = %w[card mb-3]
+        classes << "bg-#{options.delete('type')}-subtle" if CARD_TYPES.include?(options['type'].to_s)
+        options = css_class_options_merge(options, classes)
+
+        header = content_tag(:div, class: "card-header#{' d-flex' if controls.present?}") do
+          concat content_tag(:h4, heading, class: 'card-title')
+          concat content_tag(:div, controls, class: 'ms-auto') if controls.present?
+        end
+
+        content_tag(:div, header + capture(&block), options)
+      end
+
+      # Creates a simple bootstrap card body.
+      #
+      # ==== Signatures
+      #
+      #   bootstrap_card_body_tag do
+      #     #content for card body
+      #   end
+      #
+      # ==== Examples
+      #
+      #   <%= bootstrap_card_body_tag do %>
+      #     Check it out!!
+      #   <% end %>
+      #   # => <div class="card-body">Check it out!!</div>
+      def bootstrap_card_body_tag(&block)
+        return unless block_given?
+
+        content_tag(:div, capture(&block), class: 'card-body')
+      end
+
+      # Creates a bootstrap card wrapper. the heading is wrapped in a card-header.
+      # The content is wrapped in a ul.list-group to enable seamless lists.
+      # It doesn't support controls (controls = nil).
+      def bootstrap_card_list(title, options = {}, &block)
+        bootstrap_card_tag(title, nil, options) do
+          content_tag(:div, capture(&block), class: 'list-group list-group-flush')
+        end
+      end
+
+      # Bootstrap v4 dropped Wells for Card component
+      # create a wrapper for Wells - a Card without heading
+      def bootstrap_well_tag(options = {}, &block)
+        return unless block_given?
+
+        options.stringify_keys!
+        classes = %w[card mb-3]
+        classes << (CARD_TYPES.include?(options['type'].to_s) ? "bg-#{options.delete('type')}-subtle" : 'text-bg-light')
+        classes += options['class'].to_s.split if options['class'].present?
+        options['class'] = classes.uniq.join(' ')
+
+        content_tag(:div, options) do
+          bootstrap_card_body_tag do
+            capture(&block)
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/ndr_ui/bootstrap/dropdown_helper.rb

@@ -17,18 +17,22 @@ module NdrUi
       # See the Rails documentation for details of the options and examples
       #
       def bootstrap_list_link_to(*args, &block)
-        if block_given?
-          return bootstrap_list_link_to(capture(&block), (args.first || {}), args.second)
-        end
+        return bootstrap_list_link_to(capture(&block), (args.first || {}), args.second) if block_given?
 
         name         = args.first
         options      = args.second || {}
-        html_options = args.third
-        li_options   = {}
+        html_options = args.third || {}
 
-        li_options[:class] = 'active' if current_page?(options)
+        klass = html_options[:class].to_s.split
+        klass << if html_options.delete(:mode).to_s == 'nav'
+                   'nav-link'
+                 else
+                   'dropdown-item'
+                 end
+        klass << 'active' if current_page?(options)
+        html_options[:class] = klass.join(' ')
 
-        content_tag(:li, link_to(name, options, html_options), li_options)
+        content_tag(:li, link_to(name, options, html_options))
       end
 
       # Creates a Boostrap list header.
@@ -42,8 +46,8 @@ module NdrUi
       #   <%= bootstrap_list_header_tag("Apples") %>
       #   # => <li class="dropdown-header">Apples</li>
       def bootstrap_list_header_tag(name, options = {})
-        options[:class] = (options[:class].to_s.split(' ') + ['dropdown-header']).join(' ')
-        content_tag(:li, name, { role: 'presentation' }.merge(options))
+        options[:class] = (options[:class].to_s.split + ['dropdown-header']).join(' ')
+        content_tag(:li, content_tag(:h6, name, options))
       end
 
       # Creates a Boostrap list divider.
@@ -55,10 +59,9 @@ module NdrUi
       # ==== Examples
       #
       #   <%= bootstrap_list_divider_tag %>
-      #   # => <li class="divider"></li>
-      def bootstrap_list_divider_tag(options = {})
-        options[:class] = (options[:class].to_s.split(' ') + ['divider']).join(' ')
-        content_tag(:li, '', { role: 'presentation' }.merge(options))
+      #   # => <li><hr class="dropdown-divider"></li>
+      def bootstrap_list_divider_tag
+        content_tag(:li, content_tag(:hr, '', class: 'dropdown-divider'))
       end
     end
   end