polaris_view_components 0.3.2 → 0.6.0

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.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,
@@ -37,7 +37,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,7 +45,7 @@ module Polaris
         label_hidden: label_hidden,
         disabled: disabled,
         help_text: help_text,
-        error: error,
+        error: error
       }.merge(wrapper_arguments)
 
       @input_options = input_options
@@ -59,7 +59,7 @@ module Polaris
       @input_options[:class] = class_names(
         @input_options[:classes],
         "Polaris-Checkbox__Input",
-        "Polaris-Checkbox__Input--indeterminate": indeterminate?,
+        "Polaris-Checkbox__Input--indeterminate": indeterminate?
       )
     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,7 +21,7 @@ module Polaris
         value: value,
         checked: @selected.include?(value),
         disabled: disabled || @disabled,
-        **system_arguments,
+        **system_arguments
       )
     end
 
@@ -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

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

@@ -0,0 +1,77 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-DataTable__ScrollContainer">
+    <table class="Polaris-DataTable__Table">
+      <thead>
+        <tr>
+          <% columns.each_with_index do |column, index| %>
+            <%= render_cell(
+              first: index.zero?,
+              numeric: column.numeric,
+              tag: "th",
+              scope: "col",
+              header: true,
+              sort_url: column.sort_url,
+              sorted: column.sorted,
+            ) do %>
+              <%= column.title %>
+            <% end %>
+          <% end %>
+        </tr>
+        <% if @totals_in_header %>
+          <tr>
+            <% columns.each_with_index do |column, index| %>
+              <%= render_cell(
+                first: index.zero?,
+                numeric: column.numeric,
+                tag: (index.zero? ? "th" : "td"),
+                scope: ("row" if index.zero?),
+                total: true,
+              ) do %>
+                <%= column.total %>
+              <% end %>
+            <% end %>
+          </tr>
+        <% end %>
+      </thead>
+      <tbody>
+        <% @data.each do |row| %>
+          <tr class="Polaris-DataTable__TableRow <%= "Polaris-DataTable--hoverable" if @hoverable %>">
+            <% columns.each_with_index do |column, index| %>
+              <%= render_cell(
+                first: index.zero?,
+                numeric: column.numeric,
+                tag: (index.zero? ? "th" : "td"),
+                scope: ("row" if index.zero?),
+              ) do %>
+                <%= column.call(row) %>
+              <% end %>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+      <% if @totals_in_footer %>
+        <tfoot>
+          <tr>
+            <% columns.each_with_index do |column, index| %>
+              <%= render_cell(
+                first: index.zero?,
+                numeric: column.numeric,
+                tag: (index.zero? ? "th" : "td"),
+                scope: ("row" if index.zero?),
+                total: true,
+                total_footer: true,
+              ) do %>
+                <%= column.total %>
+              <% end %>
+            <% end %>
+          </tr>
+        </tfoot>
+      <% end %>
+    </table>
+  </div>
+  <% if footer.present? %>
+    <div class="Polaris-DataTable__Footer">
+      <%= footer %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/data_table_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Polaris
+  class DataTableComponent < Polaris::NewComponent
+    ALIGNMENT_DEFAULT = :top
+    ALIGNMENT_OPTIONS = [:top, :bottom, :middle, :baseline]
+
+    renders_many :columns, ->(title, **system_arguments, &block) do
+      DataTable::ColumnComponent.new(title, **system_arguments, &block)
+    end
+    renders_one :footer
+
+    def initialize(
+      data,
+      hoverable: true,
+      vertical_alignment: ALIGNMENT_DEFAULT,
+      totals_in_header: false,
+      totals_in_footer: false,
+      **system_arguments
+    )
+      @data = data
+      @hoverable = hoverable
+      @vertical_alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, vertical_alignment, ALIGNMENT_DEFAULT)
+      @totals_in_header = totals_in_header
+      @totals_in_footer = totals_in_footer
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      {tag: "div"}.deep_merge(@system_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-DataTable"
+        )
+      end
+    end
+
+    def render_cell(**arguments, &block)
+      render(DataTable::CellComponent.new(vertical_alignment: @vertical_alignment, **arguments), &block)
+    end
+  end
+end

