nfg_ui 0.9.8.15

data/lib/nfg_ui/bootstrap/utilities/progressable.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Shared methods between Progress & ProgressBar.
+      module Progressable
+        def animated
+          options.fetch(:animated, false)
+        end
+
+        def label
+          # options.fetch(:label, nil)
+          options[:label] == true ? "#{progress}%" : options[:label] || body
+        end
+
+        def progress
+          options[:progress] || 0
+        end
+
+        def striped
+          options.fetch(:striped, false)
+        end
+
+        def theme
+          options.fetch(:theme, nil)
+        end
+
+        private
+
+        def non_html_attribute_options
+          super.push(:animated,
+                     :height,
+                     :label,
+                     :progress,
+                     :striped,
+                     :theme)
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/bootstrap/utilities/remotable.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Turns remote: true functionality on for components that need it.
+      module Remotable
+        def data
+          remote ? super.merge!(remote: remote.to_s) : super
+        end
+
+        def remote
+          options.fetch(:remote, nil)
+        end
+
+        private
+
+        def non_html_attribute_options
+          super.push(:remote)
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/bootstrap/utilities/sizable.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Applies ability to modify the component's size
+      # Pass in :lg or :sm
+      module Sizable
+        def size
+          options.fetch(:size, nil)
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            (size_css_class if resized?)
+          ].join(' ').squish
+        end
+
+        def non_html_attribute_options
+          super.push(:size)
+        end
+
+        def resized?
+          size == :sm || size == :lg
+        end
+
+        def size_css_class
+          "#{size_css_class_prefix}-#{size}"
+        end
+
+        def size_css_class_prefix
+          @size_css_class_prefix ||= component_css_class
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/bootstrap/utilities/themeable.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Allows component to utilize the bootstrap4 theme color palette
+      module Themeable
+        def outlined
+          options.fetch(:outlined, false)
+        end
+
+        # To disable theme on a case by case basis, pass in { theme: nil } to options.
+        # or
+        # To disable a default theme for a component set default_theme to nil
+        def theme
+          options.fetch(:theme, default_theme)
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            ("#{theme_css_class_prefix}#{outlined_css_class_prefix if outlined && outlineable?}#{theme}" if theme)
+          ].join(' ').squish
+        end
+
+        def default_theme
+          @default_theme ||= NfgUi::DEFAULT_BOOTSTRAP_THEME
+        end
+
+        def non_html_attribute_options
+          super.push(:theme, :outlined)
+        end
+
+        def outlined_css_class_prefix
+          @outlined_css_class_prefix ||= 'outline-'
+        end
+
+        def theme_css_class_prefix
+          @theme_css_class_prefix ||= "#{component_css_class}-"
+        end
+
+        # Explicitly turn off outlineable on components that should not allow outline
+        def outlineable?
+          true
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/bootstrap/utilities/tooltipable.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Tooltip doc coming soon
+      #
+      # Bootstrap documentation
+      # https://getbootstrap.com/docs/4.1/components/tooltips/
+      #
+      # Allows tooltips to be placed on any component's main wrapping element
+      #
+      # When tooltip is applied to a disabled component (via the tooltip argument)
+      # the component will return the necessary information to build a wrapper div
+      # due to the non-interactable nature of the disabled elements.
+      #
+      # Example implementation of a button in HAML:
+      #
+      # - if button.disabled_tooltipable?
+      #   %span{ button.disabled_component_tooltip_wrapper_html_options }
+      #     = content_tag button.html_wrapper_element, button.html_options do
+      #       = button.body
+
+      # - else
+      #   = content_tag button.html_wrapper_element, button.html_options do
+      #     = button.body
+      #
+      # Tooltip placement:
+      # You can override the placement if needed by setting the tooltip_placement method
+      # in your target class -- :top, :bottom, :left, :right
+      #
+      # Example:
+      #
+      # def tooltip_placement
+      #   :right
+      # end
+      module Tooltipable
+        # TODO: This include should be removed and then anything with Tooltipable
+        # needs to be evaluated that this doesn't break it.
+        # It is undesirable that every Tooltipable component also received
+        # the disableable functionality as well.
+        include Bootstrap::Utilities::Disableable
+        
+        def tooltip
+          options.fetch(:tooltip, nil)
+        end
+
+        # There are a number of complex changes that need to be made to the html
+        # for disabled tooltipped buttons
+        # Read more:
+        #
+        # https://getbootstrap.com/docs/4.1/components/tooltips/#disabled-elements
+        def html_options
+          return super if options[:tooltip].nil?
+
+          component_title = disabled ? options.fetch(:title, nil) : tooltip
+          component_styles = (options[:style] || '') + (disabled ? ' pointer-events: none;' : '') if disabled
+          super.merge!(title: component_title,
+                       style: component_styles.try(:squish))
+        end
+
+        def data
+          if tooltip
+            disabled ? super : super.merge!(tooltip_data_attributes)
+          else
+            super
+          end
+        end
+
+        def disabled_component_tooltip_wrapper_html_options
+          { data: tooltip_data_attributes,
+            title: tooltip,
+            class: 'd-inline-block',
+            tabindex: '0' }
+        end
+
+        private
+
+        def tooltip_data_attributes
+          { toggle: 'tooltip',
+            placement: tooltip_placement,
+            html: 'true' }
+        end
+
+        def non_html_attribute_options
+          super.push(:tooltip)
+        end
+
+        def tooltip_placement
+          @tooltip_placement ||= :top
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/bootstrap/utilities/wrappable.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Allows component to swap out the main component wrapping element (ex. :div vs. :span)
+      # Pass in :as -- only unique logic at the moment
+      # is converting :link to :a for tag generation
+      module Wrappable
+        attr_accessor :as
+
+        def utility_initialize
+          self.as = options.fetch(:as, automatic_as)
+          super
+        end
+
+        private
+
+        def assistive_html_attributes
+          if as == :button
+            super.merge(type: options.fetch(:type, 'button')) # prefer type submit
+          else
+            super
+          end
+        end
+
+        def automatic_as
+          if href
+            :a
+          elsif options[:type] == 'submit'
+            :button
+          else
+            default_html_wrapper_element
+          end
+        end
+
+        # Set default_html_wrapper_element on individual components as needed
+        def default_html_wrapper_element
+          @default_html_wrapper_element ||= :span
+        end
+
+        def non_html_attribute_options
+          super.push(:as)
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/base.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    # Base NFG UI component for components that are not directly
+    # inherited from Bootstrap base components (e.g.: buttons inhert their
+    # Bootstrap counterpart, tiles don't).
+    class Base < NfgUi::Bootstrap::Components::Base
+      include NfgUi::Components::Utilities::Describable
+      include NfgUi::Components::Utilities::Renderable
+      include NfgUi::Components::Utilities::Traitable
+    end
+  end
+end

