primer_view_components 0.0.115 → 0.0.117

Sign up to get free protection for your applications and to get access to all the features.
Files changed (198) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +50 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +2 -2
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/divider.rb +0 -2
  8. data/app/components/primer/alpha/action_list/heading.rb +0 -2
  9. data/app/components/primer/alpha/action_list/item.rb +0 -2
  10. data/app/components/primer/alpha/action_list.css +1 -1
  11. data/app/components/primer/alpha/action_list.css.json +1 -1
  12. data/app/components/primer/alpha/action_list.css.map +1 -1
  13. data/app/components/primer/alpha/action_list.rb +0 -1
  14. data/app/components/primer/alpha/auto_complete/item.rb +4 -5
  15. data/app/components/primer/alpha/auto_complete.rb +12 -13
  16. data/app/components/primer/alpha/banner.rb +0 -1
  17. data/app/components/primer/alpha/button_marketing.rb +0 -2
  18. data/app/components/primer/alpha/dialog.rb +0 -3
  19. data/app/components/primer/alpha/dropdown/menu.rb +2 -0
  20. data/app/components/primer/alpha/dropdown.html.erb +3 -3
  21. data/app/components/primer/alpha/dropdown.rb +53 -53
  22. data/app/components/primer/alpha/hellip_button.rb +41 -0
  23. data/app/components/primer/alpha/hidden_text_expander.rb +1 -1
  24. data/app/components/primer/alpha/image.rb +0 -1
  25. data/app/components/primer/alpha/layout.rb +49 -49
  26. data/app/components/primer/alpha/menu.css +1 -1
  27. data/app/components/primer/alpha/menu.css.json +1 -1
  28. data/app/components/primer/alpha/menu.css.map +1 -1
  29. data/app/components/primer/alpha/menu.rb +5 -5
  30. data/app/components/primer/alpha/octicon_symbols.rb +0 -2
  31. data/app/components/primer/alpha/segmented_control.css +1 -1
  32. data/app/components/primer/alpha/segmented_control.css.json +1 -1
  33. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  34. data/app/components/primer/alpha/segmented_control.pcss +12 -0
  35. data/app/components/primer/alpha/segmented_control.rb +20 -20
  36. data/app/components/primer/{tab_container_component.d.ts → alpha/tab_container.d.ts} +0 -0
  37. data/app/components/primer/{tab_container_component.js → alpha/tab_container.js} +0 -0
  38. data/app/components/primer/alpha/tab_container.rb +43 -0
  39. data/app/components/primer/{tab_container_component.ts → alpha/tab_container.ts} +0 -0
  40. data/app/components/primer/alpha/tab_nav.css +1 -1
  41. data/app/components/primer/alpha/tab_nav.css.json +1 -1
  42. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  43. data/app/components/primer/alpha/tab_nav.rb +32 -32
  44. data/app/components/primer/alpha/tab_panels.rb +6 -6
  45. data/app/components/primer/alpha/text_field.rb +0 -1
  46. data/app/components/primer/alpha/toggle_switch.rb +6 -8
  47. data/app/components/primer/alpha/tool_tip.js +3 -7
  48. data/app/components/primer/alpha/tool_tip.ts +3 -7
  49. data/app/components/primer/alpha/tooltip.rb +18 -20
  50. data/app/components/primer/alpha/underline_nav.css +1 -1
  51. data/app/components/primer/alpha/underline_nav.css.json +1 -1
  52. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  53. data/app/components/primer/alpha/underline_nav.rb +18 -18
  54. data/app/components/primer/alpha/underline_panels.rb +6 -6
  55. data/app/components/primer/beta/auto_complete/item.rb +2 -2
  56. data/app/components/primer/beta/auto_complete.rb +17 -17
  57. data/app/components/primer/beta/avatar.rb +0 -1
  58. data/app/components/primer/beta/avatar_stack.rb +12 -12
  59. data/app/components/primer/beta/base_button.rb +0 -1
  60. data/app/components/primer/beta/blankslate.rb +42 -42
  61. data/app/components/primer/beta/breadcrumbs.css +1 -1
  62. data/app/components/primer/beta/breadcrumbs.css.json +1 -1
  63. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  64. data/app/components/primer/beta/button.css +1 -1
  65. data/app/components/primer/beta/button.css.json +1 -1
  66. data/app/components/primer/beta/button.css.map +1 -1
  67. data/app/components/primer/beta/button.pcss +5 -0
  68. data/app/components/primer/beta/button.rb +9 -9
  69. data/app/components/primer/beta/button_group.rb +2 -0
  70. data/app/components/primer/beta/clipboard_copy.rb +0 -1
  71. data/app/components/primer/beta/close_button.rb +0 -1
  72. data/app/components/primer/beta/counter.rb +0 -1
  73. data/app/components/primer/beta/details.rb +5 -3
  74. data/app/components/primer/beta/heading.rb +0 -1
  75. data/app/components/primer/beta/icon_button.rb +0 -1
  76. data/app/components/primer/beta/label.rb +0 -1
  77. data/app/components/primer/beta/link.rb +2 -2
  78. data/app/components/primer/beta/markdown.rb +0 -1
  79. data/app/components/primer/beta/progress_bar.rb +7 -7
  80. data/app/components/primer/beta/relative_time.rb +0 -1
  81. data/app/components/primer/beta/spinner.rb +0 -1
  82. data/app/components/primer/{state_component.css → beta/state.css} +0 -0
  83. data/app/components/primer/beta/state.css.json +1 -0
  84. data/app/components/primer/beta/state.css.map +1 -0
  85. data/app/components/primer/{state_component.pcss → beta/state.pcss} +0 -0
  86. data/app/components/primer/beta/state.rb +76 -0
  87. data/app/components/primer/{subhead_component.css → beta/subhead.css} +0 -0
  88. data/app/components/primer/beta/subhead.css.json +1 -0
  89. data/app/components/primer/beta/subhead.css.map +1 -0
  90. data/app/components/primer/{subhead_component.html.erb → beta/subhead.html.erb} +0 -0
  91. data/app/components/primer/{subhead_component.pcss → beta/subhead.pcss} +0 -0
  92. data/app/components/primer/beta/subhead.rb +135 -0
  93. data/app/components/primer/beta/text.rb +0 -1
  94. data/app/components/primer/{timeline_item_component.css → beta/timeline_item.css} +0 -0
  95. data/app/components/primer/beta/timeline_item.css.json +1 -0
  96. data/app/components/primer/beta/timeline_item.css.map +1 -0
  97. data/app/components/primer/{timeline_item_component.html.erb → beta/timeline_item.html.erb} +0 -0
  98. data/app/components/primer/{timeline_item_component.pcss → beta/timeline_item.pcss} +0 -0
  99. data/app/components/primer/beta/timeline_item.rb +90 -0
  100. data/app/components/primer/beta/truncate.css +1 -1
  101. data/app/components/primer/beta/truncate.css.json +1 -1
  102. data/app/components/primer/beta/truncate.css.map +1 -1
  103. data/app/components/primer/beta/truncate.rb +2 -2
  104. data/app/components/primer/box.rb +0 -1
  105. data/app/components/primer/button_component.rb +11 -11
  106. data/app/components/primer/conditional_wrapper.rb +0 -2
  107. data/app/components/primer/dropdown_menu_component.rb +3 -3
  108. data/app/components/primer/hellip_button.rb +2 -36
  109. data/app/components/primer/icon_button.rb +0 -1
  110. data/app/components/primer/layout_component.rb +0 -2
  111. data/app/components/primer/local_time.rb +0 -1
  112. data/app/components/primer/navigation/tab_component.rb +16 -16
  113. data/app/components/primer/octicon_component.rb +0 -1
  114. data/app/components/primer/primer.d.ts +1 -1
  115. data/app/components/primer/primer.js +1 -1
  116. data/app/components/primer/primer.pcss +3 -3
  117. data/app/components/primer/primer.ts +1 -1
  118. data/app/components/primer/state_component.rb +2 -70
  119. data/app/components/primer/subhead_component.rb +2 -130
  120. data/app/components/primer/tab_container_component.rb +2 -38
  121. data/app/components/primer/time_ago_component.rb +0 -1
  122. data/app/components/primer/timeline_item_component.rb +5 -79
  123. data/app/components/primer/tooltip.rb +0 -1
  124. data/app/components/primer/truncate.rb +0 -2
  125. data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -0
  126. data/app/forms/example_toggle_switch_form.rb +8 -0
  127. data/app/forms/submit_button_form.rb +4 -4
  128. data/app/lib/primer/tabbed_component_helper.rb +1 -1
  129. data/lib/primer/deprecations.rb +7 -13
  130. data/lib/primer/deprecations.yml +24 -0
  131. data/lib/primer/forms/builder.rb +2 -3
  132. data/lib/primer/forms/button.html.erb +2 -2
  133. data/lib/primer/forms/dsl/form_reference_input.rb +25 -2
  134. data/lib/primer/forms/dsl/input.rb +27 -0
  135. data/lib/primer/forms/dsl/toggle_switch_input.rb +35 -0
  136. data/lib/primer/forms/form_reference.html.erb +1 -1
  137. data/lib/primer/forms/form_reference.rb +4 -0
  138. data/lib/primer/forms/toggle_switch.html.erb +17 -0
  139. data/lib/primer/forms/toggle_switch.rb +19 -0
  140. data/lib/primer/forms/toggle_switch_form.rb +74 -0
  141. data/lib/primer/view_components/linters/subhead_component_migration_counter.rb +1 -1
  142. data/lib/primer/view_components/version.rb +1 -1
  143. data/lib/rubocop/cop/primer/component_name_migration.rb +2 -1
  144. data/lib/tasks/docs.rake +6 -6
  145. data/previews/primer/alpha/action_list_preview.rb +44 -44
  146. data/previews/primer/alpha/dropdown_preview.rb +97 -97
  147. data/previews/primer/alpha/hellip_button_preview.rb +24 -0
  148. data/previews/primer/alpha/layout_preview.rb +63 -63
  149. data/previews/primer/alpha/menu_preview/default.html.erb +5 -5
  150. data/previews/primer/alpha/menu_preview/playground.html.erb +5 -5
  151. data/previews/primer/alpha/segmented_control_preview.rb +60 -60
  152. data/previews/primer/alpha/tab_nav_preview.rb +22 -22
  153. data/previews/primer/alpha/tab_panels_preview.rb +8 -8
  154. data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +6 -6
  155. data/previews/primer/alpha/tooltip_preview.rb +12 -12
  156. data/previews/primer/alpha/underline_nav_preview.rb +4 -4
  157. data/previews/primer/alpha/underline_panels_preview.rb +8 -8
  158. data/previews/primer/beta/auto_complete_item_preview/default.html.erb +2 -2
  159. data/previews/primer/beta/auto_complete_item_preview/playground.html.erb +2 -2
  160. data/previews/primer/beta/auto_complete_item_preview/with_description.html.erb +3 -3
  161. data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +2 -2
  162. data/previews/primer/beta/auto_complete_preview.rb +18 -18
  163. data/previews/primer/beta/avatar_stack_preview.rb +32 -32
  164. data/previews/primer/beta/blankslate_preview.rb +40 -40
  165. data/previews/primer/beta/border_box_preview.rb +38 -38
  166. data/previews/primer/beta/breadcrumbs_preview.rb +2 -2
  167. data/previews/primer/beta/button_group_preview.rb +10 -10
  168. data/previews/primer/beta/button_preview/all_schemes.html.erb +4 -4
  169. data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb +16 -16
  170. data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
  171. data/previews/primer/beta/button_preview/trailing_action.html.erb +2 -2
  172. data/previews/primer/beta/button_preview/trailing_visual.html.erb +2 -2
  173. data/previews/primer/beta/button_preview/with_tooltip.html.erb +2 -2
  174. data/previews/primer/beta/details_preview.rb +12 -12
  175. data/previews/primer/beta/state_preview.rb +66 -0
  176. data/previews/primer/beta/subhead_preview/actions.html.erb +14 -0
  177. data/previews/primer/beta/subhead_preview.rb +99 -0
  178. data/previews/primer/beta/timeline_item_preview.rb +30 -0
  179. data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +1 -0
  180. data/previews/primer/forms/forms_preview.rb +2 -0
  181. data/previews/primer/local_time_component_preview.rb +3 -0
  182. data/previews/primer/time_ago_component_preview.rb +3 -0
  183. data/previews/primer/url_helpers.rb +2 -2
  184. data/static/arguments.json +118 -118
  185. data/static/audited_at.json +6 -0
  186. data/static/constants.json +67 -54
  187. data/static/statuses.json +12 -6
  188. metadata +36 -23
  189. data/app/components/primer/state_component.css.json +0 -1
  190. data/app/components/primer/state_component.css.map +0 -1
  191. data/app/components/primer/subhead_component.css.json +0 -1
  192. data/app/components/primer/subhead_component.css.map +0 -1
  193. data/app/components/primer/timeline_item_component.css.json +0 -1
  194. data/app/components/primer/timeline_item_component.css.map +0 -1
  195. data/previews/primer/hellip_button_preview.rb +0 -22
  196. data/previews/primer/state_component_preview.rb +0 -26
  197. data/previews/primer/subhead_component_preview.rb +0 -40
  198. data/previews/primer/timeline_item_component_preview.rb +0 -28
