nfg_ui 0.9.14 → 0.9.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d21d7e11f75aac9afef7657269e528bf821fc6a3e61a9e666f66a94dbfae1f42
-  data.tar.gz: 012c06a94c1899513fe2ed37c18add52b43cbb1c9b645fca997644bbadda1599
+  metadata.gz: bcde1c0cb0c6710204e47174a49a1d9714b9eb7c4e8efc056a324931e1800461
+  data.tar.gz: 568118cf6b42f055b63ee32a14f6176bf2c8c0ebc61c29d4054a8c645068c3ef
 SHA512:
-  metadata.gz: 7876d3dd5b67a3cc70c52c1700c78f296857312a9bd1e3a3e08762200e274a0de8f639cddd4070e679f1e02201228dbcec08231938a27342591a98ba61f31231
-  data.tar.gz: 77f73e5667e4cd851c4382e05ada9716472d81be0704263e6d735073bc0e0cbd8075fe208b24369209b2993313d5dcb45c259c13c67d4ae4c9b2d51b80058427
+  metadata.gz: 857ab4ccaf62efa694c51439e508745aaab198efa34629cefe390324a78e8de6345ded9e078dc32a0ff8e3321d8803ead3f86f3c000a6ee490cbaef161ae381c
+  data.tar.gz: c7c24d5c2eb5a605c28f7488d26219eaf371f0683c6e40814de5901ced519314686b3663df758d2818ea89c3549bdb66c2b33838e9f71df4db9a8a2920c6eeb5

data/app/assets/javascripts/nfg_ui/disable_with_for_links.coffee

@@ -0,0 +1,32 @@
+class NfgUi.DisableWithForLinks
+  constructor: (@el) ->
+    @buttonInnerHTML = @el.html()
+    @initialize()
+
+    $('body').on 'hide.bs.modal', '.modal', (e) =>
+      @restoreHTML()
+
+  initialize: ->
+    return if @el.hasClass 'disabled'
+    @el.addClass 'disabled'
+       .attr { 'data-link-disabled' : true, 'disabled' : '', 'tabindex' : '-1' }
+
+
+  restoreHTML: ->
+    return unless @el.data('link-disabled')
+    @el.html @buttonInnerHTML
+
+    @el.removeClass 'disabled'
+       .removeAttr 'data-link-disabled', 'disabled'
+
+$ ->
+  elSelector = "a[data-disable-with]"
+
+  $(elSelector).click (e) =>
+    e.preventDefault();
+    inst = new NfgUi.DisableWithForLinks $(e.target)
+
+  $(document).on 'ajax:success', (e, xhr, settings) ->
+    return unless $(elSelector).length
+    $(elSelector).click (e) =>
+      inst = new NfgUi.DisableWithForLinks $(e.target)

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/_variables.scss

@@ -95,7 +95,7 @@ $danger:        $red;
 // $theme-color-interval:      8% !default;
 
 // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-$yiq-contrasted-threshold:  147;
+$yiq-contrasted-threshold:  177;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
 $yiq-text-dark:             $gray-800;

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_forms.scss

@@ -12,6 +12,8 @@ label {
   }
 }
 
+textarea.form-control { min-height: ($spacer * 6); }
+
 // Form groups
 //
 // Designed to help with the organization and spacing of vertical forms. For
