nfg_ui 0.9.8.15

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

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Pagination - Page Item Component
+      # https://getbootstrap.com/docs/4.1/components/pagination/
+      class PageItem < NfgUi::Bootstrap::Components::Base
+        # include Bootstrap::Utilities::Disableable
+        include Bootstrap::Utilities::Activatable
+
+        def component_family
+          :pagination
+        end
+
+        def disabled
+          options.fetch(:disabled, false)
+        end
+
+        def href
+          options[:href] || '#' # return # when nil
+        end
+
+        # Send href through to the "page link" that's embedded within
+        # the page item component
+        def html_options
+          super.except!(:href)
+        end
+
+        def page_link_html_options
+          { class: 'page-link',
+            **(disabled ? { tabindex: '-1' } : {}),
+            href: href }
+        end
+
+        def render
+          super do
+            content_tag(:a, page_link_html_options) do
+              capture do
+                concat(block_given? ? yield : body)
+                concat(content_tag(:span, '(current)', class: 'sr-only')) if active
+              end
+            end
+          end
+        end
+
+        private
+
+        def base_element
+          :li
+        end
+
+        def css_classes
+          [
+            super,
+            ('disabled' if disabled)
+          ].join(' ').squish
+        end
+
+        def non_html_attribute_options
+          super.push(:disabled)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Pagination Component
+      # https://getbootstrap.com/docs/4.1/components/pagination/
+      class Pagination < NfgUi::Bootstrap::Components::Base
+        include Bootstrap::Utilities::Alignable
+        include Bootstrap::Utilities::Sizable
+
+        def component_family
+          :pagination
+        end
+
+        def render
+          content_tag(:nav) do
+            super
+          end
+        end
+
+        private
+
+        def base_element
+          :ul
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Popover Component
+      # https://getbootstrap.com/docs/4.1/components/popovers/
+      class Popover < NfgUi::Bootstrap::Components::Base
+      end
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Parent Progress Component
+      # https://getbootstrap.com/docs/4.1/components/progress/
+      class Progress < NfgUi::Bootstrap::Components::Base
+        include Bootstrap::Utilities::Progressable
+
+        def component_family
+          :progress
+        end
+
+        def height
+          options.fetch(:height, nil)
+        end
+
+        def style
+          [
+            super,
+            ("height: #{height}px;" if height)
+          ].join(' ').squish
+        end
+
+        def render
+          super do
+            if body
+              (block_given? ? yield : body)
+            else
+              NfgUi::Bootstrap::Components::ProgressBar.new({ theme: theme, label: label, progress: progress, striped: striped, animated: animated }, view_context).render
+            end
+          end
+        end
+
+        private
+
+        def non_html_attribute_options
+          super.push(:height)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Progress Bar Component
+      # https://getbootstrap.com/docs/4.1/components/progress/
+      class ProgressBar < NfgUi::Bootstrap::Components::Progress
+        include Bootstrap::Utilities::Progressable
+        include Bootstrap::Utilities::Themeable
+
+        def component_family
+          :progress
+        end
+
+        def style
+          [
+            options[:style],
+            ("width: #{progress.to_i}%;" if progress)
+          ].join(' ').squish
+        end
+
+        def render
+          content_tag(:div, label, html_options)
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            ("#{component_css_class}-striped" if striped),
+            ("#{component_css_class}-animated" if animated)
+          ].join(' ').squish
+        end
+
+        def assistive_html_attributes
+          super.merge!(role: 'progressbar', aria: { valuenow: progress, valuemin: 0, valuemax: 100 })
+        end
+
+        def theme_css_class_prefix
+          'bg-'
+        end
+
+        def outlineable?
+          false
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Progress Component
+      # https://getbootstrap.com/docs/4.1/components/progress/
+      class TabContent < NfgUi::Bootstrap::Components::Base
+        def component_family
+          :tab
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Progress Component
+      # https://getbootstrap.com/docs/4.1/components/progress/
+      class TabPane < NfgUi::Bootstrap::Components::Base
+        include Bootstrap::Utilities::Activatable
+
+        def component_family
+          :tab
+        end
+
+        def tab
+          options.fetch(:tab, nil)
+        end
+
+        def id
+          tab ? tab.tr('#', '') : super
+        end
+
+        # Fade is turned on by default
+        # This should probably be a global setting
+        def fade
+          options.fetch(:fade, true)
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            ('fade' if fade),
+            ('show' if active)
+          ].join(' ').squish
+        end
+
+        def non_html_attribute_options
+          super.push(:tab)
+        end
+
+        def assistive_html_attributes
+          { role: 'tabpanel' }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Components
+      # Bootstrap Table Component
+      # https://getbootstrap.com/docs/4.1/content/tables/
+      class Table < NfgUi::Bootstrap::Components::Base
+        private
+
+        def base_element
+          :table
+        end
+      end
+    end
+  end
+end

