polaris_view_components 0.3.2 → 0.6.0

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,
@@ -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::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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Polaris
+  class SpacerComponent < Polaris::NewComponent
+    VERTICAL_SPACING_DEFAULT = :default
+    VERTICAL_SPACING_MAPPINGS = {
+      VERTICAL_SPACING_DEFAULT => "",
+      :extra_tight => "Polaris-Spacer--verticalSpacingExtraTight",
+      :tight => "Polaris-Spacer--verticalSpacingTight",
+      :base_tight => "Polaris-Spacer--verticalSpacingBaseTight",
+      :base => "Polaris-Spacer--verticalSpacingBase",
+      :loose => "Polaris-Spacer--verticalSpacingLoose",
+      :extra_loose => "Polaris-Spacer--verticalSpacingExtraLoose"
+    }
+    VERTICAL_SPACING_OPTIONS = VERTICAL_SPACING_MAPPINGS.keys
+
+    HORIZONTAL_SPACING_DEFAULT = :default
+    HORIZONTAL_SPACING_MAPPINGS = {
+      HORIZONTAL_SPACING_DEFAULT => "",
+      :extra_tight => "Polaris-Spacer--horizontalSpacingExtraTight",
+      :tight => "Polaris-Spacer--horizontalSpacingTight",
+      :base_tight => "Polaris-Spacer--horizontalSpacingBaseTight",
+      :base => "Polaris-Spacer--horizontalSpacingBase",
+      :loose => "Polaris-Spacer--horizontalSpacingLoose",
+      :extra_loose => "Polaris-Spacer--horizontalSpacingExtraLoose"
+    }
+    HORIZONTAL_SPACING_OPTIONS = HORIZONTAL_SPACING_MAPPINGS.keys
+
+    def initialize(
+      vertical: VERTICAL_SPACING_DEFAULT,
+      horizontal: HORIZONTAL_SPACING_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @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)]
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) do
+        content
+      end
+    end
+  end
+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_evently => "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, lambda { |**system_arguments|
+    renders_one :remove_button, ->(**system_arguments) do
       render Polaris::BaseButton.new(
         classes: "Polaris-Tag__Button",
         disabled: @disabled,
@@ -10,7 +10,7 @@ module Polaris
       ) do |button|
         polaris_icon(name: "CancelSmallMinor")
       end
-    }
+    end
 
     def initialize(clickable: false, disabled: false, **system_arguments)
       @clickable = clickable

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,19 +9,28 @@ 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"
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
     def initialize(
       variation: VARIATION_DEFAULT,
+      size: SIZE_DEFAULT,
       **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)]
       )
     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,11 +14,11 @@ 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|
-            list.item { error.full_message }
+            list.item { error.full_message.html_safe }
           end
         end
       end
@@ -26,7 +28,16 @@ module Polaris
       return if object.blank?
       return unless object.errors.key?(method)
 
-      object.errors.full_messages_for(method)&.first
+      raw object.errors.full_messages_for(method)&.first
+    end
+
+    def polaris_inline_error_for(method, **options, &block)
+      error_message = error_for(method)
+      return unless error_message
+
+      render(Polaris::InlineErrorComponent.new(**options, &block)) do
+        error_message
+      end
     end
 
     def polaris_text_field(method, **options, &block)
@@ -48,5 +59,21 @@ module Polaris
       end
       render Polaris::SelectComponent.new(form: self, attribute: method, **options, &block)
     end
+
+    def polaris_check_box(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      render Polaris::CheckboxComponent.new(form: self, attribute: method, **options, &block)
+    end
+
+    def polaris_radio_button(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      render Polaris::RadioButtonComponent.new(form: self, attribute: method, **options, &block)
+    end
   end
 end

data/app/helpers/polaris/url_helper.rb

@@ -1,14 +1,14 @@
 module Polaris
   module UrlHelper
     def polaris_button_to(name = nil, options = nil, html_options = nil, &block)
-      html_options, options = options, name if block_given?
-      options      ||= {}
+      html_options, options = options, name if block
+      options ||= {}
       html_options ||= {}
       html_options[:classes] = html_options[:class]
       html_options.delete(:class)
 
       button = Polaris::HeadlessButton.new(submit: true, **html_options)
-      button = button.with_content(name) unless block_given?
+      button = button.with_content(name) unless block
       content = render(button, &block)
 
       button_to(options, button.html_options) do