polaris_view_components 0.3.3 → 0.7.0

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

@@ -0,0 +1,44 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <% if top_bar.present? %>
+    <div class="Polaris-Frame__TopBar">
+      <%= top_bar %>
+    </div>
+  <% end %>
+
+  <% if navigation.present? %>
+    <div data-polaris-frame-target="navigation" class="Polaris-Frame__Navigation">
+      <%= navigation %>
+      <button
+        data-action="polaris-frame#closeMenu"
+        type="button"
+        class="Polaris-Frame__NavigationDismiss"
+        tabindex="-1"
+      >
+        <%= polaris_icon(name: "MobileCancelMajor") %>
+      </button>
+    </div>
+  <% end %>
+
+  <% if save_bar.present? %>
+    <div
+      data-polaris-frame-target="saveBar"
+      class="Polaris-Frame__ContextualSaveBar Polaris-Frame-CSSAnimation--startFade"
+    >
+      <%= save_bar %>
+    </div>
+  <% end %>
+
+  <div data-polaris-frame-target="navigationOverlay"></div>
+
+  <main class="Polaris-Frame__Main">
+    <div class="Polaris-Frame__Content">
+      <%= content %>
+    </div>
+  </main>
+<% end %>
+
+<% if toasts.present? %>
+  <div class="Polaris-Frame-ToastManager">
+    <%= toasts %>
+  </div>
+<% end %>

data/app/components/polaris/frame_component.rb

@@ -0,0 +1,33 @@
+module Polaris
+  class FrameComponent < Polaris::NewComponent
+    renders_one :top_bar, ->(**system_arguments) do
+      Polaris::Frame::TopBarComponent.new(logo: @logo, **system_arguments)
+    end
+    renders_one :navigation, ->(**system_arguments) do
+      Polaris::NavigationComponent.new(logo: @logo, **system_arguments)
+    end
+    renders_one :save_bar, ->(**system_arguments) do
+      Polaris::Frame::SaveBarComponent.new(logo: @logo, **system_arguments)
+    end
+    renders_one :toasts
+
+    def initialize(logo: nil, **system_arguments)
+      @logo = logo && Polaris::Logo.new(**logo)
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        prepend_option(@system_arguments[:data], :controller, "polaris-frame")
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-Frame",
+          "Polaris-Frame--hasNav": navigation.present?,
+          "Polaris-Frame--hasTopBar": top_bar.present?
+        )
+      end
+    end
+  end
+end

data/app/components/polaris/heading_component.rb

@@ -13,7 +13,7 @@ module Polaris
       @system_arguments[:tag] = element
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        'Polaris-Heading'
+        "Polaris-Heading"
       )
     end
 

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

@@ -19,4 +19,17 @@
       <%= 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>

data/app/components/polaris/headless_button.rb

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

@@ -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::NewComponent
+  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::NewComponent
+  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::NewComponent
+    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

@@ -2,7 +2,13 @@
 
 module Polaris
   class InlineErrorComponent < Polaris::NewComponent
-    def initialize
+    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

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

@@ -2,7 +2,7 @@
 
 module Polaris
   class LabelledComponent < Polaris::NewComponent
-    renders_one :label_action, -> (**system_arguments) do
+    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

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

@@ -11,6 +11,7 @@ module Polaris
         full_width: false,
         one_half: false,
         one_third: false,
+        one_fourth: false,
         **system_arguments
       )
         @position = position
@@ -24,6 +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
         )
       end
 

data/app/components/polaris/layout_component.rb

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

@@ -6,6 +6,7 @@ module Polaris
       url:,
       external: false,
       monochrome: false,
+      no_underline: false,
       **system_arguments
     )
       @url = url
@@ -23,14 +24,15 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Link",
         "Polaris-Link--monochrome" => monochrome,
+        "Polaris-Link--removeUnderline" => no_underline
       )
     end
 
     def call
       render(Polaris::BaseComponent.new(**@system_arguments)) do
         safe_join [
-          content.strip,
-          (external_icon if @external),
+          content.strip.html_safe,
+          (external_icon if @external)
         ].compact
       end
     end
@@ -40,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

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

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::NewComponent
+  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::NewComponent
+    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