nfg_ui 0.10.13 → 0.11.1

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/nfg_theme/custom/_social_share.scss

@@ -3,6 +3,7 @@
 $facebook:      #3b5998 !default;
 $twitter:       #1da1f2 !default;
 $linkedin:      #0077b5 !default;
+$google-plus:   #dd4b39 !default;
 $pinterest:     #bd081c !default;
 
 $social-media-colors: () !default;
@@ -12,6 +13,7 @@ $social-media-colors: map-merge(
     "facebook":     $facebook,
     "twitter":      $twitter,
     "linkedin":     $linkedin,
+    "google-plus":  $google-plus,
     "pinterest":    $pinterest
   ),
   $social-media-colors

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/nfg_theme/custom/_tile.scss

@@ -8,8 +8,7 @@
   margin-left: auto;
   word-wrap: break-word;
   background-color: $white;
-  border-radius: $border-radius;
-  box-shadow: $box-shadow-sm;
+  border: $border-width solid $border-color;
   + .tile { margin-top: $spacer; }
 }
 

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

@@ -0,0 +1,5 @@
+// INTERCOM -- custom styles for https://www.intercom.io/ integration
+
+.intercom-lightweight-app-launcher, .intercom-launcher-frame { // second selector is class added to intercom icon after full screen closes on mobile
+  @include media-breakpoint-down(md) { bottom: ($spacer * 3.5) !important; } // adjusts location on medium devices and smaller
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/application.scss

@@ -1,24 +1,7 @@
 //** Public Styles **//
 
-// App Vendors
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700);
-@import 'font-awesome';
-@import 'select2';
+// Core Styles
+@import 'nfg_ui/network_for_good/core/application';
 
-// Our Variables
-@import 'variables';
-
-// Bootstrap Vendor Base
-@import 'bootstrap';
-
-// NFG Theme
+// Customization and Overrides
 @import 'nfg_theme/*';
-
-// Plugins
-@import 'plugins/datepicker';
-@import 'plugins/sticky_div';
-@import 'plugins/select2';
-@import 'plugins/datetimepicker';
-
-// Legacy browser support
-@import 'legacy_browser_support/application';

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

@@ -1,15 +1,8 @@
 // Our custom styles
 @import 'custom/admin_bar';
-@import 'custom/avatar';
 @import 'custom/background_variations';
 @import 'custom/donor_account';
+@import 'custom/event';
 @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';
-@import 'custom/ticket';
-@import 'custom/tile';
-@import 'custom/user_navbar';

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

@@ -1,50 +1,15 @@
-// Vertical navigations with left indicator
+// Vertical navigations with left indicator used in donor profile area
 .nav {
   &.flex-column {
     .nav-link {
       position: relative;
       color: $text-muted;
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: ($spacer * .25);
-        height: 100%;
-        border-radius: (($spacer * .25) / 2);
-        transition: $transition-base;
-        content: '';
-      }
+      border-left: 4px solid transparent;
       &.active {
         color: $nav-tabs-link-active-color !important;
-        &::after { background: $nav-tabs-link-hover-border-color; }
+        border-color: $nav-tabs-link-hover-border-color;
       }
       @include hover-focus { color: $nav-tabs-link-active-color !important; }
     }
   }
 }
-
-//
-// Tabs
-//
-.nav-tabs {
-  .nav-item { margin-right: ($spacer * .5); }
-  .nav-link {
-    position: relative;
-    color: $text-muted;
-    border: none;
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: ($spacer * .25);
-      border-radius: (($spacer * .25) / 2);
-      transition: $transition-base;
-      content: '';
-    }
-    @include hover-focus {
-      color: $nav-tabs-link-active-color !important;
-      &::after { background: $nav-tabs-link-hover-border-color; }
-    }
-  }
-}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/{custom/_user_navbar.scss → _navbar.scss}

@@ -1,10 +1,10 @@
 // Styles specific for the new user navbar on everyday_story and everyday_classic_style layouts
 
