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 = ( );