@blueeast/bluerain-plugin-material-ui
Version:
Adds [Material UI](http://www.material-ui.com/#/) theme Provider to BlueRain. Components of material-ui have been developed using a common interface. [https://blueeast.gitbook.io/bluerain-plugin-material-ui](https://blueeast.gitbook.io/bluerain-plugin-mat
112 lines • 10.8 kB
JavaScript
"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const React = __importStar(require("react"));
const Button_1 = require("../../Button");
const react_1 = require("@storybook/react");
const addon_actions_1 = require("@storybook/addon-actions");
const addon_knobs_1 = require("@storybook/addon-knobs");
const Add_1 = __importDefault(require("@material-ui/icons/Add"));
const bluerain_os_1 = __importDefault(require("@blueeast/bluerain-os"));
const Icon_1 = __importDefault(require("@material-ui/core/Icon"));
const Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
const Navigation_1 = __importDefault(require("@material-ui/icons/Navigation"));
react_1.storiesOf('Button', module).addDecorator(addon_knobs_1.withKnobs).add('Primary Button with knobs', () => {
const label = addon_knobs_1.text('label as child', 'withknobs');
const disabled = addon_knobs_1.boolean('disabled', false);
const fullWidth = addon_knobs_1.boolean('fullWidth', false);
const fab = addon_knobs_1.boolean('fab', false);
const small = addon_knobs_1.boolean('small', false);
return (React.createElement(Button_1.Button
// color={color}
, {
// color={color}
onPress: addon_actions_1.action('I was clicked with knobs'), disabled: disabled, fullWidth: fullWidth, fab: fab, small: small, variant: 'contained' }, label));
});
react_1.storiesOf('Button', module).add('Default Button without Text tag in Child', () => React.createElement(Button_1.Button, { color: 'default' }, "Default"));
react_1.storiesOf('Button', module).add('Default Button with title prop', () => React.createElement(Button_1.Button, { color: 'default', title: "hero" }));
react_1.storiesOf('Button', module).add('Button with style prop', () => React.createElement(Button_1.Button, { color: "primary", style: { backgroundColor: 'purple', borderColor: 'purple' } }, "Custom Purple"));
react_1.storiesOf('Button', module).add('Button with onPress prop', () => React.createElement(Button_1.Button, { color: "inherit", onPress: () => { console.log('I was pressed'); } }, "onPress"));
react_1.storiesOf('Button', module).add('Button with disabled prop true', () => React.createElement(Button_1.Button, { disabled: true }, "Disabled"));
react_1.storiesOf('Button', module).add('Button with href prop', () => React.createElement(Button_1.Button, { href: "https://www.facebook.com" }, "href"));
react_1.storiesOf('Button', module).add('Primary Button with onPress prop', () => React.createElement(Button_1.Button, { variant: 'contained', color: "primary", fullWidth: true }, "FullWidth"));
react_1.storiesOf('Button', module).add('Button with active prop true', () => React.createElement(Button_1.Button, { active: true }, "Active"));
react_1.storiesOf('Button', module).add('Accent button with bordered prop true', () => React.createElement(Button_1.Button, { bordered: true }, "Bordered"));
react_1.storiesOf('Button', module).add('Primary button with iconLeft prop', () => React.createElement(Button_1.Button, { color: "primary", iconLeft: React.createElement(Add_1.default, null) }, "Icon Left"));
react_1.storiesOf('Button', module).add('Transparent Button with icon as child', () => React.createElement(Button_1.Button, { style: { backgroundColor: 'transparent', boxShadow: 'none', border: 0 } },
React.createElement(Add_1.default, null)));
react_1.storiesOf('Button', module).add('Contrast button with iconRight prop', () => React.createElement(Button_1.Button, { color: "primary", iconRight: React.createElement(Add_1.default, null) }, "Icon Right"));
react_1.storiesOf('Button', module).add('Primary button with round prop and small prop', () => React.createElement(Button_1.Button, { color: "primary", rounded: true, small: true }, "sm"));
react_1.storiesOf('Button', module).add('Accent button with large prop true', () => React.createElement(Button_1.Button, { color: "primary", variant: 'contained', large: true }, "Primary"));
react_1.storiesOf('Button', module).add('Success button with success property', () => React.createElement(Button_1.Button, { success: true, style: { color: 'white' }, large: true }, "Success"));
react_1.storiesOf('Button', module).add('Warning button with warning property', () => React.createElement(Button_1.Button, { warning: true, style: { color: 'white' }, large: true }, "Warning"));
react_1.storiesOf('Button', module).add('Dark button with dark property', () => React.createElement(Button_1.Button, { dark: true, style: { color: 'white' }, large: true }, "Dark"));
react_1.storiesOf('Button', module).add('Primary button with primary property', () => React.createElement(Button_1.Button, { primary: true, style: { color: 'white' } }, "Large"));
react_1.storiesOf('Button', module).add('Danger button with danger property', () => React.createElement(Button_1.Button, { danger: true, style: { color: 'white' }, large: true }, "Danger"));
react_1.storiesOf('Button', module).add('Light button with light property', () => React.createElement(Button_1.Button, { light: true, large: true }, "Light"));
react_1.storiesOf('Button', module).add('Text Buttons', () => {
return (React.createElement(bluerain_os_1.default.Components.View, { style: { disply: 'flex', flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'white' } },
React.createElement(Button_1.Button, null, "Default"),
React.createElement(Button_1.Button, { color: "primary" }, "Primary"),
React.createElement(Button_1.Button, { color: "secondary" }, "Secondary"),
React.createElement(Button_1.Button, { disabled: true }, "Disabled"),
React.createElement(Button_1.Button, { href: "#text-buttons" }, "Link")));
});
react_1.storiesOf('Button', module).add('Outlined Button', () => {
return (React.createElement(bluerain_os_1.default.Components.View, { style: { disply: 'flex', flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'white' } },
React.createElement(Button_1.Button, { variant: "outlined" }, "Default"),
React.createElement(Button_1.Button, { variant: "outlined", color: "primary" }, "Primary"),
React.createElement(Button_1.Button, { variant: "outlined", color: "secondary" }, "Secondary"),
React.createElement(Button_1.Button, { variant: "outlined", disabled: true }, "Disabled"),
React.createElement(Button_1.Button, { variant: "outlined", href: "#outlined-buttons" }, "Link")));
});
react_1.storiesOf('Button', module).add('Contained Button', () => {
return (React.createElement(bluerain_os_1.default.Components.View, { style: { disply: 'flex', flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'white' } },
React.createElement(Button_1.Button, { variant: "contained" }, "Default"),
React.createElement(Button_1.Button, { variant: "contained", color: "primary" }, "Primary"),
React.createElement(Button_1.Button, { variant: "contained", color: "secondary" }, "Secondary"),
React.createElement(Button_1.Button, { variant: "contained", color: "secondary", disabled: true }, "Disabled"),
React.createElement(Button_1.Button, { variant: "contained", href: "#contained-buttons" }, "Link")));
});
react_1.storiesOf('Button', module).add('Floating Action Buttons', () => {
return (React.createElement(bluerain_os_1.default.Components.View, { style: { disply: 'flex', flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'white' } },
React.createElement(Button_1.Button, { variant: "fab", color: "primary", "aria-label": "Add" },
React.createElement(Add_1.default, null)),
React.createElement(Button_1.Button, { variant: "fab", color: "secondary", "aria-label": "Edit" },
React.createElement(Icon_1.default, null, "edit_icon")),
React.createElement(Button_1.Button, { variant: "extendedFab", "aria-label": "Delete" },
React.createElement(Navigation_1.default, { style: { marginRight: 8 } }),
"Extended"),
React.createElement(Button_1.Button, { variant: "fab", disabled: true, "aria-label": "Delete" },
React.createElement(Delete_1.default, null))));
});
react_1.storiesOf('Button', module).add('Sizes Buttons', () => {
return (React.createElement(bluerain_os_1.default.Components.View, { style: { display: 'flex', flexDirection: 'column', backgroundColor: 'white' } },
React.createElement(bluerain_os_1.default.Components.View, { style: { disply: 'flex', flexDirection: 'row', justifyContent: 'space-between' } },
React.createElement(Button_1.Button, { size: "small" }, "Small"),
React.createElement(Button_1.Button, { size: "medium" }, "Medium"),
React.createElement(Button_1.Button, { size: "large" }, "Large")),
React.createElement(bluerain_os_1.default.Components.View, { style: { disply: 'flex', flexDirection: 'row', justifyContent: 'space-between' } },
React.createElement(Button_1.Button, { variant: "outlined", size: "small", color: "primary" }, "Small"),
React.createElement(Button_1.Button, { variant: "outlined", size: "medium", color: "primary" }, "Medium"),
React.createElement(Button_1.Button, { variant: "outlined", size: "large", color: "primary" }, "Large")),
React.createElement(bluerain_os_1.default.Components.View, { style: { disply: 'flex', flexDirection: 'row', justifyContent: 'space-between' } },
React.createElement(Button_1.Button, { variant: "contained", size: "small", color: "primary" }, "Small"),
React.createElement(Button_1.Button, { variant: "contained", size: "medium", color: "primary" }, "Medium"),
React.createElement(Button_1.Button, { variant: "contained", size: "large", color: "primary" }, "Large")),
React.createElement(bluerain_os_1.default.Components.View, { style: { disply: 'flex', flexDirection: 'row', justifyContent: 'space-between' } },
React.createElement(Button_1.Button, { variant: "fab", mini: true, color: "secondary", "aria-label": "Add" },
React.createElement(Add_1.default, null)),
React.createElement(Button_1.Button, { variant: "fab", color: "secondary", "aria-label": "Add" },
React.createElement(Add_1.default, null)))));
});
//# sourceMappingURL=Button.stories.js.map