From f886c758bd04cc6a56ad2c7e05ea99af2b9bf45f Mon Sep 17 00:00:00 2001
From: Michael Kohl <citizen428@forem.com>
Date: Mon, 3 Jan 2022 09:52:05 +0700
Subject: [PATCH] Add crayons_icon_tag helper (#15878)

---
 app/helpers/crayons_helper.rb       | 33 +++++++++++++++++++++++
 spec/helpers/crayons_helper_spec.rb | 42 +++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 app/helpers/crayons_helper.rb
 create mode 100644 spec/helpers/crayons_helper_spec.rb

diff --git a/app/helpers/crayons_helper.rb b/app/helpers/crayons_helper.rb
new file mode 100644
index 000000000..88f8b1406
--- /dev/null
+++ b/app/helpers/crayons_helper.rb
@@ -0,0 +1,33 @@
+module CrayonsHelper
+  # A wrapper for the +inline_svg_tag+ helper specifically for Crayons icons.
+  #
+  # @param name [String|Symbol] the icon name. The ".svg" file extension will
+  #   be added automatically if missing.
+  # @param css_class [String] additional CSS classes, "crayons-icon" is always
+  #   included.
+  # @param native [Boolean] when set to +true+ the icon will not inherit its
+  #   parent's color.
+  # @param **opts additional keyword arguments to be passed through to the
+  #   +inline_svg_tag+ helper.
+  # @return [String] the SVG tag.
+  #
+  # @example Simplest form
+  #   crayons_icon_tag(:twitter)
+  #
+  # @example Disabling color inheritance
+  #   crayons_icon_tag(:twitter, native: true)
+  #
+  # @example Specifying additional CSS classes
+  #   crayons_icon_tag("twitter.svg", css_class: "pointer-events-none")
+  def crayons_icon_tag(name, css_class: nil, native: false, **opts)
+    name = name.to_s
+    icon_name = name.ends_with?(".svg") ? name : "#{name}.svg"
+    icon_class = [
+      "crayons-icon",
+      css_class,
+      ("crayons-icon--default" if native),
+    ].compact.join(" ")
+
+    inline_svg_tag(icon_name, aria: true, width: 24, height: 24, class: icon_class, **opts)
+  end
+end
diff --git a/spec/helpers/crayons_helper_spec.rb b/spec/helpers/crayons_helper_spec.rb
new file mode 100644
index 000000000..93de3ddfa
--- /dev/null
+++ b/spec/helpers/crayons_helper_spec.rb
@@ -0,0 +1,42 @@
+require "rails_helper"
+
+RSpec.describe CrayonsHelper, type: :helper do
+  describe "#crayons_icon_tag" do
+    let(:icon_tag) { helper.crayons_icon_tag("twitter.svg") }
+
+    it "generates an SVG tag" do
+      expect(icon_tag).to match(%r{\A<svg.*</svg>\n\z}m)
+    end
+
+    it "includes the correct class" do
+      expect(icon_tag).to match(/class="crayons-icon"/)
+    end
+
+    it "allows disabling color inheritance via the native attribute" do
+      icon_tag = helper.crayons_icon_tag(:twitter, native: true)
+      expect(icon_tag).to match(/class="crayons-icon crayons-icon--default"/)
+    end
+
+    it "adds the correct ARIA role" do
+      expect(icon_tag).to match(/role="img"/)
+    end
+
+    it "works when the .svg suffix is omitted" do
+      expect(helper.crayons_icon_tag("twitter")).to eq(icon_tag)
+    end
+
+    it "accepts a symbol for the name parameter" do
+      expect(helper.crayons_icon_tag(:twitter)).to eq(icon_tag)
+    end
+
+    it "allows specifying additional CSS classes" do
+      icon_tag = helper.crayons_icon_tag("twitter", css_class: "pointer-events-none")
+      expect(icon_tag).to match(/class="crayons-icon pointer-events-none"/)
+    end
+
+    it "passes additional keyword arguments to the wrapped tag" do
+      icon_tag = helper.crayons_icon_tag("twitter", title: "Test")
+      expect(icon_tag).to match(%r{<title.*>Test</title>})
+    end
+  end
+end