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