polaris_view_components 0.4.0 → 0.8.0

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

@@ -1,4 +1,4 @@
-@import "@shopify/polaris/dist/styles.css";
+@import "@shopify/polaris/build/esm/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/action.rb

@@ -5,9 +5,9 @@ module Polaris
     def initialize(
       content:,
       url:,
-      accessibility_label: '',
+      accessibility_label: "",
       external: false,
-      id: '',
+      id: "",
       data: {}
     )
       @content = content
@@ -25,7 +25,7 @@ module Polaris
         external: @external,
         id: @id,
         url: @url,
-        data: @data,
+        data: @data
       }
     end
   end

data/app/components/polaris/action_list/item_component.html.erb

@@ -0,0 +1,35 @@
+<li>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <div class="Polaris-ActionList__Content">
+      <% if @icon.present? %>
+        <span class="Polaris-ActionList__Prefix">
+          <%= polaris_icon(name: @icon) %>
+        </span>
+      <% end %>
+      <% if prefix.present? %>
+        <span class="Polaris-ActionList__Prefix">
+          <%= prefix %>
+        </span>
+      <% end %>
+
+      <span class="Polaris-ActionList__Text">
+        <% if @help_text.present? %>
+          <span class="Polaris-ActionList__ContentBlock">
+            <span class="Polaris-ActionList__ContentBlockInner">
+              <%= content %>
+            </span>
+            <%= polaris_text_subdued { @help_text } %>
+          </span>
+        <% else %>
+          <%= content %>
+        <% end %>
+      </span>
+
+      <% if suffix.present? %>
+        <span class="Polaris-ActionList__Suffix">
+          <%= suffix %>
+        </span>
+      <% end %>
+    </div>
+  <% end %>
+</li>

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

@@ -0,0 +1,41 @@
+class Polaris::ActionList::ItemComponent < Polaris::Component
+  renders_one :prefix
+  renders_one :suffix
+
+  def initialize(
+    url: nil,
+    icon: nil,
+    help_text: nil,
+    active: false,
+    destructive: false,
+    external: false,
+    **system_arguments
+  )
+    @url = url
+    @icon = icon
+    @help_text = help_text
+    @active = active
+    @destructive = destructive
+    @external = external
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      if @url.present?
+        opts[:tag] = "a"
+        opts[:href] = @url
+        opts[:target] = "_blank" if @external
+      else
+        opts[:tag] = "button"
+        opts[:type] = "button"
+      end
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ActionList__Item",
+        "Polaris-ActionList--active": @active,
+        "Polaris-ActionList--destructive": @destructive
+      )
+    end
+  end
+end

data/app/components/polaris/action_list/section_component.html.erb

@@ -0,0 +1,16 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <% if @title.present? %>
+    <p class="<%= title_classes %>">
+      <%= @title %>
+    </p>
+  <% end %>
+  <ul class="Polaris-ActionList__Actions">
+    <% if items.present? %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </ul>
+<% end %>

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

@@ -0,0 +1,26 @@
+class Polaris::ActionList::SectionComponent < Polaris::Component
+  renders_many :items, Polaris::ActionList::ItemComponent
+
+  def initialize(position: 1, title: nil, **system_arguments)
+    @position = position
+    @title = title
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ActionList__Section--withoutTitle": @title.blank?
+      )
+    end
+  end
+
+  def title_classes
+    class_names(
+      "Polaris-ActionList__Title",
+      "Polaris-ActionList--firstSectionWithTitle": @position == 1
+    )
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% else %>
+    <%= render Polaris::ActionList::SectionComponent.new do %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/action_list_component.rb

@@ -0,0 +1,25 @@
+module Polaris
+  class ActionListComponent < Polaris::Component
+    renders_many :items, Polaris::ActionList::ItemComponent
+    renders_many :sections, ->(**system_arguments) do
+      @counter += 1
+
+      Polaris::ActionList::SectionComponent.new(position: @counter, **system_arguments)
+    end
+
+    def initialize(**system_arguments)
+      @counter = 0
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-ActionList"
+        )
+      end
+    end
+  end
+end

