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,24 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ # @label HellipButton
6
+ class HellipButtonPreview < ViewComponent::Preview
7
+ # @label Default Options
8
+ #
9
+ # @param aria_label [String]
10
+ # @param inline [Boolean]
11
+ def default(inline: false, aria_label: "No effect")
12
+ render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
13
+ end
14
+
15
+ # @label Playground
16
+ #
17
+ # @param aria_label [String]
18
+ # @param inline [Boolean]
19
+ def playground(inline: false, aria_label: "No effect")
20
+ render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
21
+ end
22
+ end
23
+ end
24
+ end
@@ -9,11 +9,11 @@ module Primer
9
9
  # @param first_in_source [Symbol] select [sidebar, main]
10
10
  # @param gutter [Symbol] select [default, none, condensed, spacious]
11
11
  def playground(stacking_breakpoint: :sm, gutter: :default, first_in_source: :sidebar)
12
- render(Primer::Alpha::Layout.new(stacking_breakpoint: stacking_breakpoint, gutter: gutter, first_in_source: first_in_source)) do |c|
13
- c.with_main(bg: :attention, p: 6) do
12
+ render(Primer::Alpha::Layout.new(stacking_breakpoint: stacking_breakpoint, gutter: gutter, first_in_source: first_in_source)) do |component|
13
+ component.with_main(bg: :attention, p: 6) do
14
14
  "Main content"
15
15
  end
16
- c.with_sidebar(bg: :accent, p: 6) do
16
+ component.with_sidebar(bg: :accent, p: 6) do
17
17
  "Sidebar content"
18
18
  end
19
19
  end
@@ -21,11 +21,11 @@ module Primer
21
21
 
22
22
  # @label Default
23
23
  def default
24
- render(Primer::Alpha::Layout.new) do |c|
25
- c.with_main(bg: :attention, p: 6) do
24
+ render(Primer::Alpha::Layout.new) do |component|
25
+ component.with_main(bg: :attention, p: 6) do
26
26
  "Main content"
27
27
  end
28
- c.with_sidebar(bg: :accent, p: 6) do
28
+ component.with_sidebar(bg: :accent, p: 6) do
29
29
  "Sidebar content"
30
30
  end
31
31
  end
@@ -35,33 +35,33 @@ module Primer
35
35
  #
36
36
  # @label None
37
37
  def gutter_none
38
- render(Primer::Alpha::Layout.new(gutter: :none)) do |c|
39
- c.with_main(bg: :attention, p: 6) { "Main content" }
40
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
38
+ render(Primer::Alpha::Layout.new(gutter: :none)) do |component|
39
+ component.with_main(bg: :attention, p: 6) { "Main content" }
40
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
41
41
  end
42
42
  end
43
43
 
44
44
  # @label Condensed
45
45
  def gutter_condensed
46
- render(Primer::Alpha::Layout.new(gutter: :condensed)) do |c|
47
- c.with_main(bg: :attention, p: 6) { "Main content" }
48
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
46
+ render(Primer::Alpha::Layout.new(gutter: :condensed)) do |component|
47
+ component.with_main(bg: :attention, p: 6) { "Main content" }
48
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
49
49
  end
50
50
  end
51
51
 
52
52
  # @label Default
53
53
  def gutter_default
54
- render(Primer::Alpha::Layout.new(gutter: :default)) do |c|
55
- c.with_main(bg: :attention, p: 6) { "Main content" }
56
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
54
+ render(Primer::Alpha::Layout.new(gutter: :default)) do |component|
55
+ component.with_main(bg: :attention, p: 6) { "Main content" }
56
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
57
57
  end
58
58
  end
59
59
 
60
60
  # @label Spacious
61
61
  def gutter_spacious
62
- render(Primer::Alpha::Layout.new(gutter: :spacious)) do |c|
63
- c.with_main(bg: :attention, p: 6) { "Main content" }
64
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
62
+ render(Primer::Alpha::Layout.new(gutter: :spacious)) do |component|
63
+ component.with_main(bg: :attention, p: 6) { "Main content" }
64
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
65
65
  end
