From 16ecd00e6022c5fb7607f278a014537d77ce84ff Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 19 Oct 2022 15:59:18 -0700 Subject: [PATCH] Adding testing around writing previews (#1507) Co-authored-by: Katie Langerman --- .changeset/silent-feet-dress.md | 5 + demo/Gemfile.lock | 1 + demo/package-lock.json | 1 + lib/tasks/docs.rake | 2 + previews/primer/alpha/action_list_preview.rb | 29 + .../primer/alpha/auto_complete_preview.rb | 10 + .../primer/alpha/button_marketing_preview.rb | 9 + previews/primer/alpha/dialog_preview.rb | 19 +- .../alpha/hidden_text_expander_preview.rb | 7 + previews/primer/alpha/layout_preview.rb | 15 + previews/primer/alpha/nav_list_preview.rb | 29 + previews/primer/alpha/tab_panels_preview.rb | 15 + previews/primer/alpha/text_field_preview.rb | 58 ++ .../primer/alpha/toggle_switch_preview.rb | 4 + previews/primer/alpha/tooltip_preview.rb | 10 + .../primer/alpha/underline_nav_preview.rb | 15 + .../underline_nav_preview/playground.html.erb | 8 + .../primer/alpha/underline_panels_preview.rb | 15 + .../primer/beta/auto_complete_item_preview.rb | 14 + .../playground.html.erb | 9 + previews/primer/beta/auto_complete_preview.rb | 20 + previews/primer/beta/avatar_preview.rb | 9 + previews/primer/beta/avatar_stack_preview.rb | 15 + previews/primer/beta/base_button_preview.rb | 9 + previews/primer/beta/blankslate_preview.rb | 12 + previews/primer/beta/border_box_preview.rb | 14 + previews/primer/beta/breadcrumbs_preview.rb | 11 + previews/primer/beta/button_group_preview.rb | 12 + previews/primer/beta/close_button_preview.rb | 7 + previews/primer/beta/counter_preview.rb | 11 + previews/primer/beta/details_preview.rb | 15 + previews/primer/beta/flash_preview.rb | 12 + previews/primer/beta/heading_preview.rb | 8 + previews/primer/beta/text_preview.rb | 8 + previews/primer/beta/truncate_preview.rb | 7 + previews/primer/clipboard_copy_preview.rb | 8 + previews/primer/dropdown_preview.rb | 18 + previews/primer/hellip_button_preview.rb | 8 + previews/primer/image_crop_preview.rb | 7 + previews/primer/label_component_preview.rb | 9 + previews/primer/layout_component_preview.rb | 14 +- previews/primer/link_component_preview.rb | 12 +- .../primer/local_time_component_preview.rb | 13 + previews/primer/markdown_preview.rb | 543 +++++++++--------- previews/primer/menu_component_preview.rb | 5 +- .../playground.html.erb | 17 + previews/primer/octicon_component_preview.rb | 8 + previews/primer/popover_component_preview.rb | 16 +- .../primer/progress_bar_component_preview.rb | 13 +- previews/primer/spinner_component_preview.rb | 7 + previews/primer/state_component_preview.rb | 12 +- previews/primer/subhead_component_preview.rb | 17 + previews/primer/time_ago_component_preview.rb | 8 + .../primer/timeline_item_component_preview.rb | 13 +- static/arguments.json | 130 +++++ templates/preview.tt | 38 +- test/components/preview_test.rb | 27 +- 57 files changed, 1094 insertions(+), 294 deletions(-) create mode 100644 .changeset/silent-feet-dress.md create mode 100644 previews/primer/alpha/underline_nav_preview/playground.html.erb create mode 100644 previews/primer/beta/auto_complete_item_preview/playground.html.erb create mode 100644 previews/primer/menu_component_preview/playground.html.erb diff --git a/.changeset/silent-feet-dress.md b/.changeset/silent-feet-dress.md new file mode 100644 index 0000000000..63a2f7d8b5 --- /dev/null +++ b/.changeset/silent-feet-dress.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": patch +--- + +Adding lookbook and status to `static/arguments.json` file. diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock index 6c3b91a937..8e98a0f3e6 100644 --- a/demo/Gemfile.lock +++ b/demo/Gemfile.lock @@ -377,6 +377,7 @@ GEM zeitwerk (2.6.1) PLATFORMS + ruby x86_64-darwin-19 x86_64-linux diff --git a/demo/package-lock.json b/demo/package-lock.json index 7439ab93d6..a31922700d 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "demo", "version": "0.1.0", "hasInstallScript": true, "dependencies": { diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index 770ab869bc..c287f5b727 100644 --- a/lib/tasks/docs.rake +++ b/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 } diff --git a/previews/primer/alpha/action_list_preview.rb b/previews/primer/alpha/action_list_preview.rb index fb3abedbfc..c4ff73123e 100644 --- a/previews/primer/alpha/action_list_preview.rb +++ b/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 diff --git a/previews/primer/alpha/auto_complete_preview.rb b/previews/primer/alpha/auto_complete_preview.rb index c227207d8f..8b8f9dbb2f 100644 --- a/previews/primer/alpha/auto_complete_preview.rb +++ b/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 diff --git a/previews/primer/alpha/button_marketing_preview.rb b/previews/primer/alpha/button_marketing_preview.rb index ca4c719fa4..c9c5a1c35c 100644 --- a/previews/primer/alpha/button_marketing_preview.rb +++ b/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] diff --git a/previews/primer/alpha/dialog_preview.rb b/previews/primer/alpha/dialog_preview.rb index 327db7bbd1..2ee21de027 100644 --- a/previews/primer/alpha/dialog_preview.rb +++ b/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 diff --git a/previews/primer/alpha/hidden_text_expander_preview.rb b/previews/primer/alpha/hidden_text_expander_preview.rb index 9e58ef61b5..3d02138407 100644 --- a/previews/primer/alpha/hidden_text_expander_preview.rb +++ b/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 diff --git a/previews/primer/alpha/layout_preview.rb b/previews/primer/alpha/layout_preview.rb index 0c62dd0081..67691788bb 100644 --- a/previews/primer/alpha/layout_preview.rb +++ b/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] diff --git a/previews/primer/alpha/nav_list_preview.rb b/previews/primer/alpha/nav_list_preview.rb index 2dd70c5255..820aff5fe5 100644 --- a/previews/primer/alpha/nav_list_preview.rb +++ b/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| diff --git a/previews/primer/alpha/tab_panels_preview.rb b/previews/primer/alpha/tab_panels_preview.rb index b636a33721..dab7d69e29 100644 --- a/previews/primer/alpha/tab_panels_preview.rb +++ b/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 diff --git a/previews/primer/alpha/text_field_preview.rb b/previews/primer/alpha/text_field_preview.rb index d887416253..52bbe61800 100644 --- a/previews/primer/alpha/text_field_preview.rb +++ b/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 diff --git a/previews/primer/alpha/toggle_switch_preview.rb b/previews/primer/alpha/toggle_switch_preview.rb index 70b1b50e47..ad988d8130 100644 --- a/previews/primer/alpha/toggle_switch_preview.rb +++ b/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 diff --git a/previews/primer/alpha/tooltip_preview.rb b/previews/primer/alpha/tooltip_preview.rb index 3549c7b8f4..7336f32b87 100644 --- a/previews/primer/alpha/tooltip_preview.rb +++ b/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 diff --git a/previews/primer/alpha/underline_nav_preview.rb b/previews/primer/alpha/underline_nav_preview.rb index f8afcfbd15..e3e329ade5 100644 --- a/previews/primer/alpha/underline_nav_preview.rb +++ b/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 diff --git a/previews/primer/alpha/underline_nav_preview/playground.html.erb b/previews/primer/alpha/underline_nav_preview/playground.html.erb new file mode 100644 index 0000000000..eda3143c83 --- /dev/null +++ b/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 %> diff --git a/previews/primer/alpha/underline_panels_preview.rb b/previews/primer/alpha/underline_panels_preview.rb index 09f9a695f1..3f479508a3 100644 --- a/previews/primer/alpha/underline_panels_preview.rb +++ b/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 diff --git a/previews/primer/beta/auto_complete_item_preview.rb b/previews/primer/beta/auto_complete_item_preview.rb index 341235ebd2..068864fb51 100644 --- a/previews/primer/beta/auto_complete_item_preview.rb +++ b/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 diff --git a/previews/primer/beta/auto_complete_item_preview/playground.html.erb b/previews/primer/beta/auto_complete_item_preview/playground.html.erb new file mode 100644 index 0000000000..cc662c2ef3 --- /dev/null +++ b/previews/primer/beta/auto_complete_item_preview/playground.html.erb @@ -0,0 +1,9 @@ +<%= render( + Primer::Beta::AutoComplete::Item.new( + selected: selected, + disabled: disabled, + value: '' + )) do |c| %> + <% c.leading_visual_icon(icon: :search) %> + Label text +<% end %> diff --git a/previews/primer/beta/auto_complete_preview.rb b/previews/primer/beta/auto_complete_preview.rb index cbc81b902c..bea0d2aaa2 100644 --- a/previews/primer/beta/auto_complete_preview.rb +++ b/previews/primer/beta/auto_complete_preview.rb @@ -4,6 +4,26 @@ module Primer module Beta # @label AutoComplete class AutoCompletePreview < ViewComponent::Preview + # @label Playground + # @param label_text text + # @param show_clear_button toggle + # @param visually_hide_label toggle + # @param placeholder text + # @param size select [small, medium, large] + # @param full_width toggle + # @param disabled toggle + # @param invalid toggle + # @param input_id text + # @param list_id text + # @param input_name text + # @param inset toggle + # @param monospace toggle + def playground(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false) + render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c| + c.leading_visual_icon(icon: :search) + end + end + # @label Default # @param label_text text # @param show_clear_button toggle diff --git a/previews/primer/beta/avatar_preview.rb b/previews/primer/beta/avatar_preview.rb index 259e003cc1..3f87ae3968 100644 --- a/previews/primer/beta/avatar_preview.rb +++ b/previews/primer/beta/avatar_preview.rb @@ -4,6 +4,15 @@ module Primer module Beta # @label Avatar class AvatarPreview < ViewComponent::Preview + # @label Playground + # + # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80] + # @param shape [Symbol] select [circle, square] + # @param href [String] text + def playground(size: 24, shape: :circle, href: nil) + render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href)) + end + # @label Default options # # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80] diff --git a/previews/primer/beta/avatar_stack_preview.rb b/previews/primer/beta/avatar_stack_preview.rb index 3be119a96f..47b72efa16 100644 --- a/previews/primer/beta/avatar_stack_preview.rb +++ b/previews/primer/beta/avatar_stack_preview.rb @@ -4,6 +4,21 @@ module Primer module Beta # @label AvatarStack class AvatarStackPreview < ViewComponent::Preview + # @label Playground + # + # @param number_of_avatars [Integer] number + # @param tag select [["div", div], ["span", span]] + # @param align select [["Left", left], ["Right", right]] + # @param tooltipped toggle + # @param tooltip_label text + def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!") + render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |c| + Array.new(number_of_avatars || 1) do + c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") + end + end + end + # @label Default options # # @param number_of_avatars [Integer] number diff --git a/previews/primer/beta/base_button_preview.rb b/previews/primer/beta/base_button_preview.rb index b1555240ba..9749056f90 100644 --- a/previews/primer/beta/base_button_preview.rb +++ b/previews/primer/beta/base_button_preview.rb @@ -4,6 +4,15 @@ module Primer module Beta # @label BaseButton class BaseButtonPreview < ViewComponent::Preview + # @label Playground + # + # @param type [Symbol] select [button, submit] + # @param tag [Symbol] select [button, a, summary] + # @param block [Boolean] toggle + def playground(tag: :button, block: false, type: :button) + render(Primer::Beta::BaseButton.new(tag: tag, block: block, type: type)) { "Button" } + end + # @label Default options # # @param type [Symbol] select [button, submit] diff --git a/previews/primer/beta/blankslate_preview.rb b/previews/primer/beta/blankslate_preview.rb index 43e76d5696..8aa4595918 100644 --- a/previews/primer/beta/blankslate_preview.rb +++ b/previews/primer/beta/blankslate_preview.rb @@ -4,6 +4,18 @@ module Primer module Beta # @label Blankslate class BlankslatePreview < ViewComponent::Preview + # @label Playground + # + # @param narrow [Boolean] toggle + # @param spacious [Boolean] toggle + # @param border [Boolean] toggle + def playground(narrow: false, spacious: false, border: false) + render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c| + c.heading(tag: :h2).with_content("Title") + c.description { "Description" } + end + end + # @label Default options # # @param narrow [Boolean] toggle diff --git a/previews/primer/beta/border_box_preview.rb b/previews/primer/beta/border_box_preview.rb index f2d11f36a8..4b0f757932 100644 --- a/previews/primer/beta/border_box_preview.rb +++ b/previews/primer/beta/border_box_preview.rb @@ -4,6 +4,20 @@ module Primer module Beta # @label BorderBox class BorderBoxPreview < ViewComponent::Preview + # @label Playground + # + # @param padding [Symbol] select [default, condensed] + def playground(padding: :default) + render(Primer::Beta::BorderBox.new(padding: padding)) do |component| + component.header { "Header" } + component.body { "Body" } + component.row { "Row one" } + component.row { "Row two" } + component.row { "Row three" } + component.footer { "Footer" } + end + end + # @label Default options # # @param padding [Symbol] select [default, condensed] diff --git a/previews/primer/beta/breadcrumbs_preview.rb b/previews/primer/beta/breadcrumbs_preview.rb index 49fd6dd2ad..1ae1f0e54e 100644 --- a/previews/primer/beta/breadcrumbs_preview.rb +++ b/previews/primer/beta/breadcrumbs_preview.rb @@ -4,6 +4,17 @@ module Primer module Beta # @label Breadcrumbs class BreadcrumbsPreview < ViewComponent::Preview + # @label Playground + # + # @param number_of_links [Integer] number + def playground(number_of_links: 2) + render(Primer::Beta::Breadcrumbs.new) do |component| + Array.new(number_of_links || 3) do |i| + component.item(href: "##{i}") { "Breadcrumb Item #{i + 1}" } + end + end + end + # @label Default options # # @param number_of_links [Integer] number diff --git a/previews/primer/beta/button_group_preview.rb b/previews/primer/beta/button_group_preview.rb index 81d76a703e..3035186fdf 100644 --- a/previews/primer/beta/button_group_preview.rb +++ b/previews/primer/beta/button_group_preview.rb @@ -4,6 +4,18 @@ module Primer module Beta # @label ButtonGroup class ButtonGroupPreview < ViewComponent::Preview + # @label Playground + # + # @param size [Symbol] select [medium, small] + def playground(size: :medium) + render(Primer::Beta::ButtonGroup.new(size: size)) do |c| + c.button { "Button" } + c.button(scheme: :primary) { "Primary" } + c.button(scheme: :danger) { "Danger" } + c.button(scheme: :outline) { "Outline" } + end + end + # @label Default options # # @param size [Symbol] select [medium, small] diff --git a/previews/primer/beta/close_button_preview.rb b/previews/primer/beta/close_button_preview.rb index ee1968af77..ce4d07b4df 100644 --- a/previews/primer/beta/close_button_preview.rb +++ b/previews/primer/beta/close_button_preview.rb @@ -4,6 +4,13 @@ module Primer module Beta # @label CloseButton class CloseButtonPreview < ViewComponent::Preview + # @label Playground + # + # @param type [Symbol] select [button, submit] + def playground(type: :button) + render(Primer::Beta::CloseButton.new(type: type)) + end + # @label Default options # # @param type [Symbol] select [button, submit] diff --git a/previews/primer/beta/counter_preview.rb b/previews/primer/beta/counter_preview.rb index 0073d685c6..3840738302 100644 --- a/previews/primer/beta/counter_preview.rb +++ b/previews/primer/beta/counter_preview.rb @@ -4,6 +4,17 @@ module Primer module Beta # @label Counter class CounterPreview < ViewComponent::Preview + # @label Playground + # + # @param count number + # @param limit number + # @param hide_if_zero toggle + # @param round toggle + # @param scheme [Symbol] select [[Default, default], [Primary, primary], [Secondary, secondary]]] + def playground(count: 1_000, limit: nil, round: false, hide_if_zero: false, scheme: :default) + render(Primer::Beta::Counter.new(count: count, round: round, limit: limit, hide_if_zero: hide_if_zero, scheme: scheme)) + end + # @label Default Options # # @param count number diff --git a/previews/primer/beta/details_preview.rb b/previews/primer/beta/details_preview.rb index f85ff3dbcf..6df12ae6f9 100644 --- a/previews/primer/beta/details_preview.rb +++ b/previews/primer/beta/details_preview.rb @@ -4,6 +4,21 @@ module Primer module Beta # @label Details class DetailsPreview < ViewComponent::Preview + # @label Playground + # + # @param overlay [Symbol] select [none, default, dark] + # @param reset [Boolean] toggle + def playground(reset: false, overlay: :default) + render Primer::Beta::Details.new(reset: reset, overlay: overlay) do |c| + c.with_summary do + "Summary" + end + c.with_body do + "Body" + end + end + end + # @label Default options # # @param overlay [Symbol] select [none, default, dark] diff --git a/previews/primer/beta/flash_preview.rb b/previews/primer/beta/flash_preview.rb index 761b08c07a..14e8a40a79 100644 --- a/previews/primer/beta/flash_preview.rb +++ b/previews/primer/beta/flash_preview.rb @@ -4,6 +4,18 @@ module Primer module Beta # @label Flash class FlashPreview < ViewComponent::Preview + # @label Playground + # + # @param full toggle + # @param spacious toggle + # @param dismissible toggle + # @param icon [Symbol] select [alert, check, info, people] + # @param scheme [Symbol] select [default, warning, danger, success] + # @param content text + def playground(full: false, spacious: false, dismissible: false, icon: :people, scheme: Primer::Beta::Flash::DEFAULT_SCHEME, content: "This is a flash message!") + render(Primer::Beta::Flash.new(full: full, spacious: spacious, dismissible: dismissible, icon: icon, scheme: scheme)) { content } + end + # @label Default # # @param full toggle diff --git a/previews/primer/beta/heading_preview.rb b/previews/primer/beta/heading_preview.rb index 15a5fa8478..1bd5a3ec08 100644 --- a/previews/primer/beta/heading_preview.rb +++ b/previews/primer/beta/heading_preview.rb @@ -4,6 +4,14 @@ module Primer module Beta # @label Heading class HeadingPreview < ViewComponent::Preview + # @label Playground + # + # @param tag [Symbol] select [h1, h2, h3, h4, h5, h6] + # @param content [String] text + def playground(tag: :h2, content: "Heading") + render(Primer::Beta::Heading.new(tag: tag)) { content } + end + # @label Default options # # @param tag [Symbol] select [h1, h2, h3, h4, h5, h6] diff --git a/previews/primer/beta/text_preview.rb b/previews/primer/beta/text_preview.rb index 4cd53e051f..ca333a4854 100644 --- a/previews/primer/beta/text_preview.rb +++ b/previews/primer/beta/text_preview.rb @@ -4,6 +4,14 @@ module Primer module Beta # @label Text class TextPreview < ViewComponent::Preview + # @label Playground + # + # @param tag [Symbol] select [div, p, span] + # @param content [String] text + def playground(tag: :span, content: "Text") + render(Primer::Beta::Text.new(tag: tag)) { content } + end + # @label Default options # # @param tag [Symbol] select [div, p, span] diff --git a/previews/primer/beta/truncate_preview.rb b/previews/primer/beta/truncate_preview.rb index 871dfb2c67..1fea015193 100644 --- a/previews/primer/beta/truncate_preview.rb +++ b/previews/primer/beta/truncate_preview.rb @@ -4,6 +4,13 @@ module Primer module Beta # @label Truncate class TruncatePreview < ViewComponent::Preview + # @label Playground + # + # @param text [String] text + def playground(text: "branch-name-that-is-really-long") + render(Primer::Beta::Truncate.new) { text } + end + # @label Default options # # @param text [String] text diff --git a/previews/primer/clipboard_copy_preview.rb b/previews/primer/clipboard_copy_preview.rb index d1b0c8e4b6..6ab610d334 100644 --- a/previews/primer/clipboard_copy_preview.rb +++ b/previews/primer/clipboard_copy_preview.rb @@ -3,6 +3,14 @@ module Primer # @label ClipboardCopy class ClipboardCopyPreview < ViewComponent::Preview + # @label Playground + # + # @param aria_label [String] + # @param value [String] + def playground(value: "Text to copy", aria_label: "Copy text to the system clipboard") + render(Primer::ClipboardCopy.new(value: value, "aria-label": aria_label)) + end + # @label Default Options # # @param aria_label [String] diff --git a/previews/primer/dropdown_preview.rb b/previews/primer/dropdown_preview.rb index 7e91bafeec..a1ee69e710 100644 --- a/previews/primer/dropdown_preview.rb +++ b/previews/primer/dropdown_preview.rb @@ -3,6 +3,24 @@ module Primer # @label Dropdown class DropdownPreview < ViewComponent::Preview + # @label Playground + # + # @param with_caret [Boolean] toggle + # @param overlay [Symbol] select [none, default, dark] + def playground(overlay: :default, with_caret: false) + render(Primer::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |c| + c.with_button { "Dropdown" } + + c.with_menu(header: "Header") do |m| + m.with_item { "Item 1" } + m.with_item { "Item 2" } + m.with_item(divider: true) + m.with_item { "Item 3" } + m.with_item { "Item 4" } + end + end + end + # @label Default Options # # @param with_caret [Boolean] toggle diff --git a/previews/primer/hellip_button_preview.rb b/previews/primer/hellip_button_preview.rb index 8f7a7830c2..f9e9b78777 100644 --- a/previews/primer/hellip_button_preview.rb +++ b/previews/primer/hellip_button_preview.rb @@ -10,5 +10,13 @@ class HellipButtonPreview < ViewComponent::Preview def default(inline: false, aria_label: "No effect") render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label)) end + + # @label Playground + # + # @param aria_label [String] + # @param inline [Boolean] + def playground(inline: false, aria_label: "No effect") + render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label)) + end end end diff --git a/previews/primer/image_crop_preview.rb b/previews/primer/image_crop_preview.rb index d0dbf0c94e..d4ad2318dc 100644 --- a/previews/primer/image_crop_preview.rb +++ b/previews/primer/image_crop_preview.rb @@ -3,6 +3,13 @@ module Primer # @label ImageCrop class ImageCropPreview < ViewComponent::Preview + # @label Playground + # + # @param rounded [Boolean] + def playground(rounded: false) + render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded)) + end + # @label Default Options # # @param rounded [Boolean] diff --git a/previews/primer/label_component_preview.rb b/previews/primer/label_component_preview.rb index da898acdc5..6011f6c431 100644 --- a/previews/primer/label_component_preview.rb +++ b/previews/primer/label_component_preview.rb @@ -11,5 +11,14 @@ class LabelComponentPreview < ViewComponent::Preview def default(size: :medium, tag: :span, inline: false) render(Primer::LabelComponent.new(tag: tag, size: size, inline: inline)) { "Label" } end + + # @label Playground + # + # @param size [Symbol] select [medium, large] + # @param tag [Symbol] select [span, summary, a, div] + # @param inline [Boolean] toggle + def playground(size: :medium, tag: :span, inline: false) + render(Primer::LabelComponent.new(tag: tag, size: size, inline: inline)) { "Label" } + end end end diff --git a/previews/primer/layout_component_preview.rb b/previews/primer/layout_component_preview.rb index 257b4f0f64..264c88ce34 100644 --- a/previews/primer/layout_component_preview.rb +++ b/previews/primer/layout_component_preview.rb @@ -3,7 +3,19 @@ module Primer # @label LayoutComponent class LayoutComponentPreview < ViewComponent::Preview - # @label Default Options + # @label Playground + # + # @param responsive [Boolean] + # @param side [Symbol] select [left, right] + # @param sidebar_col [Integer] select [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] + def playground(responsive: false, side: :right, sidebar_col: 3) + render(Primer::LayoutComponent.new(responsive: responsive, side: side, sidebar_col: sidebar_col)) do |component| + component.with_main { "Main" } + component.with_sidebar { "Sidebar" } + end + end + + # @label Default # # @param responsive [Boolean] # @param side [Symbol] select [left, right] diff --git a/previews/primer/link_component_preview.rb b/previews/primer/link_component_preview.rb index 5279c74929..f9d986e7d3 100644 --- a/previews/primer/link_component_preview.rb +++ b/previews/primer/link_component_preview.rb @@ -3,6 +3,16 @@ module Primer # @label LinkComponent class LinkComponentPreview < ViewComponent::Preview + # @label Playground + # + # @param underline [Boolean] + # @param muted [Boolean] + # @param tag [Symbol] select [a, span] + # @param scheme [Symbol] select [default, primary, secondary] + def playground(tag: :a, scheme: :default, muted: false, underline: true) + render(Primer::LinkComponent.new(href: "#", tag: tag, scheme: scheme, muted: muted, underline: underline)) { "This is a link!" } + end + # @label Default Options # # @param underline [Boolean] @@ -13,7 +23,7 @@ def default(tag: :a, scheme: :default, muted: false, underline: true) render(Primer::LinkComponent.new(href: "#", tag: tag, scheme: scheme, muted: muted, underline: underline)) { "This is a link!" } end - # @label with Tooltip + # @label With Tooltip # # @param underline [Boolean] # @param muted [Boolean] diff --git a/previews/primer/local_time_component_preview.rb b/previews/primer/local_time_component_preview.rb index 3df6c84791..fabf0f1004 100644 --- a/previews/primer/local_time_component_preview.rb +++ b/previews/primer/local_time_component_preview.rb @@ -3,6 +3,19 @@ module Primer # @label LocalTime class LocalTimeComponentPreview < ViewComponent::Preview + # @param datetime datetime-local + # @param weekday [Symbol] select [long, short] + # @param month [Symbol] select [long, short] + # @param year [Symbol] select [numeric, "2-digit"] + # @param day [Symbol] select [numeric, "2-digit"] + # @param hour [Symbol] select [numeric, "2-digit"] + # @param minute [Symbol] select [numeric, "2-digit"] + # @param second [Symbol] select [numeric, "2-digit"] + # @param time_zone_name [Symbol] select [long, short] + def playground(datetime: "2014-04-01T16:30:00-08:00", weekday: :short, month: :short, year: :numeric, day: :numeric, hour: :numeric, minute: :numeric, second: :numeric, time_zone_name: :short) + render(Primer::LocalTime.new(datetime: DateTime.parse(datetime), weekday: weekday, month: month, year: year, day: day, hour: hour, minute: minute, second: second, time_zone_name: time_zone_name)) + end + # @param datetime datetime-local # @param weekday [Symbol] select [long, short] # @param month [Symbol] select [long, short] diff --git a/previews/primer/markdown_preview.rb b/previews/primer/markdown_preview.rb index ddec5cd9a7..ed808ee8df 100644 --- a/previews/primer/markdown_preview.rb +++ b/previews/primer/markdown_preview.rb @@ -3,277 +3,288 @@ module Primer # @label Markdown class MarkdownPreview < ViewComponent::Preview - # @label Default Options - def default - render(Primer::Markdown.new) do - "

Text can be bold, italic, or strikethrough. Links should be blue with no underlines (unless hovered over).

+ MD_FIXTURE = %( +

Text can be bold, italic, or strikethrough. Links should be blue with no underlines (unless hovered over).

-

There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.

+

There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.

-

There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.

+

There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs.

-
-

There should be no margin above this first sentence.

-

Blockquotes should be a lighter gray with a gray border along the left side.

-

There should be no margin below this final sentence.

-
+
+

There should be no margin above this first sentence.

+

Blockquotes should be a lighter gray with a gray border along the left side.

+

There should be no margin below this final sentence.

+
-

Header 1

+

Header 1

+ +

This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.

+ +

Header 2

+ +
This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.
+ +

Header 3

+ + 
This is a code block following a header.
+ +

Header 4

+ + + +
Header 5
+ +
    +
  1. This is an ordered list following a header.
    2. +
  2. This is an ordered list following a header.
    3. +
  3. This is an ordered list following a header.
    4. +
+ +
Header 6
+ + + + + + + + + + + + + + + + + + + + + + +
WhatFollows
A tableA header
A tableA header
A tableA header
+ +
+ +

There's a horizontal rule above and below this.

+ +
+ +

Here is an unordered list:

+ + + +

And an ordered list:

+ +
    +
  1. Michael Jackson
    2. +
  2. Michael Bolton
    3. +
  3. Michael Bublé
    4. +
+ +

And an unordered task list:

+ + + +

And a \"mixed\" task list:

+ + + + And a nested list: + + + +

Definition lists can be used with HTML syntax. Definition terms are bold and italic.

+ +
+
Name
+
Godzilla
+
Born
+
1952
+
Birthplace
+
Japan
+
Color
+
Green
+
+ +
+ +

Tables should have bold headings and alternating shaded rows.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ArtistAlbumYear
David BowieScary Monsters1980
PrincePurple Rain1982
Beastie BoysLicense to Ill1986
Janet JacksonRhythm Nation 18141989
+ +

If a table is too wide, it should condense down and/or scroll horizontally.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ArtistAlbumYearLabelSongs
David BowieScary Monsters1980RCA RecordsIt's No Game (No. 1), Up the Hill Backwards, Scary Monsters (And Super Creeps), Ashes to Ashes, Fashion, Teenage Wildlife, Scream Like a Baby, Kingdom Come, Because You're Young, It's No Game (No. 2)
PrincePurple Rain1982Warner Brothers RecordsLet's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain
Beastie BoysLicense to Ill1986Def JamRhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, Fight for Your Right, No Sleep till Brooklyn, Paul Revere, \"Hold It Now, Hit It\", Brass Monkey, Slow and Low, Time to Get Ill
Janet JacksonRhythm Nation 18141989A&MInterlude: Pledge, Rhythm Nation, Interlude: T.V., State of the World, Interlude: Race, The Knowledge, Interlude: Let's Dance, Miss You Much, Interlude: Come Back, Love Will Never Do (Without You), Livin' in a World (They Didn't Make), Alright, Interlude: Hey Baby, Escapade, Interlude: No Acid, Black Cat, Lonely, Come Back to Me, Someday Is Tonight, Interlude: Livin'...In Complete Darkness
+ +
+ +

Code snippets like var foo = \"bar\"; can be shown inline.

+ +

Also, this should vertically align with this and this.

+ +

Code can also be shown in a block element.

+ + 
var foo = \"bar\";
+ +

Code can also use syntax highlighting.

+ + 
var foo = \"bar\";
+ + 
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
+ + 
var foo = \"The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.\";
+ +

Inline code inside table cells should still be distinguishable.

+ + + + + + + + + + + + + + + + + + +
LanguageCode
JavasScriptvar foo = \"bar\";
Rubyfoo = \"bar\"
+ +
+ +

Small images should be shown at their actual size.

+ + + +

Large images should always scale down and fit in the content container.

+ + + + 
This is the final element on the page and there should be no margin below this.
+ ).html_safe # rubocop:disable Rails/OutputSafety + + # @label Playground + def playground + render(Primer::Markdown.new) do + MD_FIXTURE + end + end -

This is a normal paragraph following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.

- -

Header 2

- -
This is a blockquote following a header. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong.
- -

Header 3

- - 
This is a code block following a header.
- -

Header 4

- - - -
Header 5
- -
    -
  1. This is an ordered list following a header.
    2. -
  2. This is an ordered list following a header.
    3. -
  3. This is an ordered list following a header.
    4. -
- -
Header 6
- - - - - - - - - - - - - - - - - - - - - - -
WhatFollows
A tableA header
A tableA header
A tableA header
- -
- -

There's a horizontal rule above and below this.

- -
- -

Here is an unordered list:

- - - -

And an ordered list:

- -
    -
  1. Michael Jackson
    2. -
  2. Michael Bolton
    3. -
  3. Michael Bublé
    4. -
- -

And an unordered task list:

- - - -

And a \"mixed\" task list:

- - - - And a nested list: - - - -

Definition lists can be used with HTML syntax. Definition terms are bold and italic.

- -
-
Name
-
Godzilla
-
Born
-
1952
-
Birthplace
-
Japan
-
Color
-
Green
-
- -
- -

Tables should have bold headings and alternating shaded rows.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ArtistAlbumYear
David BowieScary Monsters1980
PrincePurple Rain1982
Beastie BoysLicense to Ill1986
Janet JacksonRhythm Nation 18141989
- -

If a table is too wide, it should condense down and/or scroll horizontally.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ArtistAlbumYearLabelSongs
David BowieScary Monsters1980RCA RecordsIt's No Game (No. 1), Up the Hill Backwards, Scary Monsters (And Super Creeps), Ashes to Ashes, Fashion, Teenage Wildlife, Scream Like a Baby, Kingdom Come, Because You're Young, It's No Game (No. 2)
PrincePurple Rain1982Warner Brothers RecordsLet's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain
Beastie BoysLicense to Ill1986Def JamRhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, Fight for Your Right, No Sleep till Brooklyn, Paul Revere, \"Hold It Now, Hit It\", Brass Monkey, Slow and Low, Time to Get Ill
Janet JacksonRhythm Nation 18141989A&MInterlude: Pledge, Rhythm Nation, Interlude: T.V., State of the World, Interlude: Race, The Knowledge, Interlude: Let's Dance, Miss You Much, Interlude: Come Back, Love Will Never Do (Without You), Livin' in a World (They Didn't Make), Alright, Interlude: Hey Baby, Escapade, Interlude: No Acid, Black Cat, Lonely, Come Back to Me, Someday Is Tonight, Interlude: Livin'...In Complete Darkness
- -
- -

Code snippets like var foo = \"bar\"; can be shown inline.

- -

Also, this should vertically align with this and this.

- -

Code can also be shown in a block element.

- - 
var foo = \"bar\";
- -

Code can also use syntax highlighting.

- - 
var foo = \"bar\";
- - 
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
- - 
var foo = \"The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long.\";
- -

Inline code inside table cells should still be distinguishable.

- - - - - - - - - - - - - - - - - - -
LanguageCode
JavasScriptvar foo = \"bar\";
Rubyfoo = \"bar\"
- -
- -

Small images should be shown at their actual size.

- - - -

Large images should always scale down and fit in the content container.

- - - - 
This is the final element on the page and there should be no margin below this.
".html_safe # rubocop:disable Rails/OutputSafety + # @label Default Options + def default + render(Primer::Markdown.new) do + MD_FIXTURE end end end diff --git a/previews/primer/menu_component_preview.rb b/previews/primer/menu_component_preview.rb index aba22db3a3..4540581665 100644 --- a/previews/primer/menu_component_preview.rb +++ b/previews/primer/menu_component_preview.rb @@ -3,7 +3,10 @@ module Primer # @label MenuComponent class MenuComponentPreview < ViewComponent::Preview - # @label Default Options + # @label Playground + def playground; end + + # @label Default def default; end end end diff --git a/previews/primer/menu_component_preview/playground.html.erb b/previews/primer/menu_component_preview/playground.html.erb new file mode 100644 index 0000000000..4e9701d826 --- /dev/null +++ b/previews/primer/menu_component_preview/playground.html.erb @@ -0,0 +1,17 @@ +<%= render(Primer::MenuComponent.new) do |c| %> + <% c.with_heading(tag: :h2) do %> + Heading + <% end %> + <% c.with_item(selected: true, href: "#url") do %> + Item 1 + <% end %> + <% c.with_item(href: "#url") do %> + <%= render(Primer::OcticonComponent.new("check")) %> + With Icon + <% end %> + <% c.with_item(href: "#url") do %> + <%= render(Primer::OcticonComponent.new("check")) %> + With Icon and Counter + <%= render(Primer::Beta::Counter.new(count: 25)) %> + <% end %> +<% end %> diff --git a/previews/primer/octicon_component_preview.rb b/previews/primer/octicon_component_preview.rb index 17409d9427..6b29f3b56f 100644 --- a/previews/primer/octicon_component_preview.rb +++ b/previews/primer/octicon_component_preview.rb @@ -3,6 +3,14 @@ module Primer # @label OcticonComponent class OcticonComponentPreview < ViewComponent::Preview + # @label Playground + # + # @param aria_label [String] + # @param size [Symbol] select [xsmall, small, medium] + def playground(size: :small, aria_label: nil) + render(Primer::OcticonComponent.new(icon: :people, size: size, "aria-label": aria_label)) + end + # @label Default Options # # @param aria_label [String] diff --git a/previews/primer/popover_component_preview.rb b/previews/primer/popover_component_preview.rb index 80f0140ee1..4c3bd69139 100644 --- a/previews/primer/popover_component_preview.rb +++ b/previews/primer/popover_component_preview.rb @@ -3,7 +3,21 @@ module Primer # @label PopoverComponent class PopoverComponentPreview < ViewComponent::Preview - # @label Default Options + # @label Playground + # + # @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top] + def playground(caret: :top) + render Primer::PopoverComponent.new do |component| + component.with_heading do + "Activity feed" + end + component.with_body(caret: caret) do + "This is the Popover body." + end + end + end + + # @label Default # # @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top] def default(caret: :top) diff --git a/previews/primer/progress_bar_component_preview.rb b/previews/primer/progress_bar_component_preview.rb index ab83a724b5..7b9a70fd04 100644 --- a/previews/primer/progress_bar_component_preview.rb +++ b/previews/primer/progress_bar_component_preview.rb @@ -3,7 +3,18 @@ module Primer # @label ProgressBarComponent class ProgressBarComponentPreview < ViewComponent::Preview - # @label Default Options + # @label Playground + # + # @param size [Symbol] select [default, small, large] + def playground(size: :default) + render(Primer::ProgressBarComponent.new(size: size)) do |component| + component.with_item(percentage: 10) + component.with_item(bg: :accent_emphasis, percentage: 20) + component.with_item(bg: :danger_emphasis, percentage: 30) + end + end + + # @label Default # # @param size [Symbol] select [default, small, large] def default(size: :default) diff --git a/previews/primer/spinner_component_preview.rb b/previews/primer/spinner_component_preview.rb index 5e8a686cb1..0e13f048f7 100644 --- a/previews/primer/spinner_component_preview.rb +++ b/previews/primer/spinner_component_preview.rb @@ -3,6 +3,13 @@ module Primer # @label SpinnerComponent class SpinnerComponentPreview < ViewComponent::Preview + # @label Playground + # + # @param size [Symbol] select [small, medium, large] + def playground(size: :medium) + render(Primer::SpinnerComponent.new(size: size)) + end + # @label Default Options # # @param size [Symbol] select [small, medium, large] diff --git a/previews/primer/state_component_preview.rb b/previews/primer/state_component_preview.rb index 0dfb1818dd..773d729d07 100644 --- a/previews/primer/state_component_preview.rb +++ b/previews/primer/state_component_preview.rb @@ -3,7 +3,17 @@ module Primer # @label StateComponent class StateComponentPreview < ViewComponent::Preview - # @label Default Options + # @label Playground + # + # @param title [String] + # @param tag [Symbol] select [span, div] + # @param size [Symbol] select [default, small] + # @param scheme [Symbol] select [default, open, closed, merged] + def playground(title: "State", scheme: :default, size: :default, tag: :span) + render(Primer::StateComponent.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" } + end + + # @label Default # # @param title [String] # @param tag [Symbol] select [span, div] diff --git a/previews/primer/subhead_component_preview.rb b/previews/primer/subhead_component_preview.rb index 2d444a70be..2233b24758 100644 --- a/previews/primer/subhead_component_preview.rb +++ b/previews/primer/subhead_component_preview.rb @@ -3,6 +3,23 @@ module Primer # @label SubheadComponent class SubheadComponentPreview < ViewComponent::Preview + # @label Playground + # + # @param spacious [Boolean] + # @param hide_border [Boolean] + # @param heading_danger [Boolean] + # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6] + def playground(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false) + render(Primer::SubheadComponent.new(spacious: spacious, hide_border: hide_border)) do |component| + component.with_heading(tag: heading_tag, danger: heading_danger) do + "My Heading" + end + component.with_description do + "My Description" + end + end + end + # @label Default Options # # @param spacious [Boolean] diff --git a/previews/primer/time_ago_component_preview.rb b/previews/primer/time_ago_component_preview.rb index 3b66a1d5af..ddae968ee2 100644 --- a/previews/primer/time_ago_component_preview.rb +++ b/previews/primer/time_ago_component_preview.rb @@ -3,6 +3,14 @@ module Primer # @label TimeAgoComponent class TimeAgoComponentPreview < ViewComponent::Preview + # @label Playground + # + # @param time datetime-local + # @param micro [Boolean] toggle + def playground(time: Time.zone.now.to_s, micro: false) + render(Primer::TimeAgoComponent.new(time: DateTime.parse(time), micro: micro)) + end + # @param time datetime-local # @param micro [Boolean] toggle def default(time: Time.zone.now.to_s, micro: false) diff --git a/previews/primer/timeline_item_component_preview.rb b/previews/primer/timeline_item_component_preview.rb index cc9f3d648c..a65004e6bd 100644 --- a/previews/primer/timeline_item_component_preview.rb +++ b/previews/primer/timeline_item_component_preview.rb @@ -3,7 +3,18 @@ module Primer # @label TimelineItemComponent class TimelineItemComponentPreview < ViewComponent::Preview - # @label Default Options + # @label Playground + # + # @param condensed [Boolean] + def playground(condensed: false) + render(Primer::TimelineItemComponent.new(condensed: condensed)) do |component| + component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat") + component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) + component.with_body { "Success!" } + end + end + + # @label Default # # @param condensed [Boolean] def default(condensed: false) diff --git a/static/arguments.json b/static/arguments.json index 7df14de4ef..1ee3232c6a 100644 --- a/static/arguments.json +++ b/static/arguments.json @@ -1,7 +1,9 @@ [ { "component": "ActionList", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/default/", "parameters": [ { "name": "role", @@ -37,7 +39,9 @@ }, { "component": "ActionList::Divider", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/divider/default/", "parameters": [ { "name": "scheme", @@ -55,7 +59,9 @@ }, { "component": "ActionList::Heading", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/heading/default/", "parameters": [ { "name": "list_id", @@ -97,7 +103,9 @@ }, { "component": "ActionList::Item", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/item.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/item/default/", "parameters": [ { "name": "list", @@ -199,7 +207,9 @@ }, { "component": "ButtonMarketing", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/button_marketing/default/", "parameters": [ { "name": "scheme", @@ -235,7 +245,9 @@ }, { "component": "Dialog", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/default/", "parameters": [ { "name": "id", @@ -289,7 +301,9 @@ }, { "component": "HiddenTextExpander", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hidden_text_expander.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hidden_text_expander/default/", "parameters": [ { "name": "inline", @@ -313,7 +327,9 @@ }, { "component": "Layout", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/layout.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/layout/default/", "parameters": [ { "name": "stacking_breakpoint", @@ -343,7 +359,9 @@ }, { "component": "NavList", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/default/", "parameters": [ { "name": "selected_item_id", @@ -361,7 +379,9 @@ }, { "component": "NavList::Item", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/item/default/", "parameters": [ { "name": "selected_item_id", @@ -397,7 +417,9 @@ }, { "component": "NavList::Section", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/default/", "parameters": [ { "name": "selected_item_id", @@ -415,7 +437,9 @@ }, { "component": "TabNav", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_nav/default/", "parameters": [ { "name": "tag", @@ -445,7 +469,9 @@ }, { "component": "TabPanels", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_panels.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_panels/default/", "parameters": [ { "name": "label", @@ -481,7 +507,9 @@ }, { "component": "TextField", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/text_field.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/text_field/default/", "parameters": [ { "name": "name", @@ -613,7 +641,9 @@ }, { "component": "ToggleSwitch", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/toggle_switch.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/toggle_switch/default/", "parameters": [ { "name": "src", @@ -661,7 +691,9 @@ }, { "component": "Tooltip", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tooltip/default/", "parameters": [ { "name": "for_id", @@ -697,7 +729,9 @@ }, { "component": "UnderlineNav", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_nav/default/", "parameters": [ { "name": "tag", @@ -733,7 +767,9 @@ }, { "component": "UnderlinePanels", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_panels.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_panels/default/", "parameters": [ { "name": "label", @@ -769,7 +805,9 @@ }, { "component": "AutoComplete", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/default/", "parameters": [ { "name": "label_text", @@ -865,7 +903,9 @@ }, { "component": "AutoComplete::Item", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/item/default/", "parameters": [ { "name": "value", @@ -907,7 +947,9 @@ }, { "component": "Avatar", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/avatar/default/", "parameters": [ { "name": "src", @@ -949,7 +991,9 @@ }, { "component": "AvatarStack", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar_stack.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/avatar_stack/default/", "parameters": [ { "name": "tag", @@ -985,7 +1029,9 @@ }, { "component": "BaseButton", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/base_button.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/base_button/default/", "parameters": [ { "name": "tag", @@ -1015,7 +1061,9 @@ }, { "component": "Blankslate", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/blankslate.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/blankslate/default/", "parameters": [ { "name": "narrow", @@ -1045,7 +1093,9 @@ }, { "component": "BorderBox", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/border_box/default/", "parameters": [ { "name": "padding", @@ -1063,7 +1113,9 @@ }, { "component": "BorderBox::Header", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box/header.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/border_box/header/default/", "parameters": [ { "name": "system_arguments", @@ -1075,7 +1127,9 @@ }, { "component": "Breadcrumbs", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/breadcrumbs/default/", "parameters": [ { "name": "system_arguments", @@ -1087,7 +1141,9 @@ }, { "component": "Button", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button/default/", "parameters": [ { "name": "scheme", @@ -1135,7 +1191,9 @@ }, { "component": "ButtonGroup", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/default/", "parameters": [ { "name": "variant", @@ -1159,7 +1217,9 @@ }, { "component": "CloseButton", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/close_button.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/close_button/default/", "parameters": [ { "name": "type", @@ -1177,7 +1237,9 @@ }, { "component": "Counter", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/counter.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/counter/default/", "parameters": [ { "name": "count", @@ -1225,7 +1287,9 @@ }, { "component": "Details", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/details.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/details/default/", "parameters": [ { "name": "overlay", @@ -1249,7 +1313,9 @@ }, { "component": "Flash", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/flash/default/", "parameters": [ { "name": "full", @@ -1291,7 +1357,9 @@ }, { "component": "Heading", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/heading.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/heading/default/", "parameters": [ { "name": "tag", @@ -1309,7 +1377,9 @@ }, { "component": "IconButton", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/icon_button.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/icon_button/default/", "parameters": [ { "name": "icon", @@ -1381,7 +1451,9 @@ }, { "component": "Text", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/text/default/", "parameters": [ { "name": "tag", @@ -1399,7 +1471,9 @@ }, { "component": "Truncate", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/default/", "parameters": [ { "name": "system_arguments", @@ -1411,7 +1485,9 @@ }, { "component": "Box", + "status": "stable", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/box.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/box/default/", "parameters": [ { "name": "system_arguments", @@ -1423,7 +1499,9 @@ }, { "component": "Button", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/button/default/", "parameters": [ { "name": "scheme", @@ -1483,7 +1561,9 @@ }, { "component": "ClipboardCopy", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/clipboard_copy.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/clipboard_copy/default/", "parameters": [ { "name": "aria-label", @@ -1513,7 +1593,9 @@ }, { "component": "Dropdown", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/dropdown.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/dropdown/default/", "parameters": [ { "name": "overlay", @@ -1537,7 +1619,9 @@ }, { "component": "DropdownMenu", + "status": "deprecated", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/dropdown_menu_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/dropdown_menu/default/", "parameters": [ { "name": "direction", @@ -1567,7 +1651,9 @@ }, { "component": "HellipButton", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/hellip_button.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/hellip_button/default/", "parameters": [ { "name": "inline", @@ -1585,7 +1671,9 @@ }, { "component": "IconButton", + "status": "deprecated", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/icon_button/default/", "parameters": [ { "name": "scheme", @@ -1645,7 +1733,9 @@ }, { "component": "Image", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/image.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/image/default/", "parameters": [ { "name": "src", @@ -1675,7 +1765,9 @@ }, { "component": "ImageCrop", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/image_crop.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/image_crop/default/", "parameters": [ { "name": "src", @@ -1699,7 +1791,9 @@ }, { "component": "Label", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/label_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/label/default/", "parameters": [ { "name": "tag", @@ -1741,7 +1835,9 @@ }, { "component": "Layout", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/layout/default/", "parameters": [ { "name": "responsive", @@ -1771,7 +1867,9 @@ }, { "component": "Link", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/link_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/link/default/", "parameters": [ { "name": "tag", @@ -1813,7 +1911,9 @@ }, { "component": "LocalTime", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/local_time.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/local_time/default/", "parameters": [ { "name": "datetime", @@ -1885,7 +1985,9 @@ }, { "component": "Markdown", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/markdown.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/markdown/default/", "parameters": [ { "name": "tag", @@ -1903,7 +2005,9 @@ }, { "component": "Menu", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/menu_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/menu/default/", "parameters": [ { "name": "system_arguments", @@ -1915,7 +2019,9 @@ }, { "component": "Navigation::Tab", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/", "parameters": [ { "name": "list", @@ -1963,7 +2069,9 @@ }, { "component": "Octicon", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/octicon_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/octicon/default/", "parameters": [ { "name": "icon_name", @@ -1999,7 +2107,9 @@ }, { "component": "OcticonSymbols", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/octicon_symbols_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/octicon_symbols/default/", "parameters": [ { "name": "icons", @@ -2011,7 +2121,9 @@ }, { "component": "Popover", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/popover_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/popover/default/", "parameters": [ { "name": "system_arguments", @@ -2023,7 +2135,9 @@ }, { "component": "ProgressBar", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/progress_bar_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/progress_bar/default/", "parameters": [ { "name": "size", @@ -2041,7 +2155,9 @@ }, { "component": "Spinner", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/spinner_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/spinner/default/", "parameters": [ { "name": "size", @@ -2065,7 +2181,9 @@ }, { "component": "State", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/state_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/state/default/", "parameters": [ { "name": "title", @@ -2101,7 +2219,9 @@ }, { "component": "Subhead", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/subhead_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/subhead/default/", "parameters": [ { "name": "spacious", @@ -2125,7 +2245,9 @@ }, { "component": "TabContainer", + "status": "alpha", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/tab_container_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tab_container/default/", "parameters": [ { "name": "system_arguments", @@ -2137,7 +2259,9 @@ }, { "component": "TimeAgo", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/time_ago_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/time_ago/default/", "parameters": [ { "name": "time", @@ -2161,7 +2285,9 @@ }, { "component": "TimelineItem", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/timeline_item_component.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/timeline_item/default/", "parameters": [ { "name": "condensed", @@ -2179,7 +2305,9 @@ }, { "component": "Tooltip", + "status": "deprecated", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tooltip/default/", "parameters": [ { "name": "label", @@ -2221,7 +2349,9 @@ }, { "component": "Truncate", + "status": "beta", "source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb", + "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/", "parameters": [ { "name": "tag", diff --git a/templates/preview.tt b/templates/preview.tt index 5746328c8e..aea537adad 100644 --- a/templates/preview.tt +++ b/templates/preview.tt @@ -1,25 +1,27 @@ # frozen_string_literal: true -# Setup Default to use all available component props +# Setup Playground to use all available component props # Setup Features to use individual component props and combinations -module <%= module_name %> - # @label <%= class_name %> - class <%= class_name %>Preview < ViewComponent::Preview - # @label Default - # @param string_example text - # @param boolean_example toggle - # @param email_example email - # @param number_example number - # @param url_example url - # @param tel_example tel - # @param textarea_example textarea - # @param select_example select [one, two, three] - # @param select_custom_labels select [[One label, one], [Two label, two], [Three label, three]] - # With empty option (`~` in YAML) - # @param select_empty_option select [~, one, two, three] - def default(string_example: "Default value", boolean_example: false, select_example: :one) - render(Primer::<%= module_name %>::<%= class_name %>.new(string_example: string_example, boolean_example: boolean_example, select_example: select_example)) +module Primer + module <%= module_name %> + # @label <%= class_name %> + class <%= class_name %>Preview < ViewComponent::Preview + # @label Playground + # @param string_example text + # @param boolean_example toggle + # @param email_example email + # @param number_example number + # @param url_example url + # @param tel_example tel + # @param textarea_example textarea + # @param select_example select [one, two, three] + # @param select_custom_labels select [[One label, one], [Two label, two], [Three label, three]] + # With empty option (`~` in YAML) + # @param select_empty_option select [~, one, two, three] + def playground(string_example: "Some value", boolean_example: false, select_example: :one) + render(Primer::<%= module_name %>::<%= class_name %>.new(string_example: string_example, boolean_example: boolean_example, select_example: select_example)) + end end end end diff --git a/test/components/preview_test.rb b/test/components/preview_test.rb index 772cca2e7b..a640074727 100644 --- a/test/components/preview_test.rb +++ b/test/components/preview_test.rb @@ -11,9 +11,32 @@ def test_previews_exist refute_empty(@previews) end - def test_previews_have_default_method + def test_previews_have_default_preview + missing_previews = [] @previews.each do |preview| - assert_includes(File.read(preview), "def default", "The preview `#{preview}` does not have a default method. Please include at one `def default` method") + contents = File.read(preview) + missing_previews << preview unless contents.include?("def default") end + assert(missing_previews.empty?, "The following previews are missing a default preview method: \n\n - #{missing_previews.join("\n - ")}\n") + end + + def test_previews_have_playground_preview + missing_previews = [] + @previews.each do |preview| + contents = File.read(preview) + missing_previews << preview unless contents.include?("def playground") + end + assert(missing_previews.empty?, "The following previews are missing a playground preview method: \n\n - #{missing_previews.join("\n - ")}") + end + + def test_preview_labels_are_sentence_case + lowercase_labels = [] + @previews.each do |preview| + contents = File.read(preview).split("\n") + contents.each_with_index do |line, index| + lowercase_labels << "#{preview}:#{index + 1}: #{line}" if /# @label [a-z]/.match?(line) + end + end + assert(lowercase_labels.empty?, "Preview labels should use sentence case: \n\n - #{lowercase_labels.join("\n - ")}") end end