polaris_view_components 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4b8966c0866f8b002c720f0dd8578f825a9abf64753ead41dcdf84150dd24f8c
-  data.tar.gz: 9fb7b270e5fbe102a79342462795b472ac4849d412431d5990fc0bf17ab9aef1
+  metadata.gz: 5fa1e7b371df5781aea68bbf2be3d7872fc4d704076c48473039b23850440332
+  data.tar.gz: 647c10b9000fd7de97977497aaf910d02abb3f692fb563e3f1166b73c88a02e8
 SHA512:
-  metadata.gz: 5078ffd0ee20e1df92e5373ab423fb740ae046596b960322b263ec02a2938a082db91ce92b96639257cc7702de321c561f3c8621caa404bdc0246f0de837e021
-  data.tar.gz: 6568cc0c13ccee2a3a94a2b3308bd546d5fe32c20e1742699999698ef02db79938f717e20fc64ad71867ff1eba8720b4be2d88682ecff459f13221e6ecda107d
+  metadata.gz: 6364ad7a248ef54858f7f8700360468ffc7954bf7035907227c0acb666ff1f0cc554c02bebbba961d57a4c30581b576035221b34a1345c639e18d6b46c1a10be
+  data.tar.gz: 249ff1b9089d7907d6ef290801a410dbf7e37aaf1fe238750e3cb5283d9b0bb1b157642bae870f8a8599e383a332aca20df630f9411a06404a37530ab7176181

data/README.md

@@ -2,6 +2,8 @@
 
 Polaris ViewComponents is an implementation of the Polaris Design System using [ViewComponent](https://github.com/github/view_component).
 
+![Polaris ViewComponents](.github/assets/preview.png)
+
 > **This library is under active development. Breaking changes are likely until stable release.**
 
 ## Preview

data/app/assets/javascripts/polaris.js

@@ -14,6 +14,19 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+class _class$2 extends Controller {
+  open(event) {
+    if (this.hasLinkTarget && this.targetNotClickable(event.target)) {
+      this.linkTarget.click();
+    }
+  }
+  targetNotClickable(element) {
+    return !element.closest("a") && !element.closest("button") && element.nodeName !== "INPUT";
+  }
+}
+
+_defineProperty(_class$2, "targets", [ "link" ]);
+
 class _class$1 extends Controller {
   update(event) {
     const select = event.currentTarget;
@@ -106,8 +119,9 @@ _defineProperty(_class, "values", {
 });
 
 function registerPolarisControllers(application) {
+  application.register("polaris-resource-item", _class$2);
   application.register("polaris-select", _class$1);
   application.register("polaris-text-field", _class);
 }
 
-export { _class$1 as Select, _class as TextField, registerPolarisControllers };
+export { _class$2 as ResourceItem, _class$1 as Select, _class as TextField, registerPolarisControllers };

data/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">

data/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

data/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>

data/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

data/app/components/polaris/resource_item_component.html.erb

@@ -1,15 +1,16 @@
-<%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
   <div class="Polaris-ResourceItem__ItemWrapper">
-    <div class="Polaris-ResourceItem" style="cursor: <%= @cursor %>;">
+    <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
       <% if @url %>
         <a
           class="Polaris-ResourceItem__Link"
           tabindex="0"
           href="<%= @url %>"
-          data-polaris-unstyled="true"></a>
+          data-polaris-unstyled="true"
+          data-polaris-resource-item-target="link"></a>
       <% end %>
 
-      <%= render(Polaris::BaseComponent.new(**@container_arguments)) do %>
+      <%= render(Polaris::BaseComponent.new(**container_arguments)) do %>
         <% if media.present? %>
           <div class="Polaris-ResourceItem__Owned">
             <div class="Polaris-ResourceItem__Media">
@@ -21,6 +22,6 @@
           <%= content %>
         </div>
       <% end %>
-    </div>
+    <% end %>
   </div>
 <% end %>

data/app/components/polaris/resource_item_component.rb

@@ -16,27 +16,60 @@ module Polaris
 
     def initialize(
       url: nil,
-      cursor: CURSOR_DEFAULT,
       vertical_alignment: ALIGNMENT_DEFAULT,
+      wrapper_arguments: {},
+      container_arguments: {},
       **system_arguments
     )
       @url = url
-      @cursor = fetch_or_fallback(CURSOR_OPTIONS, cursor, CURSOR_DEFAULT)
-
+      @vertical_alignment = vertical_alignment
+      @wrapper_arguments = wrapper_arguments
+      @container_arguments = container_arguments
       @system_arguments = system_arguments
-      @system_arguments[:tag] = "li"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-ResourceItem__ListItem",
-      )
+    end
+
+    def wrapper_arguments
+      {
+        tag: "li",
+        data: {},
+      }.deep_merge(@wrapper_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-ResourceItem__ListItem",
+        )
+        prepend_option(args[:data], :controller, "polaris-resource-item")
+      end
+    end
 
-      @container_arguments = {
+    def container_arguments
+      {
         tag: "div",
-        classes: class_names(
+      }.deep_merge(@container_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
           "Polaris-ResourceItem__Container",
-          ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, vertical_alignment, ALIGNMENT_DEFAULT)],
+          ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)],
         )
