POC(themes):Expand micro animations demo for theme testing

Author: wise-king-sullyman

packages/documentation-framework/versions.json

@@ -12,7 +12,7 @@
         "@patternfly/react-component-groups": "6.4.0-prerelease.12",
         "@patternfly/react-core": "6.5.0-prerelease.24",
         "@patternfly/react-drag-drop": "6.5.0-prerelease.24",
-        "@patternfly/react-icons": "6.5.0-prerelease.11",
+        "@patternfly/react-icons": "6.5.0-prerelease.12",
         "@patternfly/react-log-viewer": "6.3.0",
         "@patternfly/react-styles": "6.5.0-prerelease.9",
         "@patternfly/react-table": "6.5.0-prerelease.24",

packages/documentation-site/package.json

@@ -28,7 +28,7 @@
     "@patternfly/react-console": "6.1.0",
     "@patternfly/react-data-view": "6.4.0-prerelease.8",
     "@patternfly/react-docs": "7.5.0-prerelease.26",
-    "@patternfly/react-icons": "6.5.0-prerelease.11",
+    "@patternfly/react-icons": "6.5.0-prerelease.12",
     "@patternfly/react-log-viewer": "6.3.0",
     "@patternfly/react-topology": "6.5.0-prerelease.3",
     "@patternfly/react-user-feedback": "6.2.0",

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

@@ -6,18 +6,12 @@ source: demo
 
 import { Fragment, useRef, useState, useEffect, useCallback } from 'react';
 
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import PowerOffIcon from '@patternfly/react-icons/dist/esm/icons/power-off-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import MultiContentCard from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
-import { ArrowRightIcon, LockIcon, PortIcon, CubeIcon, AutomationIcon, ExclamationCircleIcon, CheckCircleIcon, ExclamationTriangleIcon, HamburgerIcon, TimesIcon} from '@patternfly/react-icons';
 import UnpluggedIcon from '@patternfly/react-icons/dist/esm/icons/unplugged-icon';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 import {applicationsData} from './examples/ResourceTableData.jsx';
@@ -35,11 +29,23 @@ import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternf
 import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
 import openshiftLogo from './Summit-collage-deploying-openshift-product-icon-RH.png'
 import emptyStateLogo from './Summit-collage-hybrid-cloud-dark-RH.png'
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
+import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resources-full-icon';
+import PortIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-port-icon';
+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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-icon';
 
 
+import './examples/glass.css';
+
 ## Demo
 Our components can now use motion to provide clear visual feedback to users, improving engagement and usability. To see our new animations in motion, take this interactive tour, which guides you through a UI that includes animated alerts, icons, expansion, and more.
 

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

@@ -13,8 +13,8 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+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';
@@ -23,16 +23,20 @@ interface Props {
   notifications: NotificationType[];
   isDrawerExpanded: boolean;
   setIsDrawerExpanded: (newVal: boolean) => void;
-  onStartGuidedTour: () => void;
-  onEndGuidedTour: () => void;
+  onStartGuidedTour?: () => void;
+  onEndGuidedTour?: () => void;
+  setShowWizardModal: (newVal: boolean) => void;
+  showWizardModal: boolean;
 }
 
 export const AnimationsHeaderToolbar: FunctionComponent<Props> = ({
   notifications,
   isDrawerExpanded,
   setIsDrawerExpanded,
   onStartGuidedTour,
-  onEndGuidedTour
+  onEndGuidedTour,
+  setShowWizardModal,
+  showWizardModal
 }) => {
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<boolean>(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -115,6 +119,9 @@ export const AnimationsHeaderToolbar: FunctionComponent<Props> = ({
                   </DropdownList>
                 </Dropdown>
               </ToolbarItem>
+              <ToolbarItem>
+                <Button variant="control" onClick={() => setShowWizardModal(!showWizardModal)}>Show wizard modal</Button>
+              </ToolbarItem>
             </ToolbarGroup>
           </ToolbarGroup>
           <ToolbarGroup>

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

@@ -19,8 +19,8 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-search-icon';
 import { NotificationType } from './types';
 
 interface ItemProps {

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

@@ -18,8 +18,8 @@ import {
   PageSection,
   Title
 } from '@patternfly/react-core';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-icon';
 import MultiContentCard from '@patternfly/react-component-groups/dist/dynamic/MultiContentCard';
 import AnimationsOverviewClusterInventory from './AnimationsOverviewClusterInventory';
 import AnimationsOverviewNetworkActivity from './AnimationsOverviewNetworkActivity';

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

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { Card, CardHeader, CardBody, Flex, FlexItem, Icon, Title, Grid, GridItem } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-icon';
 
 const AnimationsOverviewCardStatus: FunctionComponent = () => (
   <Card>

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

@@ -15,11 +15,11 @@ import {
   Icon
 } from '@patternfly/react-core';
 
-import ListIcon from '@patternfly/react-icons/dist/esm/icons/list-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+import ListIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-list-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
 
 export const ClusterInventoryCard: React.FunctionComponent = () => {
   const [isKebabOpen, setIsKebabOpen] = useState(false);

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

@@ -21,8 +21,8 @@ import {
   Timestamp,
   Title
 } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-icon';
 
 const AnimationsOverviewEventsCard: FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);

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

@@ -14,9 +14,9 @@ import {
   FlexItem
 } from '@patternfly/react-core';
 import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/dist/esm/victory/components';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import TachometerAltIcon from '@patternfly/react-icons/dist/esm/icons/tachometer-alt-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-right-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-icon';
+import TachometerAltIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-speedometer-icon';
 
 export const MemoryUtilizationCard: React.FunctionComponent = () => {
   const [isKebabOpen, setIsKebabOpen] = useState(false);