[Fix] fix broken story in Prompt Custom Actions (#149992)

elastic · Feb 6, 2023 · 212d57c · 212d57c
1 parent daf1304
commit 212d57c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 9 deletions.
diff --git a/packages/shared-ux/prompt/not_found/README.mdx b/packages/shared-ux/prompt/not_found/README.mdx
@@ -10,3 +10,27 @@ date: 2022-02-09
 Sometimes the user tries to go to a page that doesn't exist, because the URL is broken or because they try to load a resource that does not exist. For those cases we want to show a standard 404 error.
 
 The default call to action is a "Go back" button that simulates the browser's "Back" behaviour. Consumers can specify their own CTA's with the `actions` prop.
+
+The NotFoundPrompt component also has the prop `actions` that takes in an array of components. 
+For example: 
+
+```jsx
+    <EuiPageTemplate>
+      <EuiPageTemplate.Section alignment="center">
+        <NotFoundPrompt
+          actions={
+            [
+              <EuiButton fill color="primary" onClick={onClickHandler}>
+                Go home
+              </EuiButton>,
+              <EuiButton iconType="search">
+                Go to discover
+              </EuiButton>
+            ]
+          }
+          title="Customizable Title"
+          body="Customizable Body"
+        />
+      </EuiPageTemplate.Section>
+    </EuiPageTemplate>
+```
diff --git a/packages/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx b/packages/shared-ux/prompt/not_found/src/not_found_prompt.stories.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { EuiButton, EuiButtonEmpty, EuiPageTemplate } from '@elastic/eui';
+import { EuiButton, EuiPageTemplate } from '@elastic/eui';
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import mdx from '../README.mdx';
@@ -51,14 +51,18 @@ export const CustomActions: Story = (args) => {
     <EuiPageTemplate>
       <EuiPageTemplate.Section alignment="center">
         <NotFoundPrompt
-          actions={[
-            <EuiButton fill color="primary" onClick={args.onClick}>
-              Go home
-            </EuiButton>,
-            <EuiButtonEmpty iconType="search" onClick={args.onClick}>
-              Go to discover
-            </EuiButtonEmpty>,
-          ]}
+          actions={
+            <>
+              <EuiButton fill color="primary" onClick={args.onClick}>
+                Go home
+              </EuiButton>
+              <EuiButton iconType="search" onClick={args.onClick}>
+                Go to discover
+              </EuiButton>
+            </>
+          }
+          title="Customizable Title"
+          body="Customizable Body"
         />
       </EuiPageTemplate.Section>
     </EuiPageTemplate>

diff --git a/packages/shared-ux/prompt/not_found/src/not_found_prompt.test.tsx b/packages/shared-ux/prompt/not_found/src/not_found_prompt.test.tsx
@@ -36,4 +36,11 @@ describe('<NotFoundPrompt />', () => {
     const component = render(<NotFoundPrompt actions={actions} />);
     expect(component.text()).toContain('I am a button');
   });
+
+  it('Renders custom actions with an array with multiple buttons', () => {
+    const actions = [<button>I am a button</button>, <button>I am a second button</button>];
+    const component = render(<NotFoundPrompt actions={actions} />);
+    expect(component.text()).toContain('I am a button');
+    expect(component.text()).toContain('I am a second button');
+  });
 });