polaris_view_components 0.3.3 → 0.7.0

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

@@ -5,7 +5,7 @@ module Polaris
     SPACING_DEFAULT = :loose
     SPACING_MAPPINGS = {
       SPACING_DEFAULT => "",
-      :tight => "Polaris-DescriptionList--spacingTight",
+      :tight => "Polaris-DescriptionList--spacingTight"
     }
     SPACING_OPTIONS = SPACING_MAPPINGS.keys
 
@@ -17,7 +17,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-DescriptionList",
-        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
+        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)]
       )
     end
 
@@ -33,7 +33,7 @@ module Polaris
       def call
         safe_join [
           tag.dt(class: "Polaris-DescriptionList__Term") { @term },
-          tag.dd(class: "Polaris-DescriptionList__Description") { content },
+          tag.dd(class: "Polaris-DescriptionList__Description") { content }
         ]
       end
     end

data/app/components/polaris/display_text_component.rb

@@ -10,7 +10,7 @@ module Polaris
       small: "Polaris-DisplayText--sizeSmall",
       medium: "Polaris-DisplayText--sizeMedium",
       large: "Polaris-DisplayText--sizeLarge",
-      extra_large: "Polaris-DisplayText--sizeExtraLarge",
+      extra_large: "Polaris-DisplayText--sizeExtraLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -24,7 +24,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-DisplayText",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
     end
 

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

@@ -3,11 +3,9 @@
 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" }
+      validates :type, inclusion: {in: ALLOWED_TYPES, message: "%{value} is not a valid type"}
       validates :label_action, type: Action, allow_nil: true
 
       # TODO
@@ -79,52 +77,52 @@ module Polaris
           multiple: @allow_multiple,
           data: {
             action: "focus->polaris--dropzone#onFocus blur->polaris--dropzone#onBlur change->polaris--dropzone#onChange",
-            'polaris--dropzone-target': 'input',
+            'polaris--dropzone-target': "input"
           }
         }
       end
 
       private
 
-        def additional_aria
-          {
-            disabled: @disabled.to_s,
-          }
-        end
-
-        def additional_data
-          {
-            controller: "polaris--dropzone",
-            action: "click->polaris--dropzone#onClick #{drop_actions}",
-            'polaris--dropzone-accept-value': @accept,
-            'polaris--dropzone-allowMultiple-value': @allow_multiple.to_s,
-            'polaris--dropzone-disabled-value': @disabled.to_s,
-            'polaris--dropzone-focused-value': 'false',
-            'polaris--dropzone-drop-on-page-value': 'false',
-          }
-        end
+      def additional_aria
+        {
+          disabled: @disabled.to_s
+        }
+      end
 
-        def drop_actions
-          event_scope = @drop_on_page ? "@document" : ""
+      def additional_data
+        {
+          controller: "polaris--dropzone",
+          action: "click->polaris--dropzone#onClick #{drop_actions}",
+          'polaris--dropzone-accept-value': @accept,
+          'polaris--dropzone-allowMultiple-value': @allow_multiple.to_s,
+          'polaris--dropzone-disabled-value': @disabled.to_s,
+          'polaris--dropzone-focused-value': "false",
+          'polaris--dropzone-drop-on-page-value': "false"
+        }
+      end
 
-          [
-            "drop#{event_scope}->polaris--dropzone#onDrop",
-            "dragover#{event_scope}->polaris--dropzone#onDragOver",
-            "dragenter#{event_scope}->polaris--dropzone#onDragEnter",
-            "dragleave#{event_scope}->polaris--dropzone#onDragLeave"
-          ].join(" ")
-        end
+      def drop_actions
+        event_scope = @drop_on_page ? "@document" : ""
 
-        def classes
-          classes = %w[Polaris-DropZone Polaris-DropZone--sizeExtraLarge]
+        [
+          "drop#{event_scope}->polaris--dropzone#onDrop",
+          "dragover#{event_scope}->polaris--dropzone#onDragOver",
+          "dragenter#{event_scope}->polaris--dropzone#onDragEnter",
+          "dragleave#{event_scope}->polaris--dropzone#onDragLeave"
+        ].join(" ")
+      end
+
+      def classes
+        classes = %w[Polaris-DropZone Polaris-DropZone--sizeExtraLarge]
 
-          classes << "Polaris-DropZone--isDisabled" if @disabled
-          classes << "Polaris-DropZone--isDisabled" if @disabled
-          classes << "Polaris-DropZone--hasError" if @error.present?
-          classes << "Polaris-DropZone--hasOutline" if @outline
+        classes << "Polaris-DropZone--isDisabled" if @disabled
+        classes << "Polaris-DropZone--isDisabled" if @disabled
+        classes << "Polaris-DropZone--hasError" if @error.present?
+        classes << "Polaris-DropZone--hasOutline" if @outline
 
