fa_rails 0.1.18 → 0.1.23

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 771f0170fa690c018158f89119397efc56702af5e02b94bb2627b0f6f2b4cab6
-  data.tar.gz: 2b5bef6128cd65714edaea480c8024c3f871a3d4c240d79eb008411afbfc0f2c
+  metadata.gz: a0c5ec0ed2af445a927bc74382f2c7f3b058fa14e547972ec70ce36f24ab263b
+  data.tar.gz: b7361b459aaee1fcc70b068048bbbc37cb4f857b1f7ca682f8dc05b262213435
 SHA512:
-  metadata.gz: 06bb529758d62780a54fcc01db8a94ae5bf71e12a4f5b936ff7a7c5198eb96d5ed0e31cc41f9690dba08a3010542ffbdeb7ac0661f2668b82404705b5eac8bbf
-  data.tar.gz: 605a8dfe7d36472432e87f99f55faab94e8e6012af8f0e52e448230126ad4ea537fc13fd6494b020c1e9b71bc19ea5d9193ab22444fb454b7db49347338107f2
+  metadata.gz: 5885e9e3df860401c03b9869cd50170682092a1dcbd88d8a74d09015bc860f4f115b52d7489a6e5c699b6e48c027d4ea6be63cfbccc14aa8f14f5c2554b54353
+  data.tar.gz: 6cd3fdae68d50111ffa742f78048d3999db816b2fd1d70f04c06b971c64035cddf07168a11a794c1dfc27fca7f3aa8db3e00a0eb6da0e7b951beb8f603fa2272

data/.travis.yml

@@ -8,6 +8,8 @@ notifications:
   email:
     on_success: change
     on_failure: always
+before_install:
+  - gem install bundler -v '< 2'
 before_script:
   - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
   - chmod +x ./cc-test-reporter

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    fa_rails (0.1.18)
+    fa_rails (0.1.23)
 
 GEM
   remote: https://rubygems.org/
@@ -9,7 +9,7 @@ GEM
     diff-lcs (1.3)
     docile (1.3.1)
     json (2.1.0)
-    rake (12.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.18'
-  s.date          = '2019-07-29'
+  s.version       = '0.1.23'
+  s.date          = '2020-06-18'
   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,14 +3,18 @@
 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'
+    }.freeze
+
     # Outputs the formatted string directly.
     def raw
       #
     end
 
     # Attempts to call `.html_safe` on the the output of `raw`, if available.
-    def safe
-      output = raw
+    def safe(html = nil)
+      output = html || raw
       output.respond_to?(:html_safe) ? output.html_safe : output
     end
 
@@ -43,7 +47,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 +63,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,6 +97,8 @@ module FA
 
     def parse_options(options)
       parse_classes(options)
+      options = merge_fa_styles(options)
+      parse_styles(options)
       parse_transforms(options)
     end
 
@@ -103,6 +109,21 @@ module FA
       @classes << options[:css].to_s.split(' ')
     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)
       @transforms = []
       %i[grow shrink rotate up down left right].each do |transform|
@@ -113,10 +134,10 @@ module FA
     end
 
     def parse_style(options)
-      return if options[:css].to_s.match?(/fa[srlb]/)
-      return 'fas' unless %i[solid regular light brands].include?(options[:style])
+      return if options[:css].to_s.match?(/fa[srldb]/)
+      return 'fas' unless STYLES.keys.include?(options[:style])
 
-      'fa' + { solid: 's', regular: 'r', light: 'l', brands: 'b' }[options[:style]]
+      'fa' + STYLES[options[:style]]
     end
   end
 end

data/lib/fa/link.rb

@@ -26,6 +26,11 @@ module FA
       "<script src=\"https://kit.fontawesome.com/#{@kit}.js\"></script>"
     end
 
+    def self.kit(kit_id)
+      k = new(kit: kit_id)
+      k.safe(k.kit)
+    end
+
     private
 
     def url

data/spec/lib/fa_spec.rb

@@ -14,8 +14,8 @@ RSpec.describe FA do
     end
 
     it 'should generate the correct kit link tag' do
-      tag = FA::Link.new(kit: 'abcdefg', pro: true)
-      expect(tag.kit).to eql(
+      tag = FA::Link.kit('abcdefg')
+      expect(tag).to eql(
         "<script src=\"https://kit.fontawesome.com/abcdefg.js\"></script>"
       )
     end
@@ -28,20 +28,22 @@ 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
 
@@ -55,7 +57,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 +85,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 +100,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 +114,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 +130,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 +140,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 +148,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.18
+  version: 0.1.23
 platform: ruby
 authors:
 - Julian Fiander
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-07-29 00:00:00.000000000 Z
+date: 2020-06-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake