polaris_view_components 0.3.2 → 0.6.0

data/app/components/polaris/modal_component.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ModalComponent < Polaris::NewComponent
+    renders_one :close_button, ->(**system_arguments) do
+      button_arguments = @close_button_arguments.deep_merge(system_arguments)
+      render(Polaris::BaseComponent.new(**button_arguments)) do
+        polaris_icon(name: "MobileCancelMajor", color: :base)
+      end
+    end
+    renders_many :sections, Polaris::Modal::SectionComponent
+    renders_one :primary_action, ->(primary: true, **system_arguments) do
+      Polaris::ButtonComponent.new(primary: primary, **system_arguments)
+    end
+    renders_many :secondary_actions, Polaris::ButtonComponent
+
+    def initialize(
+      title:,
+      open: false,
+      sectioned: true,
+      scrollable: true,
+      large: false,
+      small: false,
+      limit_height: false,
+      dialog_arguments: {},
+      **system_arguments
+    )
+      @title = title
+      @open = open
+      @sectioned = sectioned
+      @scrollable = scrollable
+      @large = large
+      @small = small
+      @limit_height = limit_height
+      @dialog_arguments = dialog_arguments
+      @system_arguments = system_arguments
+      @close_button_arguments = {
+        tag: "button",
+        type: "button",
+        classes: "Polaris-Modal-CloseButton",
+        aria: {label: "Close"}
+      }
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        prepend_option(opts[:data], :controller, "polaris-modal")
+        opts[:data][:polaris_modal_open_value] = @open
+        opts[:data][:polaris_modal_hidden_class] = "Polaris--hidden"
+        opts[:data][:polaris_modal_backdrop_class] = "Polaris-Backdrop"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Modal-Dialog__Container",
+          "Polaris--hidden"
+        )
+      end
+    end
+
+    def dialog_arguments
+      @dialog_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:role] = "dialog"
+        opts[:aria] ||= {}
+        opts[:aria][:modal] = "true"
+        opts[:tabindex] = "-1"
+        opts[:classes] = class_names(
+          @dialog_arguments[:classes],
+          "Polaris-Modal-Dialog"
+        )
+      end
+    end
+
+    def close_button_arguments
+      @close_button_arguments.deep_merge({
+        data: {action: "polaris-modal#close"}
+      })
+    end
+
+    def modal_classes
+      class_names(
+        "Polaris-Modal-Dialog__Modal",
+        "Polaris-Modal-Dialog--sizeLarge": @large,
+        "Polaris-Modal-Dialog--sizeSmall": @small,
+        "Polaris-Modal-Dialog--limitHeight": @limit_height
+      )
+    end
+
+    def header_classes
+      @title.present? ? "Polaris-Modal-Header" : "Polaris-Modal-Header--titleHidden"
+    end
+
+    def render_footer?
+      primary_action.present? || secondary_actions.any?
+    end
+  end
+end

data/app/components/polaris/page_actions_component.rb

@@ -2,23 +2,38 @@
 
 module Polaris
   class PageActionsComponent < Polaris::NewComponent
-    renders_one :primary_action, -> (primary: true, **system_arguments) do
+    DISTRIBUTION_DEFAULT = nil
+    DISTRIBUTION_OPTIONS = [
+      DISTRIBUTION_DEFAULT,
+      :equal_spacing,
+      :leading,
+      :trailing,
+      :center,
+      :fill,
+      :fill_evenly
+    ]
+
+    renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
     renders_many :secondary_actions, Polaris::ButtonComponent
 
-    def initialize(**system_arguments)
+    def initialize(distribution: DISTRIBUTION_DEFAULT, **system_arguments)
+      @distribution = fetch_or_fallback(DISTRIBUTION_OPTIONS, distribution, DISTRIBUTION_DEFAULT)
       @system_arguments = system_arguments
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-PageActions",
+        "Polaris-PageActions"
       )
     end
 
     private
-      def stack_distribution
-        (primary_action.present? && secondary_actions.any?) ? :equal_spacing : :trailing
-      end
+
+    def stack_distribution
+      return @distribution if @distribution.present?
+
+      primary_action.present? && secondary_actions.any? ? :equal_spacing : :trailing
+    end
   end
 end

data/app/components/polaris/page_component.rb

@@ -2,7 +2,7 @@
 
 module Polaris
   class PageComponent < Polaris::NewComponent
-    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_many :secondary_actions, Polaris::ButtonComponent
@@ -28,7 +28,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Page",
         "Polaris-Page--narrowWidth": narrow_width,
-        "Polaris-Page--fullWidth": full_width,
+        "Polaris-Page--fullWidth": full_width
       )
 
       @header_arguments = {}
@@ -38,14 +38,14 @@ module Polaris
         "Polaris-Page-Header--mobileView",
         "Polaris-Page-Header--mediumTitle",
         "Polaris-Page-Header--hasNavigation": back_url.present?,
-        "Polaris-Page-Header--noBreadcrumbs": back_url.blank?,
+        "Polaris-Page-Header--noBreadcrumbs": back_url.blank?
       )
 
       @content_arguments = {}
       @content_arguments[:tag] = "div"
       @content_arguments[:classes] = class_names(
         "Polaris-Page__Content",
-        "Polaris-Page--divider": divider,
+        "Polaris-Page--divider": divider
       )
     end
 

data/app/components/polaris/pagination_component.rb

@@ -16,11 +16,7 @@ module Polaris
       @system_arguments["aria-label"] = "Pagination"
 
       @button_group_arguments = {}
-      if label.present?
-        @button_group_arguments[:segmented] = false
-      else
-        @button_group_arguments[:segmented] = true
-      end
+      @button_group_arguments[:segmented] = !label.present?
     end
   end
 end

data/app/components/polaris/popover/pane_component.html.erb

@@ -0,0 +1,25 @@
+<% pane_content = capture do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% end %>
+
+  <% if @sectioned %>
+    <%= render Polaris::Popover::SectionComponent.new do %>
+      <%= content %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>
+
+<% if @fixed %>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <%= pane_content %>
+  <% end %>
+<% else %>
+  <%= render Polaris::ScrollableComponent.new(shadow: true, **system_arguments) do %>
+    <%= pane_content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,20 @@
+class Polaris::Popover::PaneComponent < Polaris::NewComponent
+  renders_many :sections, Polaris::Popover::SectionComponent
+
+  def initialize(fixed: false, sectioned: false, **system_arguments)
+    @fixed = fixed
+    @sectioned = sectioned
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Popover__Pane",
+        "Polaris-Popover__Pane--fixed": @fixed
+      )
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+class Polaris::Popover::SectionComponent < Polaris::NewComponent
+  def initialize(**system_arguments)
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Popover__Section"
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**system_arguments)) { content }
+  end
+end

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

@@ -0,0 +1,38 @@
+<div
+  data-controller="polaris-popover"
+  data-polaris-popover-active-value="<%= @active %>"
+  data-polaris-popover-placement-value="<%= popperjs_placement %>"
+  data-polaris-popover-open-class="Polaris-Popover__PopoverOverlay--open"
+  data-polaris-popover-closed-class="Polaris-Popover__PopoverOverlay--closed"
+  style="<%= "display: inline-block;" if @inline %>"
+>
+  <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 %>
+</div>

data/app/components/polaris/popover_component.rb

@@ -0,0 +1,90 @@
+module Polaris
+  class PopoverComponent < Polaris::NewComponent
+    ALIGNMENT_DEFAULT = :center
+    ALIGNMENT_OPTIONS = [:left, :right, :center]
+
+    POSITION_DEFAULT = :below
+    POSITION_OPTIONS = [: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,
+      **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)
+      @system_arguments = system_arguments
+      @popover_arguments = {}
+      @content_arguments = {}
+    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 = @position == :above ? "top" : "bottom"
+      placement += "-start" if @alignment == :left
+      placement += "-end" if @alignment == :right
+      placement
+    end
+  end
+end

data/app/components/polaris/progress_bar_component.rb

@@ -5,16 +5,16 @@ module Polaris
     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.rb

@@ -27,14 +27,14 @@ 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
@@ -43,7 +43,7 @@ module Polaris
       @input_options[:aria][:checked] = checked
       @input_options[:class] = class_names(
         @input_options[:classes],
-        "Polaris-RadioButton__Input",
+        "Polaris-RadioButton__Input"
       )
     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

@@ -8,21 +8,37 @@ module Polaris
     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

@@ -2,6 +2,8 @@
 
 module Polaris
   class ResourceListComponent < Polaris::NewComponent
+    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 %>