fix redirectUrl and custom example

Author: aferd

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

@@ -28,9 +28,9 @@ To provide users with basic information regarding maintenance. A basic maintenan
 
 ```
 
-### Custom body and footer
+### Custom maintenance
 
-To override the default bodyText and footer link, specify your own using `bodyText` and `customFooter`. 
+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

@@ -2,5 +2,5 @@ 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' />
+  <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='EST' />
 );

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

@@ -2,5 +2,5 @@ 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' />
+  <Maintenance />
 );

packages/module/src/Maintenance/Maintenance.tsx

@@ -10,52 +10,64 @@ export interface MaintenanceProps extends Omit<EmptyStateProps, 'children' | 'ti
     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;
+    redirectLinkUrl?: string;
     /** Information link title */
-    redirectUrlLinkText?: string;
+    redirectLinkText?: string;
     /** Custom footer content */
     customFooter?: React.ReactNode;
     /** Custom OUIA ID */
     ouiaId?: string | number;  }
 
 const Maintenance: React.FunctionComponent<MaintenanceProps> = ({ 
   titleText = 'Maintenance in progress',
-  utcStartTime,
-  utcEndTime,
+  defaultBodyText = 'We are currently undergoing scheduled maintenance. Thank you for understanding.',
   startTime,
   endTime,
-  timeZone,
-  defaultBodyText = `We are currently undergoing scheduled maintenance and will be unavailable from ${utcStartTime} to ${utcEndTime} UTC (${startTime}-${endTime} ${timeZone}).`,
+  timeZone = 'UTC',
   bodyText,
-  redirectUrl = 'https://status.redhat.com',
-  redirectUrlLinkText = 'status.redhat.com',
+  redirectLinkUrl = 'https://status.redhat.com',
+  redirectLinkText = '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}
+}: 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>
-      }
-    </EmptyStateFooter>
-  </EmptyState>
-);
+          </span>
+        )}
+      </EmptyStateFooter>
+    </EmptyState>
+  )};
 
 export default Maintenance;
+
+