polaris_view_components 0.1.2 → 0.3.1

data/app/assets/stylesheets/polaris_view_components.css

@@ -1,136 +1,3 @@
-.shp-Navigation {
-  margin: 0 auto;
-  padding: 0 2rem;
-  max-width: 99.8rem;
-  max-width: none;
-  border-bottom: .1rem solid var(--p-border-subdued)
-}
-
-@media (max-width: 48.0625em) and (min-width: 30.625em),(min-width: 45.625em) {
-  .shp-Navigation {
-    padding: 0 2rem
-  }
-}
-
-@media (min-width: 30.625em) {
-  .shp-Navigation {
-    padding: 0 2rem
-  }
-}
-
-@media (max-width: 48.0625em) and (min-width: 46.5em),(min-width: 61.5em) {
-  .shp-Navigation {
-    padding: 0 3.2rem
-  }
-}
-
-@media (min-width: 46.5em) {
-  .shp-Navigation {
-    padding: 0 3.2rem
-  }
-}
-
-@media (max-width: 30.5625em) {
-  .shp-Navigation {
-    padding: 0 1.6rem
-  }
-}
-
-.shp-Navigation_Items {
-  display: flex;
-  margin: 0;
-  padding: 0 .2rem;
-  list-style: none
-}
-
-.shp-Navigation_Item {
-  display: flex;
-  margin: 0;
-  padding: 0
-}
-
-.shp-Navigation_Link {
-  color: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  margin: 0;
-  padding: 0;
-  background: none;
-  border: none;
-  font-size: inherit;
-  line-height: inherit;
-  font-size: 1.5rem;
-  font-weight: 400;
-  line-height: 2rem;
-  text-transform: none;
-  letter-spacing: normal;
-  color: var(--p-text-subdued);
-  position: relative;
-  z-index: 400;
-  justify-content: center;
-  width: 100%;
-  min-width: 100%;
-  margin-top: 1px;
-  margin-bottom: -1px;
-  padding: 0 1.6rem;
-  outline: none;
-  text-align: center;
-  white-space: nowrap;
-  text-decoration: none;
-  cursor: pointer
-}
-
-.shp-Navigation_Link:visited {
-  color: inherit
-}
-
-.shp-Navigation_Link:focus {
-  outline: none
-}
-
-@media (min-width: 40em) {
-  .shp-Navigation_Link {
-    font-size: 1.4rem
-  }
-}
-
-.shp-Navigation_Link:hover {
-  text-decoration: none
-}
-
-.shp-Navigation_Link:hover .shp-Navigation_LinkText {
-  font-weight: 400;
-  color: var(--p-text);
-  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)
-}
-
-.shp-Navigation_LinkText {
-  padding: 1.6rem 0 1.3rem 0;
-  border-bottom: .3rem solid transparent
-}
-
-.shp-Navigation_LinkText {
-  display: block;
-}
-
-[aria-selected='true'],
-.shp-Navigation_Link:focus .shp-Navigation_LinkText {
-  font-weight: 400;
-  color: var(--p-text)
-}
-
-[aria-selected='true'] .shp-Navigation_LinkText {
-  color: var(--p-action-primary);
-  border-bottom: .3rem solid var(--p-action-primary)
-}
+/*
+ *= require_tree .
+ */

data/app/assets/stylesheets/shopify_navigation.css

