polaris_view_components 0.4.0 → 0.8.0

data/app/components/polaris/callout_card_component.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class CalloutCardComponent < Polaris::NewComponent
+  class CalloutCardComponent < Polaris::Component
     renders_one :primary_action, Polaris::ButtonComponent
-    renders_one :secondary_action, -> (plain: true, **system_arguments) do
+    renders_one :secondary_action, ->(plain: true, **system_arguments) do
       Polaris::ButtonComponent.new(plain: plain, **system_arguments)
     end
-    renders_one :dismiss_button, -> (**system_arguments) do
+    renders_one :dismiss_button, ->(**system_arguments) do
       render Polaris::ButtonComponent.new(plain: true, **system_arguments) do |button|
         button.icon(name: "CancelSmallMinor")
       end
@@ -24,21 +24,21 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Card",
+        "Polaris-Card"
       )
     end
 
     def container_classes
       class_names(
         "Polaris-CalloutCard__Container",
-        "Polaris-CalloutCard--hasDismiss": dismiss_button.present?,
+        "Polaris-CalloutCard--hasDismiss": dismiss_button.present?
       )
     end
 
     def image_classes
       class_names(
         "Polaris-CalloutCard__Image",
-        "Polaris-CalloutCard__DismissImage": dismiss_button.present?,
+        "Polaris-CalloutCard__DismissImage": dismiss_button.present?
       )
     end
   end

data/app/components/polaris/caption_component.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
 module Polaris
-  class CaptionComponent < Polaris::NewComponent
+  class CaptionComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] = 'p'
+      @system_arguments[:tag] = "p"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Caption",
+        "Polaris-Caption"
       )
     end
 

data/app/components/polaris/card/header_component.rb

@@ -1,4 +1,4 @@
-class Polaris::Card::HeaderComponent < Polaris::NewComponent
+class Polaris::Card::HeaderComponent < Polaris::Component
   def initialize(
     title: "",
     actions: [],
@@ -8,7 +8,7 @@ class Polaris::Card::HeaderComponent < Polaris::NewComponent
     @system_arguments[:tag] = :div
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
-      "Polaris-Card__Header",
+      "Polaris-Card__Header"
     )
 
     @title = title

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

@@ -1,4 +1,4 @@
-class Polaris::Card::SectionComponent < Polaris::NewComponent
+class Polaris::Card::SectionComponent < Polaris::Component
   renders_many :subsections, "Polaris::Card::SubsectionComponent"
 
   def initialize(
@@ -7,6 +7,8 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
     flush: false,
     full_width: false,
     unstyled: false,
+    border_top: false,
+    border_bottom: false,
     actions: [],
     **system_arguments
   )
@@ -14,23 +16,25 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
     @system_arguments[:tag] = :div
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
+      "Polaris-Card__Section": !unstyled,
       "Polaris-Card__Section--flush": flush,
       "Polaris-Card__Section--subdued": subdued,
       "Polaris-Card__Section--fullWidth": full_width,
-      "Polaris-Card__Section": !unstyled,
+      "Polaris-Card__Section--borderTop": border_top,
+      "Polaris-Card__Section--borderBottom": border_bottom
     )
 
     @title = title
     @actions = actions.map { |a| a.merge(plain: true) }
   end
 
-  class Polaris::Card::SubsectionComponent < Polaris::NewComponent
+  class Polaris::Card::SubsectionComponent < Polaris::Component
     def initialize(**system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Card__Subsection",
+        "Polaris-Card__Subsection"
       )
     end
 

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

@@ -1,4 +1,8 @@
 <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if tabs.present? %>
+    <%= tabs %>
+  <% end %>
+
   <% if header.present? %>
     <%= header %>
   <% end %>

data/app/components/polaris/card_component.rb

@@ -1,17 +1,18 @@
 # frozen_string_literal: true
 
 module Polaris
-  class CardComponent < Polaris::NewComponent
+  class CardComponent < Polaris::Component
     FOOTER_ACTION_ALIGNMENT_DEFAULT = :right
     FOOTER_ACTION_ALIGNMENT_MAPPINGS = {
       FOOTER_ACTION_ALIGNMENT_DEFAULT => "",
-      :left => "Polaris-Card__LeftJustified",
+      :left => "Polaris-Card__LeftJustified"
     }
     FOOTER_ACTION_ALIGNMENT_OPTIONS = FOOTER_ACTION_ALIGNMENT_MAPPINGS.keys
 