-          classes
-        end
+        classes
+      end
     end
   end
 end

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

@@ -5,15 +5,16 @@ module Polaris
     WITHIN_DEFAULT = :page
     WITHIN_MAPPINGS = {
       WITHIN_DEFAULT => "",
-      container: "Polaris-EmptyState--withinContentContainer",
+      :container => "Polaris-EmptyState--withinContentContainer"
     }
     WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
 
-    renders_one :primary_action, -> (primary: true, **system_arguments) do
+    renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
     renders_one :secondary_action, Polaris::ButtonComponent
     renders_one :footer
+    renders_one :unsectioned_content
 
     def initialize(
       image:,
@@ -31,7 +32,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-EmptyState",
         WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
-        "Polaris-EmptyState--fullWidth": full_width,
+        "Polaris-EmptyState--fullWidth": full_width
       )
     end
   end

data/app/components/polaris/exception_list/item_component.rb

@@ -3,7 +3,7 @@ class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
   STATUS_MAPPINGS = {
     STATUS_DEFAULT => "",
     :critical => "Polaris-ExceptionList--statusCritical",
-    :warning => "Polaris-ExceptionList--statusWarning",
+    :warning => "Polaris-ExceptionList--statusWarning"
   }
   STATUS_OPTIONS = STATUS_MAPPINGS.keys
 
@@ -21,7 +21,7 @@ class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
       "Polaris-ExceptionList__Item",
-      STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
+      STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)]
     )
   end
 end

data/app/components/polaris/exception_list_component.rb

@@ -9,7 +9,7 @@ module Polaris
       @system_arguments[:tag] = "ul"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-ExceptionList",
+        "Polaris-ExceptionList"
       )
     end
 

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

@@ -0,0 +1,35 @@
+<%= 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 %>
+      <% if items.present? %>
+        <div class="<%= items_wrapper_classes %>">
+          <% items.each do |item| %>
+            <%= item %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <% if content.present? %>
+      <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
+        <%= content %>
+      </div>
+    <% end %>
+  </div>
+  <% if tags.present? %>
+    <div class="Polaris-Filters__TagsContainer">
+      <%= tags %>
+    </div>
+  <% end %>
+  <% if @help_text.present? %>
+    <div class="Polaris-Filters__HelpText">
+      <%= polaris_text_subdued { @help_text } %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/filters_component.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Polaris
+  class FiltersComponent < Polaris::NewComponent
+    renders_one :query, ->(**system_arguments) do
+      QueryComponent.new(disabled: @disabled, **system_arguments)
+    end
+    renders_many :items, ->(**system_arguments) do
+      ItemComponent.new(disabled: @disabled, **system_arguments)
+    end
+    renders_one :tags
+
+    def initialize(disabled: false, help_text: nil, **system_arguments)
+      @disabled = disabled
+      @help_text = help_text
+      @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
+
+    def items_wrapper_classes
+      class_names(
+        "Polaris-Filters-ConnectedFilterControl__RightContainer",
+        "Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters",
+        "Polaris-Filters-ConnectedFilterControl--queryFieldHidden": @query.blank?
+      )
+    end
+
+    class QueryComponent < Polaris::NewComponent
+      def initialize(clear_button: true, disabled: false, **system_arguments)
+        @disabled = disabled
+        @system_arguments = system_arguments.merge(
+          label_hidden: true,
+          clear_button: clear_button
+        )
+      end
+
+      def call
+        polaris_text_field(disabled: @disabled, **@system_arguments) do |text_field|
+          text_field.prefix do
+            polaris_icon(name: "SearchMinor")
+          end
+        end
+      end
+    end
+
+    class ItemComponent < Polaris::NewComponent
+      def initialize(label:, sectioned: true, width: nil, disabled: false, **system_arguments)
+        @label = label
+        @sectioned = sectioned
+        @width = width
+        @disabled = disabled
+        @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-ConnectedFilterControl__Item"
+          )
+        end
+      end
+
+      def popover_arguments
+        {
+          sectioned: @sectioned,
+          style: ("width: #{@width}" if @width.present?)
+        }
+      end
+
+      def call
+        render(Polaris::BaseComponent.new(**system_arguments)) do
+          render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover|
+            popover.button(disclosure: true, disabled: @disabled) { @label }
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/polaris/footer_help_component.rb

@@ -6,7 +6,7 @@ module Polaris
       @system_arguments = system_arguments
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-FooterHelp",
+        "Polaris-FooterHelp"
       )
     end
   end

data/app/components/polaris/form_layout/group_component.rb

