nfg_ui 0.9.8.15

data/app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_datepicker.scss

@@ -0,0 +1,2 @@
+// fixes z-index issue for default datepicker
+.ui-datepicker { z-index: $zindex-dropdown !important; }

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

@@ -0,0 +1,216 @@
+//*****************************//
+// SELECT 2
+//*****************************//
+
+.select2-container {
+  display: block !important;
+  width: auto !important;
+  max-width: 100% !important;
+}
+.select2.select2-hidden-accessible { width: auto !important; } // Prevents horizontal scrolling on designation select on donation form
+
+body:not(.modal-open) {
+  .select2-container--default { z-index: $zindex-dropdown; }
+}
+
+.select2-container--default {
+  &.select2-container--focus .select2-selection--multiple { border-color: $primary; }
+  &.select2-container--open {
+    .select2-selection--single {
+      border-color: $custom-select-focus-border-color !important;
+    }
+  }
+
+  //** Single select option
+  .select2-selection--single {
+    display: inline-block;
+    width: 100%;
+    height: $custom-select-height !important;
+    padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x !important;
+    font-weight: $btn-font-weight;
+    line-height: $custom-select-line-height;
+    color: $custom-select-color;
+    vertical-align: middle;
+    background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
+    background-size: $custom-select-bg-size;
+    border: $custom-select-border-width solid $custom-select-border-color !important;
+    border-radius: $border-radius;
+    outline: none;
+    cursor: pointer;
+    transition: $transition-base;
+    .select2-selection__rendered {
+      padding: 0 !important;
+      color: $primary !important;
+      line-height: $spacer !important;
+      height: $custom-select-height !important;
+      transition: $transition-base;
+    }
+    .select2-selection__arrow { display: none; }
+  }
+
+  //** Multiple select option
+  .select2-selection--multiple {
+    padding: 8px $input-padding-x 0;
+    min-height: $input-height;
+    font-size: $font-size-base;
+    color: $input-color;
+    border: $border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    transition: $transition-base;
+    .select2-search--inline {
+      min-height: 18px;
+      font-size: $font-size-base;
+      color: $input-color;
+      line-height: 1;
+      .select2-search__field {
+        margin-top: 0;
+        min-height: 18px;
+        border: $input-border-width solid $input-border-color;
+      }
+    }
+    .select2-selection__rendered {
+      margin: 0;
+      padding: 0 !important;
+      @include clearfix();
+      .select2-selection__choice {
+        margin: 0 3px 3px 0;
+        padding: 3px ($spacer * .25);
+        min-width: 14px;
+        font-weight: $badge-font-weight;
+        font-size: $font-size-sm;
+        line-height: 1;
+        color: $primary;
+        background-color: $white;
+        border: $border-width solid $border-color;
+        border-radius: $border-radius;
+        transition: $transition-base;
+        &:hover, &:active {
+          color: $body-color;
+          background-color: theme-color("light");
+        }
+        + li { margin-top: 0; }
+      }
+    }
+    .select2-selection__choice__remove {
+      margin-right: ($spacer * .25);
+      color: $primary;
+    }
+  }
+
+  //** Dropdown styles
+  .select2-dropdown {
+    font-size: $font-size-base;
+    color: $body-color;
+    text-align: left;
+    list-style: none;
+    background-color: $dropdown-bg;
+    background-clip: padding-box;
+    border: $dropdown-border-width solid $dropdown-border-color;
+    @include border-radius($dropdown-border-radius);
+    @include box-shadow($dropdown-box-shadow);
+  }
+  .select2-search--dropdown {
+    padding: ($spacer * .5);
+    .select2-search__field {
+      display: block;
+      width: 100%;
+      padding: $input-padding-y $input-padding-x;
+      font-size: $font-size-base;
+      line-height: $input-line-height;
+      color: $input-color;
+      background-color: $input-bg;
+      background-clip: padding-box;
+      border: $input-border-width solid $input-border-color;
+      outline: 0;
+      transition: $transition-base;
+      &:focus { border-color: $primary; }
+    }
+  }
+  .select2-results__option {
+    position: relative;
+    margin-top: 0;
+    display: block;
+    width: 100%; // For `<button>`s
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    clear: both;
+    font-weight: $font-weight-normal;
+    color: $dropdown-link-color;
+    text-align: inherit; // For `<button>`s
+    white-space: nowrap; // prevent links from randomly breaking onto new lines
+    background-color: transparent; // For `<button>`s
+    border: 0; // For `<button>`s
+    border-top: $border-width solid $border-color;
+    z-index: 1;
+    transition: $transition-base;
+    &.select2-results__option--highlighted, &.select2-results__option--highlighted[aria-selected] {
+      color: $body-color;
+      background-color: transparent;
+      &:hover, &:active {
+        color: $body-color;
+        background-color: theme-color("light");
+      }
+    }
+    &[aria-selected='true'] {
+      padding-right: ($spacer * 2);
+      color: $body-color !important;
+      background-color: transparent !important;
+      cursor: default;
+      &:after {
+        position: absolute;
+        top: ($spacer * .5);
+        right: ($spacer * .25);
+        width: 36px;
+        height: 100%;
+        font-family: "FontAwesome";
+        font-size: $font-size-base;
+        line-height: 1.5;
+        color: theme-color("success");
+        text-align: center;
+        content: '\f00c';
+        z-index: 5;
+      }
+    }
+    &[aria-disabled='true'] {
+      color: $text-muted;
+      font-weight: $font-weight-bold;
+      text-transform: uppercase;
+    }
+  }
+  .select2-results__group {
+    padding: ($spacer * .5);
+    font-weight: $headings-font-weight;
+    font-size: $font-size-base;
+    line-height: 1.3;
+  }
+}
+
+
+// Error handling
+  .has-danger {
+    .select2-selection {
+      border-color: theme-color("danger");
+      color: theme-color("danger");
+    }
+  }
+
+
+// Clear selection
+  .select2-selection__rendered .select2-selection__clear {
+    position: relative;
+    width: 60px;
+    color: transparent;
+    &:before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 60px;
+      font-size: 10px;
+      line-height: 34px;
+      font-family: $font-family-sans-serif;
+      color: $link-color;
+      text-transform: uppercase;
+      text-align: right;
+      z-index: 10;
+      content: "Clear X";
+    }
+  }

