primer_view_components 0.0.115 → 0.0.117

data/app/components/primer/subhead_component.rb

@@ -1,135 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.
-  #
-  # - Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.
-  # - Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.
-  # - Use the actions slot to render a related action to the right of the heading. Use <%= link_to_component(Primer::ButtonComponent) %> or <%= link_to_component(Primer::Beta::Link) %>.
-  #
-  # @accessibility
-  #   The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.
-  #   <%= link_to_heading_practices %>
-  class SubheadComponent < Primer::Component
-    warn_on_deprecated_slot_setter
-
-    status :beta
-
-    DEFAULT_HEADING_TAG = :div
-    HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
-
-    # The heading
-    #
-    # @param tag [Symbol] <%= one_of(Primer::SubheadComponent::HEADING_TAG_OPTIONS)%>
-    # @param danger [Boolean] Whether to style the heading as dangerous.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
-      system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
-      system_arguments[:classes] = class_names(
-        system_arguments[:classes],
-        "Subhead-heading",
-        "Subhead-heading--danger": danger
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # Actions
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :actions, lambda { |**system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # The description
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :description, lambda { |**system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.with_heading(tag: :h3) do %>
-    #       My Heading
-    #     <% end %>
-    #     <% component.with_description do %>
-    #       My Description
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With dangerous heading
-    #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.with_heading(tag: :h3, danger: true) do %>
-    #       My Heading
-    #     <% end %>
-    #     <% component.with_description do %>
-    #       My Description
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With long description
-    #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.with_heading(tag: :h3) do %>
-    #       My Heading
-    #     <% end %>
-    #   <% end %>
-    #   <p> This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. </p>
-    #
-    # @example Without border
-    #   <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
-    #     <% component.with_heading do %>
-    #       My Heading
-    #     <% end %>
-    #     <% component.with_description do %>
-    #       My Description
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With actions
-    #   <%= render(Primer::SubheadComponent.new) do |component| %>
-    #     <% component.with_heading do %>
-    #       My Heading
-    #     <% end %>
-    #     <% component.with_description do %>
-    #       My Description
-    #     <% end %>
-    #     <% component.with_actions do %>
-    #       <%= render(
-    #         Primer::ButtonComponent.new(
-    #           tag: :a, href: "http://www.google.com", scheme: :danger
-    #         )
-    #       ) { "Action" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param spacious [Boolean] Whether to add spacing to the Subhead.
-    # @param hide_border [Boolean] Whether to hide the border under the heading.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(spacious: false, hide_border: false, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] =
-        class_names(
-          @system_arguments[:classes],
-          "Subhead",
-          "Subhead--spacious": spacious,
-          "border-bottom-0": hide_border
-        )
-      @system_arguments[:mb] ||= hide_border ? 0 : nil
-    end
-
-    def render?
-      heading.present?
-    end
+  class SubheadComponent < Primer::Beta::Subhead
+    status :deprecated
   end
 end

data/app/components/primer/tab_container_component.rb

@@ -1,43 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
-  # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::Alpha::TabNav) %>.
-  #
-  # This component requires javascript.
-  class TabContainerComponent < Primer::Component
-    warn_on_deprecated_slot_setter
-
-    # @example Default
-    #   <%= render(Primer::TabContainerComponent.new)  do %>
-    #     <div role="tablist">
-    #       <button type="button" role="tab" aria-selected="true">Tab one</button>
-    #       <button type="button" role="tab" tabindex="-1">Tab two</button>
-    #       <button type="button" role="tab" tabindex="-1">Tab three</button>
-    #     </div>
-    #     <div role="tabpanel">
-    #       Panel 1
-    #     </div>
-    #     <div role="tabpanel" hidden>
-    #       Panel 2
-    #     </div>
-    #     <div role="tabpanel" hidden>
-    #       Panel 3
-    #     </div>
-    #   <% end %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = "tab-container"
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
-    end
-
-    def render?
-      content.present?
-    end
+  class TabContainerComponent < Primer::Alpha::TabContainer
+    status :deprecated
   end
 end

data/app/components/primer/time_ago_component.rb

@@ -3,7 +3,6 @@
 module Primer
   # Use `TimeAgo` to display a time relative to how long ago it was. This component requires JavaScript.
   class TimeAgoComponent < Primer::Component
-    warn_on_deprecated_slot_setter
     status :deprecated
 
     # @example Default

data/app/components/primer/timeline_item_component.rb

@@ -1,87 +1,13 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
-  class TimelineItemComponent < Primer::Component
-    warn_on_deprecated_slot_setter
-    status :beta
+  # nodoc
+  class TimelineItemComponent < Primer::Beta::TimelineItem
+    status :deprecated
 
-    # Avatar to be rendered to the left of the Badge.
-    #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
-    renders_one :avatar, lambda { |src:, size: 40, shape: :square, **system_arguments|
-      system_arguments[:classes] = class_names(
-        "TimelineItem-avatar",
-        system_arguments[:classes]
-      )
-
-      Primer::Beta::Avatar.new(src: src, size: size, shape: shape, **system_arguments)
-    }
-
-    # Badge that will be connected to other TimelineItems.
-    #
-    # @param icon [String] Name of <%= link_to_octicons %> to use.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :badge, "BadgeComponent"
-
-    # Body to be rendered to the left of the Badge.
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :body, lambda { |**system_arguments|
-      deny_tag_argument(**system_arguments)
-      system_arguments[:tag] = :div
-      system_arguments[:classes] = class_names(
-        "TimelineItem-body",
-        system_arguments[:classes]
-      )
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #   <div style="padding-left: 60px">
-    #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "github") %>
-    #       <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
-    #       <% component.with_body { "Success!" } %>
-    #     <% end %>
-    #   </div>
-    #
-    # @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(condensed: false, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :div
-      @system_arguments[:classes] = class_names(
-        "TimelineItem",
-        condensed ? "TimelineItem--condensed" : "",
-        system_arguments[:classes]
-      )
-    end
-
-    def render?
-      avatar? || badge? || body?
-    end
-
-    # This component is part of `Primer::TimelineItemComponent` and should not be
-    # used as a standalone component.
+    # nodoc
     class BadgeComponent < Primer::Component
-      def initialize(icon: nil, **system_arguments)
-        @icon = icon
-
-        @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = :div
-        @system_arguments[:classes] = class_names(
-          "TimelineItem-badge",
-          system_arguments[:classes]
-        )
-      end
-
-      def call
-        render(Primer::BaseComponent.new(**@system_arguments)) do
-          render(Primer::Beta::Octicon.new(@icon))
-        end
-      end
+      status :deprecated
     end
   end
 end

data/app/components/primer/tooltip.rb

@@ -3,7 +3,6 @@
 module Primer
   # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
   class Tooltip < Primer::Component
-    warn_on_deprecated_slot_setter
     status :deprecated
 
     DIRECTION_DEFAULT = :n

data/app/components/primer/truncate.rb

@@ -3,8 +3,6 @@
 module Primer
   # Use `Truncate` to shorten overflowing text with an ellipsis.
   class Truncate < Primer::Component
-    warn_on_deprecated_slot_setter
-
     status :beta
 
     DEFAULT_TAG = :div

data/app/forms/example_toggle_switch_form/example_field_caption.html.erb

@@ -0,0 +1 @@
+My <em>favorite</em> caption.

data/app/forms/example_toggle_switch_form.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ExampleToggleSwitchForm < Primer::Forms::ToggleSwitchForm
+  def initialize(**system_arguments)
+    super(name: :example_field, label: "Example", **system_arguments)
+  end
+end

data/app/forms/submit_button_form.rb

@@ -14,12 +14,12 @@ class SubmitButtonForm < ApplicationForm
     )
 
     my_form.group(layout: :horizontal) do |button_group|
-      button_group.submit(name: :submit, label: "Submit", scheme: :primary, mb: 3) do |c|
-        c.with_leading_visual_icon(icon: :"check-circle")
+      button_group.submit(name: :submit, label: "Submit", scheme: :primary, mb: 3) do |component|
+        component.with_leading_visual_icon(icon: :"check-circle")
       end
 
-      button_group.button(name: :button, label: "Click me", mb: 3) do |c|
-        c.with_leading_visual_icon(icon: :alert)
+      button_group.button(name: :button, label: "Click me", mb: 3) do |component|
+        component.with_leading_visual_icon(icon: :alert)
       end
     end
   end

data/app/lib/primer/tabbed_component_helper.rb

@@ -23,7 +23,7 @@ module Primer
     def tab_container_wrapper(with_panel:, **system_arguments)
       return yield unless with_panel
 
-      render Primer::TabContainerComponent.new(**system_arguments) do
+      render Primer::Alpha::TabContainer.new(**system_arguments) do
         yield if block_given?
       end
     end

data/lib/primer/deprecations.rb

@@ -74,19 +74,13 @@ module Primer
         # more information on what is and is not valid, see the
         # documentation here: docs/contributors/deprecations.md
 
-        if replacement?(component_name) # has replacement
-          if correctable?(component_name) # is autocorrectable
-            msg << "Please update your code to use '#{replacement(component_name)}'"
-            msg << "or use rubocop's auto-correct option to do it for you."
-            msg << "See #{guide(component_name)} for more information." if guide?(component_name) # has a guide
-          elsif guide?(component_name) # not autocorrectable
-            msg << "See #{guide(component_name)} for information on replacing this component in your code." # has a guide
-          end
-        elsif !correctable?(component_name) # no replacement
-          if guide?(component_name) # has a guide
-            msg << "Unfortunately, there is no direct replacement."
-            msg << "See #{guide(component_name)} for available options to update your code."
-            end
+        if replacement?(component_name)
+          msg << "Please update your code to use '#{replacement(component_name)}'."
+          msg << "Use Rubocop's auto-correct, or replace it yourself." if correctable?(component_name)
+          msg << "See #{guide(component_name)} for more information." if guide?(component_name)
+        else # if there is no replacement, it must have a guide. this is enforced through tests
+          msg << "Unfortunately, there is no direct replacement."
+          msg << "See #{guide(component_name)} for more information and available options."
         end
 
         msg.join(" ")

data/lib/primer/deprecations.yml

@@ -47,6 +47,10 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Alpha::Dropdown::Menu::Item"
 
+  - component: "Primer::HellipButton"
+    autocorrect: true
+    replacement: "Primer::Alpha::HellipButton"
+
   - component: "Primer::IconButton"
     autocorrect: true
     replacement: "Primer::Beta::IconButton"
@@ -88,11 +92,31 @@ deprecations:
     autocorrect: true
     replacement: "Primer::Beta::Spinner"
 
+  - component: "Primer::StateComponent"
+    autocorrect: true
+    replacement: "Primer::Beta::State"
+
+  - component: "Primer::SubheadComponent"
+    autocorrect: true
+    replacement: "Primer::Beta::Subhead"
+
+  - component: "Primer::TabContainerComponent"
+    autocorrect: true
+    replacement: "Primer::Alpha::TabContainer"
+
   - component: "Primer::TimeAgoComponent"
     autocorrect: false
     replacement: "Primer::Beta::RelativeTime"
     guide: "https://primer.style/view-components/guides/primer_time_ago"
 
+  - component: "Primer::TimelineItemComponent"
+    autocorrect: true
+    replacement: "Primer::Beta::TimelineItem"
+
+  - component: "Primer::TimelineItemComponent::BadgeComponent"
+    autocorrect: true
+    replacement: "Primer::Beta::TimelineItem::Badge"
+
   - component: "Primer::Tooltip"
     autocorrect: true
     replacement: "Primer::Alpha::Tooltip"

data/lib/primer/forms/builder.rb

@@ -33,6 +33,8 @@ module Primer
 
       UTILITY_KEYS = Primer::Classify::Utilities::UTILITIES.keys.freeze
 
+      alias primer_fields_for fields_for
+
       def label(method, text = nil, **options, &block)
         super(method, text, classify(options).merge(generate_error_markup: false), &block)
       end
@@ -72,9 +74,6 @@ module Primer
       #    is expected by Rails/HTML while the second is specific to Primer.
       # 3. Combines options[:class] and options[:classes] into options[:class]
       #    so the options hash can be easily passed to Rails form builder methods.
-      # 4. Sets generate_error_markup: false, which, in combination with the
-      #    monkeypatch at the top of this file, skips rendering any markup around
-      #    invalid fields.
       #
       def classify(options)
         options[:classes] = class_names(options.delete(:class), options[:classes])

data/lib/primer/forms/button.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::Beta::Button.new(**input_arguments)) do |c| %>
-  <% @input.block.call(c) if @input.block %>
+<%= render(Primer::Beta::Button.new(**input_arguments)) do |component| %>
+  <% @input.block.call(component) if @input.block %>
   <%= @input.label %>
 <% end %>

data/lib/primer/forms/dsl/form_reference_input.rb

@@ -5,11 +5,34 @@ module Primer
     module Dsl
       # :nodoc:
       class FormReferenceInput < Input
-        attr_reader :ref_block, :fields_for_args, :fields_for_kwargs
+        attr_reader :ref_block, :fields_for_args, :fields_for_kwargs, :nested
+        alias nested? nested
 
-        def initialize(*fields_for_args, builder:, form:, **fields_for_kwargs, &block)
+        # Pass `nested: false` to prevent the referenced form fields from being treated as nested
+        # under the parent form's model. For example, consider these models:
+
+        # class User < ActiveRecord::Base
+        #   has_many :addresses
+        # end
+
+        # class Address < ActiveRecord::Base
+        #   belongs_to :user
+        # end
+
+        # A sign-up form might include fields from `User` as well as `Address`. Since addresses are
+        # associated with users, it's perfectly natural to accept the address fields as nested
+        # attributes. Rails will name each field accordingly. For example, the `street` field on
+        # `Address` will be named `user[address][street]`.
+
+        # For situations like this where an association exists between two models, the nested
+        # attributes approach works great. However sometimes all you want is to compose two forms
+        # together that aren't connected by an association. In such cases the fields will still
+        # include the name of the parent model, eg. `user[address][street]` instead of what we want,
+        # `address[street]`. To render the form independent of the parent, pass `nested: false`.
+        def initialize(*fields_for_args, builder:, form:, nested: true, **fields_for_kwargs, &block)
           @fields_for_args = fields_for_args
           @fields_for_kwargs = fields_for_kwargs
+          @nested = nested
           @ref_block = block
 
           super(builder: builder, form: form, **fields_for_kwargs)

data/lib/primer/forms/dsl/input.rb

@@ -43,6 +43,33 @@ module Primer
           @full_width = @input_arguments.delete(:full_width)
           @size = @input_arguments.delete(:size)
 
+          # If scope_name_to_model is false, the name of the input for eg. `my_field`
+          # will be `my_field` instead of the Rails default of `model[my_field]`.
+          #
+          # We achieve this by passing the `name` option to Rails form builder
+          # methods. These methods will use the passed name if provided instead
+          # of generating a scoped one.
+          #
+          # rubocop:disable Style/IfUnlessModifier
+          unless @input_arguments.delete(:scope_name_to_model) { true }
+            @input_arguments[:name] = name
+          end
+          # rubocop:enable Style/IfUnlessModifier
+
+          # If scope_id_to_model is false, the name of the input for eg. `my_field`
+          # will be `my_field` instead of the Rails default of `model_my_field`.
+          #
+          # We achieve this by passing the `id` option to Rails form builder
+          # methods. These methods will use the passed id if provided instead
+          # of generating a scoped one. The id is the name of the field unless
+          # explicitly provided in system_arguments.
+          #
+          # rubocop:disable Style/IfUnlessModifier
+          unless @input_arguments.delete(:scope_id_to_model) { true }
+            @input_arguments[:id] = @input_arguments.delete(:id) { name }
+          end
+          # rubocop:enable Style/IfUnlessModifier
+
           # Whether or not to wrap the component in a FormControl, which renders a
           # label above and validation message beneath the input.
           @form_control = @input_arguments.delete(:form_control) { true }

data/lib/primer/forms/dsl/toggle_switch_input.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class ToggleSwitchInput < Input
+        attr_reader :name, :label, :src, :csrf
+
+        def initialize(
+          name:,
+          label:,
+          src:,
+          csrf: nil,
+          **system_arguments
+        )
+          @name = name
+          @label = label
+          @src = src
+          @csrf = csrf
+
+          super(**system_arguments)
+        end
+
+        def to_component
+          ToggleSwitch.new(input: self)
+        end
+
+        def type
+          :toggle_switch
+        end
+      end
+    end
+  end
+end

data/lib/primer/forms/form_reference.html.erb

@@ -1,3 +1,3 @@
-<%= builder.fields_for(*@input.fields_for_args, **@input.fields_for_kwargs) do |fields| %>
+<%= builder_or_view.primer_fields_for(*@input.fields_for_args, **@input.fields_for_kwargs) do |fields| %>
   <%= render(@input.ref_block.call(fields)) %>
 <% end %>

data/lib/primer/forms/form_reference.rb

@@ -9,6 +9,10 @@ module Primer
       def initialize(input:)
         @input = input
       end
+
+      def builder_or_view
+        @input.nested? ? builder : @view_context
+      end
     end
   end
 end

data/lib/primer/forms/toggle_switch.html.erb

@@ -0,0 +1,17 @@
+<%= content_tag(:div, **@form_group_arguments) do %>
+  <span style="flex-grow: 1">
+    <%= builder.label(@input.name, **@input.label_arguments) do %>
+      <%= @input.label %>
+    <% end %>
+    <%= render(Caption.new(input: @input)) %>
+  </span>
+  <%
+    csrf = @input.csrf || @view_context.form_authenticity_token(
+      form_options: {
+        method: :post,
+        action: @input.src
+      }
+    )
+  %>
+  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf)) %>
+<% end %>

data/lib/primer/forms/toggle_switch.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class ToggleSwitch < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+        @input.add_label_classes("FormControl-label")
+
+        @form_group_arguments = { class: "d-flex" }
+
+        @form_group_arguments[:hidden] = "hidden" if @input.hidden?
+      end
+    end
+  end
+end