primer_view_components 0.0.104 → 0.0.105

data/previews/primer/alpha/button_marketing_preview.rb

@@ -4,6 +4,15 @@ module Primer
   module Alpha
     # @label ButtonMarketing
     class ButtonMarketingPreview < ViewComponent::Preview
+      # @label Playground
+      # @param scheme [Symbol] select [default, primary, outline, transparent]
+      # @param variant [Symbol] select [default, large]
+      # @param tag [Symbol] select [button, a]
+      # @param type [Symbol] select [button, submit]
+      def playground(tag: :button, type: :button, scheme: :default, variant: :default)
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
+      end
+
       # @label Default options
       # @param scheme [Symbol] select [default, primary, outline, transparent]
       # @param variant [Symbol] select [default, large]

data/previews/primer/alpha/dialog_preview.rb

@@ -4,6 +4,23 @@ module Primer
   module Alpha
     # @label Dialog
     class DialogPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
+      # @param position [Symbol] select [center, left, right]
+      # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
+      # @param visually_hide_title [Boolean] toggle
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def playground(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false)
+        render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
+          d.with_show_button { button_text }
+          d.with_body { body_text }
+        end
+      end
+
       # @label Default options
       #
       # @param title [String] text
@@ -80,7 +97,7 @@ module Primer
                                show_divider: show_divider
                              })
       end
-      
+
       # @label Nested dialog
       #
       # @param title [String] text

data/previews/primer/alpha/hidden_text_expander_preview.rb

@@ -4,6 +4,13 @@ module Primer
   module Alpha
     # @label HiddenTextExpander
     class HiddenTextExpanderPreview < ViewComponent::Preview
+      # @label Playground
+      # @param label [String] text
+      # @param inline [Boolean] toggle
+      def playground(label: "No effect", inline: false)
+        render(Primer::Alpha::HiddenTextExpander.new(inline: inline, "aria-label": label))
+      end
+
       # @label Default options
       # @param label [String] text
       # @param inline [Boolean] toggle

data/previews/primer/alpha/image_crop_preview.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label ImageCrop
+    class ImageCropPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param rounded [Boolean]
+      def playground(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded))
+      end
+
+      # @label Default Options
+      #
+      # @param rounded [Boolean]
+      def default(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded))
+      end
+
+      # @label Custom loading slot
+      #
+      # @param rounded [Boolean]
+      def loading(rounded: false)
+        render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded)) do |c|
+          c.with_loading { "Loading..." }
+        end
+      end
+    end
+  end
+end

data/previews/primer/alpha/layout_preview.rb

@@ -4,6 +4,21 @@ module Primer
   module Alpha
     # @label Layout
     class LayoutPreview < ViewComponent::Preview
+      # @label Playground
+      # @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 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
+            "Main content"
+          end
+          c.with_sidebar(bg: :accent, p: 6) do
+            "Sidebar content"
+          end
+        end
+      end
+
       # @label Default options
       # @param stacking_breakpoint [Symbol] select [sm, md, lg]
       # @param first_in_source [Symbol] select [sidebar, main]

data/previews/primer/alpha/nav_list_preview.rb

@@ -4,6 +4,35 @@ module Primer
   module Alpha
     # @label NavList
     class NavListPreview < ViewComponent::Preview
+      # @label Playground
+      def playground
+        render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
+          list.with_section(aria: { label: "Repository settings" }) do |section|
+            section.with_heading(title: "Repository settings")
+
+            section.with_item(label: "General", href: "/general") do |item|
+              item.with_leading_visual_icon(icon: :gear)
+            end
+          end
+
+          list.with_section(aria: { label: "Access" }) do |section|
+            section.with_heading(title: "Access")
+
+            section.with_item(label: "Collaborators and teams", href: "/collaborators", selected_by_ids: :collaborators) do |item|
+              item.with_leading_visual_icon(icon: :people)
+            end
+
+            section.with_item(label: "Moderation options", href: "/moderation") do |item|
+              item.with_leading_visual_icon(icon: :"comment-discussion")
+
+              item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
+              item.with_item(label: "Code review limits", href: "/review-limits", selected_by_ids: :code_review_limits)
+              item.with_item(label: "Reported content", href: "/reported-content", selected_by_ids: :reported_content)
+            end
+          end
+        end
+      end
+
       # @label Default
       def default
         render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|

