primer_view_components 0.0.114 → 0.0.115

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +36 -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 +2 -0
  8. data/app/components/primer/alpha/action_list/heading.rb +2 -0
  9. data/app/components/primer/alpha/action_list/item.rb +8 -6
  10. data/app/components/primer/alpha/action_list.rb +1 -0
  11. data/app/components/primer/alpha/auto_complete/auto_complete.html.erb +1 -1
  12. data/app/components/primer/alpha/auto_complete/item.rb +1 -0
  13. data/app/components/primer/alpha/auto_complete.rb +3 -2
  14. data/app/components/primer/alpha/banner.html.erb +1 -1
  15. data/app/components/primer/alpha/banner.rb +1 -0
  16. data/app/components/primer/alpha/button_marketing.rb +2 -0
  17. data/app/components/primer/alpha/dialog.rb +3 -0
  18. data/app/components/primer/alpha/image.rb +1 -0
  19. data/app/components/primer/alpha/image_crop.html.erb +1 -1
  20. data/app/components/primer/alpha/layout.css +1 -0
  21. data/app/components/primer/alpha/layout.css.json +1 -0
  22. data/app/components/primer/alpha/layout.css.map +1 -0
  23. data/app/components/primer/alpha/layout.pcss +268 -0
  24. data/app/components/primer/{menu_component.css → alpha/menu.css} +0 -0
  25. data/app/components/primer/alpha/menu.css.json +1 -0
  26. data/app/components/primer/alpha/menu.css.map +1 -0
  27. data/app/components/primer/{menu_component.html.erb → alpha/menu.html.erb} +0 -0
  28. data/app/components/primer/{menu_component.pcss → alpha/menu.pcss} +0 -0
  29. data/app/components/primer/alpha/menu.rb +76 -0
  30. data/app/components/primer/{octicon_symbols_component.html.erb → alpha/octicon_symbols.html.erb} +0 -0
  31. data/app/components/primer/alpha/octicon_symbols.rb +61 -0
  32. data/app/components/primer/alpha/text_field.rb +1 -0
  33. data/app/components/primer/alpha/toggle_switch.html.erb +2 -2
  34. data/app/components/primer/alpha/toggle_switch.rb +2 -0
  35. data/app/components/primer/alpha/tool_tip.js +77 -69
  36. data/app/components/primer/alpha/tool_tip.ts +63 -51
  37. data/app/components/primer/alpha/tooltip.rb +2 -0
  38. data/app/components/primer/beta/auto_complete/item.rb +4 -4
  39. data/app/components/primer/beta/auto_complete.rb +3 -3
  40. data/app/components/primer/beta/avatar.rb +1 -0
  41. data/app/components/primer/beta/base_button.rb +1 -0
  42. data/app/components/primer/beta/blankslate.rb +5 -5
  43. data/app/components/primer/beta/button.rb +7 -7
  44. data/app/components/primer/beta/clipboard_copy.html.erb +2 -2
  45. data/app/components/primer/beta/clipboard_copy.rb +1 -0
  46. data/app/components/primer/beta/close_button.rb +2 -1
  47. data/app/components/primer/beta/counter.rb +1 -0
  48. data/app/components/primer/beta/heading.rb +1 -0
  49. data/app/components/primer/beta/icon_button.html.erb +1 -1
  50. data/app/components/primer/beta/icon_button.rb +1 -0
  51. data/app/components/primer/beta/label.rb +1 -0
  52. data/app/components/primer/beta/markdown.rb +1 -0
  53. data/app/components/primer/{octicon_component.html.erb → beta/octicon.html.erb} +0 -0
  54. data/app/components/primer/beta/octicon.rb +88 -0
  55. data/app/components/primer/beta/relative_time.rb +2 -1
  56. data/app/components/primer/{spinner_component.html.erb → beta/spinner.html.erb} +0 -0
  57. data/app/components/primer/beta/spinner.rb +46 -0
  58. data/app/components/primer/beta/text.rb +1 -0
  59. data/app/components/primer/blankslate_component.rb +3 -3
  60. data/app/components/primer/box.rb +1 -0
  61. data/app/components/primer/button_component.rb +3 -3
  62. data/app/components/primer/conditional_wrapper.rb +2 -0
  63. data/app/components/primer/hellip_button.rb +2 -0
  64. data/app/components/primer/icon_button.html.erb +2 -2
  65. data/app/components/primer/icon_button.rb +1 -0
  66. data/app/components/primer/layout_component.rb +2 -0
  67. data/app/components/primer/local_time.rb +3 -0
  68. data/app/components/primer/menu_component.rb +2 -69
  69. data/app/components/primer/navigation/tab_component.rb +2 -2
  70. data/app/components/primer/octicon_component.rb +3 -81
  71. data/app/components/primer/octicon_symbols_component.rb +2 -52
  72. data/app/components/primer/primer.d.ts +2 -0
  73. data/app/components/primer/primer.js +2 -0
  74. data/app/components/primer/primer.pcss +2 -1
  75. data/app/components/primer/primer.ts +2 -0
  76. data/app/components/primer/spinner_component.rb +2 -38
  77. data/app/components/primer/state_component.rb +1 -0
  78. data/app/components/primer/subhead_component.rb +2 -0
  79. data/app/components/primer/tab_container_component.rb +2 -0
  80. data/app/components/primer/time_ago_component.rb +2 -1
  81. data/app/components/primer/timeline_item_component.rb +3 -2
  82. data/app/components/primer/tooltip.rb +1 -0
  83. data/app/components/primer/truncate.rb +2 -0
  84. data/app/forms/immediate_validation_form.rb +29 -0
  85. data/app/forms/multi_input_form.rb +4 -2
  86. data/app/lib/primer/css/layout.css +1 -378
  87. data/app/lib/primer/css/layout.css.json +1 -1
  88. data/app/lib/primer/octicon/cache.rb +1 -1
  89. data/app/lib/primer/view_helper.rb +1 -1
  90. data/lib/primer/deprecations.yml +26 -0
  91. data/lib/primer/forms/builder.rb +48 -8
  92. data/lib/primer/forms/check_box.html.erb +3 -1
  93. data/lib/primer/forms/dsl/input.rb +23 -1
  94. data/lib/primer/forms/dsl/multi_input.rb +6 -9
  95. data/lib/primer/forms/dsl/select_list_input.rb +1 -1
  96. data/lib/primer/forms/dsl/text_field_input.rb +31 -1
  97. data/lib/primer/forms/form_control.html.erb +17 -13
  98. data/lib/primer/forms/form_control.rb +2 -0
  99. data/lib/primer/forms/multi.html.erb +6 -2
  100. data/lib/primer/forms/primer_multi_input.d.ts +10 -0
  101. data/lib/primer/forms/primer_multi_input.js +45 -0
  102. data/lib/primer/forms/primer_multi_input.ts +46 -0
  103. data/lib/primer/forms/primer_text_field.d.ts +1 -0
  104. data/lib/primer/forms/primer_text_field.js +62 -0
  105. data/lib/primer/forms/primer_text_field.ts +48 -0
  106. data/lib/primer/forms/radio_button.html.erb +3 -1
  107. data/lib/primer/forms/text_field.html.erb +8 -8
  108. data/lib/primer/forms/text_field.rb +11 -0
  109. data/lib/primer/view_components/linters/close_button_component_migration_counter.rb +1 -1
  110. data/lib/primer/view_components/version.rb +1 -1
  111. data/lib/tasks/docs.rake +5 -5
  112. data/lib/tasks/helpers/ast_traverser.rb +1 -1
  113. data/previews/primer/alpha/action_list_preview.rb +1 -1
  114. data/previews/primer/alpha/auto_complete_preview.rb +62 -6
  115. data/previews/primer/alpha/layout_preview.rb +179 -6
  116. data/previews/primer/{menu_component_preview → alpha/menu_preview}/default.html.erb +3 -3
  117. data/previews/primer/{menu_component_preview → alpha/menu_preview}/playground.html.erb +3 -3
  118. data/previews/primer/alpha/menu_preview.rb +14 -0
  119. data/previews/primer/alpha/toggle_switch_preview.rb +11 -9
  120. data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +1 -1
  121. data/previews/primer/beta/auto_complete_preview.rb +19 -17
  122. data/previews/primer/beta/octicon_preview.rb +24 -0
  123. data/previews/primer/beta/spinner_preview.rb +22 -0
  124. data/previews/primer/forms/forms_preview/immediate_validation_form.html.erb +3 -0
  125. data/previews/primer/forms/forms_preview/multi_input_form.html.erb +12 -1
  126. data/previews/primer/forms/forms_preview.rb +2 -0
  127. data/previews/primer/url_helpers.rb +15 -0
  128. data/static/arguments.json +159 -159
  129. data/static/audited_at.json +4 -0
  130. data/static/constants.json +42 -34
  131. data/static/statuses.json +10 -6
  132. metadata +32 -15
  133. data/app/components/primer/menu_component.css.json +0 -1
  134. data/app/components/primer/menu_component.css.map +0 -1
  135. data/previews/primer/menu_component_preview.rb +0 -12
  136. data/previews/primer/octicon_component_preview.rb +0 -22
  137. data/previews/primer/spinner_component_preview.rb +0 -20
