refactor: replace image component (#51928)

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} />

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}
         />
       )}

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'

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';

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>;
 }

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';