polaris_view_components 0.5.0 → 0.6.0

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.rb

@@ -12,14 +12,14 @@ 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
   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::NewComponent
+    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

@@ -3,10 +3,10 @@
 module Polaris
   class SelectComponent < Polaris::NewComponent
     def initialize(
+      options:,
       form: nil,
       attribute: nil,
       name: nil,
-      options:,
       selected: nil,
       disabled_options: nil,
       label: nil,
@@ -42,7 +42,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Select",
         "Polaris-Select--disabled": disabled,
-        "Polaris-Select--error": error,
+        "Polaris-Select--error": error
       )
 
       @wrapper_arguments = {
@@ -54,7 +54,7 @@ module Polaris
         label_action: label_action,
         required: required,
         help_text: help_text,
-        error: error,
+        error: error
       }.merge(wrapper_arguments)
 
       @select_options = select_options

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::NewComponent
+    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

@@ -2,7 +2,7 @@
 
 module Polaris
   class ShopifyNavigationComponent < Polaris::NewComponent
-    renders_many :links, -> (**system_arguments) do
+    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
 
@@ -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

@@ -8,7 +8,7 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
+        "Polaris-SkeletonBodyText__SkeletonBodyTextContainer"
       )
     end
   end

data/app/components/polaris/spacer_component.rb

@@ -10,7 +10,7 @@ module Polaris
       :base_tight => "Polaris-Spacer--verticalSpacingBaseTight",
       :base => "Polaris-Spacer--verticalSpacingBase",
       :loose => "Polaris-Spacer--verticalSpacingLoose",
-      :extra_loose => "Polaris-Spacer--verticalSpacingExtraLoose",
+      :extra_loose => "Polaris-Spacer--verticalSpacingExtraLoose"
     }
     VERTICAL_SPACING_OPTIONS = VERTICAL_SPACING_MAPPINGS.keys
 
@@ -22,7 +22,7 @@ module Polaris
       :base_tight => "Polaris-Spacer--horizontalSpacingBaseTight",
       :base => "Polaris-Spacer--horizontalSpacingBase",
       :loose => "Polaris-Spacer--horizontalSpacingLoose",
-      :extra_loose => "Polaris-Spacer--horizontalSpacingExtraLoose",
+      :extra_loose => "Polaris-Spacer--horizontalSpacingExtraLoose"
     }
     HORIZONTAL_SPACING_OPTIONS = HORIZONTAL_SPACING_MAPPINGS.keys
 
@@ -37,7 +37,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Spacer",
         VERTICAL_SPACING_MAPPINGS[fetch_or_fallback(VERTICAL_SPACING_OPTIONS, vertical, VERTICAL_SPACING_DEFAULT)],
-        HORIZONTAL_SPACING_MAPPINGS[fetch_or_fallback(HORIZONTAL_SPACING_OPTIONS, horizontal, HORIZONTAL_SPACING_DEFAULT)],
+        HORIZONTAL_SPACING_MAPPINGS[fetch_or_fallback(HORIZONTAL_SPACING_OPTIONS, horizontal, HORIZONTAL_SPACING_DEFAULT)]
       )
     end
 

data/app/components/polaris/spinner_component.rb

@@ -5,7 +5,7 @@ module Polaris
     SIZE_DEFAULT = :large
     SIZE_MAPPINGS = {
       small: "Polaris-Spinner--sizeSmall",
-      large: "Polaris-Spinner--sizeLarge",
+      large: "Polaris-Spinner--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -18,7 +18,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Spinner",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
     end
   end

data/app/components/polaris/stack_component.rb

@@ -9,7 +9,7 @@ module Polaris
       :trailing => "Polaris-Stack--alignmentTrailing",
       :center => "Polaris-Stack--alignmentCenter",
       :fill => "Polaris-Stack--alignmentFill",
-      :baseline => "Polaris-Stack--alignmentBaseline",
+      :baseline => "Polaris-Stack--alignmentBaseline"
     }
     ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
 
@@ -21,7 +21,7 @@ module Polaris
       :trailing => "Polaris-Stack--distributionTrailing",
       :center => "Polaris-Stack--distributionCenter",
       :fill => "Polaris-Stack--distributionFill",
-      :fill_evenly => "Polaris-Stack--distributionFillEvenly",
+      :fill_evenly => "Polaris-Stack--distributionFillEvenly"
     }
     DISTRIBUTION_OPTIONS = DISTRIBUTION_MAPPINGS.keys
 
