-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(storybook): Replace TestComponent with StatusIcon, add stories a…
…nd tests (#13) * build(package.json): install @storybook/addon-docs and peer dependencies * feat(statusicon): add StatusIcon component, tests and stories * feat(storybook): switch to MDX docs mode for stories * fix(storybook): import PatternFly CSS in Storybook * feat(storybook): add GitHub source link at the bottom of the story * fix(index.ts): fix bad export * chore(readme): add a note about MDX
- Loading branch information
Showing
16 changed files
with
1,210 additions
and
116 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import * as React from 'react'; | ||
| import { GithubIcon } from '@patternfly/react-icons'; | ||
|
|
||
| interface IGithubLinkProps { | ||
| path: string; | ||
| } | ||
|
|
||
| const GithubLink: React.FunctionComponent<IGithubLinkProps> = ({ path }) => ( | ||
| <a href={`https://github.com/konveyor/lib-ui/blob/master/${path}`}> | ||
| <GithubIcon /> View Source on GitHub | ||
| </a> | ||
| ); | ||
|
|
||
| export default GithubLink; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| import '../node_modules/@patternfly/react-core/dist/styles/base.css'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; | ||
| import { StatusIcon, StatusType } from './StatusIcon'; | ||
| import GithubLink from '../../../.storybook/helpers/GithubLink'; | ||
|
|
||
| <Meta title="Components/StatusIcon" component={StatusIcon} /> | ||
|
|
||
| # StatusIcon | ||
|
|
||
| A small wrapper for PatternFly's CheckCircleIcon, | ||
| WarningTriangleIcon and ExclamationCircleIcon that automatically sets the right color. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Basic | ||
|
|
||
| <Canvas> | ||
| <Story name="Basic"> | ||
| <StatusIcon status={StatusType.Ok} /> | ||
| <br /> | ||
| <StatusIcon status={StatusType.Warning} /> | ||
| <br /> | ||
| <StatusIcon status={StatusType.Error} /> | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ### Disabled | ||
|
|
||
| <Canvas> | ||
| <Story name="Disabled"> | ||
| <StatusIcon status={StatusType.Ok} isDisabled /> | ||
| <br /> | ||
| <StatusIcon status={StatusType.Warning} isDisabled /> | ||
| <br /> | ||
| <StatusIcon status={StatusType.Error} 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" /> | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ## Props | ||
|
|
||
| <ArgsTable of={StatusIcon} /> | ||
|
|
||
| <GithubLink path="src/components/StatusIcon/StatusIcon.tsx" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom'; | ||
| import { | ||
| global_disabled_color_200 as disabledColor, | ||
| global_success_color_100 as successColor, | ||
| global_warning_color_100 as warningColor, | ||
| global_danger_color_100 as dangerColor, | ||
| } from '@patternfly/react-tokens'; | ||
|
|
||
| import { StatusIcon, StatusType, IStatusIconProps } from './StatusIcon'; | ||
|
|
||
| const checkColor = (props: IStatusIconProps, color: string) => { | ||
| const { container } = render(<StatusIcon {...props} />); | ||
| const icon = container.querySelector('svg'); | ||
| expect(icon).toHaveAttribute('fill', color); | ||
| }; | ||
|
|
||
| const checkClass = (props: IStatusIconProps, className: string) => { | ||
| const { container } = render(<StatusIcon {...props} />); | ||
| const icon = container.querySelector('svg'); | ||
| expect(icon).toHaveClass(className); | ||
| }; | ||
|
|
||
| const checkText = (props: IStatusIconProps, text: string) => { | ||
| const { container } = render(<StatusIcon {...props} />); | ||
| const icon = container.querySelector('.pf-l-flex'); | ||
| expect(icon).toContainHTML(text); | ||
| }; | ||
|
|
||
| describe('StatusIcon', () => { | ||
| describe('Ok status', () => { | ||
| it('should have label if present', () => { | ||
| checkText({ status: StatusType.Ok, label: 'Ready' }, 'Ready'); | ||
| }); | ||
| it('should have correct color', () => { | ||
| checkColor({ status: StatusType.Ok }, successColor.value); | ||
| }); | ||
| it('should have disabled color if disabled', () => { | ||
| checkColor({ status: StatusType.Ok, isDisabled: true }, disabledColor.value); | ||
| }); | ||
| it('should pass down a given className', () => { | ||
| checkClass({ status: StatusType.Ok, className: 'foo' }, 'foo'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Warning status', () => { | ||
| it('should have label if present', () => { | ||
| checkText({ status: StatusType.Warning, label: 'Warning' }, 'Warning'); | ||
| }); | ||
| it('should have correct color', () => { | ||
| checkColor({ status: StatusType.Warning }, warningColor.value); | ||
| }); | ||
| it('should have disabled color if disabled', () => { | ||
| checkColor({ status: StatusType.Warning, isDisabled: true }, disabledColor.value); | ||
| }); | ||
| it('should pass down a given className', () => { | ||
| checkClass({ status: StatusType.Warning, className: 'foo' }, 'foo'); | ||
| }); | ||
| }); | ||
|
|
||
| describe('Error status', () => { | ||
| it('should have label if present', () => { | ||
| checkText({ status: StatusType.Error, label: 'Error' }, 'Error'); | ||
| }); | ||
| it('should have correct color', () => { | ||
| checkColor({ status: StatusType.Error }, dangerColor.value); | ||
| }); | ||
| it('should have disabled color if disabled', () => { | ||
| checkColor({ status: StatusType.Error, isDisabled: true }, disabledColor.value); | ||
| }); | ||
| it('should pass down a given className', () => { | ||
| checkClass({ status: StatusType.Error, className: 'foo' }, 'foo'); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import * as React from 'react'; | ||
| import { Flex, FlexItem } from '@patternfly/react-core'; | ||
| import { | ||
| CheckCircleIcon, | ||
| WarningTriangleIcon, | ||
| ExclamationCircleIcon, | ||
| } from '@patternfly/react-icons'; | ||
| import { | ||
| global_disabled_color_200 as disabledColor, | ||
| global_success_color_100 as successColor, | ||
| global_warning_color_100 as warningColor, | ||
| global_danger_color_100 as dangerColor, | ||
| } from '@patternfly/react-tokens'; | ||
|
|
||
| export enum StatusType { | ||
| Ok = 'Ok', | ||
| Warning = 'Warning', | ||
| Error = 'Error', | ||
| } | ||
|
|
||
| export interface IStatusIconProps { | ||
| status: StatusType; | ||
| label?: string; | ||
| isDisabled?: boolean; | ||
| className?: string; | ||
| } | ||
|
|
||
| export const StatusIcon: React.FunctionComponent<IStatusIconProps> = ({ | ||
| status, | ||
| label, | ||
| 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 = ( | ||
| <WarningTriangleIcon | ||
| className={className} | ||
| color={isDisabled ? disabledColor.value : warningColor.value} | ||
| /> | ||
| ); | ||
| } | ||
| if (status === StatusType.Error) { | ||
| icon = ( | ||
| <ExclamationCircleIcon | ||
| className={className} | ||
| color={isDisabled ? disabledColor.value : dangerColor.value} | ||
| /> | ||
| ); | ||
| } | ||
| if (label) { | ||
| return ( | ||
| <Flex spaceItems={{ default: 'spaceItemsSm' }}> | ||
| <FlexItem>{icon}</FlexItem> | ||
| <FlexItem>{label}</FlexItem> | ||
| </Flex> | ||
| ); | ||
| } | ||
| return icon; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './StatusIcon'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| export * from './TestComponent'; | ||
| export * from './components/StatusIcon'; |
Oops, something went wrong.