@@ -0,0 +1,74 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Forms
5
+ # Toggle switches are designed to submit an on/off value to the server immediately
6
+ # upon click. For that reason they are not designed to be used in "regular" forms
7
+ # that have other fields, etc. Instead they should be used independently via this
8
+ # class.
9
+ #
10
+ # ToggleSwitchForm can be used directly or via inheritance.
11
+ #
12
+ # Via inheritance:
13
+ #
14
+ # # app/forms/my_toggle_form.rb
15
+ # class MyToggleForm < Primer::Forms::ToggleSwitchForm
16
+ # def initialize(**system_arguments)
17
+ # super(name: :foo, label: "Foo", src: "/foo", **system_arguments)
18
+ # end
19
+ # end
20
+ #
21
+ # # app/views/some_view.html.erb
22
+ # <%= render(MyToggleForm.new) %>
23
+ #
24
+ # Directly:
25
+ #
26
+ # # app/views/some_view.html.erb
27
+ # <%= render(
28
+ # Primer::Forms::ToggleSwitchForm.new(
29
+ # name: :foo, label: "Foo", src: "/foo"
30
+ # )
31
+ # ) %>
32
+ #
33
+ class ToggleSwitchForm < Primer::Forms::Base
34
+ # Define the form on subclasses so render(Subclass.new) works as expected.
35
+ def self.inherited(base)
36
+ base.form do |toggle_switch_form|
37
+ input = Dsl::ToggleSwitchInput.new(
38
+ builder: toggle_switch_form.builder, form: self, **@system_arguments
39
+ )
40
+
41
+ toggle_switch_form.send(:add_input, input)
42
+ end
43
+ end
44
+
45
+ # Define the form on self so render(ToggleSwitchForm.new) works as expected.
46
+ inherited(self)
47
+
48
+ # Override to avoid accepting a builder argument. We create our own builder
49
+ # on render. See the implementation of render_in below.
50
+ def self.new(**options)
51
+ allocate.tap { |obj| obj.send(:initialize, **options) }
52
+ end
53
+
54
+ def initialize(**system_arguments)
55
+ @system_arguments = system_arguments
56
+ end
57
+
58
+ # Unlike other instances of Base, ToggleSwitchForm defines its own form and
59
+ # is not given a Rails form builder on instantiation. We do this mostly for
60
+ # ergonomic reasons; it's much less verbose than if you were required to
61
+ # call form_with/form_for, etc. That said, the rest of the forms framework
62
+ # assumes the presence of a builder so we create our own here. A builder
63
+ # cannot be constructed without a corresponding view context, which is why
64
+ # we have to override render_in and can't create it in the initializer.
65
+ def render_in(view_context, &block)
66
+ @builder = Primer::Forms::Builder.new(
67
+ nil, nil, view_context, {}
68
+ )
69
+
70
+ super
71
+ end
72
+ end
73
+ end
74
+ end
@@ -6,7 +6,7 @@ module ERBLint
6
6
  module Linters
