primer_view_components 0.3.1 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (120) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +16 -0
  4. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +30 -0
  5. data/app/assets/javascripts/app/components/primer/alpha/dropdown/menu.d.ts +1 -0
  6. data/app/assets/javascripts/app/components/primer/alpha/dropdown.d.ts +1 -0
  7. data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +1 -0
  8. data/app/assets/javascripts/app/components/primer/alpha/modal_dialog.d.ts +18 -0
  9. data/app/assets/javascripts/app/components/primer/alpha/nav_list.d.ts +28 -0
  10. data/app/assets/javascripts/app/components/primer/alpha/segmented_control.d.ts +12 -0
  11. data/app/assets/javascripts/app/components/primer/alpha/tab_container.d.ts +1 -0
  12. data/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts +30 -0
  13. data/app/assets/javascripts/app/components/primer/alpha/tool_tip.d.ts +26 -0
  14. data/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +11 -0
  15. data/app/assets/javascripts/app/components/primer/anchored_position.d.ts +27 -0
  16. data/app/assets/javascripts/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
  17. data/app/assets/javascripts/app/components/primer/beta/clipboard_copy.d.ts +1 -0
  18. data/app/assets/javascripts/app/components/primer/beta/relative_time.d.ts +1 -0
  19. data/app/assets/javascripts/app/components/primer/focus_group.d.ts +19 -0
  20. data/app/assets/javascripts/app/components/primer/primer.d.ts +21 -0
  21. data/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts +10 -0
  22. data/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +1 -0
  23. data/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts +5 -0
  24. data/app/assets/javascripts/primer_view_components.js +1 -1
  25. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  26. data/app/assets/styles/primer_view_components.css +1 -1
  27. data/app/assets/styles/primer_view_components.css.map +1 -1
  28. data/app/components/primer/alpha/action_bar/divider.rb +30 -0
  29. data/app/components/primer/alpha/action_bar/item.rb +26 -0
  30. data/app/components/primer/alpha/action_bar.css +1 -0
  31. data/app/components/primer/alpha/action_bar.css.json +17 -0
  32. data/app/components/primer/alpha/action_bar.css.map +1 -0
  33. data/app/components/primer/alpha/action_bar.html.erb +12 -0
  34. data/app/components/primer/alpha/action_bar.pcss +69 -0
  35. data/app/components/primer/alpha/action_bar.rb +110 -0
  36. data/app/components/primer/alpha/action_bar_element.d.ts +16 -0
  37. data/app/components/primer/alpha/action_bar_element.js +172 -0
  38. data/app/components/primer/alpha/action_bar_element.ts +175 -0
  39. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -2
  40. data/app/components/primer/alpha/tool_tip.d.ts +3 -2
  41. data/app/components/primer/alpha/tool_tip.js +89 -44
  42. data/app/components/primer/alpha/tool_tip.ts +88 -41
  43. data/app/components/primer/alpha/tooltip.rb +1 -0
  44. data/app/components/primer/beta/link.css +1 -1
  45. data/app/components/primer/beta/link.css.map +1 -1
  46. data/app/components/primer/beta/link.pcss +4 -0
  47. data/app/components/primer/beta/link.rb +6 -10
  48. data/app/components/primer/primer.d.ts +1 -0
  49. data/app/components/primer/primer.js +1 -0
  50. data/app/components/primer/primer.pcss +1 -0
  51. data/app/components/primer/primer.ts +1 -0
  52. data/lib/primer/static/generate_previews.rb +9 -0
  53. data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -3
  54. data/lib/primer/view_components/version.rb +2 -2
  55. data/lib/primer/yard.rb +5 -0
  56. data/previews/primer/alpha/action_bar_preview/inline.html.erb +16 -0
  57. data/previews/primer/alpha/action_bar_preview.rb +77 -0
  58. data/previews/primer/alpha/action_list_preview.rb +10 -0
  59. data/previews/primer/alpha/action_menu_preview.rb +5 -0
  60. data/previews/primer/alpha/auto_complete_preview.rb +1 -0
  61. data/previews/primer/alpha/banner_preview.rb +9 -1
  62. data/previews/primer/alpha/button_marketing_preview.rb +2 -0
  63. data/previews/primer/alpha/check_box_group_preview.rb +1 -0
  64. data/previews/primer/alpha/check_box_preview.rb +6 -0
  65. data/previews/primer/alpha/dialog_preview.rb +1 -0
  66. data/previews/primer/alpha/dropdown_preview.rb +1 -0
  67. data/previews/primer/alpha/hellip_button_preview.rb +1 -0
  68. data/previews/primer/alpha/hidden_text_expander_preview.rb +1 -0
  69. data/previews/primer/alpha/layout_preview.rb +4 -0
  70. data/previews/primer/alpha/menu_preview.rb +1 -0
  71. data/previews/primer/alpha/multi_input_preview.rb +4 -0
  72. data/previews/primer/alpha/nav_list_preview.rb +3 -0
  73. data/previews/primer/alpha/radio_button_group_preview.rb +2 -0
  74. data/previews/primer/alpha/radio_button_preview.rb +10 -0
  75. data/previews/primer/alpha/segmented_control_preview.rb +13 -0
  76. data/previews/primer/alpha/select_preview.rb +6 -0
  77. data/previews/primer/alpha/tab_nav_preview.rb +3 -0
  78. data/previews/primer/alpha/tab_panels_preview.rb +1 -0
  79. data/previews/primer/alpha/text_area_preview.rb +7 -0
  80. data/previews/primer/alpha/text_field_preview.rb +15 -0
  81. data/previews/primer/alpha/toggle_switch_preview.rb +7 -0
  82. data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb +20 -0
  83. data/previews/primer/alpha/tooltip_preview.rb +7 -0
  84. data/previews/primer/alpha/underline_nav_preview.rb +2 -0
  85. data/previews/primer/beta/auto_complete_item_preview.rb +2 -0
  86. data/previews/primer/beta/auto_complete_preview.rb +7 -0
  87. data/previews/primer/beta/avatar_preview.rb +10 -0
  88. data/previews/primer/beta/avatar_stack_preview.rb +3 -0
  89. data/previews/primer/beta/blankslate_preview.rb +9 -0
  90. data/previews/primer/beta/border_box_preview.rb +4 -0
  91. data/previews/primer/beta/breadcrumbs_preview.rb +1 -0
  92. data/previews/primer/beta/button_group_preview.rb +4 -0
  93. data/previews/primer/beta/button_preview.rb +10 -0
  94. data/previews/primer/beta/clipboard_copy_preview.rb +2 -0
  95. data/previews/primer/beta/close_button_preview.rb +1 -0
  96. data/previews/primer/beta/counter_preview.rb +11 -0
  97. data/previews/primer/beta/flash_preview.rb +8 -0
  98. data/previews/primer/beta/heading_preview.rb +1 -0
  99. data/previews/primer/beta/icon_button_preview.rb +3 -0
  100. data/previews/primer/beta/label_preview.rb +13 -0
  101. data/previews/primer/beta/link_preview.rb +11 -9
  102. data/previews/primer/beta/markdown_preview.rb +1 -0
  103. data/previews/primer/beta/octicon_preview.rb +1 -0
  104. data/previews/primer/beta/popover_preview.rb +6 -0
  105. data/previews/primer/beta/progress_bar_preview.rb +4 -0
  106. data/previews/primer/beta/spinner_preview.rb +1 -0
  107. data/previews/primer/beta/state_preview.rb +6 -0
  108. data/previews/primer/beta/subhead_preview.rb +4 -0
  109. data/previews/primer/beta/text_preview.rb +1 -0
  110. data/previews/primer/beta/timeline_item_preview.rb +1 -0
  111. data/previews/primer/beta/truncate_preview.rb +1 -0
  112. data/previews/primer/box_preview.rb +2 -0
  113. data/static/arguments.json +51 -7
  114. data/static/audited_at.json +3 -0
  115. data/static/classes.json +21 -0
  116. data/static/constants.json +20 -6
  117. data/static/info_arch.json +669 -7
  118. data/static/previews.json +571 -0
  119. data/static/statuses.json +3 -0
  120. metadata +43 -8