data/app/components/polaris/autocomplete/action_component.rb

@@ -0,0 +1,7 @@
+module Polaris
+  class Autocomplete::ActionComponent < Component
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+    end
+  end
+end

data/app/components/polaris/autocomplete/option_component.rb

@@ -0,0 +1,35 @@
+module Polaris
+  class Autocomplete::OptionComponent < Component
+    def initialize(
+      label:,
+      multiple: false,
+      **system_arguments
+    )
+      @label = label
+      @multiple = multiple
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |args|
+        args[:label] = @label
+
+        args[:wrapper_arguments] ||= {}
+        args[:wrapper_arguments][:data] ||= {}
+        args[:wrapper_arguments][:data][:polaris_autocomplete_target] = "option"
+        args[:wrapper_arguments][:data][:label] = @label
+
+        args[:data] ||= {}
+        prepend_option(args[:data], :action, "polaris-autocomplete#select")
+      end
+    end
+
+    def call
+      if @multiple
+        render OptionList::CheckboxComponent.new(**system_arguments)
+      else
+        render OptionList::RadioButtonComponent.new(**system_arguments)
+      end
+    end
+  end
+end

data/app/components/polaris/autocomplete/section_component.html.erb

@@ -0,0 +1,9 @@
+<%= render(Polaris::OptionList::SectionComponent.new(**@system_arguments)) do %>
+  <% if options.present? %>
+    <% options.each do |option| %>
+      <%= option %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,12 @@
+module Polaris
+  class Autocomplete::SectionComponent < Component
+    renders_many :options, ->(**system_arguments) do
+      Autocomplete::OptionComponent.new(multiple: @multiple, **system_arguments)
+    end
+
+    def initialize(multiple: false, **system_arguments)
+      @multiple = multiple
+      @system_arguments = system_arguments
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
+    <% popover.activator do %>
+      <%= text_field %>
+    <% end %>
+
+    <% if empty_state.present? %>
+      <div
+        data-polaris-autocomplete-target="emptyState"
+        class="Polaris-Autocomplete__EmptyState Polaris--hidden"
+      >
+        <%= empty_state %>
+      </div>
+    <% end %>
+
+    <%= polaris_option_list(**option_list_arguments) do |list| %>
+      <% if sections.present? %>
+        <% sections.each do |section| %>
+          <%= section %>
+        <% end %>
+      <% elsif options.present? %>
+        <% options.each do |option| %>
+          <%= option %>
+        <% end %>
+      <% else %>
+        <%= content %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/autocomplete_component.rb

@@ -0,0 +1,65 @@
+module Polaris
+  class AutocompleteComponent < Component
+    renders_one :text_field, ->(**system_arguments) do
+      system_arguments[:data] ||= {}
+      prepend_option(system_arguments[:data], :action, %w[
+        click->polaris-autocomplete#toggle
+        click@window->polaris-popover#hide
+      ])
+
+      system_arguments[:input_options] ||= {}
+      system_arguments[:input_options][:data] ||= {}
+      system_arguments[:input_options][:data][:polaris_autocomplete_target] = "input"
+
+      TextFieldComponent.new(**system_arguments)
+    end
+    renders_many :sections, ->(**system_arguments) do
+      Autocomplete::SectionComponent.new(multiple: @multiple, **system_arguments)
+    end
+    renders_many :options, ->(**system_arguments) do
+      Autocomplete::OptionComponent.new(multiple: @multiple, **system_arguments)
+    end
+    renders_one :empty_state
+
+    def initialize(
+      multiple: false,
+      url: nil,
+      selected: [],
+      **system_arguments
+    )
+      @multiple = multiple
+      @url = url
+      @selected = selected
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        opts[:data][:controller] = "polaris-autocomplete"
+        if @url.present?
+          opts[:data][:polaris_autocomplete_url_value] = @url
+        end
+        opts[:data][:polaris_autocomplete_selected_value] = @selected
+      end
+    end
+
+    def popover_arguments
+      {
+        alignment: :left,
+        full_width: true,
+        inline: false,
+        wrapper_arguments: {
+          data: {polaris_autocomplete_target: "popover"}
+        }
+      }
+    end
+
+    def option_list_arguments
+      {
+        data: {polaris_autocomplete_target: "results"}
+      }
+    end
+  end
+end