data/app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_sticky_div.scss

@@ -0,0 +1,11 @@
+// Styles to make sticky div perform correctly
+
+[data-toggle='sticky-div'] {
+  position: relative; // fallback for IE, etc
+  position: sticky;
+  position: -webkit-sticky;
+  top: 0;
+  z-index: ($zindex-dropdown - 1);
+  transition: $transition-base;
+  &.stuck { z-index: $zindex-sticky; }
+}

data/app/controllers/nfg_ui/application_controller.rb

@@ -0,0 +1,5 @@
+module NfgUi
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+  end
+end

data/app/helpers/nfg_ui/application_helper.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module NfgUi
+  # Core rendering helper methods
+  module ApplicationHelper
+    # render components from the pertinent suite
+    # Network for Good components: = ui.nfg
+    # Bootstrap core components:   = ui.bootstrap
+    include FontAwesome::Rails::IconHelper
+
+    def ui
+      @ui ||= NfgUi::UI::Base.new(get_view_context)
+    end
+
+    private
+
+    # presenter class controller may not be defined
+    def get_view_context
+      if defined?(controller) && controller.present?
+        controller.view_context
+      else
+        ApplicationController.new.view_context
+      end
+      # @ui ||= NfgUi::UI::Base.new(controller.view_context)
+    end
+  end
+end

data/app/helpers/nfg_ui/components/email_helpers.rb

@@ -0,0 +1,8 @@
+module NfgUi
+  module Components
+    module EmailHelpers
+      require 'nfg_ui/components/utilities/emailable'
+      include NfgUi::Components::Utilities::Emailable
+    end
+  end
+end

data/app/helpers/nfg_ui/components/resource_themes_helper.rb

@@ -0,0 +1,8 @@
+module NfgUi
+  module Components
+    module ResourceThemesHelper
+      require 'nfg_ui/components/utilities/resource_themeable'
+      include NfgUi::Components::Utilities::ResourceThemeable
+    end
+  end
+end

data/app/helpers/nfg_ui/components/tooltip_helper.rb

@@ -0,0 +1,24 @@
+module NfgUi
+  module Components
+    module TooltipHelper
+      def tooltip(tooltip_content, placement = :top, data = {})
+        # IMPORTANT NOTE: This must be included as the first argument within your element.
+        # Working Example: # %span{ bootstrap_tooltip(t(".tooltips.group_name"), :top), class: "my-class" }
+
+        acceptable_placement_directions = %i[right top bottom left]
+
+        raise StandardError.new("Acceptable placement options are :right, :top, :bottom or :left, only... and you assigned #{placement}") unless acceptable_placement_directions.include?(placement)
+
+        if browser_is_a_touch_device?
+          {}
+        else
+          { title: tooltip_content, data: data.merge(placement: placement, toggle: "tooltip", html: 'true') }
+        end
+      end
+
+      def browser_is_a_touch_device?
+        browser.mobile? || browser.tablet?
+      end
+    end
+  end
+end

