polaris_view_components 0.3.3 → 0.7.0

data/app/components/polaris/avatar_component.rb

@@ -6,7 +6,7 @@ module Polaris
     SIZE_MAPPINGS = {
       small: "Polaris-Avatar--sizeSmall",
       medium: "Polaris-Avatar--sizeMedium",
-      large: "Polaris-Avatar--sizeLarge",
+      large: "Polaris-Avatar--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 

data/app/components/polaris/badge_component.rb

@@ -44,7 +44,7 @@ module Polaris
         "Polaris-Badge",
         PROGRESS_MAPPINGS[fetch_or_fallback(PROGRESS_OPTIONS, progress, PROGRESS_DEFAULT)],
         SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
-        STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
+        STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)]
       )
     end
   end

data/app/components/polaris/banner_component.rb

@@ -8,14 +8,14 @@ module Polaris
       :success => "Polaris-Banner--statusSuccess",
       :info => "Polaris-Banner--statusInfo",
       :warning => "Polaris-Banner--statusWarning",
-      :critical => "Polaris-Banner--statusCritical",
+      :critical => "Polaris-Banner--statusCritical"
     }
     STATUS_OPTIONS = STATUS_MAPPINGS.keys
 
     WITHIN_DEFAULT = :page
     WITHIN_MAPPINGS = {
       page: "Polaris-Banner--withinPage",
-      container: "Polaris-Banner--withinContentContainer",
+      container: "Polaris-Banner--withinContentContainer"
     }
     WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
 
@@ -24,14 +24,14 @@ module Polaris
       success: :success,
       info: :highlight,
       warning: :warning,
-      critical: :critical,
+      critical: :critical
     }
 
-    renders_one :action, -> (**system_arguments) do
+    renders_one :action, ->(**system_arguments) do
       Polaris::ButtonComponent.new(classes: "Polaris-Banner__Button", **system_arguments)
     end
     renders_one :secondary_action, "SecondaryAction"
-    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
@@ -55,7 +55,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Banner",
         STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
-        WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
+        WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)]
       )
     end
 

data/app/components/polaris/base_button.rb

@@ -10,7 +10,7 @@ module Polaris
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] = url.present? ? 'a' : 'button'
+      @system_arguments[:tag] = url.present? ? "a" : "button"
       if loading
         @system_arguments[:disabled] = true
       end

data/app/components/polaris/base_checkbox.rb

@@ -0,0 +1,48 @@
+module Polaris
+  class BaseCheckbox < Polaris::NewComponent
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      checked: false,
+      disabled: false,
+      value: "1",
+      unchecked_value: "0",
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @checked = checked
+      @disabled = disabled
+      @value = value
+      @unchecked_value = unchecked_value
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:disabled] = true if @disabled
+        opts[:aria] ||= {}
+        opts[:aria][:checked] = @checked
+        if indeterminate?
+          @system_arguments[:indeterminate] = true
+          @system_arguments[:aria][:checked] = "mixed"
+        end
+        opts[:class] = opts.delete(:classes)
+      end
+    end
+
+    def indeterminate?
+      @checked == :indeterminate
+    end
+
+    def call
+      if @form.present? && @attribute.present?
+        @form.check_box(@attribute, system_arguments, @value, @unchecked_value)
+      else
+        check_box_tag(@name, @value, @checked, system_arguments)
+      end
+    end
+  end
+end

data/app/components/polaris/base_radio_button.rb

@@ -0,0 +1,38 @@
+module Polaris
+  class BaseRadioButton < Polaris::NewComponent
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      checked: false,
+      disabled: false,
+      value: nil,
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @checked = checked
+      @disabled = disabled
+      @value = value
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:disabled] = true if @disabled
+        opts[:aria] ||= {}
+        opts[:aria][:checked] = @checked
+        opts[:class] = opts.delete(:classes)
+      end
+    end
+
+    def call
+      if @form.present? && @attribute.present?
+        @form.radio_button(@attribute, @value, system_arguments)
+      else
+        radio_button_tag(@name, @value, @checked, system_arguments)
+      end
+    end
+  end
+end

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

@@ -20,5 +20,18 @@
         <%= content %>
       </div>
     <% end %>
+
+    <% if @disclosure.present? %>
+      <div class="Polaris-Button__Icon">
+        <% case @disclosure %>
+        <% when :down %>
+          <%= polaris_icon(name: "CaretDownMinor") %>
+        <% when :up %>
+          <%= polaris_icon(name: "CaretUpMinor") %>
+        <% when :select %>
+          <%= polaris_icon(name: "SelectMinor") %>
+        <% end %>
+      </div>
+    <% end %>
   </span>
 <% end %>

data/app/components/polaris/button_group_component.rb

@@ -7,17 +7,17 @@ module Polaris
       SPACING_DEFAULT => "",
       :extra_tight => "Polaris-ButtonGroup--extraTight",
       :tight => "Polaris-ButtonGroup--tight",
