polaris_view_components 0.4.0 → 0.8.0

data/app/components/polaris/spacer_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SpacerComponent < Polaris::NewComponent
+  class SpacerComponent < Polaris::Component
     VERTICAL_SPACING_DEFAULT = :default
     VERTICAL_SPACING_MAPPINGS = {
       VERTICAL_SPACING_DEFAULT => "",
@@ -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

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SpinnerComponent < Polaris::NewComponent
+  class SpinnerComponent < Polaris::Component
     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/item_component.rb

@@ -0,0 +1,15 @@
+class Polaris::Stack::ItemComponent < Polaris::Component
+  def initialize(fill: false, **system_arguments)
+    @system_arguments = system_arguments
+    @system_arguments[:tag] = "div"
+    @system_arguments[:classes] = class_names(
+      @system_arguments[:classes],
+      "Polaris-Stack__Item",
+      "Polaris-Stack__Item--fill": fill
+    )
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+  end
+end

data/app/components/polaris/stack_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class StackComponent < Polaris::NewComponent
+  class StackComponent < Polaris::Component
     ALIGNMENT_DEFAULT = :default
     ALIGNMENT_MAPPINGS = {
       ALIGNMENT_DEFAULT => "",
@@ -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,11 +33,11 @@ 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
 
-    renders_many :items, "StackItemComponent"
+    renders_many :items, Polaris::Stack::ItemComponent
 
     def initialize(
       alignment: ALIGNMENT_DEFAULT,
@@ -56,24 +56,8 @@ 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
-
-    class StackItemComponent < Polaris::NewComponent
-      def initialize(fill: false, **system_arguments)
-        @system_arguments = system_arguments
-        @system_arguments[:tag] = "div"
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "Polaris-Stack__Item",
-          "Polaris-Stack__Item--fill": fill,
-        )
-      end
-
-      def call
-        render(Polaris::BaseComponent.new(**@system_arguments)) { content }
-      end
-    end
   end
 end

data/app/components/polaris/subheading_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SubheadingComponent < Polaris::NewComponent
+  class SubheadingComponent < Polaris::Component
     ELEMENT_DEFAULT = :h3
     ELEMENT_OPTIONS = %i[p h1 h2 h3 h4 h5 h6]
 
@@ -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::Component
+  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::Component
+    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

@@ -1,11 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class TagComponent < Polaris::NewComponent
-    renders_one :remove_button, -> (**system_arguments) do
+  class TagComponent < Polaris::Component
+    renders_one :remove_button, ->(type: :button, **system_arguments) do
       render Polaris::BaseButton.new(
         classes: "Polaris-Tag__Button",
         disabled: @disabled,
+        type: type,
         **system_arguments
       ) do |button|
         polaris_icon(name: "CancelSmallMinor")

data/app/components/polaris/text_container_component.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class TextContainerComponent < Polaris::NewComponent
+  class TextContainerComponent < Polaris::Component
     SPACING_DEFAULT = :default
     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

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class TextFieldComponent < Polaris::NewComponent
+  class TextFieldComponent < Polaris::Component
     TYPE_DEFAULT = :text
     TYPE_OPTIONS = %i[
       text number email password search tel url date
@@ -13,14 +13,14 @@ 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
 
     attr_reader :value
 
-    renders_one :prefix
-    renders_one :suffix
+    renders_one :prefix, "Affix"
+    renders_one :suffix, "Affix"
     renders_one :connected_left
     renders_one :connected_right
 
@@ -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
@@ -179,5 +179,19 @@ module Polaris
     def render_number_buttons?
       @type == :number && !@disabled
     end
+
+    class Affix < Polaris::Component
+      def initialize(icon: nil)
+        @icon = icon
+      end
+
+      def call
+        if @icon.present?
+          render Polaris::IconComponent.new(name: @icon)
+        else
+          content
+        end
+      end
+    end
   end
 end

data/app/components/polaris/text_style_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class TextStyleComponent < Polaris::NewComponent
+  class TextStyleComponent < Polaris::Component
     VARIATION_DEFAULT = :default
     VARIATION_MAPPINGS = {
       VARIATION_DEFAULT => "",
@@ -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

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ThumbnailComponent < Polaris::NewComponent
+  class ThumbnailComponent < Polaris::Component
     SIZE_DEFAULT = :medium
     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/components/polaris/toast_component.html.erb

@@ -0,0 +1,21 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <div style="<%= polaris_inversed_colors %>">
+    <div class="<%= toast_classes %>">
+      <%= content %>
+
+      <% if action.present? %>
+        <div class="Polaris-Frame-Toast__Action">
+          <%= action %>
+        </div>
+      <% end %>
+
+      <button
+        data-action="polaris-toast#close"
+        type="button"
+        class="Polaris-Frame-Toast__CloseButton"
+      >
+        <%= polaris_icon(name: "MobileCancelMajor") %>
+      </button>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/toast_component.rb

@@ -0,0 +1,40 @@
+class Polaris::ToastComponent < Polaris::Component
+  renders_one :action, ->(**system_arguments) do
+    Polaris::ButtonComponent.new(plain: true, monochrome: true, **system_arguments)
+  end
+
+  def initialize(
+    hidden: false,
+    duration: nil,
+    error: false,
+    **system_arguments
+  )
+    @hidden = hidden
+    @duration = duration
+    @error = error
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:data] ||= {}
+      prepend_option(opts[:data], :controller, "polaris-toast")
+      opts[:data][:polaris_toast_hidden_value] = @hidden
+      opts[:data][:polaris_toast_duration_value] = @duration
+      opts[:data][:polaris_toast_has_action_value] = action.present?
+      opts[:classes] = class_names(
+        opts[:classes],
+        "Polaris-Frame-ToastManager__ToastWrapper",
+        "Polaris-Frame-ToastManager--toastWrapperEnterDone": !@hidden
+      )
+    end
+  end
+
+  def toast_classes
+    class_names(
+      "Polaris-Frame-Toast",
+      "Polaris-Frame-Toast--error": @error
+    )
+  end
+end

data/app/components/polaris/top_bar/user_menu_component.html.erb

@@ -0,0 +1,19 @@
+<%= polaris_popover(alignment: :left) do |popover| %>
+  <% popover.activator do %>
+    <button
+      type="button"
+      class="Polaris-TopBar-Menu__Activator"
+      data-action="polaris-popover#toggle click@window->polaris-popover#hide"
+    >
+      <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
+        <%= avatar %>
+      </div>
+      <span class="Polaris-TopBar-UserMenu__Details">
+        <p class="Polaris-TopBar-UserMenu__Name"><%= @name %></p>
+        <p class="Polaris-TopBar-UserMenu__Detail"><%= @detail %></p>
+      </span>
+    </button>
+  <% end %>
+
+  <%= content %>
+<% end %>

data/app/components/polaris/top_bar/user_menu_component.rb

@@ -0,0 +1,9 @@
+class Polaris::TopBar::UserMenuComponent < Polaris::Component
+  renders_one :avatar, Polaris::AvatarComponent
+
+  def initialize(name:, detail:, **system_arguments)
+    @name = name
+    @detail = detail
+    @system_arguments = system_arguments
+  end
+end

data/app/components/polaris/visually_hidden_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class VisuallyHiddenComponent < Polaris::NewComponent
+  class VisuallyHiddenComponent < Polaris::Component
     def initialize
     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
@@ -8,15 +10,16 @@ module Polaris
       return if object.blank?
       return unless object.errors.any?
 
-      model_name = object.class.model_name.human.downcase
+      title = I18n.t(
+        "polaris.form_builder.errors_summary",
+        count: object.errors.count,
+        model: object.class.model_name.human.downcase
+      )
 
-      render Polaris::BannerComponent.new(
-        title: "There's #{pluralize(object.errors.count, "error")} with this #{model_name}:",
-        status: :critical,
-      ) do
+      render Polaris::BannerComponent.new(title: title, status: :critical) do
         render(Polaris::ListComponent.new) do |list|
-          object.errors.each do |error|
-            list.item { error.full_message }
+          object.errors.full_messages.each do |error|
+            list.item { error.html_safe }
           end
         end
       end
@@ -26,7 +29,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 +60,29 @@ 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
+
+    def polaris_dropzone(method, **options, &block)
+      options[:error] ||= error_for(method)
+      if options[:error_hidden] && options[:error]
+        options[:error] = !!options[:error]
+      end
+      render Polaris::DropzoneComponent.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