@@ -0,0 +1,136 @@
+.shp-Navigation {
+  margin: 0 auto;
+  padding: 0 2rem;
+  max-width: 99.8rem;
+  max-width: none;
+  border-bottom: .1rem solid var(--p-border-subdued)
+}
+
+@media (max-width: 48.0625em) and (min-width: 30.625em),(min-width: 45.625em) {
+  .shp-Navigation {
+    padding: 0 2rem
+  }
+}
+
+@media (min-width: 30.625em) {
+  .shp-Navigation {
+    padding: 0 2rem
+  }
+}
+
+@media (max-width: 48.0625em) and (min-width: 46.5em),(min-width: 61.5em) {
+  .shp-Navigation {
+    padding: 0 3.2rem
+  }
+}
+
+@media (min-width: 46.5em) {
+  .shp-Navigation {
+    padding: 0 3.2rem
+  }
+}
+
+@media (max-width: 30.5625em) {
+  .shp-Navigation {
+    padding: 0 1.6rem
+  }
+}
+
+.shp-Navigation_Items {
+  display: flex;
+  margin: 0;
+  padding: 0 .2rem;
+  list-style: none
+}
+
+.shp-Navigation_Item {
+  display: flex;
+  margin: 0;
+  padding: 0
+}
+
+.shp-Navigation_Link {
+  color: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  font-size: inherit;
+  line-height: inherit;
+  font-size: 1.5rem;
+  font-weight: 400;
+  line-height: 2rem;
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--p-text-subdued);
+  position: relative;
+  z-index: 400;
+  justify-content: center;
+  width: 100%;
+  min-width: 100%;
+  margin-top: 1px;
+  margin-bottom: -1px;
+  padding: 0 1.6rem;
+  outline: none;
+  text-align: center;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer
+}
+
+.shp-Navigation_Link:visited {
+  color: inherit
+}
+
+.shp-Navigation_Link:focus {
+  outline: none
+}
+
+@media (min-width: 40em) {
+  .shp-Navigation_Link {
+    font-size: 1.4rem
+  }
+}
+
+.shp-Navigation_Link:hover {
+  text-decoration: none
+}
+
+.shp-Navigation_Link:hover .shp-Navigation_LinkText {
+  font-weight: 400;
+  color: var(--p-text);
+  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)
+}
+
+.shp-Navigation_LinkText {
+  padding: 1.6rem 0 1.3rem 0;
+  border-bottom: .3rem solid transparent
+}
+
+.shp-Navigation_LinkText {
+  display: block;
+}
+
+[aria-selected='true'],
+.shp-Navigation_Link:focus .shp-Navigation_LinkText {
+  font-weight: 400;
+  color: var(--p-text)
+}
+
+[aria-selected='true'] .shp-Navigation_LinkText {
+  color: var(--p-action-primary);
+  border-bottom: .3rem solid var(--p-action-primary)
+}

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

@@ -1,4 +1,4 @@
-<%= render Polaris::BaseComponent.new(tag: @tag, **dynamic_arguments) do %>
+<%= render Polaris::BaseComponent.new(tag: @tag, **system_arguments) do %>
   <span class="Polaris-Button__Content">
     <% if @loading %>
       <span class="Polaris-Button__Spinner">

data/app/components/polaris/button_component.rb

@@ -1,90 +1,6 @@
 # frozen_string_literal: true
 
 module Polaris
-  class ButtonComponent < Polaris::NewComponent
-    SIZE_DEFAULT = :medium
-    SIZE_MAPPINGS = {
-      SIZE_DEFAULT => "",
-      :slim => "Polaris-Button--sizeSlim",
-      :large => "Polaris-Button--sizeLarge",
-    }
-    SIZE_OPTIONS = SIZE_MAPPINGS.keys
-
-    TEXT_ALIGN_DEFAULT = :default
-    TEXT_ALIGN_MAPPINGS = {
-      TEXT_ALIGN_DEFAULT => "",
-      :left => "Polaris-Button--textAlignLeft",
-      :center => "Polaris-Button--textAlignCenter",
-      :right => "Polaris-Button--textAlignRight",
-    }
-    TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
-
-    renders_one :icon, IconComponent
-
-    def initialize(
-      url: nil,
-      outline: false,
-      plain: false,
-      primary: false,
-      pressed: false,
-      monochrome: false,
-      loading: false,
-      destructive: false,
-      disabled: false,
-      external: false,
-      full_width: false,
-      submit: false,
-      remove_underline: false,
-      size: SIZE_DEFAULT,
-      text_align: TEXT_ALIGN_DEFAULT,
-      **system_arguments
-    )
-      @tag = url.present? ? 'a' : 'button'
-      @text_classes = class_names(
-        "Polaris-Button__Text",
-        "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
-      )
-      @loading = loading
-
-      @system_arguments = system_arguments
-      @system_arguments[:type] = submit ? 'submit' : 'button'
-      if loading
-        @system_arguments[:disabled] = true
-      end
-      if url.present?
-        @system_arguments.delete(:type)
-        @system_arguments[:href] = url
-        @system_arguments[:target] = "_blank" if external
-      end
-      if disabled
-        @system_arguments[:disabled] = disabled
-      end
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Button",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
-        TEXT_ALIGN_MAPPINGS[fetch_or_fallback(TEXT_ALIGN_OPTIONS, text_align, TEXT_ALIGN_DEFAULT)],
-        "Polaris-Button--destructive": destructive,
-        "Polaris-Button--disabled": disabled || loading,
-        "Polaris-Button--loading": loading,
-        "Polaris-Button--fullWidth": full_width,
-        "Polaris-Button--monochrome": monochrome,
-        "Polaris-Button--outline": outline,
-        "Polaris-Button--plain": plain,
-        "Polaris-Button--primary": primary,
-        "Polaris-Button--pressed": pressed,
-        "Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
-      )
-    end
-
-    private
-
-    def dynamic_arguments
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Button--iconOnly": icon.present? && content.blank?,
-      )
-      @system_arguments
-    end
+  class ButtonComponent < HeadlessButton
   end
 end