66
66
  end
67
67
  #
@@ -71,33 +71,33 @@ module Primer
71
71
  #
72
72
  # @label Medium
73
73
  def main_width_md
74
- render(Primer::Alpha::Layout.new) do |c|
75
- c.with_main(width: :md, bg: :attention, p: 6) { "Main content" }
76
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
74
+ render(Primer::Alpha::Layout.new) do |component|
75
+ component.with_main(width: :md, bg: :attention, p: 6) { "Main content" }
76
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
77
77
  end
78
78
  end
79
79
 
80
80
  # @label Large
81
81
  def main_width_lg
82
- render(Primer::Alpha::Layout.new) do |c|
83
- c.with_main(width: :lg, bg: :attention, p: 6) { "Main content" }
84
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
82
+ render(Primer::Alpha::Layout.new) do |component|
83
+ component.with_main(width: :lg, bg: :attention, p: 6) { "Main content" }
84
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
85
85
  end
86
86
  end
87
87
 
88
88
  # @label Extra large
89
89
  def main_width_xl
90
- render(Primer::Alpha::Layout.new) do |c|
91
- c.with_main(width: :xl, bg: :attention, p: 6) { "Main content" }
92
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
90
+ render(Primer::Alpha::Layout.new) do |component|
91
+ component.with_main(width: :xl, bg: :attention, p: 6) { "Main content" }
92
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
93
93
  end
94
94
  end
95
95
 
96
96
  # @label Full
97
97
  def main_width_full
98
- render(Primer::Alpha::Layout.new) do |c|
99
- c.with_main(width: :full, bg: :attention, p: 6) { "Main content" }
100
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
98
+ render(Primer::Alpha::Layout.new) do |component|
99
+ component.with_main(width: :full, bg: :attention, p: 6) { "Main content" }
100
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
101
101
  end
102
102
  end
103
103
  #
@@ -107,25 +107,25 @@ module Primer
107
107
  #
108
108
  # @label Narrow
109
109
  def sidebar_width_narrow
110
- render(Primer::Alpha::Layout.new) do |c|
111
- c.with_main(bg: :attention, p: 6) { "Main content" }
112
- c.with_sidebar(width: :narrow, bg: :accent, p: 6) { "Sidebar content" }
110
+ render(Primer::Alpha::Layout.new) do |component|
111
+ component.with_main(bg: :attention, p: 6) { "Main content" }
112
+ component.with_sidebar(width: :narrow, bg: :accent, p: 6) { "Sidebar content" }
113
113
  end
114
114
  end
115
115
 
116
116
  # @label Default
117
117
  def sidebar_width_default
118
- render(Primer::Alpha::Layout.new) do |c|
119
- c.with_main(bg: :attention, p: 6) { "Main content" }
120
- c.with_sidebar(width: :default, bg: :accent, p: 6) { "Sidebar content" }
118
+ render(Primer::Alpha::Layout.new) do |component|
119
+ component.with_main(bg: :attention, p: 6) { "Main content" }
120
+ component.with_sidebar(width: :default, bg: :accent, p: 6) { "Sidebar content" }
121
121
  end
122
122
  end
123
123
 
124
124
  # @label Wide
125
125
  def sidebar_width_wide
126
- render(Primer::Alpha::Layout.new) do |c|
127
- c.with_main(bg: :attention, p: 6) { "Main content" }
128
- c.with_sidebar(width: :wide, bg: :accent, p: 6) { "Sidebar content" }
126
+ render(Primer::Alpha::Layout.new) do |component|
127
+ component.with_main(bg: :attention, p: 6) { "Main content" }
128
+ component.with_sidebar(width: :wide, bg: :accent, p: 6) { "Sidebar content" }
129
129
  end
130
130
  end
131
131
  #
@@ -135,17 +135,17 @@ module Primer
135
135
  #
136
136
  # @label Start
137
137
  def sidebar_col_placement_start
