polaris_view_components 0.4.0 → 0.8.0

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

@@ -0,0 +1,31 @@
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <div data-polaris-popover-target="activator">
+    <% if activator.present? %>
+      <%= activator %>
+    <% elsif button.present? %>
+      <%= button %>
+    <% end %>
+  </div>
+
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
+      <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+      <div style="">
+        <div class="Polaris-Popover__Wrapper">
+          <%= render Polaris::BaseComponent.new(**content_arguments) do %>
+            <% if panes.present? %>
+              <% panes.each do |pane| %>
+                <%= pane %>
+              <% end %>
+            <% else %>
+              <%= render Polaris::Popover::PaneComponent.new(sectioned: @sectioned) do %>
+                <%= content %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+      <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/popover_component.rb

@@ -0,0 +1,113 @@
+module Polaris
+  class PopoverComponent < Polaris::Component
+    ALIGNMENT_DEFAULT = :center
+    ALIGNMENT_OPTIONS = [:left, :right, :center]
+
+    POSITION_DEFAULT = :auto
+    POSITION_OPTIONS = [:auto, :above, :below]
+
+    renders_one :button, ->(**system_arguments) do
+      system_arguments[:data] ||= {}
+      prepend_option(system_arguments[:data], :action, "polaris-popover#toggle click@window->polaris-popover#hide")
+      Polaris::ButtonComponent.new(**system_arguments)
+    end
+    renders_one :activator
+    renders_many :panes, Polaris::Popover::PaneComponent
+
+    def initialize(
+      active: false,
+      inline: true,
+      fixed: false,
+      fluid_content: false,
+      full_height: false,
+      full_width: false,
+      sectioned: false,
+      alignment: ALIGNMENT_DEFAULT,
+      position: POSITION_DEFAULT,
+      wrapper_arguments: {},
+      **system_arguments
+    )
+      @active = active
+      @inline = inline
+      @fixed = fixed
+      @fluid_content = fluid_content
+      @full_height = full_height
+      @full_width = full_width
+      @sectioned = sectioned
+      @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
+      @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
+      @wrapper_arguments = wrapper_arguments
+      @system_arguments = system_arguments
+      @popover_arguments = {}
+      @content_arguments = {}
+    end
+
+    def wrapper_arguments
+      @wrapper_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        prepend_option(opts[:data], :controller, "polaris-popover")
+        opts[:data][:polaris_popover_active_value] = @active
+        opts[:data][:polaris_popover_placement_value] = popperjs_placement
+        opts[:data][:polaris_popover_open_class] = "Polaris-Popover__PopoverOverlay--open"
+        opts[:data][:polaris_popover_closed_class] = "Polaris-Popover__PopoverOverlay--closed"
+        if @inline
+          prepend_option(opts, :style, "display: inline-block;")
+        end
+      end
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        opts[:data]["polaris_popover_target"] = "popover"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-PositionedOverlay",
+          "Polaris-Popover__PopoverOverlay",
+          "Polaris-Popover__PopoverOverlay--closed",
+          "Polaris-Popover__PopoverOverlay--fixed": @fixed
+        )
+      end
+    end
+
+    def popover_arguments
+      @popover_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @content_arguments[:classes],
+          "Polaris-Popover",
+          "Polaris-Popover--fullWidth": @full_width,
+          "Polaris-Popover--positionedAbove": @position == :above
+        )
+      end
+    end
+
+    def content_arguments
+      @content_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:tabindex] ||= "-1"
+        opts[:classes] = class_names(
+          @content_arguments[:classes],
+          "Polaris-Popover__Content",
+          "Polaris-Popover__Content--fluidContent": @fluid_content,
+          "Polaris-Popover__Content--fullHeight": @full_height
+        )
+      end
+    end
+
+    def popperjs_placement
+      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
+    end
+  end
+end

data/app/components/polaris/progress_bar_component.rb

@@ -1,20 +1,20 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ProgressBarComponent < Polaris::NewComponent
+  class ProgressBarComponent < Polaris::Component
     COLOR_DEFAULT = :highlight
     COLOR_MAPPINGS = {
       COLOR_DEFAULT => "Polaris-ProgressBar--colorHighlight",
-      primary: "Polaris-ProgressBar--colorPrimary",
-      success: "Polaris-ProgressBar--colorSuccess",
+      :primary => "Polaris-ProgressBar--colorPrimary",
+      :success => "Polaris-ProgressBar--colorSuccess"
     }
     COLOR_OPTIONS = COLOR_MAPPINGS.keys
 
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "Polaris-ProgressBar--sizeMedium",
-      small: "Polaris-ProgressBar--sizeSmall",
-      large: "Polaris-ProgressBar--sizeLarge",
+      :small => "Polaris-ProgressBar--sizeSmall",
+      :large => "Polaris-ProgressBar--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -31,7 +31,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-ProgressBar",
         COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
 
       @animated = animated

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

@@ -1,11 +1,6 @@
 <%= render Polaris::ChoiceComponent.new(**wrapper_arguments) do %>
   <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
-    <% if @form.present? && @attribute.present? %>
-      <%= @form.radio_button(@attribute, @value, @input_options) %>
-    <% else %>
-      <%= radio_button_tag(@name, @value, @checked, @input_options) %>
-    <% end %>
-
+    <%= radio_button %>
     <span class="Polaris-RadioButton__Backdrop"></span>
   <% end %>
 <% end %>

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,
@@ -20,6 +20,7 @@ module Polaris
       @attribute = attribute
       @name = name
       @checked = checked
+      @disabled = disabled
       @value = value
 
       @system_arguments = system_arguments
@@ -27,23 +28,20 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-RadioButton",
-        "Polaris-RadioButton--labelHidden": label_hidden,
+        "Polaris-RadioButton--labelHidden": label_hidden
       )
 
       @wrapper_arguments = {
         label: label,
         label_hidden: label_hidden,
         help_text: help_text,
-        disabled: disabled,
+        disabled: disabled
       }.merge(wrapper_arguments)
 
       @input_options = input_options
-      @input_options[:aria] ||= {}
-      @input_options[:disabled] = true if disabled
-      @input_options[:aria][:checked] = checked
-      @input_options[:class] = class_names(
+      @input_options[:classes] = class_names(
         @input_options[:classes],
-        "Polaris-RadioButton__Input",
+        "Polaris-RadioButton__Input"
       )
     end
 
@@ -51,5 +49,17 @@ module Polaris
       @wrapper_arguments[:children_content] = content
       @wrapper_arguments
     end
+
+    def radio_button
+      render Polaris::BaseRadioButton.new(
+        form: @form,
+        attribute: @attribute,
+        name: @name,
+        checked: @checked,
+        disabled: @disabled,
+        value: @value,
+        **@input_options
+      )
+    end
   end
 end

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

@@ -11,12 +11,22 @@
       <% end %>
 
       <%= render(Polaris::BaseComponent.new(**container_arguments)) do %>
-        <% if media.present? %>
-          <div class="Polaris-ResourceItem__Owned">
-            <div class="Polaris-ResourceItem__Media">
-              <%= media %>
-            </div>
-          </div>
+        <% if owned? %>
+          <%= render(Polaris::BaseComponent.new(**owned_arguments)) do %>
+            <% if checkbox.present? || radio_button.present? %>
+              <div class="Polaris-ResourceItem__Handle">
+                <div class="Polaris-ResourceItem__CheckboxWrapper">
+                  <%= checkbox.presence || radio_button %>
+                </div>
+              </div>
+            <% end %>
+
+            <% if media.present? %>
+              <div class="Polaris-ResourceItem__Media">
+                <%= media %>
+              </div>
+            <% end %>
+          <% end %>
         <% end %>
         <div class="Polaris-ResourceItem__Content">
           <%= content %>

data/app/components/polaris/resource_item_component.rb

@@ -1,28 +1,44 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ResourceItemComponent < Polaris::NewComponent
+  class ResourceItemComponent < Polaris::Component
     CURSOR_DEFAULT = :default
     CURSOR_OPTIONS = %i[default pointer]
 
     ALIGNMENT_DEFAULT = :default
     ALIGNMENT_MAPPINGS = {
       ALIGNMENT_DEFAULT => "",
-      center: "Polaris-ResourceItem--alignmentCenter",
+      :center => "Polaris-ResourceItem--alignmentCenter"
     }
     ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
 
+    renders_one :checkbox, ->(**system_arguments) do
+      Polaris::CheckboxComponent.new(
+        label_hidden: true,
+        **system_arguments
+      )
+    end
+    renders_one :radio_button, ->(**system_arguments) do
+      Polaris::RadioButtonComponent.new(
+        label_hidden: true,
+        **system_arguments
+      )
+    end
     renders_one :media
 
     def initialize(
       url: nil,
       vertical_alignment: ALIGNMENT_DEFAULT,
+      selectable: false,
+      offset: false,
       wrapper_arguments: {},
       container_arguments: {},
       **system_arguments
     )
       @url = url
       @vertical_alignment = vertical_alignment
+      @selectable = selectable
+      @offset = offset
       @wrapper_arguments = wrapper_arguments
       @container_arguments = container_arguments
       @system_arguments = system_arguments
@@ -31,11 +47,11 @@ module Polaris
     def wrapper_arguments
       {
         tag: "li",
-        data: {},
+        data: {}
       }.deep_merge(@wrapper_arguments).tap do |args|
         args[:classes] = class_names(
           args[:classes],
-          "Polaris-ResourceItem__ListItem",
+          "Polaris-ResourceItem__ListItem"
         )
         prepend_option(args[:data], :controller, "polaris-resource-item")
       end
@@ -43,12 +59,12 @@ module Polaris
 
     def container_arguments
       {
-        tag: "div",
+        tag: "div"
       }.deep_merge(@container_arguments).tap do |args|
         args[:classes] = class_names(
           args[:classes],
           "Polaris-ResourceItem__Container",
-          ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)],
+          ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)]
         )
       end
     end
