feat: enable shape prop for customizing avatar borders radius

vickonrails · Apr 14, 2021 · 81aa9c0 · 81aa9c0
1 parent e48da2a
commit 81aa9c0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/example/src/components/avatar.tsx b/example/src/components/avatar.tsx
@@ -2,17 +2,23 @@ import React from 'react'
 import { Avatar, AvatarGroup } from 'avocado-ui'
 import { Radio } from 'react-feather'
 
-// import AvatarImg from '../images/avatar.jpg'
+import AvatarImg from '../images/avatar.jpg'
 
 const AvatarComponent = () => {
   return (
     <AvatarGroup>
       <Avatar name='Mathew KE' size='xs' />
       <Avatar name='Mathew KE' size='sm' />
-      <Avatar name='Mathew KE' size='md' />
+      <Avatar name='Mathew KE' size='md' shape='curve' />
       <Avatar name='Mathew KE' size='lg' />
-      <Avatar name='Mathew KE' size='xl' />
-      <Avatar name='Mathew KE' size={200} icon={<Radio />} />
+      <Avatar name='Mathew KE' size='xl' shape='curve' />
+      <Avatar
+        name='Mathew KE'
+        size={200}
+        icon={<Radio />}
+        shape='square'
+        src={AvatarImg}
+      />
     </AvatarGroup>
   )
 }

diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
@@ -44,6 +44,7 @@ const Avatar: FC<AvatarProps> = ({ className, name, ...props }) => {
 }
 
 type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+type AvatarShape = 'round' | 'curve' | 'square'
 export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
   /**
    * initials of the `name` string are rendered when there are no values for `src` and `icon`
@@ -59,10 +60,17 @@ export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
    * specifies the icon to render when there's no value for image source (`src`)
    */
   icon?: JSX.Element
+
+  /**
+   * shape controls the curvature of the avatar border radius> It can be either set to "round", "curve", "square"
+   */
+
+  shape?: AvatarShape
 }
 
-const StyledAvatarBase = ({ size }: AvatarProps) =>
+const StyledAvatarBase = ({ size, shape }: AvatarProps) =>
   size &&
+  shape &&
   css`
     margin: 0;
     padding: 0;
@@ -77,7 +85,7 @@ const StyledAvatarBase = ({ size }: AvatarProps) =>
       : size && avatarTheme.sizes[size]}px;
 
     text-align: center;
-    border-radius: 9999px;
+    border-radius: ${avatarTheme.radius[shape]};
     display: flex;
     background: red;
     color: #fff;
@@ -117,7 +125,8 @@ const StyledAvatarSpan = styled.span`
 `
 
 Avatar.defaultProps = {
-  size: 'md'
+  size: 'md',
+  shape: 'round'
 }
 
 export { Avatar }
diff --git a/src/components/theme/components/avatar.theme.ts b/src/components/theme/components/avatar.theme.ts
@@ -12,5 +12,10 @@ export const avatarTheme = {
     md: 16,
     lg: 26,
     xl: 40
+  },
+  radius: {
+    round: '9999px',
+    square: 0,
+    curve: '4px'
   }
 }