polaris_view_components 0.4.0 → 0.8.0

data/app/components/polaris/headless_button.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Polaris
-  class HeadlessButton < Polaris::NewComponent
+  class HeadlessButton < Polaris::Component
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
       SIZE_DEFAULT => "",
       :slim => "Polaris-Button--sizeSlim",
-      :large => "Polaris-Button--sizeLarge",
+      :large => "Polaris-Button--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
@@ -15,10 +15,13 @@ module Polaris
       TEXT_ALIGN_DEFAULT => "",
       :left => "Polaris-Button--textAlignLeft",
       :center => "Polaris-Button--textAlignCenter",
-      :right => "Polaris-Button--textAlignRight",
+      :right => "Polaris-Button--textAlignRight"
     }
     TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
 
+    DISCLOSURE_DEFAULT = false
+    DISCLOSURE_OPTIONS = [true, false, :down, :up, :select]
+
     renders_one :icon, IconComponent
 
     def initialize(
@@ -31,6 +34,8 @@ module Polaris
       loading: false,
       destructive: false,
       disabled: false,
+      disable_with_loader: false,
+      disclosure: DISCLOSURE_DEFAULT,
       external: false,
       full_width: false,
       submit: false,
@@ -39,15 +44,17 @@ module Polaris
       text_align: TEXT_ALIGN_DEFAULT,
       **system_arguments
     )
-      @tag = url.present? ? 'a' : 'button'
+      @tag = url.present? ? "a" : "button"
       @text_classes = class_names(
         "Polaris-Button__Text",
         "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
       )
       @loading = loading
+      @disclosure = fetch_or_fallback(DISCLOSURE_OPTIONS, disclosure, DISCLOSURE_DEFAULT)
+      @disclosure = :down if @disclosure === true
 
       @system_arguments = system_arguments
-      @system_arguments[:type] = submit ? 'submit' : 'button'
+      @system_arguments[:type] = submit ? "submit" : "button"
       if loading
         @system_arguments[:disabled] = true
       end
@@ -59,6 +66,11 @@ module Polaris
       if disabled
         @system_arguments[:disabled] = disabled
       end
+      @system_arguments[:data] ||= {}
+      prepend_option(@system_arguments[:data], :controller, "polaris-button")
+      if disable_with_loader
+        prepend_option(@system_arguments[:data], :action, "polaris-button#disable")
+      end
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Button",
@@ -80,7 +92,7 @@ module Polaris
     def system_arguments
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Button--iconOnly": icon.present? && content.blank?,
+        "Polaris-Button--iconOnly": icon.present? && content.blank?
       )
       @system_arguments
     end

data/app/components/polaris/icon_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class IconComponent < Polaris::NewComponent
+  class IconComponent < Polaris::Component
     COLOR_DEFAULT = :default
     COLOR_MAPPINGS = {
       COLOR_DEFAULT => "",
@@ -11,7 +11,7 @@ module Polaris
       :warning => "Polaris-Icon--colorWarning",
       :highlight => "Polaris-Icon--colorHighlight",
       :success => "Polaris-Icon--colorSuccess",
-      :primary => "Polaris-Icon--colorPrimary",
+      :primary => "Polaris-Icon--colorPrimary"
     }
     COLOR_OPTIONS = COLOR_MAPPINGS.keys
 
@@ -29,7 +29,7 @@ module Polaris
         "Polaris-Icon",
         COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
         "Polaris-Icon--hasBackdrop" => backdrop,
-        "Polaris-Icon--applyColor" => color != :default,
+        "Polaris-Icon--applyColor" => color != :default
       )
     end
   end

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

@@ -0,0 +1,22 @@
+class Polaris::IndexTable::CellComponent < Polaris::Component
+  def initialize(flush: false, **system_arguments)
+    @flush = flush
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    {tag: "td"}.deep_merge(@system_arguments).tap do |args|
+      args[:classes] = class_names(
+        args[:classes],
+        "Polaris-IndexTable__TableCell",
+        "Polaris-IndexTable__TableCell--flush": @flush
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**system_arguments)) do
+      content
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+class Polaris::IndexTable::ColumnComponent < Polaris::Component
+  attr_reader :title, :flush
+
+  def initialize(title, flush: false, **system_arguments, &block)
+    @title = title
+    @flush = flush
+    @block = block
+  end
+
+  def call(row)
+    @block.call(row)
+  end
+end

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

