class NfgUi::Components::Foundations::Icon

Icon doc coming soon Implementation and usage is designed to mimic the font_awesome_rails gem

Example usage:

ui.nfg :icon, 'rocket', :right, text: 'Example text with icon on the right'

Constants

LEFT_ICON_SPACER_CSS_CLASS

Officially declare the icon spacer classes so that other iconable components that have more than one icon e.g.: :left_icon & :icon can use the spacer class manually

RIGHT_ICON_SPACER_CSS_CLASS

Public Instance Methods

icon() click to toggle source

Utilize a trait or `:icon` within options. When setting the icon as a trait, you must pass in a string. If a symbol is detected, the component assumes it's a registered trait

Example usage as a trait:

ui.nfg :icon, 'heart'

Example usage as an option:

ui.nfg :icon, icon: 'heart'

This is useful in syncing up the ability to pass in `:icon` to components that accept `:icon` in options and automatically render an icon.

# File lib/nfg_ui/components/foundations/icon.rb, line 38
def icon
  options[:icon] || (traits.slice!(0).to_s if traits.first.is_a?(String))
end
render() click to toggle source

Outputs a Font Awesome icon using the fa_icon method.

# File lib/nfg_ui/components/foundations/icon.rb, line 43
def render
  view_context.fa_icon icon, **html_options, text: text, right: right
end
right() click to toggle source

Tap into the font_awesome_rails :right method to place the icon on the right side of the text. This also automatically adds the right side css spacer class to the icon <i> tag.

# File lib/nfg_ui/components/foundations/icon.rb, line 50
def right
  options.fetch(:right, false)
end
text() click to toggle source

Tap into the font_awesome_rails :text method to insert text into the rendered component.

# File lib/nfg_ui/components/foundations/icon.rb, line 56
def text
  options.fetch(:text, nil)
end

Private Instance Methods

add_left_icon_css_spacer_class?() click to toggle source

Adds the left css spacer class when :right is false and when text is present

# File lib/nfg_ui/components/foundations/icon.rb, line 64
def add_left_icon_css_spacer_class?
  return false if reject_spacer_css_class?
  !right && text.present?
end
add_right_icon_css_spacer_class?() click to toggle source

Adds the left css spacer class when :right is true and when text is present

# File lib/nfg_ui/components/foundations/icon.rb, line 71
def add_right_icon_css_spacer_class?
  return false if reject_spacer_css_class?
  right && text.present?
end
assistive_html_attributes() click to toggle source
# File lib/nfg_ui/components/foundations/icon.rb, line 76
def assistive_html_attributes
  super.merge(aria: { hidden: true })
end
component_css_class() click to toggle source

Override the auto generated css class

# File lib/nfg_ui/components/foundations/icon.rb, line 81
def component_css_class
  ''
end
css_classes() click to toggle source

Icons utilize “spacer” css classes to manually provide margins between the icon and the text.

# File lib/nfg_ui/components/foundations/icon.rb, line 87
def css_classes
  [
    super,
    (NfgUi::Components::Foundations::Icon::LEFT_ICON_SPACER_CSS_CLASS if add_left_icon_css_spacer_class?),
    (NfgUi::Components::Foundations::Icon::RIGHT_ICON_SPACER_CSS_CLASS if add_right_icon_css_spacer_class?)
  ].join(' ').squish
end
default_theme() click to toggle source

Icons should be body text color by default and should not have a theme set by default.

# File lib/nfg_ui/components/foundations/icon.rb, line 102
def default_theme
  nil
end
non_html_attribute_options() click to toggle source
# File lib/nfg_ui/components/foundations/icon.rb, line 106
def non_html_attribute_options
  super.push(:right, :text, :icon)
end
outlineable?() click to toggle source

Icons are not thematically outlineable

# File lib/nfg_ui/components/foundations/icon.rb, line 111
def outlineable?
  false
end
reject_spacer_css_class?() click to toggle source

List of unique conditions that will result in full rejection of left/right spacer classes

This is needed for specific traits / design system approaches Where icons get unique css classes based on their context, such as a :tip icon which is placed in the sentence flow and doesn't need left/right css spacers.

# File lib/nfg_ui/components/foundations/icon.rb, line 122
def reject_spacer_css_class?
  traits.include?(:tip)
end
theme_css_class_prefix() click to toggle source

Icons utilize text styling for css theming.

# File lib/nfg_ui/components/foundations/icon.rb, line 96
def theme_css_class_prefix
  'text-'
end