From c4aaaf2b034f8283dbad84ea501ed01f37036473 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Sat, 14 Oct 2023 02:34:31 +0300
Subject: [PATCH] refactor: replace image component (#51928)

---
 client/src/client-only-routes/show-certification.tsx | 6 +++---
 client/src/components/helpers/avatar-renderer.tsx    | 3 +--
 tools/ui-components/src/image/image.stories.tsx      | 4 ----
 tools/ui-components/src/image/image.tsx              | 9 ++++-----
 tools/ui-components/src/image/image.types.ts         | 4 +---
 tools/ui-components/src/index.ts                     | 2 +-
 6 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/client/src/client-only-routes/show-certification.tsx b/client/src/client-only-routes/show-certification.tsx
index a047e6a3f8b..d75653a2674 100644
--- a/client/src/client-only-routes/show-certification.tsx
+++ b/client/src/client-only-routes/show-certification.tsx
@@ -1,4 +1,4 @@
-import { Image, Button } from '@freecodecamp/react-bootstrap';
+import { Button } from '@freecodecamp/react-bootstrap';
 import { isEmpty } from 'lodash-es';
 import { QRCodeSVG } from 'qrcode.react';
 import React, { useEffect, useState } from 'react';
@@ -6,7 +6,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
-import { Container, Col, Row } from '@freecodecamp/ui';
+import { Container, Col, Row, Image } from '@freecodecamp/ui';
 
 import envData from '../../config/env.json';
 import { getLangCode } from '../../../shared/config/i18n';
@@ -467,7 +467,7 @@ const ShowCertification = (props: ShowCertificationProps): JSX.Element => {
             {!isMicrosoftCert && (
               <>
                 <span className='ribbon-wrap'>
-                  <Image className='ribbon' src={ribbon} />
+                  <Image alt='' className='ribbon' src={ribbon} />
                 </span>
                 <span className='qr-wrap'>
                   <QRCodeSVG className='qr-code' value={certURL} />
diff --git a/client/src/components/helpers/avatar-renderer.tsx b/client/src/components/helpers/avatar-renderer.tsx
index 4cc61507886..b80b667ff5c 100644
--- a/client/src/components/helpers/avatar-renderer.tsx
+++ b/client/src/components/helpers/avatar-renderer.tsx
@@ -1,4 +1,4 @@
-import { Image } from '@freecodecamp/react-bootstrap';
+import { Image } from '@freecodecamp/ui';
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import isURL from 'validator/lib/isURL';
@@ -50,7 +50,6 @@ function AvatarRenderer({
         <Image
           alt={t('profile.avatar', { username: userName })}
           className='avatar'
-          responsive={true}
           src={picture}
         />
       )}
diff --git a/tools/ui-components/src/image/image.stories.tsx b/tools/ui-components/src/image/image.stories.tsx
index fe069e5bb2e..43f3a34e9d5 100644
--- a/tools/ui-components/src/image/image.stories.tsx
+++ b/tools/ui-components/src/image/image.stories.tsx
@@ -7,8 +7,6 @@ const story = {
   component: Image
 };
 
-const ref = React.createRef<HTMLImageElement>();
-
 const Template: Story<ImageProps> = args => {
   return <Image {...args} />;
 };
@@ -16,13 +14,11 @@ const Template: Story<ImageProps> = args => {
 export const Default = Template.bind({});
 Default.args = {
   alt: "Quincy Larson's signature",
-  ref: ref,
   src: 'https://cdn.freecodecamp.org/platform/english/images/quincy-larson-signature.svg'
 };
 
 export const Avatar = Template.bind({});
 Avatar.args = {
-  ref: ref,
   alt: "camper's avatar",
   src: 'https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png',
   className: 'object-cover img-fluid max-w-full h-auto'
diff --git a/tools/ui-components/src/image/image.tsx b/tools/ui-components/src/image/image.tsx
index 81d2c3b7a8c..3ca79a508fc 100644
--- a/tools/ui-components/src/image/image.tsx
+++ b/tools/ui-components/src/image/image.tsx
@@ -1,11 +1,10 @@
-/* eslint-disable react/prop-types */
-/* eslint-disable react/display-name */
-
 import React from 'react';
 import { ImageProps } from './image.types';
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
-  ({ alt, className, src }, ref): JSX.Element => {
-    return <img ref={ref} alt={alt} src={src} className={className} />;
+  ({ alt, src, ...props }, ref): JSX.Element => {
+    return <img ref={ref} alt={alt} src={src} {...props} />;
   }
 );
+
+Image.displayName = 'Image';
diff --git a/tools/ui-components/src/image/image.types.ts b/tools/ui-components/src/image/image.types.ts
index 5fd70ea08ed..d7ccf9d1516 100644
--- a/tools/ui-components/src/image/image.types.ts
+++ b/tools/ui-components/src/image/image.types.ts
@@ -1,7 +1,5 @@
 import React from 'react';
-export interface ImageProps {
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   alt: string;
-  className?: string;
   src: string;
-  ref: React.RefObject<HTMLImageElement>;
 }
diff --git a/tools/ui-components/src/index.ts b/tools/ui-components/src/index.ts
index 592701fdb4c..4edf81c7c19 100644
--- a/tools/ui-components/src/index.ts
+++ b/tools/ui-components/src/index.ts
@@ -2,7 +2,7 @@
 // export { Button } from './button';
 export { Alert, type AlertProps } from './alert';
 export { CloseButton } from './close-button';
-// export { Image } from './image';
+export { Image } from './image';
 export { Table } from './table';
 export { Panel } from './panel';
 // export { ToggleButton } from './toggle-button';