nfg_ui 0.10.13 → 0.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6e58889fb77e8519d6ee203354e6ca65656f0463c28c423cbc115e6c32b1980
-  data.tar.gz: 702cc3f3d1678def2241bcc9c687e31dafa2b30a28fee6f89e5d7503b04478b7
+  metadata.gz: f0724b78919c0829c296004c09b2bae90a2b0492bc4d637c28a2a4dc5c5c4d7f
+  data.tar.gz: 9e8841a495673888802bb12df9bb9d3b92b32ad7042c6a2ee458f980c189c71b
 SHA512:
-  metadata.gz: cb043579fa346c3cd229844a0ed8b95c83eea5786f4e7fa79ee0e6c98da1b7a69e2524d502065824a7388a7e617f019163c3cfc6ac0f67b89c247423889ca503
-  data.tar.gz: 58fb08cb3b0f259621a3a96ae816482447b66332a30811be034c4e442f841ace1b777db2eec913eaa838323ed9fc125a1a8c34e90f1b0a6abc42c16cd23e61fb
+  metadata.gz: 40b97acfd1869140887b904f0c6a275f96290f67b6dd9f0b1ddba242fc9947f429e3efdc3b5c70805e93fc5aef55d139e99cb53fc52a1981adca6f18719e5e8d
+  data.tar.gz: d4dafdd6a2f3a401266526259ddb12a773b927557f4d12c06547a034516c3cffa669b5545421227fe3dd2a6c23bd89a1579dfe657c4afd0793d2626bb329b557

data/README.md

