polaris_view_components 0.3.3 → 0.7.0

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

@@ -0,0 +1,109 @@
+.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;
+}
+
+/* Filters */
+
+.Polaris-Filters-ConnectedFilterControl__RightContainer {
+  .Polaris-Filters-ConnectedFilterControl__Item {
+    & > div > div > button {
+      margin-right: var(--p-button-group-item-spacing);
+      border-radius: 0;
+    }
+
+    &:first-of-type > div > div > button {
+      border-top-left-radius: var(--p-border-radius-base);
+      border-bottom-left-radius: var(--p-border-radius-base);
+    }
+  }
+
+  &.Polaris-Filters-ConnectedFilterControl--queryFieldHidden {
+    .Polaris-Filters-ConnectedFilterControl__Item:first-of-type > div > div > button {
+      border-top-left-radius: var(--p-border-radius-base);
+      border-bottom-left-radius: var(--p-border-radius-base);
+    }
+  }
+}
+
+.Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters {
+  .Polaris-Filters-ConnectedFilterControl__Item:last-child > div > div > button {
+    border-top-right-radius: var(--p-border-radius-base);
+    border-bottom-right-radius: var(--p-border-radius-base);
+  }
+}
+
+/* Toast */
+.Polaris-Frame-ToastManager {
+  bottom: 0;
+}
+
+/* Autocomplete */
+
+.Polaris-Autocomplete__EmptyState {
+  padding: 0.8rem 1.6rem;
+}

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,121 @@ 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;
+}
+/* Filters */
+.Polaris-Filters-ConnectedFilterControl__RightContainer .Polaris-Filters-ConnectedFilterControl__Item > div > div > button {
+      margin-right: var(--p-button-group-item-spacing);
+      border-radius: 0;
+    }
+.Polaris-Filters-ConnectedFilterControl__RightContainer .Polaris-Filters-ConnectedFilterControl__Item:first-of-type > div > div > button {
+      border-top-left-radius: var(--p-border-radius-base);
+      border-bottom-left-radius: var(--p-border-radius-base);
+    }
+.Polaris-Filters-ConnectedFilterControl__RightContainer.Polaris-Filters-ConnectedFilterControl--queryFieldHidden .Polaris-Filters-ConnectedFilterControl__Item:first-of-type > div > div > button {
+      border-top-left-radius: var(--p-border-radius-base);
+      border-bottom-left-radius: var(--p-border-radius-base);
+    }
+.Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters .Polaris-Filters-ConnectedFilterControl__Item:last-child > div > div > button {
+    border-top-right-radius: var(--p-border-radius-base);
+    border-bottom-right-radius: var(--p-border-radius-base);
+  }
+/* Toast */
+.Polaris-Frame-ToastManager {
+  bottom: 0;
+}
+/* Autocomplete */
+.Polaris-Autocomplete__EmptyState {
+  padding: 0.8rem 1.6rem;
+}

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/autocomplete/action_component.rb

@@ -0,0 +1,7 @@
+module Polaris
+  class Autocomplete::ActionComponent < NewComponent
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+module Polaris
+  class Autocomplete::OptionComponent < NewComponent
+    def initialize(
+      label:,
+      multiple: false,
+      **system_arguments
+    )
+      @label = label
+      @multiple = multiple
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |args|
+        args[:label] = @label
+
+        args[:wrapper_arguments] ||= {}
+        args[:wrapper_arguments][:data] ||= {}
+        args[:wrapper_arguments][:data][:polaris_autocomplete_target] = "option"
+        args[:wrapper_arguments][:data][:label] = @label
+
+        args[:data] ||= {}
+        prepend_option(args[:data], :action, "polaris-autocomplete#select")
+      end
+    end
+
+    def call
+      if @multiple
+        render OptionList::CheckboxComponent.new(**system_arguments)
+      else
+        render OptionList::RadioButtonComponent.new(**system_arguments)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<%= render(Polaris::OptionList::SectionComponent.new(**@system_arguments)) do %>
+  <% if options.present? %>
+    <% options.each do |option| %>
+      <%= option %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

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