+    renders_one :tabs, Polaris::TabsComponent
     renders_one :header, Polaris::Card::HeaderComponent
     renders_many :sections, Polaris::Card::SectionComponent
-    renders_one :primary_footer_action, -> (primary: true, **system_arguments) do
+    renders_one :primary_footer_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
     renders_many :secondary_footer_actions, Polaris::ButtonComponent
@@ -34,7 +35,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Card",
-        "Polaris-Card--subdued": subdued,
+        "Polaris-Card--subdued": subdued
       )
     end
 
@@ -45,7 +46,7 @@ module Polaris
     def footer_classes
       class_names(
         "Polaris-Card__Footer",
-        FOOTER_ACTION_ALIGNMENT_MAPPINGS[fetch_or_fallback(FOOTER_ACTION_ALIGNMENT_OPTIONS, @footer_action_alignment, FOOTER_ACTION_ALIGNMENT_DEFAULT)],
+        FOOTER_ACTION_ALIGNMENT_MAPPINGS[fetch_or_fallback(FOOTER_ACTION_ALIGNMENT_OPTIONS, @footer_action_alignment, FOOTER_ACTION_ALIGNMENT_DEFAULT)]
       )
     end
   end

data/app/components/polaris/character_count.rb

@@ -16,7 +16,7 @@ module Polaris
     def text
       return "#{count}/#{@max_length}" if max_length?
 
-      "#{count}"
+      count.to_s
     end
 
     def label_template
@@ -35,16 +35,16 @@ module Polaris
 
     private
 
-      def max_length?
-        @max_length.present?
-      end
+    def max_length?
+      @max_length.present?
+    end
 
-      def normalized_value
-        @text_field.value.to_s || ''
-      end
+    def normalized_value
+      @text_field.value.to_s || ""
+    end
 
-      def count
-        normalized_value.length
-      end
+    def count
+      normalized_value.length
+    end
   end
 end

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

@@ -1,10 +1,6 @@
 <%= render Polaris::ChoiceComponent.new(**@wrapper_arguments) do %>
   <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
-    <% if @form.present? && @attribute.present? %>
-      <%= @form.check_box(@attribute, @input_options, @value, @unchecked_value) %>
-    <% else %>
-      <%= check_box_tag(@name, @value, @checked, @input_options) %>
-    <% end %>
+    <%= checkbox %>
 
     <span class="Polaris-Checkbox__Backdrop"></span>
 

data/app/components/polaris/checkbox_component.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class CheckboxComponent < Polaris::NewComponent
+  class CheckboxComponent < Polaris::Component
     include ActiveModel::Validations
 
     attr_reader :checked
 
-    validates :checked, inclusion: { in: [true, false, :indeterminate] }
+    validates :checked, inclusion: {in: [true, false, :indeterminate]}
 
     def initialize(
       form: nil,
@@ -28,6 +28,7 @@ module Polaris
       @attribute = attribute
       @name = name
       @checked = checked
+      @disabled = disabled
       @value = value
       @unchecked_value = unchecked_value
 
@@ -37,7 +38,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Checkbox",
         "Polaris-Checkbox--labelHidden": label_hidden,
-        "Polaris-Checkbox--error": error.present?,
+        "Polaris-Checkbox--error": error.present?
       )
 
       @wrapper_arguments = {
@@ -45,21 +46,14 @@ module Polaris
         label_hidden: label_hidden,
         disabled: disabled,
         help_text: help_text,
-        error: error,
+        error: error
       }.merge(wrapper_arguments)
 
       @input_options = input_options