data/app/components/polaris/dropzone/controller.js

@@ -1,4 +1,4 @@
-import { Controller } from 'stimulus'
+import { Controller } from "@hotwired/stimulus"
 
 import { fileAccepted, getDataTransferFiles } from './utils'
 

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

@@ -0,0 +1,22 @@
+<span class="Polaris-Button__Content">
+  <% if @loading %>
+    <span class="Polaris-Button__Spinner">
+      <%= polaris_spinner(size: :small) %>
+    </span>
+  <% end %>
+
+  <% if icon.present? %>
+    <div class="Polaris-Button__Icon">
+      <%= icon %>
+    </div>
+    <% if content.present? %>
+      &nbsp;
+    <% end %>
+  <% end %>
+
+  <% if content.present? %>
+    <div class="<%= @text_classes %>">
+      <%= content %>
+    </div>
+  <% end %>
+</span>

data/app/components/polaris/headless_button.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Polaris
+  class HeadlessButton < Polaris::NewComponent
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      :slim => "Polaris-Button--sizeSlim",
+      :large => "Polaris-Button--sizeLarge",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    TEXT_ALIGN_DEFAULT = :default
+    TEXT_ALIGN_MAPPINGS = {
+      TEXT_ALIGN_DEFAULT => "",
+      :left => "Polaris-Button--textAlignLeft",
+      :center => "Polaris-Button--textAlignCenter",
+      :right => "Polaris-Button--textAlignRight",
+    }
+    TEXT_ALIGN_OPTIONS = TEXT_ALIGN_MAPPINGS.keys
+
+    renders_one :icon, IconComponent
+
+    def initialize(
+      url: nil,
+      outline: false,
+      plain: false,
+      primary: false,
+      pressed: false,
+      monochrome: false,
+      loading: false,
+      destructive: false,
+      disabled: false,
+      external: false,
+      full_width: false,
+      submit: false,
+      remove_underline: false,
+      size: SIZE_DEFAULT,
+      text_align: TEXT_ALIGN_DEFAULT,
+      **system_arguments
+    )
+      @tag = url.present? ? 'a' : 'button'
+      @text_classes = class_names(
+        "Polaris-Button__Text",
+        "Polaris-Button--removeUnderline": plain && monochrome && remove_underline
+      )
+      @loading = loading
+
+      @system_arguments = system_arguments
+      @system_arguments[:type] = submit ? 'submit' : 'button'
+      if loading
+        @system_arguments[:disabled] = true
+      end
+      if url.present?
+        @system_arguments.delete(:type)
+        @system_arguments[:href] = url
+        @system_arguments[:target] = "_blank" if external
+      end
+      if disabled
+        @system_arguments[:disabled] = disabled
+      end
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Button",
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        TEXT_ALIGN_MAPPINGS[fetch_or_fallback(TEXT_ALIGN_OPTIONS, text_align, TEXT_ALIGN_DEFAULT)],
+        "Polaris-Button--destructive": destructive,
+        "Polaris-Button--disabled": disabled || loading,
+        "Polaris-Button--loading": loading,
+        "Polaris-Button--fullWidth": full_width,
+        "Polaris-Button--monochrome": monochrome,
+        "Polaris-Button--outline": outline,
+        "Polaris-Button--plain": plain,
+        "Polaris-Button--primary": primary,
+        "Polaris-Button--pressed": pressed,
+        "Polaris-Button--removeUnderline": (plain && monochrome && remove_underline)
+      )
+    end
+
+    def system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Button--iconOnly": icon.present? && content.blank?,
+      )
+      @system_arguments
+    end
+
+    def html_options
+      options = system_arguments
+      options[:class] = options[:classes]
+      options.delete(:classes)
+      options
+    end
+  end
+end

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

@@ -1,15 +1,16 @@
-<%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
   <div class="Polaris-ResourceItem__ItemWrapper">
