lucid-ui
Version:
A UI component library from Xandr.
137 lines • 8.23 kB
JavaScript
;
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.Small = exports.Stateless = exports.Stateful = exports.Basic = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importStar(require("react"));
var ChatIcon_1 = require("../Icon/ChatIcon/ChatIcon");
var Button_1 = require("../Button/Button");
var Banner_1 = require("./Banner");
exports.default = {
title: 'communication/Banner',
component: Banner_1.Banner,
parameters: {
docs: {
description: {
component: Banner_1.Banner.peek.description,
},
},
},
args: Banner_1.Banner.defaultProps,
};
var Basic = function (args) { return (react_1.default.createElement(Banner_1.Banner, __assign({}, args), "Default")); };
exports.Basic = Basic;
var Stateful = function (args) {
var _a = (0, react_1.useState)(false), isClosed = _a[0], setIsClosed = _a[1];
return (react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.Button, __assign({}, Button_1.Button.defaultProps, { onClick: function () { return setIsClosed(!isClosed); }, style: { marginBottom: 8 } }), "Open/Close"),
react_1.default.createElement("br", null),
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { isClosed: isClosed, onClose: function () { return setIsClosed(true); } }), "Default")));
};
exports.Stateful = Stateful;
var Stateless = function (args) {
var kinds = [
{ label: 'Default', value: undefined },
{ label: 'Success', value: 'success' },
{ label: 'Warning', value: 'warning' },
{ label: 'Danger', value: 'danger' },
{ label: 'Info', value: 'info' },
];
return (react_1.default.createElement("div", null,
lodash_1.default.map(kinds, function (_a) {
var label = _a.label, value = _a.value;
return (react_1.default.createElement(react_1.default.Fragment, { key: "stateless-".concat(label) },
react_1.default.createElement("div", null,
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { kind: value, style: { marginBottom: 8 } }), label),
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { kind: value, isCloseable: false, style: { marginBottom: 8 } }),
label,
" -- No Close ",
String.fromCharCode(0x00d7)))));
}),
react_1.default.createElement("div", null,
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { kind: 'danger', icon: react_1.default.createElement(ChatIcon_1.ChatIcon, null), style: { marginBottom: 8 } }), "Has Icon")),
react_1.default.createElement("div", null,
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { isFilled: false, style: { marginBottom: 8 } }),
react_1.default.createElement("div", null, "Sit totam voluptas error dolorum ullam Quo ipsam esse amet mollitia consequuntur Cumque cum nisi porro cumque sit nisi Facilis placeat suscipit earum blanditiis eveniet Earum dolor voluptates perferendis quis"),
react_1.default.createElement("div", null, "Adipisicing culpa atque totam quidem dicta consequatur fugiat quaerat Facilis cupiditate amet nam in perferendis Veritatis iusto molestiae illum doloribus deserunt Odit autem obcaecati dolores ad incidunt? Ipsa eveniet modi."),
react_1.default.createElement("div", null, "Lorem sit explicabo vitae illum labore Nostrum inventore dolor nisi deserunt voluptatem Voluptas itaque nesciunt omnis necessitatibus asperiores! Eius error ab consequatur necessitatibus repudiandae quibusdam Odio consequuntur at necessitatibus at"),
react_1.default.createElement("div", null,
react_1.default.createElement("a", { href: '#' }, "Click Me")))),
lodash_1.default.map(kinds, function (_a) {
var label = _a.label, value = _a.value;
return (react_1.default.createElement(react_1.default.Fragment, { key: "stateless-outline-".concat(label) },
react_1.default.createElement("div", null,
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { kind: value, isFilled: false, style: { marginBottom: 8 } }),
react_1.default.createElement("div", null,
label,
" -- Outline"),
react_1.default.createElement("div", null, "Outline banners are for messages with multi-line content.")))));
}),
react_1.default.createElement("div", null,
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { kind: 'danger', icon: react_1.default.createElement(ChatIcon_1.ChatIcon, null), isFilled: false, style: { marginBottom: 8 } }),
react_1.default.createElement("div", null, "Has Icon -- Outline"),
react_1.default.createElement("div", null, "Outline banners are for messages with multi-line content.")))));
};
exports.Stateless = Stateless;
var Small = function (args) {
var kinds = [
{ label: 'Default', value: undefined },
{ label: 'Success', value: 'success' },
{ label: 'Warning', value: 'warning' },
{ label: 'Danger', value: 'danger' },
{ label: 'Info', value: 'info' },
];
return (react_1.default.createElement("div", null,
lodash_1.default.map(kinds, function (_a) {
var label = _a.label, value = _a.value;
return (react_1.default.createElement(react_1.default.Fragment, { key: "sm-".concat(label) },
react_1.default.createElement("div", null,
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { isSmall: true, kind: value, style: { marginBottom: 8 } }), label),
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { isSmall: true, kind: value, isCloseable: false, style: { marginBottom: 8 } }),
label,
" -- No Close ",
String.fromCharCode(0x00d7)))));
}),
lodash_1.default.map(kinds, function (_a) {
var label = _a.label, value = _a.value;
return (react_1.default.createElement(react_1.default.Fragment, { key: "sm-outline-".concat(label) },
react_1.default.createElement("div", null,
react_1.default.createElement(Banner_1.Banner, __assign({}, args, { isSmall: true, kind: value, isFilled: false, style: { marginBottom: 8 } }),
label,
" -- Outline Only"))));
})));
};
exports.Small = Small;
//# sourceMappingURL=Banner.stories.js.map