primer_view_components 0.0.45 → 0.0.49

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +194 -0
  3. data/app/components/primer/{auto_complete_component.d.ts → auto_complete/auto_component.d.ts} +0 -0
  4. data/app/components/primer/{auto_complete_component.js → auto_complete/auto_component.js} +0 -0
  5. data/app/components/primer/base_component.rb +36 -7
  6. data/app/components/primer/beta/auto_complete.rb +159 -0
  7. data/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
  8. data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.html.erb +0 -0
  9. data/app/components/primer/beta/auto_complete/auto_complete.js +1 -0
  10. data/app/components/primer/{auto_complete → beta/auto_complete}/auto_complete.ts +0 -0
  11. data/app/components/primer/beta/auto_complete/item.rb +44 -0
  12. data/app/components/primer/beta/avatar.rb +77 -0
  13. data/app/components/primer/{avatar_stack_component.html.erb → beta/avatar_stack.html.erb} +0 -0
  14. data/app/components/primer/beta/avatar_stack.rb +92 -0
  15. data/app/components/primer/border_box_component.rb +3 -0
  16. data/app/components/primer/component.rb +9 -1
  17. data/app/components/primer/details_component.rb +12 -8
  18. data/app/components/primer/image_crop.html.erb +4 -4
  19. data/app/components/primer/image_crop.rb +1 -1
  20. data/app/components/primer/markdown.rb +9 -9
  21. data/app/components/primer/menu_component.rb +7 -3
  22. data/app/components/primer/navigation/tab_component.rb +34 -6
  23. data/app/components/primer/popover_component.rb +6 -3
  24. data/app/components/primer/primer.d.ts +1 -1
  25. data/app/components/primer/primer.js +1 -1
  26. data/app/components/primer/primer.ts +1 -1
  27. data/app/components/primer/tab_nav_component.rb +9 -6
  28. data/app/components/primer/timeline_item_component.rb +2 -2
  29. data/app/components/primer/tooltip.rb +1 -1
  30. data/app/components/primer/truncate.rb +6 -1
  31. data/app/components/primer/underline_nav_component.rb +13 -6
  32. data/{app/lib → lib}/primer/classify.rb +12 -39
  33. data/{app/lib → lib}/primer/classify/cache.rb +6 -20
  34. data/{app/lib → lib}/primer/classify/flex.rb +0 -0
  35. data/{app/lib → lib}/primer/classify/functional_background_colors.rb +2 -0
  36. data/{app/lib → lib}/primer/classify/functional_border_colors.rb +2 -0
  37. data/{app/lib → lib}/primer/classify/functional_colors.rb +0 -0
  38. data/{app/lib → lib}/primer/classify/functional_text_colors.rb +2 -0
  39. data/{app/lib → lib}/primer/classify/grid.rb +0 -0
  40. data/{app/lib → lib}/primer/classify/utilities.rb +54 -22
  41. data/{app/lib → lib}/primer/classify/utilities.yml +124 -0
  42. data/lib/primer/view_components.rb +35 -6
  43. data/lib/primer/view_components/constants.rb +55 -0
  44. data/lib/primer/view_components/linters/argument_mappers/base.rb +39 -0
  45. data/lib/primer/view_components/linters/argument_mappers/button.rb +35 -44
  46. data/lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb +25 -0
  47. data/lib/primer/view_components/linters/argument_mappers/label.rb +56 -0
  48. data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +1 -2
  49. data/lib/primer/view_components/linters/autocorrectable.rb +30 -0
  50. data/lib/primer/view_components/linters/button_component_migration_counter.rb +9 -23
  51. data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +21 -0
  52. data/lib/primer/view_components/linters/helpers.rb +56 -38
  53. data/lib/primer/view_components/linters/label_component_migration_counter.rb +25 -0
  54. data/lib/primer/view_components/statuses.rb +14 -0
  55. data/lib/primer/view_components/version.rb +1 -1
  56. data/lib/rubocop/config/default.yml +12 -0
  57. data/lib/rubocop/cop/primer.rb +4 -0
  58. data/lib/rubocop/cop/primer/no_tag_memoize.rb +42 -0
  59. data/lib/rubocop/cop/primer/system_argument_instead_of_class.rb +75 -0
  60. data/lib/tasks/constants.rake +12 -0
  61. data/lib/tasks/docs.rake +89 -34
  62. data/lib/tasks/utilities.rake +9 -11
  63. data/lib/yard/docs_helper.rb +12 -3
  64. data/static/arguments.yml +977 -0
  65. data/static/assets/view-components.svg +18 -0
  66. data/static/classes.yml +174 -0
  67. data/static/constants.json +628 -0
  68. data/static/statuses.json +5 -5
  69. metadata +44 -27
  70. data/app/components/primer/auto_complete.rb +0 -156
  71. data/app/components/primer/auto_complete/item.rb +0 -42
  72. data/app/components/primer/avatar_component.rb +0 -75
  73. data/app/components/primer/avatar_stack_component.rb +0 -84
  74. data/app/components/primer/details_menu_component.d.ts +0 -1
  75. 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.45
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-06-16 00:00:00.000000000 Z
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/auto_complete.ts
359
- - app/components/primer/auto_complete/item.rb
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