data/lib/nfg_ui/bootstrap/readme.md

@@ -0,0 +1 @@
+Bootstrap4 code will be isolated into its own gem later.

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

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Passes in necessary attributes to allow a component to have an active state
+      module Activatable
+
+        def active
+          options.fetch(:active, default_active)
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            ('active' if active)
+          ].join(' ').squish
+        end
+
+        def non_html_attribute_options
+          super.push(:active)
+        end
+
+        def default_active
+          false
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Allow components to be right and center aligned
+      module Alignable
+        def center
+          options.fetch(:center, false)
+        end
+
+        def right
+          options.fetch(:right, false)
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            ('justify-content-center' if center),
+            ('justify-content-end' if right)
+          ].join(' ').squish
+        end
+
+        def non_html_attribute_options
+          super.push(:right,
+                     :center)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Allows components to have a collapsed state when appropriate
+      module CollapseToggleable
+        include Bootstrap::Utilities::Collapsible
+
+        def data
+          collapse ? super.merge!(collapse_data_attributes) : super
+        end
+
+        private
+
+        # Buttons need to be able to to set a target on :buttons
+        # and an href on links -- so this attribute is customizable if needed
+        def collapse_data_attributes
+          @collapse_data_attributes ||= { toggle: 'collapse', target: collapse }
+        end
+
+        # To do: currently collapsible doesn't control the actual collapse
+        # As such, there's no way to set aria-expanded on the button / toggle...
+        # based on whether or not the collapse component is expanded or not
+        #
+        # To solve: how to address aria-expanded to accurately reflect the expanded status
+        def assistive_html_attributes
+          return super unless collapse
+          super.merge!(aria: (options[:aria] || {}).merge!(expanded: 'false', controls: collapse.tr('#','')),
+                       role: 'button')
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Allows components to carry collapse attributes
+      # to more easily pass collapse status to a collapsible target
+      #
+      # Example:
+      # Tile & TileHeader both include Collapsible
+      # because they both pass collapse attributes to
+      # a collapse button within TileHeader
+      #
+      # They do not, however need a collapse toggle
+      # unlike a NavbarToggle / Button, and thus they do not include
+      # The CollapseToggleable module
+      #
+      # CollapseToggleable components have this module included
+      # by default via the CollapseToggleable module.
+      module Collapsible
+        def collapse
+          options.fetch(:collapse, nil)
+        end
+
+        def collapsed
+          options.fetch(:collapsed, nil)
+        end
+
+        # Collapsible checks if collapse is manually set true or false and thus, collapsible
+        def collapsible
+          options[:collapsible] || collapse || !collapsed.nil?
+        end
+
+        private
+
+        def non_html_attribute_options
+          super.push(:collapse, :collapsed, :collapsible)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Allows components to have a disabled state when appropriate
+      module Disableable
+        attr_reader :as
+
+        def disabled
+          options.fetch(:disabled, false)
+        end
+
+        private
+
+        def css_classes
+          # when the tag does not take a disabled attribute we
+          # assigne the disabled class
+          [
+            super,
+            ('disabled' if disabled && !tag_allows_for_disable_attribute?)
+          ].join(' ').squish
+        end
+
+        def non_html_attribute_options
+          # if tag accepts the disabled attribute
+          # push it through, otherwise remove it from the
+          # html options. We do this regardless of whether or not
+          # disabled was actually set to ensure that those
+          # tags that can't take a disabled option never receive it
+          tag_allows_for_disable_attribute? ? super : super.push(:disabled)
+        end
+
+        def assistive_html_attributes
+          if disabled
+            super.merge!(tabindex: '-1',
+                         **(tag_allows_for_disable_attribute?) ? { disabled: true } : {})
+          else
+            super
+          end
+        end
+
+        def tag_allows_for_disable_attribute?
+          [:button, :input, :fieldset, :optgroup, :option, :select, :textarea].include?(as)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Delivers the dismissibility of the component to the HAML partial
+      module Dismissible
+        def dismissible
+          options.fetch(:dismissible, default_dismissible)
+        end
+
+        private
+
+        def non_html_attribute_options
+          super.push(:dismissible)
+        end
+
+        def default_dismissible
+          true
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Allows components to supply the dropDIRECTION for menus
+      # This is applicable to more than just the Dropdown component
+      module DropdownDirectionable
+        def dropleft
+          options.fetch(:dropleft, false)
+        end
+
+        def dropright
+          options.fetch(:dropright, false)
+        end
+
+        def dropup
+          options.fetch(:dropup, false)
+        end
+
+        private
+
+        def css_classes
+          [
+            super,
+            ('dropleft' if dropleft),
+            ('dropright' if dropright),
+            ('dropup' if dropup)
+          ].join(' ').squish
+        end
+
+        def non_html_attribute_options
+          super.push(:dropleft,
+                     :dropright,
+                     :dropup)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Delivers the dismissibility of the component to the HAML partial
+      module Headable
+        def heading
+          options.fetch(:heading, nil)
+        end
+
+        private
+
+        def non_html_attribute_options
+          super.push(:heading)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module NfgUi
+  module Bootstrap
+    module Utilities
+      # Allows a component to utilize the :modal option
+      # Which then formats the component's HTML data attributes
+      # to connect to the desired modal. Note the :modal option requires the '#'
+      # preceding the CSS ID per bootstrap docs
+      #
+      # Correct:   { modal: '#the_modal_id' } <-- note the '#'
+      # Incorrect: { modal: 'the_modal_id' }
+      #
+      # USAGE:
+      # When to use the :modal option on a component:
+      # The :modal option should only be used when activating a modal
+      # that has been embedded on the HTML page and is not being injected
+      # from a remote ajax request via remote: true.
+      #
+      # INVALID USAGE:
+      # Do not set a modal option on a remote link in Rails
+      # Setting a component to remote: true in addition to suppling a modal
+      # will result in an ArgumentError. This is due to poor / buggy behavior resulting from
+      # remotely re-rendering a modal that is already on the page
+      #
+      # (basically: there's a high likelihood that the targeted modal will
+      # be shown / animated twice)
+      #
+      # Like when remote: true, components that contain tooltips
+      # Will also raise an ArgumentError due to the competing data-toggles
+      # and the subsequent silent failure of the tooltip.
+      #
+      # EXCEPTIONS:
+      # Exception for a modalable component with a tooltip:
+      # *Disabled* components may use a modal and a tooltip in its options
+      # (thanks to how disabled components are wrapped with an html element & the tooltip
+      # is applied to the wrapping element, not the component itself)
+      #
+      # Valid example:
+      # = ui.bootstrap :button, disabled: true, tooltip: 'The tooltip', modal: '#the_modal', ...
+      #
+      # Extra care is taken with the modal and competing options given its typical wide-ranging
+      # use in rails applications.
+      module Modalable
+        def data
+          # Raise an error when a component utilizes 'illegal' options (which are options that
+          # result in silent failures and/or directly compete with a
+          # modalable component's necessary HTML)
+          if component_includes_problematic_options_for_modal?
+            raise ArgumentError.new(I18n.t("nfg_ui.errors.argument_error.modalable.#{error_message_i18n_path}",
+                                     modal: modal,
+                                     class_name: self.class.name,
+                                     options: options,
+                                     file: __FILE__,
+                                     method: __method__))
+          end
+
+          # Overwrites data-toggle and data-target
+          # forcing the modal to take precedence.
+          # If a tooltip is present in the options, an ArgumentError is raised
+          modal ? super.merge!(toggle: 'modal', target: options[:modal]) : super
+        end
+
+        def modal
+          options.fetch(:modal, nil)
+        end
+
+        private
+
+        # Corresponds to i18n locale: config/locales/en.yml
+        # Remote is checked first, given its importance and impact on the application
+        # Then, check for tooltip.
+        def error_message_i18n_path
+          return 'remote' if options[:remote]
+          return 'tooltip' if options[:tooltip]
+        end
+
+        # Force an error when:
+        # 1. The component includes remote: true (and the modal option is present)
+        # 2. The component includes a :tooltip in the options
+        #
+        # When a tooltip is present, the data-toggle would be overwritten with
+        # the modal data attributes (given the `data.merge!`) causing a silent failure
+        # of the tooltip (it doesn't get added to the component)
+        #
+        # Exception: when tooltip is not "illegal" (the component has a tooltip *and* is disabled)
+        def component_includes_problematic_options_for_modal?
+          modal.present? && (options.fetch(:remote, nil) || illegal_tooltip?)
+        end
+
+        # When a modalable component is disabled
+        # the tooltip is applied to a wrapping element
+        # and will not compete with the modal's data attributes.
+        def illegal_tooltip?
+          options[:tooltip].present? && !options[:disabled]
+        end
+
+        def non_html_attribute_options
+          super.push(:modal)
+        end
+      end
+    end
+  end
+end