@@ -33,7 +33,7 @@ module Polaris
       :base_tight => "Polaris-Stack--spacingBaseTight",
       :loose => "Polaris-Stack--spacingLoose",
       :extra_loose => "Polaris-Stack--spacingExtraLoose",
-      :none => "Polaris-Stack--spacingNone",
+      :none => "Polaris-Stack--spacingNone"
     }
     SPACING_OPTIONS = SPACING_MAPPINGS.keys
 
@@ -56,7 +56,7 @@ module Polaris
         DISTRIBUTION_MAPPINGS[fetch_or_fallback(DISTRIBUTION_OPTIONS, distribution, DISTRIBUTION_DEFAULT)],
         SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
         "Polaris-Stack--vertical": vertical,
-        "Polaris-Stack--noWrap": !wrap,
+        "Polaris-Stack--noWrap": !wrap
       )
     end
 
@@ -67,7 +67,7 @@ module Polaris
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
           "Polaris-Stack__Item",
-          "Polaris-Stack__Item--fill": fill,
+          "Polaris-Stack__Item--fill": fill
         )
       end
 

data/app/components/polaris/subheading_component.rb

@@ -13,7 +13,7 @@ module Polaris
       @system_arguments[:tag] = element
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        'Polaris-Subheading'
+        "Polaris-Subheading"
       )
     end
 

data/app/components/polaris/tabs/tab_component.html.erb

@@ -0,0 +1,10 @@
+<li class="Polaris-Tabs__TabContainer" role="presentation">
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <span class="Polaris-Tabs__Title">
+      <%= @title %>
+      <% if badge.present? %>
+        <%= badge %>
+      <% end %>
+    </span>
+  <% end %>
+</li>

data/app/components/polaris/tabs/tab_component.rb

@@ -0,0 +1,34 @@
+class Polaris::Tabs::TabComponent < Polaris::NewComponent
+  renders_one :badge, Polaris::BadgeComponent
+
+  def initialize(
+    title:,
+    url: nil,
+    active: false,
+    **system_arguments
+  )
+    @title = title
+    @url = url
+    @active = active
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:rol] = "tab"
+      opts[:tabindex] = "0"
+      if @url.present?
+        opts[:tag] = "a"
+        opts[:href] = @url
+      else
+        opts[:tag] = "button"
+        opts[:type] = "button"
+      end
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Tabs__Tab",
+        "Polaris-Tabs__Tab--selected": @active
+      )
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/tabs_component.rb

@@ -0,0 +1,37 @@
+module Polaris
+  class TabsComponent < Polaris::NewComponent
+    renders_many :tabs, Polaris::Tabs::TabComponent
+
+    def initialize(fitted: false, wrapper_arguments: {}, **system_arguments)
+      @fitted = fitted
+      @wrapper_arguments = wrapper_arguments
+      @system_arguments = system_arguments
+    end
+
+    def wrapper_arguments
+      @wrapper_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @wrapper_arguments[:classes],
+          "Polaris-Tabs__Wrapper"
+        )
+      end
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "ul"
+        opts[:role] = "tablist"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Tabs",
+          "Polaris-Tabs--fitted": @fitted
+        )
+      end
+    end
+
+    def renders?
+      tabs.present?
+    end
+  end
+end

data/app/components/polaris/tag_component.rb

@@ -2,7 +2,7 @@
 
 module Polaris
   class TagComponent < Polaris::NewComponent
-    renders_one :remove_button, -> (**system_arguments) do
+    renders_one :remove_button, ->(**system_arguments) do
       render Polaris::BaseButton.new(
         classes: "Polaris-Tag__Button",
         disabled: @disabled,

data/app/components/polaris/text_container_component.rb

@@ -6,7 +6,7 @@ module Polaris
     SPACING_MAPPINGS = {
       SPACING_DEFAULT => "",
       :tight => "Polaris-TextContainer--spacingTight",
-      :loose => "Polaris-TextContainer--spacingLoose",
+      :loose => "Polaris-TextContainer--spacingLoose"
     }
     SPACING_OPTIONS = SPACING_MAPPINGS.keys
 
@@ -19,7 +19,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-TextContainer",
-        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
+        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)]
       )
     end
 

data/app/components/polaris/text_field_component.rb

@@ -13,7 +13,7 @@ module Polaris
       ALIGN_DEFAULT => "",
       :left => "Polaris-TextField__Input--alignLeft",
       :center => "Polaris-TextField__Input--alignCenter",