138
- render(Primer::Alpha::Layout.new) do |c|
139
- c.with_main(bg: :attention, p: 6) { "Main content" }
140
- c.with_sidebar(col_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
138
+ render(Primer::Alpha::Layout.new) do |component|
139
+ component.with_main(bg: :attention, p: 6) { "Main content" }
140
+ component.with_sidebar(col_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
141
141
  end
142
142
  end
143
143
 
144
144
  # @label End
145
145
  def sidebar_col_placement_end
146
- render(Primer::Alpha::Layout.new) do |c|
147
- c.with_main(bg: :attention, p: 6) { "Main content" }
148
- c.with_sidebar(col_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
146
+ render(Primer::Alpha::Layout.new) do |component|
147
+ component.with_main(bg: :attention, p: 6) { "Main content" }
148
+ component.with_sidebar(col_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
149
149
  end
150
150
  end
151
151
  #
@@ -155,25 +155,25 @@ module Primer
155
155
  #
156
156
  # @label Start
157
157
  def sidebar_row_placement_start
158
- render(Primer::Alpha::Layout.new) do |c|
159
- c.with_main(bg: :attention, p: 6) { "Main content" }
160
- c.with_sidebar(row_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
158
+ render(Primer::Alpha::Layout.new) do |component|
159
+ component.with_main(bg: :attention, p: 6) { "Main content" }
160
+ component.with_sidebar(row_placement: :start, bg: :accent, p: 6) { "Sidebar content" }
161
161
  end
162
162
  end
163
163
 
164
164
  # @label End
165
165
  def sidebar_row_placement_end
166
- render(Primer::Alpha::Layout.new) do |c|
167
- c.with_main(bg: :attention, p: 6) { "Main content" }
168
- c.with_sidebar(row_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
166
+ render(Primer::Alpha::Layout.new) do |component|
167
+ component.with_main(bg: :attention, p: 6) { "Main content" }
168
+ component.with_sidebar(row_placement: :end, bg: :accent, p: 6) { "Sidebar content" }
169
169
  end
170
170
  end
171
171
 
172
172
  # @label None
173
173
  def sidebar_row_placement_none
174
- render(Primer::Alpha::Layout.new) do |c|
175
- c.with_main(bg: :attention, p: 6) { "Main content" }
176
- c.with_sidebar(row_placement: :none, bg: :accent, p: 6) { "Sidebar content" }
174
+ render(Primer::Alpha::Layout.new) do |component|
175
+ component.with_main(bg: :attention, p: 6) { "Main content" }
176
+ component.with_sidebar(row_placement: :none, bg: :accent, p: 6) { "Sidebar content" }
177
177
  end
178
178
  end
179
179
  #
@@ -183,25 +183,25 @@ module Primer
183
183
  #
184
184
  # @label Small
185
185
  def stacking_breakpoint_sm
186
- render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |c|
187
- c.with_main(bg: :attention, p: 6) { "Main content" }
188
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
186
+ render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component|
187
+ component.with_main(bg: :attention, p: 6) { "Main content" }
188
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
189
189
  end
190
190
  end
191
191
 
192
192
  # @label Medium
193
193
  def stacking_breakpoint_md
194
- render(Primer::Alpha::Layout.new(stacking_breakpoint: :md)) do |c|
195
- c.with_main(bg: :attention, p: 6) { "Main content" }
196
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
194
+ render(Primer::Alpha::Layout.new(stacking_breakpoint: :md)) do |component|
195
+ component.with_main(bg: :attention, p: 6) { "Main content" }
196
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
197
197
  end
198
198
  end
199
199
 
200
200
  # @label Large
201
201
  def stacking_breakpoint_lg
202
- render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg)) do |c|
203
- c.with_main(bg: :attention, p: 6) { "Main content" }
204
- c.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
202
+ render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg)) do |component|
203
+ component.with_main(bg: :attention, p: 6) { "Main content" }
204
+ component.with_sidebar(bg: :accent, p: 6) { "Sidebar content" }
205
205
  end
206
206
  end
207
207
  #
@@ -1,15 +1,15 @@
1
- <%= render(Primer::Alpha::Menu.new) do |c| %>
2
- <% c.with_heading(tag: :h2) do %>
1
+ <%= render(Primer::Alpha::Menu.new) do |component| %>
2
+ <% component.with_heading(tag: :h2) do %>
3
3
  Heading
4
4
  <% end %>
5
- <% c.with_item(selected: true, href: "#url") do %>
5
+ <% component.with_item(selected: true, href: "#url") do %>
6
6
  Item 1
7
7
  <% end %>
8
- <% c.with_item(href: "#url") do %>
8
+ <% component.with_item(href: "#url") do %>
9
9
  <%= render(Primer::Beta::Octicon.new("check")) %>
10
10
  With Icon
11
11
  <% end %>
12
- <% c.with_item(href: "#url") do %>
12
+ <% component.with_item(href: "#url") do %>
13
13
  <%= render(Primer::Beta::Octicon.new("check")) %>
14
14
  With Icon and Counter
15
15
  <%= render(Primer::Beta::Counter.new(count: 25)) %>
@@ -1,15 +1,15 @@
1
- <%= render(Primer::Alpha::Menu.new) do |c| %>
2
- <% c.with_heading(tag: :h2) do %>
1
+ <%= render(Primer::Alpha::Menu.new) do |component| %>
2
+ <% component.with_heading(tag: :h2) do %>
3
3
  Heading
4
4
  <% end %>
5
- <% c.with_item(selected: true, href: "#url") do %>
5
+ <% component.with_item(selected: true, href: "#url") do %>
6
6
  Item 1
7
7
  <% end %>
8
- <% c.with_item(href: "#url") do %>
8
+ <% component.with_item(href: "#url") do %>
9
9
  <%= render(Primer::Beta::Octicon.new("check")) %>
10
10
  With Icon
11
11
  <% end %>
12
- <% c.with_item(href: "#url") do %>
12
+ <% component.with_item(href: "#url") do %>
13
13
  <%= render(Primer::Beta::Octicon.new("check")) %>
14
14
  With Icon and Counter
15
15
  <%= render(Primer::Beta::Counter.new(count: 25)) %>
@@ -16,19 +16,19 @@ module Primer
16
16
  if icon == :none
17
17
  icon = hide_labels ? :zap : nil
18
18
  end
19
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: hide_labels, size: size)) do |c|
20
- c.with_item(label: "Preview", icon: icon, selected: true)
21
- c.with_item(label: "Raw", icon: icon)
22
- c.with_item(label: "Blame", icon: icon)
19
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: full_width, hide_labels: hide_labels, size: size)) do |component|
20
+ component.with_item(label: "Preview", icon: icon, selected: true)
21
+ component.with_item(label: "Raw", icon: icon)
22
+ component.with_item(label: "Blame", icon: icon)
23
23
  end