@@ -1,5 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ require_relative "../url_helpers"
4
+
3
5
  module Primer
4
6
  module Alpha
5
7
  # @label AutoComplete
@@ -12,7 +14,18 @@ module Primer
12
14
  # @param is_clearable toggle
13
15
  def playground(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
14
16
  # rubocop:disable Primer/ComponentNameMigration
15
- render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
17
+ render(
18
+ Primer::Alpha::AutoComplete.new(
19
+ label_text: label_text,
20
+ input_id: "input-id",
21
+ list_id: "test-id",
22
+ src: URLHelpers.autocomplete_index_path(version: "alpha"),
23
+ is_label_visible: is_label_visible,
24
+ is_label_inline: is_label_inline,
25
+ with_icon: with_icon,
26
+ is_clearable: is_clearable
27
+ )
28
+ )
16
29
  # rubocop:enable Primer/ComponentNameMigration
17
30
  end
18
31
 
@@ -24,7 +37,18 @@ module Primer
24
37
  # @param is_clearable toggle
25
38
  def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
26
39
  # rubocop:disable Primer/ComponentNameMigration
27
- render(Primer::Alpha::AutoComplete.new(label_text: label_text, input_id: "input-id", list_id: "test-id", src: "/auto_complete?version=alpha", is_label_visible: is_label_visible, is_label_inline: is_label_inline, with_icon: with_icon, is_clearable: is_clearable))
40
+ render(
41
+ Primer::Alpha::AutoComplete.new(
42
+ label_text: label_text,
43
+ input_id: "input-id",
44
+ list_id: "test-id",
45
+ src: URLHelpers.autocomplete_index_path(version: "alpha"),
46
+ is_label_visible: is_label_visible,
47
+ is_label_inline: is_label_inline,
48
+ with_icon: with_icon,
49
+ is_clearable: is_clearable
50
+ )
51
+ )
28
52
  # rubocop:enable Primer/ComponentNameMigration
29
53
  end
30
54
 
@@ -33,28 +57,60 @@ module Primer
33
57
  # @label AutoComplete with non-visible label
34
58
  def with_non_visible_label
35
59
  # rubocop:disable Primer/ComponentNameMigration
36
- render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-1", list_id: "test-id-1", src: "/auto_complete?version=alpha", is_label_visible: false))
60
+ render(
61
+ Primer::Alpha::AutoComplete.new(
62
+ label_text: "Select a fruit",
63
+ input_id: "input-id-1",
64
+ list_id: "test-id-1",
65
+ src: URLHelpers.autocomplete_index_path(version: "alpha"),
66
+ is_label_visible: false
67
+ )
68
+ )
37
69
  # rubocop:enable Primer/ComponentNameMigration
38
70
  end
39
71
 
40
72
  # @label AutoComplete with inline label
41
73
  def with_inline_label
42
74
  # rubocop:disable Primer/ComponentNameMigration
43
- render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-2", list_id: "test-id-2", src: "/auto_complete?version=alpha", is_label_inline: true))
75
+ render(
76
+ Primer::Alpha::AutoComplete.new(
77
+ label_text: "Select a fruit",
78
+ input_id: "input-id-2",
79
+ list_id: "test-id-2",
80
+ src: URLHelpers.autocomplete_index_path(version: "alpha"),
81
+ is_label_inline: true
82
+ )
83
+ )
44
84
  # rubocop:enable Primer/ComponentNameMigration
45
85
  end
46
86
 
47
87
  # @label AutoComplete with search icon
48
88
  def with_icon
49
89
  # rubocop:disable Primer/ComponentNameMigration
50
- render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-3", list_id: "test-id-3", src: "/auto_complete?version=alpha", with_icon: true))
90
+ render(
91
+ Primer::Alpha::AutoComplete.new(
92
+ label_text: "Select a fruit",
93
+ input_id: "input-id-3",
94
+ list_id: "test-id-3",
95
+ src: URLHelpers.autocomplete_index_path(version: "alpha"),
96
+ with_icon: true
97
+ )
98
+ )
51
99
  # rubocop:enable Primer/ComponentNameMigration
52
100
  end
53
101
 
54
102
  # @label AutoComplete with clear button
55
103
  def with_clear_button
56
104
  # rubocop:disable Primer/ComponentNameMigration
57
- render(Primer::Alpha::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id-4", list_id: "test-id-4", src: "/auto_complete?version=alpha", is_clearable: true))
105
+ render(
106
+ Primer::Alpha::AutoComplete.new(
107
+ label_text: "Select a fruit",
108
+ input_id: "input-id-4",
109
+ list_id: "test-id-4",
110
+ src: URLHelpers.autocomplete_index_path(version: "alpha"),
111
+ is_clearable: true
112
+ )
113
+ )
58
114
  # rubocop:enable Primer/ComponentNameMigration
59
115
  end
60
116
 
@@ -19,12 +19,9 @@ module Primer
19
19
  end
20
20
  end
21
21
 
22
- # @label Default options
23
- # @param stacking_breakpoint [Symbol] select [sm, md, lg]
24
- # @param first_in_source [Symbol] select [sidebar, main]
25
- # @param gutter [Symbol] select [default, none, condensed, spacious]
26
- def default(stacking_breakpoint: :sm, gutter: :default, first_in_source: :sidebar)
27
- render(Primer::Alpha::Layout.new(stacking_breakpoint: stacking_breakpoint, gutter: gutter, first_in_source: first_in_source)) do |c|
22
+ # @label Default
23
+ def default
24
+ render(Primer::Alpha::Layout.new) do |c|
28
25
  c.with_main(bg: :attention, p: 6) do
29
26
  "Main content"
30
27
  end
@@ -33,6 +30,182 @@ module Primer
33
30
  end
34
31
  end
35
32
  end
33
+
34
+ # @!group Gutter
35
+ #
36
+ # @label None
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" }
41
+ end
42
+ end
43
+
44
+ # @label Condensed
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" }
49
+ end
50
+ end
51
+
52
+ # @label Default
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" }
57
+ end
58
+ end
59
+
60
+ # @label Spacious
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" }
65
+ end
66
+ end
67
+ #
68
+ # @!endgroup
69
+
70
+ # @!group Main width
71
+ #
72
+ # @label Medium
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" }
77
+ end
78
+ end
79
+
80
+ # @label Large
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" }
85
+ end
86
+ end
87
+
88
+ # @label Extra large
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" }
93
+ end
94
+ end
95
+
96
+ # @label Full
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" }
101
+ end
102
+ end
103
+ #
104
+ # @!endgroup
105
+
106
+ # @!group Sidebar width
107
+ #
108
+ # @label Narrow
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" }
113
+ end
114
+ end
115
+
116
+ # @label Default
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" }
121
+ end
122
+ end
123
+
124
+ # @label Wide
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" }
129
+ end
130
+ end
131
+ #
132
+ # @!endgroup
133
+
134
+ # @!group Sidebar column placement
135
+ #
136
+ # @label Start
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" }
141
+ end
142
+ end
143
+
144
+ # @label End
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" }
149
+ end
150
+ end
151
+ #
152
+ # @!endgroup
153
+
154
+ # @!group Sidebar row placement
155
+ #
156
+ # @label Start
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" }
161
+ end
162
+ end
163
+
164
+ # @label End
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" }
169
+ end
170
+ end
171
+
172
+ # @label None
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" }
177
+ end
178
+ end
179
+ #
180
+ # @!endgroup
181
+
182
+ # @!group Stacking breakpoint
183
+ #
184
+ # @label Small
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" }
189
+ end
190
+ end
191
+
192
+ # @label Medium
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" }
197
+ end
198
+ end
199
+
200
+ # @label Large
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" }
205
+ end
206
+ end
207
+ #
208
+ # @!endgroup
36
209
  end
37
210
  end
38
211
  end
@@ -1,4 +1,4 @@
1
- <%= render(Primer::MenuComponent.new) do |c| %>
1
+ <%= render(Primer::Alpha::Menu.new) do |c| %>
2
2
  <% c.with_heading(tag: :h2) do %>
3
3
  Heading
4
4
  <% end %>
@@ -6,11 +6,11 @@
6
6
  Item 1
7
7
  <% end %>
8
8
  <% c.with_item(href: "#url") do %>
9
- <%= render(Primer::OcticonComponent.new("check")) %>
9
+ <%= render(Primer::Beta::Octicon.new("check")) %>
10
10
  With Icon
11
11
  <% end %>
12
12
  <% c.with_item(href: "#url") do %>
13
- <%= render(Primer::OcticonComponent.new("check")) %>
13
+ <%= render(Primer::Beta::Octicon.new("check")) %>
14
14
  With Icon and Counter
15
15
  <%= render(Primer::Beta::Counter.new(count: 25)) %>
16
16
  <% end %>
@@ -1,4 +1,4 @@
1
- <%= render(Primer::MenuComponent.new) do |c| %>
1
+ <%= render(Primer::Alpha::Menu.new) do |c| %>
2
2
  <% c.with_heading(tag: :h2) do %>
3
3
  Heading
4
4
  <% end %>
@@ -6,11 +6,11 @@
6
6
  Item 1
7
7
  <% end %>
8
8
  <% c.with_item(href: "#url") do %>
9
- <%= render(Primer::OcticonComponent.new("check")) %>
9
+ <%= render(Primer::Beta::Octicon.new("check")) %>
10
10
  With Icon
11
11
  <% end %>
12
12
  <% c.with_item(href: "#url") do %>
13
- <%= render(Primer::OcticonComponent.new("check")) %>
13
+ <%= render(Primer::Beta::Octicon.new("check")) %>
14
14
  With Icon and Counter
15
15
  <%= render(Primer::Beta::Counter.new(count: 25)) %>
16
16
  <% end %>
@@ -0,0 +1,14 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Alpha
5
+ # @label Menu
6
+ class MenuPreview < ViewComponent::Preview
7
+ # @label Playground
8
+ def playground; end
9
+
10
+ # @label Default
11
+ def default; end
12
+ end
13
+ end
14
+ end
@@ -1,5 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ require_relative "../url_helpers"
4
+
3
5
  module Primer
4
6
  module Alpha
5
7
  # @label Toggle Switch
@@ -7,31 +9,31 @@ module Primer
7
9
  include ActionView::Helpers::FormTagHelper
8
10
 
9
11
  def playground
10
- render(ToggleSwitch.new(src: "/toggle_switch"))
12
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path))
11
13
  end