-      :loose => "Polaris-ButtonGroup--loose",
+      :loose => "Polaris-ButtonGroup--loose"
     }
     SPACING_OPTIONS = SPACING_MAPPINGS.keys
 
-    renders_many :buttons, -> (**system_arguments) do
+    renders_many :buttons, ->(**system_arguments) do
       @counter += 1
 
       ButtonGroupItemButtonComponent.new(position: @counter, **system_arguments)
     end
 
-    renders_many :items, -> (**system_arguments) do
+    renders_many :items, ->(**system_arguments) do
       @counter += 1
 
       ButtonGroupItemComponent.new(position: @counter, **system_arguments)
@@ -47,7 +47,7 @@ module Polaris
         "Polaris-ButtonGroup",
         SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
         "Polaris-ButtonGroup--fullWidth": full_width,
-        "Polaris-ButtonGroup--segmented": segmented,
+        "Polaris-ButtonGroup--segmented": segmented
       )
     end
 
@@ -97,7 +97,7 @@ module Polaris
         @system_arguments[:tag] = :div
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
-          "Polaris-ButtonGroup__Item",
+          "Polaris-ButtonGroup__Item"
         )
       end
 

data/app/components/polaris/callout_card_component.rb

@@ -3,10 +3,10 @@
 module Polaris
   class CalloutCardComponent < Polaris::NewComponent
     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

@@ -4,10 +4,10 @@ module Polaris
   class CaptionComponent < Polaris::NewComponent
     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,6 +1,4 @@
 class Polaris::Card::HeaderComponent < Polaris::NewComponent
-  include Polaris::ActionHelper
-
   def initialize(
     title: "",
     actions: [],
@@ -10,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

@@ -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,10 +16,12 @@ 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
@@ -30,7 +34,7 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
       @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

@@ -2,18 +2,17 @@
 
 module Polaris
   class CardComponent < Polaris::NewComponent
-    include Polaris::ActionHelper
-
     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
@@ -36,7 +35,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Card",
-        "Polaris-Card--subdued": subdued,
+        "Polaris-Card--subdued": subdued
       )
     end
 
@@ -47,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

@@ -6,7 +6,7 @@ module Polaris
 
     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

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

@@ -2,7 +2,7 @@
 
 module Polaris
   class ChoiceListComponent < Polaris::NewComponent
-    renders_many :checkboxes, -> (value:, disabled: false, **system_arguments) do
+    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/data_table/cell_component.html.erb

@@ -0,0 +1,18 @@
+<% if @sort_url %>
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <%= link_to @sort_url, class: "Polaris-DataTable__Heading" do %>
+      <span class="Polaris-DataTable__Icon">
+        <% if @sorted == :asc %>
+          <%= polaris_icon(name: "CaretUpMinor") %>
+        <% else %>
+          <%= polaris_icon(name: "CaretDownMinor") %>
+        <% end %>
+      </span>
+      <%= content %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,49 @@
+class Polaris::DataTable::CellComponent < Polaris::NewComponent
+  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"
+  }
+  ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
+
+  def initialize(
+    vertical_alignment:,
+    first: false,
+    numeric: false,
+    header: false,
+    total: false,
+    total_footer: false,
+    sorted: false,
+    sort_url: nil,
+    **system_arguments
+  )
+    @vertical_alignment = vertical_alignment
+    @numeric = numeric
+    @first = first
+    @header = header
+    @total = total
+    @total_footer = total_footer
+    @sorted = sorted
+    @sort_url = sort_url
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    {tag: "td"}.deep_merge(@system_arguments).tap do |args|
+      args[:classes] = class_names(
+        args[:classes],
+        "Polaris-DataTable__Cell",
+        ALIGNMENT_MAPPINGS[@vertical_alignment],
+        "Polaris-DataTable__Cell--firstColumn": @first,
+        "Polaris-DataTable__Cell--numeric": @numeric,
+        "Polaris-DataTable__Cell--header": @header,
+        "Polaris-DataTable__Cell--total": @total,
+        "Polaris-DataTable__Cell--sortable": @sort_url.present?,
+        "Polaris-DataTable__Cell--sorted": @sorted,
+        "Polaris-DataTable--cellTotalFooter": @total_footer
+      )
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+class Polaris::DataTable::ColumnComponent < Polaris::NewComponent
+  SORT_DEFAULT = false
+  SORT_OPTIONS = [false, :asc, :desc]
+
+  attr_reader :title, :numeric, :total, :sorted, :sort_url
+
+  def initialize(title, numeric: false, total: nil, sorted: SORT_DEFAULT, sort_url: nil, **system_arguments, &block)
+    @title = title
+    @numeric = numeric
+    @total = total
+    @sorted = fetch_or_fallback(SORT_OPTIONS, sorted, SORT_DEFAULT)
+    @sort_url = sort_url
+    @block = block
+  end
+
+  def call(row)
+    @block.call(row)
+  end
+end