polaris_view_components 0.7.0 → 0.9.0

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

data/app/components/polaris/exception_list_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ExceptionListComponent < Polaris::NewComponent
+  class ExceptionListComponent < Polaris::Component
     renders_many :items, Polaris::ExceptionList::ItemComponent
 
     def initialize(**system_arguments)

data/app/components/polaris/filters_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class FiltersComponent < Polaris::NewComponent
+  class FiltersComponent < Polaris::Component
     renders_one :query, ->(**system_arguments) do
       QueryComponent.new(disabled: @disabled, **system_arguments)
     end
@@ -34,7 +34,7 @@ module Polaris
       )
     end
 
-    class QueryComponent < Polaris::NewComponent
+    class QueryComponent < Polaris::Component
       def initialize(clear_button: true, disabled: false, **system_arguments)
         @disabled = disabled
         @system_arguments = system_arguments.merge(
@@ -52,7 +52,7 @@ module Polaris
       end
     end
 
-    class ItemComponent < Polaris::NewComponent
+    class ItemComponent < Polaris::Component
       def initialize(label:, sectioned: true, width: nil, disabled: false, **system_arguments)
         @label = label
         @sectioned = sectioned

data/app/components/polaris/footer_help_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class FooterHelpComponent < Polaris::NewComponent
+  class FooterHelpComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:classes] = class_names(

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

@@ -1,4 +1,4 @@
-class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
+class Polaris::FormLayout::GroupComponent < Polaris::Component
   attr_reader :position
 
   renders_many :items, "GroupItemComponent"
@@ -22,7 +22,7 @@ class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
     )
   end
 
-  class GroupItemComponent < Polaris::NewComponent
+  class GroupItemComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = "div"

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

@@ -1,4 +1,4 @@
-class Polaris::FormLayout::ItemComponent < Polaris::NewComponent
+class Polaris::FormLayout::ItemComponent < Polaris::Component
   attr_reader :position
 
   def initialize(position:, **system_arguments)

data/app/components/polaris/form_layout_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class FormLayoutComponent < Polaris::NewComponent
+  class FormLayoutComponent < Polaris::Component
     renders_many :items, ->(**system_arguments) do
       @counter += 1
       Polaris::FormLayout::ItemComponent.new(position: @counter, **system_arguments)

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

@@ -1,4 +1,4 @@
-class Polaris::Frame::SaveBarComponent < Polaris::NewComponent
+class Polaris::Frame::SaveBarComponent < Polaris::Component
   renders_one :save_action, ->(**system_arguments) do
     Polaris::ButtonComponent.new(primary: true, **system_arguments)
   end

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

@@ -1,4 +1,4 @@
-class Polaris::Frame::TopBarComponent < Polaris::NewComponent
+class Polaris::Frame::TopBarComponent < Polaris::Component
   renders_one :user_menu, Polaris::TopBar::UserMenuComponent
 
   def initialize(logo:, **system_arguments)

data/app/components/polaris/frame_component.rb

@@ -1,5 +1,5 @@
 module Polaris
-  class FrameComponent < Polaris::NewComponent
+  class FrameComponent < Polaris::Component
     renders_one :top_bar, ->(**system_arguments) do
       Polaris::Frame::TopBarComponent.new(logo: @logo, **system_arguments)
     end

data/app/components/polaris/heading_component.rb

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

data/app/components/polaris/headless_button.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class HeadlessButton < Polaris::NewComponent
+  class HeadlessButton < Polaris::Component
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",

