[EUI+] Add missing guidelines

packages/website/docs/components/display/empty_prompt/guidelines.mdx

@@ -0,0 +1,101 @@
+---
+slug: /display/empty-prompt/guidelines
+id: display_empty_prompt_guidelines
+title: Empty prompt guidelines
+sidebar_label: Guidelines
+---
+
+import { EuiFlexGroup } from '@elastic/eui';
+
+## Anatomy
+
+A useful empty state will let the user know what's happening, why it's happening, and what to do about it. It can contribute to a more compelling user experience and add more value to the business if done right.
+
+To make the empty state clear, follow this pattern:
+
+import { EuiAspectRatio } from '@elastic/eui';
+
+<EuiAspectRatio width={16} height={9}>
+  <iframe
+    title="Anatomy of an empty state"
+    width="1200"
+    height="550"
+    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FRzfYLj2xmH9K7gQtbSKygn%2FElastic-UI%3Fnode-id%3D22764%253A276515"
+  />
+</EuiAspectRatio>
+
+1. **Icon or illustration (optional):** A meaningful representation of the the solution or context.
+2. **Title:** Answers the question "What's happening?". Is it an error? Is it loading?
+3. **Description:** Why is it happening? Explain why the space is empty and guide the users through the required actions.
+4. **Action(s):** Your call to actions should answer the question "What will solve the issue?". Lead the users to take action or guide them about the next steps.
+5. **Footer (optional):** Use this section to reference documentation or link to an area where users can learn more about the issue they are facing.
+
+## Empty state types, goals, and recommendations
+
+The following scenarios detail the most common empty states use cases and provide recommendations for use with **EuiPageTemplate**.
+
+import { TypesOfEmptyStates } from './types_of_empty_states';
+
+<TypesOfEmptyStates />
+
+## Design
+
+### Vertical vs. horizontal
+
+The vertical layout is perfect when the content is small — a title and two paragraphs at most. You can use this layout with an icon, an illustration, or no icons at all.
+
+Use the horizontal layout when you have a long description, multiple calls to action, and a footer. For this type of layout, an illustration is required.
+
+<EuiFlexGroup gutterSize="m">
+  <Guideline text="Use the vertical layout when the text is 1 to 2 sentences.">
+    ![Vertical layout](/images/empty_prompt/thumbnail_vertical.svg)
+  </Guideline>
+  <Guideline text="Use the horizontal layout when you have a long description, and you can provide an illustration.">
+    ![Horizontal layout](/images/empty_prompt/thumbnail_horizontal.svg)
+  </Guideline>
+</EuiFlexGroup>
+
+### Icons and illustrations
+
+Icons and illustrations must first and foremost communicate meaning. They are also an opportunity to delight users and show our Elastic brand.
+
+When using an illustration, bear in mind that they stand out a lot. Use one illustration per page. Having multiple illustrations might make the page too crowded.
+
+<EuiFlexGroup gutterSize="m">
+  <Guideline type="do" text="An illustration works better in a horizontal layout.">
+    ![Horizontal layout](/images/empty_prompt/thumbnail_icon-do.svg)
+  </Guideline>
+  <Guideline type="dont" text="Avoid using icons and illustrations that don't mean anything and are not related to the content.">
+    ![No meaningful icon](/images/empty_prompt/thumbnail_icon-dont.svg)
+  </Guideline>
+</EuiFlexGroup>
+
+### Learn more links
+
+"Learn more" links are optional. You can use them in your empty prompt to link to documentation where users can get more detailed help.
+
+Include the link after the description when the empty prompt doesn't contain a call to action. If there is a call to action, include the link in the footer.
+
+<EuiFlexGroup gutterSize="m">
+  <Guideline text={`Add the "Learn more" link after the description when the empty prompt doesn't contain a call to action.`}>
+    ![Inline link](/images/empty_prompt/thumbnail_inline-link.svg)
+  </Guideline>
+  <Guideline text={`Add the "Learn more" link in the footer when the empty prompt contains a call to action.`}>
+    ![Footer link](/images/empty_prompt/thumbnail_footer-link.svg)
+  </Guideline>
+</EuiFlexGroup>
+
+### Multiple empty states
+
+When a page has multiple empty states, avoid using multiple primary actions and multiple icons or illustrations.
+
+Use secondary actions and no icons or illustrations. This way, the visual noise will be reduced. Consider using an illustration or a primary action if you want to make one of the empty states stand out.
+
+<EuiFlexGroup gutterSize="m">
+  <Guideline type="do" text="Use secondary actions and no icons or illustrations when displaying multiple empty states.">
+    ![Vertical layout](/images/empty_prompt/thumbnail_multiple-do.svg)
+  </Guideline>
+  <Guideline type="dont" text="Avoid mixing different types of empty states. Be consistent.">
+    ![Multiple empty states with primary actions and icons/illustrations](/images/empty_prompt/thumbnail_multiple-dont.svg)
+  </Guideline>
+</EuiFlexGroup>

packages/website/docs/components/display/empty_prompt/multiple_types.tsx

@@ -2,17 +2,7 @@ import React, { useState } from 'react';
 
 import { EuiSelect, useEuiTheme } from '@elastic/eui';
 