data/app/models/nfg_ui/application_record.rb

@@ -0,0 +1,5 @@
+module NfgUi
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/nfg_ui/app_icons/_icons.html.haml

@@ -0,0 +1,10 @@
+= favicon_link_tag 'nfg_ui/app_icon/apple-touch-icon.png', rel: 'apple-touch-icon', sizes: '180x180', type: nil
+= favicon_link_tag 'nfg_ui/app_icon/favicon.ico'
+= favicon_link_tag 'nfg_ui/app_icon/favicon-32x32.png', rel: 'icon', sizes: '32x32', type: 'image/png'
+= favicon_link_tag 'nfg_ui/app_icon/favicon-16x16.png', rel: 'icon', sizes: '16x16', type: 'image/png'
+= favicon_link_tag 'nfg_ui/app_icon/site.webmanifest', rel: 'manifest', type: nil
+= favicon_link_tag 'nfg_ui/app_icon/safari-pinned-tab.svg', color: '#25ACEB', rel: 'mask-icon', type: nil
+
+%meta{ content: '#ffffff', name: 'msapplication-TileColor' }
+%meta{ name: 'msapplication-config', content: asset_path('nfg_ui/app_icon/browserconfig.xml') }
+%meta{ content: '#ffffff', name: 'theme-color' }

data/app/views/nfg_ui/email/README.md

@@ -0,0 +1,12 @@
+Note:
+These views are pulled from https://github.com/network-for-good/sso_login_emails
+These files are being moved here to be centralized so that Evo & DM can use these
+as needed.
+
+For now, these views must be manually rendered as partials / templates on your views
+There are no ui.nfg methods available for emails at this point.
+
+Example:
+= render "nfg_ui/email/rainbow_bar"
+
+- JR: 2/24/2019

data/app/views/nfg_ui/email/_button.html.haml

@@ -0,0 +1,12 @@
+- url = local_assigns[:url]
+- text = local_assigns[:text]
+- size = nil if local_assigns[:size].nil?
+- theme_color = nil if local_assigns[:theme_color].nil?
+- expanded_class = "expanded" if local_assigns[:expanded_class].nil?
+- inverse = false if local_assigns[:inverse].nil?
+
+- button_classes = [size.to_s, "radius", theme_color, expanded_class, ('inverse' if inverse)].join(" ")
+
+%button{ class: button_classes, href: url }
+  = text
+  %img.display-inline-block.m-l-quarter{ src: image_path(t("nfg_ui.email.images.icons.caret")), alt: t("nfg_ui.email.images.alt.caret"), width: "6", style: "width:6px;" }

data/app/views/nfg_ui/email/_email_signature.html.haml

@@ -0,0 +1,4 @@
+- i18n_scope = local_assigns[:i18n_scope]
+
+%p.text-muted
+  = t('ps.content', scope: i18n_scope, support_page: t('nfg_ui.email.links.nfg_website.support_page')).html_safe

data/app/views/nfg_ui/email/_footer.html.haml

@@ -0,0 +1,16 @@
+%wrapper.footer
+  %row
+    %columns
+      %center
+        %menu
+          = render partial: "nfg_ui/email/social_network_link", locals: { social_network: :facebook, icon_size: 15 }
+          = render partial: "nfg_ui/email/social_network_link", locals: { social_network: :twitter, icon_size: 16 }
+          = render partial: "nfg_ui/email/social_network_link", locals: { social_network: :linkedin, icon_size: 16 }
+          = render partial: "nfg_ui/email/social_network_link", locals: { social_network: :youtube, icon_size: 18 }
+  %row
+    %columns
+      %center
+        %p
+          %small
+            = t 'nfg_ui.email.company.address'
+      %spacer{ size: spacer(:quadruple) }

data/app/views/nfg_ui/email/_header.html.haml

@@ -0,0 +1,6 @@
+- heading = nil if local_assigns[:heading].nil?
+%row
+  %columns
+    - if heading
+      %h2= heading
+    = yield

data/app/views/nfg_ui/email/_logo.html.haml

@@ -0,0 +1,6 @@
+%row
+  %columns
+    %spacer{ size: spacer(:double) }
+    %a{ href: t('nfg_ui.email.links.nfg_website.homepage'), target: "_blank" }
+      %img.display-inline-block{ src: image_path(t("nfg_ui.email.images.logo")), alt: t('nfg_ui.email.images.alt.logo'), width: "220", style: "width:220px;" }/
+    %spacer{ size: spacer(:triple) }

