Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(StatusIcon): Declarative approach using union types #49

Merged
merged 6 commits into from
Jan 22, 2021
Merged

feat(StatusIcon): Declarative approach using union types #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0a28ac9
Declarative approach using union types
gildub Jan 20, 2021
b315a43
Restore retun icon when no label
gildub Jan 20, 2021
83a53d4
Follow standard naming for type
gildub Jan 20, 2021
a447815
Simply use IconListType only
gildub Jan 21, 2021
4e50d92
Fix import and exlamation icons assignation
gildub Jan 21, 2021
89d7d3c
Remove string enums
gildub Jan 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions src/components/StatusIcon/StatusIcon.stories.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import { StatusIcon, StatusType } from './StatusIcon';
import { StatusIcon } from './StatusIcon';
import GithubLink from '../../../.storybook/helpers/GithubLink';

<Meta title="Components/StatusIcon" component={StatusIcon} />
Expand All @@ -15,48 +15,48 @@ WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right

<Canvas>
<Story name="Basic">
<StatusIcon status={StatusType.Ok} />
<StatusIcon status="Ok" />
<br />
<StatusIcon status={StatusType.Warning} />
<StatusIcon status="Warning" />
<br />
<StatusIcon status={StatusType.Error} />
<StatusIcon status="Error" />
<br />
<StatusIcon status={StatusType.Info} />
<StatusIcon status="Info" />
<br />
<StatusIcon status={StatusType.Loading} />
<StatusIcon status="Loading" />
<br />
<StatusIcon status={StatusType.Unknown} />
<StatusIcon status="Unknown" />
</Story>
</Canvas>

### Disabled

<Canvas>
<Story name="Disabled">
<StatusIcon status={StatusType.Ok} isDisabled />
<StatusIcon status="Ok" isDisabled />
<br />
<StatusIcon status={StatusType.Warning} isDisabled />
<StatusIcon status="Warning" isDisabled />
<br />
<StatusIcon status={StatusType.Error} isDisabled />
<StatusIcon status="Error" isDisabled />
<br />
<StatusIcon status={StatusType.Info} isDisabled />
<StatusIcon status="Info" isDisabled />
<br />
<StatusIcon status={StatusType.Loading} isDisabled />
<StatusIcon status="Loading" isDisabled />
<br />
<StatusIcon status={StatusType.Unknown} isDisabled />
<StatusIcon status="Unknown" isDisabled />
</Story>
</Canvas>

### With label

<Canvas>
<Story name="With label">
<StatusIcon status={StatusType.Ok} label="Ready" />
<StatusIcon status={StatusType.Warning} label="Warning" />
<StatusIcon status={StatusType.Error} label="Error" />
<StatusIcon status={StatusType.Info} label="Info" />
<StatusIcon status={StatusType.Loading} label="Loading" />
<StatusIcon status={StatusType.Unknown} label="Unknown" />
<StatusIcon status="Ok" label="Ready" />
<StatusIcon status="Warning" label="Warning" />
<StatusIcon status="Error" label="Error" />
<StatusIcon status="Info" label="Info" />
<StatusIcon status="Loading" label="Loading" />
<StatusIcon status="Unknown" label="Unknown" />
</Story>
</Canvas>

Expand Down
46 changes: 23 additions & 23 deletions src/components/StatusIcon/StatusIcon.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
global_danger_color_100 as dangerColor,
global_info_color_100 as infoColor,
} from '@patternfly/react-tokens';
import { StatusIcon, StatusType, IStatusIconProps } from './StatusIcon';
import { StatusIcon, IStatusIconProps } from './StatusIcon';