data/lib/primer/yard.rb CHANGED
@@ -1,6 +1,9 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ require "yard"
4
+
3
5
  module Primer
6
+ # :nodoc:
4
7
  module Yard
5
8
  autoload :Backend, "primer/yard/backend"
6
9
  autoload :ComponentManifest, "primer/yard/component_manifest"
@@ -11,5 +14,7 @@ module Primer
11
14
  autoload :Registry, "primer/yard/registry"
12
15
  autoload :RendersManyHandler, "primer/yard/renders_many_handler"
13
16
  autoload :RendersOneHandler, "primer/yard/renders_one_handler"
17
+
18
+ ::YARD::Tags::Library.define_tag("Snapshot preview", :snapshot)
14
19
  end
15
20
  end
@@ -0,0 +1,16 @@
1
+
2
+ <%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
3
+ <%= render(Primer::Beta::Heading.new(tag: :h1, font_size: 3, mr: 2)) { "Title" }%>
4
+ <%= render(Primer::Alpha::ActionBar.new) do |component| %>
5
+ <% component.with_item_icon_button(icon: :search, label: "Search") %>
6
+ <% component.with_item_icon_button(icon: :pencil, label: "Edit") %>
7
+ <% component.with_item_icon_button(icon: :archive, label: "Archive") %>
8
+ <% component.with_item_divider %>
9
+ <% component.with_item_icon_button(icon: :heart, label: "Heart") %>
10
+ <% component.with_item_icon_button(icon: :bookmark, label: "Bookmark") %>
11
+ <% component.with_item_icon_button(icon: :mention, label: "Mention") %>
12
+ <% component.with_item_divider %>
13
+ <% component.with_item_icon_button(icon: :paperclip, label: "Attach") %>
14
+ <% end %>
15
+ <%= render(Primer::Beta::Button.new(scheme: :primary, ml: 2)) { "New Issue"} %>
16
+ <% end %>
@@ -0,0 +1,77 @@
1
+ # typed: true
2
+ # frozen_string_literal: true
3
+
4
+ # Setup Playground to use all available component props
5
+ # Setup Features to use individual component props and combinations
6
+
7
+ module Primer
8
+ module Alpha
9
+ # @label ActionBar
10
+ class ActionBarPreview < ViewComponent::Preview
11
+ # @label Default
12
+ # @snapshot
13
+ def default
14
+ render(Primer::Alpha::ActionBar.new) do |component|
15
+ component.with_item_icon_button(icon: :search, label: "Search")
16
+ component.with_item_icon_button(icon: :pencil, label: "Edit")
17
+ component.with_item_icon_button(icon: :archive, label: "Archive")
18
+ component.with_item_divider
19
+ component.with_item_icon_button(icon: :heart, label: "Heart")
20
+ component.with_item_icon_button(icon: :bookmark, label: "Bookmark")
21
+ component.with_item_icon_button(icon: :mention, label: "Mention")
22
+ component.with_item_divider
23
+ component.with_item_icon_button(icon: :paperclip, label: "Attach")
24
+ end
25
+ end
26
+
27
+ # @label Inline with other components
28
+ def inline; end
29
+
30
+ # @label Playground
31
+ # @param size [Symbol] select [[Small, small], [Medium, medium], [Large, large]]
32
+ # @param overflow_menu [Boolean]
33
+ def playground(size: :medium, overflow_menu: true)
34
+ render(Primer::Alpha::ActionBar.new(size: size, overflow_menu: overflow_menu)) do |component|
35
+ component.with_item_icon_button(icon: :search, label: "Search")
36
+ component.with_item_icon_button(icon: :pencil, label: "Edit")
37
+ component.with_item_icon_button(icon: :archive, label: "Archive")
38
+ component.with_item_divider
39
+ component.with_item_icon_button(icon: :heart, label: "Heart")
40
+ component.with_item_icon_button(icon: :bookmark, label: "Bookmark")
41
+ component.with_item_icon_button(icon: :mention, label: "Mention")
42
+ component.with_item_divider
43
+ component.with_item_icon_button(icon: :paperclip, label: "Attach")
44
+ end
45
+ end
46
+
47
+ # @!group sizes
48
+ def small
49
+ render(Primer::Alpha::ActionBar.new(size: :small)) do |component|
50
+ component.with_item_icon_button(icon: :search, label: "Search")
51
+ component.with_item_icon_button(icon: :pencil, label: "Edit")
52
+ component.with_item_icon_button(icon: :archive, label: "Archive")
53
+ component.with_item_divider
54
+ end
55
+ end
56
+
57
+ def medium
58
+ render(Primer::Alpha::ActionBar.new(size: :medium)) do |component|
59
+ component.with_item_icon_button(icon: :search, label: "Search")
60
+ component.with_item_icon_button(icon: :pencil, label: "Edit")
61
+ component.with_item_icon_button(icon: :archive, label: "Archive")
62
+ component.with_item_divider
63
+ end
64
+ end
65
+
66
+ def large
67
+ render(Primer::Alpha::ActionBar.new(size: :large)) do |component|
68
+ component.with_item_icon_button(icon: :search, label: "Search")
69
+ component.with_item_icon_button(icon: :pencil, label: "Edit")
70
+ component.with_item_icon_button(icon: :archive, label: "Archive")
71
+ component.with_item_divider
72
+ end
73
+ end
74
+ # @!endgroup
75
+ end
76
+ end
77
+ end
@@ -37,6 +37,7 @@ module Primer
37
37
  # @param role text
