polaris_view_components 0.4.0 → 0.8.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,15 +1,15 @@
 # frozen_string_literal: true
 
 module Polaris
-  class EmptyStateComponent < Polaris::NewComponent
+  class EmptyStateComponent < Polaris::Component
     WITHIN_DEFAULT = :page
     WITHIN_MAPPINGS = {
       WITHIN_DEFAULT => "",
-      container: "Polaris-EmptyState--withinContentContainer",
+      :container => "Polaris-EmptyState--withinContentContainer"
     }
     WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
 
-    renders_one :primary_action, -> (primary: true, **system_arguments) do
+    renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
     renders_one :secondary_action, Polaris::ButtonComponent
@@ -32,7 +32,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-EmptyState",
         WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
-        "Polaris-EmptyState--fullWidth": full_width,
+        "Polaris-EmptyState--fullWidth": full_width
       )
     end
   end

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

@@ -1,9 +1,9 @@
-class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
+class Polaris::ExceptionList::ItemComponent < Polaris::Component
   STATUS_DEFAULT = :default
   STATUS_MAPPINGS = {
     STATUS_DEFAULT => "",
     :critical => "Polaris-ExceptionList--statusCritical",
-    :warning => "Polaris-ExceptionList--statusWarning",
+    :warning => "Polaris-ExceptionList--statusWarning"
   }
   STATUS_OPTIONS = STATUS_MAPPINGS.keys
 
@@ -21,7 +21,7 @@ class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
       "Polaris-ExceptionList__Item",
-      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/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)
@@ -9,7 +9,7 @@ module Polaris
       @system_arguments[:tag] = "ul"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-ExceptionList",
+        "Polaris-ExceptionList"
       )
     end
 

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

@@ -0,0 +1,35 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
+    <div class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right">
+      <% if query.present? %>
+        <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
+          <div class="Polaris-Filters-ConnectedFilterControl__Item">
+            <%= query %>
+          </div>
+        </div>
+      <% end %>
+      <% if items.present? %>
+        <div class="<%= items_wrapper_classes %>">
+          <% items.each do |item| %>
+            <%= item %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <% if content.present? %>
+      <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
+        <%= content %>
+      </div>
+    <% end %>
+  </div>
+  <% if tags.present? %>
+    <div class="Polaris-Filters__TagsContainer">
+      <%= tags %>
+    </div>
+  <% end %>
+  <% if @help_text.present? %>
+    <div class="Polaris-Filters__HelpText">
+      <%= polaris_text_subdued { @help_text } %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/filters_component.rb

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module Polaris
+  class FiltersComponent < Polaris::Component
+    renders_one :query, ->(**system_arguments) do
+      QueryComponent.new(disabled: @disabled, **system_arguments)
+    end
+    renders_many :items, ->(**system_arguments) do
+      ItemComponent.new(disabled: @disabled, **system_arguments)
+    end
+    renders_one :tags
+
+    def initialize(disabled: false, help_text: nil, **system_arguments)
+      @disabled = disabled
+      @help_text = help_text
+      @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
+
+    def items_wrapper_classes
+      class_names(
+        "Polaris-Filters-ConnectedFilterControl__RightContainer",
+        "Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters",
+        "Polaris-Filters-ConnectedFilterControl--queryFieldHidden": @query.blank?
+      )
+    end
+
+    class QueryComponent < Polaris::Component
+      def initialize(clear_button: true, disabled: false, **system_arguments)
+        @disabled = disabled
+        @system_arguments = system_arguments.merge(
+          label_hidden: true,
+          clear_button: clear_button
+        )
+      end
+
+      def call
+        polaris_text_field(disabled: @disabled, **@system_arguments) do |text_field|
+          text_field.prefix do
+            polaris_icon(name: "SearchMinor")
+          end
+        end
+      end
+    end
+
+    class ItemComponent < Polaris::Component
+      def initialize(label:, sectioned: true, width: nil, disabled: false, **system_arguments)
+        @label = label
+        @sectioned = sectioned
+        @width = width
+        @disabled = disabled
+        @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-ConnectedFilterControl__Item"
+          )
+        end
+      end
+
+      def popover_arguments
+        {
+          sectioned: @sectioned,
+          style: ("width: #{@width}" if @width.present?)
+        }
+      end
+
+      def call
+        render(Polaris::BaseComponent.new(**system_arguments)) do
+          render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover|
+            popover.button(disclosure: true, disabled: @disabled) { @label }
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/polaris/footer_help_component.rb

@@ -1,12 +1,12 @@
 # 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(
         @system_arguments[:classes],
-        "Polaris-FooterHelp",
+        "Polaris-FooterHelp"
       )
     end
   end

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"
@@ -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,17 +18,17 @@ 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
 
-  class GroupItemComponent < Polaris::NewComponent
+  class GroupItemComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
       @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

@@ -1,4 +1,4 @@
-class Polaris::FormLayout::ItemComponent < Polaris::NewComponent
+class Polaris::FormLayout::ItemComponent < Polaris::Component
   attr_reader :position
 
   def initialize(position:, **system_arguments)
@@ -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

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class FormLayoutComponent < Polaris::NewComponent
-    renders_many :items, -> (**system_arguments) do
+  class FormLayoutComponent < Polaris::Component
+    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/frame/save_bar_component.html.erb

