feat: Adds SimpleImage component error fallback option (#974)

Author: amir-zahedi

.changeset/gentle-bobcats-taste.md

@@ -0,0 +1,5 @@
+---
+'@autoguru/overdrive': minor
+---
+
+SimpleImage component gets error fallback option

packages/overdrive/lib/components/Icon/Icon.tsx

@@ -1,9 +1,9 @@
 import type { IconType } from '@autoguru/icons';
-import { useNullCheck } from '../../hooks/useNullCheck';
 import type { FunctionComponent, ReactElement, SVGAttributes } from 'react';
 import * as React from 'react';
 import { cloneElement } from 'react';
 
+import { useNullCheck } from '../../hooks/useNullCheck';
 import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
 import { ResponsiveProp } from '../../utils/responsiveProps.css';
 import type { BoxStyleProps } from '../Box';

packages/overdrive/lib/components/Icon/stories.tsx

@@ -27,7 +27,7 @@ const iconOptions = {
 	PlusIcon,
 	StarIcon,
 	CheckIcon,
-	empty: null
+	empty: null,
 };
 
 export default {

packages/overdrive/lib/components/Image/SimpleImage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, ReactElement, useState } from 'react';
 
 export interface Props
 	extends Partial<
@@ -36,6 +36,8 @@ export interface Props
 	height?: string;
 
 	className?: string;
+
+	fallbackComponent?: ReactElement; // Add this line
 }
 
 export const SimpleImage: FunctionComponent<Props> = ({
@@ -44,17 +46,30 @@ export const SimpleImage: FunctionComponent<Props> = ({
 	className = '',
 	src,
 	srcSet,
+	fallbackComponent, // Add this line
 	...imgProps
-}) => (
-	// @ts-ignore
-	<img
-		loading={eager ? 'eager' : 'lazy'}
-		decoding={syncDecoding ? 'sync' : 'async'}
-		className={className}
-		srcSet={srcSet}
-		src={src}
-		{...imgProps}
-	/>
-);
-
-export default SimpleImage;
+}) => {
+	const [hasError, setHasError] = useState(false);
+
+	const handleError = () => {
+		setHasError(true);
+	};
+
+	if (hasError && fallbackComponent) {
+		// Render fallback component
+		return fallbackComponent;
+	}
+
+	return (
+		/*@ts-ignore*/
+		<img
+			loading={eager ? 'eager' : 'lazy'}
+			decoding={syncDecoding ? 'sync' : 'async'}
+			className={className}
+			srcSet={srcSet}
+			src={src}
+			onError={handleError}
+			{...imgProps}
+		/>
+	);
+};