polaris_view_components 0.6.0 → 0.7.0

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

@@ -0,0 +1,12 @@
+module Polaris
+  class Autocomplete::SectionComponent < NewComponent
+    renders_many :options, ->(**system_arguments) do
+      Autocomplete::OptionComponent.new(multiple: @multiple, **system_arguments)
+    end
+
+    def initialize(multiple: false, **system_arguments)
+      @multiple = multiple
+      @system_arguments = system_arguments
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
+    <% popover.activator do %>
+      <%= text_field %>
+    <% end %>
+
+    <% if empty_state.present? %>
+      <div
+        data-polaris-autocomplete-target="emptyState"
+        class="Polaris-Autocomplete__EmptyState Polaris--hidden"
+      >
+        <%= empty_state %>
+      </div>
+    <% end %>
+
+    <%= polaris_option_list(**option_list_arguments) do |list| %>
+      <% if sections.present? %>
+        <% sections.each do |section| %>
+          <%= section %>
+        <% end %>
+      <% elsif options.present? %>
+        <% options.each do |option| %>
+          <%= option %>
+        <% end %>
+      <% else %>
+        <%= content %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/autocomplete_component.rb

@@ -0,0 +1,58 @@
+module Polaris
+  class AutocompleteComponent < NewComponent
+    renders_one :text_field, ->(**system_arguments) do
+      system_arguments[:data] ||= {}
+      prepend_option(system_arguments[:data], :action, %w[
+        click->polaris-autocomplete#toggle
+        click@window->polaris-popover#hide
+      ])
+
+      system_arguments[:input_options] ||= {}
+      system_arguments[:input_options][:data] ||= {}
+      system_arguments[:input_options][:data][:polaris_autocomplete_target] = "input"
+
+      TextFieldComponent.new(**system_arguments)
+    end
+    renders_many :sections, ->(**system_arguments) do
+      Autocomplete::SectionComponent.new(multiple: @multiple, **system_arguments)
+    end
+    renders_many :options, ->(**system_arguments) do
+      Autocomplete::OptionComponent.new(multiple: @multiple, **system_arguments)
+    end
+    renders_one :empty_state
+
+    def initialize(multiple: false, url: nil, **system_arguments)
+      @multiple = multiple
+      @url = url
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        opts[:data][:controller] = "polaris-autocomplete"
+        if @url.present?
+          opts[:data][:polaris_autocomplete_url_value] = @url
+        end
+      end
+    end
+
+    def popover_arguments
+      {
+        alignment: :left,
+        full_width: true,
+        inline: false,
+        wrapper_arguments: {
+          data: {polaris_autocomplete_target: "popover"}
+        }
+      }
+    end
+
+    def option_list_arguments
+      {
+        data: {polaris_autocomplete_target: "results"}
+      }
+    end
+  end
+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/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

@@ -28,6 +28,7 @@ module Polaris
       @attribute = attribute
       @name = name
       @checked = checked
+      @disabled = disabled
       @value = value
       @unchecked_value = unchecked_value
 
@@ -49,14 +50,7 @@ module Polaris
       }.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?
@@ -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_list_component.rb

