polaris_view_components 0.3.2 → 0.6.0

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

@@ -0,0 +1,68 @@
+.Polaris--hidden {
+  display: none;
+}
+
+/* Add missing 1/4 section for layout */
+@media (min-width: 30.625em) {
+  .Polaris-Layout__Section--oneFourth {
+    flex: 1 1 20rem;
+    min-width: 0;
+  }
+}
+
+/* Fix Tag removal link */
+a.Polaris-Tag__Button {
+  height: auto;
+}
+
+/* Remove underline for sort link */
+
+.Polaris-DataTable__Cell--sortable a {
+  text-decoration: none;
+}
+
+/* CardSection borders */
+.Polaris-Card__Section--borderTop {
+  border-top: 0.1rem solid var(--p-divider);
+}
+.Polaris-Card__Section--borderBottom {
+  border-bottom: 0.1rem solid var(--p-divider);
+}
+
+/* IndexTable */
+
+/* TODO: Remove after upgrade to Polaris 7.0.0 */
+.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--unclickable {
+  cursor: auto;
+}
+
+/* TestStyle sizes */
+.Polaris-TextStyle--sizeSmall {
+  font-size: 1.25rem;
+}
+
+/* Remove box-shadow from buttons and links */
+.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/shopify_navigation.css

@@ -106,10 +106,6 @@
   border-bottom: .3rem solid var(--p-action-primary)
 }
 
-.shp-Navigation_Link:focus {
-  box-shadow: inset 0 0 2px 0 rgba(92, 106, 196, .8), 0 0 2px 0 rgba(92, 106, 196, .8)
-}
-
 .shp-Navigation_Link:focus .shp-Navigation_LinkText {
   font-weight: 400;
   color: var(--p-text)

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

@@ -0,0 +1,39 @@
+/* Vertical */
+.Polaris-Spacer--verticalSpacingExtraTight {
+  height: 4px;
+}
+.Polaris-Spacer--verticalSpacingTight {
+  height: 8px;
+}
+.Polaris-Spacer--verticalSpacingBaseTight {
+  height: 12px;
+}
+.Polaris-Spacer--verticalSpacingBase {
+  height: 16px;
+}
+.Polaris-Spacer--verticalSpacingLoose {
+  height: 20px;
+}
+.Polaris-Spacer--verticalSpacingExtraLoose {
+  height: 32px;
+}
+
+/* Horizontal */
+.Polaris-Spacer--horizontalSpacingExtraTight {
+  width: 4px;
+}
+.Polaris-Spacer--horizontalSpacingTight {
+  width: 8px;
+}
+.Polaris-Spacer--horizontalSpacingBaseTight {
+  width: 12px;
+}
+.Polaris-Spacer--horizontalSpacingBase {
+  width: 16px;
+}
+.Polaris-Spacer--horizontalSpacingLoose {
+  width: 20px;
+}
+.Polaris-Spacer--horizontalSpacingExtraLoose {
+  width: 32px;
+}

data/app/assets/stylesheets/polaris_view_components.css

@@ -2119,9 +2119,6 @@ html, body{ min-height:100%; height:100%; }
   text-decoration: none;
   border-bottom: .3rem solid var(--p-action-primary)
 }
-.shp-Navigation_Link:focus {
-  box-shadow: inset 0 0 2px 0 rgba(92, 106, 196, .8), 0 0 2px 0 rgba(92, 106, 196, .8)
-}
 .shp-Navigation_Link:focus .shp-Navigation_LinkText {
   font-weight: 400;
   color: var(--p-text)
@@ -2142,3 +2139,96 @@ html, body{ min-height:100%; height:100%; }
   color: var(--p-action-primary);
   border-bottom: .3rem solid var(--p-action-primary)
 }
+/* Vertical */
+.Polaris-Spacer--verticalSpacingExtraTight {
+  height: 4px;
+}
+.Polaris-Spacer--verticalSpacingTight {
+  height: 8px;
+}
+.Polaris-Spacer--verticalSpacingBaseTight {
+  height: 12px;
+}
+.Polaris-Spacer--verticalSpacingBase {
+  height: 16px;
+}
+.Polaris-Spacer--verticalSpacingLoose {
+  height: 20px;
+}
+.Polaris-Spacer--verticalSpacingExtraLoose {
+  height: 32px;
+}
+/* Horizontal */
+.Polaris-Spacer--horizontalSpacingExtraTight {
+  width: 4px;
+}
+.Polaris-Spacer--horizontalSpacingTight {
+  width: 8px;
+}
+.Polaris-Spacer--horizontalSpacingBaseTight {
+  width: 12px;
+}
+.Polaris-Spacer--horizontalSpacingBase {
+  width: 16px;
+}
+.Polaris-Spacer--horizontalSpacingLoose {
+  width: 20px;
+}
+.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 {
+    flex: 1 1 20rem;
+    min-width: 0;
+  }
+}
+/* Fix Tag removal link */
+a.Polaris-Tag__Button {
+  height: auto;
+}
+/* Remove underline for sort link */
+.Polaris-DataTable__Cell--sortable a {
+  text-decoration: none;
+}
+/* CardSection borders */
+.Polaris-Card__Section--borderTop {
+  border-top: 0.1rem solid var(--p-divider);
+}
+.Polaris-Card__Section--borderBottom {
+  border-bottom: 0.1rem solid var(--p-divider);
+}
+/* IndexTable */
+/* TODO: Remove after upgrade to Polaris 7.0.0 */
+.Polaris-IndexTable__TableRow.Polaris-IndexTable__TableRow--unclickable {
+  cursor: auto;
+}
+/* TestStyle sizes */
+.Polaris-TextStyle--sizeSmall {
+  font-size: 1.25rem;
+}
+/* Remove box-shadow from buttons and links */
+.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.postcss.css

@@ -1,2 +1,4 @@
 @import "@shopify/polaris/dist/styles.css";
 @import "./polaris_view_components/shopify_navigation.css";
+@import "./polaris_view_components/spacer_component.css";
+@import "./polaris_view_components/custom.css";

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

@@ -1,6 +1,4 @@
 class Polaris::Card::HeaderComponent < Polaris::NewComponent
-  include Polaris::ActionHelper
-
   def initialize(
     title: "",
     actions: [],
@@ -10,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