primer_view_components 0.0.97 → 0.0.98

data/previews/primer/alpha/auto_complete_preview.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label AutoComplete
+    class AutoCompletePreview < ViewComponent::Preview
+      # @label Default Options
+      # @param label_text text
+      # @param is_label_visible toggle
+      # @param is_label_inline toggle
+      # @param with_icon toggle
+      # @param is_clearable toggle
+      def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
+        render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
+      end
+
+      # @!group More examples
+
+      # @label AutoComplete with non-visible label
+      def with_non_visible_label
+        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-1", list_id: "test-id-1", src: "/auto_complete?version=alpha", is_label_visible: false))
+      end
+
+      # @label AutoComplete with inline label
+      def with_inline_label
+        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "test-id-2", src: "/auto_complete?version=alpha", is_label_inline: true))
+      end
+
+      # @label AutoComplete with search icon
+      def with_icon
+        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-3", list_id: "test-id-3", src: "/auto_complete?version=alpha", with_icon: true))
+      end
+
+      # @label AutoComplete with clear button
+      def with_clear_button
+        render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-4", list_id: "test-id-4", src: "/auto_complete?version=alpha", is_clearable: true))
+      end
+
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/button_marketing_preview.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label ButtonMarketing
+    class ButtonMarketingPreview < ViewComponent::Preview
+      # @label Default options
+      # @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 default(tag: :button, type: :button, scheme: :default, variant: :default)
+        render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
+      end
+    end
+  end
+end

data/previews/primer/alpha/dialog_preview/custom_header.html.erb

@@ -0,0 +1,7 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
+  <% d.header(show_divider: show_divider) do %>
+    <button class="btn">Custom Header Controls</button>
+  <% end %>
+  <% d.show_button { button_text } %>
+  <% d.body { "Hello World" } %>
+<% end %>

data/previews/primer/alpha/dialog_preview/test.html.erb

@@ -0,0 +1,7 @@
+<%= render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle)) do |d| %>
+  <% d.show_button { @button_text } %>
+  <% d.body { "Content" } %>
+  <% d.footer do %>
+    render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" }
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview/with_footer.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
+  <% d.show_button { button_text } %>
+  <% d.body { "Content" } %>
+  <% d.footer(show_divider: show_divider) do %>
+    <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
+    <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview/with_form.html.erb

