fix: Updated with review comments.

Author: dlabaj

README.md

@@ -112,7 +112,7 @@ const MyComponentExample: React.FunctionComponent = () => (
   <MyComponent customLabel="My label">
 );
 
-export default BatteryLowExample;
+export default MyComponentExample;
 ```
 
 ### Sub-components:

cypress/component/Severity.cy.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Severity, { SeverityType } from '../../packages/module/dist/dynamic/Severity';
+
+const severities = [    
+  { type: SeverityType.critical, label: 'Critical severity', ouiaId: 'Severity-critical' },
+  { type: SeverityType.important, label: 'Important severity', ouiaId: 'Severity-important' },
+  { type: SeverityType.moderate, label: 'Moderate severity', ouiaId: 'Severity-moderate' },
+  { type: SeverityType.minor, label: 'Minor severity', ouiaId: 'Severity-minor' },
+  { type: SeverityType.none, label: 'No severity', ouiaId: 'Severity-none' },
+  { type: SeverityType.undefined, label: 'Undefined severity', ouiaId: 'Severity-undefined' }
+];
+
+describe('Severity', () => {
+  severities.map(({ type, label, ouiaId }) => {
+    it(`renders Severity with ${type} severity`, () => {
+      cy.mount(<Severity severity={type} label={label} ouiaId={ouiaId} />);
+      cy.get(`[data-ouia-component-id="${ouiaId}"]`).should('exist');
+      cy.get(`[data-ouia-component-id="${ouiaId}"]`).should('have.attr', 'title', label);
+      cy.get('span').contains(label);
+    });
+  });
+  
+  it('hides label when labelHidden is true', () => {
+    cy.mount(<Severity severity={SeverityType.important} label="Important severity" labelHidden />);
+    cy.contains('Important severity').should('not.exist');
+  });
+});

migration.md

@@ -10,12 +10,6 @@ The guide should be applicable when migrating from frontend-components **version
 ​
   **SOLUTION:** use the `className` property if you need a custom color
 ​
-​
-## Battery
-​
-- No action required
-​
-​
 ## ErrorState
 ​
 - The default error description *“If the problem persists, contact [Red Hat Support](https://access.redhat.com/support) or check our [status page](https://status.redhat.com) for known outages.”* has been removed. 
@@ -55,7 +49,10 @@ The guide should be applicable when migrating from frontend-components **version
 ​
   **SOLUTION:** handle `/beta` in your URL on your own and pass a final URL using the new `toLandingPageUrl` property
 ​
-​
+​## Severity
+
+- No action required
+  
 ## SkeletonTable
 ​
 - No action required

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

@@ -16,18 +16,18 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
 
 import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity';
 
-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:
+The **severity** component generates an icon with an optional label, which corresponds to a level `minor`, `moderate`, `important` or `critical`. Each level corresponds with a severity level and respective color:
 
 | Severity level | Meaning | Style | 
 | --- | --- | --- | 
-| Level 1 | Low severity (best case scenario) | 1 green bar | "1", "low" |
-| Level 2 | Medium severity |  2 yellow bars | 
-| Level 3 | High severity | 3 orange bars | 
-| Level 4 | Critical severity (worst case scenario) | 4 red bars | 
+| Level 1 | Minor severity (best case scenario) | Dark grey icon |
+| Level 2 | Moderate severity |  Yellow icon | 
+| Level 3 | Important severity | Orange icon | 
+| Level 4 | Critical severity (worst case scenario) | Red icon | 
 
-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 specify the severity 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 `<Severity>` component.
+To add an optional label, add the `label` property to the `<Severity>` component.
 
 ## Examples
 

packages/module/src/Severity/Severity.test.tsx

@@ -42,4 +42,4 @@ describe('Severity component', () => {
       expect(container).toMatchSnapshot();
     });
   });
-});
+});

packages/module/src/Severity/Severity.tsx

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import clsx from 'clsx';
 import {
   SeverityCriticalIcon,
   SeverityImportantIcon,
@@ -8,79 +7,21 @@ import {
   SeverityNoneIcon,
   SeverityUndefinedIcon
 } from '@patternfly/react-icons';
-import { createUseStyles } from 'react-jss';
 
-const severityCritical = {
-  '& svg': {
-    '& path': { fill: 'var(--pf-t--global--color--status--danger--default)' }
-  }
-};
-
-const severityImportant = {
-  '& svg': {
-    '& path': { fill: 'var(--pf-t--global--icon--color--severity--important--default)' }
-  }
-};
-
-const severityModerate = {
-  '& svg': {
-    '& path': { fill: 'var(-pf-t--global--icon--color--severity--moderate--default)' }
-  }
-};
-
-const severityMinor = {
-  '& svg': {
-    '& path': { fill: 'var(--pf-t--global--icon--color--severity--minor--default)' }
-  }
-};
-
-const severityNone = {
-  '& svg': {
-    '& path': { fill: 'var(--pf-t--global--icon--color--severity--none--default)' }
-  }
-};
-
-const severityUndefined = {
-  '& svg': {
-    '& path': { stroke: 'var(--pf-t--global--icon--color--severity--undefined--default)' }
-  }
-};
-
-const useStyles = createUseStyles({
-  severity: {
-    display: 'inline-block',
-    'line-height': 0,
-    '& svg': {
-      position: 'relative',
-      top: 'var(--pf-t--global--spacer--sm)',
-      height: 'calc(var(--pf-t--global--spacer--md) * 1.75)',
-    },
-  },
-  severityLabel: {
-    'margin-left': 'var(--pf-t--global--spacer--xs)'
-  },
-  severityNone,
-  severityMinor,
-  severityModerate,
-  severityImportant,
-  severityCritical,
-  severityUndefined
-});
-
-const severityLevels = (severity: SeverityType, classMode?: boolean) => {
+const severityLevels = (severity: SeverityType) => {
   switch (severity) {
   case 'critical':
-    return classMode ? 'severityCritical' : <SeverityCriticalIcon />;
+    return <SeverityCriticalIcon color='var(--pf-t--global--icon--color--severity--critical--default)'/>;
   case 'important':
-    return classMode ? 'severityImportant' : <SeverityImportantIcon />;
+    return <SeverityImportantIcon color='var(--pf-t--global--icon--color--severity--important--default)' />;
   case 'minor':
-    return classMode ? 'severityMinor' : <SeverityMinorIcon />;
+    return <SeverityMinorIcon color='var(--pf-t--global--icon--color--severity--minor--default)' />;
   case 'moderate':
-    return classMode ? 'severityModerate' : <SeverityModerateIcon />;
+    return <SeverityModerateIcon color='var(--pf-t--global--icon--color--severity--moderate--default)' />;
   case 'none':
-    return classMode ? 'severityMinor' : <SeverityNoneIcon />;
+    return <SeverityNoneIcon color='var(--pf-t--global--icon--color--severity--none--default)' />;
   default:
-    return classMode ? 'severityNone' : <SeverityUndefinedIcon />;
+    return <SeverityUndefinedIcon color='var(--pf-t--global--icon--color--severity--undefined--default)' />;
   }
 };
 
@@ -112,12 +53,10 @@ export const Severity: React.FunctionComponent<SeverityProps> = ({
   severity,
   label,
   labelHidden,
-  className,
   ouiaId = 'Severity-icon',
   ...props
 }: SeverityProps) => {
-  const classes = useStyles();
-  const severityClasses = clsx(classes.severity, classes[String(severityLevels(severity, true))], className);
+
 
   const title = { title: `${severity} ${label}` };
 
@@ -126,10 +65,10 @@ export const Severity: React.FunctionComponent<SeverityProps> = ({
   return (
     <React.Fragment>
       {/* eslint-disable-next-line react/no-unknown-property */}
-      <i className={severityClasses} {...title} {...props} widget-type="Severity" widget-id={label} data-ouia-component-id={ouiaId}>
+      <i {...title} {...props} widget-type="Severity" widget-id={label} data-ouia-component-id={ouiaId}>
         {severityVariant}
       </i>
-      {!labelHidden && <span className={clsx(classes.severityLabel)}> {label} </span>}
+      {!labelHidden && label}
     </React.Fragment>
   );
 };