primer_view_components 0.0.116 → 0.0.117

data/previews/primer/alpha/tooltip_preview.rb

@@ -8,8 +8,8 @@ module Primer
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
       def playground(type: :description, direction: :s, tooltip_text: "Tooltip text")
-        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |c|
-          c.tooltip(text: tooltip_text, type: type, direction: direction)
+        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
+          component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
         end
       end
@@ -18,8 +18,8 @@ module Primer
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
       def default(type: :description, direction: :s, tooltip_text: "Tooltip text")
-        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |c|
-          c.tooltip(text: tooltip_text, type: type, direction: direction)
+        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
+          component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
         end
       end
@@ -27,8 +27,8 @@ module Primer
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
       def label_tooltip_on_button_with_existing_labelledby(type: :label, direction: :s, tooltip_text: "Tooltip text")
-        render(Primer::Beta::Button.new(id: "button-with-existing-label", "aria-labelledby": "existing-label-id")) do |c|
-          c.tooltip(text: tooltip_text, type: type, direction: direction)
+        render(Primer::Beta::Button.new(id: "button-with-existing-label", "aria-labelledby": "existing-label-id")) do |component|
+          component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
         end
       end
@@ -36,8 +36,8 @@ module Primer
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
       def description_tooltip_on_button_with_existing_describedby(type: :description, direction: :s, tooltip_text: "Tooltip text")
-        render(Primer::Beta::Button.new(id: "button-with-existing-description", "aria-describedby": "existing-description-id")) do |c|
-          c.tooltip(text: tooltip_text, type: type, direction: direction)
+        render(Primer::Beta::Button.new(id: "button-with-existing-description", "aria-describedby": "existing-description-id")) do |component|
+          component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
         end
       end
@@ -69,16 +69,16 @@ module Primer
       # @!group Tooltip enabled elements
       # @label Tooltip with Primer::Beta::Button
       def tooltip_with_button(type: :description, direction: :s, tooltip_text: "Tooltip text")
-        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |c|
-          c.tooltip(text: tooltip_text, type: type, direction: direction)
+        render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component|
+          component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
         end
       end
 
       # @label Tooltip with Primer::Beta::Link
       def tooltip_with_link(type: :description, direction: :s, tooltip_text: "Tooltip text")
-        render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |c|
-          c.tooltip(text: tooltip_text, type: type, direction: direction)
+        render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |component|
+          component.with_tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
         end
       end

data/previews/primer/alpha/underline_nav_preview.rb

@@ -43,10 +43,10 @@ module Primer
       def with_icons_and_counters(label: "With icons and counters", number_of_panels: 3, align: :left, tag: :nav)
         render(Primer::Alpha::UnderlineNav.new(label: label, tag: tag, align: align)) do |component|
           Array.new(number_of_panels || 3) do |i|
-            component.with_tab(href: "#", selected: i.zero?) do |t|
-              t.icon(icon: :star)
-              t.text { "Item #{i + 1}" }
-              t.counter(count: (i + 1) * 5)
+            component.with_tab(href: "#", selected: i.zero?) do |tab|
+              tab.with_icon(icon: :star)
+              tab.with_text { "Item #{i + 1}" }
+              tab.with_counter(count: (i + 1) * 5)
             end
           end
         end

data/previews/primer/alpha/underline_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::UnderlinePanels.new(label: "Test navigation", align: align)) do |c|
+        render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", 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::UnderlinePanels.new(label: "Test navigation", align: align)) do |c|
+        render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", 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/beta/auto_complete_item_preview/default.html.erb

@@ -3,7 +3,7 @@
             selected: selected,
             disabled: disabled,
             value: ''
-    )) do |c| %>
-        <% c.leading_visual_icon(icon: :search) %>
+    )) do |component| %>
+        <% component.with_leading_visual_icon(icon: :search) %>
         Label text
 <% end %>

data/previews/primer/beta/auto_complete_item_preview/playground.html.erb

