Add polaris_button_to helper

baoagency · Aug 16, 2021 · 8672aef · 8672aef
1 parent 8e69fd4
commit 8672aef
Show file tree

Hide file tree

Showing 12 changed files with 187 additions and 86 deletions.
diff --git a/app/components/polaris/button_component.html.erb b/app/components/polaris/button_component.html.erb
@@ -1,4 +1,4 @@
-<%= render Polaris::BaseComponent.new(tag: @tag, **dynamic_arguments) do %>
+<%= render Polaris::BaseComponent.new(tag: @tag, **system_arguments) do %>
   <span class="Polaris-Button__Content">
     <% if @loading %>
       <span class="Polaris-Button__Spinner">

diff --git a/app/components/polaris/button_component.rb b/app/components/polaris/button_component.rb
@@ -1,90 +1,6 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ButtonComponent < Polaris::NewComponent
-    SIZE_DEFAULT = :medium
-    SIZE_MAPPINGS = {
-      SIZE_DEFAULT => "",
-      :slim => "Polaris-Button--sizeSlim",
-      :large => "Polaris-Button--sizeLarge",
-    }
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-
-    TEXT_ALIGN_DEFAULT = :default
-    TEXT_ALIGN_MAPPINGS = {
-      TEXT_ALIGN_DEFAULT => "",
-      :left => "Polaris-Button--textAlignLeft",
-      :center => "Polaris-Button--textAlignCenter",
-      :right => "Polaris-Button--textAlignRight",
-    }
-    TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
-
-    renders_one :icon, IconComponent
-
-    def initialize(
-      url: nil,
-      outline: false,
-      plain: false,
-      primary: false,
-      pressed: false,
-      monochrome: false,
-      loading: false,
-      destructive: false,
-      disabled: false,
-      external: false,
-      full_width: false,
-      submit: false,
-      remove_underline: false,
-      size: SIZE_DEFAULT,
-      text_align: TEXT_ALIGN_DEFAULT,
-      **system_arguments
-    )
-      @tag = url.present? ? 'a' : 'button'
-      @text_classes = class_names(
-        "Polaris-Button__Text",
-        "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
-      )
-      @loading = loading
-
-      @system_arguments = system_arguments
-      @system_arguments[:type] = submit ? 'submit' : 'button'
-      if loading
-        @system_arguments[:disabled] = true
-      end
-      if url.present?
-        @system_arguments.delete(:type)
-        @system_arguments[:href] = url
-        @system_arguments[:target] = "_blank" if external
-      end
-      if disabled
-        @system_arguments[:disabled] = disabled
-      end
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Button",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
-        TEXT_ALIGN_MAPPINGS[fetch_or_fallback(TEXT_ALIGN_OPTIONS, text_align, TEXT_ALIGN_DEFAULT)],
-        "Polaris-Button--destructive": destructive,
-        "Polaris-Button--disabled": disabled || loading,
-        "Polaris-Button--loading": loading,
-        "Polaris-Button--fullWidth": full_width,
-        "Polaris-Button--monochrome": monochrome,
-        "Polaris-Button--outline": outline,
-        "Polaris-Button--plain": plain,
-        "Polaris-Button--primary": primary,
-        "Polaris-Button--pressed": pressed,
-        "Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
-      )
-    end
-
-    private
-
-    def dynamic_arguments
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Button--iconOnly": icon.present? && content.blank?,
-      )
-      @system_arguments
-    end
+  class ButtonComponent < HeadlessButton
   end
 end
