From d62f51e6596a9a2e324382199f515a76d16bc830 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 15 Sep 2022 19:14:35 +0000 Subject: [PATCH 1/8] Adding lookbook links to docs output --- lib/tasks/docs.rake | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index faecd62dbb..bfb1d24042 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -132,6 +132,7 @@ namespace :docs do f.puts("status: #{data[:status]}") f.puts("source: #{data[:source]}") f.puts("storybook: #{data[:storybook]}") + f.puts("lookbook: #{data[:lookbook]}") if preview_exists?(component) f.puts("---") f.puts f.puts("import Example from '#{data[:example_path]}'") @@ -467,6 +468,7 @@ namespace :docs do status: status.capitalize, source: source_url(component), storybook: storybook_url(component), + lookbook: lookbook_url(component), path: "docs/content/components/#{status_path}#{short_name.downcase}.md", example_path: example_path(component), require_js_path: require_js_path(component) @@ -485,6 +487,18 @@ namespace :docs do "https://primer.style/view-components/stories/?path=/story/#{path}" end + def lookbook_url(component) + path = component.name.underscore + + "https://primer.style/view-components/lookbook/inspect/#{path}/default/" + end + + def preview_exists?(component) + path = component.name.underscore + + File.exist?("test/previews/#{path}_preview.rb") + end + def example_path(component) example_path = "../../src/@primer/gatsby-theme-doctocat/components/example" example_path = "../#{example_path}" if status_module?(component) From 4b0d803f08aa6ff20e6efc76e2f8eb7d47bc0363 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 15 Sep 2022 20:05:03 +0000 Subject: [PATCH 2/8] remove component suffix --- lib/tasks/docs.rake | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index bfb1d24042..992020f5f9 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -488,7 +488,7 @@ namespace :docs do end def lookbook_url(component) - path = component.name.underscore + path = component.name.underscore.gsub("_component", "") "https://primer.style/view-components/lookbook/inspect/#{path}/default/" end From 1ce421160ff6220aeaeb47e846ee8fa0fd2034f2 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 15 Sep 2022 20:09:25 +0000 Subject: [PATCH 3/8] Making sure everything has a default --- templates/preview.tt | 6 +++--- test/previews/primer/alpha/text_field_preview.rb | 4 ++-- test/previews/primer/beta/auto_complete_preview.rb | 4 ++-- test/previews/primer/beta/button_preview.rb | 4 ++-- test/previews/primer/beta/flash_preview.rb | 4 ++-- test/previews/primer/beta/icon_button_preview.rb | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/templates/preview.tt b/templates/preview.tt index 633ef877f5..5746328c8e 100644 --- a/templates/preview.tt +++ b/templates/preview.tt @@ -1,12 +1,12 @@ # frozen_string_literal: true -# Setup Playground to use all available component props +# Setup Default 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 Playground + # @label Default # @param string_example text # @param boolean_example toggle # @param email_example email @@ -18,7 +18,7 @@ module <%= module_name %> # @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: "Default value", boolean_example: false, select_example: :one) + 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)) end end diff --git a/test/previews/primer/alpha/text_field_preview.rb b/test/previews/primer/alpha/text_field_preview.rb index c380479d33..d887416253 100644 --- a/test/previews/primer/alpha/text_field_preview.rb +++ b/test/previews/primer/alpha/text_field_preview.rb @@ -4,7 +4,7 @@ module Primer module Alpha # @label TextField class TextFieldPreview < ViewComponent::Preview - # @label Playground + # @label Default # # @param name text # @param id text @@ -20,7 +20,7 @@ class TextFieldPreview < ViewComponent::Preview # @param inset toggle # @param monospace toggle # @param leading_visual_icon text - def playground( + def default( name: "my-text-field", id: "my-text-field", label: "My text field", diff --git a/test/previews/primer/beta/auto_complete_preview.rb b/test/previews/primer/beta/auto_complete_preview.rb index 89ed622e69..1b89d0277c 100644 --- a/test/previews/primer/beta/auto_complete_preview.rb +++ b/test/previews/primer/beta/auto_complete_preview.rb @@ -4,7 +4,7 @@ module Primer module Beta # @label AutoComplete class AutoCompletePreview < ViewComponent::Preview - # @label Playground + # @label Default # @param label_text text # @param show_clear_button toggle # @param visually_hide_label toggle @@ -18,7 +18,7 @@ class AutoCompletePreview < ViewComponent::Preview # @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) + def default(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false) render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c| c.leading_visual_icon(icon: :search) end diff --git a/test/previews/primer/beta/button_preview.rb b/test/previews/primer/beta/button_preview.rb index f5f6f87d48..2f1789c654 100644 --- a/test/previews/primer/beta/button_preview.rb +++ b/test/previews/primer/beta/button_preview.rb @@ -4,7 +4,7 @@ module Primer module Beta # @label Button class ButtonPreview < ViewComponent::Preview - # @label Playground + # @label Default # @param scheme select [default, primary, danger, outline, invisible, link] # @param size select [small, medium, large] # @param full_width toggle @@ -12,7 +12,7 @@ class ButtonPreview < ViewComponent::Preview # @param pressed toggle # @param align_content select [center, start] # @param tag select [a, summary, button] - def playground( + def default( scheme: :default, size: :medium, full_width: false, diff --git a/test/previews/primer/beta/flash_preview.rb b/test/previews/primer/beta/flash_preview.rb index 18f87cb366..761b08c07a 100644 --- a/test/previews/primer/beta/flash_preview.rb +++ b/test/previews/primer/beta/flash_preview.rb @@ -4,7 +4,7 @@ module Primer module Beta # @label Flash class FlashPreview < ViewComponent::Preview - # @label Playground + # @label Default # # @param full toggle # @param spacious toggle @@ -12,7 +12,7 @@ class FlashPreview < ViewComponent::Preview # @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!") + def default(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 end diff --git a/test/previews/primer/beta/icon_button_preview.rb b/test/previews/primer/beta/icon_button_preview.rb index 3354091bc9..adaef4a15c 100644 --- a/test/previews/primer/beta/icon_button_preview.rb +++ b/test/previews/primer/beta/icon_button_preview.rb @@ -4,14 +4,14 @@ module Primer module Beta # @label IconButton class IconButtonPreview < ViewComponent::Preview - # @label Playground + # @label Default # @param scheme select [default, danger, invisible] # @param size select [small, medium, large] # @param aria_label text # @param disabled toggle # @param pressed toggle # @param tag select [a, summary, button] - def playground( + def default( scheme: :default, size: :medium, id: "button-preview", From 941c7932fa6e2b0767aaa47d2de4f75fc5718706 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 15 Sep 2022 20:11:44 +0000 Subject: [PATCH 4/8] remove hidden default --- test/previews/primer/beta/auto_complete_preview.rb | 5 ----- 1 file changed, 5 deletions(-) diff --git a/test/previews/primer/beta/auto_complete_preview.rb b/test/previews/primer/beta/auto_complete_preview.rb index 1b89d0277c..cbc81b902c 100644 --- a/test/previews/primer/beta/auto_complete_preview.rb +++ b/test/previews/primer/beta/auto_complete_preview.rb @@ -209,11 +209,6 @@ def trailing_visual_in_results(label_text: "Select a fruit", show_clear_button: render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete?visual=trailing", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) end - # @hidden - def default - render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete")) - end - # @hidden def with_non_visible_label render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", visually_hide_label: true)) From 0dd9f018ce7dfca8a24632197d8a7bc68ea37c8e Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 15 Sep 2022 20:29:55 +0000 Subject: [PATCH 5/8] Fixing remaining previews --- test/previews/preview_test.rb | 19 +++++++++++++++++++ .../primer/beta/auto_complete_item_preview.rb | 14 ++++++++++++++ .../default.html.erb | 9 +++++++++ .../primer/beta/icon_button_preview.rb | 1 - 4 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 test/previews/preview_test.rb create mode 100644 test/previews/primer/beta/auto_complete_item_preview/default.html.erb diff --git a/test/previews/preview_test.rb b/test/previews/preview_test.rb new file mode 100644 index 0000000000..3bcb7e2f9e --- /dev/null +++ b/test/previews/preview_test.rb @@ -0,0 +1,19 @@ +# frozen_string_literal: true + +require "test_helper" + +class PreviewTest < Minitest::Test + def setup + @previews = Dir.glob("test/previews/**/*.rb").reject { |f| f.include?("forms_preview") } + end + + def test_previews_exist + refute_empty(@previews) + end + + def test_previews_have_default_method + @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") + end + end +end diff --git a/test/previews/primer/beta/auto_complete_item_preview.rb b/test/previews/primer/beta/auto_complete_item_preview.rb index 7c39455cde..341235ebd2 100644 --- a/test/previews/primer/beta/auto_complete_item_preview.rb +++ b/test/previews/primer/beta/auto_complete_item_preview.rb @@ -4,6 +4,20 @@ module Primer module Beta # @label AutoCompleteItem class AutoCompleteItemPreview < ViewComponent::Preview + # @label Default + # @param selected toggle + # @param disabled toggle + # @param value text + def default(value: "", selected: false, disabled: false) + render_with_template( + locals: { + selected: selected, + disabled: disabled, + value: value + } + ) + end + # @label WithDescription # @param description_variant select [block, inline] # @param selected toggle diff --git a/test/previews/primer/beta/auto_complete_item_preview/default.html.erb b/test/previews/primer/beta/auto_complete_item_preview/default.html.erb new file mode 100644 index 0000000000..cc662c2ef3 --- /dev/null +++ b/test/previews/primer/beta/auto_complete_item_preview/default.html.erb @@ -0,0 +1,9 @@ +<%= render( + Primer::Beta::AutoComplete::Item.new( + selected: selected, + disabled: disabled, + value: '' + )) do |c| %> + <% c.leading_visual_icon(icon: :search) %> + Label text +<% end %> diff --git a/test/previews/primer/beta/icon_button_preview.rb b/test/previews/primer/beta/icon_button_preview.rb index adaef4a15c..56bdf34463 100644 --- a/test/previews/primer/beta/icon_button_preview.rb +++ b/test/previews/primer/beta/icon_button_preview.rb @@ -9,7 +9,6 @@ class IconButtonPreview < ViewComponent::Preview # @param size select [small, medium, large] # @param aria_label text # @param disabled toggle - # @param pressed toggle # @param tag select [a, summary, button] def default( scheme: :default, From 6c9ca292b1c244c728f581a4ab45eed23ff408c8 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 15 Sep 2022 20:32:18 +0000 Subject: [PATCH 6/8] Also remove storybook_url --- lib/tasks/docs.rake | 8 -------- 1 file changed, 8 deletions(-) diff --git a/lib/tasks/docs.rake b/lib/tasks/docs.rake index 992020f5f9..1b2f81e6be 100644 --- a/lib/tasks/docs.rake +++ b/lib/tasks/docs.rake @@ -131,7 +131,6 @@ namespace :docs do f.puts("componentId: #{data[:component_id]}") f.puts("status: #{data[:status]}") f.puts("source: #{data[:source]}") - f.puts("storybook: #{data[:storybook]}") f.puts("lookbook: #{data[:lookbook]}") if preview_exists?(component) f.puts("---") f.puts @@ -467,7 +466,6 @@ namespace :docs do component_id: short_name.underscore, status: status.capitalize, source: source_url(component), - storybook: storybook_url(component), lookbook: lookbook_url(component), path: "docs/content/components/#{status_path}#{short_name.downcase}.md", example_path: example_path(component), @@ -481,12 +479,6 @@ namespace :docs do "https://github.com/primer/view_components/tree/main/app/components/#{path}.rb" end - def storybook_url(component) - path = component.name.split("::").map { |n| n.underscore.dasherize }.join("-") - - "https://primer.style/view-components/stories/?path=/story/#{path}" - end - def lookbook_url(component) path = component.name.underscore.gsub("_component", "") From d67e4e85b665a65f2385dbbefce81c127b0e954c Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 15 Sep 2022 20:41:12 +0000 Subject: [PATCH 7/8] exclude generated docs previews --- test/previews/preview_test.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/previews/preview_test.rb b/test/previews/preview_test.rb index 3bcb7e2f9e..299db17b15 100644 --- a/test/previews/preview_test.rb +++ b/test/previews/preview_test.rb @@ -4,7 +4,7 @@ class PreviewTest < Minitest::Test def setup - @previews = Dir.glob("test/previews/**/*.rb").reject { |f| f.include?("forms_preview") } + @previews = Dir.glob("test/previews/**/*.rb").reject { |f| f.include?("forms_preview.rb") || f.include?("/docs/") } end def test_previews_exist From 898fbed8b7b318b603c523a5424bb471e3cc055b Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 15 Sep 2022 23:34:35 +0000 Subject: [PATCH 8/8] Fixing auto_complete test --- test/system/beta/auto_complete_component_test.rb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/test/system/beta/auto_complete_component_test.rb b/test/system/beta/auto_complete_component_test.rb index b4eb8cf15f..eaa9b90ca0 100644 --- a/test/system/beta/auto_complete_component_test.rb +++ b/test/system/beta/auto_complete_component_test.rb @@ -7,9 +7,9 @@ class IntegrationAutoCompleteTest < ApplicationSystemTestCase def test_renders_component visit_preview(:default) - assert_selector("auto-complete[for=\"test-id\"][src=\"/auto_complete\"]") do + assert_selector("auto-complete[for=\"list-id\"][src=\"/auto_complete\"]") do assert_selector("input.FormControl-input") - assert_selector("ul[id=\"test-id\"].ActionList", visible: false) + assert_selector("ul[id=\"list-id\"].ActionList", visible: false) end refute_selector(".ActionList-item") end @@ -21,7 +21,7 @@ def test_search_items fill_in "input-id", with: "a" # results are now visible - assert_selector("ul[id=\"test-id\"].ActionList", visible: true) + assert_selector("ul[id=\"list-id\"].ActionList", visible: true) assert_selector(".ActionList-item") end