Merge pull request #109 from smartive-education/develop

Develop
ost-cas-fee-adv-22-23 · Apr 12, 2023 · 1ee525f · 1ee525f
2 parents fbf807b + 0182b99
commit 1ee525f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/src/components/profile-image/profile-image.stories.tsx b/src/components/profile-image/profile-image.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { StorybookMeta } from '../components.config';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ProfileImage } from './profile-image';
+import { AvatarSize } from '../avatar/avatar.types';
 
 export default {
   title: `${StorybookMeta.COMPONENTS}/ProfileImage`,
@@ -19,4 +20,5 @@ export const ProfileImageComponent: ComponentStory<typeof ProfileImage> = Templa
 ProfileImageComponent.args = {
   src: 'https://randompicturegenerator.com/img/people-generator/gd121f56d8674f28d00ce9f1c44686e7a9bee58b8d33a3c57daaada1fa493c214290f9490833d1ff18f4ee16cd5298e1f_640.jpg',
   alt: 'Profile Image alt attribute text',
+  size: AvatarSize.XL,
 };
diff --git a/src/components/profile-image/profile-image.tsx b/src/components/profile-image/profile-image.tsx
@@ -6,15 +6,33 @@ import EditIcon from '../../components/icons/Edit';
 import { Button } from '../button/button';
 import { ButtonSize, ButtonType } from '../button/button.types';
 
-export const ProfileImage: React.FC<ProfileImageProps> = ({ src, alt, onClick }) => {
-  const baseClasses = 'inline-block relative w-[160px] h-[160px]';
-  const buttonWrapperClasses = 'absolute bottom-0 right-0';
+export const ProfileImage: React.FC<ProfileImageProps> = ({ src, alt, size = AvatarSize.XL, onClick }) => {
+  const baseClasses = ['inline-block relative'];
+  const buttonWrapperClasses = ['absolute bottom-0 right-0'];
+
+  if (size === AvatarSize.S) {
+    baseClasses.push('w-[40px] h-[40px]');
+    buttonWrapperClasses.push('opacity-0');
+  }
+
+  if (size === AvatarSize.M) {
+    baseClasses.push('w-[64px] h-[64px]');
+    buttonWrapperClasses.push('opacity-0');
+  }
+
+  if (size === AvatarSize.L) {
+    baseClasses.push('w-[96px] h-[96px]');
+  }
+
+  if (size === AvatarSize.XL) {
+    baseClasses.push('w-[160px] h-[160px]');
+  }
 
   return (
-    <div className={baseClasses}>
-      <Avatar src={src} alt={alt} size={AvatarSize.XL} showBorder={true} />
+    <div className={baseClasses.join(' ')}>
+      <Avatar src={src} alt={alt} size={size} showBorder={true} />
 
-      <div className={buttonWrapperClasses}>
+      <div className={buttonWrapperClasses.join(' ')}>
         <Button showBorder={false} onClick={onClick} type={ButtonType.DEFAULT} size={ButtonSize.S} isIconOnly={true}>
           <EditIcon width="16" height="16" />
         </Button>

diff --git a/src/components/profile-image/profile-image.types.ts b/src/components/profile-image/profile-image.types.ts
@@ -1,7 +1,9 @@
 import { MouseEvent } from 'react';
+import { AvatarSize } from '../avatar/avatar.types';
 
 export type ProfileImageProps = {
   src: string;
   alt: string;
+  size?: AvatarSize;
   onClick: (e: MouseEvent<HTMLButtonElement>) => void;
 };