nfg_ui 0.10.15.1 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 581c5af7a9dc0ceca8203d5218db98150a39c4dde8e853d93d995475b61de7f1
-  data.tar.gz: f2b1f8cf195dd7c415932045498d733fd942f48b0f3294fa0513399213a5bbfc
+  metadata.gz: f61158331b40d623b2841200a49849f0afc8ac396b4e14d0c422d565e428276b
+  data.tar.gz: 4e662c099cdcacb5aadbaa096fc8a31d0aab5c5a9b07283fd11dd87b3d56e652
 SHA512:
-  metadata.gz: 28395e9fe6f2b11fbd3c75a11587c26369c1e237749756183b64721c6f692192310c495b126581066fa43df2c8a749ef727833d6b1087f3a68648495b9ff81b2
-  data.tar.gz: 79540a95e3942655fae6d3c611c7bf0d1281fb0cb728d7b8a782254eaea19763ebb122b859bda203ea9e93bfef2920d4e9d36fe4000be8099e16d32a3f2391e6
+  metadata.gz: 610dc6560c3d1f3203efda9a84778921c89b75b1e4d4c347ef9057beca044f281fc6f23df9ec229988a26e3efdb2d679ef41c83c4e0a2cde18615e6cff00b3c6
+  data.tar.gz: ff44548766c96889fcf7f0a81c5bc65d52930a269f4971a686c5952e75e7d1bae70b0b1d59e5d06650654f3b7db953206754e5cd19fde0f9c5f22f0ce2c5e971

data/README.md

