primer_view_components 0.0.45 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +194 -0
- data/app/components/primer/{auto_complete_component.d.ts → auto_complete/auto_component.d.ts} +0 -0
- data/app/components/primer/{auto_complete_component.js → auto_complete/auto_component.js} +0 -0
- data/app/components/primer/base_component.rb +36 -7
- data/app/components/primer/beta/auto_complete.rb +159 -0
- data/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
- data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.html.erb +0 -0
- data/app/components/primer/beta/auto_complete/auto_complete.js +1 -0
- data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.ts +0 -0
- data/app/components/primer/beta/auto_complete/item.rb +44 -0
- data/app/components/primer/beta/avatar.rb +77 -0
- data/app/components/primer/{avatar_stack_component.html.erb → beta/avatar_stack.html.erb} +0 -0
- data/app/components/primer/beta/avatar_stack.rb +92 -0
- data/app/components/primer/border_box_component.rb +3 -0
- data/app/components/primer/component.rb +9 -1
- data/app/components/primer/details_component.rb +12 -8
- data/app/components/primer/image_crop.html.erb +4 -4
- data/app/components/primer/image_crop.rb +1 -1
- data/app/components/primer/markdown.rb +9 -9
- data/app/components/primer/menu_component.rb +7 -3
- data/app/components/primer/navigation/tab_component.rb +34 -6
- data/app/components/primer/popover_component.rb +6 -3
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.ts +1 -1
- data/app/components/primer/tab_nav_component.rb +9 -6
- data/app/components/primer/timeline_item_component.rb +2 -2
- data/app/components/primer/tooltip.rb +1 -1
- data/app/components/primer/truncate.rb +6 -1
- data/app/components/primer/underline_nav_component.rb +13 -6
- data/{app/lib → lib}/primer/classify.rb +12 -39
- data/{app/lib → lib}/primer/classify/cache.rb +6 -20
- data/{app/lib → lib}/primer/classify/flex.rb +0 -0
- data/{app/lib → lib}/primer/classify/functional_background_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/functional_border_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/functional_colors.rb +0 -0
- data/{app/lib → lib}/primer/classify/functional_text_colors.rb +2 -0
- data/{app/lib → lib}/primer/classify/grid.rb +0 -0
- data/{app/lib → lib}/primer/classify/utilities.rb +54 -22
- data/{app/lib → lib}/primer/classify/utilities.yml +124 -0
- data/lib/primer/view_components.rb +35 -6
- data/lib/primer/view_components/constants.rb +55 -0
- data/lib/primer/view_components/linters/argument_mappers/base.rb +39 -0
- data/lib/primer/view_components/linters/argument_mappers/button.rb +35 -44
- data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb +25 -0
- data/lib/primer/view_components/linters/argument_mappers/label.rb +56 -0
- data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +1 -2
- data/lib/primer/view_components/linters/autocorrectable.rb +30 -0
- data/lib/primer/view_components/linters/button_component_migration_counter.rb +9 -23
- data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +21 -0
- data/lib/primer/view_components/linters/helpers.rb +56 -38
- data/lib/primer/view_components/linters/label_component_migration_counter.rb +25 -0
- data/lib/primer/view_components/statuses.rb +14 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/config/default.yml +12 -0
- data/lib/rubocop/cop/primer.rb +4 -0
- data/lib/rubocop/cop/primer/no_tag_memoize.rb +42 -0
- data/lib/rubocop/cop/primer/system_argument_instead_of_class.rb +75 -0
- data/lib/tasks/constants.rake +12 -0
- data/lib/tasks/docs.rake +89 -34
- data/lib/tasks/utilities.rake +9 -11
- data/lib/yard/docs_helper.rb +12 -3
- data/static/arguments.yml +977 -0
- data/static/assets/view-components.svg +18 -0
- data/static/classes.yml +174 -0
- data/static/constants.json +628 -0
- data/static/statuses.json +5 -5
- metadata +44 -27
- data/app/components/primer/auto_complete.rb +0 -156
- data/app/components/primer/auto_complete/item.rb +0 -42
- data/app/components/primer/avatar_component.rb +0 -75
- data/app/components/primer/avatar_stack_component.rb +0 -84
- data/app/components/primer/details_menu_component.d.ts +0 -1
- data/app/components/primer/details_menu_component.js +0 -1
data/static/statuses.json
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
{
|
2
2
|
"Primer::Alpha::ButtonMarketing": "alpha",
|
3
|
-
"Primer::AutoComplete": "beta",
|
4
|
-
"Primer::AutoComplete::Input": "alpha",
|
5
|
-
"Primer::AutoComplete::Item": "beta",
|
6
|
-
"Primer::AvatarComponent": "beta",
|
7
|
-
"Primer::AvatarStackComponent": "beta",
|
8
3
|
"Primer::BaseButton": "beta",
|
9
4
|
"Primer::BaseComponent": "beta",
|
5
|
+
"Primer::Beta::AutoComplete": "beta",
|
6
|
+
"Primer::Beta::AutoComplete::Input": "alpha",
|
7
|
+
"Primer::Beta::AutoComplete::Item": "beta",
|
8
|
+
"Primer::Beta::Avatar": "beta",
|
9
|
+
"Primer::Beta::AvatarStack": "beta",
|
10
10
|
"Primer::Beta::Text": "beta",
|
11
11
|
"Primer::BlankslateComponent": "beta",
|
12
12
|
"Primer::BorderBoxComponent": "beta",
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.49
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2021-
|
11
|
+
date: 2021-07-27 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -338,7 +338,7 @@ dependencies:
|
|
338
338
|
- - "~>"
|
339
339
|
- !ruby/object:Gem::Version
|
340
340
|
version: 0.9.25
|
341
|
-
description:
|
341
|
+
description:
|
342
342
|
email:
|
343
343
|
- opensource+primer_view_components@github.com
|
344
344
|
executables: []
|
@@ -351,19 +351,21 @@ files:
|
|
351
351
|
- app/assets/javascripts/primer_view_components.js
|
352
352
|
- app/assets/javascripts/primer_view_components.js.map
|
353
353
|
- app/components/primer/alpha/button_marketing.rb
|
354
|
-
- app/components/primer/auto_complete.rb
|
355
354
|
- app/components/primer/auto_complete/auto_complete.d.ts
|
356
|
-
- app/components/primer/auto_complete/auto_complete.html.erb
|
357
355
|
- app/components/primer/auto_complete/auto_complete.js
|
358
|
-
- app/components/primer/auto_complete/
|
359
|
-
- app/components/primer/auto_complete/
|
360
|
-
- app/components/primer/auto_complete_component.d.ts
|
361
|
-
- app/components/primer/auto_complete_component.js
|
362
|
-
- app/components/primer/avatar_component.rb
|
363
|
-
- app/components/primer/avatar_stack_component.html.erb
|
364
|
-
- app/components/primer/avatar_stack_component.rb
|
356
|
+
- app/components/primer/auto_complete/auto_component.d.ts
|
357
|
+
- app/components/primer/auto_complete/auto_component.js
|
365
358
|
- app/components/primer/base_button.rb
|
366
359
|
- app/components/primer/base_component.rb
|
360
|
+
- app/components/primer/beta/auto_complete.rb
|
361
|
+
- app/components/primer/beta/auto_complete/auto_complete.d.ts
|
362
|
+
- app/components/primer/beta/auto_complete/auto_complete.html.erb
|
363
|
+
- app/components/primer/beta/auto_complete/auto_complete.js
|
364
|
+
- app/components/primer/beta/auto_complete/auto_complete.ts
|
365
|
+
- app/components/primer/beta/auto_complete/item.rb
|
366
|
+
- app/components/primer/beta/avatar.rb
|
367
|
+
- app/components/primer/beta/avatar_stack.html.erb
|
368
|
+
- app/components/primer/beta/avatar_stack.rb
|
367
369
|
- app/components/primer/beta/text.rb
|
368
370
|
- app/components/primer/blankslate_component.html.erb
|
369
371
|
- app/components/primer/blankslate_component.rb
|
@@ -386,8 +388,6 @@ files:
|
|
386
388
|
- app/components/primer/counter_component.rb
|
387
389
|
- app/components/primer/details_component.html.erb
|
388
390
|
- app/components/primer/details_component.rb
|
389
|
-
- app/components/primer/details_menu_component.d.ts
|
390
|
-
- app/components/primer/details_menu_component.js
|
391
391
|
- app/components/primer/dropdown.d.ts
|
392
392
|
- app/components/primer/dropdown.html.erb
|
393
393
|
- app/components/primer/dropdown.js
|
@@ -459,16 +459,6 @@ files:
|
|
459
459
|
- app/components/primer/underline_nav_component.html.erb
|
460
460
|
- app/components/primer/underline_nav_component.rb
|
461
461
|
- app/lib/primer/class_name_helper.rb
|
462
|
-
- app/lib/primer/classify.rb
|
463
|
-
- app/lib/primer/classify/cache.rb
|
464
|
-
- app/lib/primer/classify/flex.rb
|
465
|
-
- app/lib/primer/classify/functional_background_colors.rb
|
466
|
-
- app/lib/primer/classify/functional_border_colors.rb
|
467
|
-
- app/lib/primer/classify/functional_colors.rb
|
468
|
-
- app/lib/primer/classify/functional_text_colors.rb
|
469
|
-
- app/lib/primer/classify/grid.rb
|
470
|
-
- app/lib/primer/classify/utilities.rb
|
471
|
-
- app/lib/primer/classify/utilities.yml
|
472
462
|
- app/lib/primer/fetch_or_fallback_helper.rb
|
473
463
|
- app/lib/primer/join_style_arguments_helper.rb
|
474
464
|
- app/lib/primer/octicon/cache.rb
|
@@ -476,16 +466,39 @@ files:
|
|
476
466
|
- app/lib/primer/tabbed_component_helper.rb
|
477
467
|
- app/lib/primer/test_selector_helper.rb
|
478
468
|
- app/lib/primer/view_helper.rb
|
469
|
+
- lib/primer/classify.rb
|
470
|
+
- lib/primer/classify/cache.rb
|
471
|
+
- lib/primer/classify/flex.rb
|
472
|
+
- lib/primer/classify/functional_background_colors.rb
|
473
|
+
- lib/primer/classify/functional_border_colors.rb
|
474
|
+
- lib/primer/classify/functional_colors.rb
|
475
|
+
- lib/primer/classify/functional_text_colors.rb
|
476
|
+
- lib/primer/classify/grid.rb
|
477
|
+
- lib/primer/classify/utilities.rb
|
478
|
+
- lib/primer/classify/utilities.yml
|
479
479
|
- lib/primer/view_components.rb
|
480
|
+
- lib/primer/view_components/constants.rb
|
480
481
|
- lib/primer/view_components/engine.rb
|
481
482
|
- lib/primer/view_components/linters.rb
|
483
|
+
- lib/primer/view_components/linters/argument_mappers/base.rb
|
482
484
|
- lib/primer/view_components/linters/argument_mappers/button.rb
|
485
|
+
- lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb
|
483
486
|
- lib/primer/view_components/linters/argument_mappers/conversion_error.rb
|
487
|
+
- lib/primer/view_components/linters/argument_mappers/label.rb
|
484
488
|
- lib/primer/view_components/linters/argument_mappers/system_arguments.rb
|
489
|
+
- lib/primer/view_components/linters/autocorrectable.rb
|
485
490
|
- lib/primer/view_components/linters/button_component_migration_counter.rb
|
491
|
+
- lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb
|
486
492
|
- lib/primer/view_components/linters/flash_component_migration_counter.rb
|
487
493
|
- lib/primer/view_components/linters/helpers.rb
|
494
|
+
- lib/primer/view_components/linters/label_component_migration_counter.rb
|
495
|
+
- lib/primer/view_components/statuses.rb
|
488
496
|
- lib/primer/view_components/version.rb
|
497
|
+
- lib/rubocop/config/default.yml
|
498
|
+
- lib/rubocop/cop/primer.rb
|
499
|
+
- lib/rubocop/cop/primer/no_tag_memoize.rb
|
500
|
+
- lib/rubocop/cop/primer/system_argument_instead_of_class.rb
|
501
|
+
- lib/tasks/constants.rake
|
489
502
|
- lib/tasks/coverage.rake
|
490
503
|
- lib/tasks/docs.rake
|
491
504
|
- lib/tasks/statuses.rake
|
@@ -493,13 +506,17 @@ files:
|
|
493
506
|
- lib/yard/docs_helper.rb
|
494
507
|
- lib/yard/renders_many_handler.rb
|
495
508
|
- lib/yard/renders_one_handler.rb
|
509
|
+
- static/arguments.yml
|
510
|
+
- static/assets/view-components.svg
|
511
|
+
- static/classes.yml
|
512
|
+
- static/constants.json
|
496
513
|
- static/statuses.json
|
497
514
|
homepage: https://github.com/primer/view_components
|
498
515
|
licenses:
|
499
516
|
- MIT
|
500
517
|
metadata:
|
501
518
|
allowed_push_host: https://rubygems.org
|
502
|
-
post_install_message:
|
519
|
+
post_install_message:
|
503
520
|
rdoc_options: []
|
504
521
|
require_paths:
|
505
522
|
- lib
|
@@ -515,7 +532,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
515
532
|
version: '0'
|
516
533
|
requirements: []
|
517
534
|
rubygems_version: 3.1.2
|
518
|
-
signing_key:
|
535
|
+
signing_key:
|
519
536
|
specification_version: 4
|
520
537
|
summary: ViewComponents for the Primer Design System
|
521
538
|
test_files: []
|
@@ -1,156 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the
|
5
|
-
# input field. This list is populated by server search results.
|
6
|
-
# @accessibility
|
7
|
-
# Always set an accessible label to help the user interact with the component.
|
8
|
-
#
|
9
|
-
# * Set the `label` slot to render a visible label. Alternatively, associate an existing visible text element
|
10
|
-
# as a label by setting `aria-labelledby`.
|
11
|
-
# * If you must use a non-visible label, set `:"aria-label"` on `AutoComplete` and Primer
|
12
|
-
# will apply it to the correct elements. However, please note that a visible label should almost
|
13
|
-
# always be used unless there is compelling reason not to. A placeholder is not a label.
|
14
|
-
class AutoComplete < Primer::Component
|
15
|
-
status :beta
|
16
|
-
|
17
|
-
# Optionally render a visible label. See <%= link_to_accessibility %>
|
18
|
-
#
|
19
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
20
|
-
renders_one :label, lambda { |**system_arguments|
|
21
|
-
system_arguments[:for] = @input_id
|
22
|
-
system_arguments[:tag] = :label
|
23
|
-
Primer::BaseComponent.new(**system_arguments)
|
24
|
-
}
|
25
|
-
|
26
|
-
# Required input used to search for results
|
27
|
-
#
|
28
|
-
# @param type [Symbol] <%= one_of(Primer::AutoComplete::Input::TYPE_OPTIONS) %>
|
29
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
30
|
-
renders_one :input, lambda { |**system_arguments|
|
31
|
-
aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
|
32
|
-
if aria_label.present?
|
33
|
-
system_arguments[:"aria-label"] = aria_label
|
34
|
-
system_arguments[:aria]&.delete(:label)
|
35
|
-
end
|
36
|
-
|
37
|
-
Input.new(id: @input_id, **system_arguments)
|
38
|
-
}
|
39
|
-
|
40
|
-
# Optional icon to be rendered before the input. Has the same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
|
41
|
-
#
|
42
|
-
renders_one :icon, Primer::OcticonComponent
|
43
|
-
|
44
|
-
# Customizable results list.
|
45
|
-
#
|
46
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
47
|
-
renders_one :results, lambda { |**system_arguments|
|
48
|
-
system_arguments[:tag] = :ul
|
49
|
-
system_arguments[:id] = @list_id
|
50
|
-
system_arguments[:classes] = class_names(
|
51
|
-
"autocomplete-results",
|
52
|
-
system_arguments[:classes]
|
53
|
-
)
|
54
|
-
|
55
|
-
aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
|
56
|
-
system_arguments[:"aria-label"] = aria_label if aria_label.present?
|
57
|
-
system_arguments[:aria]&.delete(:label)
|
58
|
-
|
59
|
-
Primer::BaseComponent.new(**system_arguments)
|
60
|
-
}
|
61
|
-
|
62
|
-
# @example Default
|
63
|
-
# <%= render(Primer::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-1", list_id: "fruits-popup-1", position: :relative)) do |c| %>
|
64
|
-
# <% c.label(classes:"").with_content("Fruits") %>
|
65
|
-
# <% c.input(type: :text) %>
|
66
|
-
# <% end %>
|
67
|
-
#
|
68
|
-
# @example With `aria-label`
|
69
|
-
# <%= render(Primer::AutoComplete.new("aria-label": "Fruits", src: "/auto_complete", input_id: "fruits-input-2", list_id: "fruits-popup-2", position: :relative)) do |c| %>
|
70
|
-
# <% c.input(type: :text) %>
|
71
|
-
# <% end %>
|
72
|
-
#
|
73
|
-
# @example With `aria-labelledby`
|
74
|
-
# <%= render(Primer::HeadingComponent.new(tag: :h2, id: "search-1")) { "Search" } %>
|
75
|
-
# <%= render(Primer::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-3", list_id: "fruits-popup-2", position: :relative)) do |c| %>
|
76
|
-
# <% c.input("aria-labelledby": "search-1") %>
|
77
|
-
# <% end %>
|
78
|
-
#
|
79
|
-
# @example With custom classes for the results
|
80
|
-
# <%= render(Primer::AutoComplete.new(src: "/auto_complete", input_id: "fruits-input-4", list_id: "fruits-popup-3", position: :relative)) do |c| %>
|
81
|
-
# <% c.label(classes:"").with_content("Fruits") %>
|
82
|
-
# <% c.input(type: :text) %>
|
83
|
-
# <% c.results(classes: "custom-class") do %>
|
84
|
-
# <%= render(Primer::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
|
85
|
-
# Apple
|
86
|
-
# <% end %>
|
87
|
-
# <%= render(Primer::AutoComplete::Item.new(value: "orange")) do |c| %>
|
88
|
-
# Orange
|
89
|
-
# <% end %>
|
90
|
-
# <% end %>
|
91
|
-
# <% end %>
|
92
|
-
#
|
93
|
-
# @example With Icon
|
94
|
-
# <%= render(Primer::AutoComplete.new(src: "/auto_complete", list_id: "fruits-popup-4", input_id: "fruits-input-4", position: :relative)) do |c| %>
|
95
|
-
# <% c.label(classes:"").with_content("Fruits") %>
|
96
|
-
# <% c.input(type: :text) %>
|
97
|
-
# <% c.icon(icon: :search) %>
|
98
|
-
# <% end %>
|
99
|
-
#
|
100
|
-
# @param src [String] The route to query.
|
101
|
-
# @param input_id [String] Id of the input element.
|
102
|
-
# @param list_id [String] Id of the list element.
|
103
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
104
|
-
def initialize(src:, list_id:, input_id:, **system_arguments)
|
105
|
-
@list_id = list_id
|
106
|
-
@input_id = input_id
|
107
|
-
@aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label)
|
108
|
-
|
109
|
-
system_arguments.delete(:"aria-label") && system_arguments[:aria]&.delete(:label)
|
110
|
-
|
111
|
-
@system_arguments = system_arguments
|
112
|
-
@system_arguments[:tag] = "auto-complete"
|
113
|
-
@system_arguments[:src] = src
|
114
|
-
@system_arguments[:for] = list_id
|
115
|
-
end
|
116
|
-
|
117
|
-
# add `results` without needing to explicitly call it in the view
|
118
|
-
def before_render
|
119
|
-
raise ArgumentError, "Missing `input` slot" if input.blank?
|
120
|
-
raise ArgumentError, "Accessible label is required." if label.blank? && input.missing_label?
|
121
|
-
|
122
|
-
results(classes: "") unless results
|
123
|
-
end
|
124
|
-
|
125
|
-
# This component is part of `Primer::AutoCompleteComponent` and should not be
|
126
|
-
# used as a standalone component.
|
127
|
-
class Input < Primer::Component
|
128
|
-
DEFAULT_TYPE = :text
|
129
|
-
TYPE_OPTIONS = [DEFAULT_TYPE, :search].freeze
|
130
|
-
|
131
|
-
# @param type [Symbol] <%= one_of(Primer::AutoComplete::Input::TYPE_OPTIONS) %>
|
132
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
133
|
-
def initialize(type: DEFAULT_TYPE, **system_arguments)
|
134
|
-
@system_arguments = system_arguments
|
135
|
-
@system_arguments[:tag] = :input
|
136
|
-
|
137
|
-
@aria_label = system_arguments[:"aria-label"]
|
138
|
-
@aria_labelledby = system_arguments[:"aria-labelledby"] || system_arguments.dig(:aria, :labelledby)
|
139
|
-
|
140
|
-
@system_arguments[:type] = fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
|
141
|
-
@system_arguments[:classes] = class_names(
|
142
|
-
"form-control",
|
143
|
-
system_arguments[:classes]
|
144
|
-
)
|
145
|
-
end
|
146
|
-
|
147
|
-
def missing_label?
|
148
|
-
@aria_label.blank? && @aria_labelledby.blank?
|
149
|
-
end
|
150
|
-
|
151
|
-
def call
|
152
|
-
render(Primer::BaseComponent.new(**@system_arguments))
|
153
|
-
end
|
154
|
-
end
|
155
|
-
end
|
156
|
-
end
|
@@ -1,42 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
class AutoComplete
|
5
|
-
# Use `AutoCompleteItem` to list results of an auto-completed search.
|
6
|
-
class Item < Primer::Component
|
7
|
-
status :beta
|
8
|
-
|
9
|
-
# @example Default
|
10
|
-
# <%= render(Primer::AutoComplete::Item.new(selected: true, value: "value")) do |c| %>
|
11
|
-
# Selected
|
12
|
-
# <% end %>
|
13
|
-
# <%= render(Primer::AutoComplete::Item.new(value: "value")) do |c| %>
|
14
|
-
# Not selected
|
15
|
-
# <% end %>
|
16
|
-
#
|
17
|
-
# @param value [String] Value of the item.
|
18
|
-
# @param selected [Boolean] Whether the item is selected.
|
19
|
-
# @param disabled [Boolean] Whether the item is disabled.
|
20
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
21
|
-
def initialize(value:, selected: false, disabled: false, **system_arguments)
|
22
|
-
@system_arguments = system_arguments
|
23
|
-
@system_arguments[:tag] = :li
|
24
|
-
@system_arguments[:role] = :option
|
25
|
-
@system_arguments[:"data-autocomplete-value"] = value
|
26
|
-
|
27
|
-
@system_arguments[:"aria-selected"] = true if selected
|
28
|
-
@system_arguments[:"aria-disabled"] = true if disabled
|
29
|
-
|
30
|
-
@system_arguments[:classes] = class_names(
|
31
|
-
"autocomplete-item",
|
32
|
-
system_arguments[:classes],
|
33
|
-
"disabled" => disabled
|
34
|
-
)
|
35
|
-
end
|
36
|
-
|
37
|
-
def call
|
38
|
-
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
39
|
-
end
|
40
|
-
end
|
41
|
-
end
|
42
|
-
end
|
@@ -1,75 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# `Avatar` can be used to represent users and organizations on GitHub.
|
5
|
-
#
|
6
|
-
# - Use the default round avatar for users, and the `square` argument
|
7
|
-
# for organizations or any other non-human avatars.
|
8
|
-
# - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
|
9
|
-
# - Set `size` to update the height and width of the `Avatar` in pixels.
|
10
|
-
# - To stack multiple avatars together, use <%= link_to_component(Primer::AvatarStackComponent) %>.
|
11
|
-
#
|
12
|
-
# @accessibility
|
13
|
-
# Images should have text alternatives that describe the information or function represented.
|
14
|
-
# If the avatar functions as a link, provide alt text that helps convey the function. For instance,
|
15
|
-
# if `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`
|
16
|
-
# rather than `@kittenuser`.
|
17
|
-
# [Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)
|
18
|
-
class AvatarComponent < Primer::Component
|
19
|
-
status :beta
|
20
|
-
|
21
|
-
SMALL_THRESHOLD = 24
|
22
|
-
|
23
|
-
# @example Default
|
24
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
|
25
|
-
#
|
26
|
-
# @example Square
|
27
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
|
28
|
-
#
|
29
|
-
# @example Link
|
30
|
-
# <%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
|
31
|
-
#
|
32
|
-
# @example With size
|
33
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
|
34
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
|
35
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
|
36
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 28)) %>
|
37
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
|
38
|
-
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 36)) %>
|
39
|
-
#
|
40
|
-
# @param src [String] The source url of the avatar image.
|
41
|
-
# @param alt [String] Passed through to alt on img tag.
|
42
|
-
# @param size [Integer] Adds the avatar-small class if less than 24.
|
43
|
-
# @param square [Boolean] Used to create a square avatar.
|
44
|
-
# @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
|
45
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
46
|
-
def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
|
47
|
-
@href = href
|
48
|
-
@system_arguments = system_arguments
|
49
|
-
@system_arguments[:tag] = :img
|
50
|
-
@system_arguments[:src] = src
|
51
|
-
@system_arguments[:alt] = alt
|
52
|
-
@system_arguments[:size] = size
|
53
|
-
@system_arguments[:height] = size
|
54
|
-
@system_arguments[:width] = size
|
55
|
-
|
56
|
-
@system_arguments[:classes] = class_names(
|
57
|
-
system_arguments[:classes],
|
58
|
-
"avatar",
|
59
|
-
"avatar-small" => size < SMALL_THRESHOLD,
|
60
|
-
"circle" => !square,
|
61
|
-
"lh-0" => href # Addresses an overflow issue with linked avatars
|
62
|
-
)
|
63
|
-
end
|
64
|
-
|
65
|
-
def call
|
66
|
-
if @href
|
67
|
-
render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
|
68
|
-
render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
|
69
|
-
end
|
70
|
-
else
|
71
|
-
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
72
|
-
end
|
73
|
-
end
|
74
|
-
end
|
75
|
-
end
|
@@ -1,84 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# Use `AvatarStack` to stack multiple avatars together.
|
5
|
-
class AvatarStackComponent < Primer::Component
|
6
|
-
status :beta
|
7
|
-
|
8
|
-
ALIGN_DEFAULT = :left
|
9
|
-
ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
|
10
|
-
|
11
|
-
DEFAULT_TAG = :div
|
12
|
-
TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
|
13
|
-
# Required list of stacked avatars.
|
14
|
-
#
|
15
|
-
# @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
|
16
|
-
renders_many :avatars, Primer::AvatarComponent
|
17
|
-
|
18
|
-
# @example Default
|
19
|
-
# <%= render(Primer::AvatarStackComponent.new) do |c| %>
|
20
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
21
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
22
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
23
|
-
# <% end %>
|
24
|
-
#
|
25
|
-
# @example Align right
|
26
|
-
# <%= render(Primer::AvatarStackComponent.new(align: :right)) do |c| %>
|
27
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
28
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
29
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
30
|
-
# <% end %>
|
31
|
-
#
|
32
|
-
# @example With tooltip
|
33
|
-
# <%= render(Primer::AvatarStackComponent.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
|
34
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
35
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
36
|
-
# <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
|
37
|
-
# <% end %>
|
38
|
-
#
|
39
|
-
# @param tag [Symbol] <%= one_of(Primer::AvatarStackComponent::TAG_OPTIONS) %>
|
40
|
-
# @param align [Symbol] <%= one_of(Primer::AvatarStackComponent::ALIGN_OPTIONS) %>
|
41
|
-
# @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
|
42
|
-
# @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
|
43
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
44
|
-
def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
|
45
|
-
@align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
|
46
|
-
@system_arguments = system_arguments
|
47
|
-
@tooltipped = tooltipped
|
48
|
-
@body_arguments = body_arguments
|
49
|
-
|
50
|
-
@body_arguments[:tag] ||= :div
|
51
|
-
@body_arguments[:classes] = class_names(
|
52
|
-
"AvatarStack-body",
|
53
|
-
@body_arguments[:classes]
|
54
|
-
)
|
55
|
-
|
56
|
-
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
57
|
-
@system_arguments[:classes] = class_names(
|
58
|
-
"AvatarStack",
|
59
|
-
system_arguments[:classes],
|
60
|
-
"AvatarStack--right" => @align == :right
|
61
|
-
)
|
62
|
-
end
|
63
|
-
|
64
|
-
def body_component
|
65
|
-
if @tooltipped
|
66
|
-
Primer::Tooltip.new(**@body_arguments)
|
67
|
-
else
|
68
|
-
Primer::BaseComponent.new(**@body_arguments)
|
69
|
-
end
|
70
|
-
end
|
71
|
-
|
72
|
-
def before_render
|
73
|
-
@system_arguments[:classes] = class_names(
|
74
|
-
@system_arguments[:classes],
|
75
|
-
"AvatarStack--two" => avatars.size == 2,
|
76
|
-
"AvatarStack--three-plus" => avatars.size > 2
|
77
|
-
)
|
78
|
-
end
|
79
|
-
|
80
|
-
def render?
|
81
|
-
avatars.any?
|
82
|
-
end
|
83
|
-
end
|
84
|
-
end
|