Adding testing around writing previews (#1507)

Co-authored-by: Katie Langerman <langermank@users.noreply.github.com>

.changeset/silent-feet-dress.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Adding lookbook and status to `static/arguments.json` file.

demo/Gemfile.lock

@@ -377,6 +377,7 @@ GEM
     zeitwerk (2.6.1)
 
 PLATFORMS
+  ruby
   x86_64-darwin-19
   x86_64-linux
 

lib/tasks/docs.rake

@@ -227,7 +227,9 @@ namespace :docs do
 
         component_args = {
           "component" => data[:title],
+          "status" => component.status.to_s,
           "source" => data[:source],
+          "lookbook" => data[:lookbook],
           "parameters" => args
         }
 

previews/primer/alpha/action_list_preview.rb

@@ -4,6 +4,35 @@ module Primer
   module Alpha
     # @label ActionList
     class ActionListPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param role text
+      # @param scheme [Symbol] select [full, inset]
+      # @param show_dividers toggle
+      def playground(
+        role: Primer::Alpha::ActionList::DEFAULT_ROLE,
+        scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Primer::Alpha::ActionList.new(
+                 role: role,
+                 scheme: scheme,
+                 show_dividers: show_dividers,
+                 aria: { label: "Action List" }
+               )) do |c|
+          c.with_heading(title: "Action List")
+          c.with_item(label: "Item one", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+          c.with_item(label: "Item two", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :star)
+          end
+          c.with_item(label: "Item three", href: "/") do |item|
+            item.with_leading_visual_icon(icon: :heart)
+          end
+        end
+      end
+
       # @label Default
       #
       # @param role text

previews/primer/alpha/auto_complete_preview.rb

@@ -4,6 +4,16 @@ module Primer
   module Alpha
     # @label AutoComplete
     class AutoCompletePreview < ViewComponent::Preview
+      # @label Playground
+      # @param label_text text
+      # @param is_label_visible toggle
+      # @param is_label_inline toggle
+      # @param with_icon toggle
+      # @param is_clearable toggle
+      def playground(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
+
       # @label Default Options
       # @param label_text text
       # @param is_label_visible toggle

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]

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 @@ def custom_header(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog
                                show_divider: show_divider
                              })
       end
-      
+
       # @label Nested dialog
       #
       # @param title [String] text

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

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]

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|

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

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

previews/primer/alpha/toggle_switch_preview.rb

@@ -6,6 +6,10 @@ module Alpha
     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

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

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

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 %>

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

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