polaris_view_components 0.7.0 → 0.9.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/collapsible_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Polaris
+  class CollapsibleComponent < Polaris::Component
+    def initialize(
+      expand_on_print: false,
+      open: false,
+      **system_arguments
+    )
+      @expand_on_print = expand_on_print
+      @open = open
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        prepend_option(opts[:data], :controller, "polaris-collapsible")
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Collapsible",
+          "Polaris-Collapsible--isFullyClosed": !@open,
+          "Polaris-Collapsible--expandOnPrint": @expand_on_print
+        )
+        opts[:style] = class_names(
+          @open ? "max-height: none;" : "max-height: 0px;",
+          @open ? "overflow: visible;" : "overflow: hidden;"
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments)) { content }
+    end
+  end
+end

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 %>