feat: Add Maintenance component (#410)

* RHCLOUD-33366 Add Maintenance component plus tests and examples

* text fix

* remove snapshots

* add custom footer and body text

* fix redirectUrl and custom example

* adjust cypress test

* Update packages/module/src/Maintenance/Maintenance.tsx

* feat(Maintenance): Update cypress/component/Maintenance.cy.tsx

---------

Co-authored-by: Filip Hlavac <[email protected]>

Author: aferd

cypress/component/Maintenance.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance';
+
+describe('Maintenance', () => {
+  it('renders Maintenance', () => {
+    cy.mount(<Maintenance />)
+    cy.get('[data-ouia-component-id="Maintenance"]').should('exist');
+    cy.get('[data-ouia-component-id="Maintenance"]').contains('Maintenance in progress');
+    cy.get('[data-ouia-component-id="Maintenance-body"]').contains('We are currently undergoing scheduled maintenance and will be unavailable from 6am to 8am UTC. For more information please visit status.redhat.com.');
+  });
+});

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

@@ -0,0 +1,37 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: Component groups
+subsection: Error communication
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Maintenance
+# 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: ['Maintenance']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md
+---
+
+import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance';
+
+A **maintenance** component displays a screen to users when they are undergoing scheduled maintenance.
+
+## Examples
+
+### Basic maintenance
+
+To provide users with basic information regarding maintenance. A basic maintenance state should contain an appropriate and informative `titleText`. `defaultBodyText` will be used by default. 
+
+```js file="./MaintenanceExample.tsx"
+
+```
+
+### Custom maintenance
+
+To override the default bodyText and footer link, specify your own using `bodyText` and `customFooter`. You may add a `startTime`, `endTime` and `timeZone` that will be displayed as shown below. `timeZone` will be set to UTC by default.
+
+```js file="./MaintenanceCustomExample.tsx"
+
+```

packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceCustomExample.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Maintenance from '@patternfly/react-component-groups/dist/dynamic/Maintenance'
+
+export const BasicExample: React.FunctionComponent = () => (
+  <Maintenance bodyText='We are currently undergoing scheduled maintenance and will be unavailable from' customFooter='Please visit' redirectLinkUrl='http://patternfly.com' redirectLinkText='here.' startTime='6am' endTime='8am' timeZone='UTC' />
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceExample.tsx

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

packages/module/src/Maintenance/Maintenance.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateProps, EmptyStateStatus, EmptyStateVariant } from '@patternfly/react-core';
+import { HourglassHalfIcon } from '@patternfly/react-icons';
+
+/** extends EmptyStateProps */
+export interface MaintenanceProps extends Omit<EmptyStateProps, 'children' | 'title'> {
+    /** The title for the maintenance message */
+    titleText?: string;
+    /** Custom body text */
+    bodyText?: React.ReactNode;
+    /** A default bodyText used if no bodyText is provided */
+    defaultBodyText?: React.ReactNode;
+    /** Start time in a specific time zone */
+    startTime?: string;
+    /** End time in a specific time zone */
+    endTime?: string;
+    /** Time zone specification */
+    timeZone?: string;
+    /** Information link */
+    redirectLinkUrl?: string;
+    /** Information link title */
+    redirectLinkText?: string;
+    /** Custom footer content */
+    customFooter?: React.ReactNode;
+    /** Custom OUIA ID */
+    ouiaId?: string | number;  }
+
+const Maintenance: React.FunctionComponent<MaintenanceProps> = ({ 
+  titleText = 'Maintenance in progress',
+  defaultBodyText = 'We are currently undergoing scheduled maintenance. Thank you for understanding.',
+  startTime,
+  endTime,
+  timeZone = 'UTC',
+  bodyText,
+  redirectLinkUrl = 'https://status.redhat.com',
+  redirectLinkText = 'status.redhat.com.',
+  customFooter = 'For more information please visit',
+  ouiaId = 'Maintenance',
+  ...props 
+}: MaintenanceProps) => {
+  let formattedBodyText = bodyText;
+  if (startTime && endTime && timeZone) {
+    formattedBodyText += ` ${startTime} to ${endTime} ${timeZone}.`;
+  }
+
+  return (
+    <EmptyState headingLevel="h5" status={EmptyStateStatus.danger} icon={HourglassHalfIcon}  titleText={titleText} variant={EmptyStateVariant.lg} data-ouia-component-id={ouiaId} {...props}>
+      <EmptyStateBody data-ouia-component-id={`${ouiaId}-body`}>
+        {bodyText ? formattedBodyText : defaultBodyText}
+      </EmptyStateBody>
+      <EmptyStateFooter data-ouia-component-id={`${ouiaId}-footer`}>
+        {customFooter && (
+          <span>
+            {customFooter}{' '}
+            <Button 
+              variant="link" 
+              component="span" 
+              isInline 
+              href={redirectLinkUrl} 
+              target="_blank" 
+              ouiaId={`${ouiaId}-link`}
+            >
+              {redirectLinkText}
+            </Button>
+          </span>
+        )}
+      </EmptyStateFooter>
+    </EmptyState>
+  )};
+
+export default Maintenance;
+
+

packages/module/src/Maintenance/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Maintenance';
+export * from './Maintenance';