Replace variant types with enums in existing components

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md

@@ -14,9 +14,9 @@ propComponents: ['Battery']
 sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/Battery.md
 ---
 
-import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
+import Battery, { BatterySeverity } from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-The **battery** component generates a 'battery' which corresponds to a level 1-4. Each level corresponds with a severity level and respective color:
+The **battery** component generates a battery, which corresponds to a level `low`, `medium`, `high` or `critical`. Each level corresponds with a severity level and respective color:
 
 | Severity level | Meaning | Style | 
 | --- | --- | --- | 
@@ -25,47 +25,47 @@ The **battery** component generates a 'battery' which corresponds to a level 1-4
 | Level 3 | High severity | 3 orange bars | 
 | Level 4 | Critical severity (worst case scenario) | 4 red bars | 
 
-To specify the severity of the battery's risk level, you can pass a predefined number or text value into the `severity` property that corresponds to the appropriate severity level.
+To specify the severity of the battery's risk level, you can pass a predefined enum or text value into the `severity` property that corresponds to the appropriate severity level.
 
 To add an optional label to a battery, add the `label` property to the `<Battery>` component.
 
 ## Examples
 
 ### Default variant
 
-The default style of a battery (4 black lines) appears when any value besides "1", "2", "3", or "4" is passed to `severity`. 
+The default style of a battery (4 black lines) appears when any value besides "low", "medium", "high", or "critical" is passed to `severity`. 
 
 ```js file="./BatteryDefaultExample.tsx"
 
 ```
 
 ### Low severity
 
-To style a battery as low severity, pass "1", "info", or "low" to `severity`.
+To style a battery as low severity, pass "low" or `BatterySeverity.low` to `severity`.
 
 ```js file="./BatteryLowExample.tsx"
 
 ```
 
 ### Medium severity
 
-To style a battery as medium severity, pass "2", "medium", or "warn" to `severity`.
+To style a battery as medium severity, pass "medium", or `BatterySeverity.medium` to `severity`.
 
 ```js file="./BatteryMediumExample.tsx"
 
 ```
 
 ### High severity
 
-To style a battery as high severity, pass "3", "high", or "error" to `severity`.
+To style a battery as high severity, pass "high", or `BatterySeverity.high` to `severity`.
 
 ```js file="./BatteryHighExample.tsx"
 
 ```
 
 ### Critical severity
 
