Merge pull request #14814 from TylerAPfledderer/feat/shadCN-avatar-implement

[ShadCN]: Implement ShadCN Avatar to Production

Author: pettinarip

src/components/FileContributors.tsx

@@ -1,5 +1,4 @@
 import { BaseHTMLAttributes, useState } from "react"
-import { Avatar } from "@chakra-ui/react"
 
 import type { ChildOnlyProp, FileContributor } from "@/lib/types"
 
@@ -12,6 +11,7 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import { Avatar } from "./ui/avatar"
 import Modal from "./ui/dialog-modal"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
@@ -22,19 +22,27 @@ const ContributorList = ({ children }: Required<ChildOnlyProp>) => (
   </ScrollArea>
 )
 
+const ContributorAvatar = ({
+  contributor,
+  label,
+}: ContributorProps & { label?: string }) => (
+  <Avatar
+    src={contributor.avatar_url}
+    name={contributor.login}
+    href={`https://github.com/${contributor.login}`}
+    // `size-10` is not part of the "size" variants
+    className="me-2 size-10"
+    label={label}
+  />
+)
+
 type ContributorProps = { contributor: FileContributor }
 const Contributor = ({ contributor }: ContributorProps) => (
   <ListItem className="flex items-center p-2">
-    <Avatar
-      height="40px"
-      width="40px"
-      src={contributor.avatar_url}
-      name={contributor.login}
-      me={2}
+    <ContributorAvatar
+      contributor={contributor}
+      label={"@" + contributor.login}
     />
-    <InlineLink href={"https://github.com/" + contributor.login}>
-      @{contributor.login}
-    </InlineLink>
   </ListItem>
 )
 
@@ -84,13 +92,7 @@ const FileContributors = ({
 
       <Flex className="flex-col p-0 md:flex-row md:p-2" {...props}>
         <Flex className="invisible me-4 flex-1 items-center md:visible md:flex">
-          <Avatar
-            height="40px"
-            width="40px"
-            src={lastContributor.avatar_url}
-            name={lastContributor.login}
-            me={2}
-          />
+          <ContributorAvatar contributor={lastContributor} />
 
           <p className="m-0 text-body-medium">
             <Translation id="last-edit" />:{" "}

src/components/IssuesList/index.tsx

@@ -1,6 +1,5 @@
 import Emoji from "react-emoji-render"
 import {
-  Avatar,
   Flex,
   HStack,
   SimpleGrid,
@@ -13,6 +12,7 @@ import type { GHIssue } from "@/lib/types"
 
 import InlineLink from "../Link"
 import Tag from "../Tag"
+import { Avatar } from "../ui/avatar"
 
 type IssuesListProps = SimpleGridProps & {
   issues: GHIssue[]
@@ -35,8 +35,8 @@ const IssuesList = ({ issues, ...props }: IssuesListProps) => {
               <Avatar
                 name={issue.user.login}
                 src={issue.user.avatar_url}
-                w="32px"
-                h="32px"
+                size="sm"
+                href={`https://github.com/${issue.user.login}`}
               />
               <Text size="sm">by {issue.user.login}</Text>
             </HStack>

src/components/Leaderboard.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from "next-i18next"
 import {
-  Avatar,
   Box,
   Flex,
   LinkBox,
@@ -16,6 +15,8 @@ import { BaseLink } from "@/components/Link"
 
 import { GITHUB_URL } from "@/lib/constants"
 
+import { Avatar } from "./ui/avatar"
+
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 type Person = {
@@ -95,10 +96,10 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
                 <Avatar
                   src={avatarImg}
                   name={avatarAlt}
-                  me={4}
-                  h={10}
-                  w={10}
-                  display={{ base: "none", xs: "block" }}
+                  // This meets the Design System requirement, despite the leaderboard item itself being a link
+                  href={hasGitHub ? `${GITHUB_URL}${username}` : "#"}
+                  // `size-10` is not part of a "size" variant
+                  className="me-4 size-10"
                 />
                 <Flex flex="1 1 75%" direction="column" me={8}>
                   <LinkOverlay

src/components/ui/avatar.tsx

@@ -12,8 +12,8 @@ import { LinkBox, LinkOverlay } from "./link-box"
 const avatarStyles = tv({
   slots: {
     container:
-      "relative shrink-0 flex overflow-hidden rounded-full focus:outline-4 focus:-outline-offset-1 focus:rounded-full active:shadow-none [&_img]:hover:opacity-70 border border-transparent active:border-primary-hover justify-center items-center",
-    fallback: "bg-body text-body-inverse",
+      "relative shrink-0 overflow-hidden rounded-full focus:outline-4 focus:-outline-offset-1 focus:rounded-full active:shadow-none [&_img]:hover:opacity-70 border border-transparent active:border-primary-hover ",
+    fallback: "bg-body text-body-inverse flex justify-center items-center",
   },
   variants: {
     size: {
@@ -126,7 +126,7 @@ const Avatar = React.forwardRef<
     href,
     src,
     name,
-    size,
+    size = "md",
     label,
     className,
     direction = "row",