polaris_view_components 0.13.5 → 1.0.0

data/app/assets/stylesheets/polaris_view_components.pcss

@@ -0,0 +1,4 @@
+@import "@shopify/polaris/build/esm/styles.css";
+@import "./polaris_view_components/shopify_navigation.pcss";
+@import "./polaris_view_components/spacer_component.pcss";
+@import "./polaris_view_components/custom.pcss";

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

@@ -1,6 +1,6 @@
 <li>
   <%= render Polaris::BaseComponent.new(**system_arguments) do %>
-    <div class="Polaris-ActionList__Content">
+    <%= polaris_horizontal_stack(block_align: :center, gap: "4") do %>
       <% if @icon.present? %>
         <span class="Polaris-ActionList__Prefix">
           <%= polaris_icon(name: @icon) %>
@@ -14,22 +14,20 @@
 
       <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>
+          <%= polaris_box { content } %>
+          <%= polaris_text(as: :span, color: :subdued) { @help_text } %>
         <% else %>
           <%= content %>
         <% end %>
       </span>
 
       <% if suffix.present? %>
-        <span class="Polaris-ActionList__Suffix">
-          <%= suffix %>
-        </span>
+        <%= polaris_box do %>
+          <span class="Polaris-ActionList__Suffix">
+            <%= suffix %>
+          </span>
+        <% end %>
       <% end %>
-    </div>
+    <% end %>
   <% end %>
 </li>

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

@@ -1,10 +1,21 @@
-<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+<% section_markup = capture do %>
   <% if @title.present? %>
-    <p class="<%= title_classes %>">
-      <%= @title %>
-    </p>
+    <%= polaris_box(
+      padding_block_start: "4",
+      padding_inline_start: "4",
+      padding_block_end: "2",
+      padding_inline_end: "4"
+    ) do %>
+      <%= polaris_text(as: :p, variant: :headingXs) do %>
+        <%= @title %>
+      <% end %>
+    <% end %>
   <% end %>
-  <ul class="Polaris-ActionList__Actions">
+  <%= polaris_box(
+    as: :ul,
+    padding: "2",
+    padding_block_start: @title.present? ? "0" : (@multiple_sections ? "0" : "2"),
+  ) do %>
     <% if items.present? %>
       <% items.each do |item| %>
         <%= item %>
@@ -12,5 +23,18 @@
     <% else %>
       <%= content %>
     <% end %>
-  </ul>
+  <% end %>
+<% end %>
+
+<% if @multiple_sections %>
+  <%= polaris_box(
+    as: :li,
+    border_color: "border-subdued",
+    border_block_start_width: (@position != 1) ? "1" : nil,
+    padding_block_start: @title.blank? ? "2" : nil
+  ) do %>
+    <%= section_markup %>
+  <% end %>
+<% else%>
+  <%= section_markup %>
 <% end %>

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

@@ -1,8 +1,14 @@
 class Polaris::ActionList::SectionComponent < Polaris::Component
   renders_many :items, Polaris::ActionList::ItemComponent
 
-  def initialize(position: 1, title: nil, **system_arguments)
+  def initialize(
+    position: 1,
+    multiple_sections: false,
+    title: nil,
+    **system_arguments
+  )
     @position = position
+    @multiple_sections = multiple_sections
     @title = title
     @system_arguments = system_arguments
   end
@@ -10,17 +16,6 @@ class Polaris::ActionList::SectionComponent < Polaris::Component
   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

@@ -1,12 +1,16 @@
 <%= 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 %>
+  <%= polaris_box(as: sections.present? ? :ul : :div) do %>
+    <% if sections.present? %>
+      <% sections.each do |section| %>
+        <%= section %>
+      <% end %>
+    <% else %>
+      <%= render Polaris::ActionList::SectionComponent.new(
+        multiple_sections: false
+      ) do %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/polaris/action_list_component.rb

@@ -4,7 +4,11 @@ module Polaris
     renders_many :sections, ->(**system_arguments) do
       @counter += 1
 
-      Polaris::ActionList::SectionComponent.new(position: @counter, **system_arguments)
+      Polaris::ActionList::SectionComponent.new(
+        position: @counter,
+        multiple_sections: true,
+        **system_arguments
+      )
     end
 
     def initialize(**system_arguments)

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