7
7
  # Counts the number of times a HTML Subhead is used instead of the component.
8
8
  class SubheadComponentMigrationCounter < BaseLinter
9
- MESSAGE = "We are migrating Subhead to use [Primer::SubheadComponent](https://primer.style/view-components/components/subhead), please try to use that instead of raw HTML."
9
+ MESSAGE = "We are migrating Subhead to use [Primer::Beta::Subhead](https://primer.style/view-components/components/subhead), please try to use that instead of raw HTML."
10
10
  CLASSES = %w[Subhead].freeze
11
11
  TAGS = %w[div].freeze
12
12
  end
@@ -6,7 +6,7 @@ module Primer
6
6
  module VERSION
7
7
  MAJOR = 0
8
8
  MINOR = 0
9
- PATCH = 115
9
+ PATCH = 117
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
@@ -18,7 +18,8 @@ module RuboCop
18
18
  def on_send(node)
19
19
  return unless node.method_name == :new && !node.receiver.nil? && ::Primer::Deprecations.deprecated?(node.receiver.const_name)
20
20
 
21
- add_offense(node.receiver, message: "Don't use deprecated names")
21
+ message = ::Primer::Deprecations.deprecation_message(node.receiver.const_name)
22
+ add_offense(node.receiver, message: message)
22
23
  end
