polaris_view_components 0.7.0 → 0.9.0

data/app/components/polaris/resource_list_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ResourceListComponent < Polaris::NewComponent
+  class ResourceListComponent < Polaris::Component
     renders_one :filters, Polaris::FiltersComponent
 
     def initialize(

data/app/components/polaris/scrollable_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ScrollableComponent < Polaris::NewComponent
+  class ScrollableComponent < Polaris::Component
     def initialize(
       height: nil,
       width: nil,

data/app/components/polaris/select_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SelectComponent < Polaris::NewComponent
+  class SelectComponent < Polaris::Component
     def initialize(
       options:,
       form: nil,

data/app/components/polaris/setting_toggle_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SettingToggleComponent < Polaris::NewComponent
+  class SettingToggleComponent < Polaris::Component
     renders_one :action, ->(**system_arguments) do
       Polaris::ButtonComponent.new(primary: !@enabled, **system_arguments)
     end

data/app/components/polaris/shopify_navigation_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ShopifyNavigationComponent < Polaris::NewComponent
+  class ShopifyNavigationComponent < Polaris::Component
     renders_many :links, ->(**system_arguments) do
       ShopifyNavigationLinkComponent.new(auto_detect_active: @auto_detect_active, **system_arguments)
     end
@@ -21,7 +21,7 @@ module Polaris
       links.any?
     end
 
-    class ShopifyNavigationLinkComponent < Polaris::NewComponent
+    class ShopifyNavigationLinkComponent < Polaris::Component
       def initialize(url:, auto_detect_active:, active: false, **system_arguments)
         @url = url
         @auto_detect_active = auto_detect_active

data/app/components/polaris/skeleton_body_text_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SkeletonBodyTextComponent < Polaris::NewComponent
+  class SkeletonBodyTextComponent < Polaris::Component
     def initialize(lines: 3, **system_arguments)
       @lines = lines
       @system_arguments = system_arguments

data/app/components/polaris/skeleton_display_text_component.rb

@@ -0,0 +1,32 @@
+module Polaris
+  class SkeletonDisplayTextComponent < Polaris::Component
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      small: "Polaris-SkeletonDisplayText--sizeSmall",
+      medium: "Polaris-SkeletonDisplayText--sizeMedium",
+      large: "Polaris-SkeletonDisplayText--sizeLarge",
+      extra_large: "Polaris-SkeletonDisplayText--sizeExtraLarge"
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(size: SIZE_DEFAULT, **system_arguments)
+      @size = size
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-SkeletonDisplayText__DisplayText",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, SIZE_DEFAULT)]
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments))
+    end
+  end
+end

data/app/components/polaris/skeleton_thumbnail_component.rb

@@ -0,0 +1,31 @@
+module Polaris
+  class SkeletonThumbnailComponent < Polaris::Component
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      small: "Polaris-SkeletonThumbnail--sizeSmall",
+      medium: "Polaris-SkeletonThumbnail--sizeMedium",
+      large: "Polaris-SkeletonThumbnail--sizeLarge"
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(size: SIZE_DEFAULT, **system_arguments)
+      @size = size
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-SkeletonThumbnail",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, SIZE_DEFAULT)]
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments))
+    end
+  end
+end

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 => "",

data/app/components/polaris/spinner_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class SpinnerComponent < Polaris::NewComponent
+  class SpinnerComponent < Polaris::Component
     SIZE_DEFAULT = :large
     SIZE_MAPPINGS = {
       small: "Polaris-Spinner--sizeSmall",

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 => "",
@@ -37,7 +37,7 @@ module Polaris
     }
     SPACING_OPTIONS = SPACING_MAPPINGS.keys
 