12
14
 
13
15
  def default
14
- render(ToggleSwitch.new(src: "/toggle_switch"))
16
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path))
15
17
  end
16
18
 
17
19
  def checked
18
- render(ToggleSwitch.new(src: "/toggle_switch", checked: true))
20
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, checked: true))
19
21
  end
20
22
 
21
23
  def disabled
22
- render(ToggleSwitch.new(src: "/toggle_switch", enabled: false))
24
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, enabled: false))
23
25
  end
24
26
 
25
27
  def checked_disabled
26
- render(ToggleSwitch.new(src: "/toggle_switch", checked: true, enabled: false))
28
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, checked: true, enabled: false))
27
29
  end
28
30
 
29
31
  def small
30
- render(ToggleSwitch.new(src: "/toggle_switch", size: :small))
32
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, size: :small))
31
33
  end
32
34
 
33
35
  def with_status_label_position_end
34
- render(ToggleSwitch.new(src: "/toggle_switch", status_label_position: :end))
36
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, status_label_position: :end))
35
37
  end
36
38
 
37
39
  def with_a_bad_src
@@ -43,11 +45,11 @@ module Primer
43
45
  end
44
46
 
45
47
  def with_csrf_token
46
- render(ToggleSwitch.new(src: "/toggle_switch", csrf_token: "let_me_in"))
48
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
47
49
  end