-      }
+      end
     end
+
+    def system_arguments
+      {
+        tag: "div",
+        data: {},
+      }.deep_merge(@system_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-ResourceItem",
+        )
+        prepend_option(args, :style, "cursor: #{cursor};")
+        prepend_option(args[:data], :action, "click->polaris-resource-item#open")
+      end
+    end
+
+    private
+      def cursor
+        @url.present? ? "pointer" : "default"
+      end
   end
 end

data/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

data/app/javascript/polaris/index.js

@@ -1,9 +1,11 @@
+import ResourceItem from './resource_item_controller'
 import Select from './select_controller'
 import TextField from './text_field_controller'
 
-export { Select, TextField }
+export { ResourceItem, Select, TextField }
 
 export function registerPolarisControllers(application) {
+  application.register('polaris-resource-item', ResourceItem)
   application.register('polaris-select', Select)
   application.register('polaris-text-field', TextField)
 }

data/app/javascript/polaris/resource_item_controller.js

@@ -0,0 +1,15 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static targets = ['link']
+
+  open(event) {
+    if (this.hasLinkTarget && this.targetNotClickable(event.target)) {
+      this.linkTarget.click()
+    }
+  }
+
+  targetNotClickable(element) {
+    return !element.closest('a') && !element.closest('button') && element.nodeName !== "INPUT"
+  }
+}

data/app/javascript/polaris/text_field_controller.js

@@ -99,7 +99,6 @@ export default class extends Controller {
 
     // Making sure the new value has the same length of decimal places as the
     // step / value has.
-    console.log(numericValue, this.stepValue)
     const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue))
 
     const newValue = Math.min(

data/lib/polaris/view_components/engine.rb

@@ -20,6 +20,7 @@ module Polaris
       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

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.1.2"
+    VERSION = "0.1.3"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-12 00:00:00.000000000 Z
+date: 2021-08-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -503,6 +503,8 @@ files:
 - app/components/polaris/form_layout_component.html.erb
 - app/components/polaris/form_layout_component.rb
 - app/components/polaris/heading_component.rb
+- app/components/polaris/headless_button.html.erb
+- app/components/polaris/headless_button.rb
 - app/components/polaris/icon_component.html.erb
 - app/components/polaris/icon_component.rb
 - app/components/polaris/inline_error_component.html.erb
@@ -555,8 +557,10 @@ files:
 - app/helpers/polaris/fetch_or_fallback_helper.rb
 - app/helpers/polaris/form_builder.rb
 - app/helpers/polaris/option_helper.rb
+- app/helpers/polaris/url_helper.rb
 - app/helpers/polaris/view_helper.rb
 - app/javascript/polaris/index.js
+- app/javascript/polaris/resource_item_controller.js
 - app/javascript/polaris/select_controller.js
 - app/javascript/polaris/text_field_controller.js
 - app/validators/type_validator.rb