@@ -56,20 +72,37 @@ module Polaris
     def system_arguments
       {
         tag: "div",
-        data: {},
+        data: {}
       }.deep_merge(@system_arguments).tap do |args|
         args[:classes] = class_names(
           args[:classes],
           "Polaris-ResourceItem",
+          "Polaris-ResourceItem--selectable": @selectable
         )
         prepend_option(args, :style, "cursor: #{cursor};")
         prepend_option(args[:data], :action, "click->polaris-resource-item#open")
       end
     end
 
+    def owned?
+      checkbox.present? || radio_button.present? || media.present?
+    end
+
+    def owned_arguments
+      {
+        tag: "div",
+        classes: class_names(
+          "Polaris-ResourceItem__Owned",
+          "Polaris-ResourceItem__OwnedNoMedia": media.blank?,
+          "Polaris-ResourceItem__Owned--offset": @offset
+        )
+      }
+    end
+
     private
-      def cursor
-        @url.present? ? "pointer" : "default"
-      end
+
+    def cursor
+      @url.present? ? "pointer" : "default"
+    end
   end
 end

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

@@ -0,0 +1,10 @@
+<%= render(Polaris::BaseComponent.new(**@wrapper_arguments)) do %>
+  <% if filters.present? %>
+    <div class="Polaris-ResourceList__FiltersWrapper">
+      <%= filters %>
+    </div>
+  <% end %>
+  <%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/polaris/resource_list_component.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ResourceListComponent < Polaris::NewComponent
+  class ResourceListComponent < Polaris::Component
+    renders_one :filters, Polaris::FiltersComponent
+
     def initialize(
       wrapper_arguments: {},
       **system_arguments
@@ -10,23 +12,15 @@ module Polaris
       @wrapper_arguments[:tag] = "div"
       @wrapper_arguments[:classes] = class_names(
         @wrapper_arguments[:classes],
-        "Polaris-ResourceList__ResourceListWrapper",
+        "Polaris-ResourceList__ResourceListWrapper"
       )
 
       @system_arguments = system_arguments
       @system_arguments[:tag] = "ul"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-ResourceList",
+        "Polaris-ResourceList"
       )
     end
-
-    def call
-      render(Polaris::BaseComponent.new(**@wrapper_arguments)) do
-        render(Polaris::BaseComponent.new(**@system_arguments)) do
-          content
-        end
-      end
-    end
   end
 end

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

@@ -0,0 +1,5 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <span data-polaris-scrollable-target="topEdge"></span>
+  <%= content %>
+  <span data-polaris-scrollable-target="bottomEdge"></span>
+<% end %>

data/app/components/polaris/scrollable_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ScrollableComponent < Polaris::Component
+    def initialize(
+      height: nil,
+      width: nil,
+      vertical: true,
+      horizontal: false,
+      shadow: false,
+      focusable: false,
+      **system_arguments
+    )
+      @height = height
+      @width = width
+      @vertical = vertical
+      @horizontal = horizontal
+      @shadow = shadow
+      @focusable = focusable
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      {
+        tag: "div",
+        data: {
+          polaris_scrollable_shadow_value: @shadow,
+          polaris_scrollable_top_shadow_class: "Polaris-Scrollable--hasTopShadow",
+          polaris_scrollable_bottom_shadow_class: "Polaris-Scrollable--hasBottomShadow"
+        }
+      }.deep_merge(@system_arguments).tap do |opts|
+        prepend_option(opts[:data], :controller, "polaris-scrollable")
+        opts[:tabindex] = "0" if @focusable
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Scrollable",
+          "Polaris-Scrollable--horizontal" => @horizontal,
+          "Polaris-Scrollable--vertical" => @vertical
+        )
+        opts[:style] = class_names(
+          @system_arguments[:style],
+          "height: #{@height};" => @height.present?,
+          "width: #{@width};" => @width.present?
+        )
+      end
+    end
+  end
+end

