polaris_view_components 0.1.0

data/app/components/polaris/badge_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module Polaris
+  class BadgeComponent < Polaris::NewComponent
+    PROGRESS_DEFAULT = :default
+    PROGRESS_MAPPINGS = {
+      PROGRESS_DEFAULT => "",
+      :incomplete => "Polaris-Badge--progressIncomplete",
+      :partially_complete => "Polaris-Badge--progressPartiallyComplete",
+      :complete => "Polaris-Badge--progressComplete"
+    }
+    PROGRESS_OPTIONS = PROGRESS_MAPPINGS.keys
+
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      SIZE_DEFAULT => "",
+      :small => "Polaris-Badge--sizeSmall"
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    STATUS_DEFAULT = :default
+    STATUS_MAPPINGS = {
+      STATUS_DEFAULT => "",
+      :success => "Polaris-Badge--statusSuccess",
+      :info => "Polaris-Badge--statusInfo",
+      :attention => "Polaris-Badge--statusAttention",
+      :critical => "Polaris-Badge--statusCritical",
+      :warning => "Polaris-Badge--statusWarning",
+      :new => "Polaris-Badge--statusNew"
+    }
+    STATUS_OPTIONS = STATUS_MAPPINGS.keys
+
+    def initialize(
+      progress: PROGRESS_DEFAULT,
+      size: SIZE_DEFAULT,
+      status: STATUS_DEFAULT,
+      **system_arguments
+    )
+      @progress = progress
+
+      @system_arguments = system_arguments
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Badge",
+        PROGRESS_MAPPINGS[fetch_or_fallback(PROGRESS_OPTIONS, progress, PROGRESS_DEFAULT)],
+        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)],
+        STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
+      )
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+<%= render Polaris::BaseComponent.new(tag: 'div', **@system_arguments) do %>
+  <% if dismiss_button %>
+    <div class="Polaris-Banner__Dismiss">
+      <%= dismiss_button %>
+    </div>
+  <% end %>
+  <div class="Polaris-Banner__Ribbon">
+    <%= render_icon %>
+  </div>
+  <div class="Polaris-Banner__ContentWrapper">
+    <% if @title.present? %>
+      <div class="Polaris-Banner__Heading">
+        <p class="Polaris-Heading">
+          <%= @title %>
+        </p>
+      </div>
+    <% end %>
+    <div class="Polaris-Banner__Content">
+      <%= 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>
+              <% end %>
+            <% end %>
+
+            <% if secondary_action %>
+              <% group.item do %>
+                <%= secondary_action %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/banner_component.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Polaris
+  class BannerComponent < Polaris::NewComponent
+    STATUS_DEFAULT = :default
+    STATUS_MAPPINGS = {
+      STATUS_DEFAULT => "",
+      :success => "Polaris-Banner--statusSuccess",
+      :info => "Polaris-Banner--statusInfo",
+      :warning => "Polaris-Banner--statusWarning",
+      :critical => "Polaris-Banner--statusCritical",
+    }
+    STATUS_OPTIONS = STATUS_MAPPINGS.keys
+
+    WITHIN_DEFAULT = :page
+    WITHIN_MAPPINGS = {
+      page: "Polaris-Banner--withinPage",
+      container: "Polaris-Banner--withinContentContainer",
+    }
+    WITHIN_OPTIONS = WITHIN_MAPPINGS.keys
+
+    ICON_COLOR_MAPPINGS = {
+      default: :base,
+      success: :success,
+      info: :highlight,
+      warning: :warning,
+      critical: :critical,
+    }
+
+    renders_one :action, -> (**system_arguments) do
+      Polaris::ButtonComponent.new(classes: "Polaris-Banner__Button", **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")
+      end
+    end
+
+    def initialize(
+      status: STATUS_DEFAULT,
+      within: WITHIN_DEFAULT,
+      icon: nil,
+      title: nil,
+      **system_arguments
+    )
+      @status = status
+      @icon = icon || default_icon(status)
+      @title = title
+
+      @system_arguments = system_arguments
+      @system_arguments[:tabindex] = 0
+      @system_arguments[:role] = "status"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Banner",
+        STATUS_MAPPINGS[fetch_or_fallback(STATUS_OPTIONS, status, STATUS_DEFAULT)],
+        WITHIN_MAPPINGS[fetch_or_fallback(WITHIN_OPTIONS, within, WITHIN_DEFAULT)],
+      )
+    end
+
+    def render_icon
+      polaris_icon(name: @icon, color: ICON_COLOR_MAPPINGS[@status])
+    end
+
+    def default_icon(status)
+      case status
+      when :success then "CircleTickMajor"
+      when :critical then "DiamondAlertMajor"
+      else
+        "CircleInformationMajor"
+      end
+    end
+
+    class SecondaryAction < Polaris::NewComponent
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+      end
+
+      def call
+        render(BaseButton.new(classes: "Polaris-Banner__SecondaryAction", **@system_arguments)) do
+          tag.span(class: "Polaris-Banner__Text") do
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/polaris/base_button.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Polaris
+  class BaseButton < Polaris::NewComponent
+    def initialize(
+      url: nil,
+      external: false,
+      disabled: false,
+      loading: false,
+      **system_arguments
+    )
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = url.present? ? 'a' : '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
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/base_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Polaris
+  class BaseComponent < Polaris::NewComponent
+    def initialize(tag:, classes: nil, **system_arguments)
+      @tag = tag
+      @system_arguments = system_arguments
+      @content_tag_args = prepare_arguments(@system_arguments.merge(classes: classes))
+    end
+
+    def call
+      content_tag(@tag, content, @content_tag_args)
+    end
+
+    private
+
+    def prepare_arguments(arguments)
+      arguments[:class] = arguments[:classes]
+      arguments.delete(:classes)
+      arguments
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<%= render Polaris::BaseComponent.new(tag: @tag, **dynamic_arguments) do %>
+  <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>
+<% end %>