data/lib/nfg_ui/components/elements/activity.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+module NfgUi
+  module Components
+    module Elements
+      # Activity doc coming soon
+      class Activity < NfgUi::Components::Base
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/alert.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # Alert doesn't have any customizations unique to the design system yet
+      # As such, the NFG UI alert is simply a bootstrap alert behind the scenes.
+      # Traits will eventually be connected here.
+      class Alert < NfgUi::Bootstrap::Components::Alert
+        include NfgUi::Components::Utilities::Iconable
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+
+        include NfgUi::Components::Traits::Alert
+        include NfgUi::Components::Traits::Dismiss
+        include NfgUi::Components::Traits::Theme
+
+        def render
+          # NOTE: concat statement must be surrounded by capture blocks.
+          # If you see duplication of content, it is likely because that
+          # a concat has been called outside of a capture block.
+          # This is specifically true when some of those concats are nested
+          # or are within a block defined within the capture block
+          content_tag(:div, html_options) do
+            capture do
+              if dismissible
+                concat(NfgUi::Components::Elements::Button.new({ traits: [:close], dismiss: :alert }, view_context).render)
+              end
+
+              if icon
+                concat(NfgUi::Components::Patterns::Media.new({}, view_context).render {
+                  capture do
+
+                    concat(NfgUi::Components::Elements::MediaObject.new({}, view_context).render {
+                      content_tag(:div, class: 'mr-2') do
+                        NfgUi::Components::Foundations::Icon.new({ traits: [icon] }, view_context).render
+                      end
+                    })
+                    concat(NfgUi::Components::Elements::MediaBody.new({}, view_context).render {
+                      capture do
+                        if heading
+                          concat(NfgUi::Components::Foundations::Typeface.new({ heading: heading, class: 'alert-heading' }, view_context).render)
+                        end
+                        concat(block_given? ? yield : body)
+                      end
+                    })
+                  end
+                })
+              else
+                if heading
+                  concat(NfgUi::Components::Foundations::Typeface.new({ heading: heading, class: 'alert-heading' }, view_context).render)
+                end
+
+                concat(block_given? ? yield : body)
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/badge.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # Badge doesn't have any customizations unique to the design system yet
+      # As such, the NFG UI badge is simply a bootstrap badge behind the scenes.
+      # Traits will eventually be connected here.
+      class Badge < NfgUi::Bootstrap::Components::Badge
+        include Bootstrap::Utilities::Tooltipable
+
+        include NfgUi::Components::Utilities::Iconable
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+
+        include NfgUi::Components::Traits::Theme
+        include NfgUi::Components::Traits::Pill
+
+        def render
+          super do
+            if icon
+              NfgUi::Components::Foundations::Icon.new({ traits: [icon], text: body }, view_context).render
+            else
+              (block_given? ? yield : body)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/breadcrumb.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # Breadcrumb doesn't have any customizations unique to the design system yet
+      # As such, the NFG UI Breadcrumb is simply a bootstrap Breadcrumb behind the scenes.
+      # Traits will eventually be connected here.
+      class Breadcrumb < NfgUi::Bootstrap::Components::Breadcrumb
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/breadcrumb_item.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # Breadcrumb doesn't have any customizations unique to the design system yet
+      # As such, the NFG UI Breadcrumb is simply a bootstrap Breadcrumb behind the scenes.
+      # Traits will eventually be connected here.
+      class BreadcrumbItem < NfgUi::Bootstrap::Components::BreadcrumbItem
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/button.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # Button doesn't have any customizations unique to the design system yet
+      # As such, the NFG UI Button is simply a bootstrap Button behind the scenes.
+      # Traits will eventually be connected here.
+      class Button < NfgUi::Bootstrap::Components::Button
+        include NfgUi::Components::Utilities::Confirmable
+        include NfgUi::Components::Utilities::DisableWithable
+        include NfgUi::Components::Utilities::Iconable
+        include NfgUi::Components::Utilities::LeftIconable
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Methodable
+        include NfgUi::Components::Utilities::Renderable
+
+        include NfgUi::Components::Traits::Active
+        include NfgUi::Components::Traits::Button
+        include NfgUi::Components::Traits::DisableWith
+        include NfgUi::Components::Traits::Size
+        include NfgUi::Components::Traits::Theme
+        include NfgUi::Components::Traits::Disable
+        include NfgUi::Components::Traits::Remote
+
+        def data
+          dismiss ? super.merge!(dismiss: dismiss) : super
+        end
+
+        # TODO
+        def close
+          # convert :close trait to
+          # close: :alert
+        end
+
+        def method
+          options.fetch(:method, nil)
+        end
+
+        def dismiss
+          options.fetch(:dismiss, nil)
+        end
+
+        def render
+          if tooltip && disabled
+            content_tag(:span, disabled_component_tooltip_wrapper_html_options) do
+              content_tag(as, html_options) do
+                capture do
+                  concat(left_icon_component) if left_icon
+                  concat(block_given? ? yield : body)
+                  concat(right_icon_component) if icon
+                end
+              end
+            end
+
+          else
+            content_tag(as, html_options) do
+              capture do
+                concat(left_icon_component) if left_icon
+                concat(block_given? ? yield : body)
+                concat(right_icon_component) if icon
+              end
+            end
+          end
+        end
+
+        private
+
+        def left_icon_component
+          NfgUi::Components::Foundations::Icon.new({ traits: [left_icon],
+                                                     class: NfgUi::Components::Foundations::Icon::LEFT_ICON_SPACER_CSS_CLASS },
+                                                   view_context).render
+
+        end
+
+        def right_icon_component
+          NfgUi::Components::Foundations::Icon.new({ traits: [icon, :right],
+                                                     class: NfgUi::Components::Foundations::Icon::RIGHT_ICON_SPACER_CSS_CLASS },
+                                                   view_context).render
+        end
+
+        def base_element
+          as
+        end
+
+        def dismiss_component?
+          dismiss == :alert || dismiss == :modal
+        end
+
+        def non_html_attribute_options
+          super.push(:dismiss)
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/card_body.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # Bootstrap Card Body
+      # https://getbootstrap.com/docs/4.1/components/card/#header-and-footer
+      class CardBody < NfgUi::Bootstrap::Components::CardBody
+        def component_family
+          :card
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/card_footer.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # doc coming soon
+      class CardFooter < NfgUi::Bootstrap::Components::CardFooter
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/card_header.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # doc coming soon
+      class CardHeader < NfgUi::Bootstrap::Components::CardHeader
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/card_image.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # doc coming soon
+      class CardImage < NfgUi::Bootstrap::Components::CardImage
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/card_image_overlay.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # doc coming soon
+      class CardImageOverlay < NfgUi::Bootstrap::Components::CardImageOverlay
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/carousel_caption.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # Docs coming soon
+      class CarouselCaption < NfgUi::Bootstrap::Components::CarouselCaption
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+      end
+    end
+  end
+end

data/lib/nfg_ui/components/elements/carousel_control.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Components
+    module Elements
+      # Docs coming soon
+      class CarouselControl < NfgUi::Bootstrap::Components::CarouselControl
+        include NfgUi::Components::Utilities::Traitable
+        include NfgUi::Components::Utilities::Describable
+        include NfgUi::Components::Utilities::Renderable
+      end
+    end
+  end
+end