23
24
 
24
25
  def autocorrect(node)
data/lib/tasks/docs.rake CHANGED
@@ -34,7 +34,7 @@ namespace :docs do
34
34
  Primer::Beta::Button,
35
35
  Primer::Alpha::SegmentedControl,
36
36
  Primer::Alpha::Layout,
37
- Primer::HellipButton,
37
+ Primer::Alpha::HellipButton,
38
38
  Primer::Alpha::Image,
39
39
  Primer::LocalTime,
40
40
  Primer::Alpha::OcticonSymbols,
@@ -73,14 +73,14 @@ namespace :docs do
73
73
  Primer::Beta::Octicon,
74
74
  Primer::Beta::Popover,
75
75
  Primer::Beta::ProgressBar,
76
- Primer::StateComponent,
76
+ Primer::Beta::State,
77
77
  Primer::Beta::Spinner,
78
- Primer::SubheadComponent,
79
- Primer::TabContainerComponent,
78
+ Primer::Beta::Subhead,
79
+ Primer::Alpha::TabContainer,
80
80
  Primer::Beta::Text,
81
81
  Primer::Alpha::TextField,
82
82
  Primer::TimeAgoComponent,
83
- Primer::TimelineItemComponent,
83
+ Primer::Beta::TimelineItem,
84
84
  Primer::Tooltip,
85
85
  Primer::Truncate,
86
86
  Primer::Beta::Truncate,
@@ -106,7 +106,7 @@ namespace :docs do
106
106
  Primer::Beta::AutoComplete,
107
107
  Primer::Alpha::Banner,
108
108
  Primer::Beta::ClipboardCopy,
109
- Primer::TabContainerComponent,
109
+ Primer::Alpha::TabContainer,
110
110
  Primer::TimeAgoComponent,
111
111
  Primer::Alpha::UnderlinePanels,
112
112
  Primer::Alpha::TabPanels,
@@ -19,15 +19,15 @@ module Primer
19
19
  scheme: scheme,
20
20
  show_dividers: show_dividers,
21
21
  aria: { label: "Action List" }
22
- )) do |c|
23
- c.with_heading(title: "Action List")
24
- c.with_item(label: "Item one", href: "/") do |item|
22
+ )) do |component|
23
+ component.with_heading(title: "Action List")
24
+ component.with_item(label: "Item one", href: "/") do |item|
25
25
  item.with_leading_visual_icon(icon: :gear)
26
26
  end
27
- c.with_item(label: "Item two", href: "/") do |item|
27
+ component.with_item(label: "Item two", href: "/") do |item|
28
28
  item.with_leading_visual_icon(icon: :star)
29
29
  end
30
- c.with_item(label: "Item three", href: "/") do |item|
30
+ component.with_item(label: "Item three", href: "/") do |item|
31
31
  item.with_leading_visual_icon(icon: :heart)
32
32
  end
33
33
  end
@@ -48,15 +48,15 @@ module Primer
48
48
  scheme: scheme,
49
49
  show_dividers: show_dividers,
50
50
  aria: { label: "Action List" }
51
- )) do |c|
52
- c.with_heading(title: "Action List")
53
- c.with_item(label: "Item one", href: "/") do |item|
51
+ )) do |component|
52
+ component.with_heading(title: "Action List")
53
+ component.with_item(label: "Item one", href: "/") do |item|
54
54
  item.with_leading_visual_icon(icon: :gear)
55
55
  end
56
- c.with_item(label: "Item two", href: "/") do |item|
56
+ component.with_item(label: "Item two", href: "/") do |item|
57
57
  item.with_leading_visual_icon(icon: :star)
58
58
  end
59
- c.with_item(label: "Item three", href: "/") do |item|
59
+ component.with_item(label: "Item three", href: "/") do |item|
60
60
  item.with_leading_visual_icon(icon: :heart)
61
61
  end
62
62
  end
@@ -77,14 +77,14 @@ module Primer
77
77
  scheme: scheme,
78
78
  show_dividers: show_dividers,
79
79
  aria: { label: "Action List" }
80
- )) do |c|
81
- c.with_heading(title: "Action List")
82
- c.with_item(label: "Leading SVG visual", href: "/") do |item|
80
+ )) do |component|
81
+ component.with_heading(title: "Action List")
82
+ component.with_item(label: "Leading SVG visual", href: "/") do |item|
83
83
  item.with_leading_visual_svg do
84
84
  '<path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>'.html_safe
85
85
  end
86
86
  end
87
- c.with_item(label: "Custom content", href: "/") do |item|
87
+ component.with_item(label: "Custom content", href: "/") do |item|
88
88
  item.with_leading_visual_content do
89
89
  '<span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>'.html_safe
90
90
  end
@@ -217,8 +217,8 @@ module Primer
217
217
  def item_default
218
218
  render(Primer::Alpha::ActionList.new(
219
219
  aria: { label: "List heading" }
220
- )) do |c|
221
- c.with_item(label: "Default item", href: "/")
220
+ )) do |component|
221
+ component.with_item(label: "Default item", href: "/")
222
222
  end
223
223
  end
224
224
 
@@ -226,8 +226,8 @@ module Primer
226
226
  def item_size_large
227
227
  render(Primer::Alpha::ActionList.new(
228
228
  aria: { label: "List heading" }
229
- )) do |c|
230
- c.with_item(label: "Default item", href: "/", size: :large)
229
+ )) do |component|
230
+ component.with_item(label: "Default item", href: "/", size: :large)
231
231
  end
232
232
  end
233
233
 
@@ -235,8 +235,8 @@ module Primer
235
235
  def item_size_xlarge
236
236
  render(Primer::Alpha::ActionList.new(
237
237
  aria: { label: "List heading" }
238
- )) do |c|
239
- c.with_item(label: "Default item", href: "/", size: :xlarge)
238
+ )) do |component|
239
+ component.with_item(label: "Default item", href: "/", size: :xlarge)
240
240
  end
241
241
  end
242
242
 
@@ -244,8 +244,8 @@ module Primer
244
244
  def item_leading_visual
245
245
  render(Primer::Alpha::ActionList.new(
246
246
  aria: { label: "List heading" }
247
- )) do |c|
248
- c.with_item(label: "Item with leading visual", href: "/") do |item|
247
+ )) do |component|
248
+ component.with_item(label: "Item with leading visual", href: "/") do |item|
249
249
  item.with_leading_visual_icon(icon: :star)
250
250
  end
251
251
  end
@@ -255,8 +255,8 @@ module Primer
255
255
  def item_trailing_visual
256
256
  render(Primer::Alpha::ActionList.new(
257
257
  aria: { label: "List heading" }
258
- )) do |c|
259
- c.with_item(label: "Item with trailing visual", href: "/") do |item|
258
+ )) do |component|
259
+ component.with_item(label: "Item with trailing visual", href: "/") do |item|
260
260
  item.with_trailing_visual_icon(icon: :star)
261
261
  end
262
262
  end
@@ -266,8 +266,8 @@ module Primer
266
266
  def item_leading_trailing_visual
267
267
  render(Primer::Alpha::ActionList.new(
268
268
  aria: { label: "List heading" }
269
- )) do |c|
270
- c.with_item(label: "Item with trailing visual", href: "/") do |item|
269
+ )) do |component|
270
+ component.with_item(label: "Item with trailing visual", href: "/") do |item|
271
271
  item.with_leading_visual_icon(icon: :heart)
272
272
  item.with_trailing_visual_icon(icon: :star)
273
273
  end
@@ -278,8 +278,8 @@ module Primer
278
278
  def item_with_description
279
279
  render(Primer::Alpha::ActionList.new(
280
280
  aria: { label: "List heading" }
281
- )) do |c|
282
- c.with_item(label: "Default item", href: "/") do |item|
281
+ )) do |component|
282
+ component.with_item(label: "Default item", href: "/") do |item|
283
283
  item.with_description.with_content("This is a description")
