openproject-primer_view_components 0.6.3

data/previews/primer/beta/auto_complete_preview.rb

@@ -0,0 +1,287 @@
+# frozen_string_literal: true
+
+require_relative "../url_helpers"
+
+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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |component|
+          component.with_leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |component|
+          component.with_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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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,
+                               width: width,
+                               disabled: disabled,
+                               invalid: invalid,
+                               input_id: input_id,
+                               list_id: list_id,
+                               input_name: input_name
+                             })
+      end
+
+      # @label Leading visual
+      # @snapshot
+      # @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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
+          component.with_leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @label Trailing action
+      # @snapshot
+      # @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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name))
+      end
+
+      # @label Full width
+      # @snapshot
+      # @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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
+          component.with_leading_visual_icon(icon: :search)
+        end
+      end
+
+      # @label Visually hide label
+      # @snapshot
+      # @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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
+          component.with_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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @param disabled toggle
+      # @param invalid toggle
+      # @param input_id text
+      # @param list_id text
+      # @param input_name text
+      # @snapshot
+      def small(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :small, full_width: false, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
+          component.with_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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @param disabled toggle
+      # @param invalid toggle
+      # @param input_id text
+      # @param list_id text
+      # @param input_name text
+      # @snapshot
+      def medium(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
+          component.with_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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @param disabled toggle
+      # @param invalid toggle
+      # @param input_id text
+      # @param list_id text
+      # @param input_name text
+      # @snapshot
+      def large(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :large, full_width: false, width: :auto, 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, width: width, disabled: disabled, invalid: invalid, input_name: input_name)) do |component|
+          component.with_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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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(visual: "leading"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: 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 width select [auto, small, medium, large, xlarge, xxlarge]
+      # @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, width: :auto, 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(visual: "trailing"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, width: 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: UrlHelpers.autocomplete_index_path, visually_hide_label: true))
+      end
+
+      # @hidden
+      def with_icon
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: UrlHelpers.autocomplete_index_path)) do |component|
+          component.with_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: UrlHelpers.autocomplete_index_path, show_clear_button: true))
+      end
+
+      # @hidden
+      def size_small
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: UrlHelpers.autocomplete_index_path, show_clear_button: false, size: :small))
+      end
+
+      # @hidden
+      def monospace
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: UrlHelpers.autocomplete_index_path, show_clear_button: false, monospace: true))
+      end
+
+      # @hidden
+      def inset
+        render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: UrlHelpers.autocomplete_index_path, show_clear_button: false, inset: true))
+      end
+    end
+  end
+end

data/previews/primer/beta/avatar_preview.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+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
+      # @snapshot
+      def default
+        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label As link
+      #
+      # @param href [String] text
+      def as_link(href: "#")
+        render(Primer::Beta::Avatar.new(href: href, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @!group Sizes
+      #
+      # @label 16px
+      # @snapshot
+      def size_16
+        render(Primer::Beta::Avatar.new(size: 16, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 20px
+      # @snapshot
+      def size_20
+        render(Primer::Beta::Avatar.new(size: 20, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 24px
+      # @snapshot
+      def size_24
+        render(Primer::Beta::Avatar.new(size: 24, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 32px
+      # @snapshot
+      def size_32
+        render(Primer::Beta::Avatar.new(size: 32, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 40px
+      # @snapshot
+      def size_40
+        render(Primer::Beta::Avatar.new(size: 40, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 48px
+      # @snapshot
+      def size_48
+        render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 80px
+      # @snapshot
+      def size_80
+        render(Primer::Beta::Avatar.new(size: 80, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
+
+      # @!group Shape
+      #
+      # @label Circle
+      # @snapshot
+      def shape_circle
+        render(Primer::Beta::Avatar.new(shape: :circle, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label Square
+      # @snapshot
+      def shape_square
+        render(Primer::Beta::Avatar.new(shape: :square, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/avatar_stack_preview.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+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 |component|
+          Array.new(number_of_avatars || 1) do
+            component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          end
+        end
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @!group Multiple avatars
+      #
+      # @label 1 avatar
+      def avatar_1
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 2 avatars
+      # @snapshot
+      def avatar_2
+        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
+      # @snapshot
+      def avatar_3
+        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 |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 |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
+      #
+      # @!endgroup
+
+      # @!group More options
+      #
+      # @label Align right
+      def align_right
+        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 |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
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/beta/base_button_preview.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+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
+      # @param disabled [Boolean]
+      def playground(tag: :button, block: false, type: :button, disabled: false)
+        render(Primer::Beta::BaseButton.new(tag: tag, block: block, type: type, disabled: disabled)) { "Button" }
+      end
+
+      # @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
+
+      # @label Disabled
+      #
+      def disabled
+        render(Primer::Beta::BaseButton.new(disabled: true)) { "Button" }
+      end
+    end
+  end
+end

data/previews/primer/beta/blankslate_preview.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+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 |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
+        end
+      end
+
+      # @label Default options
+      # @snapshot
+      def default
+        render Primer::Beta::Blankslate.new do |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
+        end
+      end
+
+      # @!group Options
+      #
+      # @label Narrow
+      def option_narrow
+        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 |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
+        end
+      end
+
+      # @label Border
+      # @snapshot
+      def option_border
+        render Primer::Beta::Blankslate.new(border: true) do |component|
+          component.with_heading(tag: :h2).with_content("Title")
+          component.with_description { "Description" }
+        end
+      end
+      #
+      # @!endgroup
+
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      # @snapshot
+      def with_icon(narrow: false, spacious: false, border: false)
+        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
+
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      # @snapshot
+      def with_image(narrow: false, spacious: false, border: false)
+        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
+
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      # @snapshot
+      def loading(narrow: false, spacious: false, border: false)
+        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
+
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      # @snapshot
+      def description(narrow: false, spacious: false, border: false)
+        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
+
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      # @snapshot
+      def primary_action(narrow: false, spacious: false, border: false)
+        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
+
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      # @snapshot
+      def secondary_action(narrow: false, spacious: false, border: false)
+        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
+
+      # @param narrow [Boolean] toggle
+      # @param spacious [Boolean] toggle
+      # @param border [Boolean] toggle
+      # @snapshot
+      def full(narrow: false, spacious: false, border: false)
+        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
+  end
+end