@@ -1,6 +1,6 @@
 <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
   <%= render(Polaris::PopoverComponent.new(**popover_arguments)) do |popover| %>
-    <% popover.activator do %>
+    <% popover.with_activator do %>
       <%= text_field %>
       <% if @name.present? %>
         <%= hidden_field_tag @name, nil, data: {polaris_autocomplete_target: "hiddenInput"} %>

data/app/components/polaris/autocomplete_component.rb

@@ -26,12 +26,14 @@ module Polaris
       url: nil,
       name: nil,
       selected: [],
+      popover_arguments: {},
       **system_arguments
     )
       @multiple = multiple
       @url = url
       @name = name
       @selected = selected
+      @popover_arguments = popover_arguments
       @system_arguments = system_arguments
     end
 
@@ -53,10 +55,11 @@ module Polaris
         alignment: :left,
         full_width: true,
         inline: false,
-        wrapper_arguments: {
-          data: {polaris_autocomplete_target: "popover"}
-        }
-      }
+        wrapper_arguments: {}
+      }.deep_merge(@popover_arguments).tap do |opts|
+        opts[:wrapper_arguments][:data] ||= {}
+        prepend_option(opts[:wrapper_arguments][:data], :polaris_autocomplete_target, "popover")
+      end
     end
 
     def option_list_arguments

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

@@ -1,4 +1,4 @@
-<%= render Polaris::BaseComponent.new(tag: 'span', **@system_arguments) do %>
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <% if @source %>
     <%= image_tag @source, class: "Polaris-Avatar__Image", role: "presentation" %>
   <% else %>

data/app/components/polaris/avatar_component.rb

@@ -4,36 +4,68 @@ module Polaris
   class AvatarComponent < Polaris::Component
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
+      extra_small: "Polaris-Avatar--sizeExtraSmall",
       small: "Polaris-Avatar--sizeSmall",
       medium: "Polaris-Avatar--sizeMedium",
       large: "Polaris-Avatar--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
+    SHAPE_DEFAULT = :round
+    SHAPE_MAPPINGS = {
+      square: "Polaris-Avatar--shapeSquare",
+      round: "Polaris-Avatar--shapeRound"
+    }
+    SHAPE_OPTIONS = SHAPE_MAPPINGS.keys
+
+    STYLE_CLASSES = %w[styleOne styleTwo styleThree styleFour styleFive]
+
     def initialize(
       customer: false,
       initials: nil,
       name: nil,
       size: SIZE_DEFAULT,
+      shape: SHAPE_DEFAULT,
       source: nil,
       **system_arguments
     )
+      @customer = customer
       @initials = initials
+      @name = name
+      @size = size
+      @shape = shape
       @source = source
-
       @system_arguments = system_arguments
-      if name
-        @system_arguments[:aria] ||= {}
-        @system_arguments[:aria][:label] ||= name
+    end
+
+    def style_class
+      if @name.present?
+        STYLE_CLASSES[xor_hash(@name) % STYLE_CLASSES.length]
+      else
+        STYLE_CLASSES.first
       end
-      @system_arguments[:role] = "img"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Avatar",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
-        "Polaris-Avatar--styleOne" => !customer,
-        "Polaris-Avatar--hasImage" => source.present?
-      )
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "span"
+        opts[:role] = "img"
+        if @name
+          opts[:aria] ||= {}
+          opts[:aria][:label] ||= @name
+        end
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-Avatar",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, SIZE_DEFAULT)],
+          SHAPE_MAPPINGS[fetch_or_fallback(SHAPE_OPTIONS, @shape, SHAPE_DEFAULT)],
+          "Polaris-Avatar--#{style_class}" => !@customer && !@source
+        )
+      end
+    end
+
+    def xor_hash(string)
+      string.bytes.reduce(0) { |hash, byte| hash ^ byte }
     end
   end
 end

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

@@ -1,9 +1,17 @@
-<%= render Polaris::BaseComponent.new(tag: 'span', **@system_arguments) do %>
+<%= render Polaris::BaseComponent.new(tag: "span", **@system_arguments) do %>
   <% if @progress != :default %>
