polaris_view_components 0.3.2 → 0.6.0

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

@@ -13,7 +13,7 @@ module Polaris
       @system_arguments[:tag] = element
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        'Polaris-Heading'
+        "Polaris-Heading"
       )
     end
 

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

@@ -19,4 +19,17 @@
       <%= content %>
     </div>
   <% end %>
+
+  <% if @disclosure.present? %>
+    <div class="Polaris-Button__Icon">
+      <% case @disclosure %>
+      <% when :down %>
+        <%= polaris_icon(name: "CaretDownMinor") %>
+      <% when :up %>
+        <%= polaris_icon(name: "CaretUpMinor") %>
+      <% when :select %>
+        <%= polaris_icon(name: "SelectMinor") %>
+      <% end %>
+    </div>
+  <% end %>
 </span>

data/app/components/polaris/headless_button.rb

@@ -6,7 +6,7 @@ module Polaris
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
       :slim => "Polaris-Button--sizeSlim",
-      :large => "Polaris-Button--sizeLarge",
+      :large => "Polaris-Button--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -15,10 +15,13 @@ module Polaris
       TEXT_ALIGN_DEFAULT => "",
       :left => "Polaris-Button--textAlignLeft",
       :center => "Polaris-Button--textAlignCenter",
-      :right => "Polaris-Button--textAlignRight",
+      :right => "Polaris-Button--textAlignRight"
     }
     TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
 
+    DISCLOSURE_DEFAULT = false
+    DISCLOSURE_OPTIONS = [true, false, :down, :up, :select]
+
     renders_one :icon, IconComponent
 
     def initialize(
@@ -31,6 +34,8 @@ module Polaris
       loading: false,
       destructive: false,
       disabled: false,
+      disable_with_loader: false,
+      disclosure: DISCLOSURE_DEFAULT,
       external: false,
       full_width: false,
       submit: false,
@@ -39,15 +44,17 @@ module Polaris
       text_align: TEXT_ALIGN_DEFAULT,
       **system_arguments
     )
-      @tag = url.present? ? 'a' : 'button'
+      @tag = url.present? ? "a" : "button"
       @text_classes = class_names(
         "Polaris-Button__Text",
         "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
       )
       @loading = loading
+      @disclosure = fetch_or_fallback(DISCLOSURE_OPTIONS, disclosure, DISCLOSURE_DEFAULT)
+      @disclosure = :down if @disclosure === true
 
       @system_arguments = system_arguments
-      @system_arguments[:type] = submit ? 'submit' : 'button'
+      @system_arguments[:type] = submit ? "submit" : "button"
       if loading
         @system_arguments[:disabled] = true
       end
@@ -59,6 +66,11 @@ module Polaris
       if disabled
         @system_arguments[:disabled] = disabled
       end
+      @system_arguments[:data] ||= {}
+      prepend_option(@system_arguments[:data], :controller, "polaris-button")
+      if disable_with_loader
+        prepend_option(@system_arguments[:data], :action, "polaris-button#disable")
+      end
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Button",
@@ -80,7 +92,7 @@ module Polaris
     def system_arguments
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Button--iconOnly": icon.present? && content.blank?,
+        "Polaris-Button--iconOnly": icon.present? && content.blank?
       )
       @system_arguments
     end

data/app/components/polaris/icon_component.rb

@@ -11,7 +11,7 @@ module Polaris
       :warning => "Polaris-Icon--colorWarning",
       :highlight => "Polaris-Icon--colorHighlight",
       :success => "Polaris-Icon--colorSuccess",
-      :primary => "Polaris-Icon--colorPrimary",
+      :primary => "Polaris-Icon--colorPrimary"
     }
     COLOR_OPTIONS = COLOR_MAPPINGS.keys
 
@@ -29,7 +29,7 @@ module Polaris
         "Polaris-Icon",
         COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
         "Polaris-Icon--hasBackdrop" => backdrop,
-        "Polaris-Icon--applyColor" => color != :default,
+        "Polaris-Icon--applyColor" => color != :default
       )
     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/label_component.rb

@@ -19,13 +19,13 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Label",
+        "Polaris-Label"
       )
 
       @label_options = {}
       @label_options[:class] = class_names(
         "Polaris-Label__Text",
-        "Polaris-Label__RequiredIndicator": required,
+        "Polaris-Label__RequiredIndicator": required
       )
     end
 

data/app/components/polaris/labelled_component.rb

@@ -2,7 +2,7 @@
 
 module Polaris
   class LabelledComponent < Polaris::NewComponent
