nfg_ui 0.9.9 → 0.9.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e929dc744ed1f19b18929848cdb4d01746d23cad7c72a79a9dfb9c3295f2ee8b
-  data.tar.gz: 7760d51a76d7ec5c639a7baf1277bdde9e4c459e63257d2748747b9a9dc6842e
+  metadata.gz: 91d2b591a3156c120e2d634e0a1f70bf85989f94cefd242565445297794a10e8
+  data.tar.gz: afc72e98c8e3379e3d7dd93b602848bcb043848b82dd79f30edc1ec417d06ce4
 SHA512:
-  metadata.gz: fd11a1b6c33e5c98d3654006f3da19a7bec77921e41fd0406ea83de3d31d08dc3c7b3cce4416b7eddad970341139562a41802b66902f5e42686b7bbff2105dda
-  data.tar.gz: 6c304b8e6b4aef3ac831c1d772c5f512f2d702fbe7f3d3f966d0f3b6f9ed942bb6d5f4cb4624e73516dbd8c885229667cddaeb671bf88ce9411063e1c8c9e73c
+  metadata.gz: 8549a0db880057b3e9e44be1ac6a0f5a8d20ed3f390025a281c26b5d5b0e697a380653f8db0b5e2cebaa0e752ed460ec70a83823d6f45afca9d291d18ce2bbab
+  data.tar.gz: 8b2f43543f01d2ba9a36ce9ccfe04a30d6d203352e2835943856ed034bfeb89ce71e55ac0b8f660b5d4ed9ea2bc23189d9a4ee720f7bc2b26bae17dbe839c7a1

data/README.md

@@ -6,7 +6,7 @@ Note: the readme documentation is a little out of date and will be updated with
 [Jump to development / setting up the gem locally](https://github.com/network-for-good/nfg_ui/blob/master/README.md#local-development--accessing-documentation)
 
 ```ruby
-gem 'nfg_ui', git: 'https://github.com/network-for-good/nfg_ui'
+gem 'nfg_ui'
 ```
 
 NFG UX & UI team_ (J&K) are excited to bring you... the *Network For Good design system* gem or: `nfg_ui` gem. This bad boy is an all encompassing one-stop shop for everything front-end for Network for Good products.
@@ -22,7 +22,7 @@ To review the documentation for the components, get code samples and browse the
 
 ### Include the gem in your Gemfile
 ```ruby
-gem 'nfg_ui', git: 'https://github.com/network-for-good/nfg_ui'
+gem 'nfg_ui'
 ```
 
 ### Import & Require the gem's assets
@@ -358,6 +358,8 @@ $ Collapsible? (Y/n):
 
 31. _Add a generator to supply the bootstrap shared examples for spec writing your own components._
 
+32. Need to integrate will_paginate rendering into the nfg_ui gem.
+
 Component tooltip/icon auto list for backup
 FOUNDATION_COMPONENT_NAMES = %i[color
                                   icon

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

@@ -2,8 +2,7 @@
 .event {
   .jumbotron {
     height: auto;
-    @include border-radius(0);
-    background-repeat:no-repeat;
+    background-repeat: no-repeat;
     background-size: cover;
     &:before {
       position: absolute;
@@ -12,8 +11,14 @@
       bottom: 0;
       left: 0;
       z-index: 0;
-      background-color: transparentize(#000, 0.7);
+      background-color: transparentize($black, 0.7);
       content: '';
     }
+    @include media-breakpoint-down(md) {
+      background-image: none !important;
+      &:before { display: none; }
+      .card { box-shadow: none; }
+      .card-body { padding: 0; }
+    }
   }
 }

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

@@ -1,7 +1,6 @@
 // Styles specific to the everyday story style
 .everyday_story {
   .jumbotron {
-    width: 100%;
     height: 100%;
     background-repeat: no-repeat;
     background-size: cover;

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

@@ -23,41 +23,80 @@ module NfgUi
         LEFT_ICON_SPACER_CSS_CLASS  = 'mr-1'
         RIGHT_ICON_SPACER_CSS_CLASS = 'ml-1'
 
+        # Utilize a trait or `:icon` within options.
+        # When setting the icon as a trait, you must pass in a string.
+        # If a symbol is detected, the component assumes it's a registered trait
+        #
+        # Example usage as a trait:
+        # = ui.nfg :icon, 'heart'
+        #
+        # Example usage as an option:
+        # = ui.nfg :icon, icon: 'heart'
+        #
+        # This is useful in syncing up the ability to pass in `:icon` to
+        # components that accept `:icon` in options and automatically render an icon.
+        def icon
+          options[:icon] || (traits.slice!(0).to_s if traits.first.is_a?(String))
+        end
+
+        # Outputs a Font Awesome icon using the #fa_icon method.
         def render
           view_context.fa_icon icon, **html_options, text: text, right: right
         end
 
-        def icon
-          options[:icon] || (traits.slice!(0).to_s if traits.first.is_a?(String))
+        # Tap into the font_awesome_rails :right method to
+        # place the icon on the right side of the text.
+        # This also automatically adds the right side css spacer class to the icon <i> tag.
+        def right
+          options.fetch(:right, false)
         end
 
+        # Tap into the font_awesome_rails :text method to
+        # insert text into the rendered component.
         def text
           options.fetch(:text, nil)
         end
 
-        def right
-          options.fetch(:right, false)
+        private
+
+        # Adds the left css spacer class when :right is false
+        # and when text is present
+        def add_left_icon_css_spacer_class?
+          !right && text.present?
         end
 
-        private
+        # Adds the left css spacer class when :right is true
+        # and when text is present
+        def add_right_icon_css_spacer_class?
+          right && text.present?
+        end
+
+        def assistive_html_attributes
+          super.merge(aria: { hidden: true })
+        end
+
+        # Override the auto generated css class
+        def component_css_class
+          ''
+        end
 
+        # Icons utilize "spacer" css classes to manually provide margins
+        # between the icon and the text.
         def css_classes
-          return super unless update_css_classes?
           [
             super,
-            (NfgUi::Components::Foundations::Icon::LEFT_ICON_SPACER_CSS_CLASS unless right),
-            (NfgUi::Components::Foundations::Icon::RIGHT_ICON_SPACER_CSS_CLASS if right)
+            (NfgUi::Components::Foundations::Icon::LEFT_ICON_SPACER_CSS_CLASS if add_left_icon_css_spacer_class?),
+            (NfgUi::Components::Foundations::Icon::RIGHT_ICON_SPACER_CSS_CLASS if add_right_icon_css_spacer_class?)
           ].join(' ').squish
         end
 
+        # Icons utilize text styling for css theming.
         def theme_css_class_prefix
           'text-'
         end
 
-        def component_css_class
-          ''
-        end
-
+        # Icons should be body text color by default and should not
+        # have a theme set by default.
         def default_theme
           nil
         end
@@ -66,16 +105,10 @@ module NfgUi
           super.push(:right, :text, :icon)
         end
 
+        # Icons are not thematically outlineable
         def outlineable?
           false
         end
-
-        # Several components need to utilize the icon with a spacer css class
-        # where text is supplied in the #render, and not passed to the icon
-        # thus, icons with :right trait are allowed through
-        def update_css_classes?
-          text || right
-        end
       end
     end
   end

data/lib/nfg_ui/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.9.9
+  version: 0.9.10
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-06-05 00:00:00.000000000 Z
+date: 2019-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap