add InvalidObject

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

@@ -0,0 +1,29 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Invalid object
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['InvalidObject']
+---
+
+import InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject';
+
+
+The **invalid object** component can be used to display an error message and "return to homepage" button when an error occurs.
+
+
+
+## Component usage
+
+### Example
+
+```js file="./InvalidObjectExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/InvalidObject/InvalidObjectExample.tsx

@@ -0,0 +1,10 @@
+import InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject';
+import React from 'react';
+
+const InvalidObjectExample: React.FunctionComponent = () => (
+  <>
+    <InvalidObject />
+  </>
+);
+
+export default InvalidObjectExample;

packages/module/src/InvalidObject/InvalidObject.test.tsx

@@ -0,0 +1,9 @@
+import InvalidObject from './InvalidObject';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+describe('InvalidObject component', () => {
+  test('should render', () => {
+    expect(render(<InvalidObject />)).toMatchSnapshot();
+  });
+});

packages/module/src/InvalidObject/InvalidObject.tsx

@@ -0,0 +1,47 @@
+import { Button, Title } from '@patternfly/react-core';
+
+import Icon404 from './icon-404';
+import React from 'react';
+import classNames from 'classnames';
+import { createUseStyles } from 'react-jss'
+
+const useStyles = createUseStyles({
+  "invalidObject": {
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: "column",
+    alignItems: "center",
+    textAlign: "center",
+    h1: { marginBottom: "30px" },
+    svg: { marginBottom: "30px" },
+    button: { fontSize: "20px" }
+  },
+  "invalidObjectSorryText": { maxWidth: "70%" },
+})
+
+export interface InvalidObjectProps {
+  /** Indicates if an additional "/beta" string should be added to when navigating back to the home screen. */
+  isBeta?: boolean
+}
+
+
+const InvalidObject: React.FunctionComponent<InvalidObjectProps> = ({ isBeta }) => {
+  const classes = useStyles();
+  const invalidObjectClasses = classNames("pf-v5-l-page__main-section", "pf-v5-c-page__main-section", classes.invalidObject)
+  return (
+    <section className={invalidObjectClasses}>
+      <Title headingLevel="h1" size="3xl">
+        We lost that page
+      </Title>
+      <Icon404 />
+      <Title headingLevel="h1" size="xl" className={classes.invalidObjectSorryText}>
+        Let&apos;s find you a new one. Try a new search or return home.
+      </Title>
+      <Button variant="link" component="a" href={`${window.location.origin}${isBeta ? '/beta' : ''}`}>
+        Return to homepage
+      </Button>
+    </section>
+  );
+};
+
+export default InvalidObject;