-    <span class="Polaris-Badge__Pip">
-      <%= polaris_visually_hidden { @progress.to_s.humanize } %>
+    <span class="Polaris-Badge__PipContainer">
+      <%= render Polaris::BaseComponent.new(**badge_pip_arguments) do %>
+        <%= polaris_visually_hidden { @progress.to_s.humanize } %>
+      <% end %>
     </span>
   <% end %>
 
-  <%= content %>
+  <%= polaris_text(
+    as: :span,
+    variant: :bodySm,
+    font_weight: @status == :new ? :medium : nil
+  ) do %>
+    <%= content %>
+  <% end %>
 <% end %>

data/app/components/polaris/badge_component.rb

@@ -9,6 +9,12 @@ module Polaris
       :partially_complete => "Polaris-Badge--progressPartiallyComplete",
       :complete => "Polaris-Badge--progressComplete"
     }
+    PROGRESS_PIP_MAPPINGS = {
+      PROGRESS_DEFAULT => "",
+      :incomplete => "Polaris-Badge-Pip--progressIncomplete",
+      :partially_complete => "Polaris-Badge-Pip--progressPartiallyComplete",
+      :complete => "Polaris-Badge-Pip--progressComplete"
+    }
     PROGRESS_OPTIONS = PROGRESS_MAPPINGS.keys
 
     SIZE_DEFAULT = :medium
@@ -28,6 +34,15 @@ module Polaris
       :warning => "Polaris-Badge--statusWarning",
       :new => "Polaris-Badge--statusNew"
     }
+    STATUS_PIP_MAPPINGS = {
+      STATUS_DEFAULT => "",
+      :success => "Polaris-Badge-Pip--statusSuccess",
+      :info => "Polaris-Badge-Pip--statusInfo",
+      :attention => "Polaris-Badge-Pip--statusAttention",
+      :critical => "Polaris-Badge-Pip--statusCritical",
+      :warning => "Polaris-Badge-Pip--statusWarning",
+      :new => "Polaris-Badge-Pip--statusNew"
+    }
     STATUS_OPTIONS = STATUS_MAPPINGS.keys
 
     def initialize(
@@ -37,6 +52,7 @@ module Polaris
       **system_arguments
     )
       @progress = progress
+      @status = status
 
       @system_arguments = system_arguments
       @system_arguments[:classes] = class_names(
@@ -47,5 +63,15 @@ module Polaris
         STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)]
       )
     end
+
+    def badge_pip_arguments
+      {tag: "span"}.tap do |args|
+        args[:classes] = class_names(
+          "Polaris-Badge-Pip",
+          PROGRESS_PIP_MAPPINGS[fetch_or_fallback(PROGRESS_OPTIONS, @progress, PROGRESS_DEFAULT)],
+          STATUS_PIP_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, @status, STATUS_DEFAULT)]
+        )
+      end
+    end
   end
 end

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

@@ -4,39 +4,45 @@
       <%= dismiss_button %>
     </div>
   <% end %>
-  <div class="Polaris-Banner__Ribbon">
-    <%= render_icon %>
-  </div>
+  <% unless @hide_icon %>
+    <%= polaris_box(padding_inline_end: "4") do %>
+      <%= render_icon %>
+    <% end %>
+  <% end %>
   <div class="Polaris-Banner__ContentWrapper">
     <% if @title.present? %>
-      <div class="Polaris-Banner__Heading">
-        <p class="Polaris-Heading">
-          <%= @title %>
-        </p>
-      </div>
+      <%= polaris_text(as: :h2, variant: :headingMd, break_word: true) do %>
+        <%= @title %>
+      <% end %>
     <% end %>
-    <div class="Polaris-Banner__Content">
-      <%= content %>
+    <% if content.present? || action || secondary_action %>
+      <%= polaris_box(padding_block_start: "05", padding_block_end: "05") do %>
+        <%= content %>
 
