nfg_ui 0.12.6 → 0.12.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5bbafc30ea4243b1b4053b0ea9556031985f5d9f13a0800542a45d8a92c6a854
-  data.tar.gz: ea57532fe3f800a39722870962424ae6c11868d333c39292703c4df18266f8b0
+  metadata.gz: ab312817e5911978ad679f0a410978aeb6cf9c785fbbf7277ba485c4f3ddc3d4
+  data.tar.gz: cfb725daaaa0742fe89c9234b695953d1a2a9024f95486c35aac9475fe4e9e12
 SHA512:
-  metadata.gz: b9642aa6a7d9b14a2523bd3ced6b4a8cfa2cb905fd614f3484ba748447fec2e1f96c3dbdffe42f0baf4e9f042b45ce49cdd455b6bba56c32cbda13383465aefd
-  data.tar.gz: 65e30453eb0709ca978786c273751ad6116e823f1f5eae35439b0b832ce26f117afd010081baaf9ba8800dd0ca5d1c37e5be7736b508bad1556a854a5f17a80d
+  metadata.gz: 258c002448bb336e07e1a2b054805f618cf236b435c49d67a844d03ca6628371460029099491aebca56e1359d5424cc52cdac427dca6bf93af854f2d3777ea58
+  data.tar.gz: 2b6402b72750534f2be88a87aa28b99145326db73e91aab67cf779677777ba2af0522d086d1be106778db05fa2fcd42eec52c0c1380317173b2487bdc9385281

data/README.md

@@ -18,6 +18,9 @@ This gem is an organic, evolving and ongoing work that is the loving result of 4
 With this gem, you can stand up a brand new rails app and it will seamlessly, from day 1, look, feel and be a Network for Good product. *Huzzah*
 
 ## Accessing Component Code Examples & Documentation:
+
+Visit [NFG UI Display App](https://nfg-ui-display-app.herokuapp.com/) for examples.
+
 To review the documentation for the components, get code samples and browse the library, follow the instructions at the bottom for getting the gem setup locally. It has its own `test_app` so the documentation is hosted there and the gem doesn't need to be added to a seperate parent app (unless you want to). We intend to get this online in its own dedicated space... until then, that's your best bet for browsing docs.
 
 ## Configuration

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss

@@ -21,7 +21,7 @@ $builder-preview-padding: ($spacer * 1.5);
   width: 100%;
   min-height: $builder-header-height;
   background-color: $blue-700;
-  z-index: $zindex-fixed;
+  z-index: $zindex-fixed + 1;
   @include media-breakpoint-up(lg) {
     position: fixed;
     top: 0;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_buttons.scss

@@ -44,6 +44,12 @@
     color: $body-color !important;
     background-color: $body-bg;
   }
+  &.disabled,
+  &:disabled {
+    color: $primary;
+    background-color: $white;
+    border: $border-width solid $border-color;
+  }
 }
 .btn-link {
   font-weight: $btn-font-weight;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_redactor.scss

@@ -4,6 +4,7 @@
 }
 .redactor-box {
   margin-bottom: 0 !important;
+  min-height: ($spacer * 5);
   border: $border-width solid $border-color;
 }
 .redactor-toolbar {

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

@@ -277,3 +277,10 @@
 [data-action='togglePeriod']:after { content: 'Toggle AM/PM'; }
 [data-action='clear']:after { content: 'Clear the picker'; }
 [data-action='today']:after { content: 'Set the date to today'; }
+
+body:not(.modal-open) {
+  .bootstrap-datetimepicker-widget { z-index: $zindex-dropdown + 1 !important; } // makes datetimepicker dropdown higher than select2
+}
+body.modal-open  {
+  .modal .bootstrap-datetimepicker-widget { z-index: $zindex-modal + 3 !important; } // makes datetimepicker dropdown higher than redactor toolbar and select2 in modals
+}

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

@@ -16,7 +16,6 @@ body.modal-open  {
   .modal .select2-container { z-index: $zindex-modal + 2 !important; } // makes select2 dropdown higher than redactor toolbar in modals
 }
 
-
 .select2-container--default {
   &.select2-container--focus .select2-selection--multiple,
   &.select2-container--open .select2-selection--single {

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

@@ -11,6 +11,7 @@ module NfgUi
         include NfgUi::Components::Utilities::Traitable
         include NfgUi::Components::Utilities::Describable
         include NfgUi::Components::Utilities::Iconable
+        include NfgUi::Components::Utilities::Methodable
         include NfgUi::Components::Utilities::Renderable
 
         include NfgUi::Components::Traits::Active

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.6'
+  VERSION = '0.12.10'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.12.6
+  version: 0.12.10
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-07-13 00:00:00.000000000 Z
+date: 2021-08-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap