primer_view_components 0.0.114 → 0.0.116

data/previews/primer/alpha/auto_complete_preview.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "../url_helpers"
+
 module Primer
   module Alpha
     # @label AutoComplete
@@ -12,7 +14,18 @@ module Primer
       # @param is_clearable toggle
       def playground(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: label_text,
+            input_id: "input-id",
+            list_id: "test-id",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: is_label_visible,
+            is_label_inline: is_label_inline,
+            with_icon: with_icon,
+            is_clearable: is_clearable
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
@@ -24,7 +37,18 @@ module Primer
       # @param is_clearable toggle
       def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: label_text,
+            input_id: "input-id",
+            list_id: "test-id",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: is_label_visible,
+            is_label_inline: is_label_inline,
+            with_icon: with_icon,
+            is_clearable: is_clearable
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
@@ -33,28 +57,60 @@ module Primer
       # @label AutoComplete with non-visible label
       def with_non_visible_label
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-1", list_id: "test-id-1", src: "/auto_complete?version=alpha", is_label_visible: false))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-1",
+            list_id: "test-id-1",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_visible: false
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with inline label
       def with_inline_label
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "test-id-2", src: "/auto_complete?version=alpha", is_label_inline: true))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-2",
+            list_id: "test-id-2",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_label_inline: true
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with search icon
       def with_icon
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-3", list_id: "test-id-3", src: "/auto_complete?version=alpha", with_icon: true))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-3",
+            list_id: "test-id-3",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            with_icon: true
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 
       # @label AutoComplete with clear button
       def with_clear_button
         # rubocop:disable Primer/ComponentNameMigration
-        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-4", list_id: "test-id-4", src: "/auto_complete?version=alpha", is_clearable: true))
+        render(
+          Primer::Alpha::AutoComplete.new(
+            label_text: "Select a fruit",
+            input_id: "input-id-4",
+            list_id: "test-id-4",
+            src: URLHelpers.autocomplete_index_path(version: "alpha"),
+            is_clearable: true
+          )
+        )
         # rubocop:enable Primer/ComponentNameMigration
       end
 

data/previews/primer/alpha/layout_preview.rb

@@ -19,12 +19,9 @@ module Primer
         end
       end
 
-      # @label Default options
-      # @param stacking_breakpoint [Symbol] select [sm, md, lg]
-      # @param first_in_source [Symbol] select [sidebar, main]
-      # @param gutter [Symbol] select [default, none, condensed, spacious]
-      def default(stacking_breakpoint: :sm, gutter: :default, first_in_source: :sidebar)
-        render(Primer::Alpha::Layout.new(stacking_breakpoint: stacking_breakpoint, gutter: gutter, first_in_source: first_in_source)) do |c|
+      # @label Default
+      def default
+        render(Primer::Alpha::Layout.new) do |c|
           c.with_main(bg: :attention, p: 6) do
             "Main content"
           end
@@ -33,6 +30,182 @@ module Primer
           end
         end
       end
+
+      # @!group Gutter
+      #
+      # @label None
+      def gutter_none
+        render(Primer::Alpha::Layout.new(gutter: :none)) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Condensed
+      def gutter_condensed
+        render(Primer::Alpha::Layout.new(gutter: :condensed)) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Default
+      def gutter_default
+        render(Primer::Alpha::Layout.new(gutter: :default)) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Spacious
+      def gutter_spacious
+        render(Primer::Alpha::Layout.new(gutter: :spacious)) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Main width
+      #
+      # @label Medium
+      def main_width_md
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(width: :md, bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Large
+      def main_width_lg
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(width: :lg, bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Extra large
+      def main_width_xl
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(width: :xl, bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Full
+      def main_width_full
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(width: :full, bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar width
+      #
+      # @label Narrow
+      def sidebar_width_narrow
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(width: :narrow, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Default
+      def sidebar_width_default
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(width: :default, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Wide
+      def sidebar_width_wide
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(width: :wide, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar column placement
+      #
+      # @label Start
+      def sidebar_col_placement_start
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(col_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label End
+      def sidebar_col_placement_end
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(col_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Sidebar row placement
+      #
+      # @label Start
+      def sidebar_row_placement_start
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(row_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label End
+      def sidebar_row_placement_end
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(row_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label None
+      def sidebar_row_placement_none
+        render(Primer::Alpha::Layout.new) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(row_placement: :none, bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group Stacking breakpoint
+      #
+      # @label Small
+      def stacking_breakpoint_sm
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Medium
+      def stacking_breakpoint_md
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :md)) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+
+      # @label Large
+      def stacking_breakpoint_lg
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg)) do |c|
+          c.with_main(bg: :attention, p: 6) { "Main content" }
+          c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
+        end
+      end
+      #
+      # @!endgroup
     end
   end
 end

data/previews/primer/{menu_component_preview → alpha/menu_preview}/default.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::MenuComponent.new) do |c| %>
+<%= render(Primer::Alpha::Menu.new) do |c| %>
   <% c.with_heading(tag: :h2) do %>
     Heading
   <% end %>
@@ -6,11 +6,11 @@
     Item 1
   <% end %>
   <% c.with_item(href: "#url") do %>
-    <%= render(Primer::OcticonComponent.new("check")) %>
+    <%= render(Primer::Beta::Octicon.new("check")) %>
     With Icon
   <% end %>
   <% c.with_item(href: "#url") do %>
-    <%= render(Primer::OcticonComponent.new("check")) %>
+    <%= render(Primer::Beta::Octicon.new("check")) %>
     With Icon and Counter
     <%= render(Primer::Beta::Counter.new(count: 25)) %>
   <% end %>

data/previews/primer/{menu_component_preview → alpha/menu_preview}/playground.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::MenuComponent.new) do |c| %>
+<%= render(Primer::Alpha::Menu.new) do |c| %>
   <% c.with_heading(tag: :h2) do %>
     Heading
   <% end %>
@@ -6,11 +6,11 @@
     Item 1
   <% end %>
   <% c.with_item(href: "#url") do %>
-    <%= render(Primer::OcticonComponent.new("check")) %>
+    <%= render(Primer::Beta::Octicon.new("check")) %>
     With Icon
   <% end %>
   <% c.with_item(href: "#url") do %>
-    <%= render(Primer::OcticonComponent.new("check")) %>
+    <%= render(Primer::Beta::Octicon.new("check")) %>
     With Icon and Counter
     <%= render(Primer::Beta::Counter.new(count: 25)) %>
   <% end %>

data/previews/primer/alpha/menu_preview.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Menu
+    class MenuPreview < ViewComponent::Preview
+      # @label Playground
+      def playground; end
+
+      # @label Default
+      def default; end
+    end
+  end
+end

data/previews/primer/alpha/tab_panels_preview.rb

@@ -9,11 +9,11 @@ module Primer
       # @param number_of_panels [Integer] number
       # @param align [Symbol] select [left, right]
       def playground(number_of_panels: 3, align: :left)
-        render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |c|
+        render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
           Array.new(number_of_panels || 3) do |i|
-            c.tab(selected: i.zero?, id: "tab-#{i + 1}") do |t|
-              t.panel { "Panel #{i + 1}" }
-              t.text { "Tab #{i + 1}" }
+            component.tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
             end
           end
         end
@@ -24,11 +24,11 @@ module Primer
       # @param number_of_panels [Integer] number
       # @param align [Symbol] select [left, right]
       def default(number_of_panels: 3, align: :left)
-        render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |c|
+        render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
           Array.new(number_of_panels || 3) do |i|
-            c.tab(selected: i.zero?, id: "tab-#{i + 1}") do |t|
-              t.panel { "Panel #{i + 1}" }
-              t.text { "Tab #{i + 1}" }
+            component.tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
+              tab.with_panel { "Panel #{i + 1}" }
+              tab.with_text { "Tab #{i + 1}" }
             end
           end
         end

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "../url_helpers"
+
 module Primer
   module Alpha
     # @label Toggle Switch
@@ -7,31 +9,31 @@ module Primer
       include ActionView::Helpers::FormTagHelper
 
       def playground
-        render(ToggleSwitch.new(src: "/toggle_switch"))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path))
       end
 
       def default
-        render(ToggleSwitch.new(src: "/toggle_switch"))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path))
       end
 
       def checked
-        render(ToggleSwitch.new(src: "/toggle_switch", checked: true))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, checked: true))
       end
 
       def disabled
-        render(ToggleSwitch.new(src: "/toggle_switch", enabled: false))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, enabled: false))
       end
 
       def checked_disabled
-        render(ToggleSwitch.new(src: "/toggle_switch", checked: true, enabled: false))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, checked: true, enabled: false))
       end
 
       def small
-        render(ToggleSwitch.new(src: "/toggle_switch", size: :small))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, size: :small))
       end
 
       def with_status_label_position_end
-        render(ToggleSwitch.new(src: "/toggle_switch", status_label_position: :end))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, status_label_position: :end))
       end
 
       def with_a_bad_src
