primer_view_components 0.0.116 → 0.0.117

data/app/components/primer/subhead_component.rb

@@ -1,133 +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
-    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,41 +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
-    # @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/timeline_item_component.rb

@@ -1,86 +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
-    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/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/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/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/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

data/lib/primer/forms/toggle_switch_form.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # Toggle switches are designed to submit an on/off value to the server immediately
+    # upon click. For that reason they are not designed to be used in "regular" forms
+    # that have other fields, etc. Instead they should be used independently via this
+    # class.
+    #
+    # ToggleSwitchForm can be used directly or via inheritance.
+    #
+    # Via inheritance:
+    #
+    # # app/forms/my_toggle_form.rb
+    # class MyToggleForm < Primer::Forms::ToggleSwitchForm
+    #   def initialize(**system_arguments)
+    #     super(name: :foo, label: "Foo", src: "/foo", **system_arguments)
+    #   end
+    # end
+    #
+    # # app/views/some_view.html.erb
+    # <%= render(MyToggleForm.new) %>
+    #
+    # Directly:
+    #
+    # # app/views/some_view.html.erb
+    # <%= render(
+    #   Primer::Forms::ToggleSwitchForm.new(
+    #     name: :foo, label: "Foo", src: "/foo"
+    #   )
+    # ) %>
+    #
+    class ToggleSwitchForm < Primer::Forms::Base
+      # Define the form on subclasses so render(Subclass.new) works as expected.
+      def self.inherited(base)
+        base.form do |toggle_switch_form|
+          input = Dsl::ToggleSwitchInput.new(
+            builder: toggle_switch_form.builder, form: self, **@system_arguments
+          )
+
+          toggle_switch_form.send(:add_input, input)
+        end
+      end
+
+      # Define the form on self so render(ToggleSwitchForm.new) works as expected.
+      inherited(self)
+
+      # Override to avoid accepting a builder argument. We create our own builder
+      # on render. See the implementation of render_in below.
+      def self.new(**options)
+        allocate.tap { |obj| obj.send(:initialize, **options) }
+      end
+
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+      end
+
+      # Unlike other instances of Base, ToggleSwitchForm defines its own form and
+      # is not given a Rails form builder on instantiation. We do this mostly for
+      # ergonomic reasons; it's much less verbose than if you were required to
+      # call form_with/form_for, etc. That said, the rest of the forms framework
+      # assumes the presence of a builder so we create our own here. A builder
+      # cannot be constructed without a corresponding view context, which is why
+      # we have to override render_in and can't create it in the initializer.
+      def render_in(view_context, &block)
+        @builder = Primer::Forms::Builder.new(
+          nil, nil, view_context, {}
+        )
+
+        super
+      end
+    end
+  end
+end

data/lib/primer/view_components/linters/subhead_component_migration_counter.rb

@@ -6,7 +6,7 @@ module ERBLint
   module Linters
     # Counts the number of times a HTML Subhead is used instead of the component.
     class SubheadComponentMigrationCounter < BaseLinter
-      MESSAGE = "We are migrating Subhead to use [Primer::SubheadComponent](https://primer.style/view-components/components/subhead), please try to use that instead of raw HTML."
+      MESSAGE = "We are migrating Subhead to use [Primer::Beta::Subhead](https://primer.style/view-components/components/subhead), please try to use that instead of raw HTML."
       CLASSES = %w[Subhead].freeze
       TAGS = %w[div].freeze
     end

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 116
+      PATCH = 117
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/cop/primer/component_name_migration.rb

@@ -18,7 +18,8 @@ module RuboCop
         def on_send(node)
           return unless node.method_name == :new && !node.receiver.nil? && ::Primer::Deprecations.deprecated?(node.receiver.const_name)
 
-          add_offense(node.receiver, message: "Don't use deprecated names")
+          message = ::Primer::Deprecations.deprecation_message(node.receiver.const_name)
+          add_offense(node.receiver, message: message)
         end
 
         def autocorrect(node)

data/lib/tasks/docs.rake

@@ -34,7 +34,7 @@ namespace :docs do
       Primer::Beta::Button,
       Primer::Alpha::SegmentedControl,
       Primer::Alpha::Layout,
-      Primer::HellipButton,
+      Primer::Alpha::HellipButton,
       Primer::Alpha::Image,
       Primer::LocalTime,
       Primer::Alpha::OcticonSymbols,
@@ -73,14 +73,14 @@ namespace :docs do
       Primer::Beta::Octicon,
       Primer::Beta::Popover,
       Primer::Beta::ProgressBar,
-      Primer::StateComponent,
+      Primer::Beta::State,
       Primer::Beta::Spinner,
-      Primer::SubheadComponent,
-      Primer::TabContainerComponent,
+      Primer::Beta::Subhead,
+      Primer::Alpha::TabContainer,
       Primer::Beta::Text,
       Primer::Alpha::TextField,
       Primer::TimeAgoComponent,
-      Primer::TimelineItemComponent,
+      Primer::Beta::TimelineItem,
       Primer::Tooltip,
       Primer::Truncate,
       Primer::Beta::Truncate,
@@ -106,7 +106,7 @@ namespace :docs do
       Primer::Beta::AutoComplete,
       Primer::Alpha::Banner,
       Primer::Beta::ClipboardCopy,
-      Primer::TabContainerComponent,
+      Primer::Alpha::TabContainer,
       Primer::TimeAgoComponent,
       Primer::Alpha::UnderlinePanels,
       Primer::Alpha::TabPanels,