diff --git a/app/components/polaris/headless_button.html.erb b/app/components/polaris/headless_button.html.erb
@@ -0,0 +1,22 @@
+<span class="Polaris-Button__Content">
+  <% if @loading %>
+    <span class="Polaris-Button__Spinner">
+      <%= polaris_spinner(size: :small) %>
+    </span>
+  <% end %>
+
+  <% if icon.present? %>
+    <div class="Polaris-Button__Icon">
+      <%= icon %>
+    </div>
+    <% if content.present? %>
+      &nbsp;
+    <% end %>
+  <% end %>
+
+  <% if content.present? %>
+    <div class="<%= @text_classes %>">
+      <%= content %>
+    </div>
+  <% end %>
+</span>
diff --git a/app/components/polaris/headless_button.rb b/app/components/polaris/headless_button.rb
@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Polaris
+  class HeadlessButton < Polaris::NewComponent
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      :slim => "Polaris-Button--sizeSlim",
+      :large => "Polaris-Button--sizeLarge",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    TEXT_ALIGN_DEFAULT = :default
+    TEXT_ALIGN_MAPPINGS = {
+      TEXT_ALIGN_DEFAULT => "",
+      :left => "Polaris-Button--textAlignLeft",
+      :center => "Polaris-Button--textAlignCenter",
+      :right => "Polaris-Button--textAlignRight",
+    }
+    TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
+
+    renders_one :icon, IconComponent
+
+    def initialize(
+      url: nil,
+      outline: false,
+      plain: false,
+      primary: false,
+      pressed: false,
+      monochrome: false,
+      loading: false,
+      destructive: false,
+      disabled: false,
+      external: false,
+      full_width: false,
+      submit: false,
+      remove_underline: false,
+      size: SIZE_DEFAULT,
+      text_align: TEXT_ALIGN_DEFAULT,
+      **system_arguments
+    )
+      @tag = url.present? ? 'a' : 'button'
+      @text_classes = class_names(
+        "Polaris-Button__Text",
+        "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
+      )
+      @loading = loading
+
+      @system_arguments = system_arguments
+      @system_arguments[:type] = submit ? 'submit' : 'button'
+      if loading
+        @system_arguments[:disabled] = true
+      end
+      if url.present?
+        @system_arguments.delete(:type)
+        @system_arguments[:href] = url
+        @system_arguments[:target] = "_blank" if external
+      end
+      if disabled
+        @system_arguments[:disabled] = disabled
+      end
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Button",
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        TEXT_ALIGN_MAPPINGS[fetch_or_fallback(TEXT_ALIGN_OPTIONS, text_align, TEXT_ALIGN_DEFAULT)],
+        "Polaris-Button--destructive": destructive,
+        "Polaris-Button--disabled": disabled || loading,
+        "Polaris-Button--loading": loading,
+        "Polaris-Button--fullWidth": full_width,
+        "Polaris-Button--monochrome": monochrome,
+        "Polaris-Button--outline": outline,
+        "Polaris-Button--plain": plain,
+        "Polaris-Button--primary": primary,
+        "Polaris-Button--pressed": pressed,
+        "Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
+      )
+    end
+
+    def system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Button--iconOnly": icon.present? && content.blank?,
+      )
+      @system_arguments
+    end
+
+    def html_options
+      options = system_arguments
+      options[:class] = options[:classes]
+      options.delete(:classes)
+      options
+    end
+  end
+end
diff --git a/app/helpers/polaris/url_helper.rb b/app/helpers/polaris/url_helper.rb
@@ -0,0 +1,19 @@
+module Polaris
+  module UrlHelper
+    def polaris_button_to(name = nil, options = nil, html_options = nil, &block)
+      html_options, options = options, name if block_given?
+      options      ||= {}
+      html_options ||= {}
+      html_options[:classes] = html_options[:class]
+      html_options.delete(:class)
+
+      button = Polaris::HeadlessButton.new(submit: true, **html_options)
+      button = button.with_content(name) unless block_given?
+      content = render(button, &block)
+
+      button_to(options, button.html_options) do
+        content
+      end
+    end
+  end
+end
diff --git a/demo/app/javascript/packs/application.js b/demo/app/javascript/packs/application.js
@@ -1 +1,4 @@
+import Rails from "@rails/ujs"
+Rails.start()
+
 import "controllers"