@@ -43,11 +45,11 @@ module Primer
       end
 
       def with_csrf_token
-        render(ToggleSwitch.new(src: "/toggle_switch", csrf_token: "let_me_in"))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
       end
 
       def with_bad_csrf_token
-        render(ToggleSwitch.new(src: "/toggle_switch", csrf_token: "i_am_a_criminal"))
+        render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
       end
     end
   end

data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb

@@ -4,7 +4,7 @@
             label_text: label_text,
             input_id: input_id,
             list_id: list_id,
-            src: "/auto_complete",
+            src: autocomplete_index_path,
             show_clear_button: show_clear_button,
             visually_hide_label: visually_hide_label,
             placeholder: placeholder,

data/previews/primer/beta/auto_complete_preview.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "../url_helpers"
+
 module Primer
   module Beta
     # @label AutoComplete
@@ -19,7 +21,7 @@ module Primer
       # @param inset toggle
       # @param monospace toggle
       def playground(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false)
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
@@ -39,7 +41,7 @@ module Primer
       # @param inset toggle
       # @param monospace toggle
       def default(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false)
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
@@ -85,7 +87,7 @@ module Primer
       # @param list_id text
       # @param input_name text
       def leading_visual(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
@@ -103,7 +105,7 @@ module Primer
       # @param list_id text
       # @param input_name text
       def trailing_action(label_text: "Select a fruit", show_clear_button: true, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
       end
 
       # @label Full width
@@ -119,7 +121,7 @@ module Primer
       # @param list_id text
       # @param input_name text
       def full_width(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: true, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
@@ -137,7 +139,7 @@ module Primer
       # @param list_id text
       # @param input_name text
       def visually_hide_label(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: true, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
@@ -156,7 +158,7 @@ module Primer
       # @param list_id text
       # @param input_name text
       def small(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :small, full_width: false, disabled: false, invalid: false, input_id: "input-id-1", list_id: "list-id-1", input_name: "input-id-1")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
@@ -173,7 +175,7 @@ module Primer
       # @param list_id text
       # @param input_name text
       def medium(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id-2", list_id: "list-id-2", input_name: "input-id-2")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
@@ -190,7 +192,7 @@ module Primer
       # @param list_id text
       # @param input_name text
       def large(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :large, full_width: false, disabled: false, invalid: false, input_id: "input-id-3", list_id: "list-id-3", input_name: "input-id-3")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
@@ -210,7 +212,7 @@ module Primer
       # @param list_id text
       # @param input_name text
       def leading_visual_in_results(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete?visual=leading", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path(visual: "leading"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
       end
 
       # @label Trailing visual in results
@@ -226,39 +228,39 @@ module Primer
       # @param list_id text
       # @param input_name text
       def trailing_visual_in_results(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
-        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete?visual=trailing", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
+        render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path(visual: "trailing"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
       end
 
       # @hidden
       def with_non_visible_label
-        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", visually_hide_label: true))
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, visually_hide_label: true))
       end
 
       # @hidden
       def with_icon
-        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete")) do |c|
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path)) do |c|
           c.leading_visual_icon(icon: :search)
         end
       end
 
       # @hidden
       def show_clear_button
-        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", show_clear_button: true))
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, show_clear_button: true))
       end
 
       # @hidden
       def size_small
-        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", show_clear_button: false, size: :small))
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, show_clear_button: false, size: :small))
       end
 
       # @hidden
       def monospace
-        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", show_clear_button: false, monospace: true))
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, show_clear_button: false, monospace: true))
       end
 
       # @hidden
       def inset
-        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", show_clear_button: false, inset: true))
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, show_clear_button: false, inset: true))
       end
     end
   end

data/previews/primer/beta/details_preview.rb

@@ -39,9 +39,9 @@ module Primer
       # @param overlay [Symbol] select [none, default, dark]
       # @param reset [Boolean] toggle
       def custom_button(reset: false, overlay: :default)
-        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
-          c.summary(size: :small, scheme: :primary) { "Click me" }
-          c.body { "Body" }
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |component|
+          component.with_summary(size: :small, scheme: :primary) { "Click me" }
+          component.with_body { "Body" }
         end
       end
 
@@ -50,9 +50,9 @@ module Primer
       # @param overlay [Symbol] select [none, default, dark]
       # @param reset [Boolean] toggle
       def without_button(reset: false, overlay: :default)
-        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c|
-          c.summary(button: false) { "Click me" }
-          c.body { "Body" }
+        render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |component|
+          component.with_summary(button: false) { "Click me" }
+          component.with_body { "Body" }
         end
       end
     end