lucid-ui
Version:
A UI component library from AppNexus.
39 lines • 1.6 kB
JavaScript
import _map from "lodash/map";
import React from 'react';
import createClass from 'create-react-class';
import { ToolTip } from '../../../index';
var Target = ToolTip.Target,
Title = ToolTip.Title,
Body = ToolTip.Body;
var directions = ['right', 'up', 'down', 'left'];
var alignments = ['start', 'center', 'end'];
export default createClass({
render: function render() {
return /*#__PURE__*/React.createElement("section", {
style: {
display: 'flex',
flexDirection: 'row'
}
}, _map(directions, function (direction) {
return /*#__PURE__*/React.createElement("section", {
key: direction,
style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: 1
}
}, _map(alignments, function (alignment) {
return /*#__PURE__*/React.createElement("section", {
key: "".concat(direction).concat(alignment),
style: {
margin: '30px'
}
}, /*#__PURE__*/React.createElement(ToolTip, {
direction: direction,
alignment: alignment
}, /*#__PURE__*/React.createElement(Title, null, "Title: ", direction, " ", alignment), /*#__PURE__*/React.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, "\"."), /*#__PURE__*/React.createElement(Target, null, /*#__PURE__*/React.createElement("div", null, "Target ", direction, " ", alignment))));
}));
}));
}
});