polaris_view_components 0.1.0

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

@@ -0,0 +1,46 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <div class="<%= container_classes %>">
+    <% if dismiss_button %>
+      <div class="Polaris-CalloutCard__Dismiss">
+        <%= dismiss_button %>
+      </div>
+    <% end %>
+
+    <div class="Polaris-Card__Section">
+      <div class="Polaris-CalloutCard">
+        <div class="Polaris-CalloutCard__Content">
+          <% if @title.present? %>
+            <div class="Polaris-CalloutCard__Title">
+              <%= polaris_heading { @title } %>
+            </div>
+          <% end %>
+          <% if content.present? %>
+            <div class="Polaris-TextContainer">
+              <%= content %>
+            </div>
+          <% end %>
+          <% if primary_action.present? || secondary_action.present? %>
+            <div class="Polaris-CalloutCard__Buttons">
+              <% if primary_action.present? && secondary_action.present? %>
+                <%= polaris_button_group do |group| %>
+                  <% group.item do %>
+                    <%= primary_action %>
+                  <% end %>
+                  <% group.item do %>
+                    <%= secondary_action %>
+                  <% end %>
+                <% end %>
+              <% elsif primary_action.present? %>
+                <%= primary_action %>
+              <% else %>
+                <%= secondary_action %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+
+        <img class="<%= image_classes %>" src="<%= @illustration %>" alt="">
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/polaris/callout_card_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Polaris
+  class CalloutCardComponent < Polaris::NewComponent
+    renders_one :primary_action, Polaris::ButtonComponent
+    renders_one :secondary_action, -> (plain: true, **system_arguments) do
+      Polaris::ButtonComponent.new(plain: plain, **system_arguments)
+    end
+    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(
+      title: nil,
+      illustration: nil,
+      **system_arguments
+    )
+      @title = title
+      @illustration = illustration
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "div"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Card",
+      )
+    end
+
+    def container_classes
+      class_names(
+        "Polaris-CalloutCard__Container",
+        "Polaris-CalloutCard--hasDismiss": dismiss_button.present?,
+      )
+    end
+
+    def image_classes
+      class_names(
+        "Polaris-CalloutCard__Image",
+        "Polaris-CalloutCard__DismissImage": dismiss_button.present?,
+      )
+    end
+  end
+end

data/app/components/polaris/caption_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Polaris
+  class CaptionComponent < Polaris::NewComponent
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = 'p'
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Caption",
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

data/app/components/polaris/card/header_component.html.erb

@@ -0,0 +1,25 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if simple? %>
+    <%= polaris_heading { @title } %>
+  <% else %>
+    <%= polaris_stack(alignment: :trailing) do |stack| %>
+      <% stack.item(fill: true) do %>
+        <%= polaris_heading { @title } %>
+      <% end %>
+
+      <% if @actions.present? %>
+        <% stack.item do %>
+          <%= polaris_button_group do |group| %>
+            <% @actions.each do |action| %>
+              <% group.button(**action) %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% stack.item do %>
+        <%= content %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/polaris/card/header_component.rb

@@ -0,0 +1,23 @@
+class Polaris::Card::HeaderComponent < Polaris::NewComponent
+  include Polaris::ActionHelper
+
+  def initialize(
+    title: "",
+    actions: [],
+    **system_arguments
+  )
+    @system_arguments = system_arguments
+    @system_arguments[:tag] = :div
+    @system_arguments[:classes] = class_names(
+      @system_arguments[:classes],
+      "Polaris-Card__Header",
+    )
+
+    @title = title
+    @actions = actions.map { |a| a.merge(plain: true) }
+  end
+
+  def simple?
+    content.blank? && @actions.blank?
+  end
+end

data/app/components/polaris/card/section_component.html.erb

