nfg_ui 0.9.10 → 0.9.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 91d2b591a3156c120e2d634e0a1f70bf85989f94cefd242565445297794a10e8
-  data.tar.gz: afc72e98c8e3379e3d7dd93b602848bcb043848b82dd79f30edc1ec417d06ce4
+  metadata.gz: 37b2e7b7b4c8b2e62f45ec3a6cc614ead5e1e1d5185f0fef6aac4a5460e4f51b
+  data.tar.gz: 9d30ccac7ea061ca5a94aa8d9152eb876ba805f15012b6bca7780d646aba0d6f
 SHA512:
-  metadata.gz: 8549a0db880057b3e9e44be1ac6a0f5a8d20ed3f390025a281c26b5d5b0e697a380653f8db0b5e2cebaa0e752ed460ec70a83823d6f45afca9d291d18ce2bbab
-  data.tar.gz: 8b2f43543f01d2ba9a36ce9ccfe04a30d6d203352e2835943856ed034bfeb89ce71e55ac0b8f660b5d4ed9ea2bc23189d9a4ee720f7bc2b26bae17dbe839c7a1
+  metadata.gz: 375c586299953774ce05089df29da43eb026330b5da4cfb16737280dcdb035d891c5eb8872620fe15458492496f09c8fcde34127b9a8536242321ee9e83891f5
+  data.tar.gz: 925061f2c371184898bcba22591d68284de2fd844c915dd7a443550d94a691c198bb38297aa30c6c9fd51aabf2714ace8bad437f304b092abd801f2f996fc4ce

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

@@ -1,8 +1,8 @@
 //
 // Base styles
 //