@@ -0,0 +1,28 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-IndexTable-ScrollContainer">
+    <table class="Polaris-IndexTable__Table">
+      <thead>
+        <tr>
+          <% columns.each_with_index do |column, index| %>
+            <th class="Polaris-IndexTable__TableHeading">
+              <%= column.title %>
+            </th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% @data.each do |row| %>
+          <tr class="Polaris-IndexTable__TableRow Polaris-IndexTable__TableRow--unclickable">
+            <% columns.each_with_index do |column, index| %>
+              <%= render_cell(
+                flush: column.flush,
+              ) do %>
+                <%= column.call(row) %>
+              <% end %>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/app/components/polaris/index_table_component.rb

@@ -0,0 +1,25 @@
+module Polaris
+  class IndexTableComponent < Polaris::Component
+    renders_many :columns, ->(title, **system_arguments, &block) do
+      IndexTable::ColumnComponent.new(title, **system_arguments, &block)
+    end
+
+    def initialize(data, **system_arguments)
+      @data = data
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      {tag: "div"}.deep_merge(@system_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-IndexTable"
+        )
+      end
+    end
+
+    def render_cell(**arguments, &block)
+      render(IndexTable::CellComponent.new(**arguments), &block)
+    end
+  end
+end

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

@@ -1,6 +1,6 @@
-<div class="Polaris-InlineError">
+<%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
   <div class="Polaris-InlineError__Icon">
     <%= polaris_icon(name: "AlertMinor") %>
   </div>
   <%= content %>
-</div>
+<% end %>

data/app/components/polaris/inline_error_component.rb

@@ -1,8 +1,14 @@
 # frozen_string_literal: true
 
 module Polaris
-  class InlineErrorComponent < Polaris::NewComponent
-    def initialize
+  class InlineErrorComponent < Polaris::Component
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-InlineError"
+      )
     end
 
     def renders?

data/app/components/polaris/label_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class LabelComponent < Polaris::NewComponent
+  class LabelComponent < Polaris::Component
     def initialize(
       form: nil,
       attribute: nil,
@@ -19,13 +19,13 @@ module Polaris
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-Label",
+        "Polaris-Label"
       )
 
       @label_options = {}
       @label_options[:class] = class_names(
         "Polaris-Label__Text",
-        "Polaris-Label__RequiredIndicator": required,
+        "Polaris-Label__RequiredIndicator": required
       )
     end
 

data/app/components/polaris/labelled_component.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Polaris
-  class LabelledComponent < Polaris::NewComponent
-    renders_one :label_action, -> (**system_arguments) do
+  class LabelledComponent < Polaris::Component
+    renders_one :label_action, ->(**system_arguments) do
       Polaris::ButtonComponent.new(plain: true, **system_arguments)
     end
 
@@ -38,7 +38,7 @@ module Polaris
         attribute: attribute,
         name: name,
         label: label,
-        required: required,
+        required: required
       }
     end
 

data/app/components/polaris/layout/annotated_section.rb

@@ -2,7 +2,7 @@
 
 module Polaris
   module Layout
-    class AnnotatedSection < Polaris::NewComponent
+    class AnnotatedSection < Polaris::Component
       attr_reader :position
 
       def initialize(position:, title:, description: nil, **system_arguments)
@@ -13,7 +13,7 @@ module Polaris
         @system_arguments = system_arguments
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
-          "Polaris-Layout__AnnotatedSection",
+          "Polaris-Layout__AnnotatedSection"
         )
       end
     end

data/app/components/polaris/layout/section.rb

@@ -2,7 +2,7 @@
 
 module Polaris
   module Layout
-    class Section < Polaris::NewComponent
+    class Section < Polaris::Component
       attr_reader :position
 
       def initialize(
@@ -25,7 +25,7 @@ module Polaris
           "Polaris-Layout__Section--fullWidth" => full_width,
           "Polaris-Layout__Section--oneHalf" => one_half,
           "Polaris-Layout__Section--oneThird" => one_third,
-          "Polaris-Layout__Section--oneFourth" => one_fourth,
+          "Polaris-Layout__Section--oneFourth" => one_fourth
         )
       end
 

data/app/components/polaris/layout_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class LayoutComponent < Polaris::NewComponent
+  class LayoutComponent < Polaris::Component
     # A list of sections
     #
     # @param secondary [Boolean] The section will act like a sidebar
@@ -9,7 +9,7 @@ module Polaris
     # @param one_half [Boolean] The section will only take up 50% of the width
     # @param one_third [Boolean] The section will only take up 33.33% of the width
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :sections, -> (**system_arguments) do
+    renders_many :sections, ->(**system_arguments) do
       @counter += 1
       Layout::Section.new(position: @counter, **system_arguments)
     end
