polaris_view_components 0.5.0 → 0.6.0

data/app/components/polaris/list_component.rb

@@ -7,11 +7,11 @@ module Polaris
     TYPE_DEFAULT = :bullet
     TYPE_TAG_MAPPINGS = {
       bullet: :ul,
-      number: :ol,
+      number: :ol
     }
     TYPE_CLASS_MAPPINGS = {
       bullet: "",
-      number: "Polaris-List--typeNumber",
+      number: "Polaris-List--typeNumber"
     }
     TYPE_OPTIONS = TYPE_TAG_MAPPINGS.keys
 
@@ -24,7 +24,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-List",
-        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")],
+        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")]
       )
     end
 

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

@@ -0,0 +1,19 @@
+class Polaris::Modal::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-Modal-Section"
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**system_arguments)) { content }
+  end
+end

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

@@ -0,0 +1,79 @@
+<% modal_content = capture do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% end %>
+
+  <% if content.present? %>
+    <% if @sectioned %>
+      <%= render Polaris::Modal::SectionComponent.new do %>
+        <%= content %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <div>
+    <%= render(Polaris::BaseComponent.new(**dialog_arguments)) do %>
+      <div class="<%= modal_classes %>">
+        <div class="<%= header_classes %>">
+          <div class="Polaris-Modal-Header__Title">
+            <%= polaris_display_text(element: :h2, size: :small) do %>
+              <%= @title %>
+            <% end %>
+          </div>
+          <% if close_button.present? %>
+            <%= close_button %>
+          <% else %>
+            <%= render(Polaris::BaseComponent.new(**close_button_arguments)) do %>
+              <%= polaris_icon(name: "MobileCancelMajor", color: :base) %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <div class="Polaris-Modal__BodyWrapper">
+          <% if @scrollable %>
+            <%= polaris_scrollable(classes: "Polaris-Modal__Body") do %>
+              <%= modal_content %>
+            <% end %>
+          <% else %>
+            <%= modal_content %>
+          <% end %>
+        </div>
+
+        <% if render_footer? %>
+          <div class="Polaris-Modal-Footer">
+            <div class="Polaris-Modal-Footer__FooterContent">
+              <%= polaris_stack(alignment: :center) do |stack| %>
+                <% stack.item(fill: true) do %>
+                <% end %>
+
+                <% stack.item do %>
+                  <%= polaris_button_group do |group| %>
+                    <% if secondary_actions %>
+                      <% secondary_actions.each do |action| %>
+                        <% group.item do %>
+                          <%= action %>
+                        <% end %>
+                      <% end %>
+
+                      <% if primary_action %>
+                        <% group.item do %>
+                          <%= primary_action %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

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

@@ -10,10 +10,10 @@ module Polaris
       :trailing,
       :center,
       :fill,
-      :fill_evenly,
+      :fill_evenly
     ]
 
-    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
@@ -24,15 +24,16 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-PageActions",
+        "Polaris-PageActions"
       )
     end
 
     private
-      def stack_distribution
-        return @distribution if @distribution.present?
 
-        (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 %>