polaris_view_components 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 848460847dd95a9b22891491c48d9bbf9091a0a6eda013c4a724ca5d3648b19f
-  data.tar.gz: 4e034a365bfccb0d6b1cda9ff3663850fdde1af80a490f768bbce2d4fffe8603
+  metadata.gz: a4ecf6c373c0c3a1188d677df7da49034a9094392ce74b0bac9e72780b1a851a
+  data.tar.gz: 836ebef4a9e97c359d4bf36e4ae497d673a6579de232c0a82f6cf12d4f33e3d9
 SHA512:
-  metadata.gz: f15c1073c23e0a785c8187f98bfa420bea87ffb89d29cf3b8123c957a375f09ef090035b94a0aba12119d31ce17ce5706683164b08bb1ac75cb7e7f63d085d14
-  data.tar.gz: 6381bba31617b45462489f46013300418c3a0bb4f54e2ddea75edfc7e8320927d8c0b3f715d415b7db4a262e8157ba22d949d0ed9a6a6e00a06ab19737adb098
+  metadata.gz: add02e909f36a997d49d261b3960ad41636001dbb4a6beea5f1652a7bfadab94d9bb2e07cefc5618f652bbdd431934ceb11da59388d0523d75686bbdddc7723e
+  data.tar.gz: cdd86e17c2a970aae8e5fec22cb296eae4cd1df572dee371978d0b02450cf6185c30c5a891db0943b62f1f114b593a2a3e890840362c1c1efc9da6087c663dd7

data/app/assets/javascripts/polaris_view_components/select_controller.js

@@ -1,12 +1,14 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ['selectedOption']
+  static targets = ["select", "selectedOption"]
 
-  update(event) {
-    const select = event.currentTarget
-    const option = select.options[select.selectedIndex]
+  connect() {
+    this.update()
+  }
 
+  update() {
+    const option = this.selectTarget.options[this.selectTarget.selectedIndex]
     this.selectedOptionTarget.innerText = option.text
   }
 }

data/app/assets/javascripts/polaris_view_components.js

@@ -13,10 +13,12 @@ class ResourceItem extends Controller {
 }
 
 class Select extends Controller {
-  static targets=[ "selectedOption" ];
-  update(event) {
-    const select = event.currentTarget;
-    const option = select.options[select.selectedIndex];
+  static targets=[ "select", "selectedOption" ];
+  connect() {
+    this.update();
+  }
+  update() {
+    const option = this.selectTarget.options[this.selectTarget.selectedIndex];
     this.selectedOptionTarget.innerText = option.text;
   }
 }

data/app/assets/stylesheets/polaris_view_components/custom.css

@@ -16,3 +16,28 @@ a.Polaris-Tag__Button {
 .Polaris-DataTable__Cell--sortable a {
   text-decoration: none;
 }
+
+/* CardSection borders */
+.Polaris-Card__Section--borderTop {
+  border-top: 0.1rem solid var(--p-divider);
+}
+.Polaris-Card__Section--borderBottom {
+  border-bottom: 0.1rem solid var(--p-divider);
+}
+
+/* IndexTable */
+
+/* TODO: Remove after upgrade to Polaris 7.0.0 */
+.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--unclickable {
+  cursor: auto;
+}
+
+/* TestStyle sizes */
+.Polaris-TextStyle--sizeSmall {
+  font-size: 1.25rem;
+}
+
+/* Remove box-shadow from buttons and links */
+.Polaris-Button::after, .Polaris-Button:focus::after, .Polaris-Breadcrumbs__Breadcrumb::after {
+  box-shadow: none !important;
+}

data/app/assets/stylesheets/polaris_view_components/shopify_navigation.css

@@ -106,10 +106,6 @@
   border-bottom: .3rem solid var(--p-action-primary)
 }
 
-.shp-Navigation_Link:focus {
-  box-shadow: inset 0 0 2px 0 rgba(92, 106, 196, .8), 0 0 2px 0 rgba(92, 106, 196, .8)
-}
-
 .shp-Navigation_Link:focus .shp-Navigation_LinkText {
   font-weight: 400;
   color: var(--p-text)

data/app/assets/stylesheets/polaris_view_components.css

@@ -2119,9 +2119,6 @@ html, body{ min-height:100%; height:100%; }
   text-decoration: none;
   border-bottom: .3rem solid var(--p-action-primary)
 }
-.shp-Navigation_Link:focus {
-  box-shadow: inset 0 0 2px 0 rgba(92, 106, 196, .8), 0 0 2px 0 rgba(92, 106, 196, .8)
-}
 .shp-Navigation_Link:focus .shp-Navigation_LinkText {
   font-weight: 400;
   color: var(--p-text)
@@ -2195,3 +2192,23 @@ a.Polaris-Tag__Button {
 .Polaris-DataTable__Cell--sortable a {
   text-decoration: none;
 }
+/* CardSection borders */
+.Polaris-Card__Section--borderTop {
+  border-top: 0.1rem solid var(--p-divider);
+}
+.Polaris-Card__Section--borderBottom {
+  border-bottom: 0.1rem solid var(--p-divider);
+}
+/* IndexTable */
+/* TODO: Remove after upgrade to Polaris 7.0.0 */
+.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--unclickable {
+  cursor: auto;
+}
+/* TestStyle sizes */
+.Polaris-TextStyle--sizeSmall {
+  font-size: 1.25rem;
+}
+/* Remove box-shadow from buttons and links */
+.Polaris-Button::after, .Polaris-Button:focus::after, .Polaris-Breadcrumbs__Breadcrumb::after {
+  box-shadow: none !important;
+}

data/app/components/polaris/card/section_component.rb

@@ -7,6 +7,8 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
     flush: false,
     full_width: false,
     unstyled: false,
+    border_top: false,
+    border_bottom: false,
     actions: [],
     **system_arguments
   )
@@ -14,10 +16,12 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
     @system_arguments[:tag] = :div
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
+      "Polaris-Card__Section": !unstyled,
       "Polaris-Card__Section--flush": flush,
       "Polaris-Card__Section--subdued": subdued,
       "Polaris-Card__Section--fullWidth": full_width,
-      "Polaris-Card__Section": !unstyled,
+      "Polaris-Card__Section--borderTop": border_top,
+      "Polaris-Card__Section--borderBottom": border_bottom,
     )
 
     @title = title

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

@@ -0,0 +1,13 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
+    <div class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right">
+      <% if query.present? %>
+        <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
+          <div class="Polaris-Filters-ConnectedFilterControl__Item">
+            <%= query %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/filters_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Polaris
+  class FiltersComponent < Polaris::NewComponent
+    renders_one :query, "QueryComponent"
+
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Filters",
+        )
+      end
+    end
+
+    class QueryComponent < Polaris::NewComponent
+      def initialize(clear_button: true, **system_arguments)
+        @system_arguments = system_arguments.merge(
+          label_hidden: true,
+          clear_button: clear_button,
+        )
+      end
+
+      def call
+        polaris_text_field(**@system_arguments) do |text_field|
+          text_field.prefix do
+            polaris_icon(name: "SearchMinor")
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/polaris/index_table/cell_component.rb