@@ -3,7 +3,7 @@
             selected: selected,
             disabled: disabled,
             value: ''
-    )) do |c| %>
-        <% c.leading_visual_icon(icon: :search) %>
+    )) do |component| %>
+        <% component.with_leading_visual_icon(icon: :search) %>
         Label text
 <% end %>

data/previews/primer/beta/auto_complete_item_preview/with_description.html.erb

@@ -4,8 +4,8 @@
             selected: selected,
             disabled: disabled,
             value: ''
-    )) do |c| %>
-        <% c.leading_visual_icon(icon: :search) %>
-        <% c.description { "Description" } %>
+    )) do |component| %>
+        <% component.with_leading_visual_icon(icon: :search) %>
+        <% component.with_description { "Description" } %>
         Label text
 <% end %>

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

@@ -13,8 +13,8 @@
             disabled: disabled,
             invalid: invalid,
             input_name: input_name
-    )) do |c| %>
-        <% c.leading_visual_icon(icon: :search) %>
+    )) do |component| %>
+        <% component.with_leading_visual_icon(icon: :search) %>
     <% end %>
     <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
 </div>

data/previews/primer/beta/auto_complete_preview.rb

@@ -21,8 +21,8 @@ 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: 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)
+        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 |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 
@@ -41,8 +41,8 @@ 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: 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)
+        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 |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 
@@ -87,8 +87,8 @@ 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: 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)
+        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 |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 
@@ -121,8 +121,8 @@ 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: 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)
+        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 |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 
@@ -139,8 +139,8 @@ 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: 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)
+        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 |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 
@@ -158,8 +158,8 @@ 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: 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)
+        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 |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 
@@ -175,8 +175,8 @@ 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: 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)
+        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 |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 
@@ -192,8 +192,8 @@ 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: 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)
+        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 |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 
@@ -238,8 +238,8 @@ module Primer
 
       # @hidden
       def with_icon
-        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)
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path)) do |component|
+          component.with_leading_visual_icon(icon: :search)
         end
       end
 

data/previews/primer/beta/avatar_stack_preview.rb

@@ -12,17 +12,17 @@ module Primer
       # @param tooltipped toggle
       # @param tooltip_label text
       def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
-        render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |c|
+        render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |component|
           Array.new(number_of_avatars || 1) do
-            c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+            component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
           end
         end
       end
 
       # @label Default
       def default
-        render(Primer::Beta::AvatarStack.new) do |c|
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
@@ -30,46 +30,46 @@ module Primer
       #
       # @label 1 avatar
       def avatar_1
-        render(Primer::Beta::AvatarStack.new) do |c|
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
       # @label 2 avatars
       def avatar_2
-        render(Primer::Beta::AvatarStack.new) do |c|
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
       # @label 3 avatars
       def avatar_3
-        render(Primer::Beta::AvatarStack.new) do |c|
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
       # @label 4 avatars
       def avatar_4
-        render(Primer::Beta::AvatarStack.new) do |c|
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
       # @label 5 avatars
       def avatar_5
-        render(Primer::Beta::AvatarStack.new) do |c|
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
       #
@@ -79,19 +79,19 @@ module Primer
       #
       # @label Align right
       def align_right
-        render(Primer::Beta::AvatarStack.new(align: :right)) do |c|
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        render(Primer::Beta::AvatarStack.new(align: :right)) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
       # @label With tooltip
       def with_tooltip
-        render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: "This is a tooltip!" })) do |c|
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: "This is a tooltip!" })) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
       #

data/previews/primer/beta/blankslate_preview.rb

