Use an Info toast notification when tour is not started

Author: jeff-phillips-18

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

@@ -2,10 +2,11 @@ import { FunctionComponent } from 'react';
 import { Button, Content, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '../../index';
 
 interface Props {
-  onClose: (startTour?: boolean) => void;
+  onClose: (notNow?: boolean) => void;
+  onStart: () => void;
 }
 
-export const AnimationsStartTourModal: FunctionComponent<Props> = ({ onClose }) => (
+export const AnimationsStartTourModal: FunctionComponent<Props> = ({ onClose, onStart }) => (
   <Modal
     variant={ModalVariant.small}
     isOpen
@@ -24,10 +25,10 @@ export const AnimationsStartTourModal: FunctionComponent<Props> = ({ onClose })
       </Content>
     </ModalBody>
     <ModalFooter>
-      <Button key="start" variant="primary" onClick={() => onClose(true)}>
+      <Button key="start" variant="primary" onClick={() => onStart()}>
         Start tour
       </Button>
-      <Button key="skip" variant="link" onClick={() => onClose()}>
+      <Button key="skip" variant="link" onClick={() => onClose(true)}>
         Not now
       </Button>
     </ModalFooter>

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

@@ -301,7 +301,7 @@ const AnimationsPage: FunctionComponent = () => {
   ];
 
   // A function to create a kebab toggle for a specific row index
-  const kebabToggle = (index) => (toggleRef: React.Ref<any>) => (
+  const kebabToggle = (index: number) => (toggleRef: React.Ref<any>) => (
     <MenuToggle
       ref={toggleRef}
       variant="plain"
@@ -542,18 +542,6 @@ const AnimationsPage: FunctionComponent = () => {
     []
   );
 
-  const startNotifications = () => {
-    setTimeout(() => {
-      addNotification();
-    }, 1000);
-    setTimeout(() => {
-      addNotification();
-    }, 5000);
-    setTimeout(() => {
-      addNotification();
-    }, 9000);
-  };
-
   const onNavSelect = (
     _event: FormEvent<HTMLInputElement>,
     selectedItem: {
@@ -563,7 +551,6 @@ const AnimationsPage: FunctionComponent = () => {
     }
   ) => {
     setActiveItem(selectedItem.itemId);
-    setActiveGroup(selectedItem.groupId as string | null);
   };
 
   const focusDrawer = (_event: any) => {
@@ -577,9 +564,23 @@ const AnimationsPage: FunctionComponent = () => {
     firstTabbableItem?.focus();
   };
 
-  const closeStartTourModal = (startTour = false) => {
+  const closeStartTourModal = (notNow = false) => {
     setShowStartTourModal(false);
-    startTour ? onStart() : startNotifications();
+    if (notNow) {
+      setNotifications((prev) => [
+        {
+          id: `new-notification-${prev.length + 1}`,
+          title: 'Explore animations',
+          message: 'When you’re ready to take a tour of PatternFly’s exciting, new animations, refresh this page.',
+          variant: AlertVariant.info,
+          timeout: 8000,
+          timeoutAnimation: 8000,
+          isNew: true,
+          isRead: false
+        },
+        ...prev
+      ]);
+    }
   };
 
   return (
@@ -741,7 +742,15 @@ const AnimationsPage: FunctionComponent = () => {
           )}
         </PageSection>
       )}
-      {showStartTourModal ? <AnimationsStartTourModal onClose={closeStartTourModal} /> : null}
+      {showStartTourModal ? (
+        <AnimationsStartTourModal
+          onClose={closeStartTourModal}
+          onStart={() => {
+            setShowStartTourModal(false);
+            onStart();
+          }}
+        />
+      ) : null}
       {showEndTourModal ? <AnimationsEndTourModal /> : null}
     </Page>
   );