polaris_view_components 0.3.0 → 0.4.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_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/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/spacer_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Polaris
+  class SpacerComponent < Polaris::NewComponent
+    VERTICAL_SPACING_DEFAULT = :default
+    VERTICAL_SPACING_MAPPINGS = {
+      VERTICAL_SPACING_DEFAULT => "",
+      :extra_tight => "Polaris-Spacer--verticalSpacingExtraTight",
+      :tight => "Polaris-Spacer--verticalSpacingTight",
+      :base_tight => "Polaris-Spacer--verticalSpacingBaseTight",
+      :base => "Polaris-Spacer--verticalSpacingBase",
+      :loose => "Polaris-Spacer--verticalSpacingLoose",
+      :extra_loose => "Polaris-Spacer--verticalSpacingExtraLoose",
+    }
+    VERTICAL_SPACING_OPTIONS = VERTICAL_SPACING_MAPPINGS.keys
+
+    HORIZONTAL_SPACING_DEFAULT = :default
+    HORIZONTAL_SPACING_MAPPINGS = {
+      HORIZONTAL_SPACING_DEFAULT => "",
+      :extra_tight => "Polaris-Spacer--horizontalSpacingExtraTight",
+      :tight => "Polaris-Spacer--horizontalSpacingTight",
+      :base_tight => "Polaris-Spacer--horizontalSpacingBaseTight",
+      :base => "Polaris-Spacer--horizontalSpacingBase",
+      :loose => "Polaris-Spacer--horizontalSpacingLoose",
+      :extra_loose => "Polaris-Spacer--horizontalSpacingExtraLoose",
+    }
+    HORIZONTAL_SPACING_OPTIONS = HORIZONTAL_SPACING_MAPPINGS.keys
+
+    def initialize(
+      vertical: VERTICAL_SPACING_DEFAULT,
+      horizontal: HORIZONTAL_SPACING_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Spacer",
+        VERTICAL_SPACING_MAPPINGS[fetch_or_fallback(VERTICAL_SPACING_OPTIONS, vertical, VERTICAL_SPACING_DEFAULT)],
+        HORIZONTAL_SPACING_MAPPINGS[fetch_or_fallback(HORIZONTAL_SPACING_OPTIONS, horizontal, HORIZONTAL_SPACING_DEFAULT)],
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) do
+        content
+      end
+    end
+  end
+end

data/app/components/polaris/stack_component.rb

@@ -21,7 +21,7 @@ module Polaris
       :trailing => "Polaris-Stack--distributionTrailing",
       :center => "Polaris-Stack--distributionCenter",
       :fill => "Polaris-Stack--distributionFill",
-      :fill_evently => "Polaris-Stack--distributionFillEvenly",
+      :fill_evenly => "Polaris-Stack--distributionFillEvenly",
     }
     DISTRIBUTION_OPTIONS = DISTRIBUTION_MAPPINGS.keys
 

data/app/components/polaris/tag_component.rb

@@ -2,7 +2,7 @@
 
 module Polaris
   class TagComponent < Polaris::NewComponent
-    renders_one :remove_button, lambda { |**system_arguments|
+    renders_one :remove_button, -> (**system_arguments) do
       render Polaris::BaseButton.new(
         classes: "Polaris-Tag__Button",
         disabled: @disabled,
@@ -10,7 +10,7 @@ module Polaris
       ) do |button|
         polaris_icon(name: "CancelSmallMinor")
       end
-    }
+    end
 
     def initialize(clickable: false, disabled: false, **system_arguments)
       @clickable = clickable

data/app/helpers/polaris/view_helper.rb

@@ -12,6 +12,7 @@ module Polaris
       card:                     "Polaris::CardComponent",
       checkbox:                 "Polaris::CheckboxComponent",
       choice_list:              "Polaris::ChoiceListComponent",
+      data_table:               "Polaris::DataTableComponent",
       description_list:         "Polaris::DescriptionListComponent",
       display_text:             "Polaris::DisplayTextComponent",
       dropzone:                 "Polaris::Dropzone::Component",
@@ -38,6 +39,7 @@ module Polaris
       subheading:               "Polaris::SubheadingComponent",
       spinner:                  "Polaris::SpinnerComponent",
       skeleton_body_text:       "Polaris::SkeletonBodyTextComponent",
+      spacer:                   "Polaris::SpacerComponent",
       tag:                      "Polaris::TagComponent",
       text_container:           "Polaris::TextContainerComponent",
       text_field:               "Polaris::TextFieldComponent",

data/lib/polaris/view_components/engine.rb

@@ -23,7 +23,6 @@ module Polaris
         ActiveSupport.on_load(:action_controller_base) do
           helper Polaris::ViewHelper
           helper Polaris::UrlHelper
-          helper Polaris::ActionHelper
           helper Polaris::ConditionalHelper
         end
       end

data/lib/polaris/view_components/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polaris_view_components
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Dan Gamble
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-05 00:00:00.000000000 Z
+date: 2021-10-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -448,7 +448,15 @@ files:
 - app/assets/icons/polaris/WholesaleMajor.svg
 - app/assets/icons/polaris/WifiMajor.svg
 - app/assets/javascripts/polaris_view_components.js
+- app/assets/javascripts/polaris_view_components/index.js
+- app/assets/javascripts/polaris_view_components/resource_item_controller.js
+- app/assets/javascripts/polaris_view_components/select_controller.js
+- app/assets/javascripts/polaris_view_components/text_field_controller.js
 - app/assets/stylesheets/polaris_view_components.css
