polaris_view_components 0.1.0

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

@@ -0,0 +1,11 @@
+<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
+  <div class="Polaris-FooterHelp__Content">
+    <div class="Polaris-FooterHelp__Icon">
+      <%= polaris_icon(name: "InfoMinor", color: :highlight) %>
+    </div>
+
+    <div class="Polaris-FooterHelp__Text">
+      <%= content %>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/footer_help_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Polaris
+  class FooterHelpComponent < Polaris::NewComponent
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-FooterHelp",
+      )
+    end
+  end
+end

data/app/components/polaris/form_layout/group_component.html.erb

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

data/app/components/polaris/form_layout/group_component.rb

@@ -0,0 +1,39 @@
+class Polaris::FormLayout::GroupComponent < Polaris::NewComponent
+  attr_reader :position
+
+  renders_many :items, "GroupItemComponent"
+
+  def initialize(position:, condensed: false, **system_arguments)
+    @position = position
+
+    @system_arguments = system_arguments
+    @system_arguments[:tag] = "div"
+    @system_arguments[:classes] = class_names(
+      @system_arguments[:classes],
+      "Polaris-FormLayout__Items",
+    )
+
+    @wrapper_arguments = {}
+    @wrapper_arguments[:tag] = "div"
+    @wrapper_arguments[:role] = "group"
+    @wrapper_arguments[:classes] = class_names(
+      "Polaris-FormLayout--grouped": !condensed,
+      "Polaris-FormLayout--condensed": condensed,
+    )
+  end
+
+  class GroupItemComponent < Polaris::NewComponent
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-FormLayout__Item",
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/form_layout/item_component.rb

@@ -0,0 +1,18 @@
+class Polaris::FormLayout::ItemComponent < Polaris::NewComponent
+  attr_reader :position
+
+  def initialize(position:, **system_arguments)
+    @position = position
+
+    @system_arguments = system_arguments
+    @system_arguments[:tag] = "div"
+    @system_arguments[:classes] = class_names(
+      @system_arguments[:classes],
+      "Polaris-FormLayout__Item",
+    )
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+  end
+end

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

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

data/app/components/polaris/form_layout_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Polaris
+  class FormLayoutComponent < Polaris::NewComponent
+    renders_many :items, -> (**system_arguments) do
+      @counter += 1
+      Polaris::FormLayout::ItemComponent.new(position: @counter, **system_arguments)
+    end
+    renders_many :groups, -> (**system_arguments) do
+      @counter += 1
+      Polaris::FormLayout::GroupComponent.new(position: @counter, **system_arguments)
+    end
+
+    def initialize(**system_arguments)
+      @counter = 0
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-FormLayout",
+      )
+    end
+
+    def render?
+      all_items.any?
+    end
+
+    def all_items
+      @all_items ||= items + groups
+    end
+
+    def ordered_items
+      all_items.sort_by(&:position)
+    end
+  end
+end

data/app/components/polaris/heading_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Polaris
+  class HeadingComponent < Polaris::NewComponent
+    ELEMENT_DEFAULT = :h2
+    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-Heading'
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= render(Polaris::BaseComponent.new(tag: 'span', **@system_arguments)) do %>
+  <% if @source %>
+    <%= @source %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/polaris/icon_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Polaris
+  class IconComponent < Polaris::NewComponent
+    COLOR_DEFAULT = :default
+    COLOR_MAPPINGS = {
+      COLOR_DEFAULT => "",
+      :base => "Polaris-Icon--colorBase",
+      :subdued => "Polaris-Icon--colorSubdued",
+      :critical => "Polaris-Icon--colorCritical",
+      :warning => "Polaris-Icon--colorWarning",
+      :highlight => "Polaris-Icon--colorHighlight",
+      :success => "Polaris-Icon--colorSuccess",
+      :primary => "Polaris-Icon--colorPrimary",
+    }
+    COLOR_OPTIONS = COLOR_MAPPINGS.keys
+
+    def initialize(
+      name: nil,
+      backdrop: false,
+      color: COLOR_DEFAULT,
+      **system_arguments
+    )
+      @source = name ? polaris_icon_source(name) : nil
+
+      @system_arguments = system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Icon",
+        COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
+        "Polaris-Icon--hasBackdrop" => backdrop,
+        "Polaris-Icon--applyColor" => color != :default,
+      )
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<div class="Polaris-InlineError">
+  <div class="Polaris-InlineError__Icon">
+    <%= polaris_icon(name: "AlertMinor") %>
+  </div>
+  <%= content %>
+</div>

