polaris_view_components 0.3.1 → 0.5.0

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

@@ -0,0 +1,4 @@
+@import "@shopify/polaris/dist/styles.css";
+@import "./polaris_view_components/shopify_navigation.css";
+@import "./polaris_view_components/spacer_component.css";
+@import "./polaris_view_components/custom.css";

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

@@ -1,6 +1,4 @@
 class Polaris::Card::HeaderComponent < Polaris::NewComponent
-  include Polaris::ActionHelper
-
   def initialize(
     title: "",
     actions: [],

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/card_component.rb

@@ -2,8 +2,6 @@
 
 module Polaris
   class CardComponent < Polaris::NewComponent
-    include Polaris::ActionHelper
-
     FOOTER_ACTION_ALIGNMENT_DEFAULT = :right
     FOOTER_ACTION_ALIGNMENT_MAPPINGS = {
       FOOTER_ACTION_ALIGNMENT_DEFAULT => "",

data/app/components/polaris/data_table/cell_component.html.erb

@@ -0,0 +1,18 @@
+<% if @sort_url %>
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <%= link_to @sort_url, class: "Polaris-DataTable__Heading" do %>
+      <span class="Polaris-DataTable__Icon">
+        <% if @sorted == :asc %>
+          <%= polaris_icon(name: "CaretUpMinor") %>
+        <% else %>
+          <%= polaris_icon(name: "CaretDownMinor") %>
+        <% end %>
+      </span>
+      <%= content %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,49 @@
+class Polaris::DataTable::CellComponent < Polaris::NewComponent
+  ALIGNMENT_DEFAULT = :top
+  ALIGNMENT_MAPPINGS = {
+    top: "Polaris-DataTable__Cell--verticalAlignTop",
+    bottom: "Polaris-DataTable__Cell--verticalAlignBottom",
+    middle: "Polaris-DataTable__Cell--verticalAlignMiddle",
+    baseline: "Polaris-DataTable__Cell--verticalAlignBaseline",
+  }
+  ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
+
+  def initialize(
+    vertical_alignment:,
+    first: false,
+    numeric: false,
+    header: false,
+    total: false,
+    total_footer: false,
+    sorted: false,
+    sort_url: nil,
+    **system_arguments
+  )
+    @vertical_alignment = vertical_alignment
+    @numeric = numeric
+    @first = first
+    @header = header
+    @total = total
+    @total_footer = total_footer
+    @sorted = sorted
+    @sort_url = sort_url
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    { tag: "td" }.deep_merge(@system_arguments).tap do |args|
+      args[:classes] = class_names(
+        args[:classes],
+        "Polaris-DataTable__Cell",
+        ALIGNMENT_MAPPINGS[@vertical_alignment],
+        "Polaris-DataTable__Cell--firstColumn": @first,
+        "Polaris-DataTable__Cell--numeric": @numeric,
+        "Polaris-DataTable__Cell--header": @header,
+        "Polaris-DataTable__Cell--total": @total,
+        "Polaris-DataTable__Cell--sortable": @sort_url.present?,
+        "Polaris-DataTable__Cell--sorted": @sorted,
+        "Polaris-DataTable--cellTotalFooter": @total_footer,
+      )
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+class Polaris::DataTable::ColumnComponent < Polaris::NewComponent
+  SORT_DEFAULT = false
+  SORT_OPTIONS = [false, :asc, :desc]
+
+  attr_reader :title, :numeric, :total, :sorted, :sort_url
+
+  def initialize(title, numeric: false, total: nil, sorted: SORT_DEFAULT, sort_url: nil, **system_arguments, &block)
+    @title = title
+    @numeric = numeric
+    @total = total
+    @sorted = fetch_or_fallback(SORT_OPTIONS, sorted, SORT_DEFAULT)
+    @sort_url = sort_url
+    @block = block
+  end
+
+  def call(row)
+    @block.call(row)
+  end
+end

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

@@ -0,0 +1,77 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-DataTable__ScrollContainer">
+    <table class="Polaris-DataTable__Table">
+      <thead>
+        <tr>
+          <% columns.each_with_index do |column, index| %>
+            <%= render_cell(
+              first: index.zero?,
+              numeric: column.numeric,
+              tag: "th",
+              scope: "col",
+              header: true,
+              sort_url: column.sort_url,
+              sorted: column.sorted,
+            ) do %>
+              <%= column.title %>
+            <% end %>
+          <% end %>
+        </tr>
+        <% if @totals_in_header %>
+          <tr>
+            <% columns.each_with_index do |column, index| %>
+              <%= render_cell(
+                first: index.zero?,
+                numeric: column.numeric,
+                tag: (index.zero? ? "th" : "td"),
+                scope: ("row" if index.zero?),
+                total: true,
+              ) do %>
+                <%= column.total %>
+              <% end %>
+            <% end %>
+          </tr>
+        <% end %>
+      </thead>
+      <tbody>
+        <% @data.each do |row| %>
+          <tr class="Polaris-DataTable__TableRow <%= "Polaris-DataTable--hoverable" if @hoverable %>">
+            <% columns.each_with_index do |column, index| %>
+              <%= render_cell(
+                first: index.zero?,
+                numeric: column.numeric,
+                tag: (index.zero? ? "th" : "td"),
+                scope: ("row" if index.zero?),
+              ) do %>
+                <%= column.call(row) %>
+              <% end %>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+      <% if @totals_in_footer %>
+        <tfoot>
+          <tr>
+            <% columns.each_with_index do |column, index| %>
+              <%= render_cell(
+                first: index.zero?,
+                numeric: column.numeric,
+                tag: (index.zero? ? "th" : "td"),
+                scope: ("row" if index.zero?),
+                total: true,
+                total_footer: true,
+              ) do %>
+                <%= column.total %>
+              <% end %>
+            <% end %>
+          </tr>
+        </tfoot>
+      <% end %>
+    </table>
+  </div>
+  <% if footer.present? %>
+    <div class="Polaris-DataTable__Footer">
+      <%= footer %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/data_table_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Polaris
+  class DataTableComponent < Polaris::NewComponent
+    ALIGNMENT_DEFAULT = :top
+    ALIGNMENT_OPTIONS = [:top, :bottom, :middle, :baseline]
+
+    renders_many :columns, -> (title, **system_arguments, &block) do
+      DataTable::ColumnComponent.new(title, **system_arguments, &block)
+    end
+    renders_one :footer
+
+    def initialize(
+      data,
+      hoverable: true,
+      vertical_alignment: ALIGNMENT_DEFAULT,
+      totals_in_header: false,
+      totals_in_footer: false,
+      **system_arguments
+    )
+      @data = data
+      @hoverable = hoverable
+      @vertical_alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, vertical_alignment, ALIGNMENT_DEFAULT)
+      @totals_in_header = totals_in_header
+      @totals_in_footer = totals_in_footer
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      { tag: "div" }.deep_merge(@system_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-DataTable",
+        )
+      end
+    end
+
+    def render_cell(**arguments, &block)
+      render(DataTable::CellComponent.new(vertical_alignment: @vertical_alignment, **arguments), &block)
+    end
+  end
+end

data/app/components/polaris/dropzone/component.rb

@@ -3,8 +3,6 @@
 module Polaris
   module Dropzone
     class Component < Polaris::Component
-      include Polaris::ActionHelper
-
       ALLOWED_TYPES = %w[file image]
 
       validates :type, inclusion: { in: ALLOWED_TYPES, message: "%{value} is not a valid type" }

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

@@ -16,20 +16,22 @@
             <% end %>
           </div>
         <% end %>
-        <div class="Polaris-EmptyState__Actions">
-          <%= polaris_stack(spacing: :tight, distribution: :center, alignment: :center) do |stack| %>
-            <% if primary_action.present? %>
-              <% stack.item do %>
-                <%= primary_action %>
+        <% if primary_action.present? || secondary_action.present? %>
+          <div class="Polaris-EmptyState__Actions">
+            <%= polaris_stack(spacing: :tight, distribution: :center, alignment: :center) do |stack| %>
+              <% if primary_action.present? %>
+                <% stack.item do %>
+                  <%= primary_action %>
+                <% end %>
               <% end %>
-            <% end %>
-            <% if secondary_action.present? %>
-              <% stack.item do %>
-                <%= secondary_action %>
+              <% if secondary_action.present? %>
+                <% stack.item do %>
+                  <%= secondary_action %>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
         <% if footer.present? %>
           <div class="Polaris-EmptyState__FooterContent">
             <div class="Polaris-TextContainer">
@@ -44,4 +46,7 @@
       <img src="<%= @image %>" role="presentation" alt="" class="Polaris-EmptyState__Image">
     </div>
   </div>
+  <% if unsectioned_content.present? %>
+    <%= unsectioned_content %>
+  <% end %>
 <% end %>

data/app/components/polaris/empty_state_component.rb

@@ -14,6 +14,7 @@ module Polaris
     end
     renders_one :secondary_action, Polaris::ButtonComponent
     renders_one :footer
+    renders_one :unsectioned_content
 
     def initialize(
       image:,

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/layout/section.rb

@@ -11,6 +11,7 @@ module Polaris
         full_width: false,
         one_half: false,
         one_third: false,
+        one_fourth: false,
         **system_arguments
       )
         @position = position
@@ -24,6 +25,7 @@ module Polaris
           "Polaris-Layout__Section--fullWidth" => full_width,
           "Polaris-Layout__Section--oneHalf" => one_half,
           "Polaris-Layout__Section--oneThird" => one_third,
+          "Polaris-Layout__Section--oneFourth" => one_fourth,
         )
       end
 

data/app/components/polaris/link_component.rb

@@ -6,6 +6,7 @@ module Polaris
       url:,
       external: false,
       monochrome: false,
+      no_underline: false,
       **system_arguments
     )
       @url = url
@@ -23,13 +24,14 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Link",
         "Polaris-Link--monochrome" => monochrome,
+        "Polaris-Link--removeUnderline" => no_underline,
       )
     end
 
     def call
       render(Polaris::BaseComponent.new(**@system_arguments)) do
         safe_join [
-          content.strip,
+          content.strip.html_safe,
           (external_icon if @external),
         ].compact
       end

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