24
24
  end
25
25
 
26
26
  # @label Default
27
27
  def default
28
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |c|
29
- c.with_item(label: "Preview", selected: true)
30
- c.with_item(label: "Raw")
31
- c.with_item(label: "Blame")
28
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
29
+ component.with_item(label: "Preview", selected: true)
30
+ component.with_item(label: "Raw")
31
+ component.with_item(label: "Blame")
32
32
  end
33
33
  end
34
34
 
@@ -36,30 +36,30 @@ module Primer
36
36
  # @label Size small
37
37
  # @param hide_labels [Boolean] toggle
38
38
  def full_width_small(hide_labels: false)
39
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |c|
40
- c.with_item(label: "Preview", selected: true)
41
- c.with_item(label: "Raw")
42
- c.with_item(label: "Blame")
39
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |component|
40
+ component.with_item(label: "Preview", selected: true)
41
+ component.with_item(label: "Raw")
42
+ component.with_item(label: "Blame")
43
43
  end
44
44
  end
45
45
 
46
46
  # @label Size medium
47
47
  # @param hide_labels [Boolean] toggle
48
48
  def full_width_medium(hide_labels: false)
49
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |c|
50
- c.with_item(label: "Preview", selected: true)
51
- c.with_item(label: "Raw")
52
- c.with_item(label: "Blame")
49
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |component|
50
+ component.with_item(label: "Preview", selected: true)
51
+ component.with_item(label: "Raw")
52
+ component.with_item(label: "Blame")
53
53
  end
