primer_view_components 0.0.115 → 0.0.117

data/previews/primer/alpha/hellip_button_preview.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label HellipButton
+    class HellipButtonPreview < ViewComponent::Preview
+      # @label Default Options
+      #
+      # @param aria_label [String]
+      # @param inline [Boolean]
+      def default(inline: false, aria_label: "No effect")
+        render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
+      end
+
+      # @label Playground
+      #
+      # @param aria_label [String]
+      # @param inline [Boolean]
+      def playground(inline: false, aria_label: "No effect")
+        render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
+      end
+    end
+  end
+end

data/previews/primer/alpha/layout_preview.rb

@@ -9,11 +9,11 @@ module Primer
       # @param first_in_source [Symbol] select [sidebar, main]
       # @param gutter [Symbol] select [default, none, condensed, spacious]
       def playground(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|
-          c.with_main(bg: :attention, p: 6) do
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: stacking_breakpoint, gutter: gutter, first_in_source: first_in_source)) do |component|
+          component.with_main(bg: :attention, p: 6) do
             "Main content"
           end
-          c.with_sidebar(bg: :accent, p: 6) do
+          component.with_sidebar(bg: :accent, p: 6) do
             "Sidebar content"
           end
         end
@@ -21,11 +21,11 @@ module Primer
 
       # @label Default
       def default
-        render(Primer::Alpha::Layout.new) do |c|
-          c.with_main(bg: :attention, p: 6) do
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) do
             "Main content"
           end
-          c.with_sidebar(bg: :accent, p: 6) do
+          component.with_sidebar(bg: :accent, p: 6) do
             "Sidebar content"
           end
         end
@@ -35,33 +35,33 @@ module Primer
       #
       # @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" }
+        render(Primer::Alpha::Layout.new(gutter: :none)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new(gutter: :condensed)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new(gutter: :default)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new(gutter: :spacious)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
         end
       end
       #
@@ -71,33 +71,33 @@ module Primer
       #
       # @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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(width: :md, bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(width: :lg, bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(width: :xl, bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(width: :full, bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
         end
       end
       #
@@ -107,25 +107,25 @@ module Primer
       #
       # @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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(width: :wide, bg: :accent, p: 6) { "Sidebar content" }
         end
       end
       #
@@ -135,17 +135,17 @@ module Primer
       #
       # @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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(col_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
         end
       end
       #
@@ -155,25 +155,25 @@ module Primer
       #
       # @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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(row_placement: :none, bg: :accent, p: 6) { "Sidebar content" }
         end
       end
       #
@@ -183,25 +183,25 @@ module Primer
       #
       # @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" }
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :md)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.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" }
+        render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg)) do |component|
+          component.with_main(bg: :attention, p: 6) { "Main content" }
+          component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
         end
       end
       #

data/previews/primer/alpha/menu_preview/default.html.erb

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

data/previews/primer/alpha/menu_preview/playground.html.erb

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

data/previews/primer/alpha/segmented_control_preview.rb

@@ -16,19 +16,19 @@ module Primer
         if icon == :none
           icon = hide_labels ? :zap : nil
         end
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: hide_labels, size: size)) do |c|
-          c.with_item(label: "Preview", icon: icon, selected: true)
-          c.with_item(label: "Raw", icon: icon)
-          c.with_item(label: "Blame", icon: icon)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: hide_labels, size: size)) do |component|
+          component.with_item(label: "Preview", icon: icon, selected: true)
+          component.with_item(label: "Raw", icon: icon)
+          component.with_item(label: "Blame", icon: icon)
         end
       end
 
       # @label Default
       def default
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c|
-          c.with_item(label: "Preview", selected: true)
-          c.with_item(label: "Raw")
-          c.with_item(label: "Blame")
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
         end
       end
 
@@ -36,30 +36,30 @@ module Primer
       # @label Size small
       # @param hide_labels [Boolean] toggle
       def full_width_small(hide_labels: false)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |c|
-          c.with_item(label: "Preview", selected: true)
-          c.with_item(label: "Raw")
-          c.with_item(label: "Blame")
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
         end
       end
 
       # @label Size medium
       # @param hide_labels [Boolean] toggle
       def full_width_medium(hide_labels: false)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |c|
-          c.with_item(label: "Preview", selected: true)
-          c.with_item(label: "Raw")
-          c.with_item(label: "Blame")
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
         end
       end
 
       # @label Size large
       # @param hide_labels [Boolean] toggle
       def full_width_large(hide_labels: false)
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |c|
-          c.with_item(label: "Preview", selected: true)
-          c.with_item(label: "Raw")
-          c.with_item(label: "Blame")
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
+          component.with_item(label: "Preview", selected: true)
+          component.with_item(label: "Raw")
+          component.with_item(label: "Blame")
         end
       end
       # @!endgroup
@@ -67,28 +67,28 @@ module Primer
       # @!group Icons and text
       # @label Size small
       def icons_and_text_small
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
 
       # @label Size medium
       def icons_and_text_medium
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
 
       # @label Size large
       def icons_and_text_large
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
       # @!endgroup
