nfg_ui 0.9.18.3 → 0.9.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b287c554e7af2675d77fc603b76701fd82e0e4146051ac3aeef56255325cac38
-  data.tar.gz: 13a04dee8908d23e96a2fabe55b6b9a2b26e9550826cc3ae61f0ed8c533e93eb
+  metadata.gz: 6e5bbcb27ac27f8426efeed5141e03cb6547993924c2b4f08723895bf1b37ab4
+  data.tar.gz: 0015a4dbb6e348aa114b1c9a0b0d005d11e47708fec14704c32d6d1888026476
 SHA512:
-  metadata.gz: 9aade3d6eab931bb993d78dad3b28d9eefe1faa86fa044821d651e22a2e2c209c01891f8c388e53fb08f9d3dfa5cb974f4bb0174b90c12276de36a408fc8aba8
-  data.tar.gz: 01dadc7832c5a53aa1ff8d8d138520aa0559a3c817475720d8c50c2d585fbbb7b7f4d70457137af295f454753704b873185d58fd922da17ed5001b909f8dff9e
+  metadata.gz: 8c4e347b204fae62ef69557e67a8e6ddb9457602ca298f818b46157f04ed63cd210eb1d4651b3d77f417e3ee7f684364cabc9a388a3408fe3e6f627cafdb0243
+  data.tar.gz: 72eb996d6d153a5827fc7030cb47ee3a7c474bc8d3ea3b18ae85ace97182c54648db52f73db46a5037fb9c1429286ac2a59ec5609dc0ef055cada6d19b55204a

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

@@ -1,5 +1,6 @@
 // Our custom styles
 @import 'custom/admin_bar';
+@import 'custom/avatar';
 @import 'custom/background_variations';
 @import 'custom/everyday_default';
 @import 'custom/everyday_story';

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

@@ -0,0 +1,54 @@
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  width: ($spacer * 2);
+  height: ($spacer * 2);
+  color: transparent;
+  background-color: $border-color;
+  border-radius: 50%;
+
+  // Images within avatars
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  // Text (initials) within avatars
+  .avatar-text {
+    font-weight: $font-weight-bold;
+    font-size: $font-size-base;
+    line-height: 1;
+    color: $body-color;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  // Sizes
+  &.avatar-sm {
+    width: $spacer;
+    height: $spacer;
+    .avatar-text { font-size: ($font-size-base * .625); }
+  }
+  &.avatar-lg {
+    width: ($spacer * 4);
+    height: ($spacer * 4);
+    .avatar-text { font-size: $font-size-lg; }
+  }
+  &.avatar-xl {
+    width: ($spacer * 5);
+    height: ($spacer * 5);
+    .avatar-text { font-size: $h1-font-size; }
+  }
+}
+
+// Avatar as a link
+a.avatar {
+  opacity: 1;
+  transition: $transition-fade;
+  &:hover, &:active { opacity: $btn-disabled-opacity; }
+}

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

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+module NfgUi
+  module Components
+    module Elements
+      # Activity doc coming soon
+      class Avatar < NfgUi::Components::Base
+        include Bootstrap::Utilities::Sizable
+        include Bootstrap::Utilities::Tooltipable
+        include Bootstrap::Utilities::Wrappable
+
+        include NfgUi::Components::Traits::Size
+
+        def alt
+          options.fetch(:alt, nil)
+        end
+
+        def image
+          options.fetch(:image, nil)
+        end
+
+        def render
+          content_tag(as, html_options) do
+            if image.present?
+              image_tag image, alt: alt.presence
+            elsif body.present?
+              content_tag(:span, (block_given? ? yield : body), class: body_css_class)
+            end
+          end
+        end
+
+        # Set the default size if no size is set.
+        # Avatars, unlike other components, always have a size
+        # provided to them.
+        # This also rejects nil from fetching as a fallback
+        def size
+          options[:size] || default_size
+        end
+
+        private
+
+        def body_css_class
+          'avatar-text'
+        end
+
+        def default_html_wrapper_element
+          :div
+        end
+
+        def default_size
+          :md
+        end
+
+        def non_html_attribute_options
+          super.push(:image, :alt)
+        end
+
+        # Sizable doesn't allow components to use illegal sizes (anything other than :sm or :lg)
+        # When an illegal size is detected, it does not generate the size css class (e.g.: 'avatar-xl')
+        #
+        # nfg_ui implements more sizes than "sm" and "lg",
+        # We set #resized? updated restrictions here, instead.
+        # allowing updated size css classes to be passed to html_options
+        def resized?
+          [:sm, :md, :lg, :xl].include?(size)
+        end
+      end
+    end
+  end
+end

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

@@ -3,15 +3,23 @@ module NfgUi
     module Traits
       # Shared Size traits
       module Size
-        TRAITS = %i[lg sm].freeze
+        TRAITS = %i[sm md lg xl].freeze
 
         def lg_trait
           options[:size] = :lg
         end
 
+        def md_trait
+          options[:size] = :md
+        end
+
         def sm_trait
           options[:size] = :sm
         end
+
+        def xl_trait
+          options[:size] = :xl
+        end
       end
     end
   end

data/lib/nfg_ui/version.rb

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

data/lib/nfg_ui.rb

@@ -94,6 +94,7 @@ module NfgUi
 
   ELEMENT_COMPONENT_NAMES    = %i[activity
                                   alert
+                                  avatar
                                   badge
                                   breadcrumb
                                   breadcrumb_item

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.9.18.3
+  version: 0.9.19
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-09-19 00:00:00.000000000 Z
+date: 2019-10-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -492,6 +492,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_tooltip.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_type.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_admin_bar.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_avatar.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_background_variations.scss
 - 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
@@ -609,6 +610,7 @@ files:
 - lib/nfg_ui/components/elements.rb
 - lib/nfg_ui/components/elements/activity.rb
 - lib/nfg_ui/components/elements/alert.rb
+- lib/nfg_ui/components/elements/avatar.rb
 - lib/nfg_ui/components/elements/badge.rb
 - lib/nfg_ui/components/elements/breadcrumb.rb
 - lib/nfg_ui/components/elements/breadcrumb_item.rb