[EuiEmptyPrompt] Create Storybook Stories for EuiEmptyPrompt & Impo…

…rt Sass Styles for Components Not Using Emotion (#7057)

Co-authored-by: Cee Chen <[email protected]>

.storybook/preview.tsx

@@ -32,6 +32,10 @@ appendIconComponentCache(iconCache);
 import { EuiProvider } from '../src/components/provider';
 import { writingModeStyles } from './writing_mode.styles';
 
+// Import light theme for components still using Sass styling
+// TODO: Remove once all EUI components are converted to Emotion
+import '../dist/eui_theme_light.css';
+
 const preview: Preview = {
   decorators: [
     (Story, context) => (

src/components/empty_prompt/empty_prompt.stories.tsx

@@ -0,0 +1,101 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import illustration from '../../../src-docs/src/images/empty-prompt/illustration.svg';
+import { EuiButton, EuiButtonEmpty } from '../button';
+import { EuiTitle } from '../title';
+import { EuiLink } from '../link';
+import { EuiImage } from '../image';
+import { EuiPageTemplate } from '../page_template';
+
+import { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt';
+
+const meta: Meta<EuiEmptyPromptProps> = {
+  title: 'EuiEmptyPrompt',
+  component: EuiEmptyPrompt,
+};
+
+export default meta;
+type Story = StoryObj<EuiEmptyPromptProps>;
+
+const componentDefaults: EuiEmptyPromptProps = {
+  titleSize: 'm',
+  paddingSize: 'l',
+  color: 'plain', // The component default is actually 'transparent', but for the purposes of easier testing in Storybook we'll set it to plain
+  layout: 'vertical',
+};
+
+export const Playground: Story = {
+  args: {
+    ...componentDefaults,
+    title: <h2>Start adding cases</h2>,
+    iconType: 'logoSecurity',
+    hasBorder: false,
+    hasShadow: false,
+    body: 'Add a new case or change your filter settings.', // Should be wrapped in a `<p>` in production usage, but using a string makes this easier to edit in Storybook controls
+    actions: [
+      <EuiButton color="primary" fill>
+        Upgrade
+      </EuiButton>,
+      <EuiButtonEmpty color="primary">Start a trial</EuiButtonEmpty>,
+    ],
+    footer: (
+      <>
+        <EuiTitle size="xxs">
+          <h3>Want to learn more?</h3>
+        </EuiTitle>
+        <EuiLink href="#" target="_blank">
+          Read the docs
+        </EuiLink>
+      </>
+    ),
+  },
+};
+
+export const PageTemplate: Story = {
+  render: ({ ...args }) => (
+    <EuiPageTemplate minHeight="0">
+      <EuiPageTemplate.EmptyPrompt {...args} />
+    </EuiPageTemplate>
+  ),
+  args: {
+    ...componentDefaults,
+    title: <h2>Create your first visualization</h2>,
+    layout: 'horizontal',
+    icon: <EuiImage size="fullWidth" src={illustration} alt="" />,
+    body: (
+      <>
+        <p>
+          There are no visualizations to display. This tool allows you to create
+          a wide range of charts, graphs, maps, and other graphics.
+        </p>
+        <p>
+          The visualizations you create can be easily shared with your peers.
+        </p>
+      </>
+    ),
+    actions: (
+      <EuiButton color="primary" fill>
+        Create visualization
+      </EuiButton>
+    ),
+    footer: (
+      <>
+        <EuiTitle size="xxs">
+          <span>Want to learn more?</span>
+        </EuiTitle>{' '}
+        <EuiLink href="#" target="_blank">
+          Read the docs
+        </EuiLink>
+      </>
+    ),
+  },
+};

src/components/empty_prompt/empty_prompt.tsx

@@ -32,7 +32,7 @@ export type PaddingSize = (typeof PADDING_SIZES)[number];
 export type EuiEmptyPromptProps = CommonProps &
   Omit<
     _EuiPanelDivlike,
-    'borderRadius' | 'grow' | 'panelRef' | 'paddingSize' | 'title'
+    'borderRadius' | 'grow' | 'panelRef' | 'paddingSize' | 'title' | 'element'
   > & {
     /*
      * Accepts any [EuiIcon.type](#/display/icons)