Adding TagComponent

Gemfile.lock

@@ -99,6 +99,8 @@ GEM
     nio4r (2.5.8)
     nokogiri (1.12.1-arm64-darwin)
       racc (~> 1.4)
+    nokogiri (1.12.1-x86_64-darwin)
+      racc (~> 1.4)
     nokogiri (1.12.1-x86_64-linux)
       racc (~> 1.4)
     pry (0.14.1)
@@ -160,6 +162,7 @@ GEM
 
 PLATFORMS
   arm64-darwin-20
+  x86_64-darwin-20
   x86_64-linux
 
 DEPENDENCIES

app/components/polaris/tag_component.html.erb

@@ -0,0 +1,6 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <span class="Polaris-TagText">
+    <%= content %>
+  </span>
+  <%= remove_button %>
+<% end %>

app/components/polaris/tag_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Polaris
+  class TagComponent < Polaris::NewComponent
+    renders_one :remove_button, lambda { |**system_arguments|
+      render Polaris::BaseButton.new(
+        classes: "Polaris-Tag__Button",
+        disabled: @disabled,
+        **system_arguments
+      ) do |button|
+        polaris_icon(name: "CancelSmallMinor")
+      end
+    }
+
+    def initialize(clickable: false, disabled: false, **system_arguments)
+      @clickable = clickable
+      @disabled = disabled
+
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = @clickable ? "button" : "span"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Tag",
+          "Polaris-Tag--clickable" => @clickable,
+          "Polaris-Tag--disabled" => @disabled,
+          "Polaris-Tag--removable" => remove_button.present?
+        )
+      end
+    end
+  end
+end

app/helpers/polaris/view_helper.rb

@@ -38,6 +38,7 @@ module ViewHelper
       subheading:               "Polaris::SubheadingComponent",
       spinner:                  "Polaris::SpinnerComponent",
       skeleton_body_text:       "Polaris::SkeletonBodyTextComponent",
+      tag:                      "Polaris::TagComponent",
       text_container:           "Polaris::TextContainerComponent",
       text_field:               "Polaris::TextFieldComponent",
       text_style:               "Polaris::TextStyleComponent",

demo/test/components/previews/forms/tag_component_preview.rb

@@ -0,0 +1,13 @@
+class Forms::TagComponentPreview < ViewComponent::Preview
+  def default
+  end
+
+  def disabled
+  end
+
+  def with_remove_button
+  end
+
+  def clickable
+  end
+end

demo/test/components/previews/forms/tag_component_preview/clickable.html.erb

@@ -0,0 +1 @@
+<%= polaris_tag(clickable: true) { "Rustic" } %>

demo/test/components/previews/forms/tag_component_preview/default.html.erb

@@ -0,0 +1 @@
+<%= polaris_tag { "Rustic" }  %>

demo/test/components/previews/forms/tag_component_preview/disabled.html.erb

@@ -0,0 +1 @@
+<%= polaris_tag(disabled: true) { "Rustic" } %>

demo/test/components/previews/forms/tag_component_preview/with_remove_button.html.erb

@@ -0,0 +1,4 @@
+<%= polaris_tag do |tag| %>
+  <% tag.remove_button(data: {}) %>
+  Rustic
+<% end %>

test/components/polaris/tag_component_test.rb

@@ -0,0 +1,39 @@
+require "test_helper"
+
+class ButtonComponentTest < Minitest::Test
+  include Polaris::ComponentTestHelpers
+
+  def test_default_tag
+    render_inline(Polaris::TagComponent.new) { "Content" }
+
+    assert_selector "span.Polaris-Tag" do
+      assert_selector "span.Polaris-TagText", text: "Content"
+    end
+  end
+
+  def test_disabled_tag
+    render_inline(Polaris::TagComponent.new(disabled: true)) { "Content" }
+    assert_selector "button.Polaris-Tag.Polaris-Tag--clickable"
+  end
+
+  def test_disabled_tag
+    render_inline(Polaris::TagComponent.new(disabled: true)) { "Content" }
+
+    assert_selector "span.Polaris-Tag.Polaris-Tag--disabled"
+  end
+
+  def test_with_removable_button
+    render_inline Polaris::TagComponent.new do |tag|
+      tag.remove_button(data: {})
+      "Content"
+    end
+
+    assert_selector "span.Polaris-Tag.Polaris-Tag--removable" do
+      assert_selector "button.Polaris-Tag__Button" do
+        assert_selector "span.Polaris-Icon"
+      end
+      assert_selector "span.Polaris-TagText", text: "Content"
+    end
+  end
+
+end