@@ -10,17 +10,17 @@ module Primer
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
       def playground(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
-          c.heading(tag: :h2).with_content("Title")
-          c.description { "Description" }
+        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
         end
       end
 
       # @label Default options
       def default
-        render Primer::Beta::Blankslate.new do |c|
-          c.heading(tag: :h2).with_content("Title")
-          c.description { "Description" }
+        render Primer::Beta::Blankslate.new do |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
         end
       end
 
@@ -28,25 +28,25 @@ module Primer
       #
       # @label Narrow
       def option_narrow
-        render Primer::Beta::Blankslate.new(narrow: true) do |c|
-          c.heading(tag: :h2).with_content("Title")
-          c.description { "Description" }
+        render Primer::Beta::Blankslate.new(narrow: true) do |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
         end
       end
 
       # @label Spacious
       def option_spacious
-        render Primer::Beta::Blankslate.new(spacious: true) do |c|
-          c.heading(tag: :h2).with_content("Title")
-          c.description { "Description" }
+        render Primer::Beta::Blankslate.new(spacious: true) do |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
         end
       end
 
       # @label Border
       def option_border
-        render Primer::Beta::Blankslate.new(border: true) do |c|
-          c.heading(tag: :h2).with_content("Title")
-          c.description { "Description" }
+        render Primer::Beta::Blankslate.new(border: true) do |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
         end
       end
       #
@@ -56,9 +56,9 @@ module Primer
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
       def with_icon(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
-          c.visual_icon(icon: :shield)
-          c.heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
+        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_visual_icon(icon: :shield)
+          component.with_heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
         end
       end
 
@@ -66,9 +66,9 @@ module Primer
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
       def with_image(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
-          c.heading(tag: :h2).with_content("Millions of teams trust GitHub to keep their work safe")
-          c.visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault")
+        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_heading(tag: :h2).with_content("Millions of teams trust GitHub to keep their work safe")
+          component.with_visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault")
         end
       end
 
@@ -76,10 +76,10 @@ module Primer
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
       def loading(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
-          c.heading(tag: :h2).with_content("Mirroring your repository")
-          c.description { "We’re currently mirroring this repository. It should take anywhere from a few minutes to a couple of hours depending on the size of the repository." }
-          c.visual_spinner(size: :large)
+        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_heading(tag: :h2).with_content("Mirroring your repository")
+          component.with_description { "We’re currently mirroring this repository. It should take anywhere from a few minutes to a couple of hours depending on the size of the repository." }
+          component.with_visual_spinner(size: :large)
         end
       end
 
@@ -87,9 +87,9 @@ module Primer
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
       def description(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
-          c.heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
-          c.description { "Millions of teams trust GitHub to keep their work safe" }
+        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
+          component.with_description { "Millions of teams trust GitHub to keep their work safe" }
         end
       end
 
@@ -97,9 +97,9 @@ module Primer
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
       def primary_action(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
-          c.heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
-          c.primary_action(href: "#").with_content("Fix issue")
+        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
+          component.with_primary_action(href: "#").with_content("Fix issue")
         end
       end
 
@@ -107,9 +107,9 @@ module Primer
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
       def secondary_action(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
-          c.heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
-          c.secondary_action(href: "#").with_content("Fix issue")
+        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
+          component.with_secondary_action(href: "#").with_content("Fix issue")
         end
       end
 
@@ -117,12 +117,12 @@ module Primer
       # @param spacious [Boolean] toggle
       # @param border [Boolean] toggle
       def full(narrow: false, spacious: false, border: false)
-        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
-          c.visual_icon(icon: :shield)
-          c.heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
-          c.description { "Millions of teams trust GitHub to keep their work safe" }
-          c.primary_action(href: "#").with_content("Fix issue")
-          c.secondary_action(href: "#").with_content("Learn more about vulnerabilities")
+        render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |component|
+          component.with_visual_icon(icon: :shield)
+          component.with_heading(tag: :h2).with_content("It looks like we have discovered a vulnerability")
+          component.with_description { "Millions of teams trust GitHub to keep their work safe" }
+          component.with_primary_action(href: "#").with_content("Fix issue")
+          component.with_secondary_action(href: "#").with_content("Learn more about vulnerabilities")
         end
       end
     end