diff --git a/src/components/StatusIcon/StatusIcon.stories.mdx b/src/components/StatusIcon/StatusIcon.stories.mdx
index 296e3dc..0710739 100644
--- a/src/components/StatusIcon/StatusIcon.stories.mdx
+++ b/src/components/StatusIcon/StatusIcon.stories.mdx
@@ -25,6 +25,8 @@ WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right
+
+
@@ -43,6 +45,8 @@ WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right
+
+
@@ -56,6 +60,7 @@ WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right
+
diff --git a/src/components/StatusIcon/StatusIcon.test.tsx b/src/components/StatusIcon/StatusIcon.test.tsx
index f3d55da..f7bf9f1 100644
--- a/src/components/StatusIcon/StatusIcon.test.tsx
+++ b/src/components/StatusIcon/StatusIcon.test.tsx
@@ -99,6 +99,21 @@ describe('StatusIcon', () => {
});
});
+ describe('Paused status', () => {
+ it('should have label if present', () => {
+ checkText({ status: 'Paused', label: 'Paused' }, 'Paused');
+ });
+ it('should have correct color', () => {
+ checkColor({ status: 'Paused' }, '#151515');
+ });
+ it('should have disabled color if disabled', () => {
+ checkColor({ status: 'Paused', isDisabled: true }, disabledColor.value);
+ });
+ it('should pass down a given className', () => {
+ checkClass({ status: 'Paused', className: 'foo' }, 'foo', 'svg');
+ });
+ });
+
describe('Unknown status', () => {
it('should have label if present', () => {
checkText({ status: 'Unknown', label: 'Unknown' }, 'Unknown');
diff --git a/src/components/StatusIcon/StatusIcon.tsx b/src/components/StatusIcon/StatusIcon.tsx
index 9670d95..0b87e2f 100644
--- a/src/components/StatusIcon/StatusIcon.tsx
+++ b/src/components/StatusIcon/StatusIcon.tsx
@@ -6,6 +6,7 @@ import {
ExclamationCircleIcon,
InfoCircleIcon,
QuestionCircleIcon,
+ PauseCircleIcon,
} from '@patternfly/react-icons';
import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
import {
@@ -20,12 +21,12 @@ import {
import './StatusIcon.css';
-export type StatusType = 'Ok' | 'Warning' | 'Error' | 'Info' | 'Loading' | 'Unknown';
+export type StatusType = 'Ok' | 'Warning' | 'Error' | 'Info' | 'Loading' | 'Paused' | 'Unknown';
type IconListType = {
[key in StatusType]: {
Icon: React.ComponentClass | React.FunctionComponent;
- color: { name: string; value: string; var: string };
+ color?: { name: string; value: string; var: string };
};
};
const iconList: IconListType = {
@@ -49,6 +50,9 @@ const iconList: IconListType = {
Icon: Spinner,
color: loadingColor,
},
+ Paused: {
+ Icon: PauseCircleIcon,
+ },
Unknown: {
Icon: QuestionCircleIcon,
color: unknownColor,
@@ -71,7 +75,7 @@ export const StatusIcon: React.FunctionComponent = ({
const Icon = iconList[status].Icon;
const icon = (
);