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.
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