@@ -26,7 +26,7 @@ module Polaris
     end
 
     def initialize(
-      title:,
+      title: nil,
       title_hidden: false,
       form: nil,
       attribute: nil,

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

@@ -8,6 +8,28 @@
           </div>
         </div>
       <% end %>
+      <% if items.present? %>
+        <div class="<%= items_wrapper_classes %>">
+          <% items.each do |item| %>
+            <%= item %>
+          <% end %>
+        </div>
+      <% end %>
     </div>
+    <% if content.present? %>
+      <div class="Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer">
+        <%= content %>
+      </div>
+    <% end %>
   </div>
+  <% if tags.present? %>
+    <div class="Polaris-Filters__TagsContainer">
+      <%= tags %>
+    </div>
+  <% end %>
+  <% if @help_text.present? %>
+    <div class="Polaris-Filters__HelpText">
+      <%= polaris_text_subdued { @help_text } %>
+    </div>
+  <% end %>
 <% end %>

data/app/components/polaris/filters_component.rb

@@ -2,9 +2,17 @@
 
 module Polaris
   class FiltersComponent < Polaris::NewComponent
-    renders_one :query, "QueryComponent"
+    renders_one :query, ->(**system_arguments) do
+      QueryComponent.new(disabled: @disabled, **system_arguments)
+    end
+    renders_many :items, ->(**system_arguments) do
+      ItemComponent.new(disabled: @disabled, **system_arguments)
+    end
+    renders_one :tags
 
-    def initialize(**system_arguments)
+    def initialize(disabled: false, help_text: nil, **system_arguments)
+      @disabled = disabled
+      @help_text = help_text
       @system_arguments = system_arguments
     end
 
@@ -18,8 +26,17 @@ module Polaris
       end
     end
 
+    def items_wrapper_classes
+      class_names(
+        "Polaris-Filters-ConnectedFilterControl__RightContainer",
+        "Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters",
+        "Polaris-Filters-ConnectedFilterControl--queryFieldHidden": @query.blank?
+      )
+    end
+
     class QueryComponent < Polaris::NewComponent
-      def initialize(clear_button: true, **system_arguments)
+      def initialize(clear_button: true, disabled: false, **system_arguments)
+        @disabled = disabled
         @system_arguments = system_arguments.merge(
           label_hidden: true,
           clear_button: clear_button
@@ -27,12 +44,48 @@ module Polaris
       end
 
       def call
-        polaris_text_field(**@system_arguments) do |text_field|
+        polaris_text_field(disabled: @disabled, **@system_arguments) do |text_field|
           text_field.prefix do
             polaris_icon(name: "SearchMinor")
           end
         end
       end
     end
+
+    class ItemComponent < Polaris::NewComponent
+      def initialize(label:, sectioned: true, width: nil, disabled: false, **system_arguments)
+        @label = label
+        @sectioned = sectioned
+        @width = width
+        @disabled = disabled
+        @system_arguments = system_arguments
+      end
+
+      def system_arguments
+        @system_arguments.tap do |opts|
+          opts[:tag] = "div"
+          opts[:classes] = class_names(
+            @system_arguments[:classes],
+            "Polaris-Filters-ConnectedFilterControl__Item"
+          )
+        end
+      end
+
+      def popover_arguments
+        {
+          sectioned: @sectioned,
+          style: ("width: #{@width}" if @width.present?)
+        }
+      end
+
+      def call
+        render(Polaris::BaseComponent.new(**system_arguments)) do
+          render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover|
+            popover.button(disclosure: true, disabled: @disabled) { @label }
+            content
+          end
+        end
+      end
+    end
   end
 end

data/app/components/polaris/frame/save_bar_component.html.erb

@@ -0,0 +1,23 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <% if @logo.present? && !@flush %>
+    <div class="Polaris-Frame-ContextualSaveBar__LogoContainer" style="width: <%= @logo.width %>">
+      <%= image_tag @logo.src, style: "width: #{@logo.width}", alt: @logo.alt %>
+    </div>
+  <% end %>
+
+  <div class="<%= content_classes %>">
+    <h2 class="Polaris-Frame-ContextualSaveBar__Message">
+      <%= @message %>
+    </h2>
+    <div class="Polaris-Frame-ContextualSaveBar__ActionContainer">
+      <%= polaris_stack(spacing: :tight) do |stack| %>
+        <% stack.item do %>
+          <%= discard_action %>
+        <% end %>
+        <% stack.item do %>
+          <%= save_action %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/frame/save_bar_component.rb

@@ -0,0 +1,31 @@
+class Polaris::Frame::SaveBarComponent < Polaris::NewComponent
+  renders_one :save_action, ->(**system_arguments) do
+    Polaris::ButtonComponent.new(primary: true, **system_arguments)
+  end
+  renders_one :discard_action, Polaris::ButtonComponent
+
+  def initialize(message:, flush: false, full_width: false, logo: nil, **system_arguments)
+    @message = message
+    @flush = flush
+    @full_width = full_width
+    @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Frame-ContextualSaveBar"
+      )
+    end
+  end
+
+  def content_classes
+    class_names(
+      "Polaris-Frame-ContextualSaveBar__Contents",
+      "Polaris-Frame-ContextualSaveBar--fullWidth": @full_width
+    )
+  end
+end

data/app/components/polaris/frame/top_bar_component.html.erb

@@ -0,0 +1,30 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <button data-action="polaris-frame#openMenu" type="button" class="Polaris-TopBar__NavigationIcon">
+    <%= polaris_icon(name: "MobileHamburgerMajor") %>
+  </button>
+
+  <% if @logo.present? %>
+    <div class="Polaris-TopBar__LogoContainer Polaris-TopBar__LogoDisplayControl">
+      <%= link_to(@logo.url,
+        class: "Polaris-TopBar__LogoLink",
+        style: "width: #{@logo.width}"
+      ) do %>
+        <%= image_tag @logo.src,
+          class: "Polaris-TopBar__Logo",
+          style: "width: #{@logo.width}",
+          alt: @logo.alt %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="Polaris-TopBar__Contents">
+    <%# FIXME: Not implemented yet %>
+    <div class="Polaris-TopBar__SearchField"></div>
+    <div class="Polaris-TopBar__SecondaryMenu"></div>
+    <div>
+      <div class="Polaris-TopBar-Menu__ActivatorWrapper">
+        <%= user_menu %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/frame/top_bar_component.rb

@@ -0,0 +1,18 @@
+class Polaris::Frame::TopBarComponent < Polaris::NewComponent
+  renders_one :user_menu, Polaris::TopBar::UserMenuComponent
+
+  def initialize(logo:, **system_arguments)
+    @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-TopBar"
+      )
+    end
+  end
+end

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/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/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 %>