-// @ts-expect-error Docusaurus theme is missing types for this component
-import { Demo } from '@elastic/eui-docusaurus-theme/lib/components/demo';
-
-// @ts-ignore - not typed
-import pageNotFoundDark from './pageNotFound--dark.png';
-// @ts-ignore - not typed
-import pageNotFoundLight from './pageNotFound--light.png';
-// @ts-ignore - not typed
-import accessDeniedDark from './accessDenied--dark.png';
-// @ts-ignore - not typed
-import accessDeniedLight from './accessDenied--light.png';
+import { Demo } from '@elastic/eui-docusaurus-theme/lib/components/demo/demo.js';
 
 const types: Array<{
   value: string;
@@ -27,7 +17,11 @@ const types: Array<{
   icon={
     <EuiImage
       size="fullWidth"
-      src="${colorMode === 'DARK' ? pageNotFoundDark : pageNotFoundLight}"
+      src="${
+        colorMode === 'DARK'
+          ? '/images/empty_prompt/pageNotFound--dark.png'
+          : '/images/empty_prompt/pageNotFound--light.png'
+      }"
       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'."
     />
   }
@@ -57,7 +51,11 @@ const types: Array<{
   icon={
     <EuiImage
       size="fullWidth"
-      src="${colorMode === 'DARK' ? accessDeniedDark : accessDeniedLight}"
+      src="${
+        colorMode === 'DARK'
+          ? '/images/empty_prompt/accessDenied--dark.png'
+          : '/images/empty_prompt/accessDenied--light.png'
+      }"
       alt=""
     />
   }

packages/website/docs/components/display/empty_prompt/overview.mdx

@@ -3,11 +3,13 @@ slug: /display/empty-prompt
 id: display_empty_prompt
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Empty prompt
 
 The **EuiEmptyPrompt** is the building block to create an empty state. You can use it as a placeholder for any type of empty content. They are especially helpful for replacing entire pages or parts of a product that contain no content.
 
-Be sure to read the full [empty prompt usage guidelines](/docs/guidelines/empty-prompt).
+Be sure to read the full [empty prompt usage guidelines](./guidelines).
 
 While no one piece of content is required, each **EuiEmptyPrompt** should contain at least a `title` (wrapped in an HTML heading element) and/or a `description`. They usually contain one or more `actions` that promotes the primary call-to-actions. You can also provide a `footer` to direct users towards making informed decisions.
 
@@ -172,9 +174,7 @@ You can supply a `layout` of either `"horizontal"` or `"vertical"` with the defa
 
 When you have longer body text with multiple calls to action, you can use the `horizontal` layout. This layout works best when you can provide a larger graphic like an illustration as the `icon`. For consistency, we recommend providing the illustration using a [**EuiImage**](/docs/display/image) with `size="fullWidth"`.
 
-import illustration from '!url-loader!./illustration.svg';
-
-<Demo scope={{ illustration }}>
+<Demo scope={{ useBaseUrl }}>
   ```tsx
   import React from 'react';
   import {
@@ -189,7 +189,7 @@ import illustration from '!url-loader!./illustration.svg';
     return (
       <>
         <EuiEmptyPrompt
-          icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
+          icon={<EuiImage size="fullWidth" src={useBaseUrl('/images/empty_prompt/illustration.svg')} alt="" />}
           title={<h2>Create your first visualization</h2>}
           layout="horizontal"
           color="plain"
@@ -241,7 +241,7 @@ When using a **EuiEmptyPrompt** in a [**EuiPageTemplate**](/docs/templates/page-
 
 The following example shows the usage of the [**EuiPageTemplate.EmptyPrompt**](/docs/templates/page-template#empty-pages-or-content) namespaced component.
 
-<Demo scope={{ illustration }}>
+<Demo scope={{ useBaseUrl }}>
   ```tsx
   import React from 'react';
   import {
@@ -256,7 +256,7 @@ The following example shows the usage of the [**EuiPageTemplate.EmptyPrompt**](/
     <EuiPageTemplate minHeight="0">
       <EuiPageTemplate.EmptyPrompt
         title={<h2>Create your first visualization</h2>}
-        icon={<EuiImage size="fullWidth" src={illustration} alt="" />}
+        icon={<EuiImage size="fullWidth" src={useBaseUrl('/images/empty_prompt/illustration.svg')} alt="" />}
         color="plain"
         layout="horizontal"
         body={

packages/website/docs/components/display/empty_prompt/types_of_empty_states/colors.tsx

@@ -0,0 +1,61 @@
+import { EuiCode } from '@elastic/eui';
+
+export const TYPES_OF_PANEL_COLORS = {
+  sidebar: {
+    id: 'sidebar',
+    text: (
+      <>
+        <p>
+          Set <EuiCode>{'color="subdued"'}</EuiCode> to make users not getting
+          distracted and focus on the content.
+        </p>
+        <p>
+          Consider the transparent color if the empty prompt is contained in
+          another component.
+        </p>
+      </>
+    ),
+    props: { color: 'subdued' },
+  },
+  empty: {
+    id: 'empty',
+    text: (
+      <>
+        <p>
+          Set <EuiCode>{'color="plain”'}</EuiCode> to make users getting focus
+          on the content
+        </p>
+        <p>
+          Consider the transparent color if the empty prompt is contained in
+          another component.
+        </p>
+      </>
+    ),
+    props: { color: 'plain' },
+  },
+  multiple: {
+    id: 'multiple',
+    text: (
+      <>
+        <p>
+          Set <EuiCode>{'color="plain” and hasBorder={true}'}</EuiCode> when you
+          have multiple panels on the page. The other panels should also have
+          borders to ensure consistency.
+        </p>
+        <p>
+          Consider the transparent color if the empty prompt is contained in
+          another component.
+        </p>
+      </>
+    ),
+  },
+  error: {
+    id: 'error',
+    text: (
+      <p>
+        Set <EuiCode>{'color="danger"'}</EuiCode> to emphasize that an error
+        happened.
+      </p>
+    ),
+  },
+} as const;