-    <div class="Polaris-ResourceItem" style="cursor: <%= @cursor %>;">
+    <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
       <% if @url %>
         <a
           class="Polaris-ResourceItem__Link"
           tabindex="0"
           href="<%= @url %>"
-          data-polaris-unstyled="true"></a>
+          data-polaris-unstyled="true"
+          data-polaris-resource-item-target="link"></a>
       <% end %>
 
-      <%= render(Polaris::BaseComponent.new(**@container_arguments)) do %>
+      <%= render(Polaris::BaseComponent.new(**container_arguments)) do %>
         <% if media.present? %>
           <div class="Polaris-ResourceItem__Owned">
             <div class="Polaris-ResourceItem__Media">
@@ -21,6 +22,6 @@
           <%= content %>
         </div>
       <% end %>
-    </div>
+    <% end %>
   </div>
 <% end %>

data/app/components/polaris/resource_item_component.rb

@@ -16,27 +16,60 @@ module Polaris
 
     def initialize(
       url: nil,
-      cursor: CURSOR_DEFAULT,
       vertical_alignment: ALIGNMENT_DEFAULT,
+      wrapper_arguments: {},
+      container_arguments: {},
       **system_arguments
     )
       @url = url
-      @cursor = fetch_or_fallback(CURSOR_OPTIONS, cursor, CURSOR_DEFAULT)
-
+      @vertical_alignment = vertical_alignment
+      @wrapper_arguments = wrapper_arguments
+      @container_arguments = container_arguments
       @system_arguments = system_arguments
-      @system_arguments[:tag] = "li"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-ResourceItem__ListItem",
-      )
+    end
+
+    def wrapper_arguments
+      {
+        tag: "li",
+        data: {},
+      }.deep_merge(@wrapper_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-ResourceItem__ListItem",
+        )
+        prepend_option(args[:data], :controller, "polaris-resource-item")
+      end
+    end
 
-      @container_arguments = {
+    def container_arguments
+      {
         tag: "div",
-        classes: class_names(
+      }.deep_merge(@container_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
           "Polaris-ResourceItem__Container",
-          ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, vertical_alignment, ALIGNMENT_DEFAULT)],
+          ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, @vertical_alignment, ALIGNMENT_DEFAULT)],
         )
-      }
+      end
     end
+
+    def system_arguments
+      {
+        tag: "div",
+        data: {},
+      }.deep_merge(@system_arguments).tap do |args|
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-ResourceItem",
+        )
+        prepend_option(args, :style, "cursor: #{cursor};")
+        prepend_option(args[:data], :action, "click->polaris-resource-item#open")
+      end
+    end
+
+    private
+      def cursor
+        @url.present? ? "pointer" : "default"
+      end
   end
 end

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

@@ -1,9 +1,18 @@
 <%= render Polaris::LabelledComponent.new(**@wrapper_arguments) do %>
   <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
     <% if @form.present? && @attribute.present? %>
-      <%= @form.select(@attribute, options_for_select(@options, @selected), @select_options, @input_options) %>
+      <%= @form.select(
+        @attribute,
+        options_for_select(@options, selected: @selected, disabled: @disabled_options),
+        @select_options,
+        @input_options,
+      ) %>
     <% else %>
-      <%= select_tag(@name, options_for_select(@options, @selected), @input_options) %>
+      <%= select_tag(
+        @name,
+        options_for_select(@options, selected: @selected, disabled: @disabled_options),
+        @input_options,
+      ) %>
     <% end %>
 
     <div

data/app/components/polaris/select_component.rb

@@ -8,6 +8,7 @@ module Polaris
       name: nil,
       options:,
       selected: nil,
+      disabled_options: nil,
       label: nil,
       label_hidden: false,
       label_inline: false,
@@ -26,6 +27,7 @@ module Polaris
       @name = name
       @options = options
       @selected = selected
+      @disabled_options = disabled_options
       @label = label
       @label_hidden = label_hidden
       @label_inline = label_inline

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

@@ -0,0 +1,5 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% @lines.times do %>
+    <div class="Polaris-SkeletonBodyText"></div>
+  <% end %>
+<% end %>

data/app/components/polaris/skeleton_body_text_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Polaris
+  class SkeletonBodyTextComponent < Polaris::NewComponent
+    def initialize(lines: 3, **system_arguments)
+      @lines = lines
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-SkeletonBodyText__SkeletonBodyTextContainer",
+      )
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <span class="Polaris-TagText">
+    <%= content %>
+  </span>
+  <%= remove_button %>
+<% end %>