Merge pull request #53 from fhlavac/css

Update classNames to match contribution guidelines
patternfly · Oct 9, 2023 · 6f42868 · 6f42868
2 parents 078e3d9 + 11c0b34
commit 6f42868
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 120 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/module/package.json b/packages/module/package.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",

diff --git a/...s/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx b/...s/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx
@@ -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}/>
-)
+);
diff --git a/packages/module/src/Ansible/Ansible.tsx b/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';
 
 export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -17,12 +17,12 @@ const useStyles = createUseStyles({
       top: '0.25rem'
     }
   },
-  supported: {
+  ansibleSupported: {
     '& .st0': {
       fill: 'var(--pf-v5-global--info-color--100)',
     }
   },
-  unsupported: {
+  ansibleUnsupported: {
     '& .st0, .st1, .st2': {
       fill: 'var(--pf-v5-global--disabled-color--200)',
       cursor: 'not-allowed',
@@ -32,10 +32,10 @@ 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 },
+    { [classes.ansibleSupported]: !unsupported || unsupported === 0 },
+    { [classes.ansibleUnsupported]: unsupported || unsupported === 1 },
     className
   );
 

diff --git a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Ansible component should render supported - boolean 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 supported-0-2-2"
+    class="ansible-0-2-1 ansibleSupported-0-2-2"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -27,7 +27,7 @@ exports[`Ansible component should render supported - boolean 1`] = `
 exports[`Ansible component should render supported - number 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 supported-0-2-2"
+    class="ansible-0-2-1 ansibleSupported-0-2-2"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -51,7 +51,7 @@ exports[`Ansible component should render supported - number 1`] = `
 exports[`Ansible component should render unsupported - boolean 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 unsupported-0-2-3"
+    class="ansible-0-2-1 ansibleUnsupported-0-2-3"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -99,7 +99,7 @@ exports[`Ansible component should render unsupported - boolean 1`] = `
 exports[`Ansible component should render unsupported - number 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 unsupported-0-2-3"
+    class="ansible-0-2-1 ansibleUnsupported-0-2-3"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"

diff --git a/packages/module/src/Battery/Battery.tsx b/packages/module/src/Battery/Battery.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
 import { createUseStyles } from 'react-jss'
 
 const batteryDefault = {
@@ -43,25 +43,37 @@ const useStyles = createUseStyles({
     }
   },
 
-  'battery-0': batteryDefault,
-  'battery-null': batteryDefault,
-
-  'battery-1': batteryLow,
-  'battery-low': batteryLow,
-  'battery-info': batteryLow,
-
-  'battery-2': batteryMedium,
-  'battery-medium': batteryMedium,
-  'battery-warn': batteryMedium,
-
-  'battery-3': batteryHigh,
-  'battery-high': batteryHigh,
-  'battery-error': batteryHigh,
-
-  'battery-4': batteryCritical,
-  'battery-critical': batteryCritical,
+  batteryDefault,
+  batteryLow,
+  batteryMedium,
+  batteryHigh,
+  batteryCritical,
 });
 
+const batteryLevels = (severity: BatterySeverity, classMode?: boolean) => {
+  switch (severity) {
+  case 'critical':
+  case 4:
+    return classMode ? 'batteryCritical' : <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  case 'high':
+  case 'error':
+  case 3:
+    return classMode ? 'batteryHigh' : <path d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  case 'medium':
+  case 'warn':
+  case 2:
+    return classMode ? 'batteryMedium' : <path d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  case 'low':
+  case 'info':
+  case 1:
+    return classMode ? 'batteryLow' : <path d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  default:
+    // eslint-disable-next-line
+      console.error('Warning: Unsupported value presented to battery component');
+    return classMode ? 'batteryDefault' : <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  }
+};
+
 export type BatterySeverity = 1 | 2 | 3 | 4 | 'info' | 'low' | 'warn' | 'medium' | 'error' | 'high' | 'critical';
 
 export interface BatteryProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -77,36 +89,14 @@ 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) {
     ariaLabels = { ['aria-label']: `${severity} ${label}` };
   }
 
-  const batteryLevels = (severity: BatterySeverity) => {
-    switch (severity) {
-    case 'critical':
-    case 4:
-      return <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    case 'high':
-    case 'error':
-    case 3:
-      return <path d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    case 'medium':
-    case 'warn':
-    case 2:
-      return <path d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    case 'low':
-    case 'info':
-    case 1:
-      return <path d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    default:
-      // eslint-disable-next-line
-        console.error('Warning: Unsupported value presented to battery component');
-      return <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    }
-  };
+  const batteryVariant = useMemo(() => batteryLevels(severity) , [ severity ])
 
   return (
     <React.Fragment>
@@ -134,10 +124,10 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
             }}
             d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
           />
-          {batteryLevels(severity)}
+          {batteryVariant}
         </svg>
       </i>
-      {!labelHidden && <span className="label"> {label} </span>}
+      {!labelHidden && <span> {label} </span>}
     </React.Fragment>
   );
 };