@@ -0,0 +1,22 @@
+class Polaris::IndexTable::CellComponent < Polaris::NewComponent
+  def initialize(flush: false, **system_arguments)
+    @flush = flush
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    { tag: "td" }.deep_merge(@system_arguments).tap do |args|
+      args[:classes] = class_names(
+        args[:classes],
+        "Polaris-IndexTable__TableCell",
+        "Polaris-IndexTable__TableCell--flush": @flush,
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**system_arguments)) do
+      content
+    end
+  end
+end

data/app/components/polaris/index_table/column_component.rb

@@ -0,0 +1,13 @@
+class Polaris::IndexTable::ColumnComponent < Polaris::NewComponent
+  attr_reader :title, :flush
+
+  def initialize(title, flush: false, **system_arguments, &block)
+    @title = title
+    @flush = flush
+    @block = block
+  end
+
+  def call(row)
+    @block.call(row)
+  end
+end

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

@@ -0,0 +1,28 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-IndexTable-ScrollContainer">
+    <table class="Polaris-IndexTable__Table">
+      <thead>
+        <tr>
+          <% columns.each_with_index do |column, index| %>
+            <th class="Polaris-IndexTable__TableHeading">
+              <%= column.title %>
+            </th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% @data.each do |row| %>
+          <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
+            <% columns.each_with_index do |column, index| %>
+              <%= render_cell(
+                flush: column.flush,
+              ) do %>
+                <%= column.call(row) %>
+              <% end %>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/app/components/polaris/index_table_component.rb

@@ -0,0 +1,25 @@
+module Polaris
+  class IndexTableComponent < Polaris::NewComponent
+    renders_many :columns, -> (title, **system_arguments, &block) do
+      IndexTable::ColumnComponent.new(title, **system_arguments, &block)
+    end
+
+    def initialize(data, **system_arguments)
+      @data = data
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      { tag: "div" }.deep_merge(@system_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-IndexTable",
+        )
+      end
+    end
+
+    def render_cell(**arguments, &block)
+      render(IndexTable::CellComponent.new(**arguments), &block)
+    end
+  end
+end

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

@@ -1,6 +1,6 @@
-<div class="Polaris-InlineError">
+<%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
   <div class="Polaris-InlineError__Icon">
     <%= polaris_icon(name: "AlertMinor") %>
   </div>
   <%= content %>
