From 4816aa972cacfe851260fe0ef7641a8a76367fe7 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Tue, 31 Oct 2023 19:10:06 +0700
Subject: [PATCH] fix(client): navigation profile image (#52087)

---
 .../components/helpers/avatar-renderer.tsx    |  2 +-
 .../ui-components/src/image/image.stories.tsx | 29 +++++++++++++------
 tools/ui-components/src/image/image.tsx       | 12 ++++++--
 tools/ui-components/src/image/image.types.ts  |  4 +++
 4 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/client/src/components/helpers/avatar-renderer.tsx b/client/src/components/helpers/avatar-renderer.tsx
index 633c32147c2..2593a0ab946 100644
--- a/client/src/components/helpers/avatar-renderer.tsx
+++ b/client/src/components/helpers/avatar-renderer.tsx
@@ -46,7 +46,7 @@ function AvatarRenderer({
       {isPlaceHolderImage ? (
         <DefaultAvatar className='avatar default-avatar' />
       ) : (
-        <Image alt='' className='avatar' src={picture} />
+        <Image alt='' src={picture} responsive />
       )}
     </div>
   );
diff --git a/tools/ui-components/src/image/image.stories.tsx b/tools/ui-components/src/image/image.stories.tsx
index 43f3a34e9d5..6d1ecfb5211 100644
--- a/tools/ui-components/src/image/image.stories.tsx
+++ b/tools/ui-components/src/image/image.stories.tsx
@@ -2,26 +2,37 @@ import { Story } from '@storybook/react';
 import React from 'react';
 import { Image } from './image';
 import { ImageProps } from './image.types';
+
 const story = {
   title: 'Example/Image',
-  component: Image
+  component: Image,
+  argTypes: {
+    responsive: {
+      control: { type: 'boolean' }
+    }
+  }
 };
 
 const Template: Story<ImageProps> = args => {
-  return <Image {...args} />;
+  return (
+    <div style={{ width: '100px', height: '100px' }}>
+      <Image {...args} />
+    </div>
+  );
 };
 
 export const Default = Template.bind({});
 Default.args = {
-  alt: "Quincy Larson's signature",
-  src: 'https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
-};
-
-export const Avatar = Template.bind({});
-Avatar.args = {
   alt: "camper's avatar",
   src: 'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png',
-  className: 'object-cover img-fluid max-w-full h-auto'
+  responsive: false
+};
+
+export const Responsive = Template.bind({});
+Responsive.args = {
+  alt: "camper's avatar",
+  src: 'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png',
+  responsive: true
 };
 
 export default story;
diff --git a/tools/ui-components/src/image/image.tsx b/tools/ui-components/src/image/image.tsx
index 3ca79a508fc..92dabc9fae3 100644
--- a/tools/ui-components/src/image/image.tsx
+++ b/tools/ui-components/src/image/image.tsx
@@ -2,8 +2,16 @@ import React from 'react';
 import { ImageProps } from './image.types';
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-  ({ alt, src, ...props }, ref): JSX.Element => {
-    return <img ref={ref} alt={alt} src={src} {...props} />;
+  ({ alt, src, responsive, ...props }, ref): JSX.Element => {
+    // If `responsive` is `true`:
+    // - Set `display` to `block`
+    // - Set a maximum relative to the parent
+    // - Scale the height according to the width, otherwise the image is stretched
+    const className = responsive ? 'block max-w-full h-auto' : '';
+
+    return (
+      <img ref={ref} alt={alt} src={src} className={className} {...props} />
+    );
   }
 );
 
diff --git a/tools/ui-components/src/image/image.types.ts b/tools/ui-components/src/image/image.types.ts
index d7ccf9d1516..faf121c919e 100644
--- a/tools/ui-components/src/image/image.types.ts
+++ b/tools/ui-components/src/image/image.types.ts
@@ -2,4 +2,8 @@ import React from 'react';
 export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   alt: string;
   src: string;
+  /**
+   * Whether the image should be resized and contained within its parent.
+   */
+  responsive?: boolean;
 }