fa_rails 0.1.20 → 0.1.25

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 157fd0642d7e283f63085edd82d1e83941440c53b62f1c7e547a448faa07d43f
-  data.tar.gz: 1fe81fae07ca36ee1451d435fb3355b4ad3c8fc9baa3b25f22f4823ce23f062d
+  metadata.gz: 2a0166501def630ab5880108fdd887614849f6a2b77a23c1e042c98a459a0130
+  data.tar.gz: 8dcd8b62b61b8f0dfe9a323378ccab27547e627dbfa3c5a97643da2720dbb0ab
 SHA512:
-  metadata.gz: 1ed38c30ff8f9aca74e873dc2308506434a424d6955ea982207d292500bd906755395536e93569647688a05f2cd479421a2f26fdc8cefb36cc33c60219877261
-  data.tar.gz: 1a630a476fb8b48a3c4800ac3907a2478e11bc99f6cdc656f50000e28581192375ad783648a3299252b040300c500cee14007d3d46e83418e88a21b9a7b4acf7
+  metadata.gz: 5a17c51cd3277b386aea9211cd8e6b4744778f5546ca75936b9bdb917e39413096c6e672a9ec42191dfc8aa8e4472083b6a7324be5410aa1d4bf6a4e8ed54024
+  data.tar.gz: 5ec4b0d9261b7313305f306340a2d8bb0b060072161c4ba95f35ee5bd9abe18726b755cd630d1f63c2d2a6ef472d6247ce7fcbd78e8ccb53b58423d8cf984277

data/.ruby-version

@@ -0,0 +1 @@
+2.5.1

data/Gemfile.lock

@@ -1,15 +1,15 @@
 PATH
   remote: .
   specs:
-    fa_rails (0.1.20)
+    fa_rails (0.1.25)
 
 GEM
   remote: https://rubygems.org/
   specs:
     diff-lcs (1.3)
     docile (1.3.1)
-    json (2.1.0)
-    rake (12.3.1)
+    json (2.3.1)
+    rake (12.3.3)
     rspec (3.7.0)
       rspec-core (~> 3.7.0)
       rspec-expectations (~> 3.7.0)

data/README.md

@@ -29,29 +29,41 @@ corresponding locations in your app, and ensure you correctly include all files.
 
 ### FontAwesome CDN
 
-Go to the FontAwesome
-[How to Use](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css)
-page and copy the appropriate CDN link tag.
+You can also link into the FontAwesome CDN, in either of two ways:
 
-You can also `include FA`, then use the built-in helper method in your layout:
+#### Version-Specific Link
+
+You can use this helper method in your layout:
 
 ```ruby
 FA::Link.new(version: 'v5.3.1', integrity: 'sha384-some-key-here').safe
 ```
 
-#### Free
+Or, go to the FontAwesome
+[How to Use](https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css)
+page and copy the appropriate CDN link tag.
+
+**Be sure to also register each domain that will use this CDN link.**
+
+##### Free
 
 ```html
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-some-key-here" crossorigin="anonymous">
 ```
 
-#### Pro
+##### Pro
 
 ```html
 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-some-key-here" crossorigin="anonymous">
 ```
 
-**Be sure to also register each domain that will use this CDN link.**
+#### Kit Link
+
+Use this helper method in your layout:
+
+```ruby
+FA::Link.kit('kit-id')
+```
 
 ## Usage
 
@@ -90,6 +102,7 @@ options #=> Hash
   size: Integer # Stepped scaling factor
 
   css: String # Arbitrary CSS classes, space-delimited
+  raw_css: Hash # Arbitrary raw CSS, as a hash of attributes and values
   fa: String # Arbitrary FA classes, space-delimited – each is automatically prefixed with `fa-`
   title: String #=> Tooltip text
   grow: Integer #=> Transform value – amount to grow by
@@ -114,6 +127,7 @@ options #=> Hash
   position: Symbol # Indicator of which corner to display on – one of [:tr, :tl, :br, :bl]
 
   css: String # Arbitrary CSS classes, space-delimited
+  raw_css: Hash # Arbitrary raw CSS, as a hash of attributes and values
   fa: String # Arbitrary FA classes, space-delimited – each is automatically prefixed with `fa-`
   title: String #=> Tooltip text
   grow: Integer #=> Transform value – amount to grow by
@@ -143,24 +157,39 @@ css #=> String – arbitrary CSS classes, space-delimited, applied to the layer
 ```ruby
 # Fixed-width lock icon
 FA::Icon.p('lock', fa: 'fw')
-#=> "<i class='fas fa-fw fa-lock fa-1x' data-fa-transform='' title=''></i>"
+#=> "<i class='fas fa-fw fa-lock fa-1x' style='' data-fa-transform='' title=''></i>"
+
+# Duotone fire-alt icon with swapped opacity
+FA::Icon.p('fire-alt', fa: 'swap-opacity')
+#=> "<i class='fas fa-swap-opacity fa-fire-alt fa-1x' style='' data-fa-transform='' title=''></i>"
+
+# Duotone fire-alt icon with specified opacities
+FA::Icon.p('fire-alt', style: :duotone, raw_css: { '--fa-primary-opacity' => '0.6', '--fa-secondary-opacity' => '0.4' })
+#=> "<i class='fad fa-fire-alt fa-1x' style='--fa-primary-opacity: 0.4; --fa-secondary-opacity: 0.6;' data-fa-transform='' title=''></i>"
+
+# You can also use this simplified configuration option for adding styles
+#   This is reforatted and merged into :raw_css
+#   Accepts either snake_case symbols or spear-case strings as keys, and strings or symbols as values
+#   This is the easiest way to add primary/secondary styles for duotone icons
+FA::Icon.p('fire-alt', style: :duotone, fa_styles: { primary_opacity: '0.6', secondary_opacity: '0.4', primary_color: :green, secondary_color: '#DD2200' })
+#=> "<i class='fad fa-fire-alt fa-1x' style='--fa-primary-opacity: 0.6; --fa-secondary-opacity: 0.4; --fa-primary-color: green; --fa-secondary-color: #DD2200;' data-fa-transform='' title=''></i>"
 
 # Counter span, with value 5
 FA::Span.p('counter', 5)
-#=> "<span class='fa-layers-counter ' data-fa-transform=''>5</span>"
+#=> "<span class='fa-layers-counter ' style='' data-fa-transform=''>5</span>"
 
 # Gray envelope icon with red exclamation mark overlayed, with tooltip 'Invalid email address'
 FA::Layer.p([{ name: 'envelope', options: { css: :gray } }, { name: 'exclamation', options: { css: :red } }], title: 'Invalid email address')
 #=> "<span class='icon fa-layers fa-stack fa-fw ' title='Invalid email address'>" \
-#   "<i class='fas fa-stack-1x gray fa-envelope fa-1x' data-fa-transform='grow-0' title='Invalid email address'></i>" \
-#   "<i class='fas fa-stack-1x red fa-exclamation fa-1x' data-fa-transform='grow-0' title='Invalid email address'></i>" \
+#   "<i class='fas fa-stack-1x gray fa-envelope fa-1x' style='' data-fa-transform='grow-0' title='Invalid email address'></i>" \
+#   "<i class='fas fa-stack-1x red fa-exclamation fa-1x' style='' data-fa-transform='grow-0' title='Invalid email address'></i>" \
 #   "</span>"
 
 # Blue envelope with red counter on the top left corner, with value 7
 FA::Layer.p([{ name: 'envelope', options: { css: :blue } }, { name: 'counter', text: 7, options: { css: :red, position: :tl } }])
 #=> "<span class='icon fa-layers fa-stack fa-fw ' title=''>" \
-#   "<i class='fas fa-stack-1x blue fa-envelope fa-1x' data-fa-transform='grow-0' title=''></i>" \
-#   "<span class='fa-stack-1x red fa-layers-counter fa-layers-top-left' data-fa-transform='grow-0'>7</span>" \
+#   "<i class='fas fa-stack-1x blue fa-envelope fa-1x' style='' data-fa-transform='grow-0' title=''></i>" \
+#   "<span class='fa-stack-1x red fa-layers-counter fa-layers-top-left' style='' data-fa-transform='grow-0'>7</span>" \
 #   "</span>"
 
 # The same stack, but using the FA::Build DSL (with various syntaxes).

data/fa_rails.gemspec

@@ -1,7 +1,7 @@
 Gem::Specification.new do |s|
   s.name          = 'fa_rails'
-  s.version       = '0.1.20'
-  s.date          = '2019-07-31'
+  s.version       = '0.1.25'
+  s.date          = '2021-04-03'
   s.summary       = 'FontAwesome helper for Rails'
   s.description   = 'A helper module for using FontAwesome icons in Rails.'
   s.homepage      = 'http://rubygems.org/gems/fa_rails'

data/lib/fa/base.rb

@@ -3,6 +3,11 @@
 module FA
   # FontAwesome 5 (Pro) Helper core class for inheritance
   class Base
+    STYLES = {
+      solid: 's', regular: 'r', light: 'l', thin: 't',
+      duotone: 'd', brands: 'b', kit_upload: 'k'
+    }.freeze
+
     # Outputs the formatted string directly.
     def raw
       #
@@ -43,7 +48,7 @@ module FA
       css = @classes.flatten.join(' ')
       transforms = @transforms.join(' ')
 
-      "<i class='#{css}' data-fa-transform='#{transforms}' " \
+      "<i class='#{css}' style='#{@styles}' data-fa-transform='#{transforms}' " \
       "title='#{options[:title]}'></i>"
     end
 
@@ -59,11 +64,11 @@ module FA
       css = @classes.flatten.reject { |c| c.to_s.match?(/^fa.$/) }.join(' ')
       transforms = @transforms.join(' ')
 
-      "<span class='#{css}' data-fa-transform='#{transforms}'>#{text}</span>"
+      "<span class='#{css}' style='#{@styles}' data-fa-transform='#{transforms}'>#{text}</span>"
     end
 
     def fa_options(options)
-      default = { style: :solid, css: '', fa: '', size: 1 }
+      default = { style: :solid, css: '', raw_css: {}, fa: '', size: 1 }
 
       default.merge(options.to_h)
     end
@@ -93,14 +98,36 @@ module FA
 
     def parse_options(options)
       parse_classes(options)
+      options = merge_fa_styles(options)
+      parse_styles(options)
       parse_transforms(options)
     end
 
     def parse_classes(options)
       @classes = []
       @classes << parse_style(options)
-      @classes << options[:fa].to_s.split(' ').map { |c| "fa-#{c}" }
-      @classes << options[:css].to_s.split(' ')
+      @classes << format_classes(options[:fa], prefix: 'fa-')
+      @classes << format_classes(options[:css])
+    end
+
+    def format_classes(classes, prefix: nil)
+      classes = classes.split(' ') if classes.is_a?(String)
+      classes.map { |c| "#{prefix}#{c}" } if classes.is_a?(Array)
+    end
+
+    def merge_fa_styles(options)
+      fa_styles = options.delete(:fa_styles)
+      return options unless fa_styles
+
+      fa_styles = fa_styles.each_with_object({}) do |(k, v), hash|
+        hash["--fa-#{k.to_s.tr('_', '-')}"] = v.to_s
+      end
+      options[:raw_css] = options[:raw_css].merge(fa_styles)
+      options
+    end
+
+    def parse_styles(options)
+      @styles = options[:raw_css].map { |k, v| "#{k}: #{v};" }.join(' ')
     end
 
     def parse_transforms(options)
@@ -113,10 +140,10 @@ module FA
     end
 
     def parse_style(options)
-      return if options[:css].to_s.match?(/fa[srldb]/)
-      return 'fas' unless %i[solid regular light duotone brands].include?(options[:style])
+      return if options[:css].to_s.match?(/fa[srldbk]/)
+      return 'fas' unless STYLES.keys.include?(options[:style])
 
-      'fa' + { solid: 's', regular: 'r', light: 'l', duotone: 'd', brands: 'b' }[options[:style]]
+      'fa' + STYLES[options[:style]]
     end
   end
 end

data/spec/lib/fa_spec.rb

@@ -28,20 +28,52 @@ RSpec.describe FA do
   end
 
   describe 'icon' do
-    it 'should generate the correct icon from a string or symbol name' do
+    it 'should generate the correct icon from a string name' do
       expect(FA::Icon.p('help')).to eql(
-        "<i class='fas fa-help fa-1x' data-fa-transform='' title=''></i>"
+        "<i class='fas fa-help fa-1x' style='' data-fa-transform='' title=''></i>"
       )
+    end
 
+    it 'should generate the correct icon from a symbol name' do
       expect(FA::Icon.p(:help)).to eql(
-        "<i class='fas fa-help fa-1x' data-fa-transform='' title=''></i>"
+        "<i class='fas fa-help fa-1x' style='' data-fa-transform='' title=''></i>"
       )
     end
 
     it 'should generate the correct icon from a configuration hash' do
       fa = { name: 'help', options: { style: :light, size: 2 } }
       expect(FA::Icon.p(fa)).to eql(
-        "<i class='fal fa-help fa-2x' data-fa-transform='' title=''></i>"
+        "<i class='fal fa-help fa-2x' style='' data-fa-transform='' title=''></i>"
+      )
+    end
+
+    it 'should correctly handle a string fa option' do
+      expect(FA::Icon.p(:help, fa: 'fw 2x')).to eql(
+        "<i class='fas fa-fw fa-2x fa-help fa-1x' style='' data-fa-transform='' title=''></i>"
+      )
+    end
+
+    it 'should correctly handle an array fa option' do
+      expect(FA::Icon.p(:help, fa: %i[fw 2x])).to eql(
+        "<i class='fas fa-fw fa-2x fa-help fa-1x' style='' data-fa-transform='' title=''></i>"
+      )
+    end
+
+    it 'should correctly handle a string css option' do
+      expect(FA::Icon.p(:help, css: 'green big')).to eql(
+        "<i class='fas green big fa-help fa-1x' style='' data-fa-transform='' title=''></i>"
+      )
+    end
+
+    it 'should correctly handle an array css option' do
+      expect(FA::Icon.p(:help, css: %i[green big])).to eql(
+        "<i class='fas green big fa-help fa-1x' style='' data-fa-transform='' title=''></i>"
+      )
+    end
+
+    it 'should correctly handle a nil css option' do
+      expect(FA::Icon.p(:help, css: nil)).to eql(
+        "<i class='fas  fa-help fa-1x' style='' data-fa-transform='' title=''></i>"
       )
     end
 
@@ -55,7 +87,20 @@ RSpec.describe FA do
 
     it 'should generate the correct brand icon' do
       expect(FA::Icon.p(:github, style: :brands)).to eql(
-        "<i class='fab fa-github fa-1x' data-fa-transform='' title=''></i>"
+        "<i class='fab fa-github fa-1x' style='' data-fa-transform='' title=''></i>"
+      )
+    end
+
+    it 'should generate the correct icon with styles' do
+      expect(
+        FA::Icon.p(
+          'fire-alt', style: :duotone, fa_styles: {
+            primary_opacity: '0.6', secondary_opacity: '0.4', primary_color: :green, secondary_color: '#DD2200'
+          }
+        )
+      ).to eql(
+        "<i class='fad fa-fire-alt fa-1x' style='--fa-primary-opacity: 0.6; --fa-secondary-opacity: 0.4; " \
+        "--fa-primary-color: green; --fa-secondary-color: #DD2200;' data-fa-transform='' title=''></i>"
       )
     end
   end
@@ -70,9 +115,9 @@ RSpec.describe FA do
 
       expect(FA::Layer.p(icons, grow: 2)).to eql(
         "<span class='icon fa-layers fa-stack fa-fw ' title=''>" \
-        "<i class='fas fa-stack-1x fa-square fa-1x' data-fa-transform='grow-2' title=''></i>" \
-        "<i class='fas fa-stack-1x fa-circle fa-1x' data-fa-transform='grow-3' title=''></i>" \
-        "<i class='far fa-stack-1x fa-exclamation fa-1x' data-fa-transform='grow-2' title=''></i>" \
+        "<i class='fas fa-stack-1x fa-square fa-1x' style='' data-fa-transform='grow-2' title=''></i>" \
+        "<i class='fas fa-stack-1x fa-circle fa-1x' style='' data-fa-transform='grow-3' title=''></i>" \
+        "<i class='far fa-stack-1x fa-exclamation fa-1x' style='' data-fa-transform='grow-2' title=''></i>" \
         '</span>'
       )
     end
@@ -85,8 +130,8 @@ RSpec.describe FA do
 
       expect(FA::Layer.p(icons)).to eql(
         "<span class='icon fa-layers fa-stack fa-fw ' title=''>" \
-        "<i class='fas fa-stack-1x fa-square fa-1x' data-fa-transform='grow-0' title=''></i>" \
-        "<span class='fa-stack-1x fa-layers-counter fa-layers-top-left' data-fa-transform='grow-0'>17</span>" \
+        "<i class='fas fa-stack-1x fa-square fa-1x' style='' data-fa-transform='grow-0' title=''></i>" \
+        "<span class='fa-stack-1x fa-layers-counter fa-layers-top-left' style='' data-fa-transform='grow-0'>17</span>" \
         '</span>'
       )
     end
@@ -99,8 +144,8 @@ RSpec.describe FA do
 
       expect(FA::Layer.p(icons, title: 'right')).to eql(
         "<span class='icon fa-layers fa-stack fa-fw ' title='right'>" \
-        "<i class='fas fa-stack-1x fa-square fa-1x' data-fa-transform='grow-0' title='right'></i>" \
-        "<i class='fas fa-stack-1x fa-exclamation fa-1x' data-fa-transform='grow-0' title='right'></i>" \
+        "<i class='fas fa-stack-1x fa-square fa-1x' style='' data-fa-transform='grow-0' title='right'></i>" \
+        "<i class='fas fa-stack-1x fa-exclamation fa-1x' style='' data-fa-transform='grow-0' title='right'></i>" \
         '</span>'
       )
     end
@@ -115,8 +160,8 @@ RSpec.describe FA do
 
       expect(layer).to eql(
         "<span class='icon fa-layers fa-stack fa-fw ' title=''>" \
-        "<i class='fas fa-stack-1x fa-circle fa-1x' data-fa-transform='grow-0' title=''></i>" \
-        "<span class='fa-stack-1x fa-layers-counter ' data-fa-transform='grow-0'>7</span>" \
+        "<i class='fas fa-stack-1x fa-circle fa-1x' style='' data-fa-transform='grow-0' title=''></i>" \
+        "<span class='fa-stack-1x fa-layers-counter ' style='' data-fa-transform='grow-0'>7</span>" \
         '</span>'
       )
     end
@@ -125,7 +170,7 @@ RSpec.describe FA do
   describe 'span' do
     it 'should generate the correct span from a string or symbol type' do
       expect(FA::Span.p(:text, 'Hello')).to eql(
-        "<span class='fa-layers-text ' data-fa-transform=''>Hello</span>"
+        "<span class='fa-layers-text ' style='' data-fa-transform=''>Hello</span>"
       )
     end
 
@@ -133,7 +178,7 @@ RSpec.describe FA do
       span = { type: :text, text: 'World', options: { position: :bl } }
       expect(FA::Span.p(span)).to eql(
         "<span class='fa-layers-text fa-layers-bottom-left' " \
-        "data-fa-transform=''>World</span>"
+        "style='' data-fa-transform=''>World</span>"
       )
     end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: fa_rails
 version: !ruby/object:Gem::Version
-  version: 0.1.20
+  version: 0.1.25
 platform: ruby
 authors:
 - Julian Fiander
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-07-31 00:00:00.000000000 Z
+date: 2021-04-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -77,6 +77,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".gitignore"
+- ".ruby-version"
 - ".travis.yml"
 - Gemfile
 - Gemfile.lock