54
54
  end
55
55
 
56
56
  # @label Size large
57
57
  # @param hide_labels [Boolean] toggle
58
58
  def full_width_large(hide_labels: false)
59
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |c|
60
- c.with_item(label: "Preview", selected: true)
61
- c.with_item(label: "Raw")
62
- c.with_item(label: "Blame")
59
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
60
+ component.with_item(label: "Preview", selected: true)
61
+ component.with_item(label: "Raw")
62
+ component.with_item(label: "Blame")
63
63
  end
64
64
  end
65
65
  # @!endgroup
@@ -67,28 +67,28 @@ module Primer
67
67
  # @!group Icons and text
68
68
  # @label Size small
69
69
  def icons_and_text_small
70
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |c|
71
- c.with_item(label: "Preview", icon: :eye, selected: true)
72
- c.with_item(label: "Raw", icon: :"file-code")
73
- c.with_item(label: "Blame", icon: :people)
70
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component|
71
+ component.with_item(label: "Preview", icon: :eye, selected: true)
72
+ component.with_item(label: "Raw", icon: :"file-code")
73
+ component.with_item(label: "Blame", icon: :people)
74
74
  end
75
75
  end
76
76
 
77
77
  # @label Size medium
78
78
  def icons_and_text_medium
79
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |c|
80
- c.with_item(label: "Preview", icon: :eye, selected: true)
81
- c.with_item(label: "Raw", icon: :"file-code")
82
- c.with_item(label: "Blame", icon: :people)
79
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |component|
80
+ component.with_item(label: "Preview", icon: :eye, selected: true)
81
+ component.with_item(label: "Raw", icon: :"file-code")
82
+ component.with_item(label: "Blame", icon: :people)
83
83
  end
84
84
  end
85
85
 
86
86
  # @label Size large
87
87
  def icons_and_text_large
88
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |c|
89
- c.with_item(label: "Preview", icon: :eye, selected: true)
90
- c.with_item(label: "Raw", icon: :"file-code")
91
- c.with_item(label: "Blame", icon: :people)
88
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
89
+ component.with_item(label: "Preview", icon: :eye, selected: true)
90
+ component.with_item(label: "Raw", icon: :"file-code")
91
+ component.with_item(label: "Blame", icon: :people)
92
92
  end
93
93
  end
94
94
  # @!endgroup
@@ -96,55 +96,55 @@ module Primer
96
96
  # @!group Icons only
97
97
  # @label Size small
98
98
  def icon_only_small
99
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |c|
100
- c.with_item(label: "Preview", icon: :eye, selected: true)
101
- c.with_item(label: "Raw", icon: :"file-code")
102
- c.with_item(label: "Blame", icon: :people)
99
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |component|
100
+ component.with_item(label: "Preview", icon: :eye, selected: true)
101
+ component.with_item(label: "Raw", icon: :"file-code")
102
+ component.with_item(label: "Blame", icon: :people)
103
103
  end
104
104
  end
105
105
 
106
106
  # @label Size medium
107
107
  def icon_only_medium
108
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |c|
109
- c.with_item(label: "Preview", icon: :eye, selected: true)
110
- c.with_item(label: "Raw", icon: :"file-code")
111
- c.with_item(label: "Blame", icon: :people)
108
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |component|
109
+ component.with_item(label: "Preview", icon: :eye, selected: true)
110
+ component.with_item(label: "Raw", icon: :"file-code")
111
+ component.with_item(label: "Blame", icon: :people)
112
112
  end
113
113
  end
114
114
 
115
115
  # @label Size large
116
116
  def icon_only_large
117
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |c|
118
- c.with_item(label: "Preview", icon: :eye, selected: true)
119
- c.with_item(label: "Raw", icon: :"file-code")
120
- c.with_item(label: "Blame", icon: :people)
117
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
118
+ component.with_item(label: "Preview", icon: :eye, selected: true)
119
+ component.with_item(label: "Raw", icon: :"file-code")
120
+ component.with_item(label: "Blame", icon: :people)
121
121
  end
