primer_view_components 0.0.97 → 0.0.98

data/previews/primer/beta/auto_complete_item_preview.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label AutoCompleteItem
+    class AutoCompleteItemPreview < ViewComponent::Preview
+      # @label Default
+      # @param selected toggle
+      # @param disabled toggle
+      # @param value text
+      def default(value: "", selected: false, disabled: false)
+        render_with_template(
+          locals: {
+            selected: selected,
+            disabled: disabled,
+            value: value
+          }
+        )
+      end
+
+      # @label WithDescription
+      # @param description_variant select [block, inline]
+      # @param selected toggle
+      # @param disabled toggle
+      # @param value text
+      def with_description(description_variant: "block", value: "", selected: false, disabled: false)
+        description_variant = description_variant.to_sym
+
+        render_with_template(
+          locals: {
+            description_variant: description_variant,
+            selected: selected,
+            disabled: disabled,
+            value: value
+          }
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<div class="d-flex flex-items-start flex-column flex-sm-row flex-sm-items-end" style="gap: .5rem">
+    <%= 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| %>
+        <% c.leading_visual_icon(icon: :search) %>
+    <% end %>
+    <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
+</div>

data/previews/primer/beta/auto_complete_preview.rb

@@ -0,0 +1,245 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label AutoComplete
+    class AutoCompletePreview < ViewComponent::Preview
+      # @label Default
+      # @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 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|
+          c.leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @label With submit button
+      # @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
+      def with_submit_button(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_with_template(locals: {
+                               label_text: label_text,
+                               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_id: input_id,
+                               list_id: list_id,
+                               input_name: input_name
+                             })
+      end
+
+      # @label Leading visual
+      # @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
+      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|
+          c.leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @label Trailing action
+      # @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
+      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))
+      end
+
+      # @label Full width
+      # @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
+      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|
+          c.leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @label Visually hide label
+      # @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
+      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|
+          c.leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @!group Sizes
+
+      # @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
+      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|
+          c.leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @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
+      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|
+          c.leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @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
+      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|
+          c.leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @!endgroup
+
+      # @label Leading visual in results
+      # @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
+      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))
+      end
+
+      # @label Trailing visual in results
+      # @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
+      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))
+      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))
+      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|
+          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))
+      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))
+      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))
+      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))
+      end
+    end
+  end
+end

data/previews/primer/beta/avatar_preview.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Avatar
+    class AvatarPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80]
+      # @param shape [Symbol] select [circle, square]
+      # @param href [String] text
+      def default(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
+    end
+  end
+end

data/previews/primer/beta/avatar_stack_preview.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label AvatarStack
+    class AvatarStackPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @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 default(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
+
+      # @!group More Examples
+
+      # @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")
+        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")
+        end
+      end
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/base_button_preview.rb

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

data/previews/primer/beta/blankslate_preview.rb

@@ -0,0 +1,94 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Blankslate
+    class BlankslatePreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      def default(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
+
+      # @param narrow [Boolean] toggle
+      # @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")
+        end
+      end
+
+      # @param narrow [Boolean] toggle
+      # @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")
+        end
+      end
+
+      # @param narrow [Boolean] toggle
+      # @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)
+        end
+      end
+
+      # @param narrow [Boolean] toggle
+      # @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" }
+        end
+      end
+
+      # @param narrow [Boolean] toggle
+      # @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")
+        end
+      end
+
+      # @param narrow [Boolean] toggle
+      # @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")
+        end
+      end
+
+      # @param narrow [Boolean] toggle
+      # @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")
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/border_box_preview.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label BorderBox
+    class BorderBoxPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param padding [Symbol] select [default, condensed]
+      def default(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 Row schemes
+      #
+      # @param padding [Symbol] select [default, condensed]
+      # @param scheme [Symbol] select [default, neutral, info, warning]
+      def row_schemes(padding: :default, scheme: :default)
+        render(Primer::Beta::BorderBox.new(padding: padding)) do |component|
+          component.row(scheme: scheme) { "#{scheme.to_s.capitalize} scheme" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label Breadcrumbs
+    class BreadcrumbsPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param number_of_links [Integer] number
+      def default(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
+    end
+  end
+end

data/previews/primer/beta/button_group_preview.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label ButtonGroup
+    class ButtonGroupPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param size [Symbol] select [medium, small]
+      def default(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
+    end
+  end
+end

data/previews/primer/beta/button_preview/all_schemes.html.erb

@@ -0,0 +1,26 @@
+<div style="display: flex; gap: 1rem;">
+  <%= render(Primer::Beta::Button.new(
+      scheme: :secondary,
+      size: :medium,
+  )) do |c| %>
+    Button
+  <% end %>
+  <%= render(Primer::Beta::Button.new(
+      scheme: :primary,
+      size: :medium,
+  )) do |c| %>
+    Button
+  <% end %>
+  <%= render(Primer::Beta::Button.new(
+      scheme: :invisible,
+      size: :medium,
+  )) do |c| %>
+    Button
+  <% end %>
+  <%= render(Primer::Beta::Button.new(
+      scheme: :danger,
+      size: :medium,
+  )) do |c| %>
+    Button
+  <% end %>
+</div>

data/previews/primer/beta/button_preview/leading_visual.html.erb

@@ -0,0 +1,10 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |c| %>
+  <% c.leading_visual_icon(icon: :search) %>
+  Button
+<% end %>

data/previews/primer/beta/button_preview/trailing_action.html.erb

@@ -0,0 +1,10 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: :default,
+    size: :medium,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |c| %>
+  <% c.trailing_action_icon(icon: "triangle-down") %>
+  Button
+<% end %>

data/previews/primer/beta/button_preview/trailing_visual.html.erb

@@ -0,0 +1,11 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content,
+    tag: tag
+)) do |c| %>
+  <% c.trailing_visual_counter(count: "15") %>
+  Button
+<% end %>

data/previews/primer/beta/button_preview/with_tooltip.html.erb

@@ -0,0 +1,10 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: scheme,
+    size: size,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |c| %>
+  <% c.with_tooltip(text: "Tooltip text") %>
+  Button
+<% end %>