diff --git a/demo/package.json b/demo/package.json
@@ -2,6 +2,7 @@
   "name": "demo",
   "private": true,
   "dependencies": {
+    "@rails/ujs": "^6.1.4",
     "@rails/webpacker": "5.4.0",
     "polaris-view-components": "^0.1.0",
     "stimulus": "^2.0.0",

diff --git a/demo/test/components/previews/rails/helpers_component_preview.rb b/demo/test/components/previews/rails/helpers_component_preview.rb
@@ -0,0 +1,4 @@
+class Rails::HelpersComponentPreview < ViewComponent::Preview
+  def button_to
+  end
+end
diff --git a/demo/test/components/previews/rails/helpers_component_preview/button_to.html.erb b/demo/test/components/previews/rails/helpers_component_preview/button_to.html.erb
@@ -0,0 +1,18 @@
+<%= polaris_button_to("Delete", products_path,
+  method: :delete,
+  destructive: true,
+  data: {
+    confirm: "Are you sure?",
+  }
+) %>
+
+<br>
+
+<%= polaris_button_to(products_path,
+  method: :delete,
+  data: {
+    confirm: "Are you sure?",
+  }
+) do |button| %>
+  <% button.icon(name: "DeleteMinor") %>
+<% end %>
diff --git a/demo/yarn.lock b/demo/yarn.lock
@@ -893,6 +893,11 @@
     mkdirp "^1.0.4"
     rimraf "^3.0.2"
 
+"@rails/ujs@^6.1.4":
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/@rails/ujs/-/ujs-6.1.4.tgz#093d5341595a02089ed309dec40f3c37da7b1b10"
+  integrity sha512-O3lEzL5DYbxppMdsFSw36e4BHIlfz/xusynwXGv3l2lhSlvah41qviRpsoAlKXxl37nZAqK+UUF5cnGGK45Mfw==
+
 "@rails/webpacker@5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@rails/webpacker/-/webpacker-5.4.0.tgz#2c64a9ea7e85d2a33e50e86319fe6751df0c47e8"

diff --git a/lib/polaris/view_components/engine.rb b/lib/polaris/view_components/engine.rb
@@ -20,6 +20,7 @@ class Engine < ::Rails::Engine
       initializer "polaris_view_components.helpers" do
         ActiveSupport.on_load(:action_controller_base) do
           helper Polaris::ViewHelper
+          helper Polaris::UrlHelper
           helper Polaris::ActionHelper
           helper Polaris::ConditionalHelper
         end

diff --git a/test/helpers/polaris/url_helper_test.rb b/test/helpers/polaris/url_helper_test.rb
@@ -0,0 +1,17 @@
+require "test_helper"
+
+class Polaris::UrlHelperTest < ActionView::TestCase
+  test "polaris_button_to helper with name" do
+    assert_dom_equal(
+      %(<form class=\"button_to\" method=\"post\" action=\"/url\"><button data-controller=\"test\" type=\"submit\" class=\"Polaris-Button Polaris-Button--plain\"><span class=\"Polaris-Button__Content\">\n\n\n    <div class=\"Polaris-Button__Text\">\n      Name\n    </div>\n</span>\n</button></form>),
+      polaris_button_to("Name", "/url", plain: true, data: { controller: "test" })
+    )
+  end
+
+  test "polaris_button_to helper with block" do
+    assert_dom_equal(
+      %(<form class=\"button_to\" method=\"post\" action=\"/url\"><button type=\"submit\" class=\"TestClass Polaris-Button Polaris-Button--iconOnly\"><span class=\"Polaris-Button__Content\">\n\n    <div class=\"Polaris-Button__Icon\">\n      <span class=\"Polaris-Icon\">\n    <svg viewbox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\" class=\"Polaris-Icon__Svg\" focusable=\"false\" aria-hidden=\"true\"><path d=\"M8 3.994C8 2.893 8.895 2 10 2s2 .893 2 1.994h4c.552 0 1 .446 1 .997a1 1 0 0 1-1 .997H4c-.552 0-1-.447-1-.997s.448-.997 1-.997h4zM5 14.508V8h2v6.508a.5.5 0 0 0 .5.498H9V8h2v7.006h1.5a.5.5 0 0 0 .5-.498V8h2v6.508A2.496 2.496 0 0 1 12.5 17h-5C6.12 17 5 15.884 5 14.508z\"></path></svg>\n</span>\n    </div>\n\n</span>\n</button></form>),
+      polaris_button_to("/url", class: "TestClass") { |b| b.icon(name: "DeleteMinor") }
+    )
+  end
+end