-      <% if action || secondary_action %>
-        <div class="Polaris-Banner__Actions">
-          <%= polaris_button_group do |group| %>
-            <% if action %>
-              <% group.item do %>
-                <div class="Polaris-Banner__PrimaryAction">
-                  <%= action %>
-                </div>
+        <% if action || secondary_action %>
+          <%= polaris_box(
+            padding_block_start: @within == :container ? "3" : "4",
+            padding_block_end: @within == :container ? "1" : nil
+          ) do %>
+            <%= polaris_button_group do |group| %>
+              <% if action %>
+                <% group.with_item do %>
+                  <%= polaris_box(padding_inline_end: "2") do %>
+                    <%= action %>
+                  <% end %>
+                <% end %>
               <% end %>
-            <% end %>
 
-            <% if secondary_action %>
-              <% group.item do %>
-                <%= secondary_action %>
+              <% if secondary_action %>
+                <% group.with_item do %>
+                  <%= secondary_action %>
+                <% end %>
               <% end %>
             <% end %>
+          </div>
           <% end %>
-        </div>
+        <% end %>
       <% end %>
-    </div>
+    <% end %>
   </div>
 <% end %>

data/app/components/polaris/banner_component.rb

@@ -28,12 +28,12 @@ module Polaris
     }
 
     renders_one :action, ->(**system_arguments) do
-      Polaris::ButtonComponent.new(classes: "Polaris-Banner__Button", **system_arguments)
+      Polaris::ButtonComponent.new(classes: "Polaris-Banner__Button Polaris-Banner__PrimaryAction", **system_arguments)
     end
     renders_one :secondary_action, "SecondaryAction"
     renders_one :dismiss_button, ->(**system_arguments) do
       render Polaris::ButtonComponent.new(plain: true, **system_arguments) do |button|
-        button.icon(name: "CancelSmallMinor")
+        button.with_icon(name: "CancelSmallMinor")
       end
     end
 
@@ -41,11 +41,13 @@ module Polaris
       status: STATUS_DEFAULT,
       within: WITHIN_DEFAULT,
       icon: nil,
+      hide_icon: false,
       title: nil,
       **system_arguments
     )
       @status = status
       @icon = icon || default_icon(status)
+      @hide_icon = hide_icon
       @title = title
 
       @system_arguments = system_arguments

data/app/components/polaris/bleed_component.rb

@@ -0,0 +1,73 @@
+module Polaris
+  class BleedComponent < Polaris::Component
+    def initialize(
+      margin_inline: nil,
+      margin_block: nil,
+      margin_block_start: nil,
+      margin_block_end: nil,
+      margin_inline_start: nil,
+      margin_inline_end: nil,
+      **system_arguments
+    )
+      @direction_values = {
+        margin_inline: margin_inline,
+        margin_block: margin_block,
+        margin_block_start: margin_block_start,
+        margin_block_end: margin_block_end,
+        margin_inline_start: margin_inline_start,
+        margin_inline_end: margin_inline_end
+      }
+      @system_arguments = system_arguments.tap do |args|
+        args[:tag] = "div"
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-Bleed"
+        )
+        args[:style] = styles_list(
+          args[:style],
+          **margin_value("margin-block-start", negative_margin(:margin_block_start)),
+          **margin_value("margin-block-end", negative_margin(:margin_block_end)),
+          **margin_value("margin-inline-start", negative_margin(:margin_inline_start)),
+          **margin_value("margin-inline-end", negative_margin(:margin_inline_end))
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+
+    private
+
+    def negative_margin(direction)
+      x_axis = %i[margin_inline_start margin_inline_end]
+      y_axis = %i[margin_block_start margin_block_end]
+
+      if @direction_values[direction]
+        @direction_values[direction]
+      elsif x_axis.include?(direction) && @direction_values[:margin_inline]
+        @direction_values[:margin_inline]
+      elsif y_axis.include?(direction) && @direction_values[:margin_block]
+        @direction_values[:margin_block]
+      end
+    end
+
+    def margin_value(property, margin)
+      return {} unless margin
+
+      value = fetch_or_fallback_nested(
+        Tokens::Spacing::SCREEN_SIZES,
+        Tokens::Spacing::SCALE,
+        margin
+      )
+
+      if value.is_a?(Hash)
+        value.each_with_object({}) do |(key, value), hash|
+          hash["--pc-bleed-#{property}-#{key}"] = "var(--p-space-#{value})"
+        end
+      else
+        {"--pc-bleed-#{property}-xs": "var(--p-space-#{value})"}
+      end
+    end
+  end
+end