48
50
 
49
51
  def with_bad_csrf_token
50
- render(ToggleSwitch.new(src: "/toggle_switch", csrf_token: "i_am_a_criminal"))
52
+ render(ToggleSwitch.new(src: URLHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
51
53
  end
52
54
  end
53
55
  end
@@ -4,7 +4,7 @@
4
4
  label_text: label_text,
5
5
  input_id: input_id,
6
6
  list_id: list_id,
7
- src: "/auto_complete",
7
+ src: autocomplete_index_path,
8
8
  show_clear_button: show_clear_button,
9
9
  visually_hide_label: visually_hide_label,
10
10
  placeholder: placeholder,
@@ -1,5 +1,7 @@
1
1
  # frozen_string_literal: true
2
2
 
3
+ require_relative "../url_helpers"
4
+
3
5
  module Primer
4
6
  module Beta
5
7
  # @label AutoComplete
@@ -19,7 +21,7 @@ module Primer
19
21
  # @param inset toggle
20
22
  # @param monospace toggle
21
23
  def playground(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false)
22
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c|
24
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c|
23
25
  c.leading_visual_icon(icon: :search)
24
26
  end
25
27
  end
@@ -39,7 +41,7 @@ module Primer
39
41
  # @param inset toggle
40
42
  # @param monospace toggle
41
43
  def default(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id", inset: false, monospace: false)
42
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c|
44
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name, inset: inset, monospace: monospace)) do |c|
43
45
  c.leading_visual_icon(icon: :search)
44
46
  end
45
47
  end
@@ -85,7 +87,7 @@ module Primer
85
87
  # @param list_id text
86
88
  # @param input_name text
87
89
  def leading_visual(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
88
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
90
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
89
91
  c.leading_visual_icon(icon: :search)
90
92
  end
91
93
  end
@@ -103,7 +105,7 @@ module Primer
103
105
  # @param list_id text
104
106
  # @param input_name text
105
107
  def trailing_action(label_text: "Select a fruit", show_clear_button: true, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
106
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
108
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
107
109
  end
108
110
 
109
111
  # @label Full width
@@ -119,7 +121,7 @@ module Primer
119
121
  # @param list_id text
120
122
  # @param input_name text
121
123
  def full_width(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: true, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
122
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
124
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
123
125
  c.leading_visual_icon(icon: :search)
124
126
  end
125
127
  end
@@ -137,7 +139,7 @@ module Primer
137
139
  # @param list_id text
138
140
  # @param input_name text
139
141
  def visually_hide_label(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: true, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
140
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
142
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
141
143
  c.leading_visual_icon(icon: :search)
142
144
  end
143
145
  end
@@ -156,7 +158,7 @@ module Primer
156
158
  # @param list_id text
157
159
  # @param input_name text
158
160
  def small(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :small, full_width: false, disabled: false, invalid: false, input_id: "input-id-1", list_id: "list-id-1", input_name: "input-id-1")
159
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
161
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
160
162
  c.leading_visual_icon(icon: :search)
161
163
  end
162
164
  end
@@ -173,7 +175,7 @@ module Primer
173
175
  # @param list_id text
174
176
  # @param input_name text
175
177
  def medium(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id-2", list_id: "list-id-2", input_name: "input-id-2")
176
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
178
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
177
179
  c.leading_visual_icon(icon: :search)
178
180
  end
179
181
  end
@@ -190,7 +192,7 @@ module Primer
190
192
  # @param list_id text
191
193
  # @param input_name text
192
194
  def large(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :large, full_width: false, disabled: false, invalid: false, input_id: "input-id-3", list_id: "list-id-3", input_name: "input-id-3")
193
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
195
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path, show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name)) do |c|
194
196
  c.leading_visual_icon(icon: :search)
195
197
  end
196
198
  end
@@ -210,7 +212,7 @@ module Primer
210
212
  # @param list_id text
211
213
  # @param input_name text
212
214
  def leading_visual_in_results(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
213
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete?visual=leading", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
215
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path(visual: "leading"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
214
216
  end
215
217
 
216
218
  # @label Trailing visual in results
@@ -226,39 +228,39 @@ module Primer
226
228
  # @param list_id text
227
229
  # @param input_name text
228
230
  def trailing_visual_in_results(label_text: "Select a fruit", show_clear_button: false, visually_hide_label: false, placeholder: "Placeholder text", size: :medium, full_width: false, disabled: false, invalid: false, input_id: "input-id", list_id: "list-id", input_name: "input-id")
229
- render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: "/auto_complete?visual=trailing", show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
231
+ render(Primer::Beta::AutoComplete.new(label_text: label_text, input_id: input_id, list_id: list_id, src: URLHelpers.autocomplete_index_path(visual: "trailing"), show_clear_button: show_clear_button, visually_hide_label: visually_hide_label, placeholder: placeholder, size: size, full_width: full_width, disabled: disabled, invalid: invalid, input_name: input_name))
230
232
  end
231
233
 
232
234
  # @hidden
233
235
  def with_non_visible_label
234
- render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", visually_hide_label: true))
236
+ render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, visually_hide_label: true))
235
237
  end
236
238
 
237
239
  # @hidden
238
240
  def with_icon
239
- render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete")) do |c|
241
+ render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path)) do |c|
240
242
  c.leading_visual_icon(icon: :search)
241
243
  end
242
244
  end
243
245
 
244
246
  # @hidden
245
247
  def show_clear_button
246
- render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", show_clear_button: true))
248
+ render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, show_clear_button: true))
247
249
  end