@@ -0,0 +1,12 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
+  <% d.show_button { button_text } %>
+  <form class="pt-3">
+    <%= render(Primer::Alpha::Dialog::Body.new) do %>
+      This is a custom dialog with the body and footer wrapped in a form tag.
+    <% end %>
+    <%= render(Primer::Alpha::Dialog::Footer.new(show_divider: show_divider)) do %>
+      <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
+      <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
+    <% end %>
+  </form>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Dialog
+    class DialogPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @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 default(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 Long text
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [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]
+      def long_text(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", position: :center, position_narrow: :fullscreen)
+        render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow)) do |d|
+          d.with_show_button { button_text }
+          d.with_body { "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" }
+        end
+      end
+
+      # @label With Footer
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def with_footer(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
+
+      # @label With a Form
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def with_form(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
+
+      # @label Custom Header
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def custom_header(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
+    end
+  end
+end

data/previews/primer/alpha/hidden_text_expander_preview.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label HiddenTextExpander
+    class HiddenTextExpanderPreview < ViewComponent::Preview
+      # @label Default options
+      # @param label [String] text
+      # @param inline [Boolean] toggle
+      def default(label: "No effect", inline: false)
+        render(Primer::Alpha::HiddenTextExpander.new(inline: inline, "aria-label": label))
+      end
+    end
+  end
+end

data/previews/primer/alpha/layout_preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Layout
+    class LayoutPreview < ViewComponent::Preview
+      # @label Default options
+      # @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 default(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
+    end
+  end
+end

data/previews/primer/alpha/nav_list_preview.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label NavList
+    class NavListPreview < ViewComponent::Preview
+      # @label Default
+      def default
+        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 Show more item
+      def show_more_item
+        render(Primer::Alpha::NavList.new) do |list|
+          list.with_section(aria: { label: "List of foods" }) do |section|
+            section.with_heading(title: "My favorite foods")
+            section.with_item(label: "Popplers", href: "/foods/popplers")
+            section.with_item(label: "Slurm", href: "/foods/slurm")
+            section.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
+          end
+        end
+      end
+
+      # @label Trailing action
+      def trailing_action
+        render(Primer::Alpha::NavList.new) do |list|
+          list.with_section(aria: { label: "List of items to buy" }) do |section|
+            section.with_heading(title: "Shopping list")
+            section.with_item(label: "Bread", href: "/list/1") do |item|
+              item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Button tooltip" })
+            end
+            section.with_item(label: "Cheese", href: "/list/2") do |item|
+              item.with_trailing_action(icon: :plus, aria: { label: "Button tooltip" })
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/alpha/tab_panels_preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label TabPanels
+    class TabPanelsPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param number_of_panels [Integer] number
+      # @param align [Symbol] select [left, right]
+      def default(number_of_panels: 3, align: :left)
+        render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |c|
+          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
+    end
+  end
+end

data/previews/primer/alpha/text_field_preview.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label TextField
+    class TextFieldPreview < ViewComponent::Preview
+      # @label Default
+      #
+      # @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 default(
+        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
+    end
+  end
+end

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label Toggle Switch
+    class ToggleSwitchPreview < ViewComponent::Preview
+      include ActionView::Helpers::FormTagHelper
+
+      def default
+        render(ToggleSwitch.new(src: "/toggle_switch"))
+      end
+
+      def checked
+        render(ToggleSwitch.new(src: "/toggle_switch", checked: true))
+      end
+
+      def disabled
+        render(ToggleSwitch.new(src: "/toggle_switch", enabled: false))
+      end
+
+      def checked_disabled
+        render(ToggleSwitch.new(src: "/toggle_switch", checked: true, enabled: false))
+      end
+
+      def small
+        render(ToggleSwitch.new(src: "/toggle_switch", size: :small))
+      end
+
+      def with_status_label_position_end
+        render(ToggleSwitch.new(src: "/toggle_switch", status_label_position: :end))
+      end
+
+      def with_a_bad_src
+        render(ToggleSwitch.new(src: "/foo"))
+      end
+
+      def with_no_src
+        render(ToggleSwitch.new)
+      end
+
+      def with_csrf_token
+        render(ToggleSwitch.new(src: "/toggle_switch", csrf_token: "let_me_in"))
+      end
+
+      def with_bad_csrf_token
+        render(ToggleSwitch.new(src: "/toggle_switch", csrf_token: "i_am_a_criminal"))
+      end
+    end
+  end
+end

data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb

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

data/previews/primer/alpha/tooltip_preview/with_right_most_position.html.erb

@@ -0,0 +1,7 @@
+<div>
+  <p>There should be no horizontal overflow and scrollbar caused by tooltip (assuming there is at least 1px of padding to the right of where the associated control is placed).</p>
+  <div style="float: right;">
+    <button id="some-button">Button with tooltip positioned to right of the page</button>
+    <%= render(Primer::Alpha::Tooltip.new(for_id: "some-button", type: type, text: tooltip_text, direction: direction)) %>
+  </div>
+</div>

data/previews/primer/alpha/tooltip_preview.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+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 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)
+          "Button"
+        end
+      end
+
+      # @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)
+          "Button"
+        end
+      end
+
+      # @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)
+          "Button"
+        end
+      end
+
+      # @param direction select [s, n, e, w, ne, nw, se, sw]
+      # @param tooltip_text text
+      def with_right_most_position(type: :description, direction: :s, tooltip_text: "A tooltip with very very very very long description that is not very concise...")
+        render_with_template(
+          locals: {
+            type: type,
+            direction: direction,
+            tooltip_text: tooltip_text
+          }
+        )
+      end
+
+      # @param direction select [s, n, e, w, ne, nw, se, sw]
+      # @param tooltip_text text
+      def with_multiple_on_a_page(type: :description, direction: :s, tooltip_text: "Tooltip text")
+        render_with_template(
+          locals: {
+            type: type,
+            direction: direction,
+            tooltip_text: tooltip_text
+          }
+        )
+      end
+
+      # @!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)
+          "Button"
+        end
+      end
+
+      # @label Tooltip with Primer::LinkComponent
+      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|
+          c.tooltip(text: tooltip_text, type: type, direction: direction)
+          "Button"
+        end
+      end
+
+      # @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))
+      end
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/underline_nav_preview/default.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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label UnderlineNav
+    class UnderlineNavPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @param label [String] text
+      # @param tag [Symbol] select [div, nav]
+      # @param align [Symbol] select [left, right]
+      # @param number_of_panels [Integer] number
+      def default(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 With icons and counters
+      #
+      # @param label [String] text
+      # @param tag [Symbol] select [div, nav]
+      # @param align [Symbol] select [left, right]
+      # @param number_of_panels [Integer] number
+      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: rand(1..10))
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/previews/primer/alpha/underline_panels_preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label UnderlinePanels
+    class UnderlinePanelsPreview < ViewComponent::Preview
+      # @label Default options
+      #
+      # @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|
+          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
+    end
+  end
+end

data/previews/primer/beta/auto_complete_item_preview/default.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/with_description.html.erb

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