diff --git a/packages/shared-ux/prompt/not_found/README.mdx b/packages/shared-ux/prompt/not_found/README.mdx index dc784f86b38549..3db21640d5760d 100644 --- 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 + + + + Go home + , + + Go to discover + + ] + } + title="Customizable Title" + body="Customizable Body" + /> + + +``` \ No newline at end of file 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 index 4cc103140929eb..f5dccc68d9c970 100644 --- 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) => { - Go home - , - - Go to discover - , - ]} + actions={ + <> + + Go home + + + Go to discover + + + } + title="Customizable Title" + body="Customizable Body" /> 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 index 48f0d82520f30d..da836d48f92661 100644 --- 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('', () => { const component = render(); expect(component.text()).toContain('I am a button'); }); + + it('Renders custom actions with an array with multiple buttons', () => { + const actions = [, ]; + const component = render(); + expect(component.text()).toContain('I am a button'); + expect(component.text()).toContain('I am a second button'); + }); });