248
250
 
249
251
  # @hidden
250
252
  def size_small
251
- render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", show_clear_button: false, size: :small))
253
+ render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, show_clear_button: false, size: :small))
252
254
  end
253
255
 
254
256
  # @hidden
255
257
  def monospace
256
- render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", show_clear_button: false, monospace: true))
258
+ render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, show_clear_button: false, monospace: true))
257
259
  end
258
260
 
259
261
  # @hidden
260
262
  def inset
261
- render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: "/auto_complete", show_clear_button: false, inset: true))
263
+ render(Primer::Beta::AutoComplete.new(label_text: "Select a fruit", input_id: "input-id", list_id: "test-id", src: URLHelpers.autocomplete_index_path, show_clear_button: false, inset: true))
262
264
  end
263
265
  end
264
266
  end
@@ -0,0 +1,24 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Beta
5
+ # @label Octicon
6
+ class OcticonPreview < ViewComponent::Preview
7
+ # @label Playground
8
+ #
9
+ # @param aria_label [String]
10
+ # @param size [Symbol] select [xsmall, small, medium]
11
+ def playground(size: :small, aria_label: nil)
12
+ render(Primer::Beta::Octicon.new(icon: :people, size: size, "aria-label": aria_label))
13
+ end
14
+
15
+ # @label Default Options
16
+ #
17
+ # @param aria_label [String]
18
+ # @param size [Symbol] select [xsmall, small, medium]
19
+ def default(size: :small, aria_label: nil)
20
+ render(Primer::Beta::Octicon.new(icon: :people, size: size, "aria-label": aria_label))
21
+ end
22
+ end
23
+ end
24
+ end
@@ -0,0 +1,22 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ module Beta
5
+ # @label Spinner
6
+ class SpinnerPreview < ViewComponent::Preview
7
+ # @label Playground
8
+ #
9
+ # @param size [Symbol] select [small, medium, large]
10
+ def playground(size: :medium)
11
+ render(Primer::Beta::Spinner.new(size: size))
12
+ end
13
+
14
+ # @label Default Options
15
+ #
16
+ # @param size [Symbol] select [small, medium, large]
17
+ def default(size: :medium)
18
+ render(Primer::Beta::Spinner.new(size: size))
19
+ end
20
+ end
21
+ end
22
+ end
@@ -0,0 +1,3 @@
1
+ <%= primer_form_with(url: "/foo") do |f| %>
2
+ <%= render(ImmediateValidationForm.new(f)) %>
3
+ <% end %>
@@ -1,3 +1,14 @@
1
- <%= primer_form_with(url: "/foo") do |f| %>
1
+ <script type="text/javascript">
2
+ window.addEventListener('load', function () {
3
+ document.querySelector('input#country_us').onclick = function() {
4
+ document.querySelector('primer-multi-input').activateField('states');
5
+ };
6
+
7
+ document.querySelector('input#country_ca').onclick = function() {
8
+ document.querySelector('primer-multi-input').activateField('provinces');
9
+ };
10
+ }, false);
11
+ </script>
12
+ <%= primer_form_with(url: multi_index_path(format: :json)) do |f| %>
2
13
  <%= render(MultiInputForm.new(f)) %>
3
14
  <% end %>