polaris_view_components 0.1.0

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

@@ -0,0 +1,11 @@
+<%= render Polaris::ChoiceComponent.new(**wrapper_arguments) do %>
+  <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+    <% if @form.present? && @attribute.present? %>
+      <%= @form.radio_button(@attribute, @value, @input_options) %>
+    <% else %>
+      <%= radio_button_tag(@name, @value, @checked, @input_options) %>
+    <% end %>
+
+    <span class="Polaris-RadioButton__Backdrop"></span>
+  <% end %>
+<% end %>

data/app/components/polaris/radio_button_component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Polaris
+  class RadioButtonComponent < Polaris::NewComponent
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      label: nil,
+      label_hidden: false,
+      checked: false,
+      disabled: false,
+      help_text: nil,
+      value: nil,
+      wrapper_arguments: {},
+      input_options: {},
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @checked = checked
+      @value = value
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "span"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-RadioButton",
+        "Polaris-RadioButton--labelHidden": label_hidden,
+      )
+
+      @wrapper_arguments = {
+        label: label,
+        label_hidden: label_hidden,
+        help_text: help_text,
+        disabled: disabled,
+      }.merge(wrapper_arguments)
+
+      @input_options = input_options
+      @input_options[:aria] ||= {}
+      @input_options[:disabled] = true if disabled
+      @input_options[:aria][:checked] = checked
+      @input_options[:class] = class_names(
+        @input_options[:classes],
+        "Polaris-RadioButton__Input",
+      )
+    end
+
+    def wrapper_arguments
+      @wrapper_arguments[:children_content] = content
+      @wrapper_arguments
+    end
+  end
+end

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

@@ -0,0 +1,36 @@
+<%= 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) %>
+    <% else %>
+      <%= select_tag(@name, options_for_select(@options, @selected), @input_options) %>
+    <% end %>
+
+    <div
+      class="Polaris-Select__Content"
+      aria-hidden="true"
+      <% if @disabled %>aria-disabled="true"<% end %>
+    >
+      <% if @label_inline %>
+        <span class="Polaris-Select__InlineLabel">
+          <%= @label %>
+        </span>
+      <% end %>
+      <span
+        class="Polaris-Select__SelectedOption"
+        data-polaris-select-target="selectedOption"
+      >
+        <%= selected_option %>
+      </span>
+      <span class="Polaris-Select__Icon">
+        <%= polaris_icon do %>
+          <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
+            <path d="M10 16l-4-4h8l-4 4zm0-12l4 4H6l4-4z"></path>
+          </svg>
+        <% end %>
+      </span>
+    </div>
+
+    <div class="Polaris-Select__Backdrop"></div>
+  <% end %>
+<% end %>

data/app/components/polaris/select_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Polaris
+  class SelectComponent < Polaris::NewComponent
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      options:,
+      selected: nil,
+      label: nil,
+      label_hidden: false,
+      label_inline: false,
+      label_action: nil,
+      disabled: false,
+      required: false,
+      help_text: nil,
+      error: false,
+      wrapper_arguments: {},
+      select_options: {},
+      input_options: {},
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @options = options
+      @selected = selected
+      @label = label
+      @label_hidden = label_hidden
+      @label_inline = label_inline
+      @disabled = disabled
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:data] ||= {}
+      prepend_option(@system_arguments[:data], :controller, "polaris-select")
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Select",
+        "Polaris-Select--disabled": disabled,
+        "Polaris-Select--error": error,
+      )
+
+      @wrapper_arguments = {
+        form: form,
+        attribute: attribute,
+        name: name,
+        label: label,
+        label_hidden: hides_label?,
+        label_action: label_action,
+        required: required,
+        help_text: help_text,
+        error: error,
+      }.merge(wrapper_arguments)
+
+      @select_options = {}
+
+      @input_options = input_options
+      @input_options[:class] = class_names(@input_options[:classes], "Polaris-Select__Input")
+      @input_options[:disabled] = disabled
+      @input_options[:data] ||= {}
+      prepend_option(@input_options[:data], :action, "polaris-select#update")
+    end
+
+    def hides_label?
+      @label_hidden || @label_inline
+    end
+
+    def selected_option
+      option = @options.to_a.find { |i| i.last.to_s == @selected.to_s }
+      option ? option.first : @options.first.first
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
+  <%= polaris_stack(alignment: :center, spacing: :none) do |stack| %>
+    <ul role="tablist" class="shp-Navigation_Items">
+      <% links.each do |link| %>
+        <%= link %>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/app/components/polaris/shopify_navigation_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ShopifyNavigationComponent < Polaris::NewComponent
+    renders_many :links, "ShopifyNavigationLinkComponent"
+
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "shp-Navigation",
+      )
+    end
+
+    def render?
+      links.any?
+    end
+
+    class ShopifyNavigationLinkComponent < Polaris::NewComponent
+      def initialize(url:, active: false, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "a"
+        @system_arguments[:href] = url
+        @system_arguments[:role] = "tab"
+        @system_arguments["data-polaris-unstyled"] = true
+        @system_arguments["aria-selected"] = active
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "shp-Navigation_Link",
+        )
+      end
+
+      def call
+        tag.li(class: "shp-Navigation_Item", role: "presentation") do
+          render(Polaris::BaseComponent.new(**@system_arguments)) do
+            tag.span(class: "shp-Navigation_LinkText") { content }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<%= render Polaris::BaseComponent.new(tag: 'span', **@system_arguments) do %>
+  <% if @size == :small %>
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"></path>
+    </svg>
+  <% else %>
+    <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.542 1.487A21.507 21.507 0 00.5 22c0 11.874 9.626 21.5 21.5 21.5 9.847 0 18.364-6.675 20.809-16.072a1.5 1.5 0 00-2.904-.756C37.803 34.755 30.473 40.5 22 40.5 11.783 40.5 3.5 32.217 3.5 22c0-8.137 5.3-15.247 12.942-17.65a1.5 1.5 0 10-.9-2.863z"></path>
+    </svg>
+  <% end %>
+<% end %>