data/app/views/nfg_ui/email/_product_content_image.html.haml

@@ -0,0 +1,7 @@
+- image = local_assigns[:image]
+- theme_color = local_assigns[:theme_color]
+- image_size = local_assigns[:image_size]
+
+%columns{ class: "bg-image bg-image-#{theme_color}", large: "4", valign: "middle" }
+  %center.p-y-base
+    %img{ src: image_path(image), width: image_size, style: "width:#{image_size}px;" }

data/app/views/nfg_ui/email/_rainbow_bar.html.haml

@@ -0,0 +1,10 @@
+%row.brand-colors
+  %td.bar1  
+  %td.bar2  
+  %td.bar3  
+  %td.bar4  
+  %td.bar5  
+  %td.bar6  
+  %td.bar7  
+  %td.bar8  
+  %td.bar9  

data/app/views/nfg_ui/email/_section_header.html.haml

@@ -0,0 +1,8 @@
+- heading = local_assigns[:heading]
+%spacer{ size: spacer(:triple) }
+%row
+  %columns
+    %center
+      %h2= heading
+%spacer{ size: spacer(:double) }
+

data/app/views/nfg_ui/email/_social_network_link.html.haml

@@ -0,0 +1,12 @@
+-# Social network options: :facebook, :twitter, :linkedin, :youtube, :google_plus
+- social_network = local_assigns[:social_network]
+- icon_size = local_assigns[:icon_size]
+
+- root_of_scope = [:nfg_ui, :email]
+
+- image_scope = [*root_of_scope, :images, :icons, :social]
+- alt_scope = [*root_of_scope, :images, :alt, :social]
+- url_scope = [*root_of_scope, :links]
+
+%item{ href: t("social.#{social_network}", scope: url_scope), target: "_blank" }
+  %img{ src: image_path(t("#{social_network}", scope: image_scope)), alt: t("#{social_network}", scope: alt_scope), width: icon_size, style: "width: #{icon_size}px;" }

data/app/views/nfg_ui/email/_sub_footer.html.haml

@@ -0,0 +1,9 @@
+- content = local_assigns[:content]
+
+%spacer{ size: spacer(:base) }
+%row
+  %columns
+    %center
+      %p.m-b-0
+        %small
+          = content

data/app/views/nfg_ui/email/_table_row.html.haml

@@ -0,0 +1,13 @@
+- left_column = local_assigns[:left_column]
+- right_column = nil if local_assigns[:right_column].nil?
+- theme_color = nil if local_assigns[:theme_color].nil?
+
+%row.border-item
+  %columns{ small: "5" }
+    %b= left_column
+  %columns{ small: "7" }
+    .text-right
+      - if right_column
+        %span{ class: ("text-#{theme_color}" if theme_color) }= right_column
+      - else
+        = yield

data/config/initializers/web_app_manifest.rb

@@ -0,0 +1,3 @@
+Rails.application.config.assets.configure do |env|
+  env.register_mime_type('application/manifest+json', extensions: ['.webmanifest'])
+end

data/config/locales/email.yml

@@ -0,0 +1,34 @@
+en:
+  nfg_ui:
+    email:
+      company:
+        name: "Network for Good"
+        address: "Network for Good | 1140 Connecticut Avenue NW, Suite 700, Washington, District of Columbia 20036"
+      images:
+        logo: "https://identity.networkforgood.org/images/nfg-logo.png"
+        alt:
+          caret: ">"
+          logo: "Network for Good"
+          social:
+            facebook: "Network for Good on Facebook"
+            twitter: "Network for Good on Twitter"
+            linkedin: "Network for Good on LinkedIn"
+            youtube: "Network for Good on YouTube"
+            google_plus: "Network for Good on Google+"
+        icons:
+          social:
+            facebook: "https://identity.networkforgood.org/images/fa-facebook.png"
+            twitter: "https://identity.networkforgood.org/images/fa-twitter.png"
+            linkedin: "https://identity.networkforgood.org/images/fa-linkedin.png"
+            youtube: "https://identity.networkforgood.org/images/fa-youtube.png"
+            google_plus: "https://identity.networkforgood.org/images/fa-google-plus.png"
+          caret: "https://identity.networkforgood.org/images/fa-caret-right.png"
+      links:
+        nfg_website:
+          homepage: "http://www.networkforgood.com"
+          support_page: "http://www.networkforgood.com/support/"
+        social:
+          facebook: "https://www.facebook.com/networkforgood"
+          twitter: "https://twitter.com/Network4Good"
+          linkedin: "https://www.linkedin.com/company/network-for-good"
+          youtube: "https://www.youtube.com/user/NetworkForGood"