@@ -0,0 +1,31 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if @title.present? && @title.is_a?(String) %>
+    <div class="Polaris-Card__SectionHeader">
+      <% if @actions.present? %>
+        <%= polaris_stack(alignment: :trailing) do |stack| %>
+          <% stack.item(fill: true) do %>
+            <%= polaris_subheading { @title } %>
+          <% end %>
+
+          <% stack.item do %>
+            <%= polaris_button_group do |group| %>
+              <% @actions.each do |action| %>
+                <% group.button(**action) %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% else %>
+        <%= polaris_subheading { @title } %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <% if subsections.present? %>
+    <% subsections.each do |subsection| %>
+      <%= subsection %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/polaris/card/section_component.rb

@@ -0,0 +1,40 @@
+class Polaris::Card::SectionComponent < Polaris::NewComponent
+  renders_many :subsections, "Polaris::Card::SubsectionComponent"
+
+  def initialize(
+    title: "",
+    subdued: false,
+    flush: false,
+    full_width: false,
+    actions: [],
+    **system_arguments
+  )
+    @system_arguments = system_arguments
+    @system_arguments[:tag] = :div
+    @system_arguments[:classes] = class_names(
+      @system_arguments[:classes],
+      "Polaris-Card__Section",
+      "Polaris-Card__Section--flush": flush,
+      "Polaris-Card__Section--subdued": subdued,
+      "Polaris-Card__Section--fullWidth": full_width,
+    )
+
+    @title = title
+    @actions = actions.map { |a| a.merge(plain: true) }
+  end
+
+  class Polaris::Card::SubsectionComponent < Polaris::NewComponent
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Card__Subsection",
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+  <% if header.present? %>
+    <%= header %>
+  <% end %>
+
+  <% if @title.present? && !header.present? %>
+    <%= render Polaris::Card::HeaderComponent.new(title: @title, actions: @actions) %>
+  <% end %>
+
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% else %>
+    <%= render Polaris::Card::SectionComponent.new do %>
+      <%= content %>
+    <% end %>
+  <% end %>
+
+  <% if render_footer? %>
+    <div class="<%= footer_classes %>">
+      <%= polaris_button_group do |group| %>
+        <% if @footer_action_alignment == :right %>
+          <% secondary_footer_actions.each do |secondary_footer_action| %>
+            <% group.item do %>
+              <%= secondary_footer_action %>
+            <% end %>
+          <% end %>
+
+          <% if primary_footer_action %>
+            <% group.item do %>
+              <%= primary_footer_action %>
+            <% end %>
+          <% end %>
+        <% else %>
+          <% if primary_footer_action %>
+            <% group.item do %>
+              <%= primary_footer_action %>
+            <% end %>
+          <% end %>
+
+          <% secondary_footer_actions.each do |secondary_footer_action| %>
+            <% group.item do %>
+              <%= secondary_footer_action %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/polaris/card_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Polaris
+  class CardComponent < Polaris::NewComponent
+    include Polaris::ActionHelper
+
+    FOOTER_ACTION_ALIGNMENT_DEFAULT = :right
+    FOOTER_ACTION_ALIGNMENT_MAPPINGS = {
+      FOOTER_ACTION_ALIGNMENT_DEFAULT => "",
+      :left => "Polaris-Card__LeftJustified",
+    }
+    FOOTER_ACTION_ALIGNMENT_OPTIONS = FOOTER_ACTION_ALIGNMENT_MAPPINGS.keys
+
+    renders_one :header, Polaris::Card::HeaderComponent
+    renders_many :sections, Polaris::Card::SectionComponent
+    renders_one :primary_footer_action, -> (primary: true, **system_arguments) do
+      Polaris::ButtonComponent.new(primary: primary, **system_arguments)
+    end
+    renders_many :secondary_footer_actions, Polaris::ButtonComponent
+
+    def initialize(
+      title: "",
+      actions: [],
+      subdued: false,
+      footer_action_alignment: FOOTER_ACTION_ALIGNMENT_DEFAULT,
+      **system_arguments
+    )
+      @title = title
+      @actions = actions
+      @footer_action_alignment = footer_action_alignment
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = :div
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Card",
+        "Polaris-Card--subdued": subdued,
+      )
+    end
+
+    def render_footer?
+      primary_footer_action.present? || secondary_footer_actions.any?
+    end
+
+    def footer_classes
+      class_names(
+        "Polaris-Card__Footer",
+        FOOTER_ACTION_ALIGNMENT_MAPPINGS[fetch_or_fallback(FOOTER_ACTION_ALIGNMENT_OPTIONS, @footer_action_alignment, FOOTER_ACTION_ALIGNMENT_DEFAULT)],
+      )
+    end
+  end
+end

data/app/components/polaris/character_count.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Polaris
+  class CharacterCount
+    def initialize(text_field:, max_length: nil)
+      @text_field = text_field
+      @max_length = max_length
+    end
+
+    def label
+      return "#{count} of #{@max_length} characters used" if max_length?
+
+      "#{count} characters"
+    end
+
+    def text
+      return "#{count}/#{@max_length}" if max_length?
+
+      "#{count}"
+    end
+
+    def label_template
+      if max_length?
+        "{count} of #{@max_length} characters used"
+      end
+
+      "{count} characters"
+    end
+
+    def text_template
+      return "{count}/#{@max_length}" if max_length?
+
+      "{count}"
+    end
+
+    private
+
+      def max_length?
+        @max_length.present?
+      end
+
+      def normalized_value
+        @text_field.value.to_s || ''
+      end
+
+      def count
+        normalized_value.length
+      end
+  end
+end

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

@@ -0,0 +1,15 @@
+<%= render Polaris::ChoiceComponent.new(**@wrapper_arguments) do %>
+  <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+    <% if @form.present? && @attribute.present? %>
+      <%= @form.check_box(@attribute, @input_options, @value, @unchecked_value) %>
+    <% else %>
+      <%= check_box_tag(@name, @value, @checked, @input_options) %>
+    <% end %>
+
+    <span class="Polaris-Checkbox__Backdrop"></span>
+
+    <span class="Polaris-Checkbox__Icon">
+      <%= polaris_icon(name: icon_name) %>
+    </span>
+  <% end %>
+<% end %>

data/app/components/polaris/checkbox_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module Polaris
+  class CheckboxComponent < Polaris::NewComponent
+    include ActiveModel::Validations
+
+    attr_reader :checked
+
+    validates :checked, inclusion: { in: [true, false, :indeterminate] }
+
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      label: nil,
+      label_hidden: false,
+      checked: false,
+      disabled: false,
+      help_text: nil,
+      error: nil,
+      value: "1",
+      unchecked_value: "0",
+      wrapper_arguments: {},
+      input_options: {},
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @checked = checked
+      @value = value
+      @unchecked_value = unchecked_value
+
+      @system_arguments = system_arguments
+      @system_arguments[:tag] = "span"
+      @system_arguments[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Checkbox",
+        "Polaris-Checkbox--labelHidden": label_hidden,
+        "Polaris-Checkbox--error": error.present?,
+      )
+
+      @wrapper_arguments = {
+        label: label,
+        label_hidden: label_hidden,
+        disabled: disabled,
+        help_text: help_text,
+        error: error,
+      }.merge(wrapper_arguments)
+
+      @input_options = input_options
+      @input_options[:aria] ||= {}
+      @input_options[:disabled] = true if disabled
+      @input_options[:aria][:checked] = checked
+      if indeterminate?
+        @input_options[:indeterminate] = true
+        @input_options[:aria][:checked] = "mixed"
+      end
+      @input_options[:class] = class_names(
+        @input_options[:classes],
+        "Polaris-Checkbox__Input",
+        "Polaris-Checkbox__Input--indeterminate": indeterminate?,
+      )
+    end
+
+    def indeterminate?
+      @checked == :indeterminate
+    end
+
+    def icon_name
+      indeterminate? ? "MinusMinor" : "TickSmallMinor"
+    end
+
+    def before_render
+      validate!
+    end
+  end
+end