Merge branch 'patternfly:main' into main

Author: wise-king-sullyman

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorState.md

@@ -26,3 +26,11 @@ To provide users with error details, a basic error state should contain an appro
 ```js file="./ErrorStateExample.tsx"
 
 ```
+
+### Custom footer
+
+To override default action button, specify your own using `customFooter`. 
+
+```js file="./ErrorStateFooterExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateExample.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState";
 
-export const BasicExample: React.FunctionComponent = () => <ErrorState errorTitle='A Basic Error' errorDescription='The following is an example of a basic error' />;
+export const BasicExample: React.FunctionComponent = () => <ErrorState errorTitle='Sample error title' errorDescription='Sample error description' />;

packages/module/patternfly-docs/content/extensions/component-groups/examples/ErrorState/ErrorStateFooterExample.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState";
+
+// eslint-disable-next-line no-console
+export const BasicExample: React.FunctionComponent = () => <ErrorState errorTitle='Sample error title' errorDescription='Sample error description' customFooter={<Button variant="secondary" onClick={() => console.log("Custom button clicked")}>
+Custom action
+</Button>}/>;

packages/module/src/ErrorState/ErrorState.test.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import ErrorState from './ErrorState';
 import { render, screen } from '@testing-library/react';
+import { Button } from '@patternfly/react-core';
 
 describe('ErrorState component', () => {
 
   it('should render correctly', () => {
-    render(<ErrorState errorTitle='A Basic Error' errorDescription='The following is an example of a basic error' />);
+    render(<ErrorState errorTitle='A Basic Error' errorDescription='The following is an example of a basic error' customFooter={<Button>Custom button</Button>} />);
 
     expect(screen.getByText('A Basic Error')).toBeVisible();
     expect(screen.getByText('The following is an example of a basic error')).toBeVisible();
-    expect(screen.getByText('Go to home page')).toBeVisible();
+    expect(screen.getByText('Custom button')).toBeVisible();
   });
 
   it('should render correctly with default props', () => {

packages/module/src/ErrorState/ErrorState.tsx

@@ -27,9 +27,11 @@ export interface ErrorStateProps extends Omit<EmptyStateProps, 'children'> {
   errorDescription?: React.ReactNode;
   /** A default description of the error used if no errorDescription is provided. */
   defaultErrorDescription?: React.ReactNode;
+  /** Custom footer content */
+  customFooter?: React.ReactNode;
 }
 
-const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'Something went wrong', errorDescription, defaultErrorDescription, ...props }: ErrorStateProps) => { 
+const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'Something went wrong', errorDescription, defaultErrorDescription, customFooter, ...props }: ErrorStateProps) => { 
   const classes = useStyles();
   return (
     <EmptyState variant={EmptyStateVariant.lg} {...props}>
@@ -40,15 +42,16 @@ const ErrorState: React.FunctionComponent<ErrorStateProps> = ({ errorTitle = 'So
         </Stack>
       </EmptyStateBody>
       <EmptyStateFooter>
-        {document.referrer ? (
-          <Button variant="primary" onClick={() => history.back()}>
+        { customFooter ||
+          (document.referrer ? (
+            <Button variant="primary" onClick={() => history.back()}>
             Return to last page
-          </Button>
-        ) : (
-          <Button variant="primary" component="a" href="." target="_blank" rel="noopener noreferrer">
+            </Button>
+          ) : (
+            <Button variant="primary" component="a" href="." target="_blank" rel="noopener noreferrer">
             Go to home page
-          </Button>
-        )}
+            </Button>
+          ))}
       </EmptyStateFooter>
     </EmptyState>
   );