-      @input_options[:aria] ||= {}
-      @input_options[:disabled] = true if disabled
-      @input_options[:aria][:checked] = checked
-      if indeterminate?
-        @input_options[:indeterminate] = true
-        @input_options[:aria][:checked] = "mixed"
-      end
-      @input_options[:class] = class_names(
+      @input_options[:classes] = class_names(
         @input_options[:classes],
         "Polaris-Checkbox__Input",
-        "Polaris-Checkbox__Input--indeterminate": indeterminate?,
+        "Polaris-Checkbox__Input--indeterminate": indeterminate?
       )
     end
 
@@ -74,5 +68,18 @@ module Polaris
     def before_render
       validate!
     end
+
+    def checkbox
+      render Polaris::BaseCheckbox.new(
+        form: @form,
+        attribute: @attribute,
+        name: @name,
+        checked: @checked,
+        disabled: @disabled,
+        value: @value,
+        unchecked_value: @unchecked_value,
+        **@input_options
+      )
+    end
   end
 end

data/app/components/polaris/choice_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ChoiceComponent < Polaris::NewComponent
+  class ChoiceComponent < Polaris::Component
     def initialize(
       label:,
       label_hidden:,
@@ -22,7 +22,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Choice",
         "Polaris-Choice--labelHidden": label_hidden,
-        "Polaris-Choice--disabled": disabled,
+        "Polaris-Choice--disabled": disabled
       )
     end
   end

data/app/components/polaris/choice_list_component.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ChoiceListComponent < Polaris::NewComponent
-    renders_many :checkboxes, -> (value:, disabled: false, **system_arguments) do
+  class ChoiceListComponent < Polaris::Component
+    renders_many :checkboxes, ->(value:, disabled: false, **system_arguments) do
       Polaris::CheckboxComponent.new(
         form: @form,
         attribute: @attribute,
@@ -13,7 +13,7 @@ module Polaris
         **system_arguments
       )
     end
-    renders_many :radio_buttons, -> (value:, disabled: false, **system_arguments) do
+    renders_many :radio_buttons, ->(value:, disabled: false, **system_arguments) do
       Polaris::RadioButtonComponent.new(
         form: @form,
         attribute: @attribute,
@@ -21,12 +21,12 @@ module Polaris
         value: value,
         checked: @selected.include?(value),
         disabled: disabled || @disabled,
-        **system_arguments,
+        **system_arguments
       )
     end
 
     def initialize(
-      title:,
+      title: nil,
       title_hidden: false,
       form: nil,
       attribute: nil,
@@ -49,7 +49,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-ChoiceList",
-        "Polaris-ChoiceList--titleHidden": title_hidden,
+        "Polaris-ChoiceList--titleHidden": title_hidden
       )
     end
 

data/app/components/polaris/component.rb

@@ -1,5 +1,10 @@
+# frozen_string_literal: true
+
 module Polaris
-  class Component < ApplicationComponent
+  class Component < ViewComponent::Base
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+    include OptionHelper
     include ViewHelper
   end
 end

data/app/components/polaris/data_table/cell_component.rb

@@ -1,10 +1,10 @@
-class Polaris::DataTable::CellComponent < Polaris::NewComponent
+class Polaris::DataTable::CellComponent < Polaris::Component
   ALIGNMENT_DEFAULT = :top
   ALIGNMENT_MAPPINGS = {
     top: "Polaris-DataTable__Cell--verticalAlignTop",
     bottom: "Polaris-DataTable__Cell--verticalAlignBottom",
     middle: "Polaris-DataTable__Cell--verticalAlignMiddle",
-    baseline: "Polaris-DataTable__Cell--verticalAlignBaseline",
+    baseline: "Polaris-DataTable__Cell--verticalAlignBaseline"
   }
   ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
 
@@ -31,7 +31,7 @@ class Polaris::DataTable::CellComponent < Polaris::NewComponent
   end
 
   def system_arguments
-    { tag: "td" }.deep_merge(@system_arguments).tap do |args|
+    {tag: "td"}.deep_merge(@system_arguments).tap do |args|
       args[:classes] = class_names(
         args[:classes],
         "Polaris-DataTable__Cell",
@@ -42,7 +42,7 @@ class Polaris::DataTable::CellComponent < Polaris::NewComponent
         "Polaris-DataTable__Cell--total": @total,
         "Polaris-DataTable__Cell--sortable": @sort_url.present?,
         "Polaris-DataTable__Cell--sorted": @sorted,
-        "Polaris-DataTable--cellTotalFooter": @total_footer,
+        "Polaris-DataTable--cellTotalFooter": @total_footer
       )
     end
   end

data/app/components/polaris/data_table/column_component.rb

@@ -1,4 +1,4 @@
-class Polaris::DataTable::ColumnComponent < Polaris::NewComponent
+class Polaris::DataTable::ColumnComponent < Polaris::Component
   SORT_DEFAULT = false
   SORT_OPTIONS = [false, :asc, :desc]
 

data/app/components/polaris/data_table_component.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Polaris
-  class DataTableComponent < Polaris::NewComponent
+  class DataTableComponent < Polaris::Component
     ALIGNMENT_DEFAULT = :top
     ALIGNMENT_OPTIONS = [:top, :bottom, :middle, :baseline]
 
-    renders_many :columns, -> (title, **system_arguments, &block) do
+    renders_many :columns, ->(title, **system_arguments, &block) do
       DataTable::ColumnComponent.new(title, **system_arguments, &block)
     end
     renders_one :footer
@@ -27,10 +27,10 @@ module Polaris
     end
 
     def system_arguments
-      { tag: "div" }.deep_merge(@system_arguments).tap do |args|
+      {tag: "div"}.deep_merge(@system_arguments).tap do |args|
         args[:classes] = class_names(
           args[:classes],
-          "Polaris-DataTable",
+          "Polaris-DataTable"
         )
       end
     end

data/app/components/polaris/description_list_component.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 module Polaris
-  class DescriptionListComponent < Polaris::NewComponent
+  class DescriptionListComponent < Polaris::Component
     SPACING_DEFAULT = :loose
     SPACING_MAPPINGS = {
       SPACING_DEFAULT => "",
-      :tight => "Polaris-DescriptionList--spacingTight",
+      :tight => "Polaris-DescriptionList--spacingTight"
     }
     SPACING_OPTIONS = SPACING_MAPPINGS.keys
 
@@ -17,7 +17,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-DescriptionList",
-        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
+        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)]
       )
     end
 
@@ -25,7 +25,7 @@ module Polaris
       items.any?
     end
 
-    class DescriptionListItemComponent < Polaris::NewComponent
+    class DescriptionListItemComponent < Polaris::Component
       def initialize(term:)
         @term = term
       end
@@ -33,7 +33,7 @@ module Polaris
       def call
         safe_join [
           tag.dt(class: "Polaris-DescriptionList__Term") { @term },
-          tag.dd(class: "Polaris-DescriptionList__Description") { content },
+          tag.dd(class: "Polaris-DescriptionList__Description") { content }
         ]
       end
     end

data/app/components/polaris/display_text_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class DisplayTextComponent < Polaris::NewComponent
+  class DisplayTextComponent < Polaris::Component
     ELEMENT_DEFAULT = :p
     ELEMENT_OPTIONS = %i[p h1 h2 h3 h4 h5 h6]
 
@@ -10,7 +10,7 @@ module Polaris
       small: "Polaris-DisplayText--sizeSmall",
       medium: "Polaris-DisplayText--sizeMedium",
       large: "Polaris-DisplayText--sizeLarge",
-      extra_large: "Polaris-DisplayText--sizeExtraLarge",
+      extra_large: "Polaris-DisplayText--sizeExtraLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -24,7 +24,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-DisplayText",
-        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/dropzone_component.html.erb