data/app/components/polaris/avatar_component.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class AvatarComponent < Polaris::NewComponent
+  class AvatarComponent < Polaris::Component
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
       small: "Polaris-Avatar--sizeSmall",
       medium: "Polaris-Avatar--sizeMedium",
-      large: "Polaris-Avatar--sizeLarge",
+      large: "Polaris-Avatar--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 

data/app/components/polaris/badge_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class BadgeComponent < Polaris::NewComponent
+  class BadgeComponent < Polaris::Component
     PROGRESS_DEFAULT = :default
     PROGRESS_MAPPINGS = {
       PROGRESS_DEFAULT => "",
@@ -44,7 +44,7 @@ module Polaris
         "Polaris-Badge",
         PROGRESS_MAPPINGS[fetch_or_fallback(PROGRESS_OPTIONS, progress, PROGRESS_DEFAULT)],
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
-        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/banner_component.rb

@@ -1,21 +1,21 @@
 # frozen_string_literal: true
 
 module Polaris
-  class BannerComponent < Polaris::NewComponent
+  class BannerComponent < Polaris::Component
     STATUS_DEFAULT = :default
     STATUS_MAPPINGS = {
       STATUS_DEFAULT => "",
       :success => "Polaris-Banner--statusSuccess",
       :info => "Polaris-Banner--statusInfo",
       :warning => "Polaris-Banner--statusWarning",
-      :critical => "Polaris-Banner--statusCritical",
+      :critical => "Polaris-Banner--statusCritical"
     }
     STATUS_OPTIONS = STATUS_MAPPINGS.keys
 
     WITHIN_DEFAULT = :page
     WITHIN_MAPPINGS = {
       page: "Polaris-Banner--withinPage",
-      container: "Polaris-Banner--withinContentContainer",
+      container: "Polaris-Banner--withinContentContainer"
     }
     WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
 
@@ -24,14 +24,14 @@ module Polaris
       success: :success,
       info: :highlight,
       warning: :warning,
-      critical: :critical,
+      critical: :critical
     }
 
-    renders_one :action, -> (**system_arguments) do
+    renders_one :action, ->(**system_arguments) do
       Polaris::ButtonComponent.new(classes: "Polaris-Banner__Button", **system_arguments)
     end
     renders_one :secondary_action, "SecondaryAction"
-    renders_one :dismiss_button, -> (**system_arguments) do
+    renders_one :dismiss_button, ->(**system_arguments) do
       render Polaris::ButtonComponent.new(plain: true, **system_arguments) do |button|
         button.icon(name: "CancelSmallMinor")
       end
@@ -55,7 +55,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Banner",
         STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
-        WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
+        WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)]
       )
     end
 
@@ -72,7 +72,7 @@ module Polaris
       end
     end
 
-    class SecondaryAction < Polaris::NewComponent
+    class SecondaryAction < Polaris::Component
       def initialize(**system_arguments)
         @system_arguments = system_arguments
       end

data/app/components/polaris/base_button.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class BaseButton < Polaris::NewComponent
+  class BaseButton < Polaris::Component
     def initialize(
       url: nil,
       external: false,
@@ -10,7 +10,7 @@ module Polaris
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] = url.present? ? 'a' : 'button'
+      @system_arguments[:tag] = url.present? ? "a" : "button"
       if loading
         @system_arguments[:disabled] = true
       end

data/app/components/polaris/base_checkbox.rb

