fix(jss): Use clsx instead if classnames

Author: fhlavac

package-lock.json

@@ -48,7 +48,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.3.3",
-    "classnames": "^2.2.5",
+    "clsx": "^2.0.0",
     "copyfiles": "^2.4.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

packages/module/package.json

@@ -2,9 +2,9 @@ import React from 'react';
 import { TooltipPosition } from '@patternfly/react-core';
 import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
 
-export const LongTextTooltipExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <LongTextTooltip
     content="This is a very long tooltip that will be truncated to fit the screen. It will also have a max width of 400px."
     maxLength={40}
     tooltipPosition={TooltipPosition.bottom}/>
-)
+);

packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createUseStyles } from 'react-jss';
 
 export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -32,7 +32,7 @@ const useStyles = createUseStyles({
 
 const Ansible: React.FunctionComponent<AnsibleProps> = ({ unsupported, className, ...props }: AnsibleProps) => {
   const classes = useStyles();
-  const ansibleLogoClass = classNames(
+  const ansibleLogoClass = clsx(
     classes.ansible,
     { [classes.supported]: !unsupported || unsupported === 0 },
     { [classes.unsupported]: unsupported || unsupported === 1 },

packages/module/src/Ansible/Ansible.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createUseStyles } from 'react-jss'
 
 const batteryDefault = {
@@ -77,7 +77,7 @@ export interface BatteryProps extends React.DetailedHTMLProps<React.HTMLAttribut
 
 const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, labelHidden, className, ...props }: BatteryProps) => {
   const classes = useStyles();
-  const batteryClasses = classNames(classes.battery, classes[`battery-${severity}`], className);
+  const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className);
 
   let ariaLabels = {};
   if (labelHidden) {