-</div>
+<% end %>

data/app/components/polaris/inline_error_component.rb

@@ -2,7 +2,13 @@
 
 module Polaris
   class InlineErrorComponent < Polaris::NewComponent
-    def initialize
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-InlineError",
+      )
     end
 
     def renders?

data/app/components/polaris/page_actions_component.rb

@@ -2,12 +2,24 @@
 
 module Polaris
   class PageActionsComponent < Polaris::NewComponent
+    DISTRIBUTION_DEFAULT = nil
+    DISTRIBUTION_OPTIONS = [
+      DISTRIBUTION_DEFAULT,
+      :equal_spacing,
+      :leading,
+      :trailing,
+      :center,
+      :fill,
+      :fill_evenly,
+    ]
+
     renders_one :primary_action, -> (primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
     renders_many :secondary_actions, Polaris::ButtonComponent
 
-    def initialize(**system_arguments)
+    def initialize(distribution: DISTRIBUTION_DEFAULT, **system_arguments)
+      @distribution = fetch_or_fallback(DISTRIBUTION_OPTIONS, distribution, DISTRIBUTION_DEFAULT)
       @system_arguments = system_arguments
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
@@ -18,6 +30,8 @@ module Polaris
 
     private
       def stack_distribution
+        return @distribution if @distribution.present?
+
         (primary_action.present? && secondary_actions.any?) ? :equal_spacing : :trailing
       end
   end

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

@@ -0,0 +1,10 @@
+<%= render(Polaris::BaseComponent.new(**@wrapper_arguments)) do %>
+  <% if filters.present? %>
+    <div class="Polaris-ResourceList__FiltersWrapper">
+      <%= filters %>
+    </div>
+  <% end %>
+  <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/polaris/resource_list_component.rb

@@ -2,6 +2,8 @@
 
 module Polaris
   class ResourceListComponent < Polaris::NewComponent
+    renders_one :filters, Polaris::FiltersComponent
+
     def initialize(
       wrapper_arguments: {},
       **system_arguments
@@ -20,13 +22,5 @@ module Polaris
         "Polaris-ResourceList",
       )
     end
-
-    def call
-      render(Polaris::BaseComponent.new(**@wrapper_arguments)) do
-        render(Polaris::BaseComponent.new(**@system_arguments)) do
-          content
-        end
-      end
-    end
   end
 end

data/app/components/polaris/select_component.rb

@@ -37,6 +37,7 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:data] ||= {}
       prepend_option(@system_arguments[:data], :controller, "polaris-select")
+      prepend_option(@system_arguments[:data], :selected_value, @selected)
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Select",
@@ -56,12 +57,14 @@ module Polaris
         error: error,
       }.merge(wrapper_arguments)
 
-      @select_options = {}
+      @select_options = select_options
 
       @input_options = input_options
+      @input_options.deep_merge!(select_options) unless @form
       @input_options[:class] = class_names(@input_options[:classes], "Polaris-Select__Input")
       @input_options[:disabled] = disabled
       @input_options[:data] ||= {}
+      prepend_option(@input_options[:data], :polaris_select_target, "select")
       prepend_option(@input_options[:data], :action, "polaris-select#update")
     end
 
@@ -71,7 +74,9 @@ module Polaris
 
     def selected_option
       option = @options.to_a.find { |i| i.last.to_s == @selected.to_s }
-      option ? option.first : @options.first.first
+      return unless option
+
+      option.first
     end
   end
 end

data/app/components/polaris/text_style_component.rb

@@ -13,8 +13,16 @@ module Polaris
     }
     VARIATION_OPTIONS = VARIATION_MAPPINGS.keys
 
+    SIZE_DEFAULT = :default
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      small: "Polaris-TextStyle--sizeSmall",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
     def initialize(
       variation: VARIATION_DEFAULT,
+      size: SIZE_DEFAULT,
       **system_arguments
     )
       @system_arguments = system_arguments
@@ -22,6 +30,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         VARIATION_MAPPINGS[fetch_or_fallback(VARIATION_OPTIONS, variation, VARIATION_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
       )
     end
 

data/app/helpers/polaris/form_builder.rb

@@ -16,7 +16,7 @@ module Polaris
       ) do
         render(Polaris::ListComponent.new) do |list|
           object.errors.each do |error|
-            list.item { error.full_message }
+            list.item { error.full_message.html_safe }
           end
         end
       end
@@ -26,7 +26,16 @@ module Polaris
       return if object.blank?
       return unless object.errors.key?(method)
 
