polaris_view_components 0.1.0

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

@@ -0,0 +1,5 @@
+<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
+  <% ordered_sections.each do |section| %>
+    <%= section %>
+  <% end %>
+<% end %>

data/app/components/polaris/layout_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Polaris
+  class LayoutComponent < Polaris::NewComponent
+    # A list of sections
+    #
+    # @param secondary [Boolean] The section will act like a sidebar
+    # @param full_width [Boolean] The section will take up 100% of the width
+    # @param one_half [Boolean] The section will only take up 50% of the width
+    # @param one_third [Boolean] The section will only take up 33.33% of the width
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_many :sections, -> (**system_arguments) do
+      @counter += 1
+      Layout::Section.new(position: @counter, **system_arguments)
+    end
+
+    # A list of annotated sections
+    #
+    # @param title [String] Title
+    # @param description [String] Description
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+    renders_many :annotated_sections, -> (**system_arguments) do
+      @counter += 1
+      Layout::AnnotatedSection.new(position: @counter, **system_arguments)
+    end
+
+    def initialize(sectioned: false, **system_arguments)
+      @counter = 0
+      @system_arguments = system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        'Polaris-Layout'
+      )
+    end
+
+    def all_sections
+      @all_sections ||= sections + annotated_sections
+    end
+
+    def ordered_sections
+      all_sections.sort_by(&:position)
+    end
+
+    def render?
+      all_sections.any?
+    end
+  end
+end

data/app/components/polaris/link_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Polaris
+  class LinkComponent < Polaris::NewComponent
+    def initialize(
+      url:,
+      external: false,
+      monochrome: false,
+      **system_arguments
+    )
+      @url = url
+      @external = external
+
+      @system_arguments = system_arguments
+      @system_arguments[:href] = @url
+      @system_arguments[:tag] = "a"
+      @system_arguments[:"data-polaris-unstyled"] = true
+      if external
+        @system_arguments[:rel] = "noopener noreferrer"
+        @system_arguments[:target] = "_blank"
+      end
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Link",
+        "Polaris-Link--monochrome" => monochrome,
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) do
+        safe_join [
+          content.strip,
+          (external_icon if @external),
+        ].compact
+      end
+    end
+
+    private
+
+    def external_icon
+      tag.span(class: "Polaris-Link__IconLockup") do
+        tag.span(class: "Polaris-Link__IconLayout") do
+          polaris_icon(name: "ExternalSmallMinor", aria: { label: "(opens a new window)" })
+        end
+      end
+    end
+  end
+end

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

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

data/app/components/polaris/list_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ListComponent < Polaris::NewComponent
+    renders_many :items, "ListItemComponent"
+
+    TYPE_DEFAULT = :bullet
+    TYPE_TAG_MAPPINGS = {
+      bullet: :ul,
+      number: :ol,
+    }
+    TYPE_CLASS_MAPPINGS = {
+      bullet: "",
+      number: "Polaris-List--typeNumber",
+    }
+    TYPE_OPTIONS = TYPE_TAG_MAPPINGS.keys
+
+    def initialize(
+      type: TYPE_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = TYPE_TAG_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, :ul)]
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-List",
+        TYPE_CLASS_MAPPINGS[fetch_or_fallback(TYPE_OPTIONS, type, "")],
+      )
+    end
+
+    class ListItemComponent < Polaris::NewComponent
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :li
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-List__Item"
+        )
+      end
+
+      def call
+        render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/polaris/new_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Polaris
+  class NewComponent < ViewComponent::Base
+    include ClassNameHelper
+    include FetchOrFallbackHelper
+    include OptionHelper
+    include ViewHelper
+  end
+end

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

@@ -0,0 +1,21 @@
+<%= render(Polaris::BaseComponent.new(**@system_arguments)) do %>
+  <%= polaris_stack(spacing: :tight, distribution: stack_distribution) do |stack| %>
+    <% if secondary_actions %>
+      <% stack.item do %>
+        <%= polaris_button_group do |group| %>
+          <% secondary_actions.each do |action| %>
+            <% group.item do %>
+              <%= action %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <% if primary_action %>
+      <% stack.item do %>
+        <%= primary_action %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/page_actions_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Polaris
+  class PageActionsComponent < Polaris::NewComponent
+    renders_one :primary_action, -> (primary: true, **system_arguments) do
+      Polaris::ButtonComponent.new(primary: primary, **system_arguments)
+    end
+    renders_many :secondary_actions, Polaris::ButtonComponent
+
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-PageActions",
+      )
+    end
+
+    private
+      def stack_distribution
+        (primary_action.present? && secondary_actions.any?) ? :equal_spacing : :trailing
+      end
+  end
+end

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

@@ -0,0 +1,63 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if render_header? %>
+    <%= render Polaris::BaseComponent.new(**@header_arguments) do %>
+      <div class="Polaris-Page-Header__Row">
+        <% if @back_url.present? %>
+          <div class="Polaris-Page-Header__BreadcrumbWrapper">
+            <nav role="navigation">
+              <a class="Polaris-Breadcrumbs__Breadcrumb" href="<%= @back_url %>" data-polaris-unstyled="true">
+                <span class="Polaris-Breadcrumbs__ContentWrapper">
+                  <span class="Polaris-Breadcrumbs__Icon">
+                    <%= polaris_icon(name: "ArrowLeftMinor") %>
+                  </span>
+                </span>
+              </a>
+            </nav>
+          </div>
+        <% end %>
+
+        <div class="Polaris-Page-Header__TitleWrapper">
+          <div <% if thumbnail.present? %>class="Polaris-Header-Title--hasThumbnail"<% end %>>
+            <% if thumbnail.present? %>
+              <div>
+                <%= thumbnail %>
+              </div>
+            <% end %>
+            <div class="Polaris-Header-Title__TitleAndSubtitleWrapper">
+              <% if @title.present? %>
+                <% if title_metadata.present? %>
+                  <div class="Polaris-Header-Title__TitleWithMetadataWrapper">
+                    <h1 class="Polaris-Header-Title"><%= @title %></h1>
+                    <div class="Polaris-Header-Title__TitleMetadata">
+                      <%= title_metadata %>
+                    </div>
+                  </div>
+                <% else %>
+                  <h1 class="Polaris-Header-Title"><%= @title %></h1>
+                <% end %>
+              <% end %>
+
+              <% if @subtitle.present? %>
+                <div class="Polaris-Header-Title__SubTitle">
+                  <p><%= @subtitle %></p>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+        <% if primary_action.present? %>
+          <div class="Polaris-Page-Header__RightAlign">
+            <div class="Polaris-Page-Header__PrimaryActionWrapper">
+              <%= primary_action %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= render Polaris::BaseComponent.new(**@content_arguments) do %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/polaris/page_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Polaris
+  class PageComponent < Polaris::NewComponent
+    renders_one :primary_action, -> (primary: true, **system_arguments) do
+      Polaris::ButtonComponent.new(primary: primary, **system_arguments)
+    end
+    # renders_many :secondary_actions, Polaris::ButtonComponent
+    renders_one :title_metadata
+    renders_one :thumbnail, Polaris::ThumbnailComponent
+
+    def initialize(
+      title: nil,
+      subtitle: nil,
+      back_url: nil,
+      narrow_width: false,
+      full_width: false,
+      divider: false,
+      **system_arguments
+    )
+      @title = title
+      @subtitle = subtitle
+      @back_url = back_url
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Page",
+        "Polaris-Page--narrowWidth": narrow_width,
+        "Polaris-Page--fullWidth": full_width,
+      )
+
+      @header_arguments = {}
+      @header_arguments[:tag] = "div"
+      @header_arguments[:classes] = class_names(
+        "Polaris-Page-Header",
+        "Polaris-Page-Header--mobileView",
+        "Polaris-Page-Header--mediumTitle",
+        "Polaris-Page-Header--hasNavigation": back_url.present?,
+        "Polaris-Page-Header--noBreadcrumbs": back_url.blank?,
+      )
+
+      @content_arguments = {}
+      @content_arguments[:tag] = "div"
+      @content_arguments[:classes] = class_names(
+        "Polaris-Page__Content",
+        "Polaris-Page--divider": divider,
+      )
+    end
+
+    def render_header?
+      @title.present? || @subtitle.present? || @back_url.present? || primary_action.present?
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<%= render Polaris::BaseComponent.new(tag: 'nav', **@system_arguments) do %>
+  <%= polaris_button_group(**@button_group_arguments) do |group| %>
+    <% group.item do %>
+      <%= polaris_button(url: @previous_url, outline: true, disabled: @previous_url.blank?) do |button| %>
+        <% button.icon(name: "ChevronLeftMinor") %>
+      <% end %>
+    <% end %>
+    <% if @label.present? %>
+      <% group.item do %>
+        <div aria-live="polite"><%= @label %></div>
+      <% end %>
+    <% end %>
+    <% group.item do %>
+      <%= polaris_button(url: @next_url, outline: true, disabled: @next_url.blank?) do |button| %>
+        <% button.icon(name: "ChevronRightMinor") %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/pagination_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Polaris
+  class PaginationComponent < Polaris::NewComponent
+    def initialize(
+      previous_url: nil,
+      next_url: nil,
+      label: nil,
+      **system_arguments
+    )
+      @previous_url = previous_url
+      @next_url = next_url
+      @label = label
+
+      @system_arguments = system_arguments
+      @system_arguments["aria-label"] = "Pagination"
+
+      @button_group_arguments = {}
+      if label.present?
+        @button_group_arguments[:segmented] = false
+      else
+        @button_group_arguments[:segmented] = true
+      end
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <progress
+    class="Polaris-ProgressBar__Progress"
+    value="<%= @progress %>"
+    max="100"
+  ></progress>
+
+  <div
+    class="Polaris-ProgressBar__Indicator<% if @animated %> Polaris-ProgressBar__Animated<% end %>"
+    style="width: <%= @progress %>%;"
+  >
+    <span class="Polaris-ProgressBar__Label"><%= @progress %>%</span>
+  </div>
+<% end %>

data/app/components/polaris/progress_bar_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ProgressBarComponent < Polaris::NewComponent
+    COLOR_DEFAULT = :highlight
+    COLOR_MAPPINGS = {
+      COLOR_DEFAULT => "Polaris-ProgressBar--colorHighlight",
+      primary: "Polaris-ProgressBar--colorPrimary",
+      success: "Polaris-ProgressBar--colorSuccess",
+    }
+    COLOR_OPTIONS = COLOR_MAPPINGS.keys
+
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "Polaris-ProgressBar--sizeMedium",
+      small: "Polaris-ProgressBar--sizeSmall",
+      large: "Polaris-ProgressBar--sizeLarge",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    def initialize(
+      animated: true,
+      color: COLOR_DEFAULT,
+      progress: 0,
+      size: SIZE_DEFAULT,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ProgressBar",
+        COLOR_MAPPINGS[fetch_or_fallback(COLOR_OPTIONS, color, COLOR_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+      )
+
+      @animated = animated
+      @progress = progress
+    end
+  end
+end