@@ -64,7 +66,7 @@ label {
 // Sometimes rails likes to say a form control is valid even when it isn't... this helps ensure that
 // When simple_form (accurately) detects an error on the field...
 // that the invalid version wins ... avoiding false readings
-.is-invalid { 
+.is-invalid {
   &, .custom-select{ border-color: $form-feedback-invalid-color !important; }
 }
 

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_tables.scss

@@ -2,6 +2,7 @@
 // Basic Bootstrap table
 //
 .table {
+  margin-bottom: 0;
   thead th { border-bottom-width: $table-border-width; }
   tbody + tbody { border-top-width: $table-border-width; }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_forms.scss

@@ -12,6 +12,8 @@ label {
   }
 }
 
+textarea.form-control { min-height: ($spacer * 6); }
+
 // Form groups
 //
 // Designed to help with the organization and spacing of vertical forms. For

data/config/locales/en.yml

@@ -1,11 +1,19 @@
 en:
   nfg_ui:
+    components:
+      elements:
+        table:
+          responsive_caption: "<< Scroll left and right to see all data >>"
     errors:
       argument_error:
+        components:
+          table:
+            size: 'Tables may not utilize the :lg size when setting a size option. You may set `size: :sm` or no size.'
+
         # required keys -- :modal, :class_name, :options, :file, :method
-        # 
+        #
         # Example keys:
-        # 
+        #
         # modal: '#example'
         # class_name: self.class.name
         # options: options
@@ -17,7 +25,7 @@ en:
 
                      Raised from gem file: %{file}
                      Raised from gem method: #%{method}
-                     
+
                      To fix this error:
                      Remove `tooltip: [the tooltip]` or `modal: '%{modal}'` from your component's :options hash
 
@@ -28,11 +36,11 @@ en:
                      About:
                      Modal and Tooltip both utilize the data-toggle HTML data attribute. When :modal is present,
                      it will always overwrite the tooltip's data-toggle attribute causing a silent failure
-                     in which the tooltip does not render (though the modal HTML does). 
+                     in which the tooltip does not render (though the modal HTML does).
 
           remote:  |
                      ArgumentError: :modal & remote: true may not both be present in :options hash
-                     
+
                      Raised from gem file: %{file}
                      Raised from gem method: #%{method}
 
@@ -47,17 +55,17 @@ en:
                      Component options: %{options}
 
                      About:
-                     Components may not include both `modal: %{modal}` and `remote: true` in their options because modalable components 
+                     Components may not include both `modal: %{modal}` and `remote: true` in their options because modalable components
                      that fire remote actions can result in undesirable modal activation behavior.
 
                      This tends to occur when a modal is injected into the page from a remote action, is subsequently dismissed
                      and then opened again from the same remote link.
 
-                     The previously dismissed modal appears (because it's still on the page, and referenced in the component's HTML) 
+                     The previously dismissed modal appears (because it's still on the page, and referenced in the component's HTML)
                      and the modal is then, visibly to the user, re-animated (overwritten and re-started) by the newly injected modal from the remote ajax action.
-                      
 
 
-                        
 
-                        
+
+
+

data/lib/nfg_ui/bootstrap/components/alert.rb

@@ -4,7 +4,6 @@ module NfgUi
   module Bootstrap
     module Components
       # Bootstrap Alert Component
-      # https://getbootstrap.com/docs/4.1/components/alerts/
       class Alert < NfgUi::Bootstrap::Components::Base
         include Bootstrap::Utilities::Dismissible
         include Bootstrap::Utilities::Headable

data/lib/nfg_ui/bootstrap/components/base.rb

@@ -73,13 +73,6 @@ module NfgUi
           options[:id]
         end
 
-        # For components that inherit bootstrap, provide a second
-        # layer of initialization, for example:
-        # to initialize traits on design system components
-        # (which are not available on bootstrap)
-        def component_initialize; end
-        def utility_initialize; end
-
         def style
           options[:style]
         end
@@ -96,6 +89,13 @@ module NfgUi
           @assistive_html_attributes ||= {}
         end
 
+        # For components that inherit bootstrap, provide a second
+        # layer of initialization, for example:
+        # to initialize traits on design system components
+        # (which are not available on bootstrap)
+        def component_initialize; end
+        def utility_initialize; end
+
         # the base_element is used in the default render for all components
         # as the outer wrapping element. Typically, this is a div, but
         # can be overriddent as a different static element in a child class

data/lib/nfg_ui/bootstrap/components/collapse.rb

@@ -2,12 +2,8 @@ module NfgUi
   module Bootstrap
     module Components
       # Bootstrap Collapse Component
-      # https://getbootstrap.com/docs/4.1/components/collapse/
       class Collapse < NfgUi::Bootstrap::Components::Base
         include Bootstrap::Utilities::Collapsible
-        # def collapsed
-        #   options.fetch(:collapsed, false)
-        # end
 
         def navbar
           options.fetch(:navbar, false)

data/lib/nfg_ui/bootstrap/components/embed.rb

@@ -4,7 +4,6 @@ module NfgUi
   module Bootstrap
     module Components
       # Bootstrap Responsive Embed Component
-      # https://getbootstrap.com/docs/4.1/utilities/embed/
       class Embed < NfgUi::Bootstrap::Components::Base
         def aspect_ratio
           options.fetch(:aspect_ratio, default_aspect_ratio) || default_aspect_ratio
@@ -57,20 +56,10 @@ module NfgUi
           '16:9'
         end
 
-        # def default_iframe
-        #   ''
-        # end
-
         def non_html_attribute_options
           super.push(:iframe, :aspect_ratio, :autoplay)
         end
 
-        # def defaults
-        #   super.merge!(iframe: default_iframe,
-        #                aspect_ratio: default_aspect_ratio,
-        #                autoplay: default_autoplay)
-        # end
-
         def default_autoplay
           false
         end

data/lib/nfg_ui/bootstrap/components/progress.rb

@@ -16,13 +16,6 @@ module NfgUi
           options.fetch(:height, nil)
         end
 
-        def style
-          [
-            super,
-            ("height: #{height}px;" if height)
-          ].join(' ').squish
-        end
-
         def render
           super do
             if body
@@ -33,6 +26,13 @@ module NfgUi
           end
         end
 
+        def style
+          [
+            super,
+            ("height: #{height}px;" if height)
+          ].join(' ').squish
+        end
+
         private
 
         def non_html_attribute_options

data/lib/nfg_ui/bootstrap/components/table.rb

@@ -6,11 +6,59 @@ module NfgUi
       # Bootstrap Table Component
       # https://getbootstrap.com/docs/4.1/content/tables/
       class Table < NfgUi::Bootstrap::Components::Base
+        include Bootstrap::Utilities::Responsiveable
+        include Bootstrap::Utilities::Sizable
+
+        def size
+          if options.fetch(:size, nil) == :lg
+            raise ArgumentError.new I18n.t('nfg_ui.errors.argument_error.components.table.size')
+          else
+            super
+          end
+        end
+
+        def render
+          if responsive
+            content_tag(:div, class: responsive_css_class) { super }
+          else
+            super
+          end
+        end
+
+        def striped
+          options.fetch(:striped, false)
+        end
+
+        def bordered
+          options.fetch(:bordered, false)
+        end
+
         private
 
+        # Remove '.table-responsive' from the table element css classes
+        # since a real "responsive table" is actually a <table>
+        # wrapped in a div, example:
+        #
+        # <div class='table-responsive'>
+        #   <table class='table'>
+        #     ...
+        #   </table>
+        # </div>
+        def css_classes
+          [
+            super,
+            ("#{component_css_class}-striped" if striped),
+            ("#{component_css_class}-bordered" if bordered)
+          ].join(' ')&.remove!(responsive_css_class)&.squish # see above note
+        end
+
         def base_element
           :table
         end
+
+        def non_html_attribute_options
+          super.push(:striped, :bordered)
+        end
       end
     end
   end

data/lib/nfg_ui/bootstrap/utilities/progressable.rb

@@ -10,7 +10,6 @@ module NfgUi
         end
 
         def label
-          # options.fetch(:label, nil)
           options[:label] == true ? "#{progress}%" : options[:label] || body
         end
 

data/lib/nfg_ui/bootstrap/utilities/responsiveable.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      module Responsiveable
+        # Setting #responsive to true will supply the component with, at minimum,
+        # a '[component-name]-responsive' css class (e.g.: 'table-responsive')
+        def responsive
+          options.fetch(:responsive, default_responsive)
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            (responsive_css_class if responsive)
+          ].join(' ').squish
+        end
+
+        def responsive_css_class
+          "#{component_css_class}-responsive"
+        end
+
+        def default_responsive
+          @default_responsive ||= false
+        end
+
+        def non_html_attribute_options
+          super.push(:responsive)
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/table.rb

@@ -8,6 +8,24 @@ module NfgUi
         include NfgUi::Components::Utilities::Traitable
         include NfgUi::Components::Utilities::Describable
         include NfgUi::Components::Utilities::Renderable
+
+        include NfgUi::Components::Traits::Responsive
+        include NfgUi::Components::Traits::Size
+        include NfgUi::Components::Traits::Table
+
+        def render
+          # We manually embed this caption as a typeface component
+          # as part of the design pattern.
+          if responsive
+            capture do
+              concat(NfgUi::Components::Foundations::Typeface.new({caption: I18n.t('nfg_ui.components.elements.table.responsive_caption').to_s, class: 'mb-1 text-right', traits: [:muted]}, view_context).render)
+
+              concat(super)
+            end
+          else
+            super
+          end
+        end
       end
     end
   end

data/lib/nfg_ui/components/foundations/illustration.rb

@@ -7,7 +7,6 @@ module NfgUi
       class Illustration < NfgUi::Components::Foundations::Image
         include Bootstrap::Utilities::Sizable
         include NfgUi::Components::Traits::Size
-        include NfgUi::Components::Traits::Illustration
 
         def size
           responsive ? nil : super

data/lib/nfg_ui/components/foundations/image.rb

@@ -6,13 +6,8 @@ module NfgUi
       # Image doc coming soon
       class Image < NfgUi::Components::Base
         include Bootstrap::Utilities::Tooltipable
-
-        def css_classes
-          [
-            super,
-            ('img-fluid' if responsive)
-          ].join(' ').squish
-        end
+        include Bootstrap::Utilities::Responsiveable
+        include NfgUi::Components::Traits::Responsive
 
         # Prefer image, image is used
         # on other components that pull in
@@ -25,13 +20,6 @@ module NfgUi
           image_tag(view_context.image_path(image_location), **html_options)
         end
 
-        # Flag if the image should utilize responsive settings or not.
-        # This typically does thigns like
-        # apply specific css classes (e.g.: 'img-fluid') to the rendered component
-        def responsive
-          options.fetch(:responsive, default_responsive)
-        end
-
         # Allow :src to come through
         # since :src is a native and
         # viable to way source a image path / url
@@ -41,6 +29,10 @@ module NfgUi
 
         private
 
+        def responsive_css_class
+          'img-fluid'
+        end
+
         def component_css_class
           ''
         end
@@ -64,7 +56,7 @@ module NfgUi
         #
         # the image_tag helper method automatically turns the first argument into the `src` attribute.
         def non_html_attribute_options
-          super.push(:image, :src, :responsive)
+          super.push(:image, :src)
         end
       end
     end

data/lib/nfg_ui/components/traits/{illustration.rb → responsive.rb}

@@ -1,8 +1,7 @@
 module NfgUi
   module Components
     module Traits
-      # Shared Size traits
-      module Illustration
+      module Responsive
         TRAITS = %i[responsive].freeze
 
         def responsive_trait

data/lib/nfg_ui/components/traits/table.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Traits
+      module Table
+        TRAITS = %i[striped bordered].freeze
+
+        def striped_trait
+          options[:striped] = true
+        end
+
+        def bordered_trait
+          options[:bordered] = true
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/traits.rb

@@ -17,7 +17,6 @@ module NfgUi
                          Dismiss
                          DropdownToggle
                          Icon
-                         Illustration
                          ListGroup
                          Muted
                          Nav
@@ -27,9 +26,11 @@ module NfgUi
                          Pill
                          ProgressBar
                          Remote
+                         Responsive
                          Size
                          Step
                          SlatItem
+                         Table
                          Theme
                          Typeface
                          Vertical].freeze