@@ -19,7 +19,7 @@ module Polaris
     # @param title [String] Title
     # @param description [String] Description
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :annotated_sections, -> (**system_arguments) do
+    renders_many :annotated_sections, ->(**system_arguments) do
       @counter += 1
       Layout::AnnotatedSection.new(position: @counter, **system_arguments)
     end
@@ -29,7 +29,7 @@ module Polaris
       @system_arguments = system_arguments
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        'Polaris-Layout'
+        "Polaris-Layout"
       )
     end
 

data/app/components/polaris/link_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Polaris
-  class LinkComponent < Polaris::NewComponent
+  class LinkComponent < Polaris::Component
     def initialize(
       url:,
       external: false,
@@ -24,7 +24,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Link",
         "Polaris-Link--monochrome" => monochrome,
-        "Polaris-Link--removeUnderline" => no_underline,
+        "Polaris-Link--removeUnderline" => no_underline
       )
     end
 
@@ -32,7 +32,7 @@ module Polaris
       render(Polaris::BaseComponent.new(**@system_arguments)) do
         safe_join [
           content.strip.html_safe,
-          (external_icon if @external),
+          (external_icon if @external)
         ].compact
       end
     end
@@ -42,7 +42,7 @@ module Polaris
     def external_icon
       tag.span(class: "Polaris-Link__IconLockup") do
         tag.span(class: "Polaris-Link__IconLayout") do
-          polaris_icon(name: "ExternalSmallMinor", aria: { label: "(opens a new window)" })
+          polaris_icon(name: "ExternalSmallMinor", aria: {label: "(opens a new window)"})
         end
       end
     end

data/app/components/polaris/list_component.rb

@@ -1,17 +1,17 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ListComponent < Polaris::NewComponent
+  class ListComponent < Polaris::Component
     renders_many :items, "ListItemComponent"
 
     TYPE_DEFAULT = :bullet
     TYPE_TAG_MAPPINGS = {
       bullet: :ul,
-      number: :ol,
+      number: :ol
     }
     TYPE_CLASS_MAPPINGS = {
       bullet: "",
-      number: "Polaris-List--typeNumber",
+      number: "Polaris-List--typeNumber"
     }
     TYPE_OPTIONS = TYPE_TAG_MAPPINGS.keys
 
@@ -24,11 +24,11 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-List",
-        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")],
+        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")]
       )
     end
 
-    class ListItemComponent < Polaris::NewComponent
+    class ListItemComponent < Polaris::Component
       def initialize(**system_arguments)
         @system_arguments = system_arguments
         @system_arguments[:tag] = :li

data/app/components/polaris/logo.rb

@@ -0,0 +1,13 @@
+class Polaris::Logo
+  attr_reader :src
+  attr_reader :url
+  attr_reader :alt
+  attr_reader :width
+
+  def initialize(src:, url: nil, alt: nil, width: "125px")
+    @url = url
+    @src = src
+    @alt = alt
+    @width = width
+  end
+end

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

@@ -0,0 +1,19 @@
+class Polaris::Modal::SectionComponent < Polaris::Component
+  def initialize(**system_arguments)
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Modal-Section"
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**system_arguments)) { content }
+  end
+end

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

