diff --git a/cypress/component/Maintenance.cy.tsx b/cypress/component/Maintenance.cy.tsx new file mode 100644 index 00000000..5687d2fd --- /dev/null +++ b/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() + 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.'); + }); +}); \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/Maintenance.md new file mode 100644 index 00000000..267455ea --- /dev/null +++ b/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" + +``` \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceCustomExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceCustomExample.tsx new file mode 100644 index 00000000..eb6849df --- /dev/null +++ b/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 = () => ( + +); diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Maintenance/MaintenanceExample.tsx new file mode 100644 index 00000000..58feac59 --- /dev/null +++ b/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 = () => ( + +); diff --git a/packages/module/src/Maintenance/Maintenance.tsx b/packages/module/src/Maintenance/Maintenance.tsx new file mode 100644 index 00000000..b8da2952 --- /dev/null +++ b/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 { + /** 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 = ({ + 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 ( + + + {bodyText ? formattedBodyText : defaultBodyText} + + + {customFooter && ( + + {customFooter}{' '} + + + )} + + + )}; + +export default Maintenance; + + diff --git a/packages/module/src/Maintenance/index.ts b/packages/module/src/Maintenance/index.ts new file mode 100644 index 00000000..1fa1eff5 --- /dev/null +++ b/packages/module/src/Maintenance/index.ts @@ -0,0 +1,2 @@ +export { default } from './Maintenance'; +export * from './Maintenance'; \ No newline at end of file