feat(severity): Convert Battery to Severity Component

[dlabaj]

Closes issue #222 by converting the battery component to the new severity compoent.

[patternfly-build]

Preview: https://compoenent-groups-severity-updates.surge.sh

A11y report: https://react-component-groups-pr-component-groups-365-a11y.surge.sh

Preview: https://react-component-groups-pr-component-groups-365.surge.sh

[dlabaj]

@andrew-ronaldson Can you review the styling. I'm not sure it's correct. I put an extra small space between the icon and the label. Thanks.

[fhlavac]

We should probably focus more on cypress tests than RTL ones, can you please add them?

I tried to put some draft together:

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);
    });
  });
});

[andrew-ronaldson]

There is a docs change here to update the table to severity info insteead of battery levels.

This link shows the classes for each severity color token. Some are showing up as the default icon color

[kaylachumley]

@dlabaj Everything is looking pretty good. Just a few things, if you could please update the color tokens to match their respective severity level.

undefined severity = --pf-t--global--icon--color--severity--undefined--default
none severity = --pf-t--global--icon--color--severity--none--default
minor severity = --pf-t--global--icon--color--severity--minor--default
moderate severity = --pf-t--global--icon--color--severity--moderate--default
important severity = --pf-t--global--icon--color--severity--important--default
critical severity = --pf-t--global--icon--color--severity--critical--default

The introduction description body text still says battery, that'll need swapped to say severity as well. Example: "The severity component generates a severity, which corresponds to a level low, medium, high or critical. Each level corresponds with a severity level and respective color:"

The body text below will also need update to this:" To specify the severity of the severity risk level, you can pass a predefined enum or text value into the severity property that corresponds to the appropriate severity level"

[andrew-ronaldson]

Thanks for the updates! looks grand!

[fhlavac]

is this needed?

[fhlavac]

Looks great!