-To style a battery as critical severity, pass "4" or "critical" to `severity`.
+To style a battery as critical severity, pass "critical" or `BatterySeverity.critical` to `severity`.
 
 ```js file="./BatteryCriticalExample.tsx"
 

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryCriticalExample.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
+import Battery, { BatterySeverity } from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
 export const BasicExample: React.FunctionComponent = () => (
-  <>
-    <Battery label="With prop: 4" severity={4} />
-    <Battery className="pf-v5-u-ml-md" label="With prop: critical" severity="critical" />
-  </>
+
+  <Battery severity={BatterySeverity.critical} label="Critical severity" />
+
 );

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryDefaultExample.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-export const BasicExample: React.FunctionComponent = () => <Battery label="Default" severity={'an unknown value' as any}/>
+export const BasicExample: React.FunctionComponent = () => <Battery label="Default battery" severity={'an unknown value' as any} />

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryHighExample.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
-import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
+import Battery, { BatterySeverity } from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
 export const BasicExample: React.FunctionComponent = () => (
-  <>
-    <Battery label="With prop: 3" severity={3} />
-    <Battery className="pf-v5-u-ml-md" label="With prop: high" severity="high" />
-    <Battery className="pf-v5-u-ml-md" label="With prop: error" severity="error" />
-  </>
+  <Battery severity={BatterySeverity.high} label="High severity" />
 );

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryLowExample.tsx

@@ -1,10 +1,4 @@
 import React from 'react';
-import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
+import Battery, { BatterySeverity } from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-export const BasicExample: React.FunctionComponent = () => (
-  <>
-    <Battery label="With prop: 1" severity={1} />
-    <Battery className="pf-v5-u-ml-md" label="With prop: low" severity="low" />
-    <Battery className="pf-v5-u-ml-md" label="With prop: info" severity="info" />
-  </>
-);
+export const BasicExample: React.FunctionComponent = () => <Battery severity={BatterySeverity.low} label="Low severity" />;

packages/module/patternfly-docs/content/extensions/component-groups/examples/Battery/BatteryMediumExample.tsx

@@ -1,10 +1,4 @@
 import React from 'react';
-import Battery from '@patternfly/react-component-groups/dist/dynamic/Battery';
+import Battery, { BatterySeverity } from '@patternfly/react-component-groups/dist/dynamic/Battery';
 
-export const BasicExample: React.FunctionComponent = () => (
-  <>
-    <Battery label="With prop: 2" severity={2} />
-    <Battery className="pf-v5-u-ml-md" label="With prop: medium" severity="medium" />
-    <Battery className="pf-v5-u-ml-md" label="With prop: warn" severity="warn" />
-  </>
-);
+export const BasicExample: React.FunctionComponent = () => <Battery severity={BatterySeverity.medium} label="Medium severity" />;

packages/module/src/Battery/Batery.test.tsx

@@ -5,45 +5,36 @@ import Battery, { BatterySeverity } from './Battery';
 describe('Battery component', () => {
   jest.spyOn(global.console, 'error');
   describe('should render correctly', () => {
-    ([ 'critical', 4 ] as BatterySeverity[]).forEach((severity) => {
-      test(`CriticalBattery - ${severity}`, () => {
-        const { container } = render(<Battery severity={severity as BatterySeverity} label={`${severity}`} />);
-        expect(container).toMatchSnapshot();
-      });
-    });
 
-    ([ 'high', 'error', 3 ] as BatterySeverity[]).forEach((severity) => {
-      test(`HighBattery - ${severity}`, () => {
-        const { container } = render(<Battery severity={severity as BatterySeverity} label={`${severity}`} />);
-        expect(container).toMatchSnapshot();
-      });
+    test('CriticalBattery', () => {
+      const { container } = render(<Battery severity={BatterySeverity.critical} label="Critical" />);
+      expect(container).toMatchSnapshot();
+    });
+
+    test('HighBattery', () => {
+      const { container } = render(<Battery severity={BatterySeverity.high} label="High" />);
+      expect(container).toMatchSnapshot();
     });
 
-    ([ 'medium', 'warn', 2 ] as BatterySeverity[]).forEach((severity) => {
-      test(`MediumBattery - ${severity}`, () => {
-        const { container } = render(<Battery severity={severity as BatterySeverity} label={`${severity}`} />);
-        expect(container).toMatchSnapshot();
-      });
+    test('MediumBattery', () => {
+      const { container } = render(<Battery severity={BatterySeverity.medium} label="Medium" />);
+      expect(container).toMatchSnapshot();
     });
 
-    ([ 'low', 'info', 1 ] as BatterySeverity[]).forEach((severity) => {
-      test(`LowBattery - ${severity}`, () => {
-        const { container } = render(<Battery severity={severity} label={`${severity}`} />);
-        expect(container).toMatchSnapshot();
-      });
+    test('LowBattery', () => {
+      const { container } = render(<Battery severity={BatterySeverity.low} label="Low" />);
+      expect(container).toMatchSnapshot();
     });
 
     test('NullBatery, default', () => {
       const { container } = render(<Battery severity={'' as BatterySeverity} label={''} />);
       expect(container).toMatchSnapshot();
-      // eslint-disable-next-line no-console
-      expect(console.error).toBeCalled();
     });
   });
 
   describe('API', () => {
     test('should hide label', () => {
-      const { container } = render(<Battery severity={'high'} label={'high'} labelHidden />);
+      const { container } = render(<Battery severity={BatterySeverity.high} label="high" labelHidden />);
       expect(container).toMatchSnapshot();
     });
   });

packages/module/src/Battery/Battery.tsx

@@ -60,31 +60,29 @@ const useStyles = createUseStyles({
 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 const BatterySeverity = {
+  low: 'low',
+  medium: 'medium',
+  high: 'high',
+  critical: 'critical',
+} as const;
+
+export type BatterySeverity = typeof BatterySeverity[keyof typeof BatterySeverity];
 
 export interface BatteryProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
-  /** Determines a variant of displayed Battery component */
+  /** Determines a variant of displayed battery */
   severity: BatterySeverity;
   /** Label displayed next to the battery */
   label: string;
@@ -98,8 +96,7 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
   const classes = useStyles();
   const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className);
 
-  const title = { ['title']: `${severity} ${label}` };
-
+  const title = { title: `${severity} ${label}` };
 
   const batteryVariant = useMemo(() => batteryLevels(severity) , [ severity ])