@@ -0,0 +1,79 @@
+<% modal_content = capture do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% end %>
+
+  <% if content.present? %>
+    <% if @sectioned %>
+      <%= render Polaris::Modal::SectionComponent.new do %>
+        <%= content %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <div>
+    <%= render(Polaris::BaseComponent.new(**dialog_arguments)) do %>
+      <div class="<%= modal_classes %>">
+        <div class="<%= header_classes %>">
+          <div class="Polaris-Modal-Header__Title">
+            <%= polaris_display_text(element: :h2, size: :small) do %>
+              <%= @title %>
+            <% end %>
+          </div>
+          <% if close_button.present? %>
+            <%= close_button %>
+          <% else %>
+            <%= render(Polaris::BaseComponent.new(**close_button_arguments)) do %>
+              <%= polaris_icon(name: "MobileCancelMajor", color: :base) %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <div class="Polaris-Modal__BodyWrapper">
+          <% if @scrollable %>
+            <%= polaris_scrollable(classes: "Polaris-Modal__Body") do %>
+              <%= modal_content %>
+            <% end %>
+          <% else %>
+            <%= modal_content %>
+          <% end %>
+        </div>
+
+        <% if render_footer? %>
+          <div class="Polaris-Modal-Footer">
+            <div class="Polaris-Modal-Footer__FooterContent">
+              <%= polaris_stack(alignment: :center) do |stack| %>
+                <% stack.item(fill: true) do %>
+                <% end %>
+
+                <% stack.item do %>
+                  <%= polaris_button_group do |group| %>
+                    <% if secondary_actions %>
+                      <% secondary_actions.each do |action| %>
+                        <% group.item do %>
+                          <%= action %>
+                        <% end %>
+                      <% end %>
+
+                      <% if primary_action %>
+                        <% group.item do %>
+                          <%= primary_action %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/polaris/modal_component.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ModalComponent < Polaris::Component
+    renders_one :close_button, ->(**system_arguments) do
+      button_arguments = @close_button_arguments.deep_merge(system_arguments)
+      render(Polaris::BaseComponent.new(**button_arguments)) do
+        polaris_icon(name: "MobileCancelMajor", color: :base)
+      end
+    end
+    renders_many :sections, Polaris::Modal::SectionComponent
+    renders_one :primary_action, ->(primary: true, **system_arguments) do
+      Polaris::ButtonComponent.new(primary: primary, **system_arguments)
+    end
+    renders_many :secondary_actions, Polaris::ButtonComponent
+
+    def initialize(
+      title:,
+      open: false,
+      sectioned: true,
+      scrollable: true,
+      large: false,
+      small: false,
+      limit_height: false,
+      dialog_arguments: {},
+      **system_arguments
+    )
+      @title = title
+      @open = open
+      @sectioned = sectioned
+      @scrollable = scrollable
+      @large = large
+      @small = small
+      @limit_height = limit_height
+      @dialog_arguments = dialog_arguments
+      @system_arguments = system_arguments
+      @close_button_arguments = {
+        tag: "button",
+        type: "button",
+        classes: "Polaris-Modal-CloseButton",
+        aria: {label: "Close"}
+      }
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        prepend_option(opts[:data], :controller, "polaris-modal")
+        opts[:data][:polaris_modal_open_value] = @open
+        opts[:data][:polaris_modal_hidden_class] = "Polaris--hidden"
+        opts[:data][:polaris_modal_backdrop_class] = "Polaris-Backdrop"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Modal-Dialog__Container",
+          "Polaris--hidden"
+        )
+      end
+    end
+
+    def dialog_arguments
+      @dialog_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:role] = "dialog"
+        opts[:aria] ||= {}
+        opts[:aria][:modal] = "true"
+        opts[:tabindex] = "-1"
+        opts[:classes] = class_names(
+          @dialog_arguments[:classes],
+          "Polaris-Modal-Dialog"
+        )
+      end
+    end
+
+    def close_button_arguments
+      @close_button_arguments.deep_merge({
+        data: {action: "polaris-modal#close"}
+      })
+    end
+
+    def modal_classes
+      class_names(
+        "Polaris-Modal-Dialog__Modal",
+        "Polaris-Modal-Dialog--sizeLarge": @large,
+        "Polaris-Modal-Dialog--sizeSmall": @small,
+        "Polaris-Modal-Dialog--limitHeight": @limit_height
+      )
+    end
+
+    def header_classes
+      @title.present? ? "Polaris-Modal-Header" : "Polaris-Modal-Header--titleHidden"
+    end
+
+    def render_footer?
+      primary_action.present? || secondary_actions.any?
+    end
+  end
+end

data/app/components/polaris/navigation/item_component.html.erb

@@ -0,0 +1,31 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-Navigation__ItemWrapper">
+    <%= link_to @url, class: link_classes, tabindex: "0" do %>
+      <% if @icon.present? %>
+        <div class="Polaris-Navigation__Icon">
+          <%= polaris_icon(name: @icon) %>
+        </div>
+      <% end %>
+      <span class="Polaris-Navigation__Text">
+        <%= @label %>
+      </span>
+      <% if @badge.present? %>
+        <div class="Polaris-Navigation__Badge">
+          <%= polaris_badge { @badge } %>
+        </div>
+      <% end %>
+    <% end %>
+    <%= secondary_action %>
+  </div>
+  <% if sub_items.present? %>
+    <div class="Polaris-Navigation__SecondaryNavigation Polaris-Navigation--isExpanded">
+      <div class="Polaris-Collapsible" style="max-height: none; overflow: visible;">
+        <ul class="Polaris-Navigation__List">
+          <% sub_items.each do |sub_item| %>
+            <%= sub_item %>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+<% end %>