data/previews/primer/alpha/segmented_control_preview.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module Alpha
+    # @label SegmentedControl
+    class SegmentedControlPreview < ViewComponent::Preview
+      # @label Playground
+      # @param full_width [Boolean] toggle
+      # @param hide_labels [Boolean] toggle
+      # @param icon [Symbol] octicon
+      # @param size select [small, medium, large]
+      def playground(full_width: false, hide_labels: false, size: :medium, icon: :none)
+        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)
+        end
+      end
+
+      # @param full_width [Boolean] toggle
+      # @param size select [small, medium, large]
+      def default(full_width: false, size: :medium)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, size: size)) do |c|
+          c.with_item(label: "Preview", selected: true)
+          c.with_item(label: "Raw")
+          c.with_item(label: "Blame")
+        end
+      end
+
+      # @param hide_labels [Boolean] toggle
+      # @param size select [small, medium, large]
+      def full_width(hide_labels: false, size: :medium)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true, hide_labels: hide_labels, size: size)) do |c|
+          c.with_item(label: "Preview", icon: (hide_labels ? :zap : nil), selected: true)
+          c.with_item(label: "Raw", icon: (hide_labels ? :zap : nil))
+          c.with_item(label: "Blame", icon: (hide_labels ? :zap : nil))
+        end
+      end
+
+      # @param full_width [Boolean] toggle
+      # @param size select [small, medium, large]
+      def icons_and_text(full_width: false, size: :medium)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, size: size)) 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)
+        end
+      end
+
+      # @param full_width [Boolean] toggle
+      # @param size select [small, medium, large]
+      def icons_only(full_width: false, size: :medium)
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: true, size: size)) 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)
+        end
+      end
+
+      def with_links_as_tags
+        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)
+        end
+      end
+    end
+  end
+end

data/previews/primer/alpha/tab_panels_preview.rb

@@ -4,6 +4,21 @@ module Primer
   module Alpha
     # @label TabPanels
     class TabPanelsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @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|
+          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}" }
+            end
+          end
+        end
+      end
+
       # @label Default options
       #
       # @param number_of_panels [Integer] number

data/previews/primer/alpha/text_field_preview.rb

@@ -4,6 +4,64 @@ module Primer
   module Alpha
     # @label TextField
     class TextFieldPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param name text
+      # @param id text
+      # @param label text
+      # @param visually_hide_label toggle
+      # @param size [Symbol] select [small, medium, large]
+      # @param show_clear_button toggle
+      # @param clear_button_id text
+      # @param full_width toggle
+      # @param disabled toggle
+      # @param invalid toggle
+      # @param placeholder text
+      # @param inset toggle
+      # @param monospace toggle
+      # @param leading_visual_icon text
+      def playground(
+        name: "my-text-field",
+        id: "my-text-field",
+        label: "My text field",
+        visually_hide_label: false,
+        size: Primer::Forms::Dsl::Input::DEFAULT_SIZE.to_s,
+        show_clear_button: false,
+        clear_button_id: "my-text-field-clear-button",
+        full_width: false,
+        disabled: false,
+        invalid: false,
+        placeholder: nil,
+        inset: false,
+        monospace: false,
+        leading_visual_icon: nil
+      )
+        system_arguments = {
+          name: name,
+          id: id,
+          label: label,
+          visually_hide_label: visually_hide_label,
+          size: size,
+          show_clear_button: show_clear_button,
+          clear_button_id: clear_button_id,
+          full_width: full_width,
+          disabled: disabled,
+          invalid: invalid,
+          placeholder: placeholder,
+          inset: inset,
+          monospace: monospace
+        }
+
+        if leading_visual_icon
+          system_arguments[:leading_visual] = {
+            icon: leading_visual_icon,
+            size: :small
+          }
+        end
+
+        render(Primer::Alpha::TextField.new(**system_arguments))
+      end
+
       # @label Default
       #
       # @param name text

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -6,6 +6,10 @@ module Primer
     class ToggleSwitchPreview < ViewComponent::Preview
       include ActionView::Helpers::FormTagHelper
 
+      def playground
+        render(ToggleSwitch.new(src: "/toggle_switch"))
+      end
+
       def default
         render(ToggleSwitch.new(src: "/toggle_switch"))
       end

data/previews/primer/alpha/tooltip_preview.rb