@@ -0,0 +1,48 @@
+module Polaris
+  class BaseCheckbox < Polaris::Component
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      checked: false,
+      disabled: false,
+      value: "1",
+      unchecked_value: "0",
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @checked = checked
+      @disabled = disabled
+      @value = value
+      @unchecked_value = unchecked_value
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:disabled] = true if @disabled
+        opts[:aria] ||= {}
+        opts[:aria][:checked] = @checked
+        if indeterminate?
+          @system_arguments[:indeterminate] = true
+          @system_arguments[:aria][:checked] = "mixed"
+        end
+        opts[:class] = opts.delete(:classes)
+      end
+    end
+
+    def indeterminate?
+      @checked == :indeterminate
+    end
+
+    def call
+      if @form.present? && @attribute.present?
+        @form.check_box(@attribute, system_arguments, @value, @unchecked_value)
+      else
+        check_box_tag(@name, @value, @checked, system_arguments)
+      end
+    end
+  end
+end

data/app/components/polaris/base_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class BaseComponent < Polaris::NewComponent
+  class BaseComponent < Polaris::Component
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
       @system_arguments = system_arguments

data/app/components/polaris/base_radio_button.rb

@@ -0,0 +1,38 @@
+module Polaris
+  class BaseRadioButton < Polaris::Component
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      checked: false,
+      disabled: false,
+      value: nil,
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @checked = checked
+      @disabled = disabled
+      @value = value
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:disabled] = true if @disabled
+        opts[:aria] ||= {}
+        opts[:aria][:checked] = @checked
+        opts[:class] = opts.delete(:classes)
+      end
+    end
+
+    def call
+      if @form.present? && @attribute.present?
+        @form.radio_button(@attribute, @value, system_arguments)
+      else
+        radio_button_tag(@name, @value, @checked, system_arguments)
+      end
+    end
+  end
+end

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

@@ -20,5 +20,18 @@
         <%= 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>
 <% end %>

data/app/components/polaris/button_group_component.rb

@@ -1,23 +1,23 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ButtonGroupComponent < Polaris::NewComponent
+  class ButtonGroupComponent < Polaris::Component
     SPACING_DEFAULT = :default
     SPACING_MAPPINGS = {
       SPACING_DEFAULT => "",
       :extra_tight => "Polaris-ButtonGroup--extraTight",
       :tight => "Polaris-ButtonGroup--tight",
-      :loose => "Polaris-ButtonGroup--loose",
+      :loose => "Polaris-ButtonGroup--loose"
     }
     SPACING_OPTIONS = SPACING_MAPPINGS.keys
 
-    renders_many :buttons, -> (**system_arguments) do
+    renders_many :buttons, ->(**system_arguments) do
       @counter += 1
 
       ButtonGroupItemButtonComponent.new(position: @counter, **system_arguments)
     end
 
-    renders_many :items, -> (**system_arguments) do
+    renders_many :items, ->(**system_arguments) do
       @counter += 1
 
       ButtonGroupItemComponent.new(position: @counter, **system_arguments)
@@ -47,7 +47,7 @@ module Polaris
         "Polaris-ButtonGroup",
         SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
         "Polaris-ButtonGroup--fullWidth": full_width,
-        "Polaris-ButtonGroup--segmented": segmented,
+        "Polaris-ButtonGroup--segmented": segmented
       )
     end
 
@@ -63,7 +63,7 @@ module Polaris
       all_items.sort_by(&:position)
     end
 
-    class ButtonGroupItemButtonComponent < Polaris::NewComponent
+    class ButtonGroupItemButtonComponent < Polaris::Component
       attr_reader :position
 
       def initialize(position:, **system_arguments)
@@ -87,7 +87,7 @@ module Polaris
       end
     end
 
-    class ButtonGroupItemComponent < Polaris::NewComponent
+    class ButtonGroupItemComponent < Polaris::Component
       attr_reader :position
 
       def initialize(position:, **system_arguments)
@@ -97,7 +97,7 @@ module Polaris
         @system_arguments[:tag] = :div
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
-          "Polaris-ButtonGroup__Item",
+          "Polaris-ButtonGroup__Item"
         )
       end