primer_view_components 0.0.44 → 0.0.48
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 +187 -0
- data/app/components/primer/avatar_stack_component.rb +9 -3
- data/app/components/primer/base_component.rb +52 -23
- 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/border_box_component.rb +3 -0
- data/app/components/primer/clipboard_copy.rb +25 -7
- data/app/components/primer/component.rb +9 -1
- data/app/components/primer/details_component.rb +12 -8
- 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 +19 -5
- 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 +8 -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 +5 -0
- data/app/components/primer/underline_nav_component.rb +12 -6
- data/{app/lib → lib}/primer/classify.rb +16 -33
- data/{app/lib → lib}/primer/classify/cache.rb +6 -40
- 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/lib/primer/classify/utilities.rb +148 -0
- data/lib/primer/classify/utilities.yml +1271 -0
- data/lib/primer/view_components.rb +1 -0
- data/lib/primer/view_components/linters/argument_mappers/system_arguments.rb +5 -4
- data/lib/primer/view_components/linters/button_component_migration_counter.rb +9 -5
- data/lib/primer/view_components/linters/helpers.rb +132 -17
- 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/docs.rake +72 -18
- data/lib/tasks/utilities.rake +105 -0
- data/lib/yard/docs_helper.rb +1 -1
- data/static/statuses.json +4 -4
- metadata +30 -21
- 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/lib/primer/classify/spacing.rb +0 -63
@@ -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,63 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
class Classify
|
5
|
-
# Handler for PrimerCSS spacing classes.
|
6
|
-
class Spacing
|
7
|
-
BASE_OPTIONS = (0..6).to_a.freeze
|
8
|
-
BASE_MAPPINGS = {
|
9
|
-
my: BASE_OPTIONS,
|
10
|
-
pb: BASE_OPTIONS,
|
11
|
-
pl: BASE_OPTIONS,
|
12
|
-
pr: BASE_OPTIONS,
|
13
|
-
pt: BASE_OPTIONS,
|
14
|
-
px: BASE_OPTIONS,
|
15
|
-
py: BASE_OPTIONS
|
16
|
-
}.freeze
|
17
|
-
|
18
|
-
MARGIN_DIRECTION_OPTIONS = [*(-6..-1), *BASE_OPTIONS].freeze
|
19
|
-
MARGIN_DIRECTION_MAPPINGS = {
|
20
|
-
mb: MARGIN_DIRECTION_OPTIONS,
|
21
|
-
ml: MARGIN_DIRECTION_OPTIONS,
|
22
|
-
mr: MARGIN_DIRECTION_OPTIONS,
|
23
|
-
mt: MARGIN_DIRECTION_OPTIONS
|
24
|
-
}.freeze
|
25
|
-
|
26
|
-
AUTO_OPTIONS = [*BASE_OPTIONS, :auto].freeze
|
27
|
-
AUTO_MAPPINGS = {
|
28
|
-
m: AUTO_OPTIONS,
|
29
|
-
mx: AUTO_OPTIONS
|
30
|
-
}.freeze
|
31
|
-
|
32
|
-
RESPONSIVE_OPTIONS = [*BASE_OPTIONS, :responsive].freeze
|
33
|
-
RESPONSIVE_MAPPINGS = {
|
34
|
-
p: RESPONSIVE_OPTIONS
|
35
|
-
}.freeze
|
36
|
-
|
37
|
-
MAPPINGS = {
|
38
|
-
**BASE_MAPPINGS,
|
39
|
-
**MARGIN_DIRECTION_MAPPINGS,
|
40
|
-
**AUTO_MAPPINGS,
|
41
|
-
**RESPONSIVE_MAPPINGS
|
42
|
-
}.freeze
|
43
|
-
KEYS = MAPPINGS.keys.freeze
|
44
|
-
|
45
|
-
class << self
|
46
|
-
def spacing(key, val, breakpoint)
|
47
|
-
validate(key, val) unless Rails.env.production?
|
48
|
-
|
49
|
-
return "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}" if val.is_a?(Numeric) && val.negative?
|
50
|
-
|
51
|
-
"#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
|
52
|
-
end
|
53
|
-
|
54
|
-
private
|
55
|
-
|
56
|
-
def validate(key, val)
|
57
|
-
raise ArgumentError, "#{key} is not a spacing key" unless KEYS.include?(key)
|
58
|
-
raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{MAPPINGS[key]}" unless MAPPINGS[key].include?(val)
|
59
|
-
end
|
60
|
-
end
|
61
|
-
end
|
62
|
-
end
|
63
|
-
end
|