diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md index e6be576d..f0055f0c 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPage.md @@ -28,3 +28,11 @@ A basic missing page component informs users that an error has occurred. It also ```js file="./MissingPageExample.tsx" ``` + +### Custom footer + +To override the default homepage link, specify your own footer actions using `customFooter`. This is useful when you need multiple action buttons, such as both "Go to home page" and "Return to previous page". + +```js file="./MissingPageFooterExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageFooterExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageFooterExample.tsx new file mode 100644 index 00000000..23ad7bdd --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MissingPage/MissingPageFooterExample.tsx @@ -0,0 +1,18 @@ +import { FunctionComponent } from 'react'; +import { Button } from '@patternfly/react-core'; +import MissingPage from '@patternfly/react-component-groups/dist/dynamic/MissingPage'; + +export const MissingPageFooterExample: FunctionComponent = () => ( + + + + + } + /> +); diff --git a/packages/module/src/MissingPage/MissingPage.test.tsx b/packages/module/src/MissingPage/MissingPage.test.tsx index 3ca41c0a..288dc117 100644 --- a/packages/module/src/MissingPage/MissingPage.test.tsx +++ b/packages/module/src/MissingPage/MissingPage.test.tsx @@ -1,8 +1,40 @@ import MissingPage from './MissingPage'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; +import { Button } from '@patternfly/react-core'; describe('MissingPage component', () => { test('should render', () => { expect(render()).toMatchSnapshot(); }); -}); \ No newline at end of file + + it('should render custom footer instead of default link', () => { + render( + + + + + } + /> + ); + + expect(screen.getByText('Go home')).toBeVisible(); + expect(screen.getByText('Go back')).toBeVisible(); + expect(screen.queryByText('Return to homepage')).not.toBeInTheDocument(); + }); + + it('should render default link when customFooter is not provided', () => { + render(); + + expect(screen.getByText('We lost that page')).toBeVisible(); + expect(screen.getByText('Return to homepage')).toBeVisible(); + }); + + it('should spread empty state props', () => { + render(); + + expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument(); + expect(screen.getByTestId('test')).toHaveClass('pf-m-xs'); + }); +}); diff --git a/packages/module/src/MissingPage/MissingPage.tsx b/packages/module/src/MissingPage/MissingPage.tsx index c8f75949..37ea7f5d 100644 --- a/packages/module/src/MissingPage/MissingPage.tsx +++ b/packages/module/src/MissingPage/MissingPage.tsx @@ -12,6 +12,8 @@ export interface MissingPageProps extends Omit = ({ toHomePageText = 'Return to homepage', titleText = 'We lost that page', bodyText = "Let's find you a new one. Try a new search or return home.", + customFooter, ouiaId = "MissingPage", headingLevel = 'h1', ...props @@ -28,9 +31,11 @@ export const MissingPage: FunctionComponent = ({ {bodyText} - + {customFooter || ( + + )} );