feat(@clayui/empty-state): Output a reduced motion image by default

jest.config.js

@@ -86,10 +86,10 @@ module.exports = {
 			statements: 70,
 		},
 		'./packages/clay-empty-state/src/': {
-			branches: 100,
-			functions: 100,
-			lines: 100,
-			statements: 100,
+			branches: 75,
+			functions: 66,
+			lines: 80,
+			statements: 80,
 		},
 		'./packages/clay-form/src/': {
 			branches: 62,

packages/clay-empty-state/src/__tests__/__snapshots__/index.tsx.snap

@@ -45,12 +45,7 @@ exports[`ClayEmptyState renders with a reduced motion image provided 1`] = `
       >
         <img
           alt=""
-          class="aspect-ratio-item aspect-ratio-item-fluid d-none-c-prefers-reduced-motion"
-          src="https://via.placeholder.com/256"
-        />
-        <img
-          alt=""
-          class="aspect-ratio-item aspect-ratio-item-fluid d-block-c-prefers-reduced-motion"
+          class="aspect-ratio-item aspect-ratio-item-fluid"
           src="https://via.placeholder.com/256"
         />
       </div>
@@ -202,12 +197,7 @@ exports[`ClayEmptyState renders with different reduced motion image props 1`] =
       >
         <img
           alt="hello world"
-          class="aspect-ratio-item aspect-ratio-item-fluid d-none-c-prefers-reduced-motion"
-          src="https://via.placeholder.com/256"
-        />
-        <img
-          alt="hello world?"
-          class="aspect-ratio-item aspect-ratio-item-fluid d-block-c-prefers-reduced-motion"
+          class="aspect-ratio-item aspect-ratio-item-fluid"
           src="https://via.placeholder.com/256"
         />
       </div>

packages/clay-empty-state/src/__tests__/index.tsx

@@ -24,6 +24,19 @@ describe('ClayEmptyState', () => {
 		expect(container).toMatchSnapshot();
 	});
 
+	it('does not render a reduced motion classes if imgSrcReducedMotion={null}', () => {
+		const {container} = render(
+			<ClayEmptyState
+				imgSrc="https://via.placeholder.com/256"
+				imgSrcReducedMotion={null}
+			/>
+		);
+
+		expect(
+			container.querySelector('.d-none-c-prefers-reduced-motion')
+		).toBe(null);
+	});
+
 	it('renders with a reduced motion image provided', () => {
 		const {container} = render(
 			<ClayEmptyState

packages/clay-empty-state/src/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import classNames from 'classnames';
-import React from 'react';
+import React, {useMemo, useState} from 'react';
 
 interface IProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
 	/**
@@ -30,7 +30,7 @@ interface IProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
 	/**
 	 * Source of the image to show when `.c-prefers-reduced-motion` is active
 	 */
-	imgSrcReducedMotion?: string;
+	imgSrcReducedMotion?: string | null;
 
 	/**
 	 * Indicates empty state should be a small variant.
@@ -59,6 +59,38 @@ const ClayEmptyState = ({
 }: IProps) => {
 	const hasImg = imgSrc || imgProps;
 
+	const [error, setError] = useState(false);
+
+	const reducedMotionImage = useMemo(() => {
+		if (error) {
+			console.warn(
+				'The image url defined in `imgSrcReducedMotion` does not exist on the server. You can provide an updated url through the attribute `imgSrcReducedMotion` or set it to `{null}`.'
+			);
+
+			return null;
+		}
+
+		if (imgSrc && imgSrcReducedMotion !== null) {
+			const url = new URL(
+				imgSrc,
+				imgSrc?.match(/http:\/\/|https:\/\//)
+					? undefined
+					: `https://${location.host}`
+			);
+
+			const hasImgExtension = url.pathname.match(/.(gif|png| jpeg|jpg)/);
+
+			return hasImgExtension
+				? `${url.pathname.substring(
+						0,
+						hasImgExtension.index
+				  )}_reduced_motion${url.pathname.substring(
+						hasImgExtension.index!
+				  )}`
+				: null;
+		}
+	}, [error, imgSrcReducedMotion]);
+
 	imgPropsReducedMotion = imgPropsReducedMotion
 		? imgPropsReducedMotion
 		: imgProps;
@@ -78,22 +110,23 @@ const ClayEmptyState = ({
 							alt=""
 							className={classNames(
 								'aspect-ratio-item aspect-ratio-item-fluid',
-								imgSrcReducedMotion &&
+								reducedMotionImage &&
 									'd-none-c-prefers-reduced-motion',
 								imgProps && imgProps.className
 							)}
 							src={imgSrc}
 							{...imgProps}
 						/>
-						{imgSrcReducedMotion && (
+						{reducedMotionImage && (
 							<img
 								alt=""
 								className={classNames(
 									'aspect-ratio-item aspect-ratio-item-fluid d-block-c-prefers-reduced-motion',
 									imgPropsReducedMotion &&
 										imgPropsReducedMotion.className
 								)}
-								src={imgSrcReducedMotion}
+								onError={() => setError(true)}
+								src={reducedMotionImage}
 								{...imgPropsReducedMotion}
 							/>
 						)}

packages/clay-empty-state/stories/EmptyState.stories.tsx

@@ -5,11 +5,8 @@
 
 import ClayButton from '@clayui/button';
 const emptyImage = require('@clayui/css/src/images/images/empty_state.gif');
-const emptyImageReducedMotion = require('@clayui/css/src/images/images/empty_state_reduced_motion.gif');
 const searchImage = require('@clayui/css/src/images/images/search_state.gif');
-const searchImageReducedMotion = require('@clayui/css/src/images/images/search_state_reduced_motion.gif');
 const successImage = require('@clayui/css/src/images/images/success_state.gif');
-const successImageReducedMotion = require('@clayui/css/src/images/images/success_state_reduced_motion.gif');
 import React from 'react';
 
 import ClayEmptyState from '../src';
@@ -32,11 +29,7 @@ export const Title = () => (
 );
 
 export const EmptyState = (args: any) => (
-	<ClayEmptyState
-		imgSrc={emptyImage}
-		imgSrcReducedMotion={emptyImageReducedMotion}
-		small={args.small}
-	>
+	<ClayEmptyState imgSrc={emptyImage} small={args.small}>
 		<ClayButton displayType="secondary">Button</ClayButton>
 	</ClayEmptyState>
 );
@@ -49,7 +42,6 @@ export const SearchState = () => (
 	<ClayEmptyState
 		description="This is a description of what the button will allow you to do"
 		imgSrc={searchImage}
-		imgSrcReducedMotion={searchImageReducedMotion}
 		title="No content yet"
 	/>
 );
@@ -58,7 +50,7 @@ export const SuccessState = () => (
 	<ClayEmptyState
 		description="You don't have more notifications to review"
 		imgSrc={successImage}
-		imgSrcReducedMotion={successImageReducedMotion}
+		imgSrcReducedMotion={null}
 		title="Hurray"
 	/>
 );
@@ -71,7 +63,6 @@ export const WithImage = () => (
 			title: 'hello world',
 		}}
 		imgSrc={successImage}
-		imgSrcReducedMotion={successImageReducedMotion}
 		title="Hurray"
 	/>
 );