feat: Add Maintenance component

cypress/component/Maintenance.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Maintenance from '../../packages/module/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 10am to 12am UTC (6am-8am EST). 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 body and footer
+
+To override the default bodyText and footer link, specify your own using `bodyText` and `customFooter`. 
+
+```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 going to be down for maintenance starting now.' customFooter='Please visit' redirectUrl='http://patternfly.com' redirectUrlLinkText='here' utcStartTime='10am' utcEndTime='12am' startTime='6am' endTime='8am' timeZone='EST' />
+);

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 utcStartTime='10am' utcEndTime='12am' startTime='6am' endTime='8am' timeZone='EST' />
+);

packages/module/src/Maintenance/Maintenance.tsx

@@ -0,0 +1,61 @@
+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 for maintenance UTC */
+    utcStartTime?: string;
+    /** end time for maintenance UTC */
+    utcEndTime?: string;
+    /** start time in a specific time zone */
+    startTime?: string;
+    /** end time in a specific time zone */
+    endTime?: string;
+    /** specify time zone */
+    timeZone?: string;
+    /** Information link */
+    redirectUrl?: string;
+    /** Information link title */
+    redirectUrlLinkText?: string;
+    /** Custom footer content */
+    customFooter?: React.ReactNode;
+    /** Custom OUIA ID */
+    ouiaId?: string | number;  }
+
+const Maintenance: React.FunctionComponent<MaintenanceProps> = ({ 
+  titleText = 'Maintenance in progress',
+  utcStartTime,
+  utcEndTime,
+  startTime,
+  endTime,
+  timeZone,
+  defaultBodyText = `We are currently undergoing scheduled maintenance and will be unavailable from ${utcStartTime} to ${utcEndTime} UTC (${startTime}-${endTime} ${timeZone}).`,
+  bodyText,
+  redirectUrl = 'https://status.redhat.com',
+  redirectUrlLinkText = 'status.redhat.com',
+  customFooter = 'For more information please visit',
+  ouiaId = 'Maintenance',
+  ...props 
+}: MaintenanceProps) => (
+  <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 ? bodyText : defaultBodyText}
+    </EmptyStateBody>
+    <EmptyStateFooter data-ouia-component-id={`${ouiaId}-footer`}>
+      { customFooter &&
+            <Button variant='link' component='span' isInline href={redirectUrl} target="_blank" ouiaId={`${ouiaId}-link`}>
+              {customFooter} {redirectUrlLinkText}
+            </Button>
+      }
+    </EmptyStateFooter>
+  </EmptyState>
+);
+
+export default Maintenance;

packages/module/src/Maintenance/index.ts

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