-    renders_one :label_action, -> (**system_arguments) do
+    renders_one :label_action, ->(**system_arguments) do
       Polaris::ButtonComponent.new(plain: true, **system_arguments)
     end
 
@@ -38,7 +38,7 @@ module Polaris
         attribute: attribute,
         name: name,
         label: label,
-        required: required,
+        required: required
       }
     end
 

data/app/components/polaris/layout/annotated_section.rb

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

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

@@ -9,7 +9,7 @@ module Polaris
     # @param one_half [Boolean] The section will only take up 50% of the width
     # @param one_third [Boolean] The section will only take up 33.33% of the width
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :sections, -> (**system_arguments) do
+    renders_many :sections, ->(**system_arguments) do
       @counter += 1
       Layout::Section.new(position: @counter, **system_arguments)
     end
@@ -19,7 +19,7 @@ module Polaris
     # @param title [String] Title
     # @param description [String] Description
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :annotated_sections, -> (**system_arguments) do
+    renders_many :annotated_sections, ->(**system_arguments) do
       @counter += 1
       Layout::AnnotatedSection.new(position: @counter, **system_arguments)
     end
@@ -29,7 +29,7 @@ module Polaris
       @system_arguments = system_arguments
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        'Polaris-Layout'
+        "Polaris-Layout"
       )
     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,14 +24,15 @@ 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,
-          (external_icon if @external),
+          content.strip.html_safe,
+          (external_icon if @external)
         ].compact
       end
     end
@@ -40,7 +42,7 @@ module Polaris
     def external_icon
       tag.span(class: "Polaris-Link__IconLockup") do
         tag.span(class: "Polaris-Link__IconLayout") do
-          polaris_icon(name: "ExternalSmallMinor", aria: { label: "(opens a new window)" })
+          polaris_icon(name: "ExternalSmallMinor", aria: {label: "(opens a new window)"})
         end
       end
     end

data/app/components/polaris/list_component.rb

@@ -7,11 +7,11 @@ module Polaris
     TYPE_DEFAULT = :bullet
     TYPE_TAG_MAPPINGS = {
       bullet: :ul,
-      number: :ol,
+      number: :ol
     }
     TYPE_CLASS_MAPPINGS = {
       bullet: "",
-      number: "Polaris-List--typeNumber",
+      number: "Polaris-List--typeNumber"
     }
     TYPE_OPTIONS = TYPE_TAG_MAPPINGS.keys
 
@@ -24,7 +24,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-List",
-        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")],
+        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")]
       )
     end
 

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

@@ -0,0 +1,19 @@
+class Polaris::Modal::SectionComponent < Polaris::NewComponent
+  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-Modal-Section"
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**system_arguments)) { content }
+  end
+end

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

@@ -0,0 +1,79 @@
+<% modal_content = capture do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% end %>
+
+  <% if content.present? %>
+    <% if @sectioned %>
+      <%= render Polaris::Modal::SectionComponent.new do %>
+        <%= content %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <div>
+    <%= render(Polaris::BaseComponent.new(**dialog_arguments)) do %>
+      <div class="<%= modal_classes %>">
+        <div class="<%= header_classes %>">
+          <div class="Polaris-Modal-Header__Title">
+            <%= polaris_display_text(element: :h2, size: :small) do %>
+              <%= @title %>
+            <% end %>
+          </div>
+          <% if close_button.present? %>
+            <%= close_button %>
+          <% else %>
+            <%= render(Polaris::BaseComponent.new(**close_button_arguments)) do %>
+              <%= polaris_icon(name: "MobileCancelMajor", color: :base) %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <div class="Polaris-Modal__BodyWrapper">
+          <% if @scrollable %>
+            <%= polaris_scrollable(classes: "Polaris-Modal__Body") do %>
+              <%= modal_content %>
+            <% end %>
+          <% else %>
+            <%= modal_content %>
+          <% end %>
+        </div>
+
+        <% if render_footer? %>
+          <div class="Polaris-Modal-Footer">
+            <div class="Polaris-Modal-Footer__FooterContent">
+              <%= polaris_stack(alignment: :center) do |stack| %>
+                <% stack.item(fill: true) do %>
+                <% end %>
+
+                <% stack.item do %>
+                  <%= polaris_button_group do |group| %>
+                    <% if secondary_actions %>
+                      <% secondary_actions.each do |action| %>
+                        <% group.item do %>
+                          <%= action %>
+                        <% end %>
+                      <% end %>
+
+                      <% if primary_action %>
+                        <% group.item do %>
+                          <%= primary_action %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>