38
38
  # @param scheme [Symbol] select [full, inset]
39
39
  # @param show_dividers toggle
40
+ # @snapshot
40
41
  def default(
41
42
  role: Primer::Alpha::ActionList::DEFAULT_ROLE,
42
43
  scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
@@ -137,6 +138,7 @@ module Primer
137
138
  # @param title text
138
139
  # @param subtitle text
139
140
  # @param list_id text
141
+ # @snapshot
140
142
  def heading(
141
143
  scheme: Primer::Alpha::ActionList::Heading::DEFAULT_SCHEME,
142
144
  title: "This is a title",
@@ -237,6 +239,7 @@ module Primer
237
239
  end
238
240
 
239
241
  # @label Item [default]
242
+ # @snapshot
240
243
  def item_default
241
244
  render(Primer::Alpha::ActionList.new(
242
245
  aria: { label: "List heading" }
@@ -286,6 +289,7 @@ module Primer
286
289
  end
287
290
 
288
291
  # @label Item [leading and trailing visual]
292
+ # @snapshot
289
293
  def item_leading_trailing_visual
290
294
  render(Primer::Alpha::ActionList.new(
291
295
  aria: { label: "List heading" }
@@ -298,6 +302,7 @@ module Primer
298
302
  end
299
303
 
300
304
  # @label Item [description]
305
+ # @snapshot
301
306
  def item_with_description
302
307
  render(Primer::Alpha::ActionList.new(
303
308
  aria: { label: "List heading" }
@@ -309,6 +314,7 @@ module Primer
309
314
  end
310
315
 
311
316
  # @label Item [inline description]
317
+ # @snapshot
312
318
  def item_with_description_inline
313
319
  render(Primer::Alpha::ActionList.new(
314
320
  aria: { label: "List heading" }
@@ -320,6 +326,7 @@ module Primer
320
326
  end
321
327
 
322
328
  # @label Item [trailing action]
329
+ # @snapshot
323
330
  def item_trailing_action
324
331
  render(Primer::Alpha::ActionList.new(
325
332
  aria: { label: "List heading" }
@@ -331,6 +338,7 @@ module Primer
331
338
  end
332
339
 
333
340
  # @label Item [danger]
341
+ # @snapshot
334
342
  def item_danger
335
343
  render(Primer::Alpha::ActionList.new(
336
344
  aria: { label: "List heading" }
@@ -340,6 +348,7 @@ module Primer
340
348
  end
341
349
 
342
350
  # @label Item [disabled]
351
+ # @snapshot
343
352
  def item_disabled
344
353
  render(Primer::Alpha::ActionList.new(
345
354
  aria: { label: "List heading" }
@@ -370,6 +379,7 @@ module Primer
370
379
  end
371
380
 
372
381
  # @label Item [active]
382
+ # @snapshot
373
383
  def item_active
374
384
  render(Primer::Alpha::ActionList.new(
375
385
  aria: { label: "List heading" }
@@ -32,6 +32,7 @@ module Primer
32
32
 
33
33
  # @label Default
34
34
  #
35
+ # @snapshot interactive
35
36
  def default
36
37
  render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
37
38
  menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
@@ -50,6 +51,7 @@ module Primer
50
51
 
51
52
  # @label Wide
52
53
  #
54
+ # @snapshot interactive
53
55
  def wide
54
56
  render(Primer::Alpha::ActionMenu.new(select_variant: :single, size: :medium)) do |menu|
55
57
  menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "A wider menu" }
@@ -119,6 +121,7 @@ module Primer
119
121
 
120
122
  # @label Single item selected
121
123
  #
124
+ # @snapshot interactive
122
125
  def single_selected_item
123
126
  render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
124
127
  menu.with_show_button { "Menu" }
@@ -130,6 +133,7 @@ module Primer
130
133
 
131
134
  # @label Single Select with Internal Label
132
135
  #
136
+ # @snapshot interactive
133
137
  def single_select_with_internal_label
134
138
  render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu|
135
139
  menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
@@ -143,6 +147,7 @@ module Primer
143
147
 
144
148
  # @label Multiple items selected
145
149
  #
150
+ # @snapshot interactive
146
151
  def multiple_selected_items
147
152
  render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
148
153
  menu.with_show_button { "Menu" }
@@ -35,6 +35,7 @@ module Primer
35
35
  # @param is_label_inline toggle
36
36
  # @param with_icon toggle
37
37
  # @param is_clearable toggle
38
+ # @snapshot
38
39
  def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
39
40
  # rubocop:disable Primer/ComponentNameMigration
40
41
  render(
@@ -27,21 +27,25 @@ module Primer
27
27
  # @!group Schemes
28
28
  #
29
29
  # @label Default scheme
30
+ # @snapshot
30
31
  def scheme_default
31
32
  render(Primer::Alpha::Banner.new) { "This is a default banner." }
32
33
  end
33
34
 
34
35
  # @label Danger
36
+ # @snapshot
35
37
  def scheme_danger
36
38
  render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" }
37
39
  end
38
40
 
39
41
  # @label Success
42
+ # @snapshot
40
43
  def scheme_success
41
44
  render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" }
42
45
  end
43
46
 
44
47
  # @label Warning
48
+ # @snapshot
45
49
  def scheme_warning
46
50
  render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
47
51
  end
@@ -49,11 +53,13 @@ module Primer
49
53
  # @!endgroup
50
54
 
51
55
  # @label Dismissable
56
+ # @snapshot
52
57
  def dismissable
53
- render(Primer::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
58
+ render(Primer::Alpha::Banner.new(dismissible: true, reappear: true)) { "This is a dismissable banner." }
54
59
  end
55
60
 
56
61
  # @!group Full Width
62
+ # @snapshot
57
63
  #
58
64
  # @label Full width
59
65
  def full_width
@@ -75,6 +81,7 @@ module Primer
75
81
  # @param scheme [Symbol] select [default, warning, danger, success]
76
82
  # @param content text
77
83
  # @param reappear [Boolean]
84
+ # @snapshot
78
85
  def with_action_button(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner with an action!")
79
86
  icon = nil if icon == :none
80
87
  render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
@@ -88,6 +95,7 @@ module Primer
88
95
  # @param scheme [Symbol] select [default, warning, danger, success]
89
96
  # @param content text
90
97
  # @param reappear [Boolean]
98
+ # @snapshot
91
99
  def with_action_content(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "Did you know? Comments can be edited.")
92
100
  icon = nil if icon == :none
93
101
  render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
@@ -24,6 +24,7 @@ module Primer
24
24
  end
25
25
 
26
26
  # @!group Size Variants
27
+ # @snapshot
27
28
  #
28
29
  # @label Default
29
30
  def sizes_default
@@ -37,6 +38,7 @@ module Primer
37
38
  # @!endgroup
38
39
 
39
40
  # @!group Schemes
41
+ # @snapshot
40
42
  #
41
43
  # @label Default
42
44
  def scheme_default
@@ -42,6 +42,7 @@ module Primer
42
42
  end
43
43
 
44
44
  # @!group Options
45
+ # @snapshot
45
46
  #
46
47
  # @label With caption
47
48
  def with_caption
@@ -40,12 +40,18 @@ module Primer
40
40
  end
41
41
 
42
42
  # @!group Options
43
+ # @snapshot
43
44
  #
44
45
  # @label With caption
45
46
  def with_caption
46
47
  render(Primer::Alpha::CheckBox.new(caption: "With a caption", name: "my-check-box1", label: "Jean-Luc Picard"))
47
48
  end
48
49
 
50
+ # @label Checked
51
+ def checked
52
+ render(Primer::Alpha::CheckBox.new(checked: true, name: "my-check-box1", label: "Jean-Luc Picard"))
53
+ end
54
+
49
55
  # @label Visually hidden label
50
56
  def visually_hide_label
51
57
  render(Primer::Alpha::CheckBox.new(visually_hide_label: true, name: "my-check-box2", label: "Jean-Luc Picard"))
@@ -37,6 +37,7 @@ module Primer
37
37
  # @param visually_hide_title [Boolean] toggle
38
38
  # @param button_text [String] text
39
39
  # @param body_text [String] text
40
+ # @snapshot interactive
40
41
  def default(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false)
41
42
  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|
42
43
  d.with_show_button { button_text }
@@ -24,6 +24,7 @@ module Primer
24
24
 
25
25
  # @label Default
26
26
  #
27
+ # @snapshot interactive
27
28
  def default
28
29
  render(Primer::Alpha::Dropdown.new) do |component|
29
30
  component.with_button { "Dropdown" }
@@ -8,6 +8,7 @@ module Primer
8
8
  #
9
9
  # @param aria_label [String]
10
10
  # @param inline [Boolean]
11
+ # @snapshot
11
12
  def default(inline: false, aria_label: "No effect")
12
13
  render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
13
14
  end
@@ -14,6 +14,7 @@ module Primer
14
14
  # @label Default options
15
15
  # @param label [String] text
16
16
  # @param inline [Boolean] toggle
17
+ # @snapshot
17
18
  def default(label: "No effect", inline: false)
18
19
  render(Primer::Alpha::HiddenTextExpander.new(inline: inline, "aria-label": label))
19
20
  end
@@ -20,6 +20,7 @@ module Primer
20
20
  end
21
21
 
22
22
  # @label Default
23
+ # @snapshot
23
24
  def default
24
25
  render(Primer::Alpha::Layout.new) do |component|
25
26
  component.with_main(bg: :attention, p: 6) do
@@ -32,6 +33,7 @@ module Primer
32
33
  end
33
34
 
34
35
  # @!group Gutter
36
+ # @snapshot
35
37
  #
36
38
  # @label None
37
39
  def gutter_none
@@ -104,6 +106,7 @@ module Primer
104
106
  # @!endgroup
105
107
 
106
108
  # @!group Sidebar width
109
+ # @snapshot
107
110
  #
108
111
  # @label Narrow
109
112
  def sidebar_width_narrow
@@ -132,6 +135,7 @@ module Primer
132
135
  # @!endgroup
133
136
 
134
137
  # @!group Sidebar column placement
138
+ # @snapshot
135
139
  #
136
140
  # @label Start
137
141
  def sidebar_col_placement_start
@@ -8,6 +8,7 @@ module Primer
8
8
  def playground; end
9
9
 
10
10
  # @label Default
11
+ # @snapshot
11
12
  def default; end
12
13
  end
13
14
  end
@@ -26,6 +26,7 @@ module Primer
26
26
  end
27
27
 
28
28
  # @label Default
29
+ # @snapshot
29
30
  def default
30
31
  render_with_template(
31
32
  template: "primer/alpha/multi_input_preview/playground",
@@ -38,6 +39,7 @@ module Primer
38
39
  end
39
40
 
40
41
  # @label With caption
42
+ # @snapshot
41
43
  def with_caption
42
44
  render_with_template(
43
45
  template: "primer/alpha/multi_input_preview/playground",
@@ -51,6 +53,7 @@ module Primer
51
53
  end
52
54
 
53
55
  # @label Visually hidden label
56
+ # @snapshot
54
57
  def visually_hide_label
55
58
  render_with_template(
56
59
  template: "primer/alpha/multi_input_preview/playground",
@@ -64,6 +67,7 @@ module Primer
64
67
  end
65
68
 
66
69
  # @label Disabled
70
+ # @snapshot
67
71
  def disabled
68
72
  render_with_template(
69
73
  template: "primer/alpha/multi_input_preview/playground",
@@ -32,6 +32,7 @@ module Primer
32
32
  end
33
33
 
34
34
  # @label Default
35
+ # @snapshot
35
36
  def default
36
37
  render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
37
38
  list.with_heading(title: "Repository settings")
@@ -85,6 +86,7 @@ module Primer
85
86
  end
86
87
 
87
88
  # @label Show more item
89
+ # @snapshot
88
90
  def show_more_item
89
91
  render(Primer::Alpha::NavList.new(aria: { label: "My favorite foods" })) do |list|
90
92
  list.with_group do |group|
@@ -99,6 +101,7 @@ module Primer
99
101
  end
100
102
 
101
103
  # @label Trailing action
104
+ # @snapshot
102
105
  def trailing_action; end
103
106
  end
104
107
  end
@@ -31,6 +31,7 @@ module Primer
31
31
  end
32
32
 
33
33
  # @label Default
34
+ # @snapshot
34
35
  def default
35
36
  render(Primer::Alpha::RadioButtonGroup.new(name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
36
37
  component.radio_button(label: "Bears", value: "bears")
@@ -42,6 +43,7 @@ module Primer
42
43
  # @!group Options
43
44
  #
44
45
  # @label With caption
46
+ # @snapshot
45
47
  def with_caption
46
48
  render(Primer::Alpha::RadioButtonGroup.new(caption: "With a caption", name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
47
49
  component.radio_button(label: "Bears", value: "bears1")
@@ -35,6 +35,7 @@ module Primer
35
35
  end
36
36
 
37
37
  # @label Default
38
+ # @snapshot
38
39
  def default
39
40
  render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg"))
40
41
  end
@@ -42,16 +43,25 @@ module Primer
42
43
  # @!group Options
43
44
  #
44
45
  # @label With caption
46
+ # @snapshot
45
47
  def with_caption
46
48
  render(Primer::Alpha::RadioButton.new(caption: "With a caption", name: "my-radio-button", label: "Battlestar Galactica", value: "bsg1"))
47
49
  end
48
50
 
51
+ # @label Checked
52
+ # @snapshot
53
+ def checked
54
+ render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true ))
55
+ end
56
+
49
57
  # @label Visually hidden label
58
+ # @snapshot
50
59
  def visually_hide_label
51
60
  render(Primer::Alpha::RadioButton.new(visually_hide_label: true, name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2"))
52
61
  end
53
62
 
54
63
  # @label Disabled
64
+ # @snapshot
55
65
  def disabled
56
66
  render(Primer::Alpha::RadioButton.new(disabled: true, name: "my-radio-button", label: "Battlestar Galactica", value: "bsg4"))
57
67
  end
@@ -24,6 +24,7 @@ module Primer
24
24
  end
25
25
 
26
26
  # @label Default
27
+ # @snapshot
27
28
  def default
28
29
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
29
30
  component.with_item(label: "Preview", selected: true)
@@ -35,6 +36,7 @@ module Primer
35
36
  # @!group Full width
36
37
  # @label Size small
37
38
  # @param hide_labels [Boolean] toggle
39
+ # @snapshot
38
40
  def full_width_small(hide_labels: false)
39
41
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |component|
40
42
  component.with_item(label: "Preview", selected: true)
@@ -45,6 +47,7 @@ module Primer
45
47
 
46
48
  # @label Size medium
47
49
  # @param hide_labels [Boolean] toggle
50
+ # @snapshot
48
51
  def full_width_medium(hide_labels: false)
49
52
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |component|
50
53
  component.with_item(label: "Preview", selected: true)
@@ -55,6 +58,7 @@ module Primer
55
58
 
56
59
  # @label Size large
57
60
  # @param hide_labels [Boolean] toggle
61
+ # @snapshot
58
62
  def full_width_large(hide_labels: false)
59
63
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
60
64
  component.with_item(label: "Preview", selected: true)
@@ -66,6 +70,7 @@ module Primer
66
70
 
67
71
  # @!group Icons and text
68
72
  # @label Size small
73
+ # @snapshot
69
74
  def icons_and_text_small
70
75
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component|
71
76
  component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -75,6 +80,7 @@ module Primer
75
80
  end
76
81
 
77
82
  # @label Size medium
83
+ # @snapshot
78
84
  def icons_and_text_medium
79
85
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |component|
80
86
  component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -84,6 +90,7 @@ module Primer
84
90
  end
85
91
 
86
92
  # @label Size large
93
+ # @snapshot
87
94
  def icons_and_text_large
88
95
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
89
96
  component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -95,6 +102,7 @@ module Primer
95
102
 
96
103
  # @!group Icons only
97
104
  # @label Size small
105
+ # @snapshot
98
106
  def icon_only_small
99
107
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |component|
100
108
  component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -104,6 +112,7 @@ module Primer
104
112
  end
105
113
 
106
114
  # @label Size medium
115
+ # @snapshot
107
116
  def icon_only_medium
108
117
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |component|
109
118
  component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -113,6 +122,7 @@ module Primer
113
122
  end
114
123
 
115
124
  # @label Size large
125
+ # @snapshot
116
126
  def icon_only_large
117
127
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
118
128
  component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -151,6 +161,7 @@ module Primer
151
161
 
152
162
  # NOTE: this preview uses a group to force it's display below the other groups
153
163
  # @!group With link as tag
164
+ # @snapshot
154
165
  def with_link_as_tag
155
166
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
156
167
  component.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
@@ -161,8 +172,10 @@ module Primer
161
172
  # @!endgroup
162
173
 
163
174
  # @!group With aria labeled headings
175
+ # @snapshot
164
176
  def with_subhead_actions; end
165
177
 
178
+ # @snapshot
166
179
  def with_label_and_caption; end
167
180
  # @!endgroup
168
181
  end
@@ -65,6 +65,7 @@ module Primer
65
65
  # @!group Options
66
66
  #
67
67
  # @label With caption
68
+ # @snapshot
68
69
  def with_caption
69
70
  render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list", label: "Favorite place to visit")) do |component|
70
71
  component.option(label: "Lopez Island", value: "lopez")
@@ -75,6 +76,7 @@ module Primer
75
76
  end
76
77
 
77
78
  # @label Visually hidden label
79
+ # @snapshot
78
80
  def visually_hide_label
79
81
  render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
80
82
  component.option(label: "Lopez Island", value: "lopez")
@@ -85,6 +87,7 @@ module Primer
85
87
  end
86
88
 
87
89
  # @label Full width
90
+ # @snapshot
88
91
  def full_width
89
92
  render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
90
93
  component.option(label: "Lopez Island", value: "lopez")
@@ -95,6 +98,7 @@ module Primer
95
98
  end
96
99
 
97
100
  # @label Disabled
101
+ # @snapshot
98
102
  def disabled
99
103
  render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
100
104
  component.option(label: "Lopez Island", value: "lopez")
@@ -105,6 +109,7 @@ module Primer
105
109
  end
106
110
 
107
111
  # @label Invalid
112
+ # @snapshot
108
113
  def invalid
109
114
  render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
110
115
  component.option(label: "Lopez Island", value: "lopez")
@@ -115,6 +120,7 @@ module Primer
115
120
  end
116
121
 
117
122
  # @label With validation message
123
+ # @snapshot
118
124
  def with_validation_message
119
125
  render(Primer::Alpha::Select.new(validation_message: "An error occurred!", name: "my-select-list", label: "Favorite place to visit")) do |component|
120
126
  component.option(label: "Lopez Island", value: "lopez")