284
284
  end
285
285
  end
@@ -289,8 +289,8 @@ module Primer
289
289
  def item_with_description_inline
290
290
  render(Primer::Alpha::ActionList.new(
291
291
  aria: { label: "List heading" }
292
- )) do |c|
293
- c.with_item(label: "Default item", href: "/", description_scheme: :inline) do |item|
292
+ )) do |component|
293
+ component.with_item(label: "Default item", href: "/", description_scheme: :inline) do |item|
294
294
  item.with_description.with_content("This is a description")
295
295
  end
296
296
  end
@@ -300,8 +300,8 @@ module Primer
300
300
  def item_trailing_action
301
301
  render(Primer::Alpha::ActionList.new(
302
302
  aria: { label: "List heading" }
303
- )) do |c|
304
- c.with_item(label: "Default item", href: "/") do |item|
303
+ )) do |component|
304
+ component.with_item(label: "Default item", href: "/") do |item|
305
305
  item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Button tooltip", size: :medium)
306
306
  end
307
307
  end
@@ -311,8 +311,8 @@ module Primer
311
311
  def item_trailing_action_hover
312
312
  render(Primer::Alpha::ActionList.new(
313
313
  aria: { label: "List heading" }
314
- )) do |c|
315
- c.with_item(label: "Default item", href: "/") do |item|
314
+ )) do |component|
315
+ component.with_item(label: "Default item", href: "/") do |item|
316
316
  item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Button tooltip", size: :medium)
317
317
  end
318
318
  end
@@ -322,8 +322,8 @@ module Primer
322
322
  def item_danger
323
323
  render(Primer::Alpha::ActionList.new(
324
324
  aria: { label: "List heading" }
325
- )) do |c|
326
- c.with_item(label: "Danger item", href: "/", scheme: :danger)
325
+ )) do |component|
326
+ component.with_item(label: "Danger item", href: "/", scheme: :danger)
327
327
  end
328
328
  end
329
329
 
@@ -331,8 +331,8 @@ module Primer
331
331
  def item_disabled
332
332
  render(Primer::Alpha::ActionList.new(
333
333
  aria: { label: "List heading" }
334
- )) do |c|
335
- c.with_item(label: "Disabled item", href: "/", disabled: true)
334
+ )) do |component|
335
+ component.with_item(label: "Disabled item", href: "/", disabled: true)
336
336
  end
337
337
  end
338
338
 
@@ -340,8 +340,8 @@ module Primer
340
340
  def item_wrap_label
341
341
  render(Primer::Alpha::ActionList.new(
342
342
  aria: { label: "List heading" }
343
- )) do |c|
344
- c.with_item(label: "This is a very long string of text that will wrap if it runs out of horizontal space", href: "/")
343
+ )) do |component|
344
+ component.with_item(label: "This is a very long string of text that will wrap if it runs out of horizontal space", href: "/")
345
345
  end
346
346
  end
347
347
 
@@ -349,8 +349,8 @@ module Primer
349
349
  def item_truncate_label
350
350
  render(Primer::Alpha::ActionList.new(
351
351
  aria: { label: "List heading" }
352
- )) do |c|
353
- c.with_item(label: "This is a very long string of text that will truncate if it runs out of horizontal space", href: "/", truncate_label: true)
352
+ )) do |component|
353
+ component.with_item(label: "This is a very long string of text that will truncate if it runs out of horizontal space", href: "/", truncate_label: true)
354
354
  end
355
355
  end
356
356
 
@@ -358,8 +358,8 @@ module Primer
358
358
  def item_active
359
359
  render(Primer::Alpha::ActionList.new(
360
360
  aria: { label: "List heading" }
361
- )) do |c|
362
- c.with_item(label: "Active item", href: "/", active: true)
361
+ )) do |component|
362
+ component.with_item(label: "Active item", href: "/", active: true)
363
363
  end
364
364
  end
365
365
  end
@@ -9,15 +9,15 @@ module Primer
9
9
  # @param with_caret [Boolean] toggle
10
10
  # @param overlay [Symbol] select [none, default, dark]
11
11
  def playground(overlay: :default, with_caret: false)