@@ -88,6 +88,46 @@ Examples:
   = ui.nfg :icon, 'trash', class: 'mr-1', text: 'Delete Row'
 ```
 
+## Asset publishing
+
+### Depedency Installation
+
+NFG UI assets are published for cross-site usage to a publicly-accessible AWS S3 bucket (`s3://nfg-ui/v#.##.#/`) using the AWS command-line interface:
+
+1. [Install the AWS command-line interface](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-mac.html#cliv2-mac-install-gui)
+2. Install AWS credentials provided by anyone on the team who has permissions to mint IAM users (such as Mike or Timothy). The credentials are sensitive and should be stored at `~/.aws/credentials`. See example below.
+3. (Optional but recommended) Install `~/.aws/config` per below to set a default region for S3 operations.
+
+```
+# Example ~/.aws/credentials file
+
+[default]
+aws_access_key_id = ####################
+aws_secret_access_key = ########################################
+
+# Example ~/.aws/config
+[default]
+region = us-east-1
+```
+
+4. Use the following command to confirm successful installation:
+
+```
+aws s3 ls --recursive s3://nfg-ui/
+```
+
+### Workflow
+
+After `rake release` successfully completes, the `rake publish` task will run. This command wraps a separate `rake publish` task contained within the `/publisher` subdirectory.
+`/publisher` contains a skeleton Rails app. The `rake publish` task contained within `/publisher` precompiles the assets that are part of the new `nfg_ui` release and uploads them to S3. 
+
+If necessary, `rake publish` can be invoked from within the `nfg_ui` parent directory, separately:
+
+```
+rake publish           # upload assets to S3; fails if files are already exist for the release
+rake publish[override] # uploads assets to S3 without checking for existing files
+```
+
 #### Trait details
 Traits are designed to allow you to speedily build components, or pre-design complex components using meaningful symbols.
 
@@ -190,7 +230,6 @@ Groupings of elements to create rich interfaces. For example, an `:activity_feed
 * `:media`
 * `:modal`
 * `:navbar`
-* `:slat_list`
 * `:task_list`
 * *Tiles*
   * `:tile`
@@ -425,7 +464,6 @@ FOUNDATION_COMPONENT_NAMES = %i[color
                                   navbar
                                   navbar_nav
                                   page_header
-                                  slat_list [tooltip]
                                   tab_content
                                   task_list
                                   tile [icon, tooltip]

data/Rakefile

@@ -15,9 +15,35 @@ RDoc::Task.new(:rdoc) do |rdoc|
 end
 
 APP_RAKEFILE = File.expand_path("spec/test_app/Rakefile", __dir__)
-load 'rails/tasks/engine.rake'
-
 
+load 'rails/tasks/engine.rake'
 load 'rails/tasks/statistics.rake'
 
 require 'bundler/gem_tasks'
+
+desc <<~DESC
+  Publish precompiled assets to s3://nfg-ui.  This task is automatically invoked after successful "rake release" and normally it should not be called directly.
+  Requires installation of AWS CLI: https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html
+  Please see additional instructions in README.md.
+DESC
+task :publish, %i[override_flag] do |_, override_flag: nil|
+  require 'fileutils'
+
+  version = Bundler.load_gemspec("#{__dir__}/nfg_ui.gemspec").version
+  puts "Compiling and publishing NFG UI v#{version} assets"
+
+  subtask_args = version.to_s
+  subtask_args << ",#{override_flag}" if override_flag
+
+  Dir.chdir("#{__dir__}/publisher") do
+    Bundler.with_clean_env do
+      sh "RAILS_ENV=production bundle exec rake publish[#{subtask_args}]" do |ok, _|
+        puts 'unable to publish assets' unless ok
+      end
+    end
+  end
+end
+
+Rake::Task['release'].enhance do
+  Rake::Task['publish'].invoke # runs :publish task after successful release
+end

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

@@ -1,30 +1,16 @@
 //** Admin 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 'nfg_ui/network_for_good/public/plugins/datepicker';
-@import 'nfg_ui/network_for_good/public/plugins/datetimepicker';
-@import 'nfg_ui/network_for_good/public/plugins/intercom'; // only in admin layouts
-@import 'nfg_ui/network_for_good/public/plugins/select2';
-@import 'nfg_ui/network_for_good/public/plugins/sticky_div';
-@import 'nfg_ui/network_for_good/public/plugins/turbolinks';
-@import 'nfg_ui/network_for_good/public/plugins/twitter_typeahead';
-
-// Legacy browser support
-@import 'nfg_ui/network_for_good/public/legacy_browser_support/application';
+@import 'nfg_ui/network_for_good/core/plugins/intercom';
+@import 'nfg_ui/network_for_good/core/plugins/turbolinks';
+@import 'nfg_ui/network_for_good/core/plugins/twitter_typeahead';
 
-// Color variations
-@import 'nfg_theme/color_variations/*';
+// Color Variations - has to be inside admin directory for variables to work properly
+@import 'color_variations/nfg_theme/*';
+@import 'color_variations/plugins/*';

data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_nav.scss

@@ -0,0 +1,18 @@
+@each $color, $value in $colors {
+  .#{$color} {
+    .nav-tabs {
+      .nav-link {
+        &:hover, &.active { border-color: $value; }
+      }
+    }
+  }
+
+  // Color variations for border in main nav in DM
+  .site-nav {
+    .nav-item.#{$color} {
+      .nav-link {
+        &:hover, &.active, &[aria-expanded="true"] { border-color: $value; }
+      }
+    }
+  }
+}

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

@@ -1,25 +1,17 @@
 // Our custom styles
-@import 'custom/avatar';
 @import 'custom/builder_layout';
 @import 'custom/campaign_card';
 @import 'custom/campaign_preview';
 @import 'custom/content_section_buttons';
 @import 'custom/custom_questions_questionnaire';
 @import 'custom/custom_receipt_language';
-@import 'custom/device_preview';
 @import 'custom/email_preview';
 @import 'custom/free_trial';
 @import 'custom/icomoon';
-@import 'custom/illustration';
 @import 'custom/interaction';
-@import 'custom/mobile';
-@import 'custom/nav_step';
 @import 'custom/overlay_blocker';
 @import 'custom/page_header';
-@import 'custom/redactor';
 @import 'custom/share_dropdown';
-@import 'custom/social_share';
-@import 'custom/slat';
 @import 'custom/status_indicator';
-@import 'custom/ticket';
 @import 'custom/tile';
+@import 'custom/video_countdown';

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

@@ -1,30 +1,3 @@
-//
-// Tabs
-//
-.nav-tabs {
-  border-width: $border-width;
-
-  .nav-item {
-    margin-bottom: -$border-width;
-    font-weight: $font-weight-bold;
-    font-size: $font-size-base;
-  }
-
-  .nav-link {
-    color: $text-muted !important;
-    border: none;
-    border-bottom: $nav-tabs-border-width solid transparent;
-    @include hover-focus {
-      color: $nav-tabs-link-active-color !important;
-      border-color: $nav-tabs-link-hover-border-color;
-    }
-  }
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $nav-tabs-link-active-color !important;
-  }
-}
-
 // Top navigation bar in DMS
 .site-nav {
   position: fixed;
@@ -95,14 +68,3 @@
     }
   }
 }
-
-// Color variations for border
-@each $color in $colors {
-  .site-nav {
-    .nav-item.#{nth($color, 1)} {
-      .nav-link {
-        &:hover, &.active, &[aria-expanded="true"] { border-color: nth($color, 2); }
-      }
-    }
-  }
-}

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

@@ -3,69 +3,10 @@
 //
 
 .tile {
-  display: block;
-  margin-right: auto;
-  margin-left: auto;
-  word-wrap: break-word;
-  background-color: $white;
-  border-top: $border-width solid $border-color;
-  border-bottom: $border-width solid $border-color;
   @include media-breakpoint-down(sm) {
     margin-right: -($grid-gutter-width / 2);
     margin-left: -($grid-gutter-width / 2);
+    border-right: none;
+    border-left: none;
   }
-  @include media-breakpoint-up(sm) {
-    border-right: $border-width solid $border-color;
-    border-left: $border-width solid $border-color;
-  }
-  + .tile { margin-top: $spacer; }
-}
-
-.tile-body {
-  padding: $grid-gutter-width;
-  @include media-breakpoint-up(sm) { padding: ($grid-gutter-width * 1.5); }
-}
-
-// Sections within a tile used to separate groups of content
-.tile-section {
-  display: block;
-  margin-right: auto;
-  margin-left: auto;
-  @include media-breakpoint-down(sm) { padding-bottom: $grid-gutter-width; }
-  @include media-breakpoint-up(sm) { padding-bottom: ($grid-gutter-width * 1.5); }
-  &:last-child { padding-bottom: 0; }
-  + .tile-section {
-    border-top: $border-width solid $border-color;
-    @include media-breakpoint-down(sm) { padding-top: $grid-gutter-width; }
-    @include media-breakpoint-up(sm) { padding-top: ($grid-gutter-width * 1.5); }
-  }
-}
-
-//
-// Optional textual caps
-//
-
-.tile-header, .tile-footer {
-  padding: ($grid-gutter-width / 2) $grid-gutter-width;
-  background-color: $white;
-  @include media-breakpoint-up(sm) { padding: $grid-gutter-width; }
-}
-.tile-header {
-  + .collapse,
-  + .collapsing,
-  + .tile-body,
-  + .tile-footer { border-top: $border-width solid $border-color; }
 }
-.tile-body + .tile-footer { border-top: $border-width solid $border-color; }
-
-//
-// Header navs
-//
-
-.tile-header-tabs {
-  margin-right: -$grid-gutter-width;
-  margin-bottom: -($grid-gutter-width / 2);
-  margin-left: -$grid-gutter-width;
-  border-bottom: 0;
-  @include media-breakpoint-up(sm) { margin-bottom: -$grid-gutter-width; }
-}

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

@@ -0,0 +1,47 @@
+.video-container {
+  video { z-index: 10; }
+}
+
+// Animation timing
+$anim: 6s;
+@keyframes time {
+  0%, 10%, 100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+  5% {
+    opacity: 0.8;
+    transform: scale(1.2);
+  }
+}
+
+.countdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  visibility: hidden;
+  text-align: center;
+  z-index: 20;
+  span {
+    position: absolute;
+    font-size: ($spacer * 5);
+    font-weight: bold;
+    color: $white;
+    opacity: 0;
+  }
+  &.play {
+    visibility: visible;
+    @for $i from 0 through 3 {
+      .num#{$i} {
+        animation: time $anim;
+        animation-delay: (3-$i)+s;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/_variables.scss

@@ -66,7 +66,7 @@ $teal:    #60c6cf; // legacy color -- not used in our theme
 //   $colors
 // );
 
-$primary:       $blue !default;
+$primary:       $blue !default; // need !default for $primary to work properly (override) in entity_branding
 // $secondary:     $gray-600 !default;
 $success:       $green;
 $info:          $blue;
@@ -75,7 +75,6 @@ $danger:        $red;
 // $light:         $gray-100 !default;
 // $dark:          $gray-800 !default;
 
-
 // $theme-colors: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 // $theme-colors: map-merge(
@@ -233,9 +232,9 @@ $line-height-sm:              1;
 $border-width:                1px;
 $border-color:                $gray-300;
 
-$border-radius:               .6rem;
-$border-radius-lg:            .6rem;
-$border-radius-sm:            .6rem;
+$border-radius:               .3rem;
+$border-radius-lg:            .3rem;
+$border-radius-sm:            .3rem;
 
 // $rounded-pill:                50rem !default;
 
@@ -254,17 +253,19 @@ $component-active-bg:         $primary;
 // $transition-fade:             opacity .15s linear !default;
 // $transition-collapse:         height .35s ease !default;
 
-// $embed-responsive-aspect-ratios: () !default;
+$embed-responsive-aspect-ratios: ();
 // stylelint-disable-next-line scss/dollar-variable-default
-// $embed-responsive-aspect-ratios: join(
-//   (
-//     (21 9),
-//     (16 9),
-//     (3 4),
-//     (1 1),
-//   ),
-//   $embed-responsive-aspect-ratios
-// );
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (9 16),
+    (4 3),
+    (3 4),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
 
 // Fonts
 //
@@ -310,7 +311,7 @@ $display4-size:               ($font-size-base * .875);
 // $display1-weight:             300 !default;
 // $display2-weight:             300 !default;
 // $display3-weight:             300 !default;
-$display4-weight:             $font-weight-normal;
+$display4-weight:             $font-weight-bold;
 // $display-line-height:         $headings-line-height !default;
 
 $lead-font-size:              ($font-size-base * 1.5);
@@ -396,7 +397,7 @@ $input-btn-padding-x-sm:      ($spacer * .25);
 // $input-btn-font-size-sm:      $font-size-sm !default;
 // $input-btn-line-height-sm:    $line-height-sm !default;
 
-$input-btn-padding-y-lg:      1.1rem;
+$input-btn-padding-y-lg:      .5rem;
 $input-btn-padding-x-lg:      ($spacer * .75);
 // $input-btn-font-size-lg:      $font-size-lg !default;
 // $input-btn-line-height-lg:    $line-height-lg !default;
@@ -655,7 +656,7 @@ $form-feedback-icon-valid:          none;
 // $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        none;
 
-$form-validation-states: () !default;
+$form-validation-states: ();
 // stylelint-disable-next-line scss/dollar-variable-default
 $form-validation-states: map-merge(
   (
@@ -692,16 +693,16 @@ $nav-link-padding-x:                $spacer;
 $nav-link-disabled-color:           $text-muted;
 
 $nav-tabs-border-color:             $border-color;
-$nav-tabs-border-width:             $border-width;
+$nav-tabs-border-width:             3px;
 $nav-tabs-border-radius:            0;
 $nav-tabs-link-hover-border-color:  $primary;
 $nav-tabs-link-active-color:        $body-color;
 $nav-tabs-link-active-bg:           transparent;
 $nav-tabs-link-active-border-color: $primary;
 
-// $nav-pills-border-radius:           $border-radius !default;
-// $nav-pills-link-active-color:       $component-active-color !default;
-// $nav-pills-link-active-bg:          $component-active-bg !default;
+$nav-pills-border-radius:           0;
+$nav-pills-link-active-color:       $white;
+$nav-pills-link-active-bg:          darken(#006D9D, 10%);
 
 $nav-divider-color:                 $border-color;
 $nav-divider-margin-y:              0;
@@ -709,8 +710,8 @@ $nav-divider-margin-y:              0;
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer * .5);
-// $navbar-padding-x:                  $spacer !default;
+$navbar-padding-y:                  0;
+$navbar-padding-x:                  0;
 
 $navbar-nav-link-padding-x:         ($spacer * .5);
 
@@ -725,9 +726,9 @@ $navbar-toggler-padding-x:          ($spacer * .5);
 // $navbar-toggler-font-size:          $font-size-lg !default;
 // $navbar-toggler-border-radius:      $btn-border-radius !default;
 
-// $navbar-dark-color:                 rgba($white, .5) !default;
-// $navbar-dark-hover-color:           rgba($white, .75) !default;
-// $navbar-dark-active-color:          $white !default;
+$navbar-dark-color:                 #9a9a9a; // LEGACY
+$navbar-dark-hover-color:           #b9b9b9; // LEGACY
+$navbar-dark-active-color:          #cccccc; // LEGACY
 // $navbar-dark-disabled-color:        rgba($white, .25) !default;
 // $navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
 // $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
@@ -820,11 +821,11 @@ $jumbotron-bg:                      $body-bg;
 
 $card-spacer-y:                     $spacer;
 $card-spacer-x:                     $spacer;
-$card-border-width:                 0;
+$card-border-width:                 $border-width;
 // $card-border-radius:                $border-radius !default;
-$card-border-color:                 transparent;
+$card-border-color:                 $border-color;
 $card-inner-border-radius:          $border-radius;
-$card-cap-bg:                       theme-color("light");
+$card-cap-bg:                       $white;
 // $card-cap-color:                    null !default;
 // $card-color:                        null !default;
 // $card-bg:                           $white !default;
@@ -954,8 +955,8 @@ $modal-header-padding-x:            $spacer;
 // $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
 // $modal-xl:                          1140px !default;
-$modal-lg:                          900px !default;
-$modal-md:                          600px !default;
+$modal-lg:                          900px;
+$modal-md:                          600px;
 // $modal-sm:                          300px !default;
 
 // $modal-fade-transform:              translate(0, -50px) !default;
@@ -1018,7 +1019,7 @@ $list-group-action-color:           $body-color;
 // $list-group-action-active-bg:       $gray-200 !default;
 
 
-// Image thumbnails -- NOT CURRENTLY USED IN PUBLIC
+// Image thumbnails
 
 // $thumbnail-padding:                 .25rem !default;
 // $thumbnail-bg:                      $body-bg !default;
@@ -1034,7 +1035,7 @@ $list-group-action-color:           $body-color;
 $figure-caption-color:              $text-muted;
 
 
-// Breadcrumbs -- NOT CURRENTLY USED IN PUBLIC
+// Breadcrumbs
 
 // $breadcrumb-padding-y:              .75rem !default;
 // $breadcrumb-padding-x:              1rem !default;