Apply all avatar classes to the link wrapper if applicable
Otherwise, you get a square `a` around a circle `img`.
MODIFY
app/components/primer/avatar_component.rb
app/components/primer/avatar_component.rb
@@ -34,17 +34,25 @@ module Primer
@system_arguments[:height] = size
@system_arguments[:width] = size
- @system_arguments[:classes] = class_names(
- system_arguments[:classes],
- "avatar" => !href,
+ avatar_class_names = class_names(
+ "avatar",
"avatar--small" => size < SMALL_THRESHOLD,
"circle" => !square
)
+
+ if @href
+ @link_arguments = { href: href, classes: avatar_class_names }
+ else
+ @system_arguments[:classes] = class_names(
+ system_arguments[:classes],
+ avatar_class_names
+ )
+ end
end
def call
if @href
- render(Primer::LinkComponent.new(href: @href, classes: "avatar")) do
+ render(Primer::LinkComponent.new(**@link_arguments)) do
render(Primer::BaseComponent.new(**@system_arguments)) { content }
end
else

MODIFY
test/components/avatar_component_test.rb
test/components/avatar_component_test.rb
@@ -46,7 +46,7 @@ class PrimerAvatarComponentTest < Minitest::Test
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", square: true))
assert_selector("img.avatar")
- refute_selector(".CircleBadge")
+ refute_selector(".circle")
end
def test_renders_link_wrapper
@@ -58,6 +58,42 @@ class PrimerAvatarComponentTest < Minitest::Test
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")
+ 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")
+ end
+ refute_selector(".circle")
+ end
+
+ def test_adds_small_modifier_to_link_wrapper_when_size_is_less_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.avatar--small") do
+ assert_selector("img")
+ 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")
+ end
+ refute_selector(".avatar--small")
+ end
+
def test_status
assert_component_state(Primer::AvatarComponent, :beta)
end

Apply all avatar classes to the link wrapper if applicable

Otherwise, you get a square `a` around a circle `img`.