nfg_ui 0.12.3 → 0.12.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b45c3d32a180df2da86ae37f687850785b8a5c22833c4b70b0e0371f48e1b3cc
-  data.tar.gz: ab34a149c78bf3b596ddc5ea990ab3bd27372fd340166908b47aefe5df519d85
+  metadata.gz: a35bf8e810bef7ab9c4ac1dca95a6ca9e236b5f4606ef6c63614fa941fd510c8
+  data.tar.gz: 1d007a905113a5bbb89a4dd3fc486639d72b0be1a4c466f07b7f3a70cbb1e37e
 SHA512:
-  metadata.gz: 44f3894e5054710f58a2198ca37c0a5ffbdb6e1a96c6c90d7d71363afbbd70ebee58b6d855b55ef0fcf90c03c5af04df8f2ecd5fe2dd401cf6223b168183d25f
-  data.tar.gz: b3dc49d58c96fe8ee3020d561c27d93950513c862b15174f92b1a45ec197af8d803691bf48eab1b948e06aec10ebe62b7247874feefbddbe9a9b3b11ade5cc8f
+  metadata.gz: f7a91b7232e34eb6f7a2b68eb1d7c279858d1e62b4a95ac811f3c45922690790eefa993fb5a0c82f9d2be4dc496aea796b0cac99946b1bc5def7764502bb52d0
+  data.tar.gz: d4e2fc74dcd4244490bc2455a4f30b1a9fd04e73d91373865b87e3ae431563614e2841f83491979a999e5be0d0f668c3e1b47b02454bb210b4d560d1c357c864

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

@@ -8,6 +8,7 @@
 
 // Plugins
 @import 'nfg_ui/network_for_good/core/plugins/intercom';
+@import 'nfg_ui/network_for_good/core/plugins/multi';
 @import 'nfg_ui/network_for_good/core/plugins/turbolinks';
 @import 'nfg_ui/network_for_good/core/plugins/twitter_typeahead';
 

data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_multi.scss