12
- render(Primer::Alpha::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |c|
13
- c.with_button { "Dropdown" }
14
-
15
- c.with_menu(header: "Header") do |m|
16
- m.with_item { "Item 1" }
17
- m.with_item { "Item 2" }
18
- m.with_item(divider: true)
19
- m.with_item { "Item 3" }
20
- m.with_item { "Item 4" }
12
+ render(Primer::Alpha::Dropdown.new(overlay: overlay, with_caret: with_caret)) do |component|
13
+ component.with_button { "Dropdown" }
14
+
15
+ component.with_menu(header: "Header") do |menu|
16
+ menu.with_item { "Item 1" }
17
+ menu.with_item { "Item 2" }
18
+ menu.with_item(divider: true)
19
+ menu.with_item { "Item 3" }
20
+ menu.with_item { "Item 4" }
21
21
  end
22
22
  end
23
23
  end
@@ -25,12 +25,12 @@ module Primer
25
25
  # @label Default
26
26
  #
27
27
  def default
28
- render(Primer::Alpha::Dropdown.new) do |c|
29
- c.with_button { "Dropdown" }
30
- c.with_menu do |m|
31
- m.with_item { "Item 1" }
32
- m.with_item { "Item 2" }
33
- m.with_item { "Item 3" }
28
+ render(Primer::Alpha::Dropdown.new) do |component|
29
+ component.with_button { "Dropdown" }
30
+ component.with_menu do |menu|
31
+ menu.with_item { "Item 1" }
32
+ menu.with_item { "Item 2" }
33
+ menu.with_item { "Item 3" }
34
34
  end
35
35
  end
36
36
  end
@@ -41,12 +41,12 @@ module Primer
41
41
  # @param direction [Symbol] select [se, sw, w, e, ne, s]
42
42
  # @param scheme [Symbol] select [default, dark]
43
43
  def menu(as: :default, direction: :se, scheme: :default)
44
- render(Primer::Alpha::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |m|
45
- m.with_item { "Item 1" }
46
- m.with_item { "Item 2" }
47
- m.with_item(divider: true)
48
- m.with_item { "Item 3" }
49
- m.with_item { "Item 4" }
44
+ render(Primer::Alpha::Dropdown::Menu.new(as: as, direction: direction, scheme: scheme, header: "Header")) do |menu|
45
+ menu.with_item { "Item 1" }
46
+ menu.with_item { "Item 2" }
47
+ menu.with_item(divider: true)
48
+ menu.with_item { "Item 3" }
49
+ menu.with_item { "Item 4" }
50
50
  end
51
51
  end
52
52
 
@@ -54,72 +54,72 @@ module Primer
54
54
  #
55
55
  # @label Direction e
56
56
  def direction_e
57
- render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
58
- c.with_button { "Dropdown" }
59
- c.with_menu(direction: :e) do |m|
60
- m.with_item { "Item 1" }
61
- m.with_item { "Item 2" }
62
- m.with_item { "Item 3" }
57
+ render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
58
+ component.with_button { "Dropdown" }
59
+ component.with_menu(direction: :e) do |menu|
60
+ menu.with_item { "Item 1" }
61
+ menu.with_item { "Item 2" }
62
+ menu.with_item { "Item 3" }
63
63
  end
64
64
  end
65
65
  end
66
66
 
67
67
  # @label Direction ne
68
68
  def direction_ne
69
- render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
70
- c.with_button { "Dropdown" }
71
- c.with_menu(direction: :ne) do |m|
72
- m.with_item { "Item 1" }
73
- m.with_item { "Item 2" }
74
- m.with_item { "Item 3" }
69
+ render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
70
+ component.with_button { "Dropdown" }
71
+ component.with_menu(direction: :ne) do |menu|
72
+ menu.with_item { "Item 1" }
73
+ menu.with_item { "Item 2" }
74
+ menu.with_item { "Item 3" }
75
75
  end
76
76
  end
77
77
  end
78
78
 
79
79
  # @label Direction s
80
80
  def direction_s
81
- render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
82
- c.with_button { "Dropdown" }
83
- c.with_menu(direction: :s) do |m|
84
- m.with_item { "Item 1" }
85
- m.with_item { "Item 2" }
86
- m.with_item { "Item 3" }
81
+ render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
82
+ component.with_button { "Dropdown" }
83
+ component.with_menu(direction: :s) do |menu|
84
+ menu.with_item { "Item 1" }
85
+ menu.with_item { "Item 2" }
86
+ menu.with_item { "Item 3" }
87
87
  end
88
88
  end
89
89
  end
90
90
 
91
91
  # @label Direction se
92
92
  def direction_se
93
- render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
94
- c.with_button { "Dropdown" }
95
- c.with_menu(direction: :se) do |m|
96
- m.with_item { "Item 1" }
97
- m.with_item { "Item 2" }
98
- m.with_item { "Item 3" }
93
+ render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
94
+ component.with_button { "Dropdown" }
95
+ component.with_menu(direction: :se) do |menu|
96
+ menu.with_item { "Item 1" }
97
+ menu.with_item { "Item 2" }
98
+ menu.with_item { "Item 3" }
99
99
  end
100
100
  end
101
101
  end
102
102
 
103
103
  # @label Direction sw
104
104
  def direction_sw
105
- render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
106
- c.with_button { "Dropdown" }
107
- c.with_menu(direction: :sw) do |m|
108
- m.with_item { "Item 1" }
109
- m.with_item { "Item 2" }
110
- m.with_item { "Item 3" }
105
+ render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
106
+ component.with_button { "Dropdown" }
107
+ component.with_menu(direction: :sw) do |menu|
108
+ menu.with_item { "Item 1" }
109
+ menu.with_item { "Item 2" }
110
+ menu.with_item { "Item 3" }
111
111
  end
112
112
  end
113
113
  end
114
114
 
115
115
  # @label Direction w
116
116
  def direction_w
117
- render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c|
118
- c.with_button { "Dropdown" }
119
- c.with_menu(direction: :w) do |m|
120
- m.with_item { "Item 1" }
121
- m.with_item { "Item 2" }
122
- m.with_item { "Item 3" }
117
+ render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component|
118
+ component.with_button { "Dropdown" }
119
+ component.with_menu(direction: :w) do |menu|
120
+ menu.with_item { "Item 1" }
121
+ menu.with_item { "Item 2" }
122
+ menu.with_item { "Item 3" }
123
123
  end
124
124
  end
125
125
  end
@@ -130,76 +130,76 @@ module Primer
130
130
  #
131
131
  # @label With caret
132
132
  def options_with_caret
133
- render(Primer::Alpha::Dropdown.new(with_caret: true)) do |c|
134
- c.with_button { "Dropdown" }
135
- c.with_menu do |m|
136
- m.with_item { "Item 1" }
137
- m.with_item { "Item 2" }
138
- m.with_item { "Item 3" }
133
+ render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component|
134
+ component.with_button { "Dropdown" }
135
+ component.with_menu do |menu|
136
+ menu.with_item { "Item 1" }
137
+ menu.with_item { "Item 2" }
138
+ menu.with_item { "Item 3" }
139
139
  end
140
140
  end
141
141
  end
142
142
 
143
143
  # @label With header
144
144
  def options_with_header
145
- render(Primer::Alpha::Dropdown.new) do |c|
146
- c.with_button { "Dropdown" }
147
- c.with_menu(header: "Header") do |m|
148
- m.with_item { "Item 1" }
149
- m.with_item { "Item 2" }
150
- m.with_item { "Item 3" }
145
+ render(Primer::Alpha::Dropdown.new) do |component|
146
+ component.with_button { "Dropdown" }
147
+ component.with_menu(header: "Header") do |menu|
148
+ menu.with_item { "Item 1" }
149
+ menu.with_item { "Item 2" }
150
+ menu.with_item { "Item 3" }
151
151
  end
152
152
  end
153
153
  end
154
154
 
155
155
  # @label With dividers
156
156
  def options_with_dividers
157
- render(Primer::Alpha::Dropdown.new) do |c|
158
- c.with_button { "Dropdown" }
159
- c.with_menu do |m|
160
- m.with_item { "Item 1" }
161
- m.with_item { "Item 2" }
162
- m.with_item(divider: true)
163
- m.with_item { "Item 3" }
164
- m.with_item { "Item 4" }
165
- m.with_item(divider: true)
166
- m.with_item { "Item 5" }
157
+ render(Primer::Alpha::Dropdown.new) do |component|
158
+ component.with_button { "Dropdown" }
159
+ component.with_menu do |menu|
160
+ menu.with_item { "Item 1" }
161
+ menu.with_item { "Item 2" }
162
+ menu.with_item(divider: true)
163
+ menu.with_item { "Item 3" }
164
+ menu.with_item { "Item 4" }
165
+ menu.with_item(divider: true)
166
+ menu.with_item { "Item 5" }
167
167
  end
168
168
  end
169
169
  end
170
170
 
171
171
  # @label As list
172
172
  def options_as_list
173
- render(Primer::Alpha::Dropdown.new) do |c|
174
- c.with_button { "Dropdown" }
175
- c.with_menu(as: :list) do |m|
176
- m.with_item { "Item 1" }
177
- m.with_item { "Item 2" }
178
- m.with_item { "Item 3" }
173
+ render(Primer::Alpha::Dropdown.new) do |component|
174
+ component.with_button { "Dropdown" }
175
+ component.with_menu(as: :list) do |menu|
176
+ menu.with_item { "Item 1" }
177
+ menu.with_item { "Item 2" }
178
+ menu.with_item { "Item 3" }
179
179
  end
180
180
  end
181
181
  end
182
182
 
183
183
  # @label Overlay none
184
184
  def options_overlay_none
185
- render(Primer::Alpha::Dropdown.new(overlay: :none)) do |c|
186
- c.with_button { "Dropdown" }
187
- c.with_menu do |m|
188
- m.with_item { "Item 1" }
189
- m.with_item { "Item 2" }
190
- m.with_item { "Item 3" }
185
+ render(Primer::Alpha::Dropdown.new(overlay: :none)) do |component|
186
+ component.with_button { "Dropdown" }
187
+ component.with_menu do |menu|
188
+ menu.with_item { "Item 1" }
189
+ menu.with_item { "Item 2" }
190
+ menu.with_item { "Item 3" }
191
191
  end
192
192
  end
193
193
  end
194
194
 
195
195
  # @label Overlay dark
196
196
  def options_overlay_dark
197
- render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |c|
198
- c.with_button { "Dropdown" }
199
- c.with_menu do |m|
200
- m.with_item { "Item 1" }
201
- m.with_item { "Item 2" }
202
- m.with_item { "Item 3" }
197
+ render(Primer::Alpha::Dropdown.new(overlay: :dark)) do |component|
198
+ component.with_button { "Dropdown" }
199
+ component.with_menu do |menu|
200
+ menu.with_item { "Item 1" }
201
+ menu.with_item { "Item 2" }
202
+ menu.with_item { "Item 3" }
203
203
  end
204
204
  end
205
205
  end