-      object.errors.full_messages_for(method)&.first
+      object.errors.full_messages_for(method)&.first.html_safe
+    end
+
+    def polaris_inline_error_for(method, **options, &block)
+      error_message = error_for(method)
+      return unless error_message
+
+      render(Polaris::InlineErrorComponent.new(**options, &block)) do
+        error_message
+      end
     end
 
     def polaris_text_field(method, **options, &block)
@@ -48,5 +57,21 @@ module Polaris
       end
       render Polaris::SelectComponent.new(form: self, attribute: method, **options, &block)
     end
+
+    def polaris_check_box(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      render Polaris::CheckboxComponent.new(form: self, attribute: method, **options, &block)
+    end
+
+    def polaris_radio_button(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      render Polaris::RadioButtonComponent.new(form: self, attribute: method, **options, &block)
+    end
   end
 end

data/app/helpers/polaris/view_helper.rb

@@ -1,7 +1,7 @@
 module Polaris
   # Module to allow shorthand calls for Polaris components
   module ViewHelper
-    HELPERS = {
+    POLARIS_HELPERS = {
       avatar:                   "Polaris::AvatarComponent",
       badge:                    "Polaris::BadgeComponent",
       banner:                   "Polaris::BannerComponent",
@@ -10,7 +10,9 @@ module Polaris
       callout_card:             "Polaris::CalloutCardComponent",
       caption:                  "Polaris::CaptionComponent",
       card:                     "Polaris::CardComponent",
+      card_section:             "Polaris::Card::SectionComponent",
       checkbox:                 "Polaris::CheckboxComponent",
+      check_box:                "Polaris::CheckboxComponent",
       choice_list:              "Polaris::ChoiceListComponent",
       data_table:               "Polaris::DataTableComponent",
       description_list:         "Polaris::DescriptionListComponent",
@@ -20,8 +22,10 @@ module Polaris
       exception_list:           "Polaris::ExceptionListComponent",
       footer_help:              "Polaris::FooterHelpComponent",
       form_layout:              "Polaris::FormLayoutComponent",
+      filters:                  "Polaris::FiltersComponent",
       heading:                  "Polaris::HeadingComponent",
       icon:                     "Polaris::IconComponent",
+      index_table:              "Polaris::IndexTableComponent",
       inline_error:             "Polaris::InlineErrorComponent",
       layout:                   "Polaris::LayoutComponent",
       link:                     "Polaris::LinkComponent",
@@ -47,13 +51,19 @@ module Polaris
       thumbnail:                "Polaris::ThumbnailComponent",
       visually_hidden:          "Polaris::VisuallyHiddenComponent",
     }.freeze
-
-    HELPERS.each do |name, component|
+    POLARIS_HELPERS.each do |name, component|
       define_method "polaris_#{name}" do |*args, **kwargs, &block|
         render component.constantize.new(*args, **kwargs), &block
       end
     end
 
+    POLARIS_TEXT_STYLES = %i[subdued strong positive negative code].freeze
+    POLARIS_TEXT_STYLES.each do |name|
+      define_method "polaris_text_#{name}" do |**kwargs, &block|
+        polaris_text_style(variation: name, **kwargs, &block)
+      end
+    end
+
     def polaris_icon_source(name)
       path = ViewComponents::Engine.root.join("app", "assets", "icons", "polaris", "#{name}.svg")
       file = File.read(path)

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.4.0"
+    VERSION = "0.5.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-13 00:00:00.000000000 Z
+date: 2021-10-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -506,6 +506,8 @@ files:
 - app/components/polaris/exception_list/item_component.rb
 - app/components/polaris/exception_list_component.html.erb
 - app/components/polaris/exception_list_component.rb
+- app/components/polaris/filters_component.html.erb
+- app/components/polaris/filters_component.rb
 - app/components/polaris/footer_help_component.html.erb
 - app/components/polaris/footer_help_component.rb
 - app/components/polaris/form_layout/group_component.html.erb
@@ -518,6 +520,10 @@ files:
 - app/components/polaris/headless_button.rb
 - app/components/polaris/icon_component.html.erb
 - app/components/polaris/icon_component.rb
+- app/components/polaris/index_table/cell_component.rb
+- app/components/polaris/index_table/column_component.rb
+- app/components/polaris/index_table_component.html.erb
+- app/components/polaris/index_table_component.rb
 - app/components/polaris/inline_error_component.html.erb
 - app/components/polaris/inline_error_component.rb
 - app/components/polaris/label_component.html.erb
@@ -545,6 +551,7 @@ files:
 - app/components/polaris/radio_button_component.rb
 - app/components/polaris/resource_item_component.html.erb
 - app/components/polaris/resource_item_component.rb
+- app/components/polaris/resource_list_component.html.erb
 - app/components/polaris/resource_list_component.rb
 - app/components/polaris/select_component.html.erb
 - app/components/polaris/select_component.rb