data/lib/nfg_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module NfgUi
-  VERSION = '0.9.14'
+  VERSION = '0.9.15'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.9.14
+  version: 0.9.15
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-07-12 00:00:00.000000000 Z
+date: 2019-08-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -343,6 +343,7 @@ files:
 - app/assets/images/nfg_ui/email/nfg-logo.png
 - app/assets/javascripts/nfg_ui/application.coffee
 - app/assets/javascripts/nfg_ui/collapsible_toggle.coffee
+- app/assets/javascripts/nfg_ui/disable_with_for_links.coffee
 - app/assets/javascripts/nfg_ui/prevent_clickable_disabled_element.coffee
 - app/assets/javascripts/nfg_ui/vendor/select2.coffee
 - app/assets/javascripts/nfg_ui/vendor/tooltips.coffee
@@ -562,6 +563,7 @@ files:
 - lib/nfg_ui/bootstrap/utilities/modalable.rb
 - lib/nfg_ui/bootstrap/utilities/progressable.rb
 - lib/nfg_ui/bootstrap/utilities/remotable.rb
+- lib/nfg_ui/bootstrap/utilities/responsiveable.rb
 - lib/nfg_ui/bootstrap/utilities/sizable.rb
 - lib/nfg_ui/bootstrap/utilities/themeable.rb
 - lib/nfg_ui/bootstrap/utilities/tooltipable.rb
@@ -670,7 +672,6 @@ files:
 - lib/nfg_ui/components/traits/dismiss.rb
 - lib/nfg_ui/components/traits/dropdown_toggle.rb
 - lib/nfg_ui/components/traits/icon.rb
-- lib/nfg_ui/components/traits/illustration.rb
 - lib/nfg_ui/components/traits/list_group.rb
 - lib/nfg_ui/components/traits/muted.rb
 - lib/nfg_ui/components/traits/nav.rb
@@ -680,9 +681,11 @@ files:
 - lib/nfg_ui/components/traits/pill.rb
 - lib/nfg_ui/components/traits/progress_bar.rb
 - lib/nfg_ui/components/traits/remote.rb
+- lib/nfg_ui/components/traits/responsive.rb
 - lib/nfg_ui/components/traits/size.rb
 - lib/nfg_ui/components/traits/slat_item.rb
 - lib/nfg_ui/components/traits/step.rb
+- lib/nfg_ui/components/traits/table.rb
 - lib/nfg_ui/components/traits/theme.rb
 - lib/nfg_ui/components/traits/typeface.rb
 - lib/nfg_ui/components/traits/vertical.rb