@@ -0,0 +1,64 @@
+//** Multi plugin used in export contacts/donations modal in DM
+
+.multi-wrapper {
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  width: 100%;
+  .search-input {
+    border: 0;
+    border-bottom: $border-width solid $border-color;
+    border-radius: 0;
+    display: block;
+    font-size: $font-size-base;
+    margin: 0;
+    outline: 0;
+    padding: $input-btn-padding-y $input-btn-padding-x;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .item {
+    cursor: pointer;
+    display: block;
+    position: relative;
+    padding: ($spacer * .25);
+    border-radius: $border-radius;
+    &:hover { background: $gray-200; }
+  }
+  .non-selected-wrapper, .selected-wrapper {
+    box-sizing: border-box;
+    display: inline-block;
+    height: ($spacer * 8);
+    overflow-y: scroll;
+    padding: ($spacer * .5);
+    vertical-align: top;
+    width: 50%;
+  }
+  .non-selected-wrapper {
+    background: $body-bg;
+    border-right: $border-width solid $border-color;
+    .item.selected {
+      padding-right: $spacer;
+      color: inherit;
+      background: $gray-200;
+      opacity: 0.5;
+      &:hover {
+        background: $gray-200;
+        cursor: inherit;
+      }
+      &:after {
+        position: absolute;
+        top: ($spacer * .25);
+        right: 0;
+        width: $spacer;
+        font-family: "FontAwesome";
+        font-size: $font-size-base;
+        line-height: 1.5;
+        color: inherit;
+        text-align: center;
+        content: '\f00c';
+        z-index: 5;
+      }
+    }
+  }
+  .selected-wrapper { background: $white; }
+}

data/lib/nfg_ui/components/patterns/tile.rb

@@ -16,6 +16,14 @@ module NfgUi
           options.fetch(:heading, nil)
         end
 
+        def button
+          options.fetch(:button, nil)
+        end
+
+        def href
+          options.fetch(:href, nil)
+        end
+
         def component_family
           :tile
         end
@@ -28,7 +36,7 @@ module NfgUi
           super do
             if render_in_body
               if title.present?
-                concat(NfgUi::Components::Patterns::TileHeader.new({ title: title, icon: icon, collapsible: collapsible, collapse: ("#collapse_#{id}" if collapsible) }, view_context).render)
+                concat(NfgUi::Components::Patterns::TileHeader.new({ title: title, subtitle: subtitle, button: button, href: href, icon: icon, collapsible: collapsible, collapsed: collapsed, collapse: ("#collapse_#{id}" if collapsible) }, view_context).render)
               end
               if collapsible
                 concat(NfgUi::Components::Patterns::Collapse.new({ id: "collapse_#{id}", collapsed: collapsed }, view_context).render {
@@ -47,10 +55,14 @@ module NfgUi
           end
         end
 
+        def subtitle
+          options.fetch(:subtitle, nil)
+        end
+
         private
 
         def non_html_attribute_options
-          super.push(:heading, :render_in_body)
+          super.push(:heading, :render_in_body, :subtitle, :button, :href)
         end
       end
     end

data/lib/nfg_ui/components/patterns/tile_header.rb

@@ -14,23 +14,57 @@ module NfgUi
           :tile
         end
 
+        def button
+          options.fetch(:button, nil)
+        end
+
+        def href
+          options.fetch(:href, nil)
+        end
+
+        def subtitle
+          options.fetch(:subtitle, nil)
+        end
+
         def render
           super do
-            if collapsible && title
-              concat(NfgUi::Components::Elements::Button.new({ traits: [:link, :block], collapse: collapse, class: 'no-link-color p-0 m-0', data: { collapse_icon: collapse_icon, collapsed_icon: collapsed_icon } }, view_context).render {
-                content_tag(:div, class: 'row align-items-center') do
-                  concat(content_tag(:div, class: 'col-10 text-left') {
-                    NfgUi::Components::Foundations::Typeface.new({ heading: title, icon: icon, class: 'h4' }, view_context).render
-                  })
-                  concat(content_tag(:div, class: 'col-2 text-right') {
-                    NfgUi::Components::Foundations::Icon.new({ traits: ["#{contextual_collapsible_icon} fw"], tooltip: 'Show / hide additional information' }, view_context).render
-                  })
+            if title
+              concat(content_tag(:div, class: 'row') do
+                concat(content_tag(:div, class: "col") do
+                  content_tag(:div, class: 'row') do
+                    concat(content_tag(:div, class: 'col-12 col-md') do
+                      concat(NfgUi::Components::Foundations::Typeface.new({ heading: title, icon: icon, class: 'h4' }, view_context).render)
+                      if subtitle
+                        concat(NfgUi::Components::Foundations::Typeface.new({ body: subtitle, traits: [:muted], class: 'mt-1 mb-0' }, view_context).render)
+                      end
+                    end)
+
+                    if button
+                      concat(content_tag(:div, class: 'col-12 col-md-auto mt-md-0 mt-2') do
+                        NfgUi::Components::Elements::Button.new({theme: :secondary, href: href, body: button}, view_context).render
+
+                      end)
+                    end
+                  end
+                end)
+
+                if collapsible
+                  concat(content_tag(:div, class: 'col-auto pl-0') do
+                    NfgUi::Components::Elements::Button.new({ traits: [:link], collapse: collapse, data: { collapse_icon: collapse_icon, collapsed_icon: collapsed_icon } }, view_context).render do
+
+                      # The button cannot host a data-toggle for tooltip
+                      # and a data-toggle for collapse
+
+                      # In order to accomodate the tooltip, we have to
+                      # render the icon manually without using the button's
+                      # options so that we're applying the tooltip on the
+                      # icon and not the button.
+                      NfgUi::Components::Foundations::Icon.new({ traits: ["#{contextual_collapsible_icon} fw"], tooltip: 'Show / hide additional information' }, view_context).render
+                    end
+                  end)
                 end
-              })
-            elsif title
-              concat(NfgUi::Components::Foundations::Typeface.new({ heading: title, icon: icon, class: 'h4' }, view_context).render)
+              end)
             end
-
             concat((block_given? ? yield : body))
           end
         end
@@ -49,6 +83,10 @@ module NfgUi
         def collapsed_icon
           'caret-down'
         end
+
+        def non_html_attribute_options
+          super.push(:subtitle, :button, :href)
+        end
       end
     end
   end

data/lib/nfg_ui/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.12.3
+  version: 0.12.7
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-07 00:00:00.000000000 Z
+date: 2021-07-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -149,14 +149,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.10.4
+        version: 1.11.4
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 1.10.4
+        version: 1.11.4
 - !ruby/object:Gem::Dependency
   name: browser
   requirement: !ruby/object:Gem::Requirement
@@ -530,6 +530,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datepicker.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datetimepicker.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_intercom.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_multi.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_select2.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_sticky_div.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_turbolinks.scss