-.card {
-  box-shadow: 0;
+.card[href] {
+  box-shadow: none;
   transition: $transition-base;
   &:hover { box-shadow: $box-shadow-sm; }
 }

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

@@ -5,6 +5,7 @@
 @import 'custom/custom_questions_questionnaire';
 @import 'custom/custom_receipt_language';
 @import 'custom/email_preview';
+@import 'custom/illustration';
 @import 'custom/interaction';
 @import 'custom/mobile';
 @import 'custom/nav_step';

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

@@ -67,7 +67,7 @@
   padding: 0;
   .custom-control-label {
     margin-bottom: 0;
-    padding: ($spacer * .5) ($spacer * .5) ($spacer * 1.5);
+    padding: ($spacer * 1.5) $spacer ($spacer * 2);
     border: $border-width solid $border-color;
     border-radius: $border-radius;
     cursor: pointer;

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

@@ -0,0 +1,7 @@
+.illustration {
+  max-width: 100%;
+  height: auto;
+  max-height: ($spacer * 6);
+}
+.illustration-sm { max-height: ($spacer * 4); }
+.illustration-lg { max-height: ($spacer * 10); }

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

@@ -7,10 +7,10 @@
 
 
     // Background connector bar between items
-    &::after {
+    &::before {
       position: absolute;
       top: (($spacer * .5) - .1rem);
-      left: 50%;
+      right: 50%;
       width: 100%;
       height: ($border-width + 1px);
       background-color: $border-color;
@@ -20,20 +20,33 @@
 
 
     // Removes the background connector bar on the last item
-    &:last-child {
-      &::after { display: none; }
+    &:first-child {
+      &::before { display: none; }
     }
 
 
     // Various states
     &.visited, &.active {
+      &::before { background-color: $primary; }
       .step-indicator {
         color: $white;
         background-color: $primary;
         border-color: $primary;
       }
     }
-    &.visited::after { background-color: $primary; }
+    &.active {
+      .nav-link {
+        .step-indicator::after { opacity: 1; }
+      }
+      ~ .visited {
+        &::before { background-color: $secondary; }
+        .step-indicator {
+          background-color: $secondary;
+          border-color: $secondary;
+          &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($secondary, 0.5); };
+        }
+      }
+    }
     &.disabled {
       cursor: default;
       pointer-events: none;

data/app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_backgrounds.scss

@@ -3,7 +3,7 @@
 .bg-success { background-color: $success-color; }
 .bg-warning { background-color: $warning-color; }
 .bg-alert { background-color: $alert-color; }
-
+.bg-light-gray { background-color: $light-gray !important; }
 
 // Images
 .bg-image {

data/app/assets/stylesheets/nfg_ui/network_for_good/email/settings/_settings.scss

@@ -119,15 +119,15 @@ $button-rounded: $global-rounded;
 // 6. Callout
 // ----------
 
-$callout-background: $white;
-$callout-background-fade: 85%;
+$callout-background: #e5f5fd;
+$callout-background-fade: 88%;
 $callout-padding: 12px;
 $callout-margin-bottom: $global-margin;
-$callout-border: 1px solid darken($callout-background, 20%);
-$callout-border-secondary: 1px solid darken($secondary-color, 20%);
-$callout-border-success: 1px solid darken($success-color, 20%);
-$callout-border-warning: 1px solid darken($warning-color, 20%);
-$callout-border-alert: 1px solid darken($alert-color, 20%);
+$callout-border: 1px solid $primary-color;
+$callout-border-secondary: 1px solid $secondary-color;
+$callout-border-success: 1px solid $success-color;
+$callout-border-warning: 1px solid $warning-color;
+$callout-border-alert: 1px solid $alert-color;
 
 // 7. Menu
 // -------

data/app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/custom/_nav_step.scss

@@ -5,13 +5,13 @@
   .nav-item {
 
     &.visited, &.active {
+      &::before { background-color: $primary; }
       .step-indicator {
         color: color-yiq($primary);
         background-color: $primary;
         border-color: $primary;
       }
     }
-    &.visited::after { background-color: $primary; }
 
     .step-indicator {
       &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($primary, 0.5); }

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

@@ -4,6 +4,7 @@
 @import 'custom/everyday_default';
 @import 'custom/everyday_story';
 @import 'custom/footer_links';
+@import 'custom/illustration';
 @import 'custom/nav_step';
 @import 'custom/slat';
 @import 'custom/social_share';

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

@@ -68,7 +68,7 @@
   padding: 0;
   .custom-control-label {
     margin-bottom: 0;
-    padding: ($spacer * .5) ($spacer * .5) ($spacer * 1.5);
+    padding: ($spacer * 1.5) $spacer ($spacer * 2);
     border: $border-width solid $border-color;
     border-radius: $border-radius;
     cursor: pointer;

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_illustration.scss

@@ -0,0 +1,7 @@
+.illustration {
+  max-width: 100%;
+  height: auto;
+  max-height: ($spacer * 6);
+}
+.illustration-sm { max-height: ($spacer * 4); }
+.illustration-lg { max-height: ($spacer * 10); }

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_nav_step.scss

@@ -7,10 +7,10 @@
 
 
     // Background connector bar between items
-    &::after {
+    &::before {
       position: absolute;
       top: (($spacer * .5) - .1rem);
-      left: 50%;
+      right: 50%;
       width: 100%;
       height: ($border-width + 1px);
       background-color: $border-color;
@@ -20,20 +20,33 @@
 
 
     // Removes the background connector bar on the last item
-    &:last-child {
-      &::after { display: none; }
+    &:first-child {
+      &::before { display: none; }
     }
 
 
     // Various states
     &.visited, &.active {
+      &::before { background-color: $primary; }
       .step-indicator {
         color: $white;
         background-color: $primary;
         border-color: $primary;
       }
     }
-    &.visited::after { background-color: $primary; }
+    &.active {
+      .nav-link {
+        .step-indicator::after { opacity: 1; }
+      }
+      ~ .visited {
+        &::before { background-color: $secondary; }
+        .step-indicator {
+          background-color: $secondary;
+          border-color: $secondary;
+          &::after { box-shadow: 0 0 0 ($spacer * .25) transparentize($secondary, 0.5); };
+        }
+      }
+    }
     &.disabled {
       cursor: default;
       pointer-events: none;

data/app/views/nfg_ui/email/_alert.html.inky-haml

@@ -0,0 +1,10 @@
+- theme_color = nil if local_assigns[:theme_color].nil?
+- body = '' if local_assigns[:body].nil?
+
+%callout{ class: theme_color }
+  %row
+    %columns
+      - if body.present?
+        %p= body
+      - else
+        = yield

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

@@ -9,20 +9,26 @@ module NfgUi
 
         include NfgUi::Components::Utilities::Iconable
 
+        include NfgUi::Components::Traits::Active
         include NfgUi::Components::Traits::Step
 
-        def component_family
-          :steps
+        # Override #active from Activatable
+        def active
+          # Active is a transitory state for steps
+          # So when a step is active, it is automatically visited.
+          # This sets visited to true.
+          # This is also accounted for in the #active_trait for steps.
+          options[:visited] = true if options[:active]
+          super
         end
 
-        def step
-          options.fetch(:step, nil)
-        end
-
-        def visited
-          options.fetch(:visited, false)
+        def component_family
+          :steps
         end
 
+        # NOTE: DISABLED TOOLTIPS DO NOT YET WORK ON STEPS
+        # NAVITEM DOES NOT INCLUDE DISABLEABLE MODULE
+        # JR: 06-21-2019
         def disabled
           options[:disabled] || (!visited && !active)
         end
@@ -33,6 +39,14 @@ module NfgUi
           end
         end
 
+        def step
+          options.fetch(:step, nil)
+        end
+
+        def visited
+          options.fetch(:visited, false)
+        end
+
         private
 
         def base_element

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Foundations
+      # Grid doc coming soon
+      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
+        end
+
+        private
+
+        def component_css_class
+          responsive ? '' : 'illustration'
+        end
+
+        def default_responsive
+          false
+        end
+      end
+    end
+  end
+end

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

@@ -5,8 +5,66 @@ module NfgUi
     module Foundations
       # Image doc coming soon
       class Image < NfgUi::Components::Base
+        include Bootstrap::Utilities::Tooltipable
+
+        def css_classes
+          [
+            super,
+            ('img-fluid' if responsive)
+          ].join(' ').squish
+        end
+
+        # Prefer image, image is used
+        # on other components that pull in
+        # the image (e.g. Illustration)
+        def image
+          options.fetch(:image, nil)
+        end
+
         def render
-          content_tag(:img, html_options) {}
+          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
+        def src
+          options.fetch(:src, image)
+        end
+
+        private
+
+        def component_css_class
+          ''
+        end
+
+        def default_responsive
+          true
+        end
+
+        # Provide a fallback image location and default to src
+        # :src will default to the :image option
+        # if :src is not set.
+        #
+        # We prefer the :image keyword here because of its specificity and to pass between components.
+        #
+        # Ex: `:button, image: '...'`
+        def image_location
+          src || ''
+        end
+
+        # :src is removed because we leveage the #image_tag helper method.
+        #
+        # the image_tag helper method automatically turns the first argument into the `src` attribute.
+        def non_html_attribute_options
+          super.push(:image, :src, :responsive)
         end
       end
     end

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

@@ -0,0 +1,14 @@
+module NfgUi
+  module Components
+    module Traits
+      # Shared Size traits
+      module Illustration
+        TRAITS = %i[responsive].freeze
+
+        def responsive_trait
+          options[:responsive] = true
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/traits.rb

@@ -18,6 +18,7 @@ module NfgUi
                          Dismiss
                          DropdownToggle
                          Icon
+                         Illustration
                          ListGroup
                          Muted
                          Nav

data/lib/nfg_ui/version.rb

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

data/lib/nfg_ui.rb

@@ -83,6 +83,7 @@ module NfgUi
 
   FOUNDATION_COMPONENT_NAMES = %i[color
                                   icon
+                                  illustration
                                   image
                                   input
                                   grid

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.9.10
+  version: 0.9.11
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-12 00:00:00.000000000 Z
+date: 2019-07-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -334,6 +334,8 @@ files:
 - app/assets/images/nfg_ui/app_icon/safari-pinned-tab.svg
 - app/assets/images/nfg_ui/app_icon/site.webmanifest.erb
 - app/assets/images/nfg_ui/email/icons/fa-caret-right.png
+- app/assets/images/nfg_ui/email/icons/fa-check-circle-o-success.png
+- app/assets/images/nfg_ui/email/icons/fa-check-circle-success.png
 - app/assets/images/nfg_ui/email/icons/fa-facebook.png
 - app/assets/images/nfg_ui/email/icons/fa-linkedin.png
 - app/assets/images/nfg_ui/email/icons/fa-twitter.png
@@ -370,6 +372,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_questions_questionnaire.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_custom_receipt_language.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_email_preview.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_illustration.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_interaction.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_mobile.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_nav_step.scss
@@ -456,6 +459,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_default.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_story.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_footer_links.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_illustration.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_nav_step.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_slat.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_social_share.scss
@@ -473,6 +477,7 @@ files:
 - app/models/nfg_ui/application_record.rb
 - app/views/nfg_ui/app_icons/_icons.html.haml
 - app/views/nfg_ui/email/README.md
+- app/views/nfg_ui/email/_alert.html.inky-haml
 - app/views/nfg_ui/email/_button.html.haml
 - app/views/nfg_ui/email/_email_signature.html.haml
 - app/views/nfg_ui/email/_footer.html.haml
@@ -615,6 +620,7 @@ files:
 - lib/nfg_ui/components/foundations/color.rb
 - lib/nfg_ui/components/foundations/grid.rb
 - lib/nfg_ui/components/foundations/icon.rb
+- lib/nfg_ui/components/foundations/illustration.rb
 - lib/nfg_ui/components/foundations/image.rb
 - lib/nfg_ui/components/foundations/input.rb
 - lib/nfg_ui/components/foundations/typeface.rb
@@ -664,6 +670,7 @@ 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