Apply avatar classes to both the image and its link wrapper
MODIFY
app/components/primer/avatar_component.rb
app/components/primer/avatar_component.rb
@@ -24,31 +24,33 @@ module Primer
# @param square [Boolean] Used to create a square avatar.
# @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
- def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
+ def initialize(src:, alt:, size: 20, square: false, href: nil, classes: nil, **image_arguments)
@href = href
- @system_arguments = system_arguments
- @system_arguments[:tag] = :img
- @system_arguments[:src] = src
- @system_arguments[:alt] = alt
- @system_arguments[:size] = size
- @system_arguments[:height] = size
- @system_arguments[:width] = size
- @system_arguments[:classes] = class_names(
- system_arguments[:classes],
+ @image_arguments = image_arguments
+ @image_arguments[:tag] = :img
+ @image_arguments[:src] = src
+ @image_arguments[:alt] = alt
+ @image_arguments[:size] = size
+ @image_arguments[:height] = size
+ @image_arguments[:width] = size
+
+ @avatar_classes = class_names(
"avatar",
"avatar--small" => size < SMALL_THRESHOLD,
"circle" => !square
)
+
+ @all_classes = class_names(classes, @avatar_classes)
end
def call
if @href
- render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
- render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
+ render(Primer::LinkComponent.new(href: @href, classes: @all_classes)) do
+ render(Primer::BaseComponent.new(classes: @avatar_classes, **@image_arguments)) { content }
end
else
- render(Primer::BaseComponent.new(**@system_arguments)) { content }
+ render(Primer::BaseComponent.new(classes: @all_classes, **@image_arguments)) { content }
end
end
end

MODIFY
docs/content/components/avatar.md
docs/content/components/avatar.md
@@ -33,7 +33,7 @@ for organizations or any other non-human avatars.
### Link
-<Example src="<a href='#' class='avatar avatar--small circle '><img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20'></img></a>" />
+<Example src="<a href='#' class='avatar avatar--small circle '><img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img></a>" />
```erb
<%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>

MODIFY
test/components/avatar_component_test.rb
test/components/avatar_component_test.rb
@@ -60,25 +60,23 @@ class PrimerAvatarComponentTest < Minitest::Test
assert_selector("a.avatar") do |(a)|
assert_equal("#given-href", a["href"])
- assert_selector("img")
+ assert_selector("img.avatar")
end
- refute_selector("img.avatar")
end
def test_defaults_circle_link_wrapper
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#"))
assert_selector("a.avatar.circle") do
- assert_selector("img")
+ assert_selector("img.avatar.circle")
end
- refute_selector("img.avatar")
end
def test_squared_link_wrapper
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#", square: true))
assert_selector("a.avatar") do
- assert_selector("img")
+ assert_selector("img.avatar")
end
refute_selector(".circle")
end
@@ -87,16 +85,15 @@ class PrimerAvatarComponentTest < Minitest::Test
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#", size: Primer::AvatarComponent::SMALL_THRESHOLD - 1))
assert_selector("a.avatar.avatar--small") do
- assert_selector("img")
+ assert_selector("img.avatar.avatar--small")
end
- refute_selector("img.avatar")
end
def test_does_not_add_small_modifier_to_link_wrapper_when_size_is_greater_than_threshold
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#", size: Primer::AvatarComponent::SMALL_THRESHOLD + 1))
assert_selector("a.avatar") do
- assert_selector("img")
+ assert_selector("img.avatar")
end
refute_selector(".avatar--small")
end
@@ -105,7 +102,7 @@ class PrimerAvatarComponentTest < Minitest::Test
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#", classes: "custom-class"))
assert_selector("a.avatar.custom-class") do
- assert_selector("img")
+ assert_selector("img.avatar")
end
refute_selector("img.custom-class")
end

Apply avatar classes to both the image and its link wrapper