feat(severity): Convert Battery to Severity Component

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

@@ -0,0 +1,79 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: Component groups
+subsection: Status and state indicators
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Severity
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['Severity']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Severity/Severity.md
+---
+
+import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity';
+
+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 | 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 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, add the `label` property to the `<Severity>` component.
+
+## Examples
+
+### Undefined variant
+
+The default style for the severity component appears when any value besides "none", "low", "medium", "high", or "critical" is passed to `Severity`. 
+
+```js file="./SeverityUndefinedExample.tsx"
+
+```
+### None severity
+
+To style no severity, pass "none" or `SeverityType.none` to `severity`.
+
+```js file="./SeverityNoneExample.tsx"
+
+```
+
+### Minor severity
+
+To style a minor severity, pass "minor" or `SeverityType.minor` to `severity`.
+
+```js file="./SeverityMinorExample.tsx"
+
+```
+
+### Moderate severity
+
+To style a moderate severity, pass "moderate", or `SeverityType.moderate` to `severity`.
+
+```js file="./SeverityModerateExample.tsx"
+
+```
+
+### Important severity
+
+To style an important severity, pass "important", or `SeverityType.important` to `severity`.
+
+```js file="./SeverityImportantExample.tsx"
+
+```
+
+### Critical severity
+
+To style a critical severity, pass "critical" or `SeverityType.critical` to `severity`.
+
+```js file="./SeverityCriticalExample.tsx"
+
+```

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity';
+
+export const BasicExample: React.FunctionComponent = () => (
+
+  <Severity severity={SeverityType.critical} label="Critical" />
+
+);

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity';
+
+export const BasicExample: React.FunctionComponent = () => (
+  <Severity severity={SeverityType.important} label="Important" />
+);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity';
+
+export const BasicExample: React.FunctionComponent = () => <Severity severity={SeverityType.minor} label="Minor" />;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity';
+
+export const BasicExample: React.FunctionComponent = () => <Severity severity={SeverityType.moderate} label="Moderate" />;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import Severity, { SeverityType } from '@patternfly/react-component-groups/dist/dynamic/Severity';
+
+export const BasicExample: React.FunctionComponent = () => <Severity severity={SeverityType.none} label="None" />;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import Severity from '@patternfly/react-component-groups/dist/dynamic/Severity';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const BasicExample: React.FunctionComponent = () => <Severity label="Undefined" severity={'an unknown value' as any} />