@@ -0,0 +1,23 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <% if @logo.present? && !@flush %>
+    <div class="Polaris-Frame-ContextualSaveBar__LogoContainer" style="width: <%= @logo.width %>">
+      <%= image_tag @logo.src, style: "width: #{@logo.width}", alt: @logo.alt %>
+    </div>
+  <% end %>
+
+  <div class="<%= content_classes %>">
+    <h2 class="Polaris-Frame-ContextualSaveBar__Message">
+      <%= @message %>
+    </h2>
+    <div class="Polaris-Frame-ContextualSaveBar__ActionContainer">
+      <%= polaris_stack(spacing: :tight) do |stack| %>
+        <% stack.item do %>
+          <%= discard_action %>
+        <% end %>
+        <% stack.item do %>
+          <%= save_action %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,31 @@
+class Polaris::Frame::SaveBarComponent < Polaris::Component
+  renders_one :save_action, ->(**system_arguments) do
+    Polaris::ButtonComponent.new(primary: true, **system_arguments)
+  end
+  renders_one :discard_action, Polaris::ButtonComponent
+
+  def initialize(message:, flush: false, full_width: false, logo: nil, **system_arguments)
+    @message = message
+    @flush = flush
+    @full_width = full_width
+    @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Frame-ContextualSaveBar"
+      )
+    end
+  end
+
+  def content_classes
+    class_names(
+      "Polaris-Frame-ContextualSaveBar__Contents",
+      "Polaris-Frame-ContextualSaveBar--fullWidth": @full_width
+    )
+  end
+end

data/app/components/polaris/frame/top_bar_component.html.erb

@@ -0,0 +1,30 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <button data-action="polaris-frame#openMenu" type="button" class="Polaris-TopBar__NavigationIcon">
+    <%= polaris_icon(name: "MobileHamburgerMajor") %>
+  </button>
+
+  <% if @logo.present? %>
+    <div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
+      <%= link_to(@logo.url,
+        class: "Polaris-TopBar__LogoLink",
+        style: "width: #{@logo.width}"
+      ) do %>
+        <%= image_tag @logo.src,
+          class: "Polaris-TopBar__Logo",
+          style: "width: #{@logo.width}",
+          alt: @logo.alt %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="Polaris-TopBar__Contents">
+    <%# FIXME: Not implemented yet %>
+    <div class="Polaris-TopBar__SearchField"></div>
+    <div class="Polaris-TopBar__SecondaryMenu"></div>
+    <div>
+      <div class="Polaris-TopBar-Menu__ActivatorWrapper">
+        <%= user_menu %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,18 @@
+class Polaris::Frame::TopBarComponent < Polaris::Component
+  renders_one :user_menu, Polaris::TopBar::UserMenuComponent
+
+  def initialize(logo:, **system_arguments)
+    @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-TopBar"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <% if top_bar.present? %>
+    <div class="Polaris-Frame__TopBar">
+      <%= top_bar %>
+    </div>
+  <% end %>
+
+  <% if navigation.present? %>
+    <div data-polaris-frame-target="navigation" class="Polaris-Frame__Navigation">
+      <%= navigation %>
+      <button
+        data-action="polaris-frame#closeMenu"
+        type="button"
+        class="Polaris-Frame__NavigationDismiss"
+        tabindex="-1"
+      >
+        <%= polaris_icon(name: "MobileCancelMajor") %>
+      </button>
+    </div>
+  <% end %>
+
+  <% if save_bar.present? %>
+    <div
+      data-polaris-frame-target="saveBar"
+      class="Polaris-Frame__ContextualSaveBar Polaris-Frame-CSSAnimation--startFade"
+    >
+      <%= save_bar %>
+    </div>
+  <% end %>
+
+  <div data-polaris-frame-target="navigationOverlay"></div>
+
+  <main class="Polaris-Frame__Main">
+    <div class="Polaris-Frame__Content">
+      <%= content %>
+    </div>
+  </main>
+<% end %>
+
+<% if toasts.present? %>
+  <div class="Polaris-Frame-ToastManager">
+    <%= toasts %>
+  </div>
+<% end %>

data/app/components/polaris/frame_component.rb

@@ -0,0 +1,33 @@
+module Polaris
+  class FrameComponent < Polaris::Component
+    renders_one :top_bar, ->(**system_arguments) do
+      Polaris::Frame::TopBarComponent.new(logo: @logo, **system_arguments)
+    end
+    renders_one :navigation, ->(**system_arguments) do
+      Polaris::NavigationComponent.new(logo: @logo, **system_arguments)
+    end
+    renders_one :save_bar, ->(**system_arguments) do
+      Polaris::Frame::SaveBarComponent.new(logo: @logo, **system_arguments)
+    end
+    renders_one :toasts
+
+    def initialize(logo: nil, **system_arguments)
+      @logo = logo && Polaris::Logo.new(**logo)
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        prepend_option(@system_arguments[:data], :controller, "polaris-frame")
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-Frame",
+          "Polaris-Frame--hasNav": navigation.present?,
+          "Polaris-Frame--hasTopBar": top_bar.present?
+        )
+      end
+    end
+  end
+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]
 
@@ -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>