lucid-ui
Version:
A UI component library from AppNexus.
106 lines (105 loc) • 4.55 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { ToolTipDumb } from '../../../index';
var Target = ToolTipDumb.Target,
Title = ToolTipDumb.Title,
Body = ToolTipDumb.Body;
export default createClass({
getInitialState: function getInitialState() {
return {
isExpanded: true
};
},
render: function render() {
var _this = this;
return /*#__PURE__*/React.createElement("section", {
style: {
display: 'flex',
flexDirection: 'column'
}
}, /*#__PURE__*/React.createElement("section", {
style: {
marginTop: 150,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 60,
marginBottom: 60
}
}, /*#__PURE__*/React.createElement(ToolTipDumb, {
isExpanded: this.state.isExpanded
}, /*#__PURE__*/React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), /*#__PURE__*/React.createElement(Target, null, /*#__PURE__*/React.createElement("div", null, "No Title or Close Button")))), /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 60,
marginBottom: 60
}
}, /*#__PURE__*/React.createElement(ToolTipDumb, {
isCloseable: true,
onClose: function onClose() {
return _this.setState({
isExpanded: false
});
},
isExpanded: this.state.isExpanded
}, /*#__PURE__*/React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), /*#__PURE__*/React.createElement(Target, null, /*#__PURE__*/React.createElement("div", null, "With Close Button")))), /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 60,
marginBottom: 60
}
}, /*#__PURE__*/React.createElement(ToolTipDumb, {
isCloseable: true,
onClose: function onClose() {
return _this.setState({
isExpanded: false
});
},
isExpanded: this.state.isExpanded
}, /*#__PURE__*/React.createElement(Title, null, "Title"), /*#__PURE__*/React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), /*#__PURE__*/React.createElement(Target, null, /*#__PURE__*/React.createElement("div", null, "With Title and Close Button"))))), /*#__PURE__*/React.createElement("section", {
style: {
marginTop: 150,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 60,
marginBottom: 60
}
}, /*#__PURE__*/React.createElement(ToolTipDumb, {
isLight: true,
isExpanded: this.state.isExpanded
}, /*#__PURE__*/React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), /*#__PURE__*/React.createElement(Target, null, /*#__PURE__*/React.createElement("div", null, "No Title or Close Button")))), /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 60,
marginBottom: 60
}
}, /*#__PURE__*/React.createElement(ToolTipDumb, {
isLight: true,
isCloseable: true,
onClose: function onClose() {
return _this.setState({
isExpanded: false
});
},
isExpanded: this.state.isExpanded
}, /*#__PURE__*/React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), /*#__PURE__*/React.createElement(Target, null, /*#__PURE__*/React.createElement("div", null, "With Close Button")))), /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 60,
marginBottom: 60
}
}, /*#__PURE__*/React.createElement(ToolTipDumb, {
isLight: true,
isCloseable: true,
onClose: function onClose() {
return _this.setState({
isExpanded: false
});
},
isExpanded: this.state.isExpanded
}, /*#__PURE__*/React.createElement(Title, null, "Title"), /*#__PURE__*/React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."), /*#__PURE__*/React.createElement(Target, null, /*#__PURE__*/React.createElement("div", null, "With Title and Close Button"))))));
}
});