nfg_ui 0.11.3 → 0.11.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 332c555dc58cfd23c4c1620eb247a089e617bce9c4d9425eb134c8294d60b781
-  data.tar.gz: 11f734c4d7f450be761e0566b66dd7a5921eaffe64c095f75fc28d00ddd85ea5
+  metadata.gz: c56c2858567b7c68a6b4eb28d7c37e91e0e266733bbdc04c56244894b4f7386f
+  data.tar.gz: 3969770fbb29fba8da5a50325f7ee5c563a3e659e427c9c96785f08b732c986e
 SHA512:
-  metadata.gz: 5e211f554ab72b7147ccf0185b945fe347d955ede629a1599b225434d5d31a9c969db0844a43afa230705937ae9c2280f47f5780d2251dee7e57fce57c8b4de8
-  data.tar.gz: 22c1f6878558390dcccd8f9ed61f4125141ebf27a3ffe79747895821a705af1b3f008682b2a4726567a2f29b1c76a2003017049474640800ea9d6a1956affb2e
+  metadata.gz: 05e1339fde85266bec3c65e0b008abce02553f895cfcda836c25d8eb2e1b1ae725d3c01b833302da7d929d1e4852e1a738754919f76570dcf4fd3ca0f376f764
+  data.tar.gz: c8e586bd2b28d7ea9dfa24a5a036c76afa465cd6bad269962b9c6c4b74ce5998479e053d68edb165e1c67386f97dc9fb4c98003e5dbdfb22b469a809083def0c

data/Rakefile

@@ -36,7 +36,7 @@ task :publish, %i[override_flag] do |_, override_flag: nil|
   subtask_args << ",#{override_flag}" if override_flag
 
   Dir.chdir("#{__dir__}/publisher") do
-    Bundler.with_clean_env do
+    Bundler.with_unbundled_env do
       sh "RAILS_ENV=production bundle exec rake publish[#{subtask_args}]" do |ok, _|
         puts 'unable to publish assets' unless ok
       end

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

@@ -1,5 +1,8 @@
 @each $color, $value in $colors {
   .#{$color} {
-    .badge-primary { @include badge-variant($value); }
+    .badge-primary {
+      @include badge-variant($value);
+      color: $white !important;
+    }
   }
 }

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

@@ -1,6 +1,9 @@
 @each $color, $value in $colors {
   .#{$color} {
-    .btn-primary { @include button-variant($value, $value); }
+    .btn-primary {
+      @include button-variant($value, $value);
+      color: $white !important;
+    }
     .show > .btn-primary.dropdown-toggle {
       background-color: darken($value, 10%);
       border-color: darken($value, 10%);

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

@@ -20,6 +20,9 @@
         }
       }
     }
-    .custom-select { color: $value; }
+    .custom-select {
+      color: $value;
+      &:focus { border-color: $value; }
+    }
   }
 }

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

@@ -1,3 +1,4 @@
 // Our custom styles
+@import 'custom/activity_feed';
 @import 'custom/icons';
 @import 'custom/nav_step';

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

@@ -0,0 +1,7 @@
+@each $color, $value in $colors {
+  .activity-feed-item {
+    &.#{nth($color, 1)} {
+      .activity-icon { background-color: $value; }
+    }
+  }
+}

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

@@ -1,4 +1,6 @@
 // Our custom styles
+@import 'custom/activity_feed';
+@import 'custom/bee';
 @import 'custom/builder_layout';
 @import 'custom/campaign_card';
 @import 'custom/campaign_preview';
@@ -7,11 +9,14 @@
 @import 'custom/custom_receipt_language';
 @import 'custom/email_preview';
 @import 'custom/free_trial';
+@import 'custom/gallery';
 @import 'custom/icomoon';
 @import 'custom/interaction';
 @import 'custom/overlay_blocker';
 @import 'custom/page_header';
+@import 'custom/readmore';
 @import 'custom/share_dropdown';
+@import 'custom/sortable';
 @import 'custom/status_indicator';
 @import 'custom/tile';
 @import 'custom/video_countdown';

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

@@ -4,3 +4,19 @@
   + #quick-add-modal { display: none !important; }
   ~ .modal-backdrop.show ~ .modal-backdrop.show { display: none !important; }
 }
+
+
+// Full page cover modal option
+.modal-cover {
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  transform: none !important; // removes default 50px transform that occurs on modal showing (.fade and .show)
+  .modal-content {
+    display: block;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+}

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

@@ -0,0 +1,34 @@
+// Activity feed list items
+.activity-feed-item {
+  position: relative;
+  padding: 0 0 $spacer ($spacer * 1.5);
+  border: none;
+  z-index: 0;
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 12px;
+    bottom: 0;
+    z-index: 0;
+    border-left: $border-width solid $border-color;
+    content: "";
+  }
+  &:last-child {
+    padding-bottom: 0;
+    &::after { display: none; }
+  }
+  .activity-icon {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    display: block;
+    width: $spacer;
+    height: $spacer;
+    font-size: $font-size-sm;
+    line-height: $spacer;
+    z-index: 1;
+    text-align: center;
+    @include border-radius(50%);
+    box-shadow: 0 0 0 2px rgba(255,255,255,1);
+  }
+}

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

@@ -0,0 +1,15 @@
+#bee_plugin_container {
+  height: 600px; // fallback value if calc() isn't supported
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
+}
+
+// Height if just the builder-header is present
+.builder-header + .builder-container {
+  #bee_plugin_container { height: calc(100vh - 72px); }
+}
+
+// Height if both builder-header and builder-nav are present (typical in onboarder)
+.builder-header + .builder-nav + .builder-container {
+  #bee_plugin_container { height: calc(100vh - 180px); }
+}

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

@@ -80,10 +80,11 @@ $builder-preview-padding: ($spacer * 2);
   }
 }
 .builder-preview {
+  background-color: $body-bg;
   padding: $builder-preview-padding ($builder-preview-padding / 2);
   @include media-breakpoint-up(lg) {
     float: left;
-    width: 67vw;
+    width: 67%;
     height: 100%;
     overflow-y: auto;
     > :last-child { margin-bottom: $builder-preview-padding; }
@@ -95,7 +96,7 @@ $builder-preview-padding: ($spacer * 2);
   @include media-breakpoint-down(md) { border-bottom: $border-width solid $border-color; }
   @include media-breakpoint-up(lg) {
     float: right;
-    width: 33vw;
+    width: 33%;
     height: 100%;
     border-left: $border-width solid $border-color;
     overflow-y: auto;

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

@@ -3,4 +3,4 @@
   height: ($spacer * 8);
   overflow: hidden;
   .card-img { min-height: 100%; }
-}
+}

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

@@ -0,0 +1,46 @@
+// Gallery styles
+.card-gallery {
+
+  // Gallery image styles
+  .card-gallery-img {
+    height: ($spacer * 14); // sets height of gallery image preview
+    overflow: hidden;
+    z-index: 0;
+    .card-img {
+      min-height: 100%;
+      z-index: 0;
+    }
+    .card-img-overlay { z-index: 1; }
+    .card-gallery-img-overlay {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      text-align: center;
+      background-color: $modal-backdrop-bg;
+      transition: $transition-fade;
+      opacity: 0;
+      z-index: 10;
+      @include hover { opacity: 1; }
+      > .card-gallery-img-overlay-text {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
+  // Gallery card body styles
+  .card-body { z-index: 10; }
+  .badge-highlight {
+    position: absolute;
+    top: -($card-spacer-y * .5);
+    left: $card-spacer-y;
+  }
+}
+
+

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

@@ -1,2 +1,2 @@
 // Sort
-[class*='sort']:not(.sort_link) { cursor: move; }
+.ui-sortable-handle, [data-sortable="handle"] { cursor: move; }

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

@@ -40,7 +40,7 @@ $redacted-font-family: "BLOKK";
   font-family: $font-family-base;
   letter-spacing: 0;
   word-spacing: 0;
-  background-color: rgba(255,255,255,0.9);
+  background-color: transparentize($white, 0.2);
 }
 .overlay-blur {
   transition: $transition-base;

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

@@ -0,0 +1,24 @@
+// Powers the readmore.js plugin
+.expandable,
+.readmore-js-section {
+  position: relative;
+  z-index: 10;
+  transition: $transition-collapse;
+  &.readmore-js-collapsed { overflow: hidden; }
+  &.readmore-js-expanded { overflow: visible; }
+}
+.readmore-js-collapsed:after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: ($spacer * 1.5);
+  @include gradient-y(transparentize($white, 1), transparentize($white, 0));
+  content: '';
+  z-index: 20;
+}
+.readmore-js-toggle {
+  padding-top: ($spacer * .5);
+  padding-bottom: ($spacer * .5);
+  z-index: 30;
+}

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

@@ -0,0 +1,29 @@
+// Shared sorting styles
+.slat, .option {
+  &.ui-sortable-placeholder {
+    visibility: visible !important;
+    background: theme-color("light");
+    border: $border-width dashed $border-color;
+  }
+  &.ui-sortable-helper { opacity: .5; }
+}
+// Slat
+.slat {
+  &.ui-sortable-placeholder {
+    + .slat { border-top: none; }
+    + &.ui-sortable-helper {
+      border-top-style: dashed;
+      + &.slat { border-top: none; }
+    }
+  }
+  &.ui-sortable-helper {
+    border-top: none;
+    border-top: none;
+    + &.ui-sortable-placeholder { border-top: $border-width dashed $border-color; }
+  }
+}
+
+// Sortable options (used on form fields for checkboxes/radios/select options)
+.option {
+  &.ui-sortable-placeholder { margin-bottom: ($spacer * .25); }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_custom.scss

@@ -1,6 +1,7 @@
 // Our custom styles
 @import 'custom/avatar';
 @import 'custom/everyday_giving';
+@import 'custom/icon';
 @import 'custom/nav_step';
 @import 'custom/slat';
 @import 'custom/video_countdown';

data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_icon.scss

@@ -0,0 +1,5 @@
+.icon-circle {
+  display: -ms-inline-flexbox;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_alert.scss

@@ -6,11 +6,11 @@
     &:hover, &:active { text-decoration: none; }
   }
 }
-.alert-success a:not(.btn) { color: $success; }
-.alert-info a:not(.btn) { color: $info; }
-.alert-warning a:not(.btn) { color: $warning; }
+.alert-success a:not(.btn) { color: $success !important; }
+.alert-info a:not(.btn) { color: $info !important; }
+.alert-warning a:not(.btn) { color: $warning !important; }
 .alert-danger, .alert-error {
-  a:not(.btn) { color: $danger; }
+  a:not(.btn) { color: $danger !important; }
 }
 .alert-gray, .alert-notice,
 .alert-light, .alert-dark {

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_badge.scss

@@ -0,0 +1,3 @@
+// overrides color contrast settings
+.badge-secondary { color: $white !important; }
+.badge-warning { color: $white !important; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_buttons.scss

@@ -15,3 +15,6 @@
   }
 }
 .btn-link { font-weight: $btn-font-weight; }
+
+// overrides color contrast settings
+.btn-warning { color: $white !important; }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_card.scss

@@ -13,6 +13,10 @@
 .card-footer { border-top: none; }
 
 // Card image
-.card-img-overlay { @include gradient-y(transparentize($black, 1), transparentize($black, .5)); }
+.card-img-overlay {
+  top: auto; // makes the overlay gradient and container "stick" to bottom of parent container
+  min-height: ($spacer * 2);
+  @include gradient-y(transparentize($black, 1), transparentize($black, .5));
+}
 
 .card-img { @include border-radius(0); }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom-forms.scss

@@ -3,6 +3,7 @@
 // Base class takes care of all the key behavioral aspects.
 
 .custom-control {
+  padding-left: 0;
   .custom-control-input {
     &:checked {
       ~ .custom-control-label,
@@ -10,18 +11,26 @@
     }
     &:focus:not(:checked) ~ .custom-control-label::before { border-color: $input-border-color; }
   }
+  + .custom-control:not(.custom-control-inline) { margin-top: ($spacer * .25); }
 }
+.custom-checkbox, .custom-radio { min-width: $custom-control-gutter + $custom-control-indicator-size; } // sets minimum width to have space even if custom-control-label isn't there
 
 // Custom control indicators
 //
 // Build the custom controls out of pseudo-elements.
 
 .custom-control-label {
+  padding-left: $custom-control-gutter + $custom-control-indicator-size;
+  min-width: $custom-control-gutter + $custom-control-indicator-size;
+  min-height: $custom-control-indicator-size;
   font-weight: $font-weight-normal;
   cursor: pointer;
 
   // Background-color and icon
-  &::before, &::after { top: .3rem; }
+  &::before, &::after {
+    top: .3rem;
+    left: 0;
+  }
   &::before { border: $border-width solid $border-color; }
   &::after { cursor: pointer; }
 }
@@ -41,6 +50,9 @@
 //
 
 .custom-select {
+  display: block;
+  width: auto;
+  max-width: 100%;
   font-weight: $btn-font-weight;
   cursor: pointer;
   box-shadow: none;
@@ -97,7 +109,10 @@
 // Tweak a few things for switches
 
 .custom-switch {
+  padding-left: 0;
   .custom-control-label {
+    padding-left: $custom-switch-width + $custom-control-gutter;
+    &::before, &::after { left: 0; }
     &::before {
       padding-left: 28px;
       font-size: 12px;
@@ -109,7 +124,6 @@
     }
     &::after {
       top: 0;
-      left: -($custom-switch-width + $custom-control-gutter);
       background-color: $white;
       border: $border-width solid $border-color;
       border-radius: 50%;

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

@@ -1,11 +1,13 @@
 // Our custom styles
 @import 'custom/avatar';
 @import 'custom/device_preview';
+@import 'custom/icon';
 @import 'custom/illustration';
 @import 'custom/mobile';
 @import 'custom/nav_step';
 @import 'custom/redactor';
 @import 'custom/social_share';
+@import 'custom/skeleton';
 @import 'custom/slat';
 @import 'custom/ticket';
 @import 'custom/tile';

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_dropdown.scss

@@ -9,6 +9,7 @@
     cursor: default;
     pointer-events: none;
   }
+  &:not(.text-danger) { color: inherit !important; }
 }
 
 
@@ -21,7 +22,14 @@
 
 
 // Sizing
-.dropdown-menu-md { min-width: ($spacer * 12); }
+.dropdown-menu-md, .dropdown-menu-lg { min-width: ($spacer * 10); }
+.dropdown-menu-md {
+  @include media-breakpoint-up(sm) { min-width: ($spacer * 12); }
+}
+.dropdown-menu-lg {
+  @include media-breakpoint-up(sm) { min-width: ($spacer * 24); }
+}
+
 
 
 // Styles for wider "My Tools" dropdown in top nav

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_reboot.scss

@@ -18,6 +18,10 @@ body {
 
 div { position: relative; } // setting this as a base to avoid improper absolute positioning elements
 
+p {
+  &.disabled { opacity: .4; } // used on filter bars on list pages for bulk actions
+}
+
 ol,
 ul,
 dl {

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

@@ -21,7 +21,7 @@
   .avatar-text {
     font-weight: $font-weight-bold;
     font-size: $font-size-base;
-    line-height: 1;
+    line-height: 1.2;
     color: $body-color;
     text-align: center;
     white-space: nowrap;

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_icon.scss

@@ -0,0 +1,34 @@
+// Custom icon styles
+// icons shouldn't be larger than the h1 font-size. use illustrations for larger visuals.
+// don't use icon circles for icons smaller than icon-circle-sm size. use just an icon.
+.icon-circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  width: ($spacer * 1.5);
+  height: ($spacer * 1.5);
+  font-size: $font-size-base;
+  background-color: $border-color;
+  border-radius: 50%;
+  &.icon-circle-outline {
+    background-color: $white;
+    border: $border-width solid $border-color;
+  }
+  &.icon-circle-sm {
+    width: $spacer;
+    height: $spacer;
+    font-size: $font-size-sm;
+  }
+  &.icon-circle-lg {
+    width: ($spacer * 2);
+    height: ($spacer * 2);
+    font-size: $font-size-lg;
+  }
+  &.icon-circle-xl {
+    width: ($spacer * 3);
+    height: ($spacer * 3);
+    font-size: $h1-font-size;
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_skeleton.scss

@@ -0,0 +1,50 @@
+// Skeleton styles for placheholder content
+.skeleton-avatar, .skeleton-heading, .skeleton-paragraph {
+  display: inline-block;
+  margin-bottom: ($spacer * .5);
+  background-color: $border-color;
+  overflow: hidden;
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $body-bg;
+    animation: skeleton-sheen 1s linear infinite alternate;
+    content: '';
+
+    // any skeleton element inside a container with the the .loaded class removes the sheen animation.
+    .loaded & {
+      background-color: transparent;
+      animation: none;
+    }
+  }
+}
+.skeleton-avatar {
+  width: ($spacer * 1.5);
+  height: ($spacer * 1.5);
+  border-radius: 50%;
+}
+.skeleton-heading {
+  width: 70%;
+  height: $spacer;
+  border-radius: ($spacer * .5);
+  &:nth-child(even) { width: 45%; }
+}
+.skeleton-paragraph {
+  width: 100%;
+  height: ($spacer * .5);
+  border-radius: ($spacer * .25);
+  &:nth-child(2n+1) { width: 90%; }
+  &:nth-child(3n+1) { width: 75%; }
+  &:nth-child(4n+1) { width: 80%; }
+}
+
+// Sheen animation used on skeleton elements
+@keyframes skeleton-sheen {
+  0% { opacity: .45; }
+  to { opacity: .9; }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_slat.scss

@@ -8,7 +8,7 @@ $slat-actions-lg-width: 108px;
   flex-flow: column nowrap;
 
   // Nowrap version -- used when the goal is to have all slat-item columns on the same line in smaller screens
-  :not(.slats-nowrap) { // noting the :not() psuedo-class meaning all slats that don't have this class get these styles
+  &:not(.slats-nowrap) { // noting the :not() psuedo-class meaning all slats that don't have this class get these styles
     .slat-body {
       @include media-breakpoint-down(sm) { flex-direction: column; }
     }
@@ -37,23 +37,8 @@ $slat-actions-lg-width: 108px;
     padding-bottom: ($spacer * 1.5);
   }
 
-  // Various states
-  &.ui-sortable-placeholder {
-    visibility: visible !important;
-    background: theme-color("light");
-    border: $border-width dashed $border-color;
-    + .slat { border-top: none; }
-    + &.ui-sortable-helper {
-      border-top-style: dashed;
-      + &.slat { border-top: none; }
-    }
-  }
-  &.ui-sortable-helper {
-    border-top: none;
-    opacity: .5;
-    border-top: none;
-    + &.ui-sortable-placeholder { border-top: $border-width dashed $border-color; }
-  }
+  // Status
+  &.pending { background-color: #fff5e0; }
 }
 
 

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

@@ -22,13 +22,13 @@
   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); }
+  @include media-breakpoint-down(sm) { padding-bottom: ($grid-gutter-width * 1.5); }
+  @include media-breakpoint-up(sm) { padding-bottom: ($grid-gutter-width * 2); }
   &: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); }
+    @include media-breakpoint-down(sm) { padding-top: ($grid-gutter-width * 1.5); }
+    @include media-breakpoint-up(sm) { padding-top: ($grid-gutter-width * 2); }
   }
 }
 

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

@@ -28,7 +28,11 @@ module NfgUi
             content_tag(:div, class: modal_dialog_css_classes, role: 'document') do
               content_tag(:div, class: 'modal-content') do
                 capture do
-                  concat(NfgUi::Bootstrap::Components::ModalHeader.new({ title: title }, view_context).render)
+                  # Optionally, leave title nil
+                  # and the title / dismiss functionality is left out.
+                  if title.present?
+                    concat(NfgUi::Bootstrap::Components::ModalHeader.new({ title: title }, view_context).render)
+                  end
                   if render_in_body
                     concat(NfgUi::Bootstrap::Components::ModalBody.new({ body: (block_given? ? yield : body) }, view_context).render)
                   else

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

@@ -10,7 +10,14 @@ module NfgUi
         include NfgUi::Components::Utilities::Renderable
         include NfgUi::Components::Utilities::Titleable
 
+        include NfgUi::Components::Traits::Modal
         include NfgUi::Components::Traits::Size
+
+        private
+
+        def resized?
+          [:sm, :lg, :xl, :cover].include?(size)
+        end
       end
     end
   end

data/lib/nfg_ui/components/traits.rb

@@ -18,6 +18,7 @@ module NfgUi
                          DropdownToggle
                          Icon
                          ListGroup
+                         Modal
                          Muted
                          Nav
                          Navbar

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Traits
+      module Modal
+        TRAITS = %i[cover].freeze
+
+        def cover_trait
+          options[:size] = :cover
+        end
+      end
+    end
+  end
+end

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

@@ -10,7 +10,6 @@ module NfgUi
                     heading
                     subheading
                     title
-                    muted
                     truncate].freeze
 
         def body_trait

data/lib/nfg_ui/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.11.3
+  version: 0.11.8
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-10-15 00:00:00.000000000 Z
+date: 2020-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -407,6 +407,7 @@ files:
 - 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/_activity_feed.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
@@ -419,6 +420,8 @@ files:
 - 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/_tables.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_activity_feed.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_bee.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
@@ -427,11 +430,14 @@ files:
 - 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/_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/_gallery.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/_interaction.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/_readmore.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/_sortable.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/_tile.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_video_countdown.scss
@@ -475,6 +481,7 @@ files:
 - 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/_icon.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
@@ -485,6 +492,7 @@ files:
 - 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/_badge.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
@@ -500,10 +508,12 @@ files:
 - 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/_icon.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/_skeleton.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
@@ -740,6 +750,7 @@ files:
 - lib/nfg_ui/components/traits/dropdown_toggle.rb
 - lib/nfg_ui/components/traits/icon.rb
 - lib/nfg_ui/components/traits/list_group.rb
+- lib/nfg_ui/components/traits/modal.rb
 - lib/nfg_ui/components/traits/muted.rb
 - lib/nfg_ui/components/traits/nav.rb
 - lib/nfg_ui/components/traits/nav_item.rb