@@ -0,0 +1,156 @@
+<%= render Polaris::LabelledComponent.new(**wrapper_arguments) do %>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <div
+      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
+      data-polaris-dropzone-target="overlay"
+    >
+      <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+        <% stack.item do %>
+          <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
+            <%= @overlay_text %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div
+      class="Polaris-DropZone__Overlay Polaris-VisuallyHidden"
+      data-polaris-dropzone-target="errorOverlay"
+    >
+      <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+        <% stack.item do %>
+          <%= render Polaris::DisplayTextComponent.new(size: :small) do %>
+            <%= @error_overlay_text %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="Polaris-DropZone__Container" data-polaris-dropzone-target="container">
+      <%= render Polaris::BaseComponent.new(**file_upload_arguments) do %>
+        <%= render Polaris::StackComponent.new(vertical: true, spacing: :tight) do |stack| %>
+          <% unless @size == :medium %>
+            <% stack.item do %>
+              <img width="<%= @size == :small ? 20 : 40 %>" src="data:image/svg+xml,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 10a10 10 0 11-20 0 10 10 0 0120 0zM5.3 8.3l4-4a1 1 0 011.4 0l4 4a1 1 0 01-1.4 1.4L11 7.4V15a1 1 0 11-2 0V7.4L6.7 9.7a1 1 0 01-1.4-1.4z' fill='%235C5F62'/%3e%3c/svg%3e" alt="">
+            <% end %>
+          <% end %>
+
+          <% unless @size == :small %>
+            <% stack.item do %>
+              <% if @size == :medium %>
+                <div class="Polaris-DropZone-FileUpload__ActionTitle">
+                  <%= @file_upload_button %>
+                </div>
+              <% else %>
+                <div class="Polaris-DropZone-FileUpload__Button">
+                  <%= @file_upload_button %>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+
+          <% unless @size == :small %>
+            <% stack.item do %>
+              <% help_text = capture do %>
+                <%= render Polaris::TextStyleComponent.new(variation: :subdued) do %>
+                  <%= @file_upload_help %>
+                <% end %>
+              <% end %>
+
+              <% if @size == :medium %>
+                <%= polaris_caption { help_text } %>
+              <% else %>
+                <%= help_text %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <div class="Polaris-DropZone__Loader Polaris--hidden" data-polaris-dropzone-target="loader">
+        <%= polaris_spinner %>
+      </div>
+    </div>
+
+    <%= render Polaris::VisuallyHiddenComponent.new do %>
+      <% if @form.present? && @attribute.present? %>
+        <%= @form.file_field(@attribute, **input_options) %>
+      <% else %>
+        <%= file_field_tag(@name, **input_options) %>
+      <% end %>
+    <% end %>
+
+    <template data-polaris-dropzone-target="previewTemplate">
+      <%= tag.div(
+        data: { polaris_dropzone_target: "preview" },
+        class: [
+          "Polaris-DropZone__Preview",
+          "Polaris-DropZone__Preview--singleFile": !@multiple,
+          "Polaris-DropZone__Preview--sizeSmall": @size == :small
+        ]
+      ) do %>
+        <% if @size.in?(%i[small]) %>
+          <span class="target"></span>
+        <% else %>
+          <%= polaris_stack(vertical: true) do %>
+            <span class="target"></span>
+          <% end %>
+        <% end %>
+      <% end %>
+    </template>
+
+    <template data-polaris-dropzone-target="itemTemplate">
+      <% if @size.in?(%i[small]) %>
+        <%= polaris_thumbnail(
+          size: :small,
+          data: { target: "icon" },
+          style: "border: none; background: none;"
+        ) do |thumbnail| %>
+          <%= thumbnail.icon(name: "TimelineAttachmentMajor") %>
+        <% end %>
+        <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
+      <% else %>
+        <%= polaris_stack_item do %>
+          <%= polaris_stack(
+            alignment: :center,
+            vertical: !@multiple,
+            spacing: @multiple ? :default : :tight,
+          ) do |stack| %>
+            <% stack.item do %>
+              <%= polaris_thumbnail(
+                size: :small,
+                data: { target: "icon" },
+                style: "border: none; background: none;"
+              ) do |thumbnail| %>
+                <%= thumbnail.icon(name: "TimelineAttachmentMajor") %>
+              <% end %>
+              <%= polaris_thumbnail(source: "#", size: :small, data: { target: "thumbnail" }) %>
+            <% end %>
+
+            <% stack.item(fill: true) do %>
+              <div data-target="content">
+                <%= polaris_caption do %>
+                  <%= polaris_text_subdued(data: { target: "file-size" }) { "SIZE" } %>
+                <% end %>
+              </div>
+
+              <%= polaris_progress_bar(
+                progress: 0,
+                size: :small,
+                data: { target: "progress-bar" },
+                classes: "Polaris--hidden",
+                style: "margin-top: 4px;"
+              ) %>
+
+              <%= polaris_inline_error(
+                data: { target: "upload-error" },
+                classes: "Polaris--hidden",
+                style: "margin-top: 4px;"
+              ) { @upload_error_text } %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </template>
+  <% end %>
+<% end %>