data/app/components/polaris/select_component.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SelectComponent < Polaris::NewComponent
+  class SelectComponent < Polaris::Component
     def initialize(
+      options:,
       form: nil,
       attribute: nil,
       name: nil,
-      options:,
       selected: nil,
       disabled_options: nil,
       label: nil,
@@ -37,11 +37,12 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:data] ||= {}
       prepend_option(@system_arguments[:data], :controller, "polaris-select")
+      prepend_option(@system_arguments[:data], :selected_value, @selected)
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Select",
         "Polaris-Select--disabled": disabled,
-        "Polaris-Select--error": error,
+        "Polaris-Select--error": error
       )
 
       @wrapper_arguments = {
@@ -53,15 +54,17 @@ module Polaris
         label_action: label_action,
         required: required,
         help_text: help_text,
-        error: error,
+        error: error
       }.merge(wrapper_arguments)
 
-      @select_options = {}
+      @select_options = select_options
 
       @input_options = input_options
+      @input_options.deep_merge!(select_options) unless @form
       @input_options[:class] = class_names(@input_options[:classes], "Polaris-Select__Input")
       @input_options[:disabled] = disabled
       @input_options[:data] ||= {}
+      prepend_option(@input_options[:data], :polaris_select_target, "select")
       prepend_option(@input_options[:data], :action, "polaris-select#update")
     end
 
@@ -71,7 +74,9 @@ module Polaris
 
     def selected_option
       option = @options.to_a.find { |i| i.last.to_s == @selected.to_s }
-      option ? option.first : @options.first.first
+      return unless option
+
+      option.first
     end
   end
 end

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

@@ -0,0 +1,10 @@
+<%= polaris_card do %>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <div class="Polaris-SettingAction__Setting">
+      <%= content %>
+    </div>
+    <div class="Polaris-SettingAction__Action">
+      <%= action %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/setting_toggle_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Polaris
+  class SettingToggleComponent < Polaris::Component
+    renders_one :action, ->(**system_arguments) do
+      Polaris::ButtonComponent.new(primary: !@enabled, **system_arguments)
+    end
+
+    def initialize(enabled: false, **system_arguments)
+      @enabled = enabled
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-SettingAction"
+        )
+      end
+    end
+  end
+end

data/app/components/polaris/shopify_navigation_component.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ShopifyNavigationComponent < Polaris::NewComponent
-    renders_many :links, -> (**system_arguments) do
+  class ShopifyNavigationComponent < Polaris::Component
+    renders_many :links, ->(**system_arguments) do
       ShopifyNavigationLinkComponent.new(auto_detect_active: @auto_detect_active, **system_arguments)
     end
 
@@ -13,7 +13,7 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "shp-Navigation",
+        "shp-Navigation"
       )
     end
 
@@ -21,7 +21,7 @@ module Polaris
       links.any?
     end
 
-    class ShopifyNavigationLinkComponent < Polaris::NewComponent
+    class ShopifyNavigationLinkComponent < Polaris::Component
       def initialize(url:, auto_detect_active:, active: false, **system_arguments)
         @url = url
         @auto_detect_active = auto_detect_active
@@ -42,13 +42,13 @@ module Polaris
           tag: "a",
           href: @url,
           role: "tab",
-          data: { polaris_unstyled: true },
-          aria: {},
+          data: {polaris_unstyled: true},
+          aria: {}
         }.deep_merge(@system_arguments).tap do |args|
           args[:aria][:selected] = @active || detect_active(@url)
           args[:classes] = class_names(
             args[:classes],
-            "shp-Navigation_Link",
+            "shp-Navigation_Link"
           )
         end
       end
@@ -56,7 +56,7 @@ module Polaris
       def detect_active(url)
         return unless @auto_detect_active
 
-        request.path.include?(url.split('?').first)
+        request.path.include?(url.split("?").first)
       end
     end
   end

data/app/components/polaris/skeleton_body_text_component.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SkeletonBodyTextComponent < Polaris::NewComponent
+  class SkeletonBodyTextComponent < Polaris::Component
     def initialize(lines: 3, **system_arguments)
       @lines = lines
       @system_arguments = system_arguments
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
+        "Polaris-SkeletonBodyText__SkeletonBodyTextContainer"
       )
     end
   end