122
122
  end
123
123
 
124
124
  # @label Full width, size small
125
125
  def icon_only_full_width_small
126
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |c|
127
- c.with_item(label: "Preview", icon: :eye, selected: true)
128
- c.with_item(label: "Raw", icon: :"file-code")
129
- c.with_item(label: "Blame", icon: :people)
126
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
127
+ component.with_item(label: "Preview", icon: :eye, selected: true)
128
+ component.with_item(label: "Raw", icon: :"file-code")
129
+ component.with_item(label: "Blame", icon: :people)
130
130
  end
131
131
  end
132
132
 
133
133
  # @label Full width, size medium
134
134
  def icon_only_full_width_medium
135
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |c|
136
- c.with_item(label: "Preview", icon: :eye, selected: true)
137
- c.with_item(label: "Raw", icon: :"file-code")
138
- c.with_item(label: "Blame", icon: :people)
135
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :medium)) do |component|
136
+ component.with_item(label: "Preview", icon: :eye, selected: true)
137
+ component.with_item(label: "Raw", icon: :"file-code")
138
+ component.with_item(label: "Blame", icon: :people)
139
139
  end
140
140
  end
141
141
 
142
142
  # @label Full width, size large
143
143
  def icon_only_full_width_large
144
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |c|
145
- c.with_item(label: "Preview", icon: :eye, selected: true)
146
- c.with_item(label: "Raw", icon: :"file-code")
147
- c.with_item(label: "Blame", icon: :people)
144
+ render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
145
+ component.with_item(label: "Preview", icon: :eye, selected: true)
146
+ component.with_item(label: "Raw", icon: :"file-code")
147
+ component.with_item(label: "Blame", icon: :people)
148
148
  end
149
149
  end
150
150
  # @!endgroup
@@ -152,10 +152,10 @@ module Primer
152
152
  # NOTE: this preview uses a group to force it's display below the other groups
153
153
  # @!group With link as tag
154
154
  def with_link_as_tag
155
- render(Primer::Alpha::SegmentedControl.new) do |c|
156
- c.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
157
- c.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
158
- c.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
155
+ render(Primer::Alpha::SegmentedControl.new) do |component|
156
+ component.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
157
+ component.with_item(tag: :a, href: "#", label: "Raw", icon: :"file-code")
158
+ component.with_item(tag: :a, href: "#", label: "Blame", icon: :people)
159
159
  end
160
160
  end
161
161
  # @!endgroup
@@ -10,12 +10,12 @@ module Primer
10
10
  # @param with_icons [Boolean] toggle
11
11
  # @param with_counters [Boolean] toggle
12
12
  def playground(number_of_tabs: 3, with_icons: false, with_counters: false)
13
- render(Primer::Alpha::TabNav.new(label: "label")) do |c|
13
+ render(Primer::Alpha::TabNav.new(label: "label")) do |component|
14
14
  Array.new(number_of_tabs || 3) do |i|
15
- c.with_tab(selected: i.zero?, href: "##{i + 1}") do |t|
16
- t.icon(icon: :star) if with_icons
17
- t.text { "Tab #{i + 1}" }
18
- t.counter(count: 10) if with_counters
15
+ component.with_tab(selected: i.zero?, href: "##{i + 1}") do |tab|
16
+ tab.with_icon(icon: :star) if with_icons
17
+ tab.with_text { "Tab #{i + 1}" }
18
+ tab.with_counter(count: 10) if with_counters
19
19
  end
20
20
  end
21
21
  end
@@ -23,30 +23,30 @@ module Primer
23
23
 
24
24
  # @label Default
25
25
  def default
26
- render(Primer::Alpha::TabNav.new(label: "Default")) do |c|
27
- c.with_tab(selected: true, href: "#") { "Tab 1" }
28
- c.with_tab(href: "#") { "Tab 2" }
29
- c.with_tab(href: "#") { "Tab 3" }
26
+ render(Primer::Alpha::TabNav.new(label: "Default")) do |component|
27
+ component.with_tab(selected: true, href: "#") { "Tab 1" }
28
+ component.with_tab(href: "#") { "Tab 2" }
29
+ component.with_tab(href: "#") { "Tab 3" }
30
30
  end
