Typescript support for avatar (#524)

libraries/core-react/src/Avatar/Avatar.test.jsx → libraries/core-react/src/Avatar/Avatar.test.tsx

@@ -24,8 +24,8 @@ describe('Avatar', () => {
   })
   it('Image has provided src', () => {
     const src = 'https://i.imgur.com/UM3mrju.jpg'
-    const { container } = render(<Avatar alt="avatar" src={src} />)
-    const avatarImg = container.firstChild.children[0]
+    const { getByAltText } = render(<Avatar alt="avatar" src={src} />)
+    const avatarImg = getByAltText('avatar')
     expect(avatarImg).toHaveAttribute('src', src)
   })
   it('Has correct size', () => {
@@ -37,9 +37,10 @@ describe('Avatar', () => {
     expect(avatar).toHaveStyleRule('height', `${size}px`)
   })
   it('Has faded image when disabled', () => {
+    const altText = 'avatar'
     const src = 'https://i.imgur.com/UM3mrju.jpg'
-    const { container } = render(<Avatar disabled src={src} alt="avatar" />)
-    const avatarImg = container.firstChild.children[0]
+    const { getByAltText } = render(<Avatar disabled src={src} alt={altText} />)
+    const avatarImg = getByAltText(altText)
     expect(avatarImg).toHaveStyleRule('opacity', disabledImage.opacity)
   })
 })

libraries/core-react/src/Avatar/Avatar.tokens.js → libraries/core-react/src/Avatar/Avatar.tokens.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const avatar = {
   enabled: {
     border: {

libraries/core-react/src/Avatar/Avatar.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef } from 'react'
+import styled, { css } from 'styled-components'
+import { avatar as tokens } from './Avatar.tokens'
+
+const {
+  enabled: { border },
+  disabled: { image: disabledImage },
+} = tokens
+
+type StyledAvatarProps = {
+  size: number
+  disabled: boolean
+}
+
+const StyledAvatar = styled.div<StyledAvatarProps>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: ${border.radius};
+  ${({ size }) =>
+    css`
+      height: ${size}px;
+      width: ${size}px;
+    `}
+`
+
+type StyledImageProps = {
+  alt: string
+  src: string
+  disabled: boolean
+}
+
+const StyledImage = styled.img<StyledImageProps>`
+  height: 100%;
+  text-align: center;
+  color: transparent;
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      opacity: ${disabledImage.opacity};
+    `};
+`
+
+type Props = {
+  alt: string
+  /** Image source
+   @default null */
+  src?: string
+  /** Avatar size 
+  @default 24 */
+  size?: 16 | 24 | 32 | 40 | 48
+  /** @default false */
+  disabled?: boolean
+}
+
+export const Avatar = forwardRef<HTMLHRElement, Props>((props, ref) => {
+  const { src = null, alt, size = 24, disabled = false, ...rest } = props
+
+  return (
+    <StyledAvatar size={size} disabled={disabled} ref={ref} {...rest}>
+      <StyledImage src={src} alt={alt} disabled={disabled} />
+    </StyledAvatar>
+  )
+})
+
+Avatar.displayName = 'Avatar'

libraries/core-react/src/Avatar/index.js → libraries/core-react/src/Avatar/index.ts

@@ -1,2 +1 @@
-// @ts-nocheck
 export { Avatar } from './Avatar'

libraries/core-react/src/Divider/Divider.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { divider as tokens } from './Divider.tokens'