primer_view_components 0.0.44 → 0.0.48
Sign up to get free protection for your applications and to get access to all the features.
- 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
|