data/app/components/polaris/button_component.rb

@@ -0,0 +1,90 @@
+# 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
+  end
+end

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

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

data/app/components/polaris/button_group_component.rb

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ButtonGroupComponent < Polaris::NewComponent
+    SPACING_DEFAULT = :default
+    SPACING_MAPPINGS = {
+      SPACING_DEFAULT => "",
+      :extra_tight => "Polaris-ButtonGroup--extraTight",
+      :tight => "Polaris-ButtonGroup--tight",
+      :loose => "Polaris-ButtonGroup--loose",
+    }
+    SPACING_OPTIONS = SPACING_MAPPINGS.keys
+
+    renders_many :buttons, -> (**system_arguments) do
+      @counter += 1
+
+      ButtonGroupItemButtonComponent.new(position: @counter, **system_arguments)
+    end
+
+    renders_many :items, -> (**system_arguments) do
+      @counter += 1
+
+      ButtonGroupItemComponent.new(position: @counter, **system_arguments)
+    end
+
+    def initialize(
+      connected_top: false,
+      full_width: false,
+      segmented: false,
+      spacing: SPACING_DEFAULT,
+      **system_arguments
+    )
+      @counter = 0
+
+      @system_arguments = system_arguments
+      if connected_top
+        @system_arguments["data-buttongroup-connected-top"] = true
+      end
+      if full_width
+        @system_arguments["data-buttongroup-full-width"] = true
+      end
+      if segmented
+        @system_arguments["data-buttongroup-segmented"] = true
+      end
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-ButtonGroup",
+        SPACING_MAPPINGS[fetch_or_fallback(SPACING_OPTIONS, spacing, SPACING_DEFAULT)],
+        "Polaris-ButtonGroup--fullWidth": full_width,
+        "Polaris-ButtonGroup--segmented": segmented,
+      )
+    end
+
+    def render?
+      all_items.any?
+    end
+
+    def all_items
+      @all_items ||= buttons + items
+    end
+
+    def ordered_items
+      all_items.sort_by(&:position)
+    end
+
+    class ButtonGroupItemButtonComponent < 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-ButtonGroup__Item",
+          "Polaris-ButtonGroup__Item--plain": system_arguments.key?(:plain)
+        )
+      end
+
+      def call
+        button_arguments = @system_arguments.except(:classes, :tag)
+
+        render(Polaris::BaseComponent.new(tag: @system_arguments[:tag], classes: @system_arguments[:classes])) do
+          render(Polaris::ButtonComponent.new(**button_arguments)) { button_arguments[:content] || content }
+        end
+      end
+    end
+
+    class ButtonGroupItemComponent < 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-ButtonGroup__Item",
+        )
+      end
+
+      def call
+        render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end