feat: Stops icons from throwing when passed empty icons in favour of warning

Author: amir-zahedi

.changeset/fluffy-singers-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@autoguru/overdrive': patch
+---
+
+Icon: Not throwing when passed null icons

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

@@ -3,6 +3,7 @@ import type { FunctionComponent, ReactElement, SVGAttributes } from 'react';
 import * as React from 'react';
 import { cloneElement } from 'react';
 
+import { useNullCheck } from '../../hooks';
 import { resolveResponsiveStyle } from '../../utils/resolveResponsiveProps';
 import { ResponsiveProp } from '../../utils/responsiveProps.css';
 import type { BoxStyleProps } from '../Box';
@@ -22,22 +23,27 @@ export const Icon: FunctionComponent<Props> = ({
 	icon,
 	size = 'small',
 	display = 'block',
-}) => (
-	<Box
-		is="i"
-		display={display}
-		className={[resolveResponsiveStyle(size, styles.size), className]}
-		role="presentation"
-	>
-		{cloneElement(icon, {
-			className: useBoxStyles({
-				is: 'svg',
-				display: 'block',
-				width: 'full',
-				height: 'full',
-			}),
-		})}
-	</Box>
-);
+}) => {
+	useNullCheck(icon, 'Icon component received an empty icon prop.');
+	return (
+		<Box
+			is="i"
+			display={display}
+			className={[resolveResponsiveStyle(size, styles.size), className]}
+			role="presentation"
+		>
+			{icon
+				? cloneElement(icon, {
+						className: useBoxStyles({
+							is: 'svg',
+							display: 'block',
+							width: 'full',
+							height: 'full',
+						}),
+				  })
+				: '⬤'}
+		</Box>
+	);
+};
 
 export default Icon;

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

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

packages/overdrive/lib/hooks/index.ts

@@ -6,3 +6,4 @@ export * from './useResponsiveValue';
 export * from './useWindowHeightFill';
 export * from './useWindowScrollLock';
 export * from './useMedia';
+export * from './useNullCheck';

packages/overdrive/lib/hooks/useNullCheck/index.ts

@@ -0,0 +1 @@
+export { useNullCheck } from './useNullCheck';

packages/overdrive/lib/hooks/useNullCheck/useNullCheck.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export const useNullCheck = <T>(value: T, message: string) => {
+	useEffect(() => {
+		if (!value) {
+			console.warn(`%c${message}`, 'color: orange');
+		}
+	}, [value, message]);
+};