feat: add customSvg prop to FullPageError

Signed-off-by: Stefan Cooper <[email protected]>

packages/ibm-products/src/components/FullPageError/FullPageError.test.js

@@ -10,6 +10,7 @@ import { render, screen } from '@testing-library/react'; // https://testing-libr
 
 import { pkg } from '../../settings';
 import uuidv4 from '../../global/js/utils/uuidv4';
+import { Error403SVG } from './assets/Error403SVG';
 
 import { FullPageError } from '.';
 
@@ -88,13 +89,30 @@ describe(componentName, () => {
     render(<FullPageError {...defaultProps} />);
     expect(screen.getByText(title)).toBeInTheDocument();
   });
-  it('renders custom svg illustration if kind is custom', async () => {
+  it('renders generic svg illustration if kind is custom', async () => {
     const { container } = render(
       <FullPageError {...defaultProps} kind="custom" />
     );
     const svgElement = container.querySelector(`.${blockClass}__svg`);
     expect(svgElement).toHaveClass(`${blockClass}__custom`);
   });
+  it('renders 403 svg illustration if it is passed as customSvg and kind is custom', async () => {
+    const { container } = render(
+      <FullPageError
+        {...defaultProps}
+        kind="custom"
+        customSvg={
+          <Error403SVG
+            className={`${blockClass}__svg ${blockClass}__403`}
+            title={title}
+          />
+        }
+      />
+    );
+
+    const svgElement = container.querySelector(`.${blockClass}__svg`);
+    expect(svgElement).toHaveClass(`${blockClass}__403`);
+  });
   it('renders 404 svg illustration if kind is 404', async () => {
     const { container } = render(
       <FullPageError {...defaultProps} kind="404" />

packages/ibm-products/src/components/FullPageError/FullPageError.tsx

@@ -52,6 +52,11 @@ export interface FullPageErrorProps {
    * This will be for the main title of the FullPageError component
    */
   title: string;
+
+  /**
+   * Custom svg that can be used for custom full page errors
+   */
+  customSvg?: JSX.Element;
 }
 
 // Default values for props
@@ -73,6 +78,7 @@ export let FullPageError = React.forwardRef<HTMLDivElement, FullPageErrorProps>(
       label,
       kind = defaults.kind,
       title,
+      customSvg,
 
       // Collect any other property values passed in.
       ...rest
@@ -97,7 +103,9 @@ export let FullPageError = React.forwardRef<HTMLDivElement, FullPageErrorProps>(
         ),
       },
       custom: {
-        svg: (
+        svg: customSvg ? (
+          customSvg
+        ) : (
           <ErrorGenericSVG
             className={`${blockClass}__svg ${blockClass}__custom`}
             title={title}
@@ -155,6 +163,11 @@ FullPageError.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+
+  /**
+   * Custom svg that can be used for custom full page errors
+   */
+  customSvg: PropTypes.element,
   /**
    * String that will provide the description for the error code. <br/>
    * This is optional for 403 and 404 kinds, and passing this would override their default descriptions.