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: InvalidObject
+# 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';
+
+
+This component can be used to display when an error occurs. It shows an error and a button that allows you to go back to the homepage. 
+
+
+
+## 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,46 @@
+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 {
+  isBeta?: string
+}
+
+
+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;

packages/module/src/InvalidObject/__snapshots__/InvalidObject.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InvalidObject component should render 1`] = `undefined`;

packages/module/src/InvalidObject/icon-404.tsx

@@ -0,0 +1,224 @@
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+
+const useStyles = createUseStyles({
+  Icon404: {
+    height: '150px',
+  },
+  'cls-1': { fill: '#fff', fillRule: 'evenodd' },
+  'cls-3': { fillRule: 'evenodd' },
+  'cls-2': { opacity: 0.5 },
+  'cls-4': { mask: 'url(#mask)' }
+});
+
+
+const Icon404: React.FunctionComponent = () => {
+  const classes = useStyles();
+  return (
+    // eslint-disable-next-line max-len
+    <svg
+      className={classes.Icon404}
+      id="Icon404"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 131 131"
+    >
+      <defs>
+        <mask id="mask" x="0" y="0" width="131" height="131" maskUnits="userSpaceOnUse">
+          <g transform="translate(-2.89 -3.07)">
+            <g id="mask-2">
+              <polygon id="path-1" className={classes['cls-1']} points="2.89 134.07 133.89 134.07 133.89 3.07 2.89 3.07 2.89 134.07" />
+            </g>
+          </g>
+        </mask>
+      </defs>
+      <title>404path-not-found</title>
+      <g className={classes['cls-2']}>
+        <g id="Group">
+          <g id="Page-1">
+            <path
+              id="Fill-1"
+              className={classes['cls-3']}
+              d="M8,95.56a1.83,1.83,0,0,0-2,1.68c-.21,1.86-.23,3.05-.23,3.1a1.88,1.88,0,0,0,1.79,2h0a1.89,1.89,0,0,0,1.82-1.91s0-1,.2-2.67A1.91,1.91,0,0,0,8,95.56"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-3"
+              className={classes['cls-3']}
+              d="M104.29,104.42a26.42,26.42,0,0,1-4.72,1.89,1.89,1.89,0,0,0-1.25,2.32,1.82,1.82,0,0,0,1.74,1.36,1.73,1.73,0,0,0,.5-.07,29.3,29.3,0,0,0,5.36-2.16,1.89,1.89,0,0,0,.8-2.52,1.78,1.78,0,0,0-2.43-.82"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-5"
+              className={classes['cls-3']}
+              d="M74.84,57.4A1.88,1.88,0,0,0,76.2,58a1.9,1.9,0,0,0,1.21-.44,1.68,1.68,0,0,0,.15-2.45,19.81,19.81,0,0,1-2.85-3.9,1.88,1.88,0,0,0-2.47-.71,1.7,1.7,0,0,0-.75,2.34,23.82,23.82,0,0,0,3.35,4.58"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-7"
+              className={classes['cls-3']}
+              d="M75.44,105.24a1.76,1.76,0,0,0-2.17,1.29,1.84,1.84,0,0,0,1.23,2.26A45.56,45.56,0,0,0,79.84,110a1.23,1.23,0,0,0,.27,0,1.78,1.78,0,0,0,1.74-1.56,1.82,1.82,0,0,0-1.47-2.1,40.81,40.81,0,0,1-4.94-1.09"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-9"
+              className={classes['cls-3']}
+              d="M92.56,107.11a49.67,49.67,0,0,1-5,0h-.07a1.8,1.8,0,0,0-1.73,1.82,1.82,1.82,0,0,0,1.67,2c1,0,2,.07,3.07.07.78,0,1.54,0,2.29-.08a1.83,1.83,0,0,0,1.63-2,1.77,1.77,0,0,0-1.83-1.77"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-11"
+              className={classes['cls-3']}
+              d="M65.38,100.76a1.62,1.62,0,0,0-2.41.32,2,2,0,0,0,.3,2.62,28.62,28.62,0,0,0,4.55,3.19,1.6,1.6,0,0,0,.78.21,1.69,1.69,0,0,0,1.52-1,2,2,0,0,0-.73-2.52,26,26,0,0,1-4-2.81"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-13"
+              className={classes['cls-3']}
+              d="M109.71,70.18a2,2,0,0,0,1.1.32,2,2,0,0,0,1.53-.69,1.57,1.57,0,0,0-.42-2.35,26.14,26.14,0,0,0-5.3-2.61,2,2,0,0,0-2.45.91,1.63,1.63,0,0,0,1,2.19,23.39,23.39,0,0,1,4.51,2.23"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-15"
+              className={classes['cls-3']}
+              d="M70.28,38.72a1.74,1.74,0,0,0-1.85,1.63c0,.46,0,.93,0,1.39A23,23,0,0,0,68.78,46a1.74,1.74,0,1,0,3.43-.63,18.84,18.84,0,0,1-.32-3.58c0-.39,0-.79,0-1.18a1.73,1.73,0,0,0-1.64-1.84"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-17"
+              className={classes['cls-3']}
+              d="M76.35,27.53a2.08,2.08,0,0,0-2.68.25,20.42,20.42,0,0,0-3.2,4.71,1.64,1.64,0,0,0,1,2.23,2,2,0,0,0,.75.14,1.93,1.93,0,0,0,1.75-1,16.54,16.54,0,0,1,2.67-3.93,1.57,1.57,0,0,0-.29-2.38"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-19"
+              className={classes['cls-3']}
+              d="M98.18,66.63l.26,0a1.74,1.74,0,0,0,.24-3.47,40.77,40.77,0,0,0-5.42-.39h0a1.74,1.74,0,0,0,0,3.48,37,37,0,0,1,4.94.36"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-21"
+              className={classes['cls-3']}
+              d="M79.88,26.19a1.92,1.92,0,0,0,1-.26,25.06,25.06,0,0,1,4.62-2.13,1.71,1.71,0,0,0,1.09-2.24,1.87,1.87,0,0,0-2.37-1A30.71,30.71,0,0,0,78.89,23a1.7,1.7,0,0,0-.59,2.41,1.9,1.9,0,0,0,1.58.82"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-23"
+              className={classes['cls-3']}
+              d="M86.28,65.61a1.79,1.79,0,0,0,.51.07,1.84,1.84,0,0,0,1.76-1.32,1.83,1.83,0,0,0-1.26-2.26,21.06,21.06,0,0,1-4.6-2,1.83,1.83,0,1,0-1.82,3.17,24.64,24.64,0,0,0,5.41,2.29"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-25"
+              className={classes['cls-3']}
+              d="M47.85,80.53A1.7,1.7,0,0,0,47.61,83a41.72,41.72,0,0,1,3,4.06,1.84,1.84,0,0,0,2.49.52,1.71,1.71,0,0,0,.55-2.4,44.19,44.19,0,0,0-3.27-4.4,1.85,1.85,0,0,0-2.54-.23"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-27"
+              className={classes['cls-3']}
+              d="M12.51,84.2A1.84,1.84,0,0,0,10,85a33.19,33.19,0,0,0-2.24,5.32A1.83,1.83,0,0,0,9,92.57a1.77,1.77,0,0,0,.56.08,1.83,1.83,0,0,0,1.74-1.26,29.21,29.21,0,0,1,2-4.72,1.81,1.81,0,0,0-.76-2.47"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-29"
+              className={classes['cls-3']}
+              d="M54.77,91a1.7,1.7,0,0,0-.54,2.4,50.54,50.54,0,0,0,3.24,4.38,1.85,1.85,0,0,0,1.41.64A1.81,1.81,0,0,0,60,98.05a1.69,1.69,0,0,0,.27-2.45,47.21,47.21,0,0,1-3-4.08A1.84,1.84,0,0,0,54.77,91"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-31"
+              className={classes['cls-3']}
+              d="M112.48,97.29a22.47,22.47,0,0,1-3.09,3.78,1.89,1.89,0,0,0-.09,2.56,1.64,1.64,0,0,0,1.25.58,1.67,1.67,0,0,0,1.16-.48,25.42,25.42,0,0,0,3.57-4.38,1.87,1.87,0,0,0-.43-2.52,1.64,1.64,0,0,0-2.37.46"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-33"
+              className={classes['cls-3']}
+              d="M118.61,84a1.84,1.84,0,0,0-2,1.65,18.6,18.6,0,0,1-.93,4.74,1.74,1.74,0,0,0,1.26,2.2,2.15,2.15,0,0,0,.56.07,1.88,1.88,0,0,0,1.82-1.24,21.56,21.56,0,0,0,1.09-5.57A1.81,1.81,0,0,0,118.61,84"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-35"
+              className={classes['cls-3']}
+              d="M117.66,81.1a1.88,1.88,0,0,0,.52-.08,1.85,1.85,0,0,0,1.18-2.3,21.55,21.55,0,0,0-2.43-5.45,1.73,1.73,0,0,0-2.46-.54,1.88,1.88,0,0,0-.52,2.55,17.79,17.79,0,0,1,2,4.51,1.8,1.8,0,0,0,1.7,1.31"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-37"
+              className={classes['cls-3']}
+              d="M39,73.46a1.84,1.84,0,0,0-2.27,1.24A1.81,1.81,0,0,0,37.93,77a18,18,0,0,1,4.54,2,1.89,1.89,0,0,0,1,.27A1.85,1.85,0,0,0,45,78.3a1.8,1.8,0,0,0-.61-2.5A22.68,22.68,0,0,0,39,73.46"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-39"
+              className={classes['cls-3']}
+              d="M18.61,75.53A20.68,20.68,0,0,0,14,79a1.81,1.81,0,0,0,0,2.53,1.7,1.7,0,0,0,1.26.55,1.72,1.72,0,0,0,1.22-.51,17,17,0,0,1,3.81-2.86A1.82,1.82,0,0,0,21,76.26a1.73,1.73,0,0,0-2.37-.73"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-41"
+              className={classes['cls-3']}
+              d="M26.51,72.76a1.77,1.77,0,0,0,.27,3.52l.28,0A26,26,0,0,1,31.92,76a1.84,1.84,0,0,0,1.79-1.72A1.76,1.76,0,0,0,32,72.44a30.51,30.51,0,0,0-5.51.32"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-43"
+              className={classes['cls-3']}
+              d="M92.47,22.34l.27,0q1.33-.16,2.76-.27a1.83,1.83,0,0,0,1.78-1.92,1.87,1.87,0,0,0-2.07-1.64c-1,.07-2,.17-3,.29a1.83,1.83,0,0,0-1.65,2,1.89,1.89,0,0,0,1.91,1.54"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path
+              id="Fill-45"
+              className={classes['cls-3']}
+              d="M133,66.72H118.94V44.44h9.27a.89.89,0,1,0,0-1.78h-9.27V36.71a.9.9,0,0,0-1.8,0v5.95H94.41V37.38a.9.9,0,0,0-1.79,0v5.28H77a.89.89,0,0,0,0,1.78H92.62v13a.9.9,0,1,0,1.79,0v-13h22.73V67.68a.89.89,0,0,0,.9.89.86.86,0,0,0,.36-.07H133a.89.89,0,1,0,0-1.78"
+              transform="translate(-2.89 -3.07)"
+            />
+            <path id="Fill-47" className="cls-3" d="M128.16,92.65h-4.92a1,1,0,0,0,0,1.93h4.92a1,1,0,0,0,0-1.93" transform="translate(-2.89 -3.07)" />
+            <path
+              id="Fill-49"
+              className={classes['cls-3']}
+              d="M109.87,116.68H93.2v-1.27a.9.9,0,1,0-1.8,0v1.27H69.05v-5.55a.9.9,0,1,0-1.8,0v5.55H44.82V93.89h4.27a.9.9,0,0,0,0-1.8H44.82V83.92a.9.9,0,1,0-1.79,0v8.17H20.3V84.37a.9.9,0,1,0-1.8,0v7.72H13.42a.9.9,0,1,0,0,1.8H18.5v17.39a.9.9,0,0,0,1.8,0V93.89H43v22.79H26.28a.9.9,0,1,0,0,1.8H43v9.9a.9.9,0,1,0,1.79,0v-9.9H67.25v14.69a.9.9,0,1,0,1.8,0V118.48H91.4v10.2a.9.9,0,1,0,1.8,0v-10.2h16.67a.9.9,0,0,0,0-1.8"
+              transform="translate(-2.89 -3.07)"
+            />
+            <g className={classes['cls-4']}>
+              <path
+                id="Fill-51"
+                className={classes['cls-3']}
+                d="M20.55,67.5H43.31V45H20.55Zm-1.79,3a.9.9,0,1,0,1.79,0V69.3H43.31v2.1a.9.9,0,0,0,1.8,0V69.3H67.56V92.38H63.3a.9.9,0,1,0,0,1.79h4.26v3.3a.9.9,0,1,0,1.8,0v-3.3h23v9.14a.9.9,0,0,0,1.8,0V94.17H111.8a.9.9,0,1,0,0-1.79H94.21V71a.9.9,0,0,0-1.8,0V92.38h-23V69.3h12.8a.9.9,0,0,0,0-1.8H69.36v-10a.9.9,0,0,0-1.8,0v10H45.11V45h18a.9.9,0,1,0,0-1.8h-18V20.46H67.56V26a.9.9,0,1,0,1.8,0V20.46h6.06a.9.9,0,1,0,0-1.8H69.36V4a.9.9,0,0,0-1.8,0V18.66H45.11v-10a.9.9,0,1,0-1.8,0v10H26.24a.9.9,0,0,0,0,1.8H43.31V43.23H20.55V26.6a.9.9,0,1,0-1.79,0V43.23H8.88a.9.9,0,0,0,0,1.8h9.88V67.5h-15a.9.9,0,1,0,0,1.8h15Z"
+                transform="translate(-2.89 -3.07)"
+              />
+            </g>
+            <g className={classes['cls-4']}>
+              <path
+                id="Fill-53"
+                className={classes['cls-3']}
+                d="M117.51,104.21a.94.94,0,0,0-1,.92V111a1,1,0,0,0,1.93,0v-5.87a1,1,0,0,0-1-.92"
+                transform="translate(-2.89 -3.07)"
+              />
+            </g>
+            <g className={classes['cls-4']}>
+              <path
+                id="Fill-54"
+                className={classes['cls-3']}
+                d="M106.16,7.75a13.31,13.31,0,0,1,3.35-.41,6.07,6.07,0,0,1,4.09,1.23A4.42,4.42,0,0,1,115,12.09a5.92,5.92,0,0,1-.77,3.12,20.1,20.1,0,0,1-3.72,3.86,11.51,11.51,0,0,0-2.92,3.55,10.22,10.22,0,0,0-.78,4.29v1.21h2.8v-.74a7,7,0,0,1,.71-3.39,13.86,13.86,0,0,1,2.9-3.19,30,30,0,0,0,3.56-3.55,8.29,8.29,0,0,0,1.25-2.34,8.66,8.66,0,0,0,.43-2.87,7.61,7.61,0,0,0-2.3-5.91A9.3,9.3,0,0,0,109.72,4a17.8,17.8,0,0,0-8.58,2.21l1.28,3a17.6,17.6,0,0,1,3.74-1.51"
+                transform="translate(-2.89 -3.07)"
+              />
+            </g>
+            <g className={classes['cls-4']}>
+              <path
+                id="Fill-55"
+                className={classes['cls-3']}
+                d="M108.35,31c-1.59,0-2.39,1-2.39,2.9a3,3,0,0,0,.67,2.2,2.36,2.36,0,0,0,1.72.68,2.21,2.21,0,0,0,1.78-.76,3.16,3.16,0,0,0,.64-2.12,3.27,3.27,0,0,0-.63-2.16,2.22,2.22,0,0,0-1.79-.74"
+                transform="translate(-2.89 -3.07)"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  )
+};
+
+export default Icon404;

packages/module/src/InvalidObject/index.ts

@@ -0,0 +1,3 @@
+export { default } from './InvalidObject';
+export { default as InvalidObject } from './InvalidObject';
+export { default as Icon404 } from './icon-404';

packages/module/src/index.ts

@@ -24,6 +24,9 @@ export * from './ErrorState';
 export { default as HorizontalNav } from './HorizontalNav';
 export * from './HorizontalNav';
 
+export { default as InvalidObject } from './InvalidObject';
+export * from './InvalidObject';
+
 export { default as LongTextTooltip } from './LongTextTooltip';
 export * from './LongTextTooltip';