lucid-ui
Version:
A UI component library from Xandr.
275 lines • 15.3 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 __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Unchanging = exports.Variants = exports.Interactive = exports.ToolTipWithButton = exports.DirectionAndAlignmentVariants = exports.Basic = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var create_react_class_1 = __importDefault(require("create-react-class"));
var Button_1 = __importDefault(require("../Button/Button"));
var ToolTip_1 = __importStar(require("./ToolTip"));
var Target = ToolTip_1.default.Target, Body = ToolTip_1.default.Body;
exports.default = {
title: 'communication/ToolTip',
component: ToolTip_1.default,
parameters: {
docs: {
description: {
component: ToolTip_1.default.peek.description,
},
},
},
argTypes: {
isCloseable: {
type: { required: false },
control: { type: 'boolean' },
},
isLight: { control: { type: 'boolean' } },
onClose: { control: false },
onMouseOver: { control: false },
onMouseOut: { control: false },
flyOutMaxWidth: { default: { value: '200px' }, control: { type: 'text' } },
direction: { options: ['down', 'up', 'right', 'left'] },
alignment: { options: ['start', 'center', 'end'] },
isExpanded: { control: { type: 'boolean' } },
portalId: { control: { type: 'text' } },
Body: { control: false },
Title: { control: false },
Target: { control: false },
children: { control: false },
className: {
control: { type: 'object' },
table: {
category: 'Uncommon Props',
},
},
style: {
control: { type: 'object' },
table: {
category: 'Uncommon Props',
},
},
flyOutStyle: {
control: { type: 'object' },
table: {
category: 'Uncommon Props',
},
},
},
args: ToolTip_1.default.defaultProps,
};
var Basic = function (args) {
return (react_1.default.createElement("section", { style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
} },
react_1.default.createElement(ToolTip_1.default, __assign({}, args),
react_1.default.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null, "Example Target")))));
};
exports.Basic = Basic;
var directions = ['right', 'up', 'down', 'left'];
var alignments = ['start', 'center', 'end'];
var DirectionAndAlignmentVariants = function (args) {
return (react_1.default.createElement("section", { style: { display: 'flex', flexDirection: 'row' } }, lodash_1.default.map(directions, function (direction) { return (react_1.default.createElement("section", { key: direction, style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: 1,
} }, lodash_1.default.map(alignments, function (alignment) { return (react_1.default.createElement("section", { key: "".concat(direction).concat(alignment), style: { margin: '30px' } },
react_1.default.createElement(ToolTip_1.default, __assign({}, args, { direction: direction, alignment: alignment }),
react_1.default.createElement(Body, null,
"ToolTip: is a utility component to create a transient message anchored to another component. My direction is \"",
direction,
"\". My alignment is \"",
alignment,
"\"."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null,
"Target ",
direction,
" ",
alignment))))); }))); })));
};
exports.DirectionAndAlignmentVariants = DirectionAndAlignmentVariants;
var ToolTipWithButton = function (args) {
return (react_1.default.createElement("section", { style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
} },
react_1.default.createElement(ToolTip_1.default, __assign({}, args),
react_1.default.createElement(Body, null,
"ToolTip is a utility component to create a transient message anchored to another component.",
react_1.default.createElement(Button_1.default, { kind: 'primary' }, "View Results")),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null, "Example Target")))));
};
exports.ToolTipWithButton = ToolTipWithButton;
/* Interactive */
var Interactive = function (args) {
var Target = ToolTip_1.default.Target, Title = ToolTip_1.default.Title, Body = ToolTip_1.default.Body;
var directions = ['right', 'up', 'down', 'left'];
var alignments = ['start', 'center', 'end'];
return (react_1.default.createElement("section", { style: { display: 'flex', flexDirection: 'row' } }, lodash_1.default.map(directions, function (direction) { return (react_1.default.createElement("section", { key: direction, style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: 1,
} }, lodash_1.default.map(alignments, function (alignment) { return (react_1.default.createElement("section", { key: "".concat(direction).concat(alignment), style: { margin: '30px' } },
react_1.default.createElement(ToolTip_1.default, __assign({}, args, { direction: direction, alignment: alignment }),
react_1.default.createElement(Title, null,
"Title: ",
direction,
" ",
alignment),
react_1.default.createElement(Body, null,
"ToolTip is a utility component to create a transient message anchored to another component. My direction is \"",
direction,
"\". My alignment is \"",
alignment,
"\"."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null,
"Target ",
direction,
" ",
alignment))))); }))); })));
};
exports.Interactive = Interactive;
/* Variants */
var Variants = function (_a) {
var args = __rest(_a, []);
var Target = ToolTip_1.ToolTipDumb.Target, Title = ToolTip_1.ToolTipDumb.Title, Body = ToolTip_1.ToolTipDumb.Body;
var Component = (0, create_react_class_1.default)({
getInitialState: function () { return ({ isExpanded: true }); },
render: function () {
var _this = this;
return (react_1.default.createElement("section", { style: {
display: 'flex',
flexDirection: 'column',
} },
react_1.default.createElement("section", { style: {
marginTop: 150,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
} },
react_1.default.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
react_1.default.createElement(ToolTip_1.ToolTipDumb, __assign({}, args, { isExpanded: this.state.isExpanded }),
react_1.default.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null, "No Title or Close Button")))),
react_1.default.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
react_1.default.createElement(ToolTip_1.ToolTipDumb, { isCloseable: true, onClose: function () { return _this.setState({ isExpanded: false }); }, isExpanded: this.state.isExpanded },
react_1.default.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null, "With Close Button")))),
react_1.default.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
react_1.default.createElement(ToolTip_1.ToolTipDumb, { isCloseable: true, onClose: function () { return _this.setState({ isExpanded: false }); }, isExpanded: this.state.isExpanded },
react_1.default.createElement(Title, null, "Title"),
react_1.default.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null, "With Title and Close Button"))))),
react_1.default.createElement("section", { style: {
marginTop: 150,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
} },
react_1.default.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
react_1.default.createElement(ToolTip_1.ToolTipDumb, { isLight: true, isExpanded: this.state.isExpanded },
react_1.default.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null, "No Title or Close Button")))),
react_1.default.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
react_1.default.createElement(ToolTip_1.ToolTipDumb, { isLight: true, isCloseable: true, onClose: function () { return _this.setState({ isExpanded: false }); }, isExpanded: this.state.isExpanded },
react_1.default.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null, "With Close Button")))),
react_1.default.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
react_1.default.createElement(ToolTip_1.ToolTipDumb, { isLight: true, isCloseable: true, onClose: function () { return _this.setState({ isExpanded: false }); }, isExpanded: this.state.isExpanded },
react_1.default.createElement(Title, null, "Title"),
react_1.default.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null, "With Title and Close Button")))))));
},
});
return react_1.default.createElement(Component, null);
};
exports.Variants = Variants;
/* Unchanging */
var Unchanging = function (args) {
var Target = ToolTip_1.ToolTipDumb.Target, Title = ToolTip_1.ToolTipDumb.Title, Body = ToolTip_1.ToolTipDumb.Body;
return (react_1.default.createElement("section", { style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
} }, lodash_1.default.map(['right', 'up', 'down', 'left'], function (direction) {
return lodash_1.default.map(['start', 'center', 'end'], function (alignment) { return (react_1.default.createElement("section", { key: "".concat(direction).concat(alignment), style: { margin: '90px' } },
react_1.default.createElement(ToolTip_1.ToolTipDumb, __assign({}, args, { direction: direction, alignment: alignment, isExpanded: true }),
react_1.default.createElement(Title, null,
"Title: ",
direction,
" ",
alignment),
react_1.default.createElement(Body, null,
"ToolTip is a utility component to create a transient message anchored to another component. My direction is \"",
direction,
"\". My alignment is \"",
alignment,
"\"."),
react_1.default.createElement(Target, null,
react_1.default.createElement("div", null,
"Target ",
direction,
" ",
alignment))))); });
})));
};
exports.Unchanging = Unchanging;
//# sourceMappingURL=ToolTip.stories.js.map