data/app/components/polaris/spinner_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Polaris
+  class SpinnerComponent < Polaris::NewComponent
+    SIZE_DEFAULT = :large
+    SIZE_MAPPINGS = {
+      small: "Polaris-Spinner--sizeSmall",
+      large: "Polaris-Spinner--sizeLarge",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(
+      size: SIZE_DEFAULT,
+      **system_arguments
+    )
+      @size = size
+      @system_arguments = system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Spinner",
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+      )
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+
+  <%= content %>
+<% end %>

data/app/components/polaris/stack_component.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Polaris
+  class StackComponent < Polaris::NewComponent
+    ALIGNMENT_DEFAULT = :default
+    ALIGNMENT_MAPPINGS = {
+      ALIGNMENT_DEFAULT => "",
+      :leading => "Polaris-Stack--alignmentLeading",
+      :trailing => "Polaris-Stack--alignmentTrailing",
+      :center => "Polaris-Stack--alignmentCenter",
+      :fill => "Polaris-Stack--alignmentFill",
+      :baseline => "Polaris-Stack--alignmentBaseline",
+    }
+    ALIGNMENT_OPTIONS = ALIGNMENT_MAPPINGS.keys
+
+    DISTRIBUTION_DEFAULT = :default
+    DISTRIBUTION_MAPPINGS = {
+      DISTRIBUTION_DEFAULT => "",
+      :equal_spacing => "Polaris-Stack--distributionEqualSpacing",
+      :leading => "Polaris-Stack--distributionLeading",
+      :trailing => "Polaris-Stack--distributionTrailing",
+      :center => "Polaris-Stack--distributionCenter",
+      :fill => "Polaris-Stack--distributionFill",
+      :fill_evently => "Polaris-Stack--distributionFillEvenly",
+    }
+    DISTRIBUTION_OPTIONS = DISTRIBUTION_MAPPINGS.keys
+
+    SPACING_DEFAULT = :default
+    SPACING_MAPPINGS = {
+      SPACING_DEFAULT => "",
+      :extra_tight => "Polaris-Stack--spacingExtraTight",
+      :tight => "Polaris-Stack--spacingTight",
+      :base_tight => "Polaris-Stack--spacingBaseTight",
+      :loose => "Polaris-Stack--spacingLoose",
+      :extra_loose => "Polaris-Stack--spacingExtraLoose",
+      :none => "Polaris-Stack--spacingNone",
+    }
+    SPACING_OPTIONS = SPACING_MAPPINGS.keys
+
+    renders_many :items, "StackItemComponent"
+
+    def initialize(
+      alignment: ALIGNMENT_DEFAULT,
+      distribution: DISTRIBUTION_DEFAULT,
+      spacing: SPACING_DEFAULT,
+      vertical: false,
+      wrap: true,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Stack",
+        ALIGNMENT_MAPPINGS[fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)],
+        DISTRIBUTION_MAPPINGS[fetch_or_fallback(DISTRIBUTION_OPTIONS, distribution, DISTRIBUTION_DEFAULT)],
+        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
+        "Polaris-Stack--vertical": vertical,
+        "Polaris-Stack--noWrap": !wrap,
+      )
+    end
+
+    class StackItemComponent < Polaris::NewComponent
+      def initialize(fill: false, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Stack__Item",
+          "Polaris-Stack__Item--fill": fill,
+        )
+      end
+
+      def call
+        render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/polaris/subheading_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Polaris
+  class SubheadingComponent < Polaris::NewComponent
+    ELEMENT_DEFAULT = :h3
+    ELEMENT_OPTIONS = %i[p h1 h2 h3 h4 h5 h6]
+
+    def initialize(
+      element: ELEMENT_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = element
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        'Polaris-Subheading'
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/text_container_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Polaris
+  class TextContainerComponent < Polaris::NewComponent
+    SPACING_DEFAULT = :default
+    SPACING_MAPPINGS = {
+      SPACING_DEFAULT => "",
+      :tight => "Polaris-TextContainer--spacingTight",
+      :loose => "Polaris-TextContainer--spacingLoose",
+    }
+    SPACING_OPTIONS = SPACING_MAPPINGS.keys
+
+    def initialize(
+      spacing: SPACING_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-TextContainer",
+        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

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

@@ -0,0 +1,103 @@
+<%= render Polaris::LabelledComponent.new(**wrapper_arguments) do %>
+  <div class="Polaris-Connected">
+    <% if connected_left.present? %>
+      <div class="Polaris-Connected__Item">
+        <%= connected_left %>
+      </div>
+    <% end %>
+
+    <div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
+      <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+        <% if @prefix.present? %>
+          <div class="Polaris-TextField__Prefix">
+            <%= @prefix %>
+          </div>
+        <% end %>
+
+        <% if @form.present? && @attribute.present? %>
+          <%= @form.public_send(input, @attribute, input_options) %>
+        <% else %>
+          <%= public_send(input_tag, @name, @value, input_options) %>
+        <% end %>
+
+        <% if @suffix.present? %>
+          <div class="Polaris-TextField__Suffix">
+            <%= @suffix %>
+          </div>
+        <% end %>
+
+        <% if @show_character_count %>
+          <div
+            class="
+              Polaris-TextField__CharacterCount
+              <%= "Polaris-TextField__AlignFieldBottom" if @multiline %>
+            "
+            data-polaris-text-field-target="characterCount"
+            aria-label="<%= character_count.label %>"
+            aria-atomic="true"
+          >
+            <%= character_count.text %>
+          </div>
+        <% end %>
+
+        <% if @clear_button %>
+          <button
+            type="button"
+            class="Polaris-TextField__ClearButton
+              <% if @value.blank? %>
+                Polaris-TextField__ClearButton--hidden
+              <% end %>"
+            tabindex="0"
+            data-polaris-text-field-target="clearButton"
+            data-action="polaris-text-field#clear"
+          >
+            <%= polaris_visually_hidden { "Clear" } %>
+            <%= polaris_icon(name: "CircleCancelMinor", color: :base) %>
+          </button>
+        <% end %>
+
+        <% if render_number_buttons? %>
+          <div class="Polaris-TextField__Spinner" aria-hidden="true">
+            <div
+              role="button"
+              class="Polaris-TextField__Segment"
+              tabindex="-1"
+              data-action="click->polaris-text-field#increase"
+            >
+              <div class="Polaris-TextField__SpinnerIcon">
+                <%= polaris_icon do %>
+                  <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
+                    <path d="M15 12l-5-5-5 5h10z"></path>
+                  </svg>
+                <% end %>
+              </div>
+            </div>
+
+            <div
+              role="button"
+              class="Polaris-TextField__Segment"
+              tabindex="-1"
+              data-action="click->polaris-text-field#decrease"
+            >
+              <div class="Polaris-TextField__SpinnerIcon">
+                <%= polaris_icon do %>
+                  <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">
+                    <path d="M5 8l5 5 5-5H5z"></path>
+                  </svg>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+
+        <div class="Polaris-TextField__Backdrop"></div>
+      <% end %>
+    </div>
+
+    <% if connected_right.present? %>
+      <div class="Polaris-Connected__Item">
+        <%= connected_right %>
+      </div>
+    <% end %>
+  </div>
+<% end %>