All files / ProgressBar ProgressBar.stories.tsx

93.33% Statements 14/15
100% Branches 0/0
87.5% Functions 7/8
93.33% Lines 14/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91                                    1x 1x             1x 1x             1x                             1x       1x 1x   1x                                 1x       1x 1x   1x               1x    
import React from 'react';
import createClass from 'create-react-class';
import TextField from '../TextField/TextField';
import ProgressBar from './ProgressBar';
 
export default {
	title: 'Communication/ProgressBar',
	component: ProgressBar,
	parameters: {
		docs: {
			description: {
				component: (ProgressBar as any).peek.description,
			},
		},
	},
};
 
/* Basic */
export const Basic = () => {
	const style = {
		marginBottom: '10px',
		marginTop: '10px',
	};
 
	class Component extends React.Component {
		constructor(props: any) {
			super(props);
			this.state = {
				value: '',
				percentComplete: 95,
			};
		}
 
		render() {
			return (
				<div>
					Enter % complete:
					<TextField
						style={style}
						value={(this.state as any).value}
						onSubmit={(value) =>
							this.setState({ percentComplete: value, value: '' })
						}
					/>
					<ProgressBar percentComplete={(this.state as any).percentComplete} />
				</div>
			);
		}
	}
	return <Component />;
};
 
/* Kinds */
export const Kinds = () => {
	const Component = createClass({
		render() {
			return (
				<div>
					<p>Default</p>
					<ProgressBar kind='default' percentComplete={75} />
					<p>Success</p>
					<ProgressBar kind='success' percentComplete={75} />
					<p>Warning</p>
					<ProgressBar kind='warning' percentComplete={75} />
					<p>Danger</p>
					<ProgressBar kind='danger' percentComplete={75} />
					<p>Info</p>
					<ProgressBar kind='info' percentComplete={75} />
				</div>
			);
		},
	});
 
	return <Component />;
};
 
/* With Title */
export const WithTitle = () => {
	const Component = createClass({
		render() {
			return (
				<ProgressBar percentComplete={75}>
					<ProgressBar.Title>This is a title</ProgressBar.Title>
				</ProgressBar>
			);
		},
	});
 
	return <Component />;
};