31
31
  end
32
32
 
33
33
  # @label With icons and counters
34
34
  def with_icons_and_counters
35
- render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |c|
36
- c.with_tab(href: "#1", selected: true) do |t|
37
- t.icon(icon: :star)
38
- t.text { "Stars" }
39
- t.counter(count: 10)
35
+ render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component|
36
+ component.with_tab(href: "#1", selected: true) do |tab|
37
+ tab.with_icon(icon: :star)
38
+ tab.with_text { "Stars" }
39
+ tab.with_counter(count: 10)
40
40
  end
41
- c.with_tab(href: "#2") do |t|
42
- t.icon(icon: :heart)
43
- t.text { "Sponsors" }
44
- t.counter(count: 14)
41
+ component.with_tab(href: "#2") do |tab|
42
+ tab.with_icon(icon: :heart)
43
+ tab.with_text { "Sponsors" }
44
+ tab.with_counter(count: 14)
45
45
  end
46
- c.with_tab(href: "#3") do |t|
47
- t.icon(icon: :bookmark)
48
- t.text { "Bookmarks" }
49
- t.counter(count: 7)
46
+ component.with_tab(href: "#3") do |tab|
47
+ tab.with_icon(icon: :bookmark)
48
+ tab.with_text { "Bookmarks" }
49
+ tab.with_counter(count: 7)
50
50
  end
51
51
  end
52
52
  end
@@ -9,11 +9,11 @@ module Primer
9
9
  # @param number_of_panels [Integer] number
10
10
  # @param align [Symbol] select [left, right]
11
11
  def playground(number_of_panels: 3, align: :left)
12
- render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |c|
12
+ render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
13
13
  Array.new(number_of_panels || 3) do |i|
14
- c.tab(selected: i.zero?, id: "tab-#{i + 1}") do |t|
15
- t.panel { "Panel #{i + 1}" }
16
- t.text { "Tab #{i + 1}" }
14
+ component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
15
+ tab.with_panel { "Panel #{i + 1}" }
16
+ tab.with_text { "Tab #{i + 1}" }
17
17
  end
18
18
  end
19
19
  end
@@ -24,11 +24,11 @@ module Primer
24
24
  # @param number_of_panels [Integer] number
25
25
  # @param align [Symbol] select [left, right]
26
26
  def default(number_of_panels: 3, align: :left)
27
- render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |c|
27
+ render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
28
28
  Array.new(number_of_panels || 3) do |i|
29
- c.tab(selected: i.zero?, id: "tab-#{i + 1}") do |t|
30
- t.panel { "Panel #{i + 1}" }
31
- t.text { "Tab #{i + 1}" }
29
+ component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
30
+ tab.with_panel { "Panel #{i + 1}" }
31
+ tab.with_text { "Tab #{i + 1}" }
32
32
  end
33
33
  end
34
34
  end
@@ -1,14 +1,14 @@
1
1
  <div>
2
- <%= render(Primer::Beta::Button.new(id: "button-1")) do |c| %>
3
- <% c.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
2
+ <%= render(Primer::Beta::Button.new(id: "button-1")) do |component| %>
3
+ <% component.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
4
4
  Button 1
5
5
  <% end %>
6
- <%= render(Primer::Beta::Button.new(id: "button-2")) do |c| %>
7
- <% c.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
6
+ <%= render(Primer::Beta::Button.new(id: "button-2")) do |component| %>
7
+ <% component.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
8
8
  Button 2
9
9
  <% end %>
10
- <%= render(Primer::Beta::Button.new(id: "button-3")) do |c| %>
11
- <% c.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
10
+ <%= render(Primer::Beta::Button.new(id: "button-3")) do |component| %>
11
+ <% component.with_tooltip(text: tooltip_text, type: type, direction: direction) %>
12
12
  Button 3
13
13
  <% end %>
14
14
  </div>