data/app/components/polaris/inline_error_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Polaris
+  class InlineErrorComponent < Polaris::NewComponent
+    def initialize
+    end
+
+    def renders?
+      content.present?
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if @form.present? && @attribute.present? %>
+    <% if @label.present? %>
+      <%= @form.label(@attribute, @label, @label_options) %>
+    <% elsif content.present? %>
+      <%= @form.label(@attribute, @label_options) do %>
+        <%= content %>
+      <% end %>
+    <% else %>
+      <%= @form.label(@attribute, @label_options) %>
+    <% end %>
+  <% else %>
+    <% if content.present? %>
+      <%= label_tag(@name, @label_options) do %>
+        <%= content %>
+      <% end %>
+    <% else %>
+      <%= label_tag(@name, @label, @label_options) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/label_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Polaris
+  class LabelComponent < Polaris::NewComponent
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      label: nil,
+      required: false,
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @label = label
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Label",
+      )
+
+      @label_options = {}
+      @label_options[:class] = class_names(
+        "Polaris-Label__Text",
+        "Polaris-Label__RequiredIndicator": required,
+      )
+    end
+
+    def renders?
+      (@form.present? && @attribute.present?) || @name.present?
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <div class="Polaris-Labelled__LabelWrapper">
+    <%= render Polaris::LabelComponent.new(**@label_arguments) %>
+
+    <% if label_action.present? %>
+      <div class="Polaris-Labelled__Action">
+        <%= label_action %>
+      </div>
+    <% end %>
+  </div>
+
+  <%= content %>
+
+  <% if renders_error? %>
+    <div class="Polaris-Labelled__Error">
+      <%= polaris_inline_error { @error } %>
+    </div>
+  <% end %>
+
+  <% if @help_text.present? %>
+    <div class="Polaris-Labelled__HelpText">
+      <%= @help_text %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/labelled_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Polaris
+  class LabelledComponent < Polaris::NewComponent
+    renders_one :label_action, -> (**system_arguments) do
+      Polaris::ButtonComponent.new(plain: true, **system_arguments)
+    end
+
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      label: nil,
+      label_hidden: false,
+      label_action: nil,
+      required: false,
+      help_text: nil,
+      error: nil,
+      **system_arguments
+    )
+      @help_text = help_text
+      @error = error
+
+      if label_action && label_action[:content].present?
+        label_content = label_action.delete(:content)
+        label_action(**label_action) { label_content }
+      end
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Labelled--hidden": label_hidden
+      )
+
+      @label_arguments = {
+        form: form,
+        attribute: attribute,
+        name: name,
+        label: label,
+        required: required,
+      }
+    end
+
+    def renders_error?
+      @error.present? && @error.is_a?(String)
+    end
+  end
+end

data/app/components/polaris/layout/annotated_section.html.erb

@@ -0,0 +1,19 @@
+<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
+  <div class="Polaris-Layout__AnnotationWrapper">
+    <div class="Polaris-Layout__Annotation">
+      <%= polaris_text_container do %>
+        <%= polaris_heading { @title } %>
+
+        <% if @description.present? %>
+          <div class="Polaris-Layout__AnnotationDescription">
+            <%= tag.p @description %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="Polaris-Layout__AnnotationContent">
+      <%= content %>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/layout/annotated_section.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Polaris
+  module Layout
+    class AnnotatedSection < Polaris::NewComponent
+      attr_reader :position
+
+      def initialize(position:, title:, description: nil, **system_arguments)
+        @position = position
+        @title = title
+        @description = description
+
+        @system_arguments = system_arguments
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Layout__AnnotatedSection",
+        )
+      end
+    end
+  end
+end

data/app/components/polaris/layout/section.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Polaris
+  module Layout
+    class Section < Polaris::NewComponent
+      attr_reader :position
+
+      def initialize(
+        position:,
+        secondary: false,
+        full_width: false,
+        one_half: false,
+        one_third: false,
+        **system_arguments
+      )
+        @position = position
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Layout__Section",
+          "Polaris-Layout__Section--secondary" => secondary,
+          "Polaris-Layout__Section--fullWidth" => full_width,
+          "Polaris-Layout__Section--oneHalf" => one_half,
+          "Polaris-Layout__Section--oneThird" => one_third,
+        )
+      end
+
+      def call
+        render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end