@@ -4,6 +4,16 @@ module Primer
   module Alpha
     # @label Tooltip
     class TooltipPreview < ViewComponent::Preview
+      # @param type [Symbol] select [["Description", description], ["Label", label]]
+      # @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)
+          "Button"
+        end
+      end
+
       # @param type [Symbol] select [["Description", description], ["Label", label]]
       # @param direction select [s, n, e, w, ne, nw, se, sw]
       # @param tooltip_text text
@@ -65,9 +75,9 @@ module Primer
         end
       end
 
-      # @label Tooltip with Primer::LinkComponent
+      # @label Tooltip with Primer::Beta::Link
       def tooltip_with_link(type: :description, direction: :s, tooltip_text: "Tooltip text")
-        render(Primer::LinkComponent.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |c|
+        render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |c|
           c.tooltip(text: tooltip_text, type: type, direction: direction)
           "Button"
         end
@@ -75,7 +85,7 @@ module Primer
 
       # @label Tooltip with Primer::IconButton
       def tooltip_with_icon_button(direction: :s, tooltip_text: "Tooltip text")
-        render(Primer::IconButton.new(icon: :search, "aria-label": tooltip_text, tooltip_direction: direction))
+        render(Primer::Beta::IconButton.new(icon: :search, "aria-label": tooltip_text, tooltip_direction: direction))
       end
       # @!endgroup
     end

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

@@ -0,0 +1,8 @@
+<%= 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?) { "Item #{i + 1}" } %>
+  <% end %>
+  <% component.with_actions do %>
+    <%= render(Primer::ButtonComponent.new) { "Button" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/underline_nav_preview.rb

@@ -4,6 +4,21 @@ module Primer
   module Alpha
     # @label UnderlineNav
     class UnderlineNavPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param label [String] text
+      # @param tag [Symbol] select [div, nav]
+      # @param align [Symbol] select [left, right]
+      # @param number_of_panels [Integer] number
+      def playground(label: "Default with nav element", tag: :nav, align: :left, number_of_panels: 3)
+        render_with_template(locals: {
+                               label: label,
+                               tag: tag,
+                               align: align,
+                               number_of_panels: number_of_panels
+                             })
+      end
+
       # @label Default options
       #
       # @param label [String] text

data/previews/primer/alpha/underline_panels_preview.rb

@@ -4,6 +4,21 @@ module Primer
   module Alpha
     # @label UnderlinePanels
     class UnderlinePanelsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @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|
+          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}" }
+            end
+          end
+        end
+      end
+
       # @label Default options
       #
       # @param number_of_panels [Integer] number

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

@@ -0,0 +1,9 @@
+<%= render(
+        Primer::Beta::AutoComplete::Item.new(
+            selected: selected,
+            disabled: disabled,
+            value: ''
+    )) do |c| %>
+        <% c.leading_visual_icon(icon: :search) %>
+        Label text
+<% end %>

data/previews/primer/beta/auto_complete_item_preview.rb

@@ -4,6 +4,20 @@ module Primer
   module Beta
     # @label AutoCompleteItem
     class AutoCompleteItemPreview < ViewComponent::Preview
+      # @label Playground
+      # @param selected toggle
+      # @param disabled toggle
+      # @param value text
+      def playground(value: "", selected: false, disabled: false)
+        render_with_template(
+          locals: {
+            selected: selected,
+            disabled: disabled,
+            value: value
+          }
+        )
+      end
+
       # @label Default
       # @param selected toggle
       # @param disabled toggle

data/previews/primer/beta/auto_complete_preview.rb

@@ -4,6 +4,26 @@ module Primer
   module Beta
     # @label AutoComplete
     class AutoCompletePreview < ViewComponent::Preview
+      # @label Playground
+      # @param label_text text
+      # @param show_clear_button toggle
+      # @param visually_hide_label toggle
+      # @param placeholder text
+      # @param size select [small, medium, large]
+      # @param full_width toggle
+      # @param disabled toggle
+      # @param invalid toggle
+      # @param input_id text
+      # @param list_id text
+      # @param input_name text
+      # @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|
+          c.leading_visual_icon(icon: :search)
+        end
+      end
+
       # @label Default
       # @param label_text text
       # @param show_clear_button toggle

data/previews/primer/beta/avatar_preview.rb

@@ -4,6 +4,15 @@ module Primer
   module Beta
     # @label Avatar
     class AvatarPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80]