@@ -190,7 +190,6 @@ Groupings of elements to create rich interfaces. For example, an `:activity_feed
 * `:media`
 * `:modal`
 * `:navbar`
-* `:slat_list`
 * `:task_list`
 * *Tiles*
   * `:tile`
@@ -425,7 +424,6 @@ FOUNDATION_COMPONENT_NAMES = %i[color
                                   navbar
                                   navbar_nav
                                   page_header
-                                  slat_list [tooltip]
                                   tab_content
                                   task_list
                                   tile [icon, tooltip]

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

@@ -1,3 +1,18 @@
+// Slat and its child elements
+.slat {
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+  -ms-flex-wrap: 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
+    .slat-body {
+      @include media-breakpoint-down(sm) { -ms-flex-direction: column; }
+    }
+  }
+}
+
+
 // Slat and its child elements
 .slat {
   display: -ms-flexbox;
@@ -5,6 +20,8 @@
   -ms-flex-wrap: wrap;
 }
 
+
+// Body Column
 .slat-body {
   display: -ms-flexbox;
   -ms-flex-direction: row;
@@ -12,35 +29,32 @@
   -ms-flex-positive: 1;
   -ms-flex-negative: 0;
   -ms-flex-preferred-size: 0;
+}
 
-  .slat-item {
-    -ms-flex-positive: 1;
-    -ms-flex-negative: 0;
-    -ms-flex-preferred-size: 0;
-    &:first-child {
-      -ms-flex-positive: 2;
 
-      // Sizing options
-      &.slat-item-sm { -ms-flex-positive: 1; }
-      &.slat-item-lg { -ms-flex-positive: 6; }
-    }
-  }
+// Item Column
+.slat-item {
+  -ms-flex-positive: 1;
+  -ms-flex-negative: 0;
+  -ms-flex-preferred-size: 0;
+  &.slat-item-md { -ms-flex-positive: 2; }
+  &.slat-item-lg { -ms-flex-positive: 3; }
+  &.slat-item-xl { -ms-flex-positive: 4; }
 }
 
+
+// Action Column
 .slat-actions {
   -ms-flex-positive: 0;
   -ms-flex-negative: 0;
-  -ms-flex-preferred-size: ($spacer * 1.5);
-  min-width: ($spacer * 1.5);
-  @include media-breakpoint-up(sm) {
-    -ms-flex-preferred-size: ($spacer * 6);
-    min-width: ($spacer * 6);
+  -ms-flex-preferred-size: ($spacer * 2.5);
+  min-width: ($spacer * 2.5);
+  @include media-breakpoint-up(md) {
+    -ms-flex-preferred-size: ($spacer * 5.5);
+    min-width: ($spacer * 5.5);
   }
-
-
-  // Sizing options
-  &.slat-actions-sm { -ms-flex-preferred-size: ($spacer * 1.5); }
-  &.slat-actions-lg { -ms-flex-preferred-size: ($spacer * 12); }
+  .slat-actions-sm & { -ms-flex-preferred-size: ($spacer * 2.5); }
+  .slat-actions-lg & { -ms-flex-preferred-size: ($spacer * 5.5); }
 }
 
 
@@ -48,19 +62,3 @@
 .slat-header {
   .slat-body { -ms-flex-align: center; }
 }
-
-
-// Slat list layout
-.slat-list {
-
-  // Non-breaked version -- used when the goal is to have all slat-item columns on the same line in smaller screens
-  &:not(.slat-list-no-break) {
-    .slat-item {
-      &:first-child {
-        @include media-breakpoint-down(sm) {
-          -ms-flex-preferred-size: 100%;
-        }
-      }
-    }
-  }
-}

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

@@ -1,112 +1,142 @@
+$slat-actions-sm-width: 36px;
+$slat-actions-lg-width: 108px;
+
+
+// Slat list layout
+.slats {
+  display: flex;
+  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
+    .slat-body {
+      @include media-breakpoint-down(sm) { flex-direction: column; }
+    }
+    .slat-item + .slat-item {
+      @include media-breakpoint-down(sm) { margin-top: $spacer; }
+    }
+  }
+}
+
+
 // Slat and its child elements
 .slat {
   display: flex;
   flex-flow: row wrap;
+  padding-top: $spacer;
+  padding-bottom: $spacer;
+  + .slat { border-top: $border-width solid $border-color; }
+
+  // Sizing options
+  .slats-sm & {
+    padding-top: ($spacer * .5);
+    padding-bottom: ($spacer * .5);
+  }
+  .slats-lg & {
+    padding-top: ($spacer * 1.5);
+    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; }
+  }
 }
 
 
 // Body Column
 .slat-body {
   display: flex;
-  flex-flow: row wrap;
+  flex-direction: row;
+  flex-wrap: wrap;
   flex: 1 0 0;
   margin-right: -($grid-gutter-width * .5);
   margin-left: -($grid-gutter-width * .5);
   width: 100%;
-  .slat-item {
-    flex: 1 0 0;
-    padding-right: ($grid-gutter-width * .5);
-    padding-left: ($grid-gutter-width * .5);
-    width: 100%;
-    max-width: 100%;
-    min-height: 1px;
-    &:first-child {
-      flex-grow: 2;
-
-      // Sizing options
-      &.slat-item-sm { flex-grow: 1; }
-      &.slat-item-lg { flex-grow: 6; }
-    }
-  }
+
+  // max-width needed for when text-truncate is on an element inside
+  @include media-breakpoint-down(sm) { max-width: calc(100% - #{$slat-actions-sm-width}); }
+  @include media-breakpoint-up(md) { max-width: calc(100% - #{$slat-actions-lg-width}); }
+  .slat-actions-sm & { max-width: calc(100% - #{$slat-actions-sm-width}); }
+  .slat-actions-lg & { max-width: calc(100% - #{$slat-actions-lg-width}); }
+  .slat-actions-none & { max-width: calc(100% + 24px); }
+}
+
+
+// Shared action and item column
+.slat-item, .slat-actions {
+  padding-left: ($grid-gutter-width * .5);
+  min-width: 0px;
+  word-break: break-word;
+  white-space: normal;
+}
+
+
+// Item Column
+.slat-item {
+  flex: 1 0 0;
+  padding-right: ($grid-gutter-width * .5);
+  width: 100%;
+  max-width: 100%;
+  &.slat-item-md { flex-grow: 2; }
+  &.slat-item-lg { flex-grow: 3; }
+  &.slat-item-xl { flex-grow: 4; }
 }
 
 
 // Action Column
 .slat-actions {
-  padding-left: ($grid-gutter-width * .5);
-  flex: 0 0 ($spacer * 1.5);
-  width: auto;
-  max-width: none;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: ($spacer * 2.5);
   text-align: right;
-  @include media-breakpoint-up(sm) { flex-basis: ($spacer * 6); }
+  @include media-breakpoint-up(md) { flex-basis: ($spacer * 5.5); }
+  .slat-actions-sm & { flex-basis: ($spacer * 2.5); }
+  .slat-actions-lg & { flex-basis: ($spacer * 5.5); }
+}
 
 
-  // Sizing options
-  &.slat-actions-sm { flex-basis: ($spacer * 1.5); }
-  &.slat-actions-lg { flex-basis: ($spacer * 12); }
+// Action dropdown text (ex: "Actions") used for default action dropdown behavior
+.slat-actions-text {
+  @include media-breakpoint-down(sm) { display: none; }
+  @include media-breakpoint-up(md) {
+    display: inline-block;
+    margin-right: ($spacer * .25);
+  }
+  .slat-actions-lg & { // always show text on :lg slat-actions
+    display: inline-block;
+    margin-right: ($spacer * .25);
+  }
+  .slat-actions-sm & { display: none; } // always hide text on :sm slat-actions
+  + .fa.ml-1 { margin-left: 0 !important; } // hides default margin on icons in buttons on smaller device
 }
 
 
 // Slat header
 .slat-header {
   padding-bottom: ($spacer * .5);
+  border-bottom: $border-width solid $border-color;
+  .slat { padding: 0 !important; }
   .slat-body { align-items: center; }
-}
-
-
-// Slat list layout
-.slat-list {
-  border-top: $border-width solid $border-color;
-  .slat {
-    padding-top: $spacer;
-    padding-bottom: $spacer;
-    + .slat { border-top: $border-width solid $border-color; }
-
-
-    // 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; }
-    }
-  }
+  .slat-column-header { display: inline-block; }
 
-
-  // Sizing options
-  &.slat-list-sm {
-    .slat {
-      padding-top: ($spacer * .5);
-      padding-bottom: ($spacer * .5);
-    }
-  }
-  &.slat-list-lg {
-    .slat {
-      padding-top: ($spacer * 1.5);
-      padding-bottom: ($spacer * 1.5);
-    }
-  }
+}
 
 
-  // Non-breaked version -- used when the goal is to have all slat-item columns on the same line in smaller screens
-  &:not(.slat-list-no-break) {
-    .slat-item {
-      &:first-child {
-        @include media-breakpoint-down(sm) {
-          flex-basis: 100%;
-          margin-bottom: $spacer;
-        }
-      }
-    }
-  }
+// Slat column headers -- any .slat-column-header not in .slat-header displays none on larger devices
+.slat-column-header {
+  @include media-breakpoint-up(md) { display: none; }
 }

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/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.15.1'
+  VERSION = '0.11.0'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nfg_ui
 version: !ruby/object:Gem::Version
-  version: 0.10.15.1
+  version: 0.11.0
 platform: ruby
 authors:
 - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-08-13 00:00:00.000000000 Z
+date: 2020-08-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootstrap
@@ -717,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
@@ -751,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

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

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-module NfgUi
-  module Components
-    module Patterns
-      # SlatList doc coming soon
-      class SlatList < NfgUi::Components::Base
-        include Bootstrap::Utilities::Sizable
-
-        include NfgUi::Components::Traits::Size
-
-        def component_family
-          :slats
-        end
-      end
-    end
-  end
-end