-      :right => "Polaris-TextField__Input--alignRight",
+      :right => "Polaris-TextField__Input--alignRight"
     }
     ALIGN_OPTIONS = ALIGN_MAPPINGS.keys
 
@@ -96,7 +96,7 @@ module Polaris
         label_action: @label_action,
         required: @required,
         help_text: @help_text,
-        error: @error,
+        error: @error
       }.deep_merge(@wrapper_arguments)
     end
 
@@ -105,8 +105,8 @@ module Polaris
         tag: "div",
         data: {
           polaris_text_field_has_value_class: "Polaris-TextField--hasValue",
-          polaris_text_field_clear_button_hidden_class: "Polaris-TextField__ClearButton--hidden",
-        },
+          polaris_text_field_clear_button_hidden_class: "Polaris-TextField__ClearButton--hidden"
+        }
       }.deep_merge(@system_arguments).tap do |opts|
         opts[:classes] = class_names(
           opts[:classes],
@@ -114,7 +114,7 @@ module Polaris
           "Polaris-TextField--disabled": @disabled,
           "Polaris-TextField--error": @error,
           "Polaris-TextField--hasValue": @value.present?,
-          "Polaris-TextField--multiline": @multiline,
+          "Polaris-TextField--multiline": @multiline
         )
         prepend_option(opts[:data], :controller, "polaris-text-field")
         if @show_character_count
@@ -132,13 +132,13 @@ module Polaris
         placeholder: @placeholder,
         maxlength: @maxlength,
         minlength: @minlength,
-        data: { polaris_text_field_target: "input" },
+        data: {polaris_text_field_target: "input"}
       }
       if @type == :number
         default_options.merge!({
           step: @step,
           min: @min,
-          max: @max,
+          max: @max
         })
       end
       if @multiline
@@ -151,7 +151,7 @@ module Polaris
           "Polaris-TextField__Input",
           @align_class,
           "Polaris-TextField--monospaced": @monospaced,
-          "Polaris-TextField__Input--suffixed": @suffix.present?,
+          "Polaris-TextField__Input--suffixed": @suffix.present?
         )
         prepend_option(opts[:data], :action, "polaris-text-field#syncValue")
       end

data/app/components/polaris/text_style_component.rb

@@ -9,14 +9,14 @@ module Polaris
       :negative => "Polaris-TextStyle--variationNegative",
       :strong => "Polaris-TextStyle--variationStrong",
       :subdued => "Polaris-TextStyle--variationSubdued",
-      :code => "Polaris-TextStyle--variationCode",
+      :code => "Polaris-TextStyle--variationCode"
     }
     VARIATION_OPTIONS = VARIATION_MAPPINGS.keys
 
     SIZE_DEFAULT = :default
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
-      small: "Polaris-TextStyle--sizeSmall",
+      :small => "Polaris-TextStyle--sizeSmall"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -26,11 +26,11 @@ module Polaris
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] = 'span'
+      @system_arguments[:tag] = "span"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         VARIATION_MAPPINGS[fetch_or_fallback(VARIATION_OPTIONS, variation, VARIATION_DEFAULT)],
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
     end
 

data/app/components/polaris/thumbnail_component.rb

@@ -6,7 +6,7 @@ module Polaris
     SIZE_MAPPINGS = {
       small: "Polaris-Thumbnail--sizeSmall",
       medium: "Polaris-Thumbnail--sizeMedium",
-      large: "Polaris-Thumbnail--sizeLarge",
+      large: "Polaris-Thumbnail--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -26,7 +26,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Thumbnail",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
       )
     end
 

data/app/helpers/polaris/form_builder.rb

@@ -1,5 +1,7 @@
 module Polaris
   class FormBuilder < ActionView::Helpers::FormBuilder
+    include ActionView::Helpers::OutputSafetyHelper
+
     attr_reader :template
 
     delegate :render, :pluralize, to: :template
@@ -12,7 +14,7 @@ module Polaris
 
       render Polaris::BannerComponent.new(
         title: "There's #{pluralize(object.errors.count, "error")} with this #{model_name}:",
-        status: :critical,
+        status: :critical
       ) do
         render(Polaris::ListComponent.new) do |list|
           object.errors.each do |error|
@@ -26,7 +28,7 @@ module Polaris
       return if object.blank?
       return unless object.errors.key?(method)
 
-      object.errors.full_messages_for(method)&.first.html_safe
+      raw object.errors.full_messages_for(method)&.first
     end
 
     def polaris_inline_error_for(method, **options, &block)