polaris_view_components 0.5.0 → 0.6.0

data/app/assets/stylesheets/polaris_view_components/custom.css

@@ -1,3 +1,7 @@
+.Polaris--hidden {
+  display: none;
+}
+
 /* Add missing 1/4 section for layout */
 @media (min-width: 30.625em) {
   .Polaris-Layout__Section--oneFourth {
@@ -38,6 +42,27 @@ a.Polaris-Tag__Button {
 }
 
 /* Remove box-shadow from buttons and links */
-.Polaris-Button::after, .Polaris-Button:focus::after, .Polaris-Breadcrumbs__Breadcrumb::after {
+.Polaris-Button::after,
+.Polaris-Button:focus::after,
+.Polaris-Breadcrumbs__Breadcrumb::after {
+  box-shadow: none !important;
+}
+
+.Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
   box-shadow: none !important;
 }
+
+/* ResourceItem */
+.Polaris-ResourceItem__Owned--offset {
+  padding-left: 2rem;
+}
+
+/* Popover */
+.Polaris-Popover {
+  margin: 0;
+}
+
+.Polaris-Popover__PopoverOverlay--closed {
+  visibility: hidden;
+  pointer-events: none;
+}

data/app/assets/stylesheets/polaris_view_components.css

@@ -2177,6 +2177,9 @@ html, body{ min-height:100%; height:100%; }
 .Polaris-Spacer--horizontalSpacingExtraLoose {
   width: 32px;
 }
+.Polaris--hidden {
+  display: none;
+}
 /* Add missing 1/4 section for layout */
 @media (min-width: 30.625em) {
   .Polaris-Layout__Section--oneFourth {
@@ -2209,6 +2212,23 @@ a.Polaris-Tag__Button {
   font-size: 1.25rem;
 }
 /* Remove box-shadow from buttons and links */
-.Polaris-Button::after, .Polaris-Button:focus::after, .Polaris-Breadcrumbs__Breadcrumb::after {
+.Polaris-Button::after,
+.Polaris-Button:focus::after,
+.Polaris-Breadcrumbs__Breadcrumb::after {
+  box-shadow: none !important;
+}
+.Polaris-Tabs__Tab:focus > .Polaris-Tabs__Title::after {
   box-shadow: none !important;
 }
+/* ResourceItem */
+.Polaris-ResourceItem__Owned--offset {
+  padding-left: 2rem;
+}
+/* Popover */
+.Polaris-Popover {
+  margin: 0;
+}
+.Polaris-Popover__PopoverOverlay--closed {
+  visibility: hidden;
+  pointer-events: none;
+}

data/app/components/polaris/action.rb

@@ -5,9 +5,9 @@ module Polaris
     def initialize(
       content:,
       url:,
-      accessibility_label: '',
+      accessibility_label: "",
       external: false,
-      id: '',
+      id: "",
       data: {}
     )
       @content = content
@@ -25,7 +25,7 @@ module Polaris
         external: @external,
         id: @id,
         url: @url,
-        data: @data,
+        data: @data
       }
     end
   end

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

@@ -0,0 +1,35 @@
+<li>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <div class="Polaris-ActionList__Content">
+      <% if @icon.present? %>
+        <span class="Polaris-ActionList__Prefix">
+          <%= polaris_icon(name: @icon) %>
+        </span>
+      <% end %>
+      <% if prefix.present? %>
+        <span class="Polaris-ActionList__Prefix">
+          <%= prefix %>
+        </span>
+      <% end %>
+
+      <span class="Polaris-ActionList__Text">
+        <% if @help_text.present? %>
+          <span class="Polaris-ActionList__ContentBlock">
+            <span class="Polaris-ActionList__ContentBlockInner">
+              <%= content %>
+            </span>
+            <%= polaris_text_subdued { @help_text } %>
+          </span>
+        <% else %>
+          <%= content %>
+        <% end %>
+      </span>
+
+      <% if suffix.present? %>
+        <span class="Polaris-ActionList__Suffix">
+          <%= suffix %>
+        </span>
+      <% end %>
+    </div>
+  <% end %>
+</li>

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

@@ -0,0 +1,41 @@
+class Polaris::ActionList::ItemComponent < Polaris::NewComponent
+  renders_one :prefix
+  renders_one :suffix
+
+  def initialize(
+    url: nil,
+    icon: nil,
+    help_text: nil,
+    active: false,
+    destructive: false,
+    external: false,
+    **system_arguments
+  )
+    @url = url
+    @icon = icon
+    @help_text = help_text
+    @active = active
+    @destructive = destructive
+    @external = external
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      if @url.present?
+        opts[:tag] = "a"
+        opts[:href] = @url
+        opts[:target] = "_blank" if @external
+      else
+        opts[:tag] = "button"
+        opts[:type] = "button"
+      end
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ActionList__Item",
+        "Polaris-ActionList--active": @active,
+        "Polaris-ActionList--destructive": @destructive
+      )
+    end
+  end
+end

data/app/components/polaris/action_list/section_component.html.erb

@@ -0,0 +1,16 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <% if @title.present? %>
+    <p class="<%= title_classes %>">
+      <%= @title %>
+    </p>
+  <% end %>
+  <ul class="Polaris-ActionList__Actions">
+    <% if items.present? %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </ul>
+<% end %>

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

@@ -0,0 +1,26 @@
+class Polaris::ActionList::SectionComponent < Polaris::NewComponent
+  renders_many :items, Polaris::ActionList::ItemComponent
+
+  def initialize(position: 1, title: nil, **system_arguments)
+    @position = position
+    @title = title
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ActionList__Section--withoutTitle": @title.blank?
+      )
+    end
+  end
+
+  def title_classes
+    class_names(
+      "Polaris-ActionList__Title",
+      "Polaris-ActionList--firstSectionWithTitle": @position == 1
+    )
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% else %>
+    <%= render Polaris::ActionList::SectionComponent.new do %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/action_list_component.rb

@@ -0,0 +1,25 @@
+module Polaris
+  class ActionListComponent < Polaris::NewComponent
+    renders_many :items, Polaris::ActionList::ItemComponent
+    renders_many :sections, ->(**system_arguments) do
+      @counter += 1
+
+      Polaris::ActionList::SectionComponent.new(position: @counter, **system_arguments)
+    end
+
+    def initialize(**system_arguments)
+      @counter = 0
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-ActionList"
+        )
+      end
+    end
+  end
+end

data/app/components/polaris/application_component.rb

@@ -9,27 +9,27 @@ class Polaris::ApplicationComponent < ViewComponent::Base
 
   private
 
-    def classes
-      []
-    end
+  def classes
+    []
+  end
 
-    def additional_data
-      {}
-    end
+  def additional_data
+    {}
+  end
 
-    def additional_aria
-      {}
-    end
+  def additional_aria
+    {}
+  end
 
-    def content_tag_options
-      {
-        class: classes.compact,
-        data: @data.merge(additional_data),
-        aria: @aria.merge(additional_aria)
-      }.merge(@html_options)
-    end
+  def content_tag_options
+    {
+      class: classes.compact,
+      data: @data.merge(additional_data),
+      aria: @aria.merge(additional_aria)
+    }.merge(@html_options)
+  end
 
-    def before_render
-      validate!
-    end
+  def before_render
+    validate!
+  end
 end

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

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

@@ -21,7 +21,7 @@ class Polaris::Card::SectionComponent < Polaris::NewComponent
       "Polaris-Card__Section--subdued": subdued,
       "Polaris-Card__Section--fullWidth": full_width,
       "Polaris-Card__Section--borderTop": border_top,
-      "Polaris-Card__Section--borderBottom": border_bottom,
+      "Polaris-Card__Section--borderBottom": border_bottom
     )
 
     @title = title
@@ -34,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

@@ -5,13 +5,14 @@ module Polaris
     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
@@ -34,7 +35,7 @@ module Polaris
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "Polaris-Card",
-        "Polaris-Card--subdued": subdued,
+        "Polaris-Card--subdued": subdued
       )
     end
 
@@ -45,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