lucid-ui
Version:
A UI component library from Xandr.
68 lines • 2.54 kB
JavaScript
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.peek.description,
},
},
},
};
/* Basic */
export const Basic = () => {
const style = {
marginBottom: '10px',
marginTop: '10px',
};
class Component extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
percentComplete: 95,
};
}
render() {
return (React.createElement("div", null,
"Enter % complete:",
React.createElement(TextField, { style: style, value: this.state.value, onSubmit: (value) => this.setState({ percentComplete: value, value: '' }) }),
React.createElement(ProgressBar, { percentComplete: this.state.percentComplete })));
}
}
return React.createElement(Component, null);
};
/* Kinds */
export const Kinds = () => {
const Component = createClass({
render() {
return (React.createElement("div", null,
React.createElement("p", null, "Default"),
React.createElement(ProgressBar, { kind: 'default', percentComplete: 75 }),
React.createElement("p", null, "Success"),
React.createElement(ProgressBar, { kind: 'success', percentComplete: 75 }),
React.createElement("p", null, "Warning"),
React.createElement(ProgressBar, { kind: 'warning', percentComplete: 75 }),
React.createElement("p", null, "Danger"),
React.createElement(ProgressBar, { kind: 'danger', percentComplete: 75 }),
React.createElement("p", null, "Info"),
React.createElement(ProgressBar, { kind: 'info', percentComplete: 75 })));
},
});
return React.createElement(Component, null);
};
/* With Title */
export const WithTitle = () => {
const Component = createClass({
render() {
return (React.createElement(ProgressBar, { percentComplete: 75 },
React.createElement(ProgressBar.Title, null, "This is a title")));
},
});
return React.createElement(Component, null);
};
//# sourceMappingURL=ProgressBar.stories.js.map