lucid-ui
Version:
A UI component library from Xandr.
98 lines • 4.4 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithTitle = exports.Kinds = exports.Basic = void 0;
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var TextField_1 = __importDefault(require("../TextField/TextField"));
var ProgressBar_1 = __importDefault(require("./ProgressBar"));
exports.default = {
title: 'Communication/ProgressBar',
component: ProgressBar_1.default,
parameters: {
docs: {
description: {
component: ProgressBar_1.default.peek.description,
},
},
},
};
/* Basic */
var Basic = function () {
var style = {
marginBottom: '10px',
marginTop: '10px',
};
var Component = /** @class */ (function (_super) {
__extends(Component, _super);
function Component(props) {
var _this = _super.call(this, props) || this;
_this.state = {
value: '',
percentComplete: 95,
};
return _this;
}
Component.prototype.render = function () {
var _this = this;
return (react_1.default.createElement("div", null,
"Enter % complete:",
react_1.default.createElement(TextField_1.default, { style: style, value: this.state.value, onSubmit: function (value) {
return _this.setState({ percentComplete: value, value: '' });
} }),
react_1.default.createElement(ProgressBar_1.default, { percentComplete: this.state.percentComplete })));
};
return Component;
}(react_1.default.Component));
return react_1.default.createElement(Component, null);
};
exports.Basic = Basic;
/* Kinds */
var Kinds = function () {
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "Default"),
react_1.default.createElement(ProgressBar_1.default, { kind: 'default', percentComplete: 75 }),
react_1.default.createElement("p", null, "Success"),
react_1.default.createElement(ProgressBar_1.default, { kind: 'success', percentComplete: 75 }),
react_1.default.createElement("p", null, "Warning"),
react_1.default.createElement(ProgressBar_1.default, { kind: 'warning', percentComplete: 75 }),
react_1.default.createElement("p", null, "Danger"),
react_1.default.createElement(ProgressBar_1.default, { kind: 'danger', percentComplete: 75 }),
react_1.default.createElement("p", null, "Info"),
react_1.default.createElement(ProgressBar_1.default, { kind: 'info', percentComplete: 75 })));
},
});
return react_1.default.createElement(Component, null);
};
exports.Kinds = Kinds;
/* With Title */
var WithTitle = function () {
var Component = (0, create_react_class_1.default)({
render: function () {
return (react_1.default.createElement(ProgressBar_1.default, { percentComplete: 75 },
react_1.default.createElement(ProgressBar_1.default.Title, null, "This is a title")));
},
});
return react_1.default.createElement(Component, null);
};
exports.WithTitle = WithTitle;
//# sourceMappingURL=ProgressBar.stories.js.map