data/app/components/polaris/description_list_component.rb

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

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

@@ -3,11 +3,9 @@
 module Polaris
   module Dropzone
     class Component < Polaris::Component
-      include Polaris::ActionHelper
-
       ALLOWED_TYPES = %w[file image]
 
-      validates :type, inclusion: { in: ALLOWED_TYPES, message: "%{value} is not a valid type" }
+      validates :type, inclusion: {in: ALLOWED_TYPES, message: "%{value} is not a valid type"}
       validates :label_action, type: Action, allow_nil: true
 
       # TODO
@@ -79,52 +77,52 @@ module Polaris
           multiple: @allow_multiple,
           data: {
             action: "focus->polaris--dropzone#onFocus blur->polaris--dropzone#onBlur change->polaris--dropzone#onChange",
-            'polaris--dropzone-target': 'input',
+            'polaris--dropzone-target': "input"
           }
         }
       end
 
       private
 
-        def additional_aria
-          {
-            disabled: @disabled.to_s,
-          }
-        end
-
-        def additional_data
-          {
-            controller: "polaris--dropzone",
-            action: "click->polaris--dropzone#onClick #{drop_actions}",
-            'polaris--dropzone-accept-value': @accept,
-            'polaris--dropzone-allowMultiple-value': @allow_multiple.to_s,
-            'polaris--dropzone-disabled-value': @disabled.to_s,
-            'polaris--dropzone-focused-value': 'false',
-            'polaris--dropzone-drop-on-page-value': 'false',
-          }
-        end
+      def additional_aria
+        {
+          disabled: @disabled.to_s
+        }
+      end
 
-        def drop_actions
-          event_scope = @drop_on_page ? "@document" : ""
+      def additional_data
+        {
+          controller: "polaris--dropzone",
+          action: "click->polaris--dropzone#onClick #{drop_actions}",
+          'polaris--dropzone-accept-value': @accept,
+          'polaris--dropzone-allowMultiple-value': @allow_multiple.to_s,
+          'polaris--dropzone-disabled-value': @disabled.to_s,
+          'polaris--dropzone-focused-value': "false",
+          'polaris--dropzone-drop-on-page-value': "false"
+        }
+      end
 
-          [
-            "drop#{event_scope}->polaris--dropzone#onDrop",
-            "dragover#{event_scope}->polaris--dropzone#onDragOver",
-            "dragenter#{event_scope}->polaris--dropzone#onDragEnter",
-            "dragleave#{event_scope}->polaris--dropzone#onDragLeave"
-          ].join(" ")
-        end
+      def drop_actions
+        event_scope = @drop_on_page ? "@document" : ""
 
-        def classes
-          classes = %w[Polaris-DropZone Polaris-DropZone--sizeExtraLarge]
+        [
+          "drop#{event_scope}->polaris--dropzone#onDrop",
+          "dragover#{event_scope}->polaris--dropzone#onDragOver",
+          "dragenter#{event_scope}->polaris--dropzone#onDragEnter",
+          "dragleave#{event_scope}->polaris--dropzone#onDragLeave"
+        ].join(" ")
+      end
+
+      def classes
+        classes = %w[Polaris-DropZone Polaris-DropZone--sizeExtraLarge]
 
-          classes << "Polaris-DropZone--isDisabled" if @disabled
-          classes << "Polaris-DropZone--isDisabled" if @disabled
-          classes << "Polaris-DropZone--hasError" if @error.present?
-          classes << "Polaris-DropZone--hasOutline" if @outline
+        classes << "Polaris-DropZone--isDisabled" if @disabled
+        classes << "Polaris-DropZone--isDisabled" if @disabled
+        classes << "Polaris-DropZone--hasError" if @error.present?
+        classes << "Polaris-DropZone--hasOutline" if @outline
 
