polaris_view_components 0.7.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_list/item_component.rb

@@ -1,4 +1,4 @@
-class Polaris::ActionList::ItemComponent < Polaris::NewComponent
+class Polaris::ActionList::ItemComponent < Polaris::Component
   renders_one :prefix
   renders_one :suffix
 

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

@@ -1,4 +1,4 @@
-class Polaris::ActionList::SectionComponent < Polaris::NewComponent
+class Polaris::ActionList::SectionComponent < Polaris::Component
   renders_many :items, Polaris::ActionList::ItemComponent
 
   def initialize(position: 1, title: nil, **system_arguments)

data/app/components/polaris/action_list_component.rb

@@ -1,5 +1,5 @@
 module Polaris
-  class ActionListComponent < Polaris::NewComponent
+  class ActionListComponent < Polaris::Component
     renders_many :items, Polaris::ActionList::ItemComponent
     renders_many :sections, ->(**system_arguments) do
       @counter += 1

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

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

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

@@ -1,5 +1,5 @@
 module Polaris
-  class Autocomplete::OptionComponent < NewComponent
+  class Autocomplete::OptionComponent < Component
     def initialize(
       label:,
       multiple: false,

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

@@ -1,5 +1,5 @@
 module Polaris
-  class Autocomplete::SectionComponent < NewComponent
+  class Autocomplete::SectionComponent < Component
     renders_many :options, ->(**system_arguments) do
       Autocomplete::OptionComponent.new(multiple: @multiple, **system_arguments)
     end

data/app/components/polaris/autocomplete_component.rb

@@ -1,5 +1,5 @@
 module Polaris
-  class AutocompleteComponent < NewComponent
+  class AutocompleteComponent < Component
     renders_one :text_field, ->(**system_arguments) do
       system_arguments[:data] ||= {}
       prepend_option(system_arguments[:data], :action, %w[
@@ -21,9 +21,15 @@ module Polaris
     end
     renders_one :empty_state
 
-    def initialize(multiple: false, url: nil, **system_arguments)
+    def initialize(
+      multiple: false,
+      url: nil,
+      selected: [],
+      **system_arguments
+    )
       @multiple = multiple
       @url = url
+      @selected = selected
       @system_arguments = system_arguments
     end
 
@@ -35,6 +41,7 @@ module Polaris
         if @url.present?
           opts[:data][:polaris_autocomplete_url_value] = @url
         end
+        opts[:data][:polaris_autocomplete_selected_value] = @selected
       end
     end
 

data/app/components/polaris/avatar_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class AvatarComponent < Polaris::NewComponent
+  class AvatarComponent < Polaris::Component
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
       small: "Polaris-Avatar--sizeSmall",

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 => "",

data/app/components/polaris/banner_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class BannerComponent < Polaris::NewComponent
+  class BannerComponent < Polaris::Component
     STATUS_DEFAULT = :default
     STATUS_MAPPINGS = {
       STATUS_DEFAULT => "",
@@ -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,

data/app/components/polaris/base_checkbox.rb

@@ -1,5 +1,5 @@
 module Polaris
-  class BaseCheckbox < Polaris::NewComponent
+  class BaseCheckbox < Polaris::Component
     def initialize(
       form: nil,
       attribute: nil,

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

@@ -1,5 +1,5 @@
 module Polaris
-  class BaseRadioButton < Polaris::NewComponent
+  class BaseRadioButton < Polaris::Component
     def initialize(
       form: nil,
       attribute: nil,

data/app/components/polaris/button_group_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ButtonGroupComponent < Polaris::NewComponent
+  class ButtonGroupComponent < Polaris::Component
     SPACING_DEFAULT = :default
     SPACING_MAPPINGS = {
       SPACING_DEFAULT => "",
@@ -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)

data/app/components/polaris/callout_card_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class CalloutCardComponent < Polaris::NewComponent
+  class CalloutCardComponent < Polaris::Component
     renders_one :primary_action, Polaris::ButtonComponent
     renders_one :secondary_action, ->(plain: true, **system_arguments) do
       Polaris::ButtonComponent.new(plain: plain, **system_arguments)

data/app/components/polaris/caption_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class CaptionComponent < Polaris::NewComponent
+  class CaptionComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = "p"

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

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

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

@@ -1,4 +1,4 @@
-class Polaris::Card::SectionComponent < Polaris::NewComponent
+class Polaris::Card::SectionComponent < Polaris::Component
   renders_many :subsections, "Polaris::Card::SubsectionComponent"
 
   def initialize(
@@ -28,7 +28,7 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
     @actions = actions.map { |a| a.merge(plain: true) }
   end
 
-  class Polaris::Card::SubsectionComponent < Polaris::NewComponent
+  class Polaris::Card::SubsectionComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = :div

data/app/components/polaris/card_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class CardComponent < Polaris::NewComponent
+  class CardComponent < Polaris::Component
     FOOTER_ACTION_ALIGNMENT_DEFAULT = :right
     FOOTER_ACTION_ALIGNMENT_MAPPINGS = {
       FOOTER_ACTION_ALIGNMENT_DEFAULT => "",

data/app/components/polaris/checkbox_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class CheckboxComponent < Polaris::NewComponent
+  class CheckboxComponent < Polaris::Component
     include ActiveModel::Validations
 
     attr_reader :checked

data/app/components/polaris/choice_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ChoiceComponent < Polaris::NewComponent
+  class ChoiceComponent < Polaris::Component
     def initialize(
       label:,
       label_hidden:,

data/app/components/polaris/choice_list_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ChoiceListComponent < Polaris::NewComponent
+  class ChoiceListComponent < Polaris::Component
     renders_many :checkboxes, ->(value:, disabled: false, **system_arguments) do
       Polaris::CheckboxComponent.new(
         form: @form,

data/app/components/polaris/component.rb

@@ -1,5 +1,10 @@
+# frozen_string_literal: true
+
 module Polaris
-  class Component < ApplicationComponent
+  class Component < ViewComponent::Base
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+    include OptionHelper
     include ViewHelper
   end
 end

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

@@ -1,4 +1,4 @@
-class Polaris::DataTable::CellComponent < Polaris::NewComponent
+class Polaris::DataTable::CellComponent < Polaris::Component
   ALIGNMENT_DEFAULT = :top
   ALIGNMENT_MAPPINGS = {
     top: "Polaris-DataTable__Cell--verticalAlignTop",

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

@@ -1,4 +1,4 @@
-class Polaris::DataTable::ColumnComponent < Polaris::NewComponent
+class Polaris::DataTable::ColumnComponent < Polaris::Component
   SORT_DEFAULT = false
   SORT_OPTIONS = [false, :asc, :desc]
 

data/app/components/polaris/data_table_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class DataTableComponent < Polaris::NewComponent
+  class DataTableComponent < Polaris::Component
     ALIGNMENT_DEFAULT = :top
     ALIGNMENT_OPTIONS = [:top, :bottom, :middle, :baseline]
 

data/app/components/polaris/description_list_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class DescriptionListComponent < Polaris::NewComponent
+  class DescriptionListComponent < Polaris::Component
     SPACING_DEFAULT = :loose
     SPACING_MAPPINGS = {
       SPACING_DEFAULT => "",
@@ -25,7 +25,7 @@ module Polaris
       items.any?
     end
 
-    class DescriptionListItemComponent < Polaris::NewComponent
+    class DescriptionListItemComponent < Polaris::Component
       def initialize(term:)
         @term = term
       end

data/app/components/polaris/display_text_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class DisplayTextComponent < Polaris::NewComponent
+  class DisplayTextComponent < Polaris::Component
     ELEMENT_DEFAULT = :p
     ELEMENT_OPTIONS = %i[p h1 h2 h3 h4 h5 h6]
 

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

@@ -0,0 +1,156 @@
+<%= render Polaris::LabelledComponent.new(**wrapper_arguments) do %>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <div
+      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
+      data-polaris-dropzone-target="overlay"
+    >
+      <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+        <% stack.item do %>
+          <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
+            <%= @overlay_text %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div
+      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
+      data-polaris-dropzone-target="errorOverlay"
+    >
+      <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+        <% stack.item do %>
+          <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
+            <%= @error_overlay_text %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="Polaris-DropZone__Container" data-polaris-dropzone-target="container">
+      <%= render Polaris::BaseComponent.new(**file_upload_arguments) do %>
+        <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+          <% unless @size == :medium %>
+            <% stack.item do %>
+              <img width="<%= @size == :small ? 20 : 40 %>" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt="">
+            <% end %>
+          <% end %>
+
+          <% unless @size == :small %>
+            <% stack.item do %>
+              <% if @size == :medium %>
+                <div class="Polaris-DropZone-FileUpload__ActionTitle">
+                  <%= @file_upload_button %>
+                </div>
+              <% else %>
+                <div class="Polaris-DropZone-FileUpload__Button">
+                  <%= @file_upload_button %>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+
+          <% unless @size == :small %>
+            <% stack.item do %>
+              <% help_text = capture do %>
+                <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
+                  <%= @file_upload_help %>
+                <% end %>
+              <% end %>
+
+              <% if @size == :medium %>
+                <%= polaris_caption { help_text } %>
+              <% else %>
+                <%= help_text %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
+        <%= polaris_spinner %>
+      </div>
+    </div>
+
+    <%= render Polaris::VisuallyHiddenComponent.new do %>
+      <% if @form.present? && @attribute.present? %>
+        <%= @form.file_field(@attribute, **input_options) %>
+      <% else %>
+        <%= file_field_tag(@name, **input_options) %>
+      <% end %>
+    <% end %>
+
+    <template data-polaris-dropzone-target="previewTemplate">
+      <%= tag.div(
+        data: { polaris_dropzone_target: "preview" },
+        class: [
+          "Polaris-DropZone__Preview",
+          "Polaris-DropZone__Preview--singleFile": !@multiple,
+          "Polaris-DropZone__Preview--sizeSmall": @size == :small
+        ]
+      ) do %>
+        <% if @size.in?(%i[small]) %>
+          <span class="target"></span>
+        <% else %>
+          <%= polaris_stack(vertical: true) do %>
+            <span class="target"></span>
+          <% end %>
+        <% end %>
+      <% end %>
+    </template>
+
+    <template data-polaris-dropzone-target="itemTemplate">
+      <% if @size.in?(%i[small]) %>
+        <%= polaris_thumbnail(
+          size: :small,
+          data: { target: "icon" },
+          style: "border: none; background: none;"
+        ) do |thumbnail| %>
+          <%= thumbnail.icon(name: "TimelineAttachmentMajor") %>
+        <% end %>
+        <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
+      <% else %>
+        <%= polaris_stack_item do %>
+          <%= polaris_stack(
+            alignment: :center,
+            vertical: !@multiple,
+            spacing: @multiple ? :default : :tight,
+          ) do |stack| %>
+            <% stack.item do %>
+              <%= polaris_thumbnail(
+                size: :small,
+                data: { target: "icon" },
+                style: "border: none; background: none;"
+              ) do |thumbnail| %>
+                <%= thumbnail.icon(name: "TimelineAttachmentMajor") %>
+              <% end %>
+              <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
+            <% end %>
+
+            <% stack.item(fill: true) do %>
+              <div data-target="content">
+                <%= polaris_caption do %>
+                  <%= polaris_text_subdued(data: { target: "file-size" }) { "SIZE" } %>
+                <% end %>
+              </div>
+
+              <%= polaris_progress_bar(
+                progress: 0,
+                size: :small,
+                data: { target: "progress-bar" },
+                classes: "Polaris--hidden",
+                style: "margin-top: 4px;"
+              ) %>
+
+              <%= polaris_inline_error(
+                data: { target: "upload-error" },
+                classes: "Polaris--hidden",
+                style: "margin-top: 4px;"
+              ) { @upload_error_text } %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </template>
+  <% end %>
+<% end %>

data/app/components/polaris/dropzone_component.rb

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+module Polaris
+  # Lets users upload files by dragging and dropping the files into an area on a page, or activating a button.
+  class DropzoneComponent < Polaris::Component
+    include ActiveModel::Validations
+
+    SIZE_DEFAULT = :extra_large
+    SIZE_MAPPINGS = {
+      small: "Polaris-DropZone--sizeSmall",
+      medium: "Polaris-DropZone--sizeMedium",
+      large: "Polaris-DropZone--sizeLarge",
+      extra_large: "Polaris-DropZone--sizeExtraLarge"
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    attr_reader :label_action
+
+    validates :label_action, type: Action, allow_nil: true
+
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      accept: "",
+      direct_upload: false,
+      multiple: true,
+      size: SIZE_DEFAULT,
+      drop_on_page: false,
+      preview: true,
+      outline: true,
+      overlay_text: "Drop files to upload",
+      error_overlay_text: "This file type isn't accepted",
+      upload_error_text: "File upload failed",
+      label: nil,
+      label_hidden: true,
+      label_action: nil,
+      disabled: false,
+      error: false,
+      file_upload_button: nil,
+      file_upload_help: "or drop files to upload",
+      file_upload_arguments: {},
+      wrapper_arguments: {},
+      input_options: {},
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @accept = accept
+      @direct_upload = direct_upload
+      @multiple = multiple
+      @size = size
+      @drop_on_page = drop_on_page
+      @preview = preview
+      @outline = outline
+      @overlay_text = overlay_text
+      @error_overlay_text = error_overlay_text
+      @upload_error_text = upload_error_text
+      @label = label
+      @label_hidden = label_hidden
+      @label_action = label_action
+      @disabled = disabled
+      @error = error
+      @file_upload_button = file_upload_button
+      @file_upload_button ||= "Add #{multiple ? "files" : "file"}"
+      @file_upload_help = file_upload_help
+      @file_upload_arguments = file_upload_arguments
+      @wrapper_arguments = wrapper_arguments
+      @input_options = input_options
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      {
+        tag: "div",
+        data: {
+          polaris_dropzone_accept_value: @accept,
+          polaris_dropzone_allow_multiple_value: @multiple.to_s,
+          polaris_dropzone_disabled_value: @disabled.to_s,
+          polaris_dropzone_disabled_class: "Polaris-DropZone--isDisabled",
+          polaris_dropzone_focused_value: "false",
+          polaris_dropzone_drop_on_page_value: @drop_on_page,
+          polaris_dropzone_render_preview_value: @preview,
+          polaris_dropzone_size_value: @size
+        }
+      }.deep_merge(@system_arguments).tap do |opts|
+        prepend_option(opts[:data], :controller, "polaris-dropzone")
+        prepend_option(opts[:data], :action, "click->polaris-dropzone#onClick #{drop_actions}")
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-DropZone",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, SIZE_DEFAULT)],
+          "Polaris-DropZone--hasOutline": @outline,
+          "Polaris-DropZone--isDisabled": @disabled,
+          "Polaris-DropZone--hasError": @error
+        )
+      end
+    end
+
+    def wrapper_arguments
+      {
+        form: @form,
+        attribute: @attribute,
+        name: @name,
+        label: @label,
+        label_hidden: @label_hidden,
+        label_action: @label_action,
+        error: @error
+      }.deep_merge(@wrapper_arguments)
+    end
+
+    def input_options
+      {
+        accept: @accept,
+        direct_upload: @direct_upload,
+        disabled: @disabled,
+        multiple: @multiple,
+        data: {polaris_dropzone_target: "input"}
+      }.deep_merge(@input_options).tap do |opts|
+        prepend_option(opts[:data], :action, "focus->polaris-dropzone#onFocus blur->polaris-dropzone#onBlur change->polaris-dropzone#onChange")
+      end
+    end
+
+    def file_upload_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-DropZone-FileUpload",
+          "Polaris-DropZone-FileUpload--large": @size.in?(%i[large extra_large]),
+          "Polaris-DropZone-FileUpload--small": @size == :small
+        ),
+        data: {
+          polaris_dropzone_target: "fileUpload"
+        }
+      }.deep_merge(@file_upload_arguments.except(:language))
+    end
+
+    def drop_actions
+      event_scope = @drop_on_page ? "@document" : ""
+
+      [
+        "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
+  end
+end

data/app/components/polaris/empty_state_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class EmptyStateComponent < Polaris::NewComponent
+  class EmptyStateComponent < Polaris::Component
     WITHIN_DEFAULT = :page
     WITHIN_MAPPINGS = {
       WITHIN_DEFAULT => "",

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

@@ -1,4 +1,4 @@
-class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
+class Polaris::ExceptionList::ItemComponent < Polaris::Component
   STATUS_DEFAULT = :default
   STATUS_MAPPINGS = {
     STATUS_DEFAULT => "",