data/app/components/polaris/icon_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class IconComponent < Polaris::NewComponent
+  class IconComponent < Polaris::Component
     COLOR_DEFAULT = :default
     COLOR_MAPPINGS = {
       COLOR_DEFAULT => "",

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

@@ -1,4 +1,4 @@
-class Polaris::IndexTable::CellComponent < Polaris::NewComponent
+class Polaris::IndexTable::CellComponent < Polaris::Component
   def initialize(flush: false, **system_arguments)
     @flush = flush
     @system_arguments = system_arguments

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

@@ -1,4 +1,4 @@
-class Polaris::IndexTable::ColumnComponent < Polaris::NewComponent
+class Polaris::IndexTable::ColumnComponent < Polaris::Component
   attr_reader :title, :flush
 
   def initialize(title, flush: false, **system_arguments, &block)

data/app/components/polaris/index_table_component.rb

@@ -1,5 +1,5 @@
 module Polaris
-  class IndexTableComponent < Polaris::NewComponent
+  class IndexTableComponent < Polaris::Component
     renders_many :columns, ->(title, **system_arguments, &block) do
       IndexTable::ColumnComponent.new(title, **system_arguments, &block)
     end

data/app/components/polaris/inline_error_component.rb

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

data/app/components/polaris/keyboard_key_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Polaris
+  class KeyboardKeyComponent < Polaris::Component
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(opts[:classes], "Polaris-KeyboardKey")
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/label_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class LabelComponent < Polaris::NewComponent
+  class LabelComponent < Polaris::Component
     def initialize(
       form: nil,
       attribute: nil,

data/app/components/polaris/labelled_component.rb

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

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

@@ -2,7 +2,7 @@
 
 module Polaris
   module Layout
-    class AnnotatedSection < Polaris::NewComponent
+    class AnnotatedSection < Polaris::Component
       attr_reader :position
 
       def initialize(position:, title:, description: nil, **system_arguments)

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

@@ -2,7 +2,7 @@
 
 module Polaris
   module Layout
-    class Section < Polaris::NewComponent
+    class Section < Polaris::Component
       attr_reader :position
 
       def initialize(

data/app/components/polaris/layout_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class LayoutComponent < Polaris::NewComponent
+  class LayoutComponent < Polaris::Component
     # A list of sections
     #
     # @param secondary [Boolean] The section will act like a sidebar

data/app/components/polaris/link_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class LinkComponent < Polaris::NewComponent
+  class LinkComponent < Polaris::Component
     def initialize(
       url:,
       external: false,

data/app/components/polaris/list_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ListComponent < Polaris::NewComponent
+  class ListComponent < Polaris::Component
     renders_many :items, "ListItemComponent"
 
     TYPE_DEFAULT = :bullet
@@ -28,7 +28,7 @@ module Polaris
       )
     end
 
-    class ListItemComponent < Polaris::NewComponent
+    class ListItemComponent < Polaris::Component
       def initialize(**system_arguments)
         @system_arguments = system_arguments
         @system_arguments[:tag] = :li

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

@@ -1,4 +1,4 @@
-class Polaris::Modal::SectionComponent < Polaris::NewComponent
+class Polaris::Modal::SectionComponent < Polaris::Component
   def initialize(**system_arguments)
     @system_arguments = system_arguments
   end

data/app/components/polaris/modal_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ModalComponent < Polaris::NewComponent
+  class ModalComponent < Polaris::Component
     renders_one :close_button, ->(**system_arguments) do
       button_arguments = @close_button_arguments.deep_merge(system_arguments)
       render(Polaris::BaseComponent.new(**button_arguments)) do

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

@@ -1,4 +1,4 @@
-class Polaris::Navigation::ItemComponent < Polaris::NewComponent
+class Polaris::Navigation::ItemComponent < Polaris::Component
   renders_many :sub_items, Polaris::Navigation::ItemComponent
   renders_one :secondary_action, "SecondaryActionComponent"
 
@@ -47,7 +47,7 @@ class Polaris::Navigation::ItemComponent < Polaris::NewComponent
     sub_items.any?(&:selected)
   end
 
-  class SecondaryActionComponent < Polaris::NewComponent
+  class SecondaryActionComponent < Polaris::Component
     def initialize(url: nil, external: false, icon: nil, **system_arguments)
       @url = url
       @external = external

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

@@ -1,4 +1,4 @@
-class Polaris::Navigation::SectionComponent < Polaris::NewComponent
+class Polaris::Navigation::SectionComponent < Polaris::Component
   renders_many :items, Polaris::Navigation::ItemComponent
   renders_one :action, "ActionComponent"
 
@@ -26,7 +26,7 @@ class Polaris::Navigation::SectionComponent < Polaris::NewComponent
     end
   end
 
-  class ActionComponent < Polaris::NewComponent
+  class ActionComponent < Polaris::Component
     def initialize(url: nil, external: false, icon: nil, **system_arguments)
       @url = url
       @external = external

data/app/components/polaris/navigation_component.rb

@@ -1,5 +1,5 @@
 module Polaris
-  class NavigationComponent < Polaris::NewComponent
+  class NavigationComponent < Polaris::Component
     renders_many :sections, Polaris::Navigation::SectionComponent
     renders_many :items, Polaris::Navigation::ItemComponent
 

data/app/components/polaris/option_list/checkbox_component.rb

@@ -1,4 +1,4 @@
-class Polaris::OptionList::CheckboxComponent < Polaris::NewComponent
+class Polaris::OptionList::CheckboxComponent < Polaris::Component
   def initialize(
     label:,
     value:,

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

@@ -1,4 +1,4 @@
-class Polaris::OptionList::OptionComponent < Polaris::NewComponent
+class Polaris::OptionList::OptionComponent < Polaris::Component
   def initialize(**system_arguments)
     @system_arguments = system_arguments
   end

data/app/components/polaris/option_list/radio_button_component.rb

@@ -1,4 +1,4 @@
-class Polaris::OptionList::RadioButtonComponent < Polaris::NewComponent
+class Polaris::OptionList::RadioButtonComponent < Polaris::Component
   def initialize(
     label:,
     value:,

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

@@ -1,4 +1,4 @@
-class Polaris::OptionList::SectionComponent < Polaris::NewComponent
+class Polaris::OptionList::SectionComponent < Polaris::Component
   renders_many :options, Polaris::OptionList::OptionComponent
   renders_many :radio_buttons, ->(value:, **system_arguments) do
     Polaris::OptionList::RadioButtonComponent.new(

data/app/components/polaris/option_list_component.rb

@@ -1,5 +1,5 @@
 module Polaris
-  class OptionListComponent < Polaris::NewComponent
+  class OptionListComponent < Polaris::Component
     renders_many :sections, ->(**system_arguments) do
       Polaris::OptionList::SectionComponent.new(
         form: @form,

data/app/components/polaris/page_actions_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class PageActionsComponent < Polaris::NewComponent
+  class PageActionsComponent < Polaris::Component
     DISTRIBUTION_DEFAULT = nil
     DISTRIBUTION_OPTIONS = [
       DISTRIBUTION_DEFAULT,

data/app/components/polaris/page_component.rb

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

data/app/components/polaris/pagination_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class PaginationComponent < Polaris::NewComponent
+  class PaginationComponent < Polaris::Component
     def initialize(
       previous_url: nil,
       next_url: nil,

data/app/components/polaris/popover/pane_component.rb

@@ -1,4 +1,4 @@
-class Polaris::Popover::PaneComponent < Polaris::NewComponent
+class Polaris::Popover::PaneComponent < Polaris::Component
   renders_many :sections, Polaris::Popover::SectionComponent
 
   def initialize(fixed: false, sectioned: false, **system_arguments)

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

@@ -1,4 +1,4 @@
-class Polaris::Popover::SectionComponent < Polaris::NewComponent
+class Polaris::Popover::SectionComponent < Polaris::Component
   def initialize(**system_arguments)
     @system_arguments = system_arguments
   end

data/app/components/polaris/popover_component.rb

@@ -1,10 +1,10 @@
 module Polaris
-  class PopoverComponent < Polaris::NewComponent
+  class PopoverComponent < Polaris::Component
     ALIGNMENT_DEFAULT = :center
     ALIGNMENT_OPTIONS = [:left, :right, :center]
 
-    POSITION_DEFAULT = :below
-    POSITION_OPTIONS = [:above, :below]
+    POSITION_DEFAULT = :auto
+    POSITION_OPTIONS = [:auto, :above, :below]
 
     renders_one :button, ->(**system_arguments) do
       system_arguments[:data] ||= {}
@@ -98,7 +98,13 @@ module Polaris
     end
 
     def popperjs_placement
-      placement = @position == :above ? "top" : "bottom"
+      placement =
+        case @position
+        when :above then "top"
+        when :below then "bottom"
+        else
+          "auto"
+        end
       placement += "-start" if @alignment == :left
       placement += "-end" if @alignment == :right
       placement

data/app/components/polaris/progress_bar_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ProgressBarComponent < Polaris::NewComponent
+  class ProgressBarComponent < Polaris::Component
     COLOR_DEFAULT = :highlight
     COLOR_MAPPINGS = {
       COLOR_DEFAULT => "Polaris-ProgressBar--colorHighlight",

data/app/components/polaris/radio_button_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class RadioButtonComponent < Polaris::NewComponent
+  class RadioButtonComponent < Polaris::Component
     def initialize(
       form: nil,
       attribute: nil,

data/app/components/polaris/resource_item_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ResourceItemComponent < Polaris::NewComponent
+  class ResourceItemComponent < Polaris::Component
     CURSOR_DEFAULT = :default
     CURSOR_OPTIONS = %i[default pointer]
 
@@ -29,6 +29,7 @@ module Polaris
     def initialize(
       url: nil,
       vertical_alignment: ALIGNMENT_DEFAULT,
+      cursor: CURSOR_DEFAULT,
       selectable: false,
       offset: false,
       wrapper_arguments: {},
@@ -37,6 +38,7 @@ module Polaris
     )
       @url = url
       @vertical_alignment = vertical_alignment
+      @cursor = fetch_or_fallback(CURSOR_OPTIONS, cursor, CURSOR_DEFAULT)
       @selectable = selectable
       @offset = offset
       @wrapper_arguments = wrapper_arguments
@@ -79,7 +81,7 @@ module Polaris
           "Polaris-ResourceItem",
           "Polaris-ResourceItem--selectable": @selectable
         )
-        prepend_option(args, :style, "cursor: #{cursor};")
+        prepend_option(args, :style, "cursor: #{@cursor};")
         prepend_option(args[:data], :action, "click->polaris-resource-item#open")
       end
     end