+      # @param shape [Symbol] select [circle, square]
+      # @param href [String] text
+      def playground(size: 24, shape: :circle, href: nil)
+        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
+      end
+
       # @label Default options
       #
       # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80]

data/previews/primer/beta/avatar_stack_preview.rb

@@ -4,6 +4,21 @@ module Primer
   module Beta
     # @label AvatarStack
     class AvatarStackPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_avatars [Integer] number
+      # @param tag select [["div", div], ["span", span]]
+      # @param align select [["Left", left], ["Right", right]]
+      # @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|
+          Array.new(number_of_avatars || 1) do
+            c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          end
+        end
+      end
+
       # @label Default options
       #
       # @param number_of_avatars [Integer] number

data/previews/primer/beta/base_button_preview.rb

@@ -4,6 +4,15 @@ module Primer
   module Beta
     # @label BaseButton
     class BaseButtonPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param type [Symbol] select [button, submit]
+      # @param tag [Symbol] select [button, a, summary]
+      # @param block [Boolean] toggle
+      def playground(tag: :button, block: false, type: :button)
+        render(Primer::Beta::BaseButton.new(tag: tag, block: block, type: type)) { "Button" }
+      end
+
       # @label Default options
       #
       # @param type [Symbol] select [button, submit]

data/previews/primer/beta/blankslate_preview.rb

@@ -4,6 +4,18 @@ module Primer
   module Beta
     # @label Blankslate
     class BlankslatePreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param narrow [Boolean] toggle
+      # @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" }
+        end
+      end
+
       # @label Default options
       #
       # @param narrow [Boolean] toggle

data/previews/primer/beta/border_box_preview.rb

@@ -4,6 +4,20 @@ module Primer
   module Beta
     # @label BorderBox
     class BorderBoxPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param padding [Symbol] select [default, condensed]
+      def playground(padding: :default)
+        render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
+          component.header { "Header" }
+          component.body { "Body" }
+          component.row { "Row one" }
+          component.row { "Row two" }
+          component.row { "Row three" }
+          component.footer { "Footer" }
+        end
+      end
+
       # @label Default options
       #
       # @param padding [Symbol] select [default, condensed]

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -4,6 +4,17 @@ module Primer
   module Beta
     # @label Breadcrumbs
     class BreadcrumbsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_links [Integer] number
+      def playground(number_of_links: 2)
+        render(Primer::Beta::Breadcrumbs.new) do |component|
+          Array.new(number_of_links || 3) do |i|
+            component.item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
+          end
+        end
+      end
+
       # @label Default options
       #
       # @param number_of_links [Integer] number

data/previews/primer/beta/button_group_preview.rb

@@ -4,6 +4,18 @@ module Primer
   module Beta
     # @label ButtonGroup
     class ButtonGroupPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Symbol] select [medium, small]
+      def playground(size: :medium)
+        render(Primer::Beta::ButtonGroup.new(size: size)) do |c|
+          c.button { "Button" }
+          c.button(scheme: :primary) { "Primary" }
+          c.button(scheme: :danger) { "Danger" }
+          c.button(scheme: :outline) { "Outline" }
+        end
+      end
+
       # @label Default options
       #
       # @param size [Symbol] select [medium, small]

data/previews/primer/beta/close_button_preview.rb

@@ -4,6 +4,13 @@ module Primer
   module Beta
     # @label CloseButton
     class CloseButtonPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param type [Symbol] select [button, submit]
+      def playground(type: :button)
+        render(Primer::Beta::CloseButton.new(type: type))
+      end
+
       # @label Default options
       #
       # @param type [Symbol] select [button, submit]

data/previews/primer/beta/counter_preview.rb

@@ -4,6 +4,17 @@ module Primer
   module Beta
     # @label Counter
     class CounterPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param count number
+      # @param limit number
+      # @param hide_if_zero toggle
+      # @param round toggle
+      # @param scheme [Symbol] select [[Default, default], [Primary, primary], [Secondary, secondary]]]
+      def playground(count: 1_000, limit: nil, round: false, hide_if_zero: false, scheme: :default)
+        render(Primer::Beta::Counter.new(count: count, round: round, limit: limit, hide_if_zero: hide_if_zero, scheme: scheme))
+      end
+
       # @label Default Options
       #
       # @param count number