lucid-ui
Version:
A UI component library from Xandr.
317 lines • 19.6 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NoCloseButton = exports.NoGutters = exports.NoFooter = exports.NoModal = exports.Complex = exports.LargeWithRichHeader = exports.Medium = exports.Small = exports.Basic = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importStar(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var Dialog_1 = require("./Dialog");
var Button_1 = __importDefault(require("../Button/Button"));
var SearchableMultiSelect_1 = __importDefault(require("../SearchableMultiSelect/SearchableMultiSelect"));
var SingleSelect_1 = __importDefault(require("../SingleSelect/SingleSelect"));
var CheckboxLabeled_1 = __importDefault(require("../CheckboxLabeled/CheckboxLabeled"));
var SearchField_1 = __importDefault(require("../SearchField/SearchField"));
exports.default = {
title: 'Layout/Dialog',
component: Dialog_1.Dialog,
parameters: {
docs: {
description: {
component: Dialog_1.Dialog.peek.description,
},
},
layout: 'centered',
},
args: Dialog_1.Dialog.defaultProps,
decorators: [
function (Story) { return (react_1.default.createElement("div", { style: { margin: '3em' } },
react_1.default.createElement(Story, null))); },
],
};
var Basic = function (args) {
var _a = (0, react_1.useState)(false), isShown = _a[0], setIsShown = _a[1];
var handleShow = function (isShown) {
setIsShown(isShown);
};
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(handleShow, !isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, __assign({}, args, { isShown: isShown, handleClose: lodash_1.default.partial(handleShow, !isShown), Header: 'Header' }),
react_1.default.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
lodash_1.default.times(10).map(function (i) {
return react_1.default.createElement("div", { key: i }, "Body");
}),
react_1.default.createElement(Dialog_1.Dialog.Footer, null,
react_1.default.createElement(Button_1.default, { kind: 'invisible', onClick: lodash_1.default.partial(handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
react_1.default.createElement(Button_1.default, { kind: 'primary' }, "Save")))));
};
exports.Basic = Basic;
exports.Basic.decorators = [function (Story) { return react_1.default.createElement("div", { style: { margin: '3em' } }, Story()); }];
var Small = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
isShown: false,
};
},
handleShow: function (isShown) {
this.setState({ isShown: isShown });
},
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, { isShown: this.state.isShown, handleClose: lodash_1.default.partial(this.handleShow, !this.state.isShown), Header: 'Header' },
react_1.default.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
lodash_1.default.times(10).map(function (i) {
return react_1.default.createElement("div", { key: i }, "Body");
}),
react_1.default.createElement(Dialog_1.Dialog.Footer, null,
react_1.default.createElement(Button_1.default, { kind: 'invisible', onClick: lodash_1.default.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
react_1.default.createElement(Button_1.default, { kind: 'primary' }, "Save")))));
},
});
return react_1.default.createElement(Component, null);
};
exports.Small = Small;
/* Medium */
var Medium = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
isShown: false,
};
},
handleShow: function (isShown) {
this.setState({ isShown: isShown });
},
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, { isShown: this.state.isShown, handleClose: lodash_1.default.partial(this.handleShow, !this.state.isShown), Header: 'Header', size: 'medium' },
react_1.default.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
lodash_1.default.times(50).map(function (i) {
return react_1.default.createElement("div", { key: i }, "Body");
}),
react_1.default.createElement(Dialog_1.Dialog.Footer, null,
react_1.default.createElement(Button_1.default, { kind: 'invisible', onClick: lodash_1.default.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
react_1.default.createElement(Button_1.default, { kind: 'primary' }, "Save")))));
},
});
return react_1.default.createElement(Component, null);
};
exports.Medium = Medium;
/* Large With Rich Header */
var LargeWithRichHeader = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
isShown: false,
};
},
handleShow: function (isShown) {
this.setState({ isShown: isShown });
},
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, { isShown: this.state.isShown, handleClose: lodash_1.default.partial(this.handleShow, !this.state.isShown), size: 'large' },
react_1.default.createElement(Dialog_1.Dialog.Header, null,
react_1.default.createElement("i", null, "Rich Header")),
react_1.default.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
lodash_1.default.times(50).map(function (i) {
return react_1.default.createElement("div", { key: i }, "Body");
}),
react_1.default.createElement(Dialog_1.Dialog.Footer, null,
react_1.default.createElement(Button_1.default, { kind: 'invisible', onClick: lodash_1.default.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
react_1.default.createElement(Button_1.default, { kind: 'primary' }, "Save")))));
},
});
return react_1.default.createElement(Component, null);
};
exports.LargeWithRichHeader = LargeWithRichHeader;
/* Complex */
var Complex = function () {
var style = {
marginBottom: '3px',
};
var Option = SearchableMultiSelect_1.default.Option;
var Placeholder = SingleSelect_1.default.Placeholder, SingleOption = SingleSelect_1.default.Option;
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
isShown: false,
flavors: ['chocolate'],
};
},
handleShow: function (isShown) {
this.setState({ isShown: isShown });
},
handleSelectedChocolate: function (isSelected) {
this.setState({
flavors: isSelected
? lodash_1.default.concat(this.state.flavors, 'chocolate')
: lodash_1.default.without(this.state.flavors, 'chocolate'),
});
},
handleSelectedStrawberry: function (isSelected) {
this.setState({
flavors: isSelected
? lodash_1.default.concat(this.state.flavors, 'strawberry')
: lodash_1.default.without(this.state.flavors, 'strawberry'),
});
},
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, { isComplex: true, isShown: this.state.isShown, handleClose: lodash_1.default.partial(this.handleShow, !this.state.isShown), Header: 'Advanced Filters', size: 'medium' },
react_1.default.createElement("p", { style: { fontSize: '16px' } }, "Flavor"),
react_1.default.createElement(CheckboxLabeled_1.default, { isSelected: lodash_1.default.includes(this.state.flavors, 'chocolate'), name: 'interactive-checkboxes', onSelect: this.handleSelectedChocolate, style: style },
react_1.default.createElement(CheckboxLabeled_1.default.Label, null, "Chocolate")),
react_1.default.createElement(CheckboxLabeled_1.default, { isSelected: lodash_1.default.includes(this.state.flavors, 'strawberry'), name: 'interactive-checkboxes', onSelect: this.handleSelectedStrawberry, style: style },
react_1.default.createElement(CheckboxLabeled_1.default.Label, null, "Strawberry")),
react_1.default.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Flavor Combination Research"),
react_1.default.createElement(SearchField_1.default, { placeholder: 'Sundae school...' }),
react_1.default.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Toppings"),
react_1.default.createElement(SearchableMultiSelect_1.default, { responsiveMode: 'large' },
react_1.default.createElement(Option, null, "cookie dough"),
react_1.default.createElement(Option, null, "more ice cream"),
react_1.default.createElement(Option, null, "mochi"),
react_1.default.createElement(Option, null, "peanut butter cups")),
react_1.default.createElement("p", { style: { fontSize: '16px', marginTop: '25px' } }, "Ice Cream Breaks"),
react_1.default.createElement(SingleSelect_1.default, { onSelect: this.handleSelect },
react_1.default.createElement(Placeholder, null, "You must select a break..."),
react_1.default.createElement(SingleOption, null, "10am"),
react_1.default.createElement(SingleOption, null, "11am"),
react_1.default.createElement(SingleOption, null, "1pm"),
react_1.default.createElement(SingleOption, null, "2pm")),
react_1.default.createElement(Dialog_1.Dialog.Footer, null,
react_1.default.createElement(Button_1.default, { kind: 'invisible', onClick: lodash_1.default.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
react_1.default.createElement(Button_1.default, { kind: 'primary' }, "Save")))));
},
});
return react_1.default.createElement(Component, null);
};
exports.Complex = Complex;
/* No Modal */
var NoModal = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
isShown: false,
};
},
handleShow: function (isShown) {
this.setState({ isShown: isShown });
},
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, { isModal: false, isShown: this.state.isShown, handleClose: lodash_1.default.partial(this.handleShow, !this.state.isShown), onBackgroundClick: lodash_1.default.partial(this.handleShow, false), onEscape: lodash_1.default.partial(this.handleShow, false), Header: 'Header', size: 'small' },
"In most cases, you'll probably just use an isModal Dialog, but this example shows that the Dialog doesn't have to be a modal. Try pressing \"escape\" to close this Dialog.",
react_1.default.createElement(Dialog_1.Dialog.Footer, null,
react_1.default.createElement(Button_1.default, { kind: 'invisible', onClick: lodash_1.default.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
react_1.default.createElement(Button_1.default, { kind: 'primary' }, "Save")))));
},
});
return react_1.default.createElement(Component, null);
};
exports.NoModal = NoModal;
/* No Footer */
var NoFooter = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
isShown: false,
};
},
handleShow: function (isShown) {
this.setState({ isShown: isShown });
},
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, { isShown: this.state.isShown, handleClose: lodash_1.default.partial(this.handleShow, !this.state.isShown), onBackgroundClick: lodash_1.default.partial(this.handleShow, false), onEscape: lodash_1.default.partial(this.handleShow, false), Header: 'Header', size: 'medium' }, "This `Dialog` has no footer!")));
},
});
return react_1.default.createElement(Component, null);
};
exports.NoFooter = NoFooter;
/* No Gutters */
var NoGutters = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
isShown: false,
};
},
handleShow: function (isShown) {
this.setState({ isShown: isShown });
},
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, { isShown: this.state.isShown, handleClose: lodash_1.default.partial(this.handleShow, !this.state.isShown), onBackgroundClick: lodash_1.default.partial(this.handleShow, false), onEscape: lodash_1.default.partial(this.handleShow, false), Header: 'Header', size: 'medium', hasGutters: false }, "This `Dialog` has no gutters!")));
},
});
return react_1.default.createElement(Component, null);
};
exports.NoGutters = NoGutters;
/* No Close Button */
var NoCloseButton = function () {
var Component = (0, create_react_class_1.default)({
getInitialState: function () {
return {
isShown: false,
};
},
handleShow: function (isShown) {
this.setState({ isShown: isShown });
},
render: function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'large', onClick: lodash_1.default.partial(this.handleShow, !this.state.isShown) }, "Toggle"),
react_1.default.createElement(Dialog_1.Dialog, { isShown: this.state.isShown, Header: 'Header', size: 'medium' },
react_1.default.createElement("div", { key: 'info' }, "For better UX, we recommend NOT handling onEscape and onBackgroundClick when isModal is true. The term \"modal\" implies that the user needs to interact with one of the buttons in the footer to exit the dialog."),
lodash_1.default.times(50).map(function (i) {
return react_1.default.createElement("div", { key: i }, "Body");
}),
react_1.default.createElement(Dialog_1.Dialog.Footer, null,
react_1.default.createElement(Button_1.default, { kind: 'invisible', onClick: lodash_1.default.partial(this.handleShow, false), style: { marginRight: '9px' } }, "Cancel"),
react_1.default.createElement(Button_1.default, { kind: 'primary' }, "Save")))));
},
});
return react_1.default.createElement(Component, null);
};
exports.NoCloseButton = NoCloseButton;
//# sourceMappingURL=Dialog.stories.js.map