[Docs EuiEmptyPrompt] Add new page not found illustration (#6061)

* [Docs EuiEmptyPrompt] Add new 404 illustration

* Adding `alt` descriptions

* Update src-docs/src/views/empty_prompt/_types_of_use_cases.tsx

Co-authored-by: Greg Thompson <[email protected]>

* Better `alt` description

Co-authored-by: Greg Thompson <[email protected]>

src-docs/src/views/empty_prompt/_types_of_empty_states.tsx

@@ -150,9 +150,18 @@ export default () => {
     const iconImg: string = isDarkTheme
       ? currentUseCaseExample.iconDark!
       : currentUseCaseExample.iconLight!;
+    const iconImg2x: string = isDarkTheme
+      ? currentUseCaseExample.iconDark2x!
+      : currentUseCaseExample.iconLight2x!;
+
+    const hasRetinaImage = iconImg2x !== '';
+    const srcSet = hasRetinaImage ? `${iconImg} 1x, ${iconImg2x} 2x` : '';
+    const alt = currentUseCaseExample.alt || '';
 
     icon = {
-      icon: <EuiImage size="fullWidth" src={iconImg} alt="" />,
+      icon: (
+        <EuiImage size="fullWidth" alt={alt} srcSet={srcSet} src={iconImg} />
+      ),
     };
   }
 

src-docs/src/views/empty_prompt/_types_of_use_cases.tsx

@@ -13,8 +13,11 @@ import {
   IconType,
 } from '../../../../src/components';
 
-import pageNotFoundLight from '../../images/empty-prompt/404_rainy_cloud_light.png';
-import pageNotFoundDark from '../../images/empty-prompt/404_rainy_cloud_dark.png';
+import pageNotFoundDark from '../../images/empty-prompt/pageNotFound--dark.png';
+import pageNotFoundLight from '../../images/empty-prompt/pageNotFound--light.png';
+import pageNotFoundDark2x from '../../images/empty-prompt/[email protected]';
+import pageNotFoundLight2x from '../../images/empty-prompt/[email protected]';
+
 import noResultsLight from '../../images/empty-prompt/no-results--light.svg';
 import noResultsDark from '../../images/empty-prompt/no-results--dark.svg';
 
@@ -31,7 +34,10 @@ export const typesOfUseCases: {
       iconLoading?: ReactNode;
       iconLight?: string;
       iconDark?: string;
+      iconLight2x?: string;
+      iconDark2x?: string;
       iconType?: IconType;
+      alt?: string;
       title: ReactNode;
       body?: ReactNode;
       actions?: ReactNode[];
@@ -218,7 +224,11 @@ export const typesOfUseCases: {
     example: {
       iconLight: pageNotFoundLight,
       iconDark: pageNotFoundDark,
+      iconLight2x: pageNotFoundLight2x,
+      iconDark2x: pageNotFoundDark2x,
       title: <h2>Page not found</h2>,
+      alt:
+        "An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'.",
       body: (
         <p>
           Sorry, we can&apos;t find the page you&apos;re looking for. It might

src-docs/src/views/empty_prompt/prompt_types/page_not_found.tsx

@@ -6,19 +6,30 @@ import {
   EuiButtonEmpty,
 } from '../../../../../src/components';
 import { ThemeContext } from '../../../components/with_theme';
-import pageNotFoundLight from '../../../images/empty-prompt/404_rainy_cloud_light.png';
-import pageNotFoundDark from '../../../images/empty-prompt/404_rainy_cloud_dark.png';
+
+import pageNotFoundDark from '../../../images/empty-prompt/pageNotFound--dark.png';
+import pageNotFoundLight from '../../../images/empty-prompt/pageNotFound--light.png';
+import pageNotFoundDark2x from '../../../images/empty-prompt/[email protected]';
+import pageNotFoundLight2x from '../../../images/empty-prompt/[email protected]';
 
 export default () => {
   const themeContext = useContext(ThemeContext);
   const isDarkTheme = themeContext.theme.includes('dark');
 
-  const iconImg: string = isDarkTheme ? pageNotFoundDark : pageNotFoundLight;
+  const pageNotFound = isDarkTheme ? pageNotFoundDark : pageNotFoundLight;
+  const pageNotFound2x = isDarkTheme ? pageNotFoundDark2x : pageNotFoundLight2x;
 
   return (
     <EuiEmptyPrompt
       color="subdued"
-      icon={<EuiImage size="fullWidth" src={iconImg} alt="" />}
+      icon={
+        <EuiImage
+          size="fullWidth"
+          srcSet={`${pageNotFound} 1x, ${pageNotFound2x} 2x`}
+          src={pageNotFound}
+          alt="An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'."
+        />
+      }
       title={<h2>Page not found</h2>}
       layout="vertical"
       body={