+- app/assets/stylesheets/polaris_view_components.postcss.css
+- app/assets/stylesheets/polaris_view_components/custom.css
+- app/assets/stylesheets/polaris_view_components/shopify_navigation.css
+- app/assets/stylesheets/polaris_view_components/spacer_component.css
 - app/components/polaris/action.rb
 - app/components/polaris/application_component.rb
 - app/components/polaris/avatar_component.html.erb
@@ -477,11 +485,14 @@ files:
 - app/components/polaris/checkbox_component.rb
 - app/components/polaris/choice_component.html.erb
 - app/components/polaris/choice_component.rb
-- app/components/polaris/choice_list/component.html.erb
-- app/components/polaris/choice_list/component.rb
 - app/components/polaris/choice_list_component.html.erb
 - app/components/polaris/choice_list_component.rb
 - app/components/polaris/component.rb
+- app/components/polaris/data_table/cell_component.html.erb
+- app/components/polaris/data_table/cell_component.rb
+- app/components/polaris/data_table/column_component.rb
+- app/components/polaris/data_table_component.html.erb
+- app/components/polaris/data_table_component.rb
 - app/components/polaris/description_list_component.html.erb
 - app/components/polaris/description_list_component.rb
 - app/components/polaris/display_text_component.rb
@@ -541,6 +552,7 @@ files:
 - app/components/polaris/shopify_navigation_component.rb
 - app/components/polaris/skeleton_body_text_component.html.erb
 - app/components/polaris/skeleton_body_text_component.rb
+- app/components/polaris/spacer_component.rb
 - app/components/polaris/spinner_component.html.erb
 - app/components/polaris/spinner_component.rb
 - app/components/polaris/stack_component.html.erb
@@ -555,7 +567,6 @@ files:
 - app/components/polaris/thumbnail_component.html.erb
 - app/components/polaris/thumbnail_component.rb
 - app/components/polaris/visually_hidden_component.rb
-- app/helpers/polaris/action_helper.rb
 - app/helpers/polaris/class_name_helper.rb
 - app/helpers/polaris/conditional_helper.rb
 - app/helpers/polaris/fetch_or_fallback_helper.rb
@@ -563,10 +574,6 @@ files:
 - app/helpers/polaris/option_helper.rb
 - app/helpers/polaris/url_helper.rb
 - app/helpers/polaris/view_helper.rb
-- app/javascript/polaris_view_components/index.js
-- app/javascript/polaris_view_components/resource_item_controller.js
-- app/javascript/polaris_view_components/select_controller.js
-- app/javascript/polaris_view_components/text_field_controller.js
 - app/validators/type_validator.rb
 - lib/generators/polaris_view_components/USAGE
 - lib/generators/polaris_view_components/install_generator.rb

data/app/components/polaris/choice_list/component.html.erb

@@ -1,34 +0,0 @@
-<%= field_set_tag(nil, content_tag_options) do %>
-  <% if @title.present? %>
-    <%= content_tag("legend", class: "Polaris-ChoiceList__Title") do %>
-      <%= @title %>
-    <% end %>
-  <% end %>
-
-  <ul class="Polaris-ChoiceList__Choices">
-    <% choice_component = @allow_multiple ? Polaris::CheckboxComponent : Polaris::RadioButtonComponent %>
-
-    <% @choices.each do |choice| %>
-      <li>
-        <%= render choice_component.new(
-          form: @form,
-          attribute: @attribute,
-          name: final_name,
-          value: choice[:value],
-          label: choice[:label],
-          disabled: choice[:disabled] || @disabled,
-          checked: choice_is_selected?(choice),
-          help_text: choice[:help_text],
-          children_content: choice[:children_content],
-          input_attrs: @input_attrs,
-        ) %>
-      </li>
-    <% end %>
-  </ul>
-
-  <% if @error.present? %>
-    <div class="Polaris-ChoiceList__ChoiceError">
-      <%= polaris_inline_error { @error } %>
-    </div>
-  <% end %>
-<% end %>

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

@@ -1,65 +0,0 @@
-# frozen_string_literal: true
-
-module Polaris
-  module ChoiceList
-    class Component < Polaris::Component
-      def initialize(
-        choices:,
-        form: nil,
-        attribute: nil,
-        name: nil,
-        title: '',
-        title_hidden: false,
-        selected: [],
-        allow_multiple: false,
-        error: '',
-        disabled: false,
-        input_attrs: {},
-        **args
-      )
-        super
-
-        @choices = choices
-        @form = form
-        @attribute = attribute
-
-        @name = name
-        @title = title
-        @title_hidden = title_hidden
-        @selected = selected
-        @allow_multiple = allow_multiple
-        @error = error
-        @disabled = disabled
-        @input_attrs = input_attrs
-      end
-
-      def final_name
-        return nil if @name.nil?
-
-        @allow_multiple ? "#{@name}[]" : @name
-      end
-
-      def choice_is_selected?(choice)
-        @selected.include? choice[:value]
-      end
-
-      private
-
-        def classes
-          classes = ['Polaris-ChoiceList']
-
-          classes << 'Polaris-ChoiceList--titleHidden' if @title_hidden
-
-          classes
-        end
-
-        def additional_aria
-          super
-
-          {
-            invalid: @error.present?
-          }
-        end
-    end
-  end
-end

data/app/helpers/polaris/action_helper.rb

@@ -1,14 +0,0 @@
-module Polaris
-  module ActionHelper
-    def render_plain_action(action)
-      case action
-        when Hash
-          action = action(**action)
-      end
-
-      render Polaris::ButtonComponent.new(**action.to_h.except(:content), plain: true) do
-        action.content
-      end
-    end
-  end
-end