Merge pull request #227 from kentac55/img-alt

feat(user): provide a prop for alt text

components/user/__tests__/index.test.tsx

@@ -32,4 +32,11 @@ describe(' User', () => {
     const link = wrapper.find('a')
     expect(link.length).not.toBe(0)
   })
+
+  it('should pass alt attribute', () => {
+    const wrapper = mount(
+      <User name="witt" src="https://unix.bio/assets/avatar.png" altText="witt"/>
+    )
+    expect(wrapper.find('img').prop('alt')).toEqual('witt')
+  })
 })

components/user/user.tsx

@@ -8,6 +8,7 @@ interface Props {
   src?: string
   text?: string
   className?: string
+  altText?: string
 }
 
 const defaultProps = {
@@ -23,13 +24,14 @@ const User: React.FC<React.PropsWithChildren<UserProps>> = ({
   name,
   children,
   className,
+  altText,
   ...props
 }) => {
   const theme = useTheme()
 
   return (
     <div className={`user ${className}`} {...props}>
-      <Avatar src={src} text={text} size={32} />
+      <Avatar src={src} text={text} size={32} alt={altText} />
       <div className="names">
         <span className="name">{name}</span>
         <span className="social">{children}</span>

pages/en-us/components/user.mdx

@@ -45,6 +45,7 @@ Display user profile or social information.
 | **name**(required) | user name | `ReactNode` / `string` | - | - |
 | **src** | avatar url | `string` | - | - |
 | **text** | display text when image is missing | `string` | - | - |
+| **altText** | alt attribute used by inner avatar image | `string` | - | - |
 | ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
 
 <Attributes.Title>User.Link.Props</Attributes.Title>

pages/zh-cn/components/user.mdx

@@ -45,6 +45,7 @@ export const meta = {
 | **name**(必须值) | 用户名 | `ReactNode` / `string` | - | - |
 | **src** | 头像图片地址 | `string` | - | - |
 | **text** | 以文字方式显示头像 | `string` | - | - |
+| **altText** | 内部头像图像使用的alt属性 | `string` | - | - |
 | ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
 
 <Attributes.Title>User.Link.Props</Attributes.Title>