UNPKG

lucid-ui

Version:

A UI component library from AppNexus.

github.com/appnexus/lucid

appnexus/lucid

58 lines (57 loc) • 4.28 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import React from 'react'; import createClass from 'create-react-class'; import { ToolTipDumb } from '../../../index'; const { Target, Title, Body } = ToolTipDumb; export default createClass({ getInitialState: () => ({ isExpanded: true }), render() { return (React.createElement("section", { style: { display: 'flex', flexDirection: 'column', } }, React.createElement("section", { style: { marginTop: 150, display: 'flex', flexDirection: 'row', justifyContent: 'space-around', } }, React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } }, React.createElement(ToolTipDumb, { isExpanded: this.state.isExpanded }, React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), React.createElement(Target, null, React.createElement("div", null, "No Title or Close Button")))), React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } }, React.createElement(ToolTipDumb, { isCloseable: true, onClose: () => this.setState({ isExpanded: false }), isExpanded: this.state.isExpanded }, React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), React.createElement(Target, null, React.createElement("div", null, "With Close Button")))), React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } }, React.createElement(ToolTipDumb, { isCloseable: true, onClose: () => this.setState({ isExpanded: false }), isExpanded: this.state.isExpanded }, React.createElement(Title, null, "Title"), React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), React.createElement(Target, null, React.createElement("div", null, "With Title and Close Button"))))), React.createElement("section", { style: { marginTop: 150, display: 'flex', flexDirection: 'row', justifyContent: 'space-around', } }, React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } }, React.createElement(ToolTipDumb, { isLight: true, isExpanded: this.state.isExpanded }, React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), React.createElement(Target, null, React.createElement("div", null, "No Title or Close Button")))), React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } }, React.createElement(ToolTipDumb, { isLight: true, isCloseable: true, onClose: () => this.setState({ isExpanded: false }), isExpanded: this.state.isExpanded }, React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), React.createElement(Target, null, React.createElement("div", null, "With Close Button")))), React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } }, React.createElement(ToolTipDumb, { isLight: true, isCloseable: true, onClose: () => this.setState({ isExpanded: false }), isExpanded: this.state.isExpanded }, React.createElement(Title, null, "Title"), React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), React.createElement(Target, null, React.createElement("div", null, "With Title and Close Button"))))))); }, });