-          classes
-        end
+        classes
+      end
     end
   end
 end

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

@@ -16,20 +16,22 @@
             <% end %>
           </div>
         <% end %>
-        <div class="Polaris-EmptyState__Actions">
-          <%= polaris_stack(spacing: :tight, distribution: :center, alignment: :center) do |stack| %>
-            <% if primary_action.present? %>
-              <% stack.item do %>
-                <%= primary_action %>
+        <% if primary_action.present? || secondary_action.present? %>
+          <div class="Polaris-EmptyState__Actions">
+            <%= polaris_stack(spacing: :tight, distribution: :center, alignment: :center) do |stack| %>
+              <% if primary_action.present? %>
+                <% stack.item do %>
+                  <%= primary_action %>
+                <% end %>
               <% end %>
-            <% end %>
-            <% if secondary_action.present? %>
-              <% stack.item do %>
-                <%= secondary_action %>
+              <% if secondary_action.present? %>
+                <% stack.item do %>
+                  <%= secondary_action %>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
-        </div>
+          </div>
+        <% end %>
         <% if footer.present? %>
           <div class="Polaris-EmptyState__FooterContent">
             <div class="Polaris-TextContainer">
@@ -44,4 +46,7 @@
       <img src="<%= @image %>" role="presentation" alt="" class="Polaris-EmptyState__Image">
     </div>
   </div>
+  <% if unsectioned_content.present? %>
+    <%= unsectioned_content %>
+  <% end %>
 <% end %>

data/app/components/polaris/empty_state_component.rb

@@ -5,15 +5,16 @@ module Polaris
     WITHIN_DEFAULT = :page
     WITHIN_MAPPINGS = {
       WITHIN_DEFAULT => "",
-      container: "Polaris-EmptyState--withinContentContainer",
+      :container => "Polaris-EmptyState--withinContentContainer"
     }
     WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
 
-    renders_one :primary_action, -> (primary: true, **system_arguments) do
+    renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
     renders_one :secondary_action, Polaris::ButtonComponent
     renders_one :footer
+    renders_one :unsectioned_content
 
     def initialize(
       image:,
@@ -31,7 +32,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-EmptyState",
         WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
-        "Polaris-EmptyState--fullWidth": full_width,
+        "Polaris-EmptyState--fullWidth": full_width
       )
     end
   end

data/app/components/polaris/exception_list/item_component.rb

@@ -3,7 +3,7 @@ class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
   STATUS_MAPPINGS = {
     STATUS_DEFAULT => "",
     :critical => "Polaris-ExceptionList--statusCritical",
-    :warning => "Polaris-ExceptionList--statusWarning",
+    :warning => "Polaris-ExceptionList--statusWarning"
   }
   STATUS_OPTIONS = STATUS_MAPPINGS.keys
 
@@ -21,7 +21,7 @@ class Polaris::ExceptionList::ItemComponent < Polaris::NewComponent
     @system_arguments[:classes] = class_names(
       @system_arguments[:classes],
       "Polaris-ExceptionList__Item",
-      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/exception_list_component.rb

@@ -9,7 +9,7 @@ module Polaris
       @system_arguments[:tag] = "ul"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-ExceptionList",
+        "Polaris-ExceptionList"
       )
     end
 

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

@@ -0,0 +1,13 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-Filters-ConnectedFilterControl__Wrapper">
+    <div class="Polaris-Filters-ConnectedFilterControl Polaris-Filters-ConnectedFilterControl--right">
+      <% if query.present? %>
+        <div class="Polaris-Filters-ConnectedFilterControl__CenterContainer">
+          <div class="Polaris-Filters-ConnectedFilterControl__Item">
+            <%= query %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>