@@ -96,55 +96,55 @@ module Primer
       # @!group Icons only
       # @label Size small
       def icon_only_small
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
 
       # @label Size medium
       def icon_only_medium
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
 
       # @label Size large
       def icon_only_large
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
 
       # @label Full width, size small
       def icon_only_full_width_small
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
 
       # @label Full width, size medium
       def icon_only_full_width_medium
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
 
       # @label Full width, size large
       def icon_only_full_width_large
-        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |c|
-          c.with_item(label: "Preview", icon: :eye, selected: true)
-          c.with_item(label: "Raw", icon: :"file-code")
-          c.with_item(label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
+          component.with_item(label: "Preview", icon: :eye, selected: true)
+          component.with_item(label: "Raw", icon: :"file-code")
+          component.with_item(label: "Blame", icon: :people)
         end
       end
       # @!endgroup
@@ -152,10 +152,10 @@ module Primer
       # NOTE: this preview uses a group to force it's display below the other groups
       # @!group With link as tag
       def with_link_as_tag
-        render(Primer::Alpha::SegmentedControl.new) do |c|
-          c.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
-          c.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
-          c.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
+        render(Primer::Alpha::SegmentedControl.new) do |component|
+          component.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
+          component.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
+          component.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
         end
       end
       # @!endgroup

data/previews/primer/alpha/tab_nav_preview.rb

@@ -10,12 +10,12 @@ module Primer
       # @param with_icons [Boolean] toggle
       # @param with_counters [Boolean] toggle
       def playground(number_of_tabs: 3, with_icons: false, with_counters: false)
-        render(Primer::Alpha::TabNav.new(label: "label")) do |c|
+        render(Primer::Alpha::TabNav.new(label: "label")) do |component|
           Array.new(number_of_tabs || 3) do |i|
-            c.with_tab(selected: i.zero?, href: "##{i + 1}") do |t|
-              t.icon(icon: :star) if with_icons
-              t.text { "Tab #{i + 1}" }
-              t.counter(count: 10) if with_counters
+            component.with_tab(selected: i.zero?, href: "##{i + 1}") do |tab|
+              tab.with_icon(icon: :star) if with_icons
+              tab.with_text { "Tab #{i + 1}" }
+              tab.with_counter(count: 10) if with_counters
             end
           end
         end
@@ -23,30 +23,30 @@ module Primer
 
       # @label Default
       def default
-        render(Primer::Alpha::TabNav.new(label: "Default")) do |c|
-          c.with_tab(selected: true, href: "#") { "Tab 1" }
-          c.with_tab(href: "#") { "Tab 2" }
-          c.with_tab(href: "#") { "Tab 3" }
+        render(Primer::Alpha::TabNav.new(label: "Default")) do |component|
+          component.with_tab(selected: true, href: "#") { "Tab 1" }
+          component.with_tab(href: "#") { "Tab 2" }
+          component.with_tab(href: "#") { "Tab 3" }
         end
       end
 
       # @label With icons and counters
       def with_icons_and_counters
-        render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |c|
-          c.with_tab(href: "#1", selected: true) do |t|
-            t.icon(icon: :star)
-            t.text { "Stars" }
-            t.counter(count: 10)
+        render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component|
+          component.with_tab(href: "#1", selected: true) do |tab|
+            tab.with_icon(icon: :star)
+            tab.with_text { "Stars" }
+            tab.with_counter(count: 10)
           end
-          c.with_tab(href: "#2") do |t|
-            t.icon(icon: :heart)
-            t.text { "Sponsors" }
-            t.counter(count: 14)
+          component.with_tab(href: "#2") do |tab|
+            tab.with_icon(icon: :heart)
+            tab.with_text { "Sponsors" }
+            tab.with_counter(count: 14)
           end
-          c.with_tab(href: "#3") do |t|
-            t.icon(icon: :bookmark)
-            t.text { "Bookmarks" }
-            t.counter(count: 7)
+          component.with_tab(href: "#3") do |tab|
+            tab.with_icon(icon: :bookmark)
+            tab.with_text { "Bookmarks" }
+            tab.with_counter(count: 7)
           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.with_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.with_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/tooltip_preview/with_multiple_on_a_page.html.erb

@@ -1,14 +1,14 @@
 <div>
-  <%= render(Primer::Beta::Button.new(id: "button-1")) do |c| %>
-    <% c.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
+  <%= render(Primer::Beta::Button.new(id: "button-1")) do |component| %>
+    <% component.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
     Button 1
   <% end %>
-  <%= render(Primer::Beta::Button.new(id: "button-2")) do |c| %>
-    <% c.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
+  <%= render(Primer::Beta::Button.new(id: "button-2")) do |component| %>
+    <% component.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
     Button 2
   <% end %>
-  <%= render(Primer::Beta::Button.new(id: "button-3")) do |c| %>
-    <% c.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
+  <%= render(Primer::Beta::Button.new(id: "button-3")) do |component| %>
+    <% component.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
     Button 3
   <% end %>
 </div>