primer_view_components 0.0.113 → 0.0.115

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/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/{markdown_preview.rb → beta/markdown_preview.rb}

@@ -1,9 +1,10 @@
 # frozen_string_literal: true
 
 module Primer
-  # @label Markdown
-  class MarkdownPreview < ViewComponent::Preview
-    MD_FIXTURE = %(
+  module Beta
+    # @label Markdown
+    class MarkdownPreview < ViewComponent::Preview
+      MD_FIXTURE = %(
       <p>Text can be <b>bold</b>, <i>italic</i>, or <s>strikethrough</s>. <a href=\"https://github.com\">Links </a> should be blue with no underlines (unless hovered over).</p>
 
       <p>There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.</p>
@@ -274,17 +275,18 @@ module Primer
       <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>
     ).html_safe # rubocop:disable Rails/OutputSafety
 
-    # @label Playground
-    def playground
-      render(Primer::Markdown.new) do
-        MD_FIXTURE
+      # @label Playground
+      def playground
+        render(Primer::Beta::Markdown.new) do
+          MD_FIXTURE
+        end
       end
-    end
 
-    # @label Default Options
-    def default
-      render(Primer::Markdown.new) do
-        MD_FIXTURE
+      # @label Default Options
+      def default
+        render(Primer::Beta::Markdown.new) do
+          MD_FIXTURE
+        end
       end
     end
   end

data/previews/primer/beta/octicon_preview.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Octicon
+    class OcticonPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param aria_label [String]
+      # @param size [Symbol] select [xsmall, small, medium]
+      def playground(size: :small, aria_label: nil)
+        render(Primer::Beta::Octicon.new(icon: :people, size: size, "aria-label": aria_label))
+      end
+
+      # @label Default Options
+      #
+      # @param aria_label [String]
+      # @param size [Symbol] select [xsmall, small, medium]
+      def default(size: :small, aria_label: nil)
+        render(Primer::Beta::Octicon.new(icon: :people, size: size, "aria-label": aria_label))
+      end
+    end
+  end
+end