data/config/locales/en.yml

@@ -0,0 +1,63 @@
+en:
+  nfg_ui:
+    errors:
+      argument_error:
+        # required keys -- :modal, :class_name, :options, :file, :method
+        # 
+        # Example keys:
+        # 
+        # modal: '#example'
+        # class_name: self.class.name
+        # options: options
+        # file: __FILE__
+        # method: __method__
+        modalable:
+          tooltip: |
+                     ArgumentError: :modal & :tooltip may not both be present in :options hash
+
+                     Raised from gem file: %{file}
+                     Raised from gem method: #%{method}
+                     
+                     To fix this error:
+                     Remove `tooltip: [the tooltip]` or `modal: '%{modal}'` from your component's :options hash
+
+                     Component Reference:
+                     Invalid component: %{class_name}
+                     Component options: %{options}
+
+                     About:
+                     Modal and Tooltip both utilize the data-toggle HTML data attribute. When :modal is present,
+                     it will always overwrite the tooltip's data-toggle attribute causing a silent failure
+                     in which the tooltip does not render (though the modal HTML does). 
+
+          remote:  |
+                     ArgumentError: :modal & remote: true may not both be present in :options hash
+                     
+                     Raised from gem file: %{file}
+                     Raised from gem method: #%{method}
+
+                     To fix this error:
+                     Remove `remote: true` or `modal: '%{modal}'` from your component's :options hash
+
+                     Example incorrect usage:
+                     = ui.nfg :button, remote: true, modal: '%{modal}', ...
+
+                     Component Reference:
+                     Invalid component: %{class_name}
+                     Component options: %{options}
+
+                     About:
+                     Components may not include both `modal: %{modal}` and `remote: true` in their options because modalable components 
+                     that fire remote actions can result in undesirable modal activation behavior.
+
+                     This tends to occur when a modal is injected into the page from a remote action, is subsequently dismissed
+                     and then opened again from the same remote link.
+
+                     The previously dismissed modal appears (because it's still on the page, and referenced in the component's HTML) 
+                     and the modal is then, visibly to the user, re-animated (overwritten and re-started) by the newly injected modal from the remote ajax action.
+                      
+
+
+                        
+
+                        

data/config/routes.rb

@@ -0,0 +1,2 @@
+NfgUi::Engine.routes.draw do
+end

data/config/spring.rb

@@ -0,0 +1 @@
+Spring.application_root = './spec/test_app'

data/lib/nfg_ui/bootstrap/components/alert.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Alert Component
+      # https://getbootstrap.com/docs/4.1/components/alerts/
+      class Alert < NfgUi::Bootstrap::Components::Base
+        include Bootstrap::Utilities::Dismissible
+        include Bootstrap::Utilities::Headable
+        include Bootstrap::Utilities::Themeable
+
+        def render
+          content_tag(:div, html_options) do
+            capture do
+              if dismissible
+                concat(
+                  NfgUi::Bootstrap::Components::Button.new({ as: :button, class: 'close', theme: nil, data: { dismiss: 'alert' }, aria: { label: 'Close' } }, view_context).render do
+                    content_tag(:span, "&times;".html_safe, aria: { hidden: 'true' } )
+                  end
+                )
+              end
+              if heading
+                concat(content_tag(:h4, heading, class: 'alert-heading'))
+              end
+              concat(block_given? ? yield : body)
+            end
+          end
+        end
+
+        private
+
+        def assistive_html_attributes
+          super.merge!(role: 'alert')
+        end
+
+        def css_classes
+          [
+            super,
+            ("#{component_css_class}-dismissible" if dismissible),
+            ('fade' if dismissible),
+            ('show' if dismissible)
+          ].join(' ').squish
+        end
+
+        def outlineable?
+          false
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/bootstrap/components/badge.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Badge Component
+      # https://getbootstrap.com/docs/4.1/components/badge/
+      class Badge < NfgUi::Bootstrap::Components::Base
+        include Bootstrap::Utilities::Themeable
+        include Bootstrap::Utilities::Wrappable
+
+        def pill
+          options.fetch(:pill, false)
+        end
+
+        private
+
+        def base_element
+          as #comes from the wrappable module
+        end
+
+        def css_classes
+          [
+            super,
+            ("#{component_css_class}-pill" if pill)
+          ].join(' ').squish
+        end
+
+        def default_html_wrapper_element
+          :span
+        end
+
+        def non_html_attribute_options
+          super.push(:pill)
+        end
+      end
+    end
+  end
+end