primer_view_components 0.3.1 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +31 -0
- data/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +16 -0
- data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +30 -0
- data/app/assets/javascripts/app/components/primer/alpha/dropdown/menu.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/alpha/dropdown.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/alpha/modal_dialog.d.ts +18 -0
- data/app/assets/javascripts/app/components/primer/alpha/nav_list.d.ts +28 -0
- data/app/assets/javascripts/app/components/primer/alpha/segmented_control.d.ts +12 -0
- data/app/assets/javascripts/app/components/primer/alpha/tab_container.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts +30 -0
- data/app/assets/javascripts/app/components/primer/alpha/tool_tip.d.ts +26 -0
- data/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +11 -0
- data/app/assets/javascripts/app/components/primer/anchored_position.d.ts +27 -0
- data/app/assets/javascripts/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/beta/clipboard_copy.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/beta/relative_time.d.ts +1 -0
- data/app/assets/javascripts/app/components/primer/focus_group.d.ts +19 -0
- data/app/assets/javascripts/app/components/primer/primer.d.ts +21 -0
- data/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts +10 -0
- data/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +1 -0
- data/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts +5 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_bar/divider.rb +30 -0
- data/app/components/primer/alpha/action_bar/item.rb +26 -0
- data/app/components/primer/alpha/action_bar.css +1 -0
- data/app/components/primer/alpha/action_bar.css.json +17 -0
- data/app/components/primer/alpha/action_bar.css.map +1 -0
- data/app/components/primer/alpha/action_bar.html.erb +12 -0
- data/app/components/primer/alpha/action_bar.pcss +69 -0
- data/app/components/primer/alpha/action_bar.rb +110 -0
- data/app/components/primer/alpha/action_bar_element.d.ts +16 -0
- data/app/components/primer/alpha/action_bar_element.js +172 -0
- data/app/components/primer/alpha/action_bar_element.ts +175 -0
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +42 -42
- data/app/components/primer/alpha/action_list.rb +1 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -2
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.pcss +10 -10
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +16 -16
- data/app/components/primer/alpha/button_marketing.css +1 -1
- data/app/components/primer/alpha/button_marketing.css.map +1 -1
- data/app/components/primer/alpha/button_marketing.pcss +9 -9
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +9 -9
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/dropdown.pcss +16 -16
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +3 -3
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.pcss +13 -13
- data/app/components/primer/alpha/nav_list.rb +1 -0
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.json +2 -0
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +16 -6
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.pcss +10 -10
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +38 -38
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +23 -23
- data/app/components/primer/alpha/tool_tip.d.ts +3 -2
- data/app/components/primer/alpha/tool_tip.js +89 -44
- data/app/components/primer/alpha/tool_tip.ts +88 -41
- data/app/components/primer/alpha/tooltip.rb +1 -0
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.pcss +15 -15
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar.pcss +2 -2
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.pcss +10 -10
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.pcss +4 -4
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.pcss +31 -31
- data/app/components/primer/beta/breadcrumbs.css +1 -1
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.pcss +2 -2
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +70 -70
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/counter.pcss +7 -7
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.pcss +19 -19
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +23 -23
- data/app/components/primer/beta/link.css +1 -1
- data/app/components/primer/beta/link.css.map +1 -1
- data/app/components/primer/beta/link.pcss +12 -8
- data/app/components/primer/beta/link.rb +6 -10
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +10 -10
- data/app/components/primer/beta/progress_bar.css +1 -1
- data/app/components/primer/beta/progress_bar.css.map +1 -1
- data/app/components/primer/beta/progress_bar.pcss +1 -1
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/state.pcss +8 -8
- data/app/components/primer/beta/subhead.css +1 -1
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/subhead.pcss +3 -3
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/timeline_item.pcss +13 -13
- data/app/components/primer/primer.d.ts +1 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.pcss +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/lib/postcss_mixins/activeIndicatorLine.pcss +1 -1
- data/lib/postcss_mixins/focusBoxShadowInset.pcss +2 -2
- data/lib/postcss_mixins/focusOutline.pcss +1 -1
- data/lib/postcss_mixins/focusOutlineOnEmphasis.pcss +2 -2
- data/lib/postcss_mixins/targetBoxShadow.pcss +2 -1
- data/lib/primer/static/generate_previews.rb +9 -0
- data/lib/primer/view_components/linters/accessibility.yml +2 -0
- data/lib/primer/view_components/linters/argument_mappers/label.rb +4 -4
- data/lib/primer/view_components/linters/details_menu_migration.rb +35 -0
- data/lib/primer/view_components/linters/label_component_migration_counter.rb +1 -1
- data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -3
- data/lib/primer/view_components/version.rb +2 -2
- data/lib/primer/yard.rb +5 -0
- data/previews/primer/alpha/action_bar_preview/inline.html.erb +16 -0
- data/previews/primer/alpha/action_bar_preview.rb +77 -0
- data/previews/primer/alpha/action_list_preview.rb +10 -0
- data/previews/primer/alpha/action_menu_preview.rb +5 -0
- data/previews/primer/alpha/auto_complete_preview.rb +1 -0
- data/previews/primer/alpha/banner_preview.rb +9 -1
- data/previews/primer/alpha/button_marketing_preview.rb +2 -0
- data/previews/primer/alpha/check_box_group_preview.rb +1 -0
- data/previews/primer/alpha/check_box_preview.rb +6 -0
- data/previews/primer/alpha/dialog_preview.rb +1 -0
- data/previews/primer/alpha/dropdown_preview.rb +1 -0
- data/previews/primer/alpha/hellip_button_preview.rb +1 -0
- data/previews/primer/alpha/hidden_text_expander_preview.rb +1 -0
- data/previews/primer/alpha/layout_preview.rb +4 -0
- data/previews/primer/alpha/menu_preview.rb +1 -0
- data/previews/primer/alpha/multi_input_preview.rb +4 -0
- data/previews/primer/alpha/nav_list_preview.rb +3 -0
- data/previews/primer/alpha/radio_button_group_preview.rb +2 -0
- data/previews/primer/alpha/radio_button_preview.rb +10 -0
- data/previews/primer/alpha/segmented_control_preview.rb +13 -0
- data/previews/primer/alpha/select_preview.rb +6 -0
- data/previews/primer/alpha/tab_nav_preview.rb +3 -0
- data/previews/primer/alpha/tab_panels_preview.rb +1 -0
- data/previews/primer/alpha/text_area_preview.rb +7 -0
- data/previews/primer/alpha/text_field_preview.rb +15 -0
- data/previews/primer/alpha/toggle_switch_preview.rb +18 -11
- data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb +20 -0
- data/previews/primer/alpha/tooltip_preview.rb +7 -0
- data/previews/primer/alpha/underline_nav_preview.rb +2 -0
- data/previews/primer/beta/auto_complete_item_preview.rb +2 -0
- data/previews/primer/beta/auto_complete_preview.rb +7 -0
- data/previews/primer/beta/avatar_preview.rb +10 -0
- data/previews/primer/beta/avatar_stack_preview.rb +3 -0
- data/previews/primer/beta/blankslate_preview.rb +9 -0
- data/previews/primer/beta/border_box_preview.rb +4 -0
- data/previews/primer/beta/breadcrumbs_preview.rb +1 -0
- data/previews/primer/beta/button_group_preview.rb +4 -0
- data/previews/primer/beta/button_preview/all_schemes.html.erb +4 -0
- data/previews/primer/beta/button_preview.rb +17 -2
- data/previews/primer/beta/clipboard_copy_preview.rb +2 -0
- data/previews/primer/beta/close_button_preview.rb +1 -0
- data/previews/primer/beta/counter_preview.rb +11 -0
- data/previews/primer/beta/flash_preview.rb +8 -0
- data/previews/primer/beta/heading_preview.rb +1 -0
- data/previews/primer/beta/icon_button_preview.rb +3 -0
- data/previews/primer/beta/label_preview.rb +13 -0
- data/previews/primer/beta/link_preview.rb +11 -9
- data/previews/primer/beta/markdown_preview.rb +1 -0
- data/previews/primer/beta/octicon_preview.rb +1 -0
- data/previews/primer/beta/popover_preview.rb +6 -0
- data/previews/primer/beta/progress_bar_preview.rb +4 -0
- data/previews/primer/beta/spinner_preview.rb +1 -0
- data/previews/primer/beta/state_preview.rb +6 -0
- data/previews/primer/beta/subhead_preview.rb +4 -0
- data/previews/primer/beta/text_preview.rb +1 -0
- data/previews/primer/beta/timeline_item_preview.rb +1 -0
- data/previews/primer/beta/truncate_preview.rb +1 -0
- data/previews/primer/box_preview.rb +2 -0
- data/static/arguments.json +55 -11
- data/static/audited_at.json +7 -4
- data/static/classes.json +21 -0
- data/static/constants.json +20 -6
- data/static/info_arch.json +673 -11
- data/static/previews.json +571 -0
- data/static/statuses.json +3 -0
- metadata +44 -8
@@ -12,6 +12,7 @@ module Primer
|
|
12
12
|
# | :outline | :default or :invisible | option for :scheme |
|
13
13
|
# | dropdown | trailing action icon slot | see trailing action preview for markup |
|
14
14
|
#
|
15
|
+
|
15
16
|
# @label Playground
|
16
17
|
# @param scheme select [default, primary, danger, invisible, link]
|
17
18
|
# @param size select [small, medium, large]
|
@@ -130,6 +131,7 @@ module Primer
|
|
130
131
|
end
|
131
132
|
|
132
133
|
# @label Invisible all visuals
|
134
|
+
# @snapshot
|
133
135
|
def invisible_all_visuals
|
134
136
|
render_with_template(locals: {})
|
135
137
|
end
|
@@ -138,6 +140,7 @@ module Primer
|
|
138
140
|
# @param block toggle
|
139
141
|
# @param disabled toggle
|
140
142
|
# @param tag select [a, summary, button]
|
143
|
+
# @snapshot
|
141
144
|
def link(
|
142
145
|
id: "button-preview",
|
143
146
|
block: false,
|
@@ -157,13 +160,20 @@ module Primer
|
|
157
160
|
end
|
158
161
|
|
159
162
|
# @label All schemes
|
160
|
-
|
161
|
-
|
163
|
+
# @snapshot
|
164
|
+
# @param disabled toggle
|
165
|
+
def all_schemes(
|
166
|
+
disabled: false
|
167
|
+
)
|
168
|
+
render_with_template(locals: {
|
169
|
+
disabled: disabled,
|
170
|
+
})
|
162
171
|
end
|
163
172
|
|
164
173
|
# @label Full width
|
165
174
|
# @param disabled toggle
|
166
175
|
# @param tag select [a, summary, button]
|
176
|
+
# @snapshot
|
167
177
|
def full_width(
|
168
178
|
id: "button-preview",
|
169
179
|
tag: :button,
|
@@ -186,6 +196,7 @@ module Primer
|
|
186
196
|
# @param size select [small, medium]
|
187
197
|
# @param block toggle
|
188
198
|
# @param align_content select [center, start]
|
199
|
+
# @snapshot
|
189
200
|
def link_as_button(
|
190
201
|
scheme: :default,
|
191
202
|
size: :medium,
|
@@ -212,6 +223,7 @@ module Primer
|
|
212
223
|
# @param block toggle
|
213
224
|
# @param align_content select [center, start]
|
214
225
|
# @param tag select [a, summary, button]
|
226
|
+
# @snapshot
|
215
227
|
def trailing_visual(
|
216
228
|
scheme: :default,
|
217
229
|
size: :medium,
|
@@ -235,6 +247,7 @@ module Primer
|
|
235
247
|
# @param size select [small, medium]
|
236
248
|
# @param block toggle
|
237
249
|
# @param align_content select [center, start]
|
250
|
+
# @snapshot
|
238
251
|
def leading_visual(
|
239
252
|
scheme: :invisible,
|
240
253
|
size: :medium,
|
@@ -254,6 +267,7 @@ module Primer
|
|
254
267
|
# @label Trailing action
|
255
268
|
# @param block toggle
|
256
269
|
# @param align_content select [center, start]
|
270
|
+
# @snapshot
|
257
271
|
def trailing_action(
|
258
272
|
block: false,
|
259
273
|
id: "button-preview",
|
@@ -270,6 +284,7 @@ module Primer
|
|
270
284
|
# @param block toggle
|
271
285
|
# @param align_content select [center, start]
|
272
286
|
# @param scheme select [default, primary, danger, invisible]
|
287
|
+
# @snapshot
|
273
288
|
def trailing_counter(
|
274
289
|
block: false,
|
275
290
|
id: "button-preview",
|
@@ -16,6 +16,7 @@ module Primer
|
|
16
16
|
#
|
17
17
|
# @param aria_label [String]
|
18
18
|
# @param value [String]
|
19
|
+
# @snapshot
|
19
20
|
def default(value: "Text to copy", aria_label: "Copy text to the system clipboard")
|
20
21
|
render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label))
|
21
22
|
end
|
@@ -24,6 +25,7 @@ module Primer
|
|
24
25
|
#
|
25
26
|
# @param aria_label [String]
|
26
27
|
# @param value [String]
|
28
|
+
# @snapshot
|
27
29
|
def text(value: "Text to copy", aria_label: "Click to copy!")
|
28
30
|
render(Primer::Beta::ClipboardCopy.new(value: value, "aria-label": aria_label)) { "Click to copy!" }
|
29
31
|
end
|
@@ -16,11 +16,13 @@ module Primer
|
|
16
16
|
end
|
17
17
|
|
18
18
|
# @label Default Options
|
19
|
+
# @snapshot
|
19
20
|
def default
|
20
21
|
render(Primer::Beta::Counter.new(count: 1_000))
|
21
22
|
end
|
22
23
|
|
23
24
|
# @label With Text
|
25
|
+
# @snapshot
|
24
26
|
def with_text
|
25
27
|
render(Primer::Beta::Counter.new(text: "∞"))
|
26
28
|
end
|
@@ -28,16 +30,19 @@ module Primer
|
|
28
30
|
# @!group Color Schemes
|
29
31
|
#
|
30
32
|
# @label Default
|
33
|
+
# @snapshot
|
31
34
|
def color_scheme_default
|
32
35
|
render(Primer::Beta::Counter.new(count: 1_000))
|
33
36
|
end
|
34
37
|
|
35
38
|
# @label Primary
|
39
|
+
# @snapshot
|
36
40
|
def color_scheme_primary
|
37
41
|
render(Primer::Beta::Counter.new(count: 1_000, scheme: :primary))
|
38
42
|
end
|
39
43
|
|
40
44
|
# @label Secondary
|
45
|
+
# @snapshot
|
41
46
|
def color_scheme_secondary
|
42
47
|
render(Primer::Beta::Counter.new(count: 1_000, scheme: :secondary))
|
43
48
|
end
|
@@ -47,31 +52,37 @@ module Primer
|
|
47
52
|
# @!group Rounded Number
|
48
53
|
#
|
49
54
|
# @label Default (No Rounding)
|
55
|
+
# @snapshot
|
50
56
|
def rounding_default
|
51
57
|
render(Primer::Beta::Counter.new(count: 1_234))
|
52
58
|
end
|
53
59
|
|
54
60
|
# @label Rounded Above 1,000
|
61
|
+
# @snapshot
|
55
62
|
def rounding_above_1000
|
56
63
|
render(Primer::Beta::Counter.new(count: 1_234, round: true))
|
57
64
|
end
|
58
65
|
|
59
66
|
# @label Rounded Below 1,000
|
67
|
+
# @snapshot
|
60
68
|
def rounding_below_1000
|
61
69
|
render(Primer::Beta::Counter.new(count: 999, round: true))
|
62
70
|
end
|
63
71
|
|
64
72
|
# @label Rounded Large Numbers w/ Default Limit
|
73
|
+
# @snapshot
|
65
74
|
def rounding_large_number
|
66
75
|
render(Primer::Beta::Counter.new(count: 4_567_890, round: true))
|
67
76
|
end
|
68
77
|
|
69
78
|
# @label Rounded Large Numbers, Less Than Custom Limit
|
79
|
+
# @snapshot
|
70
80
|
def rounding_large_number_less_than_custom_limit
|
71
81
|
render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000_000, round: true))
|
72
82
|
end
|
73
83
|
|
74
84
|
# @label Rounded Large Numbers, Greater Than Custom Limit
|
85
|
+
# @snapshot
|
75
86
|
def rounding_large_number_greater_than_custom_limit
|
76
87
|
render(Primer::Beta::Counter.new(count: 4_567_890, limit: 1_000_000, round: true))
|
77
88
|
end
|
@@ -17,6 +17,7 @@ module Primer
|
|
17
17
|
end
|
18
18
|
|
19
19
|
# @label Default
|
20
|
+
# @snapshot
|
20
21
|
#
|
21
22
|
def default
|
22
23
|
render(Primer::Beta::Flash.new) { "This is a flash message!" }
|
@@ -25,21 +26,25 @@ module Primer
|
|
25
26
|
# @!group Color Schemes
|
26
27
|
#
|
27
28
|
# @label Default
|
29
|
+
# @snapshot
|
28
30
|
def color_scheme_default
|
29
31
|
render(Primer::Beta::Flash.new) { "This is a flash message!" }
|
30
32
|
end
|
31
33
|
|
32
34
|
# @label Warning
|
35
|
+
# @snapshot
|
33
36
|
def color_scheme_warning
|
34
37
|
render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" }
|
35
38
|
end
|
36
39
|
|
37
40
|
# @label Danger
|
41
|
+
# @snapshot
|
38
42
|
def color_scheme_danger
|
39
43
|
render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" }
|
40
44
|
end
|
41
45
|
|
42
46
|
# @label Success
|
47
|
+
# @snapshot
|
43
48
|
def color_scheme_success
|
44
49
|
render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" }
|
45
50
|
end
|
@@ -49,16 +54,19 @@ module Primer
|
|
49
54
|
# @!group More options
|
50
55
|
#
|
51
56
|
# @label Full width
|
57
|
+
# @snapshot
|
52
58
|
def options_full
|
53
59
|
render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" }
|
54
60
|
end
|
55
61
|
|
56
62
|
# @label Dismissible
|
63
|
+
# @snapshot
|
57
64
|
def options_dismissible
|
58
65
|
render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" }
|
59
66
|
end
|
60
67
|
|
61
68
|
# @label With icon
|
69
|
+
# @snapshot
|
62
70
|
def options_with_icon
|
63
71
|
render(Primer::Beta::Flash.new(icon: :info)) { "This is a flash message with an icon!" }
|
64
72
|
end
|
@@ -39,6 +39,7 @@ module Primer
|
|
39
39
|
# @param aria_label text
|
40
40
|
# @param disabled toggle
|
41
41
|
# @param tag select [a, summary, button]
|
42
|
+
# @snapshot
|
42
43
|
def default(
|
43
44
|
size: :medium,
|
44
45
|
id: "button-preview",
|
@@ -63,6 +64,7 @@ module Primer
|
|
63
64
|
# @param aria_label text
|
64
65
|
# @param disabled toggle
|
65
66
|
# @param tag select [a, summary, button]
|
67
|
+
# @snapshot
|
66
68
|
def invisible(
|
67
69
|
size: :medium,
|
68
70
|
id: "button-preview",
|
@@ -87,6 +89,7 @@ module Primer
|
|
87
89
|
# @param aria_label text
|
88
90
|
# @param disabled toggle
|
89
91
|
# @param tag select [a, summary, button]
|
92
|
+
# @snapshot
|
90
93
|
def danger(
|
91
94
|
size: :medium,
|
92
95
|
id: "button-preview",
|
@@ -14,6 +14,7 @@ module Primer
|
|
14
14
|
end
|
15
15
|
|
16
16
|
# @label Default Options
|
17
|
+
# @snapshot
|
17
18
|
def default
|
18
19
|
render(Primer::Beta::Label.new) { "Label" }
|
19
20
|
end
|
@@ -26,46 +27,55 @@ module Primer
|
|
26
27
|
end
|
27
28
|
|
28
29
|
# @label Primary
|
30
|
+
# @snapshot
|
29
31
|
def color_scheme_primary
|
30
32
|
render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" }
|
31
33
|
end
|
32
34
|
|
33
35
|
# @label Secondary
|
36
|
+
# @snapshot
|
34
37
|
def color_scheme_secondary
|
35
38
|
render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" }
|
36
39
|
end
|
37
40
|
|
38
41
|
# @label Accent
|
42
|
+
# @snapshot
|
39
43
|
def color_scheme_accent
|
40
44
|
render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" }
|
41
45
|
end
|
42
46
|
|
43
47
|
# @label Success
|
48
|
+
# @snapshot
|
44
49
|
def color_scheme_success
|
45
50
|
render(Primer::Beta::Label.new(scheme: :success)) { "Success" }
|
46
51
|
end
|
47
52
|
|
48
53
|
# @label Attention
|
54
|
+
# @snapshot
|
49
55
|
def color_scheme_attention
|
50
56
|
render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" }
|
51
57
|
end
|
52
58
|
|
53
59
|
# @label Danger
|
60
|
+
# @snapshot
|
54
61
|
def color_scheme_danger
|
55
62
|
render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" }
|
56
63
|
end
|
57
64
|
|
58
65
|
# @label Severe
|
66
|
+
# @snapshot
|
59
67
|
def color_scheme_severe
|
60
68
|
render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" }
|
61
69
|
end
|
62
70
|
|
63
71
|
# @label Done
|
72
|
+
# @snapshot
|
64
73
|
def color_scheme_done
|
65
74
|
render(Primer::Beta::Label.new(scheme: :done)) { "Done" }
|
66
75
|
end
|
67
76
|
|
68
77
|
# @label Sponsors
|
78
|
+
# @snapshot
|
69
79
|
def color_scheme_sponsors
|
70
80
|
render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" }
|
71
81
|
end
|
@@ -75,11 +85,13 @@ module Primer
|
|
75
85
|
# @!group Sizes
|
76
86
|
#
|
77
87
|
# @label Default
|
88
|
+
# @snapshot
|
78
89
|
def size_default
|
79
90
|
render(Primer::Beta::Label.new) { "Default" }
|
80
91
|
end
|
81
92
|
|
82
93
|
# @label Large
|
94
|
+
# @snapshot
|
83
95
|
def size_large
|
84
96
|
render(Primer::Beta::Label.new(size: :large)) { "Large" }
|
85
97
|
end
|
@@ -94,6 +106,7 @@ module Primer
|
|
94
106
|
end
|
95
107
|
|
96
108
|
# @label Inline
|
109
|
+
# @snapshot
|
97
110
|
def inline_inline
|
98
111
|
render(Primer::Beta::Label.new(inline: true)) { "Inline" }
|
99
112
|
end
|
@@ -8,30 +8,28 @@ module Primer
|
|
8
8
|
#
|
9
9
|
# @param underline [Boolean]
|
10
10
|
# @param muted [Boolean]
|
11
|
-
# @param tag [Symbol] select [a, span]
|
12
11
|
# @param scheme [Symbol] select [default, primary, secondary]
|
13
|
-
def playground(
|
14
|
-
render(Primer::Beta::Link.new(href: "#",
|
12
|
+
def playground(scheme: :default, muted: false, underline: true)
|
13
|
+
render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
|
15
14
|
end
|
16
15
|
|
17
16
|
# @label Default Options
|
18
17
|
#
|
19
18
|
# @param underline [Boolean]
|
20
19
|
# @param muted [Boolean]
|
21
|
-
# @param tag [Symbol] select [a, span]
|
22
20
|
# @param scheme [Symbol] select [default, primary, secondary]
|
23
|
-
|
24
|
-
|
21
|
+
# @snapshot
|
22
|
+
def default(scheme: :default, muted: false, underline: true)
|
23
|
+
render(Primer::Beta::Link.new(href: "#", scheme: scheme, muted: muted, underline: underline)) { "This is a link!" }
|
25
24
|
end
|
26
25
|
|
27
26
|
# @label With Tooltip
|
28
27
|
#
|
29
28
|
# @param underline [Boolean]
|
30
29
|
# @param muted [Boolean]
|
31
|
-
# @param tag [Symbol] select [a, span]
|
32
30
|
# @param scheme [Symbol] select [default, primary, secondary]
|
33
|
-
def tooltip(
|
34
|
-
render(Primer::Beta::Link.new(href: "#", id: "tooltip-link",
|
31
|
+
def tooltip(scheme: :default, muted: false, underline: true)
|
32
|
+
render(Primer::Beta::Link.new(href: "#", id: "tooltip-link", scheme: scheme, muted: muted, underline: underline)) do |component|
|
35
33
|
component.with_tooltip(text: "Tooltip text")
|
36
34
|
"Link with tooltip"
|
37
35
|
end
|
@@ -45,21 +43,25 @@ module Primer
|
|
45
43
|
end
|
46
44
|
|
47
45
|
# @label Primary
|
46
|
+
# @snapshot
|
48
47
|
def color_scheme_primary
|
49
48
|
render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "This is a primary link color." }
|
50
49
|
end
|
51
50
|
|
52
51
|
# @label Primary, Muted
|
52
|
+
# @snapshot
|
53
53
|
def color_scheme_primary_muted
|
54
54
|
render(Primer::Beta::Link.new(href: "#", scheme: :primary, muted: true)) { "This is a muted primary link color." }
|
55
55
|
end
|
56
56
|
|
57
57
|
# @label Secondary
|
58
|
+
# @snapshot
|
58
59
|
def color_scheme_secondary
|
59
60
|
render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "This is a secondary link color." }
|
60
61
|
end
|
61
62
|
|
62
63
|
# @label Secondary, Muted
|
64
|
+
# @snapshot
|
63
65
|
def color_scheme_secondary_muted
|
64
66
|
render(Primer::Beta::Link.new(href: "#", scheme: :secondary, muted: true)) { "This is a muted secondary link color." }
|
65
67
|
end
|
@@ -16,6 +16,7 @@ module Primer
|
|
16
16
|
#
|
17
17
|
# @param aria_label [String]
|
18
18
|
# @param size [Symbol] select [xsmall, small, medium]
|
19
|
+
# @snapshot
|
19
20
|
def default(size: :small, aria_label: nil)
|
20
21
|
render(Primer::Beta::Octicon.new(icon: :people, size: size, "aria-label": aria_label))
|
21
22
|
end
|
@@ -21,6 +21,7 @@ module Primer
|
|
21
21
|
# @label Default
|
22
22
|
#
|
23
23
|
# @param caret [Symbol] select [top, right, bottom, left, top_right, top_left, bottom_right, bottom_left, left_bottom, left_top, right_bottom, right_top]
|
24
|
+
# @snapshot
|
24
25
|
def default(caret: :top)
|
25
26
|
render Primer::Beta::Popover.new do |component|
|
26
27
|
component.with_heading do
|
@@ -33,6 +34,7 @@ module Primer
|
|
33
34
|
end
|
34
35
|
|
35
36
|
# @label Large
|
37
|
+
# @snapshot
|
36
38
|
def large
|
37
39
|
render Primer::Beta::Popover.new do |component|
|
38
40
|
component.with_body(large: true) do
|
@@ -42,6 +44,7 @@ module Primer
|
|
42
44
|
end
|
43
45
|
|
44
46
|
# @!group Directions
|
47
|
+
# @snapshot
|
45
48
|
def bottom_right
|
46
49
|
render Primer::Beta::Popover.new do |component|
|
47
50
|
component.with_body(caret: :bottom_right) do
|
@@ -50,6 +53,7 @@ module Primer
|
|
50
53
|
end
|
51
54
|
end
|
52
55
|
|
56
|
+
# @snapshot
|
53
57
|
def top_right
|
54
58
|
render Primer::Beta::Popover.new do |component|
|
55
59
|
component.with_body(caret: :top_right) do
|
@@ -58,6 +62,7 @@ module Primer
|
|
58
62
|
end
|
59
63
|
end
|
60
64
|
|
65
|
+
# @snapshot
|
61
66
|
def bottom_left
|
62
67
|
render Primer::Beta::Popover.new do |component|
|
63
68
|
component.with_body(caret: :bottom_left) do
|
@@ -66,6 +71,7 @@ module Primer
|
|
66
71
|
end
|
67
72
|
end
|
68
73
|
|
74
|
+
# @snapshot
|
69
75
|
def top_left
|
70
76
|
render Primer::Beta::Popover.new do |component|
|
71
77
|
component.with_body(caret: :top_left) do
|
@@ -18,6 +18,7 @@ module Primer
|
|
18
18
|
# @label Default
|
19
19
|
#
|
20
20
|
# @param size [Symbol] select [default, small, large]
|
21
|
+
# @snapshot
|
21
22
|
def default(size: :default)
|
22
23
|
render(Primer::Beta::ProgressBar.new(size: size)) do |component|
|
23
24
|
component.with_item(percentage: 10)
|
@@ -29,6 +30,7 @@ module Primer
|
|
29
30
|
# @!group Sizes
|
30
31
|
#
|
31
32
|
# @label Size small
|
33
|
+
# @snapshot
|
32
34
|
def size_small
|
33
35
|
render(Primer::Beta::ProgressBar.new(size: :small)) do |component|
|
34
36
|
component.with_item(percentage: 10)
|
@@ -38,6 +40,7 @@ module Primer
|
|
38
40
|
end
|
39
41
|
|
40
42
|
# @label Size default
|
43
|
+
# @snapshot
|
41
44
|
def size_default
|
42
45
|
render(Primer::Beta::ProgressBar.new(size: :default)) do |component|
|
43
46
|
component.with_item(percentage: 10)
|
@@ -47,6 +50,7 @@ module Primer
|
|
47
50
|
end
|
48
51
|
|
49
52
|
# @label Size large
|
53
|
+
# @snapshot
|
50
54
|
def size_large
|
51
55
|
render(Primer::Beta::ProgressBar.new(size: :large)) do |component|
|
52
56
|
component.with_item(percentage: 10)
|
@@ -20,6 +20,7 @@ module Primer
|
|
20
20
|
# @param tag [Symbol] select [span, div]
|
21
21
|
# @param size [Symbol] select [default, small]
|
22
22
|
# @param scheme [Symbol] select [default, open, closed, merged]
|
23
|
+
# @snapshot
|
23
24
|
def default(title: "State", scheme: :default, size: :default, tag: :span)
|
24
25
|
render(Primer::Beta::State.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
|
25
26
|
end
|
@@ -32,16 +33,19 @@ module Primer
|
|
32
33
|
end
|
33
34
|
|
34
35
|
# @label Open
|
36
|
+
# @snapshot
|
35
37
|
def states_open
|
36
38
|
render(Primer::Beta::State.new(title: "Open", scheme: :open)) { "Open state" }
|
37
39
|
end
|
38
40
|
|
39
41
|
# @label Closed
|
42
|
+
# @snapshot
|
40
43
|
def states_closed
|
41
44
|
render(Primer::Beta::State.new(title: "Closed", scheme: :closed)) { "Closed state" }
|
42
45
|
end
|
43
46
|
|
44
47
|
# @label Merged
|
48
|
+
# @snapshot
|
45
49
|
def states_merged
|
46
50
|
render(Primer::Beta::State.new(title: "Merged", scheme: :merged)) { "Merged state" }
|
47
51
|
end
|
@@ -51,11 +55,13 @@ module Primer
|
|
51
55
|
# @!group Sizes
|
52
56
|
#
|
53
57
|
# @label Default
|
58
|
+
# @snapshot
|
54
59
|
def sizes_default
|
55
60
|
render(Primer::Beta::State.new(title: "Default")) { "Default size" }
|
56
61
|
end
|
57
62
|
|
58
63
|
# @label Small
|
64
|
+
# @snapshot
|
59
65
|
def sizes_small
|
60
66
|
render(Primer::Beta::State.new(title: "Default", size: :small)) { "Small size" }
|
61
67
|
end
|
@@ -27,6 +27,7 @@ module Primer
|
|
27
27
|
# @param hide_border [Boolean]
|
28
28
|
# @param heading_danger [Boolean]
|
29
29
|
# @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
|
30
|
+
# @snapshot
|
30
31
|
def default(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
|
31
32
|
render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
|
32
33
|
component.with_heading(tag: heading_tag, danger: heading_danger) do
|
@@ -39,6 +40,7 @@ module Primer
|
|
39
40
|
end
|
40
41
|
|
41
42
|
# @label Danger
|
43
|
+
# @snapshot
|
42
44
|
def danger
|
43
45
|
render(Primer::Beta::Subhead.new) do |component|
|
44
46
|
component.with_heading(danger: true) do
|
@@ -51,6 +53,7 @@ module Primer
|
|
51
53
|
end
|
52
54
|
|
53
55
|
# @label Actions
|
56
|
+
# @snapshot
|
54
57
|
def actions
|
55
58
|
render_with_template(locals: {})
|
56
59
|
end
|
@@ -70,6 +73,7 @@ module Primer
|
|
70
73
|
end
|
71
74
|
|
72
75
|
# @label Spacious
|
76
|
+
# @snapshot
|
73
77
|
def spacing_spacious
|
74
78
|
render(Primer::Beta::Subhead.new(spacious: true)) do |component|
|
75
79
|
component.with_heading do
|
@@ -18,6 +18,7 @@ module Primer
|
|
18
18
|
# @label Default
|
19
19
|
#
|
20
20
|
# @param condensed [Boolean]
|
21
|
+
# @snapshot
|
21
22
|
def default(condensed: false)
|
22
23
|
render(Primer::Beta::TimelineItem.new(condensed: condensed)) do |component|
|
23
24
|
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
|
@@ -42,6 +42,7 @@ module Primer
|
|
42
42
|
end
|
43
43
|
|
44
44
|
# @label Max widths
|
45
|
+
# @snapshot
|
45
46
|
def max_widths
|
46
47
|
render(Primer::Beta::Truncate.new) do |component|
|
47
48
|
component.with_item(max_width: 300) { "branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long" }
|
@@ -16,11 +16,13 @@ module Primer
|
|
16
16
|
end
|
17
17
|
|
18
18
|
# @label Border
|
19
|
+
# @snapshot
|
19
20
|
def border(content: "Box with border")
|
20
21
|
render(Primer::Box.new(border: true, p: 3)) { content }
|
21
22
|
end
|
22
23
|
|
23
24
|
# @label Border Bottom
|
25
|
+
# @snapshot
|
24
26
|
def border_bottom(content: "Box with bottom border")
|
25
27
|
render(Primer::Box.new(border: :bottom, p: 3)) { content }
|
26
28
|
end
|