-$navbar-logo-height: (($spacer * 4.5) - ($navbar-padding-y * 2));
+$navbar-logo-height: (($spacer * 4.5) - $spacer);
 
 .navbar-brand {
   margin-right: 0;
-  padding: $navbar-padding-y 0;
+  padding: ($spacer * .5) 0;
   max-width: ($spacer * 8);
   height: $navbar-logo-height;
   white-space: normal !important;

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

@@ -3,6 +3,7 @@
   @include media-breakpoint-down(md) {
     &.jumbotron, &.card { background-color: $gray-800; }
   }
+  &.card { border-color: $gray-800; }
   h1, h2, h3, h4, h5, h6, p, label { color: $white; }
   .progress { background-color: $gray-600; }
 

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

@@ -6,7 +6,7 @@
     background-size: cover;
     @include media-breakpoint-down(md) {
       background-image: none !important;
-      .card { box-shadow: none; }
+      .card { box-shadow: none !important; }
       .card-body { padding: 0; }
     }
     @include media-breakpoint-up(lg) { min-height: 500px; }

data/lib/nfg_ui.rb

@@ -168,7 +168,6 @@ module NfgUi
                                   slat
                                   slat_actions
                                   slat_header
-                                  slat_list
                                   slats
                                   steps
                                   tab_content

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

@@ -21,7 +21,7 @@ module NfgUi
         def render
           content_tag(as, html_options) do
             if image.present?
-              image_tag image, alt: alt.presence
+              image_tag view_context.image_path(image), alt: alt.presence
             elsif body.present?
               content_tag(:span, (block_given? ? yield : body), class: body_css_class)
             end

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

@@ -24,13 +24,13 @@ module NfgUi
         end
 
         def render
-          super do
+          content_tag(base_element, slat_item_html_options) do
             if slat_header
-              concat(content_tag(:h6, slat_header, class: 'display-4'))
+              concat(content_tag(:h6, slat_header, class: 'display-4 slat-column-header'))
             end
             if heading
               if href
-                concat(content_tag(:a, href: href) {
+                concat(content_tag(:a, href: view_context.url_for(href)) {
                   NfgUi::Components::Foundations::Typeface.new({ subheading: heading }, view_context).render
                 })
               else
@@ -46,11 +46,16 @@ module NfgUi
 
         private
 
-        def css_classes
-          [
-            super,
-            ('text-word-wrap' if size == :lg)
-          ]
+        # Strip the href from html_options and pass it to the header
+        def slat_item_html_options
+          html_options.except(:href)
+        end
+
+        # :sm is the default size, and is not given
+        # a `slat-item-sm` class name.
+        # thus, reject :sm from resizable symbols.
+        def resized?
+          [:md, :lg, :xl].include?(size)
         end
 
         def non_html_attribute_options

data/lib/nfg_ui/components/patterns/slat_actions.rb

@@ -28,38 +28,15 @@ module NfgUi
           options.fetch(:menu, true)
         end
 
-        # Signal if this slat_action is being used
-        # In the slat_header area of the Slats
-        #
-        # If so, this then customizes the output of the
-        # SlatActions to ensure that the widths of the slat_header columns
-        # is accurate and matches the width of the slats below.
-        def slat_header
-          options.fetch(:slat_header, false)
-        end
-
-        # Signals if this is a wide SlatActions.
-        # This is a stylistic update which is used in situations like shopping carts where
-        # you may only be providing a summary and have no actions or extra columns.
-        #
-        # Note: Further documentation is needed on this
-        def wide
-          options.fetch(:wide, true)
-        end
-
         def render
           content_tag(:div, html_options) do
             if menu
-              if slat_header
-                content_tag(:h6, " ".html_safe, class: 'display-4')
-              else
-                NfgUi::Components::Patterns::Dropdown.new({ }, view_context).render do
-                  capture do
-                    concat(NfgUi::Components::Elements::DropdownToggle.new({ **default_dropdown_toggle_options, body: ('Actions' if wide)}, view_context).render)
-                    concat(NfgUi::Components::Patterns::DropdownMenu.new({ traits: [:right] }, view_context).render {
-                      (block_given? ? yield : body)
-                    })
-                  end
+              NfgUi::Components::Patterns::Dropdown.new({ }, view_context).render do
+                capture do
+                  concat(NfgUi::Components::Elements::DropdownToggle.new({ **default_dropdown_toggle_options, body: dropdown_toggle_body }, view_context).render)
+                  concat(NfgUi::Components::Patterns::DropdownMenu.new({ traits: [:right] }, view_context).render {
+                    (block_given? ? yield : body)
+                  })
                 end
               end
             else
@@ -76,15 +53,12 @@ module NfgUi
           { outlined: true, theme: :secondary }
         end
 
-        def css_classes
-          [
-            super,
-            ("#{component_css_class}-sm" unless wide)
-          ].join(' ').squish
+        def dropdown_toggle_body
+          content_tag(:span, 'Actions', class: 'slat-actions-text')
         end
 
         def non_html_attribute_options
-          super.push(:slat_header, :wide, :menu)
+          super.push(:menu)
         end
       end
     end

data/lib/nfg_ui/components/patterns/slats.rb

@@ -5,9 +5,69 @@ module NfgUi
     module Patterns
       # Main slats
       class Slats < NfgUi::Components::Base
+        include Bootstrap::Utilities::Sizable
+
+        include NfgUi::Components::Traits::Size
+        include NfgUi::Components::Traits::Slats
+
         def component_family
           :slats
         end
+
+        # When :nowrap is true,
+        # the slat-item columns will not break into rows
+        # regardless of responsive page width
+        #
+        # When false / not present
+        # slat item columns will break down into rows as expected in conventional
+        # responsivel webpage design.
+        def nowrap
+          options.fetch(:nowrap, false)
+        end
+
+        # Determine whether or not to accomodate a specific
+        # SlatActions size configuration
+        # by default, when slat_actions is not set
+        # it should have a nil presence
+        #
+        # Note:
+        # `nil` is different from the :none keyword
+        #
+        # Options:
+        # :sm - account for a small SlatAction (icon only)
+        # :lg - account for a large SlatAction (Text & Icon)
+        # :none - Do not account for a SlatAction
+        #
+        # Leaving `nil` for slat_actions will kick off
+        # default behavior for the Slats' SlatAction
+        # which is a combination of :lg (for large screen)
+        # and :sm for small screen (where the slat action flexes)
+        # across screen sizes hiding and showing its text
+        def slat_actions
+          options[:slat_actions] || nil
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            ("#{component_css_class}-nowrap" if nowrap),
+            ("slat-actions-#{slat_actions}" if slat_actions_resized?)
+          ].join(' ').squish
+        end
+
+        # Only acceptable keywords are:
+        # :sm, :lg, and :none
+        # all other slat_action keywords are ignored
+        def slat_actions_resized?
+          [:sm, :lg, :none].include?(slat_actions)
+        end
+
+        def non_html_attribute_options
+          super.push(:slat_actions, :nowrap)
+        end
+
       end
     end
   end

data/lib/nfg_ui/components/traits.rb

@@ -29,6 +29,7 @@ module NfgUi
                          Responsive
                          Size
                          Step
+                         Slats
                          SlatItem
                          Table
                          Theme

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

@@ -0,0 +1,26 @@
+module NfgUi
+  module Components
+    module Traits
+      # Step traits
+      module Slats
+        TRAITS = %i[slat_actions_sm slat_actions_lg slat_actions_none nowrap].freeze
+
+        def nowrap_trait
+          options[:nowrap] = true
+        end
+
+        def slat_actions_sm_trait
+          options[:slat_actions] = :sm
+        end
+
+        def slat_actions_lg_trait
+          options[:slat_actions] = :lg
+        end
+
+        def slat_actions_none_trait
+          options[:slat_actions] = :none
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/version.rb

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

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.10.13
+  version: 0.11.1
 platform: ruby
 authors:
 - Jonathan Roehm
 - Kyle Morin
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-05-29 00:00:00.000000000 Z
+date: 2020-09-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -395,67 +395,125 @@ files:
 - app/assets/javascripts/nfg_ui/vendor/legacy_browser_support/modernizr-preserve3d.min.js
 - app/assets/javascripts/nfg_ui/vendor/legacy_browser_support/modernizr-smil.min.js
 - app/assets/stylesheets/nfg_ui/bootstrap/application.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/_variables.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/application.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_alert.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_badge.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_buttons.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_custom-forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_custom.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_nav.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_pagination.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_progress.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_reboot.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_type.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_utilities.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_icons.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_nav_step.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/plugins/_datetimepicker.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/plugins/_select2.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_backgrounds.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_button-group.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_buttons.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_card.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom-forms.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_dropdown.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_forms.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_grid.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_media.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_modal.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_nav.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_navbar.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_progress.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_reboot.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_tables.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_tooltip.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_type.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_badge.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_buttons.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_custom-forms.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_custom.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_forms.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_nav.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_pagination.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_plugins.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_progress.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_reboot.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_type.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/_utilities.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/custom/_icons.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/custom/_nav_step.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/plugins/_datetimepicker.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/color_variations/plugins/_select2.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_avatar.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_card.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_preview.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_content_section_buttons.scss
 - 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/_device_preview.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/_free_trial.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_icomoon.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
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_overlay_blocker.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_page_header.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_redactor.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_share_dropdown.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_slat.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_social_share.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_status_indicator.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_ticket.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_tile.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_video_countdown.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/_variables.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/application.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/application.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_badge.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_buttons.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_custom-forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_custom.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_functions.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_nav.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_navbar.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_reboot.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_type.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/_utilities.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/custom/_everyday_default.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/nfg_theme/custom/_nav_step.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/plugins/_datetimepicker.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/entity_branding/plugins/_select2.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/_variables.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/application.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_breadcrumb.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_button-group.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_card.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_carousel.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_custom-forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_custom.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_grid.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_input-group.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_list-group.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_media.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_mixins.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_modal.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_nav.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_navbar.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_pagination.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_progress.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_utilities.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_avatar.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_everyday_giving.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_nav_step.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_slat.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_video_countdown.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/mixins/_breakpoints.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/mixins/_grid-framework.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/mixins/_grid.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/utilities/_display.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/utilities/_flex.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/plugins/_sticky_div.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_alert.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_button-group.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_buttons.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_card.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom-forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_dropdown.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_forms.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_nav.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_progress.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_reboot.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_tooltip.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_type.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_device_preview.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_illustration.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_mobile.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_nav_step.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_redactor.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_slat.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_social_share.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_ticket.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_tile.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datepicker.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datetimepicker.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_intercom.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_select2.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_sticky_div.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_turbolinks.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_twitter_typeahead.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/application.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_alignment.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/foundation_emails/_button.scss
@@ -465,91 +523,19 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_spacers.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_typography.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/email/settings/_settings.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/_variables.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/application.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/application.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_badge.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_buttons.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_custom-forms.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_custom.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_forms.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_functions.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_nav.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_navbar.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_reboot.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_type.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/_utilities.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/custom/_everyday_default.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/nfg_theme/custom/_nav_step.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/plugins/_datetimepicker.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/entity_branding/plugins/_select2.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/_variables.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/application.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_breadcrumb.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_button-group.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_card.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_carousel.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_custom-forms.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_custom.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_forms.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_grid.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_input-group.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_list-group.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_media.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_mixins.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_modal.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_nav.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_navbar.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_pagination.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_progress.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/_utilities.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/custom/_avatar.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/custom/_everyday_giving.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/custom/_nav_step.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/custom/_slat.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/mixins/_breakpoints.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/mixins/_grid-framework.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/mixins/_grid.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/utilities/_display.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/nfg_theme/utilities/_flex.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/legacy_browser_support/plugins/_sticky_div.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_alert.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_button-group.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_buttons.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_card.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_carousel.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_custom-forms.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_custom.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_dropdown.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_event.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_forms.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_list-group.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_nav.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_progress.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_reboot.scss
-- 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/_navbar.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/_donor_account.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event.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
 - 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
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_ticket.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_tile.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_user_navbar.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_datepicker.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_datetimepicker.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_intercom.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_select2.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_sticky_div.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_turbolinks.scss
-- app/assets/stylesheets/nfg_ui/network_for_good/public/plugins/_twitter_typeahead.scss
 - app/controllers/nfg_ui/application_controller.rb
 - app/helpers/nfg_ui/application_helper.rb
 - app/helpers/nfg_ui/components/browser_helper.rb
@@ -731,7 +717,6 @@ files:
 - lib/nfg_ui/components/patterns/slat.rb
 - lib/nfg_ui/components/patterns/slat_actions.rb
 - lib/nfg_ui/components/patterns/slat_header.rb
-- lib/nfg_ui/components/patterns/slat_list.rb
 - lib/nfg_ui/components/patterns/slats.rb
 - lib/nfg_ui/components/patterns/steps.rb
 - lib/nfg_ui/components/patterns/tab_content.rb
@@ -765,6 +750,7 @@ files:
 - lib/nfg_ui/components/traits/responsive.rb
 - lib/nfg_ui/components/traits/size.rb
 - lib/nfg_ui/components/traits/slat_item.rb
+- lib/nfg_ui/components/traits/slats.rb
 - lib/nfg_ui/components/traits/step.rb
 - lib/nfg_ui/components/traits/table.rb
 - lib/nfg_ui/components/traits/theme.rb
@@ -798,7 +784,7 @@ homepage: https://github.com/network-for-good/nfg_ui
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -814,7 +800,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.0.8
-signing_key: 
+signing_key:
 specification_version: 4
 summary: NFG UI front-end design system code for rapid product building
 test_files: []