Add image generic Component to Image component

Author: Kubit

src/components/image/image.styled.tsx

@@ -2,6 +2,8 @@ import styled from 'styled-components';
 
 import { ImageObjectFitType, ImageStylesPropsType } from './types';
 
+export const ImageStyled = styled.img``;
+
 export const ImagePictureStyled = styled.picture<ImageStylesPropsType>`
   position: relative;
   display: inline-block;

src/components/image/image.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
 
+import { useGenericComponents } from '@/provider/genericComponents';
+
 import { ImageStandAlone } from './imageStandAlone';
 import type { IImage } from './types';
 
 const ImageComponent = (
   props: IImage,
   ref: React.ForwardedRef<HTMLElement> | undefined | null
 ): JSX.Element => {
-  return <ImageStandAlone {...props} ref={ref} />;
+  const { IMAGE: GenericImageType } = useGenericComponents();
+  return <ImageStandAlone {...props} ref={ref} component={GenericImageType} />;
 };
 
 /**

src/components/image/imageStandAlone.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 
+import { ROLES } from '@/types';
 import { DeviceBreakpointsType } from '@/types/breakpoints';
 
 // internal components
 import { PictureSourceStandAlone } from './components/pictureSourceStandAlone';
 // styles
-import { ImagePictureStyled } from './image.styled';
+import { ImagePictureStyled, ImageStyled } from './image.styled';
 import { IImageStandAlone, ImageLoadingType } from './types';
 import { getFallbackRatio } from './utils/getFallbackRatio';
 
@@ -25,8 +26,9 @@ const ImageStandAloneComponent = (
         <PictureSourceStandAlone mediaSource={props.images[DeviceBreakpointsType.DESKTOP]} />
         <PictureSourceStandAlone mediaSource={props.images[DeviceBreakpointsType.TABLET]} />
         <PictureSourceStandAlone mediaSource={props.images[DeviceBreakpointsType.MOBILE]} />
-        <img
+        <ImageStyled
           alt={props.alt}
+          as={props.component || ROLES.IMG}
           height={props.height}
           loading={loading}
           src={props.images.DEFAULT.src}

src/components/image/types/image.ts

@@ -1,3 +1,4 @@
+import { GenericImageType } from '@/provider/genericComponents';
 import { DeviceBreakpointsType } from '@/types/breakpoints';
 
 import { ImageLoadingType } from './loading';
@@ -23,6 +24,7 @@ export interface IImageStandAlone {
   dataTestId?: string;
   borderRadius?: string;
   objectFit?: ImageObjectFitType;
+  component?: GenericImageType;
 }
 
 export type IImage = IImageStandAlone;