feat: adjust avatar styles

claudaniloxavier · Nov 27, 2023 · 57e429f · 57e429f
1 parent 2feaa64
commit 57e429f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 28 deletions.
diff --git a/lib/components/Avatar/index.tsx b/lib/components/Avatar/index.tsx
@@ -8,12 +8,13 @@ import classNames from 'classnames'
 import styles from './styles.module.scss'
 
 const Avatar: FC<Props> = ({ 
+  backgroundColor = '#339AF0',
   className,
-  name,
+  fontColor = '#FFFFFF',
   image,
+  name,
   size = 'md',
-  backgroundColor = '#339AF0',
-  fontColor = '#FFFFFF',
+  withTitle = true,
   ...rest 
 }: Props) => {
   const getInitials = (): string => {
@@ -34,6 +35,7 @@ const Avatar: FC<Props> = ({
         [styles.large]: size === 'lg',
         [styles.xlarge]: size === 'xl',
       })}
+      title={withTitle ? name : undefined}
       style={{
         backgroundColor: backgroundColor
       }} 

diff --git a/lib/components/Avatar/styles.module.scss b/lib/components/Avatar/styles.module.scss
@@ -8,54 +8,55 @@
   justify-content: center;
   border-radius: 50%;
   overflow: hidden;
+  user-select: none;
 
   &.xsmall {
-    width: 24px;
-    height: 24px;
+    width: to-rem(24);
+    height: to-rem(24);
 
     span {
-      font-size: 10px;
-      line-height: 10px;
+      font-size: to-rem(10);
+      line-height: to-rem(10);
     }
   }
 
   &.small {
-    width: 32px;
-    height: 32px;
+    width: to-rem(32);
+    height: to-rem(32);
 
     span {
-      font-size: 12px;
-      line-height: 12px;
+      font-size: font.$size-xxxs;
+      line-height: to-rem(12);
     }
   }
 
   &.medium {
-    width: 48px;
-    height: 48px;
+    width: to-rem(48);
+    height: to-rem(48);
 
     span {
-      font-size: 16px;
-      line-height: 16px;
+      font-size: font.$size-xs;
+      line-height: to-rem(16);
     }
   }
 
   &.large {
-    width: 64px;
-    height: 64px;
+    width: to-rem(64);
+    height: to-rem(64);
 
     span {
-      font-size: 20px;
-      line-height: 20px;
+      font-size: font.$size-md;
+      line-height: to-rem(20);
     }
   }
 
   &.xlarge {
-    width: 96px;
-    height: 96px;
+    width: to-rem(96);
+    height: to-rem(96);
 
     span {
-      font-size: 24px;
-      line-height: 24px;
+      font-size: font.$size-lg;
+      line-height: to-rem(24);
     }
   }
 

diff --git a/lib/components/Avatar/types.ts b/lib/components/Avatar/types.ts
@@ -8,4 +8,5 @@ export interface AvatarProps extends DivOwnProps {
   image?: string
   backgroundColor?: string
   fontColor?: string
+  withTitle?: boolean
 }
diff --git a/src/stories/Avatar.stories.tsx b/src/stories/Avatar.stories.tsx
@@ -1,17 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Avatar } from '../../lib/main';
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'Avatar',
   component: Avatar,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     children: { control: 'text' }
   },
@@ -20,7 +16,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
     name: 'Barry Allen',