-    renders_many :items, "StackItemComponent"
+    renders_many :items, Polaris::Stack::ItemComponent
 
     def initialize(
       alignment: ALIGNMENT_DEFAULT,
@@ -59,21 +59,5 @@ module Polaris
         "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]
 

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

@@ -1,4 +1,4 @@
-class Polaris::Tabs::TabComponent < Polaris::NewComponent
+class Polaris::Tabs::TabComponent < Polaris::Component
   renders_one :badge, Polaris::BadgeComponent
 
   def initialize(

data/app/components/polaris/tabs_component.rb

@@ -1,5 +1,5 @@
 module Polaris
-  class TabsComponent < Polaris::NewComponent
+  class TabsComponent < Polaris::Component
     renders_many :tabs, Polaris::Tabs::TabComponent
 
     def initialize(fitted: false, wrapper_arguments: {}, **system_arguments)

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

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
@@ -180,7 +180,7 @@ module Polaris
       @type == :number && !@disabled
     end
 
-    class Affix < Polaris::NewComponent
+    class Affix < Polaris::Component
       def initialize(icon: nil)
         @icon = icon
       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 => "",

data/app/components/polaris/thumbnail_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ThumbnailComponent < Polaris::NewComponent
+  class ThumbnailComponent < Polaris::Component
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
       small: "Polaris-Thumbnail--sizeSmall",

data/app/components/polaris/toast_component.rb

@@ -1,4 +1,4 @@
-class Polaris::ToastComponent < Polaris::NewComponent
+class Polaris::ToastComponent < Polaris::Component
   renders_one :action, ->(**system_arguments) do
     Polaris::ButtonComponent.new(plain: true, monochrome: true, **system_arguments)
   end

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

@@ -1,4 +1,4 @@
-class Polaris::TopBar::UserMenuComponent < Polaris::NewComponent
+class Polaris::TopBar::UserMenuComponent < Polaris::Component
   renders_one :avatar, Polaris::AvatarComponent
 
   def initialize(name:, detail:, **system_arguments)

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

@@ -10,12 +10,13 @@ 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, within: :container) do
         render(Polaris::ListComponent.new) do |list|
           object.errors.full_messages.each do |error|
             list.item { error.html_safe }
@@ -75,5 +76,13 @@ module Polaris
       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/view_helper.rb

@@ -19,10 +19,11 @@ module Polaris
       checkbox:                 "Polaris::CheckboxComponent",
       check_box:                "Polaris::CheckboxComponent",
       choice_list:              "Polaris::ChoiceListComponent",
+      collapsible:              "Polaris::CollapsibleComponent",
       data_table:               "Polaris::DataTableComponent",
       description_list:         "Polaris::DescriptionListComponent",
       display_text:             "Polaris::DisplayTextComponent",
-      dropzone:                 "Polaris::Dropzone::Component",
+      dropzone:                 "Polaris::DropzoneComponent",
       empty_state:              "Polaris::EmptyStateComponent",
       exception_list:           "Polaris::ExceptionListComponent",
       footer_help:              "Polaris::FooterHelpComponent",
@@ -33,6 +34,7 @@ module Polaris
       icon:                     "Polaris::IconComponent",
       index_table:              "Polaris::IndexTableComponent",
       inline_error:             "Polaris::InlineErrorComponent",
+      keyboard_key:             "Polaris::KeyboardKeyComponent",
       layout:                   "Polaris::LayoutComponent",
       link:                     "Polaris::LinkComponent",
       list:                     "Polaris::ListComponent",
@@ -51,10 +53,13 @@ module Polaris
       setting_toggle:           "Polaris::SettingToggleComponent",
       shopify_navigation:       "Polaris::ShopifyNavigationComponent",
       stack:                    "Polaris::StackComponent",
+      stack_item:               "Polaris::Stack::ItemComponent",
       subheading:               "Polaris::SubheadingComponent",
       scrollable:               "Polaris::ScrollableComponent",
       spinner:                  "Polaris::SpinnerComponent",
       skeleton_body_text:       "Polaris::SkeletonBodyTextComponent",
+      skeleton_display_text:    "Polaris::SkeletonDisplayTextComponent",
+      skeleton_thumbnail:       "Polaris::SkeletonThumbnailComponent",
       spacer:                   "Polaris::SpacerComponent",
       tabs:                     "Polaris::TabsComponent",
       tag:                      "Polaris::TagComponent",

data/config/locales/en.yml

@@ -0,0 +1,6 @@
+en:
+  polaris:
+    form_builder:
+      errors_summary:
+        one: "There is 1 error with this %{model}:"
+        other: "There are %{count} errors with this %{model}:"

data/lib/polaris/view_components/engine.rb

@@ -15,6 +15,11 @@ module Polaris
         #{root}/app/helpers
       ]
 
+      # Remove default wrapping .field_with_errors for proper Shopify form validations
+      config.to_prepare do
+        ActionView::Base.field_error_proc = ->(html_tag, _instance) { html_tag.html_safe }
+      end
+
       initializer "polaris_view_components.assets" do |app|
         if app.config.respond_to?(:assets)
           app.config.assets.precompile += %w[
@@ -33,7 +38,6 @@ module Polaris
         ActiveSupport.on_load(:action_controller_base) do
           helper Polaris::ViewHelper
           helper Polaris::UrlHelper
-          helper Polaris::ConditionalHelper
         end
       end
     end

data/lib/polaris/view_components/version.rb

@@ -1,5 +1,5 @@
 module Polaris
   module ViewComponents
-    VERSION = "0.7.0"
+    VERSION = "0.9.0"
   end
 end