nfg_ui 0.12.16.1 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35b6563cb909d89bca9f4d5d314ce9458ed516e31c56a1dad16cdea45d9d6ae3
-  data.tar.gz: e5c8efb6472107a9716ba2a5af663d3fda8ea5d8ff5e80286ccfb68433f6a8ee
+  metadata.gz: 8235aa4af7843ba006e8caae070d20f87561c6d39db6dda7acc0f86c5bb2a54f
+  data.tar.gz: b2cda42305a691eba3bfc4351851b1dd21d753b8b6e162f1bb7229036d5c1eb7
 SHA512:
-  metadata.gz: 2546a857c660872f8ebd9e1d9cacc3af7aed3f7d714501bc774b2823ec76fe107c24d6e54f266c888999a0445aeba6f9410676a0d9bf40849259b0062126783b
-  data.tar.gz: 64e3bcb4d8bfec41b74d99ac575940c75ce0cfc136759264ed3a753122891ac2c45fcda153fc6cc69262c0355892233d708a39beb6f8b556a68e2087b15b8cb7
+  metadata.gz: 0e9a5cc6430ecdef3e4090ff685d8455fd5ac6d6291052bca66e8715d7817484db14a014a635ff6b52f0350cb1a1cfdfb42b5a725d4e7cc8c030ea878fc0d81f
+  data.tar.gz: b94dd4c453cec22475b90ca00faf7cb6d19646c8e3e2386b037f38925fe78073eb73a73ce8e3642620feb69d3992690b554b6564d1ee5c2a2f0bab01872d1d8d

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

@@ -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/legacy_browser_support/nfg_theme/_carousel.scss

@@ -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/public/nfg_theme/_carousel.scss

@@ -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/lib/nfg_ui/bootstrap/components/carousel.rb

@@ -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

@@ -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

@@ -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

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.12.16.1
+  version: 0.13.0
 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: 2021-10-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap