polaris_view_components 0.3.3 → 0.7.0

data/app/components/polaris/navigation/item_component.html.erb

@@ -0,0 +1,31 @@
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
+  <div class="Polaris-Navigation__ItemWrapper">
+    <%= link_to @url, class: link_classes, tabindex: "0" do %>
+      <% if @icon.present? %>
+        <div class="Polaris-Navigation__Icon">
+          <%= polaris_icon(name: @icon) %>
+        </div>
+      <% end %>
+      <span class="Polaris-Navigation__Text">
+        <%= @label %>
+      </span>
+      <% if @badge.present? %>
+        <div class="Polaris-Navigation__Badge">
+          <%= polaris_badge { @badge } %>
+        </div>
+      <% end %>
+    <% end %>
+    <%= secondary_action %>
+  </div>
+  <% if sub_items.present? %>
+    <div class="Polaris-Navigation__SecondaryNavigation Polaris-Navigation--isExpanded">
+      <div class="Polaris-Collapsible" style="max-height: none; overflow: visible;">
+        <ul class="Polaris-Navigation__List">
+          <% sub_items.each do |sub_item| %>
+            <%= sub_item %>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,85 @@
+class Polaris::Navigation::ItemComponent < Polaris::NewComponent
+  renders_many :sub_items, Polaris::Navigation::ItemComponent
+  renders_one :secondary_action, "SecondaryActionComponent"
+
+  attr_reader :selected
+
+  def initialize(
+    url:,
+    label:,
+    icon: nil,
+    badge: nil,
+    selected: false,
+    disabled: false,
+    **system_arguments
+  )
+    @url = url
+    @label = label
+    @icon = icon
+    @badge = badge
+    @selected = selected
+    @disabled = disabled
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "li"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Navigation__ListItem"
+      )
+    end
+  end
+
+  def link_classes
+    class_names(
+      "Polaris-Navigation__Item",
+      "Polaris-Navigation__Item--selected": @selected,
+      "Polaris-Navigation--subNavigationActive": @selected || selected_sub_items?,
+      "Polaris-Navigation__Item--disabled": @disabled
+    )
+  end
+
+  def selected_sub_items?
+    return unless sub_items.present?
+
+    sub_items.any?(&:selected)
+  end
+
+  class SecondaryActionComponent < Polaris::NewComponent
+    def initialize(url: nil, external: false, icon: nil, **system_arguments)
+      @url = url
+      @external = external
+      @icon = icon
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        if @url.present?
+          opts[:tag] = "a"
+          opts[:href] = @url
+          opts[:target] = "_blank" if @external
+        else
+          opts[:tag] = "button"
+          opts[:type] = "button"
+        end
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Navigation__SecondaryAction"
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments)) do
+        if @icon.present?
+          render(Polaris::IconComponent.new(name: @icon))
+        else
+          content
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <% if items.present? %>
+    <% if @title.present? %>
+      <li class="Polaris-Navigation__SectionHeading">
+        <span class="Polaris-Navigation__Text">
+          <%= @title %>
+        </span>
+        <%= action %>
+      </li>
+    <% end %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,64 @@
+class Polaris::Navigation::SectionComponent < Polaris::NewComponent
+  renders_many :items, Polaris::Navigation::ItemComponent
+  renders_one :action, "ActionComponent"
+
+  def initialize(
+    title: nil,
+    separator: false,
+    fill: false,
+    **system_arguments
+  )
+    @title = title
+    @separator = separator
+    @fill = fill
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "ul"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Navigation__Section",
+        "Polaris-Navigation__Section--fill": @fill,
+        "Polaris-Navigation__Section--withSeparator": @separator
+      )
+    end
+  end
+
+  class ActionComponent < Polaris::NewComponent
+    def initialize(url: nil, external: false, icon: nil, **system_arguments)
+      @url = url
+      @external = external
+      @icon = icon
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        if @url.present?
+          opts[:tag] = "a"
+          opts[:href] = @url
+          opts[:target] = "_blank" if @external
+        else
+          opts[:tag] = "button"
+          opts[:type] = "button"
+        end
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Navigation__Action"
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**system_arguments)) do
+        if @icon.present?
+          render(Polaris::IconComponent.new(name: @icon))
+        else
+          content
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+<nav class="Polaris-Navigation">
+  <% if @logo.present? %>
+    <div class="Polaris-Navigation__LogoContainer">
+      <%= link_to(@logo.url,
+        class: "Polaris-Navigation__LogoLink",
+        style: "width: #{@logo.width}"
+      ) do %>
+        <%= image_tag @logo.src,
+          class: "Polaris-Navigation__Logo",
+          style: "width: #{@logo.width}",
+          alt: @logo.alt %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= polaris_scrollable(classes: "Polaris-Navigation__PrimaryNavigation") do %>
+    <% if sections.present? %>
+      <% sections.each do |section| %>
+        <%= section %>
+      <% end %>
+    <% else %>
+      <%= render(Polaris::Navigation::SectionComponent.new) do %>
+        <% items.each do |item| %>
+          <%= item %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</nav>

data/app/components/polaris/navigation_component.rb

@@ -0,0 +1,15 @@
+module Polaris
+  class NavigationComponent < Polaris::NewComponent
+    renders_many :sections, Polaris::Navigation::SectionComponent
+    renders_many :items, Polaris::Navigation::ItemComponent
+
+    def initialize(logo: nil, **system_arguments)
+      @logo = logo.is_a?(Hash) ? Polaris::Logo.new(**logo) : logo
+      @system_arguments = system_arguments
+    end
+
+    def renders?
+      sections.any? || items.any?
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <label class="Polaris-OptionList-Option__Label">
+    <div class="Polaris-OptionList-Option__Checkbox">
+      <div class="Polaris-OptionList-Checkbox">
+        <%= checkbox %>
+        <div class="Polaris-OptionList-Checkbox__Backdrop"></div>
+        <div class="Polaris-OptionList-Checkbox__Icon">
+          <%= polaris_icon(name: "TickMinor") %>
+        </div>
+      </div>
+    </div>
+    <%= @label %>
+  </label>
+<% end %>

data/app/components/polaris/option_list/checkbox_component.rb

@@ -0,0 +1,37 @@
+class Polaris::OptionList::CheckboxComponent < Polaris::NewComponent
+  def initialize(
+    label:,
+    value:,
+    wrapper_arguments: {},
+    **system_arguments
+  )
+    @label = label
+    @value = value
+    @wrapper_arguments = wrapper_arguments
+    @system_arguments = system_arguments
+  end
+
+  def wrapper_arguments
+    @wrapper_arguments.tap do |opts|
+      opts[:tag] = "li"
+      opts[:tabindex] = "-1"
+      opts[:classes] = class_names(
+        @wrapper_arguments[:classes],
+        "Polaris-OptionList-Option"
+      )
+    end
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-OptionList-Checkbox__Input"
+      )
+    end
+  end
+
+  def checkbox
+    render Polaris::BaseCheckbox.new(value: @value, **system_arguments)
+  end
+end

data/app/components/polaris/option_list/option_component.rb

@@ -0,0 +1,24 @@
+class Polaris::OptionList::OptionComponent < Polaris::NewComponent
+  def initialize(**system_arguments)
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "li"
+      opts[:tabindex] = "-1"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-OptionList-Option"
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**system_arguments)) do
+      tag.label(class: "Polaris-OptionList-Option__Label") do
+        content
+      end
+    end
+  end
+end

data/app/components/polaris/option_list/radio_button_component.rb

@@ -0,0 +1,54 @@
+class Polaris::OptionList::RadioButtonComponent < Polaris::NewComponent
+  def initialize(
+    label:,
+    value:,
+    wrapper_arguments: {},
+    **system_arguments
+  )
+    @label = label
+    @value = value
+    @wrapper_arguments = wrapper_arguments
+    @system_arguments = system_arguments
+  end
+
+  def wrapper_arguments
+    @wrapper_arguments.tap do |opts|
+      opts[:tag] = "li"
+      opts[:tabindex] = "-1"
+      opts[:classes] = class_names(
+        @wrapper_arguments[:classes],
+        "Polaris-OptionList-Option"
+      )
+    end
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris--hidden"
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**wrapper_arguments)) do
+      tag.label(
+        class: "Polaris-OptionList-Option__SingleSelectOption",
+        data: {
+          polaris_option_list_target: "radioButton",
+          action: "click->polaris-option-list#update"
+        }
+      ) do
+        safe_join [
+          radio_button,
+          @label
+        ]
+      end
+    end
+  end
+
+  def radio_button
+    render Polaris::BaseRadioButton.new(value: @value, **system_arguments)
+  end
+end

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

@@ -0,0 +1,14 @@
+<li>
+  <% if @title.present? %>
+    <p class="Polaris-OptionList__Title"><%= @title %></p>
+  <% end %>
+  <ul class="Polaris-OptionList__Options">
+    <% if items.present? %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </ul>
+</li>

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

@@ -0,0 +1,53 @@
+class Polaris::OptionList::SectionComponent < Polaris::NewComponent
+  renders_many :options, Polaris::OptionList::OptionComponent
+  renders_many :radio_buttons, ->(value:, **system_arguments) do
+    Polaris::OptionList::RadioButtonComponent.new(
+      form: @form,
+      attribute: @attribute,
+      name: @name,
+      value: value,
+      checked: @selected.include?(value),
+      **system_arguments
+    )
+  end
+  renders_many :checkboxes, ->(value:, **system_arguments) do
+    Polaris::OptionList::CheckboxComponent.new(
+      form: @form,
+      attribute: @attribute,
+      name: @name && "#{@name}[]",
+      value: value,
+      checked: @selected.include?(value),
+      **system_arguments
+    )
+  end
+
+  def initialize(
+    title: nil,
+    form: nil,
+    attribute: nil,
+    name: nil,
+    selected: [],
+    **system_arguments
+  )
+    @title = title
+    @form = form
+    @attribute = attribute
+    @name = name
+    @selected = selected
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "ul"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-OptionList__Options"
+      )
+    end
+  end
+
+  def items
+    radio_buttons.presence || checkboxes.presence || options
+  end
+end

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

@@ -0,0 +1,15 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% elsif items.present? %>
+    <%= render(Polaris::OptionList::SectionComponent.new(title: @title)) do %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/polaris/option_list_component.rb

@@ -0,0 +1,67 @@
+module Polaris
+  class OptionListComponent < Polaris::NewComponent
+    renders_many :sections, ->(**system_arguments) do
+      Polaris::OptionList::SectionComponent.new(
+        form: @form,
+        attribute: @attribute,
+        name: @name,
+        selected: @selected,
+        **system_arguments
+      )
+    end
+    renders_many :options, Polaris::OptionList::OptionComponent
+    renders_many :radio_buttons, ->(value:, **system_arguments) do
+      Polaris::OptionList::RadioButtonComponent.new(
+        form: @form,
+        attribute: @attribute,
+        name: @name,
+        value: value,
+        checked: @selected.include?(value),
+        **system_arguments
+      )
+    end
+    renders_many :checkboxes, ->(value:, **system_arguments) do
+      Polaris::OptionList::CheckboxComponent.new(
+        form: @form,
+        attribute: @attribute,
+        name: @name && "#{@name}[]",
+        value: value,
+        checked: @selected.include?(value),
+        **system_arguments
+      )
+    end
+
+    def initialize(
+      title: nil,
+      form: nil,
+      attribute: nil,
+      name: nil,
+      selected: [],
+      **system_arguments
+    )
+      @title = title
+      @form = form
+      @attribute = attribute
+      @name = name
+      @selected = selected
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "ul"
+        opts[:data] ||= {}
+        prepend_option(opts[:data], :controller, "polaris-option-list")
+        opts[:data][:polaris_option_list_selected_class] = "Polaris-OptionList-Option--select"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-OptionList"
+        )
+      end
+    end
+
+    def items
+      radio_buttons.presence || checkboxes.presence || options
+    end
+  end
+end

data/app/components/polaris/page_actions_component.rb

@@ -2,23 +2,38 @@
 
 module Polaris
   class PageActionsComponent < Polaris::NewComponent
-    renders_one :primary_action, -> (primary: true, **system_arguments) do
+    DISTRIBUTION_DEFAULT = nil
+    DISTRIBUTION_OPTIONS = [
+      DISTRIBUTION_DEFAULT,
+      :equal_spacing,
+      :leading,
+      :trailing,
+      :center,
+      :fill,
+      :fill_evenly
+    ]
+
+    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)
+    def initialize(distribution: DISTRIBUTION_DEFAULT, **system_arguments)
+      @distribution = fetch_or_fallback(DISTRIBUTION_OPTIONS, distribution, DISTRIBUTION_DEFAULT)
       @system_arguments = system_arguments
       @system_arguments[:tag] = "div"
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
-        "Polaris-PageActions",
+        "Polaris-PageActions"
       )
     end
 
     private
-      def stack_distribution
-        (primary_action.present? && secondary_actions.any?) ? :equal_spacing : :trailing
-      end
+
+    def stack_distribution
+      return @distribution if @distribution.present?
+
+      primary_action.present? && secondary_actions.any? ? :equal_spacing : :trailing
+    end
   end
 end

data/app/components/polaris/page_component.rb

@@ -2,7 +2,7 @@
 
 module Polaris
   class PageComponent < Polaris::NewComponent
-    renders_one :primary_action, -> (primary: true, **system_arguments) do
+    renders_one :primary_action, ->(primary: true, **system_arguments) do
       Polaris::ButtonComponent.new(primary: primary, **system_arguments)
     end
     # renders_many :secondary_actions, Polaris::ButtonComponent
@@ -28,7 +28,7 @@ module Polaris
         @system_arguments[:classes],
         "Polaris-Page",
         "Polaris-Page--narrowWidth": narrow_width,
-        "Polaris-Page--fullWidth": full_width,
+        "Polaris-Page--fullWidth": full_width
       )
 
       @header_arguments = {}
@@ -38,14 +38,14 @@ module Polaris
         "Polaris-Page-Header--mobileView",
         "Polaris-Page-Header--mediumTitle",
         "Polaris-Page-Header--hasNavigation": back_url.present?,
-        "Polaris-Page-Header--noBreadcrumbs": back_url.blank?,
+        "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,
+        "Polaris-Page--divider": divider
       )
     end
 

data/app/components/polaris/pagination_component.rb

@@ -16,11 +16,7 @@ module Polaris
       @system_arguments["aria-label"] = "Pagination"
 
       @button_group_arguments = {}
-      if label.present?
-        @button_group_arguments[:segmented] = false
-      else
-        @button_group_arguments[:segmented] = true
-      end
+      @button_group_arguments[:segmented] = !label.present?
     end
   end
 end

data/app/components/polaris/popover/pane_component.html.erb

@@ -0,0 +1,25 @@
+<% pane_content = capture do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% end %>
+
+  <% if @sectioned %>
+    <%= render Polaris::Popover::SectionComponent.new do %>
+      <%= content %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>
+
+<% if @fixed %>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <%= pane_content %>
+  <% end %>
+<% else %>
+  <%= render Polaris::ScrollableComponent.new(shadow: true, **system_arguments) do %>
+    <%= pane_content %>
+  <% end %>
+<% end %>

data/app/components/polaris/popover/pane_component.rb

@@ -0,0 +1,20 @@
+class Polaris::Popover::PaneComponent < Polaris::NewComponent
+  renders_many :sections, Polaris::Popover::SectionComponent
+
+  def initialize(fixed: false, sectioned: false, **system_arguments)
+    @fixed = fixed
+    @sectioned = sectioned
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Popover__Pane",
+        "Polaris-Popover__Pane--fixed": @fixed
+      )
+    end
+  end
+end