Add additional Guided tour steps

Author: jeff-phillips-18

packages/react-core/src/demos/Animations/AnimationsCreateDatabaseForm.tsx

@@ -12,12 +12,11 @@ import {
   FormSelectOption,
   HelperText,
   HelperTextItem,
-  List,
-  ListItem,
   TextInput,
   Popover,
   ActionGroup
 } from '../..';
+import { useGuidedTour } from './GuidedTourContext';
 
 interface Props {
   onClose: () => void;
@@ -33,6 +32,7 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
   // Submit state variables
   const [isSuccess, setIsSuccess] = useState(false);
   const [actionCompleted, setActionCompleted] = useState(false);
+  const { renderTourStepElement } = useGuidedTour();
 
   const labelHelpRef = useRef(null);
 
@@ -44,7 +44,6 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
   const [isPasswordValid, setIsPasswordValid] = useState('default');
   const [isEmailValid, setIsEmailValid] = useState('default');
   const [isTimeZoneValid, setIsTimeZoneValid] = useState('default');
-  const [errorMessages, setErrorMessages] = useState([]);
 
   const handleNameChange = (_event: React.FormEvent<HTMLInputElement>, name: string) => {
     setName(name);
@@ -103,68 +102,31 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
 
     setActionCompleted(true);
     setIsSuccess(allFieldsValid);
-    if (allFieldsValid) {
-      setErrorMessages([]);
-      setTimeout(() => {
-        setActionCompleted(false);
-        setIsSuccess(false);
-      }, 5000);
-    } else {
-      const errors: string[] = [];
-      if (!isNameCurrentValid) {
-        errors.push('Database instance name');
-      }
-      if (!isPasswordCurrentValid) {
-        errors.push('Admin password');
-      }
-      if (!isEmailCurrentValid) {
-        errors.push('Admin email');
-      }
-      if (!isTimeZoneCurrentValid) {
-        errors.push('Time zone');
-      }
-      setErrorMessages(errors);
-      setTimeout(() => {
-        setActionCompleted(false);
-        setIsSuccess(false);
-      }, 5000);
-    }
   };
 
-  return (
+  const onReset = () => {
+    setIsNameValid('default');
+    setIsPasswordValid('default');
+    setIsEmailValid('default');
+    setIsTimeZoneValid('default');
+  };
+
+  return renderTourStepElement(
+    'validationErrors',
     <Form isWidthLimited>
-      {actionCompleted &&
-        (isSuccess ? (
-          <FormAlert>
-            <AlertGroup hasAnimations isLiveRegion>
-              <Alert
-                variant="success"
-                title="Successfully created database"
-                isInline
-                timeout={4000}
-                timeoutAnimation={4000}
-              />
-            </AlertGroup>
-          </FormAlert>
-        ) : (
-          <FormAlert>
-            <AlertGroup hasAnimations isLiveRegion>
-              <Alert
-                variant="danger"
-                title="Failed to create database. Please ensure all fields are filled out correctly."
-                isInline
-                timeout={3000}
-                timeoutAnimation={3000}
-              >
-                <List isPlain>
-                  {errorMessages.map((error) => (
-                    <ListItem key={error}>{error}</ListItem>
-                  ))}
-                </List>
-              </Alert>
-            </AlertGroup>
-          </FormAlert>
-        ))}
+      {actionCompleted && isSuccess ? (
+        <FormAlert>
+          <AlertGroup hasAnimations isLiveRegion>
+            <Alert
+              variant="success"
+              title="Successfully created database"
+              isInline
+              timeout={4000}
+              timeoutAnimation={4000}
+            />
+          </AlertGroup>
+        </FormAlert>
+      ) : null}
       <FormGroup
         label="Database instance name"
         labelHelp={
@@ -288,6 +250,9 @@ export const AnimationsCreateDatabaseForm: FunctionComponent<Props> = ({ onClose
         <Button variant="link" onClick={onClose}>
           Cancel
         </Button>
+        <Button className="pf-u-ml-2xl" variant="link" onClick={onReset}>
+          Reset
+        </Button>
       </ActionGroup>
     </Form>
   );

packages/react-core/src/demos/Animations/AnimationsHeaderToolbar.tsx

@@ -26,13 +26,15 @@ interface Props {
   isDrawerExpanded: boolean;
   setIsDrawerExpanded: (newVal: boolean) => void;
   onStartGuidedTour: () => void;
+  onEndGuidedTour: () => void;
 }
 
 export const AnimationsHeaderToolbar: FunctionComponent<Props> = ({
   notifications,
   isDrawerExpanded,
   setIsDrawerExpanded,
-  onStartGuidedTour
+  onStartGuidedTour,
+  onEndGuidedTour
 }) => {
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<boolean>(false);
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
@@ -116,8 +118,8 @@ export const AnimationsHeaderToolbar: FunctionComponent<Props> = ({
                   )}
                 >
                   <DropdownList>
-                    <DropdownItem onClick={() => onStartGuidedTour()} isDisabled={!!tourStep}>
-                      Guided tour
+                    <DropdownItem onClick={() => (tourStep ? onEndGuidedTour() : onStartGuidedTour())}>
+                      {tourStep ? 'End guided tour' : 'Guided tour'}
                     </DropdownItem>
                   </DropdownList>
                 </Dropdown>

packages/react-core/src/demos/Animations/AnimationsTourModal.tsx

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { Button, Content, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '../..';
+import { Button, Content, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '../../index';
 
 interface Props {
   onClose: (startTour?: boolean) => void;
@@ -13,33 +13,19 @@ export const AnimationsTourModal: FunctionComponent<Props> = ({ onClose }) => (
     aria-labelledby="guided-tour-title"
     aria-describedby="guided-tour-description"
   >
-    <ModalHeader title="Welcome to the PatternFly Animations demo" labelId="guided-tour-title" />
+    <ModalHeader title="Explore PatternFly’s new animations" labelId="guided-tour-title" />
     <ModalBody id="guided-tour-description">
       <Content component="p">
-        To see how components like alerts, navigation, and forms can now use motion to provide clear feedback and
-        improve usability, you can explore this demo and interact with various UI elements. We will continue to update
-        this demo as additional animation support is added.
-      </Content>
-      <Content component="p">
-        Get started with a tour to highlight the current state of{' '}
-        <Button
-          variant="link"
-          isInline
-          href="https://github.com/orgs/patternfly/projects/7/views/66"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          our ongoing effort to animate PatternFly components
-        </Button>
-        .
+        Welcome! Many of our components now use motion to engage users, provide clear feedback, and improve usability.
+        Let's explore some of these new animations and see how they work in a real UI
       </Content>
     </ModalBody>
     <ModalFooter>
-      <Button key="skip" variant="secondary" onClick={() => onClose()}>
-        Skip tour
-      </Button>
       <Button key="start" variant="primary" onClick={() => onClose(true)}>
-        Get started
+        Start tour
+      </Button>
+      <Button key="skip" variant="link" onClick={() => onClose()}>
+        Not now
       </Button>
     </ModalFooter>
   </Modal>

packages/react-core/src/demos/Animations/GuidedTourContext.tsx

@@ -76,7 +76,9 @@ export const GuidedTourProvider: React.FC<{ steps: GuidedTourStep[]; children: R
         <Popover
           isVisible
           showClose
+          maxWidth="28rem"
           hideOnOutsideClick={false}
+          position={tourStep.position}
           headerContent={
             <>
               {tourStep.header}