Add Avatar outline variant

reaviz · Apr 24, 2024 · a9ae66c · a9ae66c
1 parent 575dae0
commit a9ae66c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/elements/Avatar/Avatar.story.tsx b/src/elements/Avatar/Avatar.story.tsx
@@ -16,6 +16,14 @@ Default.args = {
   rounded: false
 };
 
+export const Outline = Template.bind({});
+Outline.args = {
+  name: 'John Doe',
+  size: 50,
+  rounded: false,
+  variant: 'outline'
+};
+
 export const RoundedWithImage = Template.bind({});
 RoundedWithImage.args = {
   src: 'https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg',

diff --git a/src/elements/Avatar/Avatar.tsx b/src/elements/Avatar/Avatar.tsx
@@ -21,6 +21,11 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   size?: number;
 
+  /**
+   * Style variant for the avatar.
+   */
+  variant?: 'filled' | 'outline';
+
   /**
    * Whether the avatar is rounded.
    */
@@ -53,6 +58,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       src,
       color,
       size,
+      variant,
       rounded,
       className,
       colorOptions,
@@ -88,7 +94,12 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
           height: `${size}px`,
           fontSize: `${fontSize}px`,
           backgroundImage: src ? `url(${src})` : 'none',
-          backgroundColor
+          backgroundColor,
+          ...(variant === 'outline' && {
+            backgroundColor: 'transparent',
+            border: `solid 1px ${backgroundColor}`,
+            color: backgroundColor
+          })
         }}
         ref={ref}
       >
@@ -100,5 +111,6 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
 
 Avatar.defaultProps = {
   size: 24,
-  rounded: true
+  rounded: true,
+  variant: 'filled'
 };