@@ -10,7 +10,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
     @system_arguments[:tag] = "div"
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
-      "Polaris-FormLayout__Items",
+      "Polaris-FormLayout__Items"
     )
 
     @wrapper_arguments = {}
@@ -18,7 +18,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
     @wrapper_arguments[:role] = "group"
     @wrapper_arguments[:classes] = class_names(
       "Polaris-FormLayout--grouped": !condensed,
-      "Polaris-FormLayout--condensed": condensed,
+      "Polaris-FormLayout--condensed": condensed
     )
   end
 
@@ -28,7 +28,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-FormLayout__Item",
+        "Polaris-FormLayout__Item"
       )
     end
 

data/app/components/polaris/form_layout/item_component.rb

@@ -8,7 +8,7 @@ class Polaris::FormLayout::ItemComponent < Polaris::NewComponent
     @system_arguments[:tag] = "div"
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
-      "Polaris-FormLayout__Item",
+      "Polaris-FormLayout__Item"
     )
   end
 

data/app/components/polaris/form_layout_component.rb

@@ -2,11 +2,11 @@
 
 module Polaris
   class FormLayoutComponent < Polaris::NewComponent
-    renders_many :items, -> (**system_arguments) do
+    renders_many :items, ->(**system_arguments) do
       @counter += 1
       Polaris::FormLayout::ItemComponent.new(position: @counter, **system_arguments)
     end
-    renders_many :groups, -> (**system_arguments) do
+    renders_many :groups, ->(**system_arguments) do
       @counter += 1
       Polaris::FormLayout::GroupComponent.new(position: @counter, **system_arguments)
     end
@@ -18,7 +18,7 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-FormLayout",
+        "Polaris-FormLayout"
       )
     end
 

data/app/components/polaris/frame/save_bar_component.html.erb

@@ -0,0 +1,23 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <% if @logo.present? && !@flush %>
+    <div class="Polaris-Frame-ContextualSaveBar__LogoContainer" style="width: <%= @logo.width %>">
+      <%= image_tag @logo.src, style: "width: #{@logo.width}", alt: @logo.alt %>
+    </div>
+  <% end %>
+
+  <div class="<%= content_classes %>">
+    <h2 class="Polaris-Frame-ContextualSaveBar__Message">
+      <%= @message %>
+    </h2>
+    <div class="Polaris-Frame-ContextualSaveBar__ActionContainer">
+      <%= polaris_stack(spacing: :tight) do |stack| %>
+        <% stack.item do %>
+          <%= discard_action %>
+        <% end %>
+        <% stack.item do %>
+          <%= save_action %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/frame/save_bar_component.rb

@@ -0,0 +1,31 @@
+class Polaris::Frame::SaveBarComponent < Polaris::NewComponent
+  renders_one :save_action, ->(**system_arguments) do
+    Polaris::ButtonComponent.new(primary: true, **system_arguments)
+  end
+  renders_one :discard_action, Polaris::ButtonComponent
+
+  def initialize(message:, flush: false, full_width: false, logo: nil, **system_arguments)
+    @message = message
+    @flush = flush
+    @full_width = full_width
+    @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Frame-ContextualSaveBar"
+      )
+    end
+  end
+
+  def content_classes
+    class_names(
+      "Polaris-Frame-ContextualSaveBar__Contents",
+      "Polaris-Frame-ContextualSaveBar--fullWidth": @full_width
+    )
+  end
+end

data/app/components/polaris/frame/top_bar_component.html.erb

@@ -0,0 +1,30 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <button data-action="polaris-frame#openMenu" type="button" class="Polaris-TopBar__NavigationIcon">
+    <%= polaris_icon(name: "MobileHamburgerMajor") %>
+  </button>
+
+  <% if @logo.present? %>
+    <div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
+      <%= link_to(@logo.url,
+        class: "Polaris-TopBar__LogoLink",
+        style: "width: #{@logo.width}"
+      ) do %>
+        <%= image_tag @logo.src,
+          class: "Polaris-TopBar__Logo",
+          style: "width: #{@logo.width}",
+          alt: @logo.alt %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="Polaris-TopBar__Contents">
+    <%# FIXME: Not implemented yet %>
+    <div class="Polaris-TopBar__SearchField"></div>
+    <div class="Polaris-TopBar__SecondaryMenu"></div>
+    <div>
+      <div class="Polaris-TopBar-Menu__ActivatorWrapper">
+        <%= user_menu %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/frame/top_bar_component.rb

@@ -0,0 +1,18 @@
+class Polaris::Frame::TopBarComponent < Polaris::NewComponent
+  renders_one :user_menu, Polaris::TopBar::UserMenuComponent
+
+  def initialize(logo:, **system_arguments)
+    @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-TopBar"
+      )
+    end
+  end
+end