const checkColor = (props: IStatusIconProps, color: string) => {
const { container } = render(<StatusIcon {...props} />);
Expand All @@ -32,85 +32,85 @@ const checkText = (props: IStatusIconProps, text: string) => {
describe('StatusIcon', () => {
describe('Ok status', () => {
it('should have label if present', () => {
checkText({ status: StatusType.Ok, label: 'Ready' }, 'Ready');
checkText({ status: 'Ok', label: 'Ready' }, 'Ready');
});
it('should have correct color', () => {
checkColor({ status: StatusType.Ok }, successColor.value);
checkColor({ status: 'Ok' }, successColor.value);
});
it('should have disabled color if disabled', () => {
checkColor({ status: StatusType.Ok, isDisabled: true }, disabledColor.value);
checkColor({ status: 'Ok', isDisabled: true }, disabledColor.value);
});
it('should pass down a given className', () => {
checkClass({ status: StatusType.Ok, className: 'foo' }, 'foo', 'svg');
checkClass({ status: 'Ok', className: 'foo' }, 'foo', 'svg');
});
});

describe('Warning status', () => {
it('should have label if present', () => {
checkText({ status: StatusType.Warning, label: 'Warning' }, 'Warning');
checkText({ status: 'Warning', label: 'Warning' }, 'Warning');
});
it('should have correct color', () => {
checkColor({ status: StatusType.Warning }, warningColor.value);
checkColor({ status: 'Warning' }, warningColor.value);
});
it('should have disabled color if disabled', () => {
checkColor({ status: StatusType.Warning, isDisabled: true }, disabledColor.value);
checkColor({ status: 'Warning', isDisabled: true }, disabledColor.value);
});
it('should pass down a given className', () => {
checkClass({ status: StatusType.Warning, className: 'foo' }, 'foo', 'svg');
checkClass({ status: 'Warning', className: 'foo' }, 'foo', 'svg');
});
});

describe('Error status', () => {
it('should have label if present', () => {
checkText({ status: StatusType.Error, label: 'Error' }, 'Error');
checkText({ status: 'Error', label: 'Error' }, 'Error');
});
it('should have correct color', () => {
checkColor({ status: StatusType.Error }, dangerColor.value);
checkColor({ status: 'Error' }, dangerColor.value);
});
it('should have disabled color if disabled', () => {
checkColor({ status: StatusType.Error, isDisabled: true }, disabledColor.value);
checkColor({ status: 'Error', isDisabled: true }, disabledColor.value);
});
it('should pass down a given className', () => {
checkClass({ status: StatusType.Error, className: 'foo' }, 'foo', 'svg');
checkClass({ status: 'Error', className: 'foo' }, 'foo', 'svg');
});
});

describe('Info status', () => {
it('should have label if present', () => {
checkText({ status: StatusType.Info, label: 'Info' }, 'Info');
checkText({ status: 'Info', label: 'Info' }, 'Info');
});
it('should have correct color', () => {
checkColor({ status: StatusType.Info }, infoColor.value);
checkColor({ status: 'Info' }, infoColor.value);
});
it('should have disabled color if disabled', () => {
checkColor({ status: StatusType.Info, isDisabled: true }, disabledColor.value);
checkColor({ status: 'Info', isDisabled: true }, disabledColor.value);
});
it('should pass down a given className', () => {
checkClass({ status: StatusType.Info, className: 'foo' }, 'foo', 'svg');
checkClass({ status: 'Info', className: 'foo' }, 'foo', 'svg');
});
});

describe('Loading status', () => {
it('should have label if present', () => {
checkText({ status: StatusType.Loading, label: 'Loading' }, 'Loading');
checkText({ status: 'Loading', label: 'Loading' }, 'Loading');
});
it('should pass down a given className', () => {
checkClass({ status: StatusType.Loading, className: 'foo' }, 'foo', 'span');
checkClass({ status: 'Loading', className: 'foo' }, 'foo', 'span');
});
});

describe('Unknown status', () => {
it('should have label if present', () => {
checkText({ status: StatusType.Unknown, label: 'Unknown' }, 'Unknown');
checkText({ status: 'Unknown', label: 'Unknown' }, 'Unknown');
});
it('should have correct color', () => {
checkColor({ status: StatusType.Unknown }, unknownColor.value);
checkColor({ status: 'Unknown' }, unknownColor.value);
});
it('should have disabled color if disabled', () => {
checkColor({ status: StatusType.Unknown, isDisabled: true }, disabledColor.value);
checkColor({ status: 'Unknown', isDisabled: true }, disabledColor.value);
});
it('should pass down a given className', () => {
checkClass({ status: StatusType.Unknown, className: 'foo' }, 'foo', 'svg');
checkClass({ status: 'Unknown', className: 'foo' }, 'foo', 'svg');
});
});
});
100 changes: 46 additions & 54 deletions src/components/StatusIcon/StatusIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,59 @@
import * as React from 'react';
import { Flex, FlexItem, Spinner } from '@patternfly/react-core';
import { Flex, FlexItem, Spinner, SpinnerProps } from '@patternfly/react-core';
import {
CheckCircleIcon,
ExclamationTriangleIcon,
ExclamationCircleIcon,
InfoCircleIcon,
QuestionCircleIcon,
} from '@patternfly/react-icons';
import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
import {
global_disabled_color_200 as disabledColor,
global_success_color_100 as successColor,
global_warning_color_100 as warningColor,
global_Color_dark_200 as unknownColor,
global_danger_color_100 as dangerColor,
global_danger_color_100 as errorColor,
global_info_color_100 as infoColor,
global_info_color_200 as loadingColor,
} from '@patternfly/react-tokens';

import './StatusIcon.css';

export enum StatusType {
Ok = 'Ok',
Warning = 'Warning',
Error = 'Error',
Info = 'Info',
Loading = 'Loading',
Unknown = 'Unknown',
}
export type StatusType = 'Ok' | 'Warning' | 'Error' | 'Info' | 'Loading' | 'Unknown';

type IconListType = {
[key in StatusType]: {
Icon: React.ComponentClass<SVGIconProps> | React.FunctionComponent<SpinnerProps>;
color: { name: string; value: string; var: string };
};
};
const iconList: IconListType = {
Ok: {
Icon: CheckCircleIcon,
color: successColor,
},
Warning: {
Icon: ExclamationTriangleIcon,
color: warningColor,
},
Error: {
Icon: ExclamationCircleIcon,
color: errorColor,
},
Info: {
Icon: InfoCircleIcon,
color: infoColor,
},
Loading: {
Icon: Spinner,
color: loadingColor,
},
Unknown: {
Icon: QuestionCircleIcon,
color: unknownColor,
},
};

export interface IStatusIconProps {
status: StatusType;
Expand All @@ -40,50 +68,14 @@ export const StatusIcon: React.FunctionComponent<IStatusIconProps> = ({
isDisabled = false,
className = '',
}: IStatusIconProps) => {
let icon: React.ReactElement | null = null;
if (status === StatusType.Ok) {
icon = (
<CheckCircleIcon
className={className}
color={isDisabled ? disabledColor.value : successColor.value}
/>
);
}
if (status === StatusType.Warning) {
icon = (
<ExclamationTriangleIcon
className={className}
color={isDisabled ? disabledColor.value : warningColor.value}
/>
);
}
if (status === StatusType.Error) {
icon = (
<ExclamationCircleIcon
className={className}
color={isDisabled ? disabledColor.value : dangerColor.value}
/>
);
}
if (status === StatusType.Info) {
icon = (
<InfoCircleIcon
className={className}
color={isDisabled ? disabledColor.value : infoColor.value}
/>
);
}
if (status === StatusType.Loading) {
icon = <Spinner className={`${className} status-icon-loading-spinner`} />;
}
if (status === StatusType.Unknown) {
icon = (
<QuestionCircleIcon
className={className}
color={isDisabled ? disabledColor.value : unknownColor.value}
/>
);
}
const Icon = iconList[status].Icon;
const icon = (
<Icon
color={isDisabled ? disabledColor.value : iconList[status].color.value}
className={status === 'Loading' ? `${className} status-icon-loading-spinner` : className}
/>
);

if (label) {
return (
<Flex
Expand Down