diff --git a/Gemfile.lock b/Gemfile.lock index 7f8dedc3..af82f794 100644 --- a/Gemfile.lock +++ b/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 diff --git a/app/components/polaris/tag_component.html.erb b/app/components/polaris/tag_component.html.erb new file mode 100644 index 00000000..813b609d --- /dev/null +++ b/app/components/polaris/tag_component.html.erb @@ -0,0 +1,6 @@ +<%= render Polaris::BaseComponent.new(**system_arguments) do %> + + <%= content %> + + <%= remove_button %> +<% end %> diff --git a/app/components/polaris/tag_component.rb b/app/components/polaris/tag_component.rb new file mode 100644 index 00000000..9da033e6 --- /dev/null +++ b/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 diff --git a/app/helpers/polaris/view_helper.rb b/app/helpers/polaris/view_helper.rb index 8decc66c..ddb6e479 100644 --- a/app/helpers/polaris/view_helper.rb +++ b/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", diff --git a/demo/test/components/previews/forms/tag_component_preview.rb b/demo/test/components/previews/forms/tag_component_preview.rb new file mode 100644 index 00000000..bf23984e --- /dev/null +++ b/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 diff --git a/demo/test/components/previews/forms/tag_component_preview/clickable.html.erb b/demo/test/components/previews/forms/tag_component_preview/clickable.html.erb new file mode 100644 index 00000000..c4eb29fa --- /dev/null +++ b/demo/test/components/previews/forms/tag_component_preview/clickable.html.erb @@ -0,0 +1 @@ +<%= polaris_tag(clickable: true) { "Rustic" } %> diff --git a/demo/test/components/previews/forms/tag_component_preview/default.html.erb b/demo/test/components/previews/forms/tag_component_preview/default.html.erb new file mode 100644 index 00000000..565a8116 --- /dev/null +++ b/demo/test/components/previews/forms/tag_component_preview/default.html.erb @@ -0,0 +1 @@ +<%= polaris_tag { "Rustic" } %> diff --git a/demo/test/components/previews/forms/tag_component_preview/disabled.html.erb b/demo/test/components/previews/forms/tag_component_preview/disabled.html.erb new file mode 100644 index 00000000..7847bb24 --- /dev/null +++ b/demo/test/components/previews/forms/tag_component_preview/disabled.html.erb @@ -0,0 +1 @@ +<%= polaris_tag(disabled: true) { "Rustic" } %> diff --git a/demo/test/components/previews/forms/tag_component_preview/with_remove_button.html.erb b/demo/test/components/previews/forms/tag_component_preview/with_remove_button.html.erb new file mode 100644 index 00000000..e41d34ba --- /dev/null +++ b/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 %> diff --git a/test/components/polaris/tag_component_test.rb b/test/components/polaris/tag_component_test.rb new file mode 100644 index 00000000..72ef42b5 --- /dev/null +++ b/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