polaris_view_components 0.6.0 → 0.7.0

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/popover_component.html.erb

@@ -1,11 +1,4 @@
-<div
-  data-controller="polaris-popover"
-  data-polaris-popover-active-value="<%= @active %>"
-  data-polaris-popover-placement-value="<%= popperjs_placement %>"
-  data-polaris-popover-open-class="Polaris-Popover__PopoverOverlay--open"
-  data-polaris-popover-closed-class="Polaris-Popover__PopoverOverlay--closed"
-  style="<%= "display: inline-block;" if @inline %>"
->
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
   <div data-polaris-popover-target="activator">
     <% if activator.present? %>
       <%= activator %>
@@ -35,4 +28,4 @@
       <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
     <% end %>
   <% end %>
-</div>
+<% end %>

data/app/components/polaris/popover_component.rb

@@ -24,6 +24,7 @@ module Polaris
       sectioned: false,
       alignment: ALIGNMENT_DEFAULT,
       position: POSITION_DEFAULT,
+      wrapper_arguments: {},
       **system_arguments
     )
       @active = active
@@ -35,11 +36,27 @@ module Polaris
       @sectioned = sectioned
       @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
       @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
+      @wrapper_arguments = wrapper_arguments
       @system_arguments = system_arguments
       @popover_arguments = {}
       @content_arguments = {}
     end
 
+    def wrapper_arguments
+      @wrapper_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        prepend_option(opts[:data], :controller, "polaris-popover")
+        opts[:data][:polaris_popover_active_value] = @active
+        opts[:data][:polaris_popover_placement_value] = popperjs_placement
+        opts[:data][:polaris_popover_open_class] = "Polaris-Popover__PopoverOverlay--open"
+        opts[:data][:polaris_popover_closed_class] = "Polaris-Popover__PopoverOverlay--closed"
+        if @inline
+          prepend_option(opts, :style, "display: inline-block;")
+        end
+      end
+    end
+
     def system_arguments
       @system_arguments.tap do |opts|
         opts[:tag] = "div"

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

@@ -1,11 +1,6 @@
 <%= render Polaris::ChoiceComponent.new(**wrapper_arguments) do %>
   <%= render Polaris::BaseComponent.new(**@system_arguments) do %>
-    <% if @form.present? && @attribute.present? %>
-      <%= @form.radio_button(@attribute, @value, @input_options) %>
-    <% else %>
-      <%= radio_button_tag(@name, @value, @checked, @input_options) %>
-    <% end %>
-
+    <%= radio_button %>
     <span class="Polaris-RadioButton__Backdrop"></span>
   <% end %>
 <% end %>

data/app/components/polaris/radio_button_component.rb

@@ -20,6 +20,7 @@ module Polaris
       @attribute = attribute
       @name = name
       @checked = checked
+      @disabled = disabled
       @value = value
 
       @system_arguments = system_arguments
@@ -38,10 +39,7 @@ module Polaris
       }.merge(wrapper_arguments)
 
       @input_options = input_options
-      @input_options[:aria] ||= {}
-      @input_options[:disabled] = true if disabled
-      @input_options[:aria][:checked] = checked
-      @input_options[:class] = class_names(
+      @input_options[:classes] = class_names(
         @input_options[:classes],
         "Polaris-RadioButton__Input"
       )
@@ -51,5 +49,17 @@ module Polaris
       @wrapper_arguments[:children_content] = content
       @wrapper_arguments
     end
+
+    def radio_button
+      render Polaris::BaseRadioButton.new(
+        form: @form,
+        attribute: @attribute,
+        name: @name,
+        checked: @checked,
+        disabled: @disabled,
+        value: @value,
+        **@input_options
+      )
+    end
   end
 end

data/app/components/polaris/text_field_component.rb

@@ -19,8 +19,8 @@ module Polaris
 
     attr_reader :value
 
-    renders_one :prefix
-    renders_one :suffix
+    renders_one :prefix, "Affix"
+    renders_one :suffix, "Affix"
     renders_one :connected_left
     renders_one :connected_right
 
@@ -179,5 +179,19 @@ module Polaris
     def render_number_buttons?
       @type == :number && !@disabled
     end
+
+    class Affix < Polaris::NewComponent
+      def initialize(icon: nil)
+        @icon = icon
+      end
+
+      def call
+        if @icon.present?
+          render Polaris::IconComponent.new(name: @icon)
+        else
+          content
+        end
+      end
+    end
   end
 end

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

@@ -0,0 +1,21 @@
+<%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
+  <div style="<%= polaris_inversed_colors %>">
+    <div class="<%= toast_classes %>">
+      <%= content %>
+
+      <% if action.present? %>
+        <div class="Polaris-Frame-Toast__Action">
+          <%= action %>
+        </div>
+      <% end %>
+
+      <button
+        data-action="polaris-toast#close"
+        type="button"
+        class="Polaris-Frame-Toast__CloseButton"
+      >
+        <%= polaris_icon(name: "MobileCancelMajor") %>
+      </button>
+    </div>
+  </div>
+<% end %>