Upgrade utility classes to PF5

packages/docs/pages/analytics/index.mdx

@@ -9,7 +9,7 @@ The chrome provides a Segment analytics  that modules can use to customize and t
 
 *<a href="https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#page" target="_blank">The page event <ExternalIconAlt /></a> is automatically called on each browser URL change.*
 
-<Alert className="pf-u-mt-md" variant="info" title="Initial page event data cannot be updated!">
+<Alert className="pf-v5-u-mt-md" variant="info" title="Initial page event data cannot be updated!">
   The initial page event is triggered before the module is fully initialized. Additional events can be triggered at runtime at any time.
 </Alert>
 

packages/docs/pages/blog/router-v6.mdx

@@ -72,7 +72,7 @@ We have to adapt to this change and make sure only one Router is in the componen
 
 In [react-router-dom version 6.3.0](https://github.com/remix-run/react-router/releases/tag/v6.3.0) a compatibility layer with react-router-dom@5 was merged directly into the library. Some legacy features started working and the package has improved backward compatibility.
 
-<Alert className="pf-u-mt-lg pf-u-mb-lg" isInline variant="warning" title="Compatibility layers cannot be treated as stable code.">
+<Alert className="pf-v5-u-mt-lg pf-v5-u-mb-lg" isInline variant="warning" title="Compatibility layers cannot be treated as stable code.">
   It is still just a compatibility layer that will be most likely dropped in future version releases. Do not rely on the compatibility layer. Use it as a stepping stone. If you start with the migration, make sure the app does not use any of the legacy features by the migration end.
 </Alert>
 

packages/docs/pages/chrome/chrome-api.mdx

@@ -6,8 +6,8 @@ import ExampleComponent from '@docs/example-component';
 Chrome provides an API that provides additional information and functions to each application.
 
 ## `useChrome`
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="info" isInline title="Use chrome hook is available for chrome 2 compatible applications." />
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="info" isInline title="Use chrome hook is available from version 3.3.4." />
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="info" isInline title="Use chrome hook is available for chrome 2 compatible applications." />
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="info" isInline title="Use chrome hook is available from version 3.3.4." />
 
 To access the chrome API please, use the `useChrome` hook from the `@redhat-cloud-services/frontend-components` package.
 
@@ -17,7 +17,7 @@ To access the chrome API please, use the `useChrome` hook from the `@redhat-clou
 
 If an application is not migrated to chrome 2 you can access the API via `window.insights.chrome` object.
 
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="warning" isInline title="Chrome API on window is deprecated! Please use the hook." />
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="warning" isInline title="Chrome API on window is deprecated! Please use the hook." />
 
 <ExampleComponent codeOnly source="chrome/api/window-chrome.js" />
 
@@ -27,7 +27,7 @@ If an application is not migrated to chrome 2 you can access the API via `window
 
 The `$internal` object gives access to the chrome redux [store](https://redux.js.org/api/store).
 
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="info" isInline title="This object should be only used for debugging purposes. Do not use it in production." />
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="info" isInline title="This object should be only used for debugging purposes. Do not use it in production." />
 
 ### `appAction`
 
@@ -45,7 +45,7 @@ Update object ID used in the current action. For instance, to open a `edit entit
 
 Highlights a chrome navigation item.
 
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="warning" isInline title="This function has been deprecated!">
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="warning" isInline title="This function has been deprecated!">
   Navigation items are highligted based on browser URL. This function has no longer any effect.
 </Alert>
 
@@ -186,7 +186,7 @@ function hideGlobalFilter(hide = true): void
 
 ### `identifyApp`
 
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="warning" isInline title="This function has been deprecated!">
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="warning" isInline title="This function has been deprecated!">
   Applications are identified automatically based on the loaded module. To update the document title, use <a href="#updateDocumentTitle">updateDocumentTitle</a> API instead.
 </Alert>
 
@@ -203,7 +203,7 @@ identifyApp('advisor', 'Insights advisor')
 
 Initialize chrome. Sets up the chrome API  and adds `data-ouia-safe` to the application root element.
 
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="info" isInline title="This function will be called internally after all applications are migrated to chrome 2." />
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="info" isInline title="This function will be called internally after all applications are migrated to chrome 2." />
 
 ### `isBeta`
 
@@ -217,7 +217,7 @@ function isBeta(): boolean
 
 A flag that signalizes if the current version of chrome is chrome 2
 
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="info" isInline title="Chrome 2 has been deployed to all environments. This flag will be always true." />
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="info" isInline title="Chrome 2 has been deployed to all environments. This flag will be always true." />
 
 ### `isPenTest`
 
@@ -246,7 +246,7 @@ mapGlobalFilter()
 
 ### `navigation`
 
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="warning" isInline title="This function has been deprecated!">
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="warning" isInline title="This function has been deprecated!">
   This function no longer has any purpose. Please, remove it from your code.
 </Alert>
 
@@ -291,7 +291,7 @@ on('NAVIGATION_TOGGLE', () => void)
 
 Register custom federated module to chrome modules library.
 
-<Alert className="pf-u-mb-sm pf-u-mt-sm" variant="info" isInline title="Not required for any chrome 2 application module">
+<Alert className="pf-v5-u-mb-sm pf-v5-u-mt-sm" variant="info" isInline title="Not required for any chrome 2 application module">
   If the application is already migrated to chrome 2, this is not necessary. Chrome 2 includes all federated modules from chrome-migrated applications by default.
 </Alert>
 

packages/docs/pages/contributing/frontend-components.mdx

@@ -10,7 +10,7 @@ Frontend components content generates from source code. That will ensure the doc
 2. Open the docs page in browser: <a href="http://localhost:3000/fec/modules/components/InsightsLabel" target="_blank">http://localhost:3000/fec/modules/components/InsightsLabel</a>
 3. Add a JS comment to the component declaration in the source file:
 
-<Alert isInline className="pf-u-mt-md" variant="info" title="The code comment must be multiline!" />
+<Alert isInline className="pf-v5-u-mt-md" variant="info" title="The code comment must be multiline!" />
 
 ```diff
 diff --git a/packages/components/src/InsightsLabel/InsightsLabel.tsx b/packages/components/src/InsightsLabel/InsightsLabel.tsx
@@ -40,7 +40,7 @@ index 4738553a..a3dd725a 100644
 2. Open the docs page in browser: <a href="http://localhost:3000/fec/modules/components/InsightsLabel" target="_blank">http://localhost:3000/fec/modules/components/InsightsLabel</a>
 3. Edit props definition or add comments to prop types to generate description:
 
-<Alert className="pf-u-mt-md" isInline variant="info" title="The code comment must be multiline!" />
+<Alert className="pf-v5-u-mt-md" isInline variant="info" title="The code comment must be multiline!" />
 
 ```diff
 diff --git a/packages/components/src/InsightsLabel/InsightsLabel.tsx b/packages/components/src/InsightsLabel/InsightsLabel.tsx
@@ -68,7 +68,7 @@ index 4738553a..acca5a75 100644
 1. Pick a component you want to document and open it in your EDI. Eg: `/packages/components/src/InsightsLabel.tsx`.
 2. Create a new JS file in the examples directory. The JS file directory must match the component filename. For `/packages/components/src/InsightsLabel.tsx`, create files in `/packages/docs/examples/InsightsLabel/<filename>.js`. The filename is used to generate an example title.
 
-<Alert className="pf-u-mt-md" isInline variant="info" title="We use JSS to style documentation components." />
+<Alert className="pf-v5-u-mt-md" isInline variant="info" title="We use JSS to style documentation components." />
 
 ```diff
 diff --git a/packages/docs/examples/InsightsLabel/critical-label.js b/packages/docs/examples/InsightsLabel/critical-label.js

packages/docs/pages/fed/plugin-sdk.mdx

@@ -64,7 +64,7 @@ index 6d28e306..cf0ca8ca 100644
 
 ### PluginMetadata
 
-<Alert className="pf-u-mt-md pf-u-mb-md" variant="info" title="Using this option is dangerous!">
+<Alert className="pf-v5-u-mt-md pf-v5-u-mb-md" variant="info" title="Using this option is dangerous!">
   Use this configuration at your own risk! It overrides all defaults can generate unexpected output incompatible with HCC!
 </Alert>
 

packages/docs/pages/fed/testing.mdx

@@ -100,7 +100,7 @@ global.__scalprum__ = {
 - `expiration` is the cache expiration date; it is set to year 3000. I think that might be enough
 - `modules` is a set of remote modules you want to mock. In this case, we are mocking the `./InventoryTable` module
 
-<Alert className="pf-u-m-lg" variant="info" title="Where can you find the module name?">The remote dependency scope and module name is the same as the "AsyncComponent" props. Check out the <a href="https://github.com/RedHatInsights/frontend-components/blob/master/packages/components/src/Inventory/InventoryTable.js#L21" target="_blank">inventory example</a>.</Alert>
+<Alert className="pf-v5-u-m-lg" variant="info" title="Where can you find the module name?">The remote dependency scope and module name is the same as the "AsyncComponent" props. Check out the <a href="https://github.com/RedHatInsights/frontend-components/blob/master/packages/components/src/Inventory/InventoryTable.js#L21" target="_blank">inventory example</a>.</Alert>
 
 And that is it. If you run a test, the `InventoryTable` will render the mocked component. The same approach is used for any other AsyncComponent or remote module used in the platform.
 

packages/docs/pages/frontend-components-config/hot-module-replacement.mdx

@@ -8,13 +8,13 @@ Hot Module Replacement (HMR) exchanges, adds, or removes modules while an applic
 
 ## Enable HMR
 
-<Alert isInline className="pf-u-mt-md pf-u-mb-md" variant="info" title="HMR is available from @redhat-cloud-services/frontend-components-config to 4.6.28" />
+<Alert isInline className="pf-v5-u-mt-md pf-v5-u-mb-md" variant="info" title="HMR is available from @redhat-cloud-services/frontend-components-config to 4.6.28" />
 
 HMR **is disabled by default**. That is because HMR and module federation can be a bit flaky. Even though it worked in several applications during testing, we keep this feature opt-in, before the stability was validated on more projects.
 
 To enable the HRM, go to your `fec.config.js` or `dev.webpack.config.js` and add the `hotReload` flag. This flag replaces the deprecated `_unstableHotReload` flag.
 
-<Alert isInline className="pf-u-mt-md pf-u-mb-md" variant="danger" title="Do not add the flag to production webpack config!" />
+<Alert isInline className="pf-v5-u-mt-md pf-v5-u-mb-md" variant="danger" title="Do not add the flag to production webpack config!" />
 
 ```js
 // fec.config.js

packages/docs/pages/frontend-components-config/index.mdx

@@ -28,7 +28,7 @@ const { config: webpackConfig, plugins } = config({
 
 ### `insights.appname` include a dash character (-)
 
-<Alert variant="danger" className="pf-u-mb-md" title="Does your 'insights.appname' includes a dash character (-)?"></Alert>
+<Alert variant="danger" className="pf-v5-u-mb-md" title="Does your 'insights.appname' includes a dash character (-)?"></Alert>
 
 Federated modules cannot parse the **-** character. That means your **default** sass prefix won't work. Styles will not be applied!
 

packages/docs/pages/ui-onboarding/fec-binary.mdx

@@ -46,7 +46,7 @@ module.exports = {
 
 This binary configures your `/etc/hosts` file with new addresses for your localhost. You have to run this script only once on your machine.
 
-<Alert className="pf-u-mt-md" variant="info" title="You may have to run this script as sudo" />
+<Alert className="pf-v5-u-mt-md" variant="info" title="You may have to run this script as sudo" />
 
 ### Via terminal in your project