Feature/wsdev 4132 avatar

CHANGELOG.mdx

@@ -20,6 +20,15 @@ Prefix the change with one of these keywords:
 
 - Card Loader: page card loader was missing shadow
 
+### Changed
+
+- Avatar: replaced rounded prop with isCircle
+- Avatar: updated styles
+
+### Deprecated
+
+- Avatar: removed hasShadow and hasBorder props
+
 ## [0.9.6]
 
 ### Fixed

lib/components/Avatar/Avatar.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Avatar } from './Avatar'
 
@@ -39,16 +40,6 @@ Default.args = {
   },
 }
 
-export const RoundedCorners: Story = {}
-
-RoundedCorners.args = {
-  user: { ...user },
-  rounded: 'lg',
-  onClick: () => {
-    alert('I am an alert ')
-  },
-}
-
 export const FullCircle: Story = {}
 
 FullCircle.args = {
@@ -59,28 +50,6 @@ FullCircle.args = {
   },
 }
 
-export const WithShadow: Story = {}
-
-WithShadow.args = {
-  user: { ...user },
-  rounded: 'lg',
-  hasShadow: true,
-  onClick: () => {
-    alert('I am an alert ')
-  },
-}
-
-export const WithBorder: Story = {}
-
-WithBorder.args = {
-  user: { ...user },
-  rounded: 'lg',
-  borderWidth: '4',
-  onClick: () => {
-    alert('I am an alert ')
-  },
-}
-
 export const NoImage: Story = {}
 
 NoImage.args = {

lib/components/Avatar/Avatar.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { rdsRounded, rdsBorderWidth, rdsBorderColor } from '../../utils/optionClasses'
 
 export type ImageType = {
   src: string | undefined
@@ -17,11 +16,8 @@ export type UserInfoType = {
 }
 
 export interface AvatarProps {
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl'
-  rounded?: 'lg' | 'full'
-  borderWidth?: '1' | '2' | '4' | '8'
-  borderColor?: 'black' | 'white' | 'red' | 'grey' | 'dark-grey'
-  hasShadow?: boolean
+  size?: keyof typeof avatarSizes
+  isCircle?: boolean
   user: UserInfoType
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
 }
@@ -37,12 +33,11 @@ const avatarSizes = {
 }
 
 const styles = {
-  core: `not-prose inline-block bg-cu-black-50 text-cu-black-800 overflow-hidden focus:ring-2 focus:ring-cu-black-100 focus:ring-offset-2`,
-  'no-image': `bg-cu-black-100 flex items-center justify-center font-semibold`,
-  shadow: `shadow-lg`,
+  core: `not-prose inline-block bg-cu-black-100 text-cu-black-800 overflow-hidden focus:ring-2 focus:ring-cu-black-100 focus:ring-offset-2`,
+  noImage: `flex items-center justify-center font-semibold`,
 }
 
-export const Avatar = ({ size = 'xl', rounded, borderWidth, borderColor, hasShadow, user, onClick }: AvatarProps) => {
+export const Avatar = ({ size = 'xl', isCircle = false, user, onClick }: AvatarProps) => {
   const { firstName, lastName, image } = user
 
   let initials
@@ -59,27 +54,23 @@ export const Avatar = ({ size = 'xl', rounded, borderWidth, borderColor, hasShad
       }
     }
   }
-  const shadowStyle = hasShadow ? styles.shadow : ''
-  const roundedStyle = rounded ? rdsRounded[rounded] : ''
-  const borderWidthStyle = borderWidth ? rdsBorderWidth[borderWidth] : ''
-  const borderColorStyle = borderColor ? rdsBorderColor[borderColor] : ''
+
+  const roundedStyle = isCircle ? 'rounded-full' : 'rounded-md'
   const hasOnClick = onClick ? 'cursor-pointer' : ''
 
   return (
     <>
       {image && (
         <img
-          className={`${styles.core} ${avatarSizes[size]} ${roundedStyle} ${borderWidthStyle} ${borderColorStyle} ${borderColorStyle} ${shadowStyle} ${hasOnClick}`}
+          className={`${styles.core} ${avatarSizes[size]} ${roundedStyle} ${hasOnClick}`}
           src={image.src}
           alt={image.alt || `Avatar of ${firstName} ${lastName}`}
           aria-hidden="true"
         />
       )}
 
       {!image && (
-        <div
-          className={`${styles.core} ${styles['no-image']} ${avatarSizes[size]} ${roundedStyle} ${borderWidthStyle} ${borderColorStyle} ${borderColorStyle} ${shadowStyle} ${hasOnClick}`}
-        >
+        <div className={`${styles.core} ${styles['noImage']} ${avatarSizes[size]} ${roundedStyle} ${hasOnClick}`}>
           {initials}
         </div>
       )}