Merge pull request #57 from dlabaj/unavailable

feat(unavailable): Added the unavailable page.

Author: fhlavac

packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContent.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: Unavailable content
+# 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: ['UnavailableContent']
+---
+
+import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent';
+
+An **unavailable content** component displays a screen to users when they attempt to view a page that is currently unavailable to view.
+
+## Examples
+
+### Basic unavailable content
+
+A basic unavailable content component provides users with instructions, including a link to check a status page for known issues.
+The status page link can be specified using `statusPageUrl`.
+
+```js file="./UnavailableContentExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/Unavailable/UnavailableContentExample.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import UnavailableContent from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <UnavailableContent statusPageUrl="https://www.patternfly.org"/>
+);

packages/module/src/UnavailableContent/UnavailableContent.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';  
+import UnavailableContent from './UnavailableContent';
+
+describe('Unavailable component', () => {
+  it('should render with no link', () => {
+    expect(render(<UnavailableContent />)).toMatchSnapshot();
+  });
+
+  it('should render with a link', () => {
+    expect(render(<UnavailableContent statusPageUrl="https://www.patternfly.org" />)).toMatchSnapshot();
+  });
+  
+});

packages/module/src/UnavailableContent/UnavailableContent.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button, EmptyState, EmptyStateBody, EmptyStateHeader, EmptyStateIcon, EmptyStateVariant } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
+import { createUseStyles } from 'react-jss';
+import clsx from 'clsx';
+
+const useStyles = createUseStyles({
+  emptyStateUnavailable: {
+    color: 'var(--pf-global--danger-color--100)',
+    '& svg': { color: 'var(--pf-global--danger-color--100)' }
+  },
+  emptyStateLinkButton: {
+    padding: '0',
+  }
+});
+
+export interface UnavailableContentProps {
+  /** Page to open when user clicks on status page link */
+  statusPageUrl?: string;
+}
+
+const UnavailableContent: React.FunctionComponent<UnavailableContentProps> = ({ statusPageUrl = '' }: UnavailableContentProps) => {
+  const classes = useStyles();
+  return (
+    <EmptyState variant={EmptyStateVariant.lg} className={clsx(classes.emptyStateUnavailable)}>
+      <EmptyStateHeader title="This page is temporarily unavailable" icon={<EmptyStateIcon icon={ExclamationCircleIcon} />} />
+      <EmptyStateBody>
+        Try refreshing the page. If the problem persists, contact your organization administrator or visit our{' '}
+        <Button component='a' className={clsx(classes.emptyStateLinkButton)} variant='link' href={statusPageUrl} target="_blank" rel="noopener noreferrer">
+          status page
+        </Button>{' '}
+        for known outages.
+      </EmptyStateBody>
+    </EmptyState>
+  );
+};
+
+export default UnavailableContent;