RubyGems - nfg_ui - Versions diffs - 0.12.16.1 → 0.13.2 - Mend

nfg_ui 0.12.16.1 → 0.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35b6563cb909d89bca9f4d5d314ce9458ed516e31c56a1dad16cdea45d9d6ae3
-  data.tar.gz: e5c8efb6472107a9716ba2a5af663d3fda8ea5d8ff5e80286ccfb68433f6a8ee
+  metadata.gz: 52eb169f5803dc4a89489c7383a04d727873f4a0d3722a9d36f555493a66a87d
+  data.tar.gz: 167b00bd9265fb9f0e3b16bf3e36a44166e0fc5d64cf5c604580b4efa9083278
 SHA512:
-  metadata.gz: 2546a857c660872f8ebd9e1d9cacc3af7aed3f7d714501bc774b2823ec76fe107c24d6e54f266c888999a0445aeba6f9410676a0d9bf40849259b0062126783b
-  data.tar.gz: 64e3bcb4d8bfec41b74d99ac575940c75ce0cfc136759264ed3a753122891ac2c45fcda153fc6cc69262c0355892233d708a39beb6f8b556a68e2087b15b8cb7
+  metadata.gz: be1ab2d77aa8b9a1b1cf5be109425e553320a1a21d887847f35494bd1ebc17b32d809d97aac64edca2209d8617755e96bcc2f34899c043cbc6dfb63cc13227fc
+  data.tar.gz: 23efe9e2f2ef15fddc6ed928682d411bcdfe6e76ab94f9eac2545311f0ce5e782ea9af57ad730cb27e137e2c1c26c3fa4b50a19509bcc3ad12fd138ff9c2d309

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

@@ -9,8 +9,6 @@
 // Plugins
 @import 'nfg_ui/network_for_good/core/plugins/intercom';
 @import 'nfg_ui/network_for_good/core/plugins/multi';
-@import 'nfg_ui/network_for_good/core/plugins/turbolinks';
-@import 'nfg_ui/network_for_good/core/plugins/twitter_typeahead';
 // Color Variations - has to be inside admin directory for variables to work properly
 @import 'color_variations/nfg_theme/*';

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

@@ -3,7 +3,6 @@
 @import 'custom/bee';
 @import 'custom/builder_layout';
 @import 'custom/campaign_card';
-@import 'custom/campaign_preview';
 @import 'custom/content_section';
 @import 'custom/custom_questions_questionnaire';
 @import 'custom/custom_receipt_language';

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

@@ -1,106 +1,11 @@
-// Setting a common height for the builder header and nav
-$builder-header-height: ($spacer * 2.25);
-$builder-header-padding: ($spacer * .25) ($spacer * .5);
-$builder-nav-height: ($spacer * 3.25);
-$builder-nav-padding: ($spacer * .75) ($spacer * .5);
-$builder-options-padding: $spacer;
-$builder-preview-padding: ($spacer * 1.5);
-// Put on the <body> to help with correct scrolling within builder-wrap and builder-options
-.builder-layout {
-  background-color: $white;
-  @include media-breakpoint-up(lg) {
-    height: 100%;
-    > form { height: 100%; } // targets form directly inside <body> and needed for correct scrolling
-  }
-}
+// Specific styles needed for admin onboarding pages
 // Header and nav styles for builder layout
-.builder-header, .builder-header-fixed-bottom {
-  padding: $builder-header-padding;
-  width: 100%;
-  min-height: $builder-header-height;
-  background-color: $blue-700;
-  z-index: $zindex-fixed + 1;
-  @include media-breakpoint-up(lg) {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-  .text-muted { color: $blue-200 !important; }
-}
-.builder-header-fixed-bottom {
-  position: fixed;
-  @include media-breakpoint-down(md) { bottom: 0; }
-}
-.builder-nav, .builder-nav-sm {
-  width: 100%;
-  z-index: $zindex-fixed;
-}
-.builder-nav {
-  padding: $builder-nav-padding;
-  background-color: $white;
-  border-bottom: $border-width solid $border-color;
-  @include media-breakpoint-up(lg) {
-    position: fixed;
-    top: $builder-header-height;
-    left: 0;
-    right: 0;
-    min-height: $builder-nav-height;
-  }
-}
-.builder-nav-sm {
-  position: fixed;
-  bottom: 0;
-  padding: $builder-header-padding;
-  min-height: $builder-header-height;
-  background-color: $blue-700;
-  @include media-breakpoint-up(lg) { display: none; }
-}
-// Container that provides padding to the top of the page to move content below header and nav
-.builder-container {
-  @include media-breakpoint-down(md) { padding-bottom: $builder-header-height; }
-  @include media-breakpoint-up(lg) { height: 100%; }
-}
-// Adjusts padding on the top of builder-container depending on how many elements come before it
-.builder-header ~ .builder-container {
-  @include media-breakpoint-up(lg) { padding-top: $builder-header-height; }
-}
-.builder-header ~ .builder-nav ~ .builder-container {
-  @include media-breakpoint-up(lg) { padding-top: $builder-header-height + $builder-nav-height; }
-}
+.builder-nav { border-bottom: $border-width solid $border-color; }
+.builder-nav-sm { background-color: $blue-700; }
 // Block containers for side by side view
-.builder-body {
-  @include media-breakpoint-up(lg) {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-}
-.builder-preview {
-  padding: $builder-preview-padding ($builder-preview-padding / 2);
-  @include media-breakpoint-up(lg) {
-    float: left;
-    width: 67%;
-    height: 100%;
-    overflow-y: auto;
-    > :last-child { margin-bottom: $builder-preview-padding; }
-  }
-}
 .builder-options {
-  padding: $builder-options-padding;
-  background-color: $white;
   @include media-breakpoint-down(md) { border-bottom: $border-width solid $border-color; }
-  @include media-breakpoint-up(lg) {
-    float: right;
-    width: 33%;
-    height: 100%;
-    border-left: $border-width solid $border-color;
-    overflow-y: auto;
-    > :last-child { margin-bottom: $builder-options-padding; }
-  }
+  @include media-breakpoint-up(lg) { border-left: $border-width solid $border-color; }
 }

data/app/assets/stylesheets/nfg_ui/network_for_good/core/_variables.scss CHANGED Viewed

@@ -296,7 +296,7 @@ $font-family-sans-serif:      "Open Sans", "Helvetica Neue", Arial, sans-serif;
 // stylelint-enable value-keyword-case
 $font-size-base:              1.6rem; // Root font size is 62.5% to make calculations to REM 10 point based
-// $font-size-lg:                ($font-size-base * 1.25) !default;
+$font-size-lg:                ($font-size-base * 1.25);
 $font-size-sm:                ($font-size-base * .875);
 // $font-weight-lighter:         lighter !default;
@@ -1072,10 +1072,10 @@ $breadcrumb-active-color:           $text-muted;
 // Carousel
-// $carousel-control-color:             $white !default;
-// $carousel-control-width:             15% !default;
-$carousel-control-opacity:           .3;
-// $carousel-control-hover-opacity:     .9 !default;
+$carousel-control-color:             $white;
+$carousel-control-width:             ($spacer * 1.5);
+$carousel-control-opacity:           .5;
+$carousel-control-hover-opacity:     .9;
 // $carousel-control-transition:        opacity .15s ease !default;
 $carousel-indicator-width:           ($spacer * .5);
@@ -1088,10 +1088,12 @@ $carousel-indicator-transition:      $text-muted;
 // $carousel-caption-width:             70% !default;
 // $carousel-caption-color:             $white !default;
-// $carousel-control-icon-width:        20px !default;
+$carousel-control-icon-width:        $spacer;
-// $carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
-// $carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
+// $carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
+// $carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
+$carousel-control-prev-icon-bg:      '\f0d9';
+$carousel-control-next-icon-bg:      '\f0da';
 // $carousel-transition-duration:       .6s !default;
 // $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

data/app/assets/stylesheets/nfg_ui/network_for_good/core/application.scss CHANGED Viewed

@@ -19,6 +19,8 @@
 @import 'plugins/datetimepicker';
 @import 'plugins/select2';
 @import 'plugins/sticky_div';
+@import 'plugins/turbolinks';
+@import 'plugins/twitter_typeahead';
 // Legacy Browser Support
 @import 'legacy_browser_support/application';

data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_carousel.scss CHANGED Viewed

@@ -1,3 +1,5 @@
+$carousel-thumbnail-size: ($spacer * 2.5); // 80px
 .carousel-item { -ms-flex-align: center; }
 // Left/right controls for nav
@@ -15,4 +17,30 @@
   display: -ms-flexbox;
   -ms-flex-pack: center;
   li { -ms-flex: 0 1 auto; }
-}
+}
+// Carousels that have a fixed aspect ratio height
+.carousel-fixed-height {
+  .carousel-item {
+    display: -ms-flexbox;
+    -ms-flex-align: center;
+    -ms-flex-pack: center;
+  }
+}
+// Carousels that use image thumbnails for indicators
+.carousel-has-thumbnails {
+  .carousel-indicators {
+    @include media-breakpoint-down(lg) {
+      -ms-flex-pack: start;
+    }
+    li {
+      @include media-breakpoint-down(lg) {
+        -ms-flex-negative: 0;
+        -ms-flex-preferred-size: $carousel-thumbnail-size;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,7 @@
 // Our custom styles
 @import 'custom/avatar';
+@import 'custom/builder_layout';
+@import 'custom/iframe_preview';
 @import 'custom/chat';
 @import 'custom/device_preview';
 @import 'custom/drawer';

data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_builder_layout.scss ADDED Viewed

@@ -0,0 +1,102 @@
+// Setting a common height for the builder header and nav
+$builder-header-height: ($spacer * 2.25);
+$builder-header-padding: ($spacer * .25) ($spacer * .5);
+$builder-nav-height: ($spacer * 3.25);
+$builder-nav-padding: ($spacer * .75) ($spacer * .5);
+$builder-options-padding: $spacer;
+$builder-preview-padding: ($spacer * 1.5);
+// Put on the <body> to help with correct scrolling within builder-wrap and builder-options
+.builder-layout {
+  background-color: $white;
+  @include media-breakpoint-up(lg) {
+    height: 100%;
+    > form { height: 100%; } // targets form directly inside <body> and needed for correct scrolling
+  }
+}
+// Header and nav styles for builder layout
+.builder-header, .builder-header-fixed-bottom {
+  padding: $builder-header-padding;
+  width: 100%;
+  min-height: $builder-header-height;
+  background-color: $blue-700;
+  z-index: $zindex-fixed + 1;
+  @include media-breakpoint-up(lg) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  .text-muted { color: $blue-200 !important; }
+}
+.builder-header-fixed-bottom {
+  position: fixed;
+  @include media-breakpoint-down(md) { bottom: 0; }
+}
+.builder-nav, .builder-nav-sm {
+  width: 100%;
+  z-index: $zindex-fixed;
+}
+.builder-nav {
+  padding: $builder-nav-padding;
+  background-color: $white;
+  @include media-breakpoint-up(lg) {
+    position: fixed;
+    top: $builder-header-height;
+    left: 0;
+    right: 0;
+    min-height: $builder-nav-height;
+  }
+}
+.builder-nav-sm {
+  position: fixed;
+  bottom: 0;
+  padding: $builder-header-padding;
+  min-height: $builder-header-height;
+  @include media-breakpoint-up(lg) { display: none; }
+}
+// Container that provides padding to the top of the page to move content below header and nav
+.builder-container {
+  @include media-breakpoint-down(md) { padding-bottom: $builder-header-height; }
+  @include media-breakpoint-up(lg) { height: 100%; }
+}
+// Adjusts padding on the top of builder-container depending on how many elements come before it
+.builder-header ~ .builder-container {
+  @include media-breakpoint-up(lg) { padding-top: $builder-header-height; }
+}
+.builder-header ~ .builder-nav ~ .builder-container {
+  @include media-breakpoint-up(lg) { padding-top: $builder-header-height + $builder-nav-height; }
+}
+// Block containers for side by side view
+.builder-body {
+  @include media-breakpoint-up(lg) {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+}
+.builder-preview {
+  padding: $builder-preview-padding ($builder-preview-padding / 2);
+  @include media-breakpoint-up(lg) {
+    float: left;
+    width: 67%;
+    height: 100%;
+    overflow-y: auto;
+    > :last-child { margin-bottom: $builder-preview-padding; }
+  }
+}
+.builder-options {
+  padding: $builder-options-padding;
+  background-color: $white;
+  @include media-breakpoint-up(lg) {
+    float: right;
+    width: 33%;
+    height: 100%;
+    overflow-y: auto;
+    > :last-child { margin-bottom: $builder-options-padding; }
+  }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/{admin/nfg_theme/custom/_campaign_preview.scss → core/nfg_theme/custom/_iframe_preview.scss} RENAMED Viewed

File without changes

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_carousel.scss CHANGED Viewed

@@ -1,9 +1,185 @@
+$carousel-fixed-height: (3 / 4); // 4:3 aspect ratio
+$carousel-thumbnail-size: ($spacer * 2.5); // 80px
+//
+// Left/right controls for nav
+//
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  width: 100%;
+  background: none;
+  background-image: none;
+  &::before, &::after {
+    position: absolute;
+    top: -($carousel-control-icon-width * .5);
+    left: ($spacer * .25);
+    display: block;
+    margin: auto;
+    width: $carousel-control-icon-width;
+    height: $carousel-control-icon-width;
+    content: '';
+  }
+  &::before {
+    background-color: $white;
+    border-radius: 50%;
+    z-index: 1;
+    box-shadow: $box-shadow-sm;
+  }
+  &::after {
+    font-family: "FontAwesome";
+    font-size: $font-size-lg;
+    line-height: $carousel-control-icon-width;
+    color: $body-color;
+    text-align: center;
+    z-index: 10;
+  }
+}
+.carousel-control-prev-icon {
+  &:after {
+    padding-right: 2px;
+    content: $carousel-control-prev-icon-bg;
+  }
+}
+.carousel-control-next-icon {
+  &:after {
+    padding-left: 2px;
+    content: $carousel-control-next-icon-bg;
+  }
+}
 // Optional indicator pips
 //
-// Add an unordered list with the following class and add a list item for each
+// Add an ordered list with the following class and add a list item for each
 // slide your carousel holds.
 .carousel-indicators {
-  bottom: 0;
   li { border-radius: 50%; }
 }
+// Carousels that have a fixed aspect ratio height
+.carousel-fixed-height {
+  width: 100%;
+  .carousel-inner {
+    &::before {
+      display: block;
+      content: "";
+      width: 100%;
+      padding-top: $carousel-fixed-height * 100%;
+    }
+  }
+  .carousel-item {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: none; // overrides BS carousel defaults
+    margin-right: 0; // overrides BS carousel defaults
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    overflow: hidden;
+    @include transition($transition-fade);
+    &.active.carousel-item-left,
+    &.active.carousel-item-right {
+      @include transition($transition-fade); // overrides BS carousel defaults
+    }
+    img { // keeps image scaled proportionally
+      width: auto !important;
+      min-width: 0px !important;
+      max-width: 100%;
+      height: 100% !important;
+      max-height: 100%;
+      margin: auto;
+    }
+  }
+}
+// Carousels that use image thumbnails for indicators
+.carousel-has-thumbnails {
+  @include media-breakpoint-up(lg) { padding-left: ($spacer * 3.5); }
+  .carousel-inner {
+    border: $border-width solid $border-color;
+    border-radius: $border-radius;
+  }
+  .carousel-indicators {
+    margin: 0;
+    @include media-breakpoint-down(lg) {
+      justify-content: flex-start;
+      position: relative;
+      right: auto;
+      bottom: auto;
+      left: auto;
+      margin-top: ($spacer * .5);
+      width: 100%;
+      height: $carousel-thumbnail-size;
+      overflow-x: auto;
+      overflow-y: hidden;
+      @include clearfix();
+    }
+    @include media-breakpoint-up(lg) {
+      display: block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: auto;
+      left: 0;
+      width: auto;
+      height: 100%;
+      margin-top: 0;
+      overflow-y: auto;
+    }
+    li {
+      position: relative;
+      width: $carousel-thumbnail-size;
+      height: $carousel-thumbnail-size;
+      text-indent: 0;
+      text-align: center;
+      background-color: transparent;
+      border-top: none;
+      border-bottom: none;
+      box-sizing: border-box;
+      border-radius: $border-radius;
+      overflow: hidden;
+      opacity: .4;
+      @include media-breakpoint-down(lg) {
+        flex-shrink: 0;
+        flex-basis: $carousel-thumbnail-size;
+        margin: 0 ($spacer * .25) 0 0;
+      }
+      @include media-breakpoint-up(lg) { margin: 0 0 ($spacer * .25); }
+      &::before {
+        display: block;
+        content: "";
+        width: 100%;
+        padding-top: $carousel-fixed-height * 100%;
+      }
+      &.active {
+        border: $border-width solid $border-color;
+        opacity: 1;
+      }
+      img { // keeps image scaled proportionally
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: auto !important;
+        min-width: 0px !important;
+        max-width: 100%;
+        height: 100% !important;
+        max-height: 100%;
+        margin: auto;
+      }
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
 // Our custom styles
 @import 'custom/background_variations';
+@import 'custom/builder_layout';
 @import 'custom/donor_account';
 @import 'custom/donor_scroll';
 @import 'custom/event';

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_builder_layout.scss ADDED Viewed

@@ -0,0 +1,12 @@
+// Specific styles needed for public onboarding pages
+// Header and nav styles for builder layout
+.builder-nav {
+  @include media-breakpoint-up(lg) { top: 113px; }
+  .btn { border-radius: 50px; }
+}
+.builder-nav-sm {
+  background-color: $white;
+  border-top: $border-width solid $border-color;
+  .btn { border-radius: 50px; }
+}

data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_page_header.scss CHANGED Viewed

@@ -1,5 +1,6 @@
 $page-header-height: ($spacer * 3.5); // 11.2rem
 $page-header-height-admin: ($spacer * 5); // 16rem
+$page-header-height-public: (($spacer * 6.75) + 1); // 21.7rem (adds 1px for width of bottom border)
 // Page header specific styles
 .page-header {
@@ -14,17 +15,22 @@ $page-header-height-admin: ($spacer * 5); // 16rem
     right: 0;
     min-height: $page-header-height;
   }
-  body.admin & { // this renders as body.admin .page-header specifying when the view is in admin status
+  // this renders as body.admin .page-header specifying when the view there is an admin logged in (includes top admin black bar)
+  body.admin & {
     @include media-breakpoint-up(lg) { min-height: $page-header-height-admin; }
   }
 }
 // Moving .page-content container down with padding when page-header exists but ONLY on larger screens
 .page-header {
-  + .page-content {
-    @include media-breakpoint-up(lg) { padding-top: $page-header-height; }
-  }
-  body.admin & + .page-content { // this renders as body.admin .page-header + .page-content specifying when the view is in admin status
-    @include media-breakpoint-up(lg) { padding-top: $page-header-height-admin; }
+  @include media-breakpoint-up(lg) {
+    + .page-content { padding-top: $page-header-height; }
+    // this renders as body.admin .page-header + .page-content specifying when the view there is an admin logged in (includes top admin black bar)
+    body.admin & + .page-content { padding-top: $page-header-height-admin; }
+    // this renders as body.nfg_ui_onboarder .page-header + .page-content specifying when the view is in a public onboarding status i.e. fundraiser onboarder in Fundraising Pages
+    body.nfg_ui_onboarder & + .page-content { padding-top: $page-header-height-public; }
   }
 }

data/lib/nfg_ui/bootstrap/components/carousel.rb CHANGED Viewed

@@ -6,6 +6,11 @@ module NfgUi
       # Bootstrap Carousel Component
       # https://getbootstrap.com/docs/4.1/components/carousel/
       class Carousel < NfgUi::Bootstrap::Components::Base
+        # Turn on or off auto scrolling carousel
+        def auto
+          options.fetch(:auto, true)
+        end
         def component_family
           :carousel
         end
@@ -15,7 +20,10 @@ module NfgUi
         end
         def data
-          super.merge!(ride: 'carousel')
+          # false on auto means that the carousel should not automatically rotate.
+          data_val = auto == false ? { interval: 'false' } : { ride: 'carousel' }
+          super.merge!(**data_val)
         end
         def indicators

data/lib/nfg_ui/bootstrap/components/carousel_item.rb CHANGED Viewed

@@ -16,10 +16,23 @@ module NfgUi
           :carousel
         end
+        def data
+          return super unless interval
+          super.merge!(interval: interval)
+        end
         def image
           options.fetch(:image, nil)
         end
+        # manually pass in an interval numerical value
+        # which translates to miliseconds between carousel item
+        # slide transitions.
+        # ex: interval: 5000
+        def interval
+          options[:interval] || nil
+        end
         def label
           options.fetch(:label, nil)
         end
@@ -41,7 +54,8 @@ module NfgUi
         def non_html_attribute_options
           super.push(:image,
                      :caption,
-                     :label)
+                     :label,
+                     :interval)
         end
       end
     end

data/lib/nfg_ui/components/patterns/carousel.rb CHANGED Viewed

@@ -13,26 +13,23 @@ module NfgUi
         def render
           content_tag(:div, html_options) do
-            content_tag(:div, class: carousel_inner_css_classes) do
-              concat((block_given? ? yield : body))
-              if controls
-                concat(NfgUi::Components::Elements::CarouselControl.new({ control: :next, carousel: "##{id}" }, view_context).render)
-                concat(NfgUi::Components::Elements::CarouselControl.new({ control: :prev, carousel: "##{id}" }, view_context).render)
-              end
-              if indicators > 0
-                concat(NfgUi::Components::Elements::CarouselIndicators.new({ count: indicators, carousel: "##{id}" }, view_context).render)
+            concat(
+              content_tag(:div, class: 'carousel-inner') do
+                concat((block_given? ? yield : body))
               end
+            )
+            if controls
+              concat(NfgUi::Components::Elements::CarouselControl.new({ control: :next, carousel: "##{id}" }, view_context).render)
+              concat(NfgUi::Components::Elements::CarouselControl.new({ control: :prev, carousel: "##{id}" }, view_context).render)
+            end
+            if indicators > 0
+              concat(NfgUi::Components::Elements::CarouselIndicators.new({ count: indicators, carousel: "##{id}" }, view_context).render)
             end
           end
         end
-        private
-        def carousel_inner_css_classes
-          [
-            'carousel-inner',
-            ('pb-3' if indicators > 0)
-          ].join(' ').squish
+        def non_html_attribute_options
+          super.push(:auto)
         end
       end
     end

data/lib/nfg_ui/version.rb CHANGED Viewed

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

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.12.16.1
+  version: 0.13.2
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-12 00:00:00.000000000 Z
+date: 2022-03-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -433,7 +433,6 @@ files:
 - 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
 - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_content_section.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
@@ -524,10 +523,12 @@ files:
 - 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/_builder_layout.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_chat.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/_drawer.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/_iframe_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
@@ -568,6 +569,7 @@ files:
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_navbar.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/custom/_background_variations.scss
+- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_builder_layout.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/_donor_scroll.scss
 - app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_event.scss