tidy up demo based on feedback

Author: nicolethoen

packages/documentation-site/patternfly-docs/content/foundations-and-styles/styles/motion/Animations/AnimationsHeaderToolbar.tsx

@@ -14,17 +14,13 @@ import {
   ToolbarContent
 } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import { NotificationType } from './types';
-import { useGuidedTour } from './GuidedTourContext';
 
 interface Props {
   notifications: NotificationType[];
   isDrawerExpanded: boolean;
   setIsDrawerExpanded: (newVal: boolean) => void;
-  onStartGuidedTour?: () => void;
-  onEndGuidedTour?: () => void;
   setShowWizardModal: (newVal: boolean) => void;
   showWizardModal: boolean;
 }
@@ -33,15 +29,11 @@ export const AnimationsHeaderToolbar: FunctionComponent<Props> = ({
   notifications,
   isDrawerExpanded,
   setIsDrawerExpanded,
-  onStartGuidedTour,
-  onEndGuidedTour,
   setShowWizardModal,
   showWizardModal
 }) => {
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<boolean>(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const [shouldNotifyNewNotification, setShouldNotifyNewNotification] = useState(false);
-  const { renderTourStepElement, tourStep } = useGuidedTour();
   const previousUnreadCountRef = useRef<number>(notifications.filter((n) => !n.isRead).length);
 
   const unreadNotificationCount = notifications.filter((n) => !n.isRead).length;
@@ -64,94 +56,56 @@ export const AnimationsHeaderToolbar: FunctionComponent<Props> = ({
   return (
     <Toolbar>
       <ToolbarContent>
-        <ToolbarGroup align={{ default: 'alignEnd' }}>
+        <ToolbarGroup align={{ default: 'alignEnd' }} alignItems='center'>
           <ToolbarGroup variant="action-group-plain">
             <ToolbarItem visibility={{ default: 'visible' }} selected={isDrawerExpanded}>
-              {renderTourStepElement(
-                'notificationBadge',
-                <NotificationBadge
-                  id="notification-badge"
-                  variant={unreadNotificationCount === 0 ? 'read' : 'unread'}
-                  onClick={() => setIsDrawerExpanded(!isDrawerExpanded)}
-                  aria-label="Notifications"
-                  isExpanded={isDrawerExpanded}
-                  count={unreadNotificationCount}
-                  shouldNotify={shouldNotifyNewNotification}
-                />
-              )}
+              <NotificationBadge
+                id="notification-badge"
+                variant={unreadNotificationCount === 0 ? 'read' : 'unread'}
+                onClick={() => setIsDrawerExpanded(!isDrawerExpanded)}
+                aria-label="Notifications"
+                isExpanded={isDrawerExpanded}
+                count={unreadNotificationCount}
+                shouldNotify={shouldNotifyNewNotification}
+              />
             </ToolbarItem>
-            <ToolbarGroup variant="action-group-plain">
-              <ToolbarItem>
-                {renderTourStepElement(
-                  'settingsButton',
-                  <Button
-                    id="settings-button"
-                    aria-label="Settings actions"
-                    className="pf-m-settings"
-                    variant={ButtonVariant.plain}
-                    icon={<CogIcon />}
-                  />
-                )}
-              </ToolbarItem>
-              <ToolbarItem>
-                <Dropdown
-                  onSelect={() => setIsActionsMenuOpen(false)}
-                  isOpen={isActionsMenuOpen}
-                  id="help-dropdown"
-                  onOpenChange={setIsActionsMenuOpen}
-                  popperProps={{ position: 'right' }}
-                  toggle={(toggleRef: RefObject<any>) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      id="help-menu-toggle"
-                      aria-label="help actions"
-                      variant="plain"
-                      onClick={() => setIsActionsMenuOpen(!isActionsMenuOpen)}
-                      isExpanded={isActionsMenuOpen}
-                      icon={<QuestionCircleIcon />}
-                    />
-                  )}
-                >
-                  <DropdownList>
-                    <DropdownItem onClick={() => (tourStep ? onEndGuidedTour() : onStartGuidedTour())}>
-                      {tourStep ? 'End guided tour' : 'Guided tour'}
-                    </DropdownItem>
-                  </DropdownList>
-                </Dropdown>
-              </ToolbarItem>
-              <ToolbarItem>
-                <Button variant="control" onClick={() => setShowWizardModal(!showWizardModal)}>Show wizard modal</Button>
-              </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarGroup>
-          <ToolbarGroup>
-            <ToolbarItem
-              visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-            >
-              <Dropdown
-                isOpen={isDropdownOpen}
-                onSelect={() => setIsDropdownOpen(false)}
-                onOpenChange={setIsDropdownOpen}
-                popperProps={{ position: 'right' }}
-                toggle={(toggleRef: RefObject<any>) => (
-                  <MenuToggle
-                    ref={toggleRef}
-                    isExpanded={isDropdownOpen}
-                    onClick={() => setIsDropdownOpen((prev) => !prev)}
-                    icon={<Avatar src={imgAvatar} alt="" size="sm" />}
-                  >
-                    Username
-                  </MenuToggle>
-                )}
-              >
-                <DropdownList>
-                  <DropdownItem key="group 2 profile">My profile</DropdownItem>
-                  <DropdownItem key="group 2 user">User management</DropdownItem>
-                  <DropdownItem key="group 2 logout">Logout</DropdownItem>
-                </DropdownList>
-              </Dropdown>
+            <ToolbarItem>
+              <Button
+                id="settings-button"
+                aria-label="Settings actions"
+                className="pf-m-settings"
+                variant={ButtonVariant.plain}
+                icon={<CogIcon />}
+              />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button variant="control" onClick={() => setShowWizardModal(!showWizardModal)}>Show wizard modal</Button>
             </ToolbarItem>
           </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+            <Dropdown
+              isOpen={isDropdownOpen}
+              onSelect={() => setIsDropdownOpen(false)}
+              onOpenChange={setIsDropdownOpen}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: RefObject<any>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isDropdownOpen}
+                  onClick={() => setIsDropdownOpen((prev) => !prev)}
+                  icon={<Avatar src={imgAvatar} alt="" size="sm" />}
+                >
+                  Username
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <DropdownItem key="group 2 profile">My profile</DropdownItem>
+                <DropdownItem key="group 2 user">User management</DropdownItem>
+                <DropdownItem key